/**
 * MADDev Bootstrap — project-specific styles.
 *
 * Site-specific layer loaded at weight 100, after global-styling.
 * All colors use var(--mad-*) tokens defined in css/colors.css.
 * No color literals in this file.
 *
 * This IS committed to git (gitignored rule was a drafting convention;
 * this file contains production site styles and must ship).
 */

/* ── Extended layout tokens ──────────────────────────────────────── */

:root {
  /* Blueprint opacity scale: blueprint elements live at these levels */
  --mad-bp-faint:  0.07;   /* barely-there guide-grid */
  --mad-bp-light:  0.13;   /* crosshairs, tick marks  */
  --mad-bp-mid:    0.20;   /* commit refs, annotations */
}

/* ── Navbar — extended wordmark treatment ────────────────────────── */

/* Override the default Bootstrap container for the navbar so it matches
   our max-width shell rather than the narrow Bootstrap container. */
.navbar > .container {
  max-width: calc(var(--mad-max-w) + 2 * var(--mad-gutter));
}

/* Hide plain "MADDev" site-title text in navbar — the logo SVG carries
   the brand identity. We show the site name only if logo is absent. */
.navbar-brand .site-title {
  font-family: var(--mad-font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--mad-paper) !important;
  padding-left: 6px;
}

/* ── Hero — wordmark enhancement ────────────────────────────────── */

/* Hero is now fully structured in Twig (paragraph--hero.html.twig).
   The wordmark, strap, meta line, eyebrow, and tagline are rendered
   via explicit markup and styled via .hero-* classes in style.css.
   No field-level overrides needed here. */

/* ── Stats band — blueprint decoration ───────────────────────────── */

.paragraph--type--stats {
  position: relative;
}

/* Faint git commit-ref annotation at top-right of stats band */
.paragraph--type--stats::after {
  content: "b8d4f2a  ·  main";
  position: absolute;
  top: 10px;
  right: var(--mad-gutter);
  font-family: var(--mad-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--mad-ink);
  opacity: var(--mad-bp-mid);
  pointer-events: none;
  z-index: 1;
}

/* ── Page-node layout: remove Bootstrap container for full-width bands ── */

/* Pages with field_sections (stacked paragraphs) need full-width bands.
   Bootstrap's .container constrains the content area; we override the
   row/col nesting for the main content column so paragraphs can bleed. */

.node--type-page .node__content > .field--name-field-sections,
.node--type-page .node__content > .field--name-body {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* ── Node page title strip ────────────────────────────────────────── */

/* Pages that are NOT the front page show a title band above the paragraphs */
.path-node:not(.path-frontpage) article.node > h2.node__title,
.path-node:not(.path-frontpage) article.node > h1.node__title {
  font-size: clamp(28px, 4.5vw, 60px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  padding: clamp(32px, 4vw, 64px) var(--mad-gutter) clamp(16px, 2vw, 32px);
  max-width: calc(var(--mad-max-w) + 2 * var(--mad-gutter));
  margin: 0 auto;
  border-bottom: 1px solid var(--mad-rule);
  position: relative;
}

/* Mono annotation after page title — blueprint hash */
.path-node:not(.path-frontpage) article.node > h1.node__title::after,
.path-node:not(.path-frontpage) article.node > h2.node__title::after {
  content: attr(data-node-id);
  position: absolute;
  bottom: 8px;
  right: var(--mad-gutter);
  font-family: var(--mad-font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--mad-ink);
  opacity: var(--mad-bp-light);
}

/* ── Capabilities — maturity pills ────────────────────────────────── */

/* CSS-only maturity pill variant per content:
   Drupal renders the field__item directly as text "Proven", "Built", etc.
   We use :has() / adjacent selector tricks and attribute-selectors.
   Fallback: since we can't use content-matching in CSS, we use color
   for all pills with a slightly different treatment via js-free cascade. */

/* All pills: default style */
.node--type-capability .field--name-field-maturity .field__item {
  background-color: var(--mad-ink-10);
  color: var(--mad-support);
  border-color: var(--mad-rule);
}

/* Twig template will add data-maturity attribute — handled there.
   CSS fallback: if maturity text IS "Proven" detected via a selector hack:
   we cannot match text content in pure CSS; instead we style them all
   identically with a data attribute added by the Twig template. */

/* Data-attribute variants (set by paragraph--type--capability Twig template) */
.maturity-proven {
  background-color: var(--mad-support) !important;
  color: var(--mad-paper) !important;
  border-color: var(--mad-support) !important;
}

.maturity-built,
.maturity-prototyping {
  background-color: transparent;
  color: var(--mad-support);
  border-color: var(--mad-support-40) !important;
}

.maturity-roadmap {
  background-color: var(--mad-ink-10);
  color: var(--mad-ink-40);
  border-color: var(--mad-rule-2) !important;
  font-style: italic;
}

/* ── Content-band intro text ─────────────────────────────────────── */

/* F-005: intro paragraph renders between the section title and the card grid. */
.paragraph--type--content-band .field--name-field-band-intro {
  max-width: 680px;
  font-family: var(--mad-font-ui);
  font-size: 16px;
  line-height: 1.6;
  color: var(--mad-ink-70);
  margin-bottom: 28px;
}

/* ── Content-band card grid — enhanced ────────────────────────────── */

/* Blueprint fragment annotating each card */
.paragraph--type--content-band .field--name-field-content > .field__item::after {
  content: "";
  display: block;
  width: 24px;
  height: 1px;
  background: var(--mad-rule-2);
  margin-top: 12px;
}

/* Content band alternating background */
.field__items > .field__item:nth-child(even) > .paragraph--type--content-band {
  background-color: var(--mad-support-15);
}

/* ── CTA band — enhanced dark treatment ──────────────────────────── */

/* The cta-band with "On" dark-mode gets the real ink background.
   Because :has(.field--name-field-dark-mode .field__item) matches
   ALL cta-bands (the field always renders), we use a more precise
   selector: the dark-mode field__item must contain the text "On". */

/* Twig template adds .is-dark class when field_dark_mode is TRUE.
   See paragraph--type--cta-band.html.twig. */

.paragraph--type--cta-band.is-dark {
  background-color: var(--mad-ink);
  color: var(--mad-paper);
  text-align: center;
}

.paragraph--type--cta-band.is-dark .field--name-field-title {
  color: var(--mad-paper);
}

.paragraph--type--cta-band.is-dark .field--name-field-body-long {
  color: var(--mad-paper-70);
}

/* Remove the :has() rule from style.css for cta-band since it was
   too broad — the .is-dark class (from Twig) is the reliable hook.
   Re-declare overrides for .is-dark only: */

.paragraph--type--cta-band:not(.is-dark) {
  background-color: var(--mad-paper);
  color: var(--mad-ink);
}

.paragraph--type--cta-band:not(.is-dark)::before {
  display: none;
}

/* ── FAQ — details/summary enhancement ────────────────────────────── */

/* Convert FAQ items to details/summary collapsibles via CSS visual treatment
   (actual markup is divs, so we fake the accordion look). */

.paragraph--type--faq-item .field--name-field-question {
  position: relative;
  padding-right: 32px;
}

/* Expand indicator */
.paragraph--type--faq-item .field--name-field-question::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 22px;
  font-family: var(--mad-font-mono);
  font-size: 18px;
  color: var(--mad-support);
  line-height: 1;
}

/* ── Footer — brand block styling ────────────────────────────────── */

/* "Powered by Drupal" block: hide the default Drupal text entirely.
   The "Made in Madagascar" note is now real markup in page.html.twig
   (.footer-bottom__base). */
#block-maddev-bootstrap-powered-by-drupal span {
  display: none;
}

#block-maddev-bootstrap-powered-by-drupal::after {
  display: none; /* F-022: removed CSS-generated "Made in Madagascar" shortcut */
}

/* ── Footer bottom section (F-022 — real markup, not ::after) ─────── */

/* Footer bottom bar was previously CSS ::after generated content in both
   project.css (© line) and #block-maddev-bootstrap-powered-by-drupal::after
   ("Made in Madagascar"). Both have been replaced with real markup in
   page.html.twig (.footer-bottom). */

.footer-bottom {
  margin-top: clamp(40px, 5vw, 72px);
  padding-top: clamp(28px, 3vw, 48px);
  border-top: 1px solid var(--mad-paper-20);
  position: relative;
  z-index: 1;
}

/* "Let's build something together." — serif display, paper on ink */
.footer-cta-link {
  display: block;
  font-family: var(--mad-font-display);
  font-size: clamp(26px, 4vw, 48px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--mad-paper);
  text-decoration: none;
  margin-bottom: clamp(16px, 2vw, 28px);
  transition: color 0.15s ease;
}

.footer-cta-link:hover {
  color: var(--mad-support);
  text-decoration: none;
}

/* Contact line — mono, smaller */
.footer-bottom__contact {
  font-family: var(--mad-font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--mad-paper-70);
  margin-bottom: clamp(20px, 2.5vw, 36px);
  max-width: none;
}

.footer-bottom__contact a {
  color: var(--mad-paper-70);
  text-decoration: none;
  border-bottom: 1px solid var(--mad-paper-20);
  transition: color 0.15s, border-color 0.15s;
}

.footer-bottom__contact a:hover {
  color: var(--mad-paper);
  border-color: var(--mad-paper-40);
}

/* Base bar: © + Made in Madagascar */
.footer-bottom__base {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-copyright,
.footer-made-in {
  font-family: var(--mad-font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mad-paper-20);
}

/* ── Work index page ────────────────────────────────────────────── */

/* Work page: use the case_study teaser as a feature-list row */
.view-work .view-content {
  display: flex;
  flex-direction: column;
}

.view-work article.node--type-case-study.node--view-mode-teaser {
  padding: 32px var(--mad-gutter);
  max-width: var(--mad-max-w);
  margin: 0 auto;
  width: 100%;
}

/* Blueprint mono index number before each case study */
.view-work .views-row {
  counter-increment: case-study-idx;
  position: relative;
}

.view-work .views-row::before {
  content: counter(case-study-idx, decimal-leading-zero);
  position: absolute;
  top: 32px;
  left: var(--mad-gutter);
  font-family: var(--mad-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--mad-ink);
  opacity: var(--mad-bp-mid);
}

/* ── Blueprint device — section label annotations ────────────────── */

/* Each section band gets a faint git-style branch label floating top-right.
   We rotate through "labels" via nth-child. These are purely decorative. */
.paragraph--type--text-only:nth-of-type(1)::after {
  content: "about  ·  nid:1";
}

.paragraph--type--text-only:nth-of-type(2)::after {
  content: "pricing  ·  text_only";
}

/* Override the crosshair ::after to be an annotation where applicable */
.paragraph--type--content-band::after {
  top: 10px;
  right: var(--mad-gutter);
  font-family: var(--mad-font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--mad-ink);
  opacity: var(--mad-bp-faint);
  pointer-events: none;
  /* content is set per component in style.css */
}

/* ── Pricing page — table styling ───────────────────────────────── */

/* The pricing comparison table is rendered as HTML in the body field.
   Target it within the text-only body. */

.paragraph--type--text-only .field--name-field-body table,
.node--type-page .field--name-body table {
  margin-top: 32px;
  margin-bottom: 32px;
  font-family: var(--mad-font-mono);
  border-top: 1px solid var(--mad-rule);
}

.paragraph--type--text-only .field--name-field-body th,
.node--type-page .field--name-body th {
  background-color: var(--mad-ink-10);
  color: var(--mad-support);
  font-family: var(--mad-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
}

.paragraph--type--text-only .field--name-field-body td,
.node--type-page .field--name-body td {
  font-family: var(--mad-font-mono);
  font-size: 14px;
}

/* First column of pricing table — service name in display font */
.paragraph--type--text-only .field--name-field-body td:first-child {
  font-family: var(--mad-font-display);
  font-size: 17px;
  font-style: italic;
}

/* ── Text-only dark mode — scoped ────────────────────────────────── */

/* text-only paragraphs that have field_dark_mode = "Off" keep paper bg.
   We rely on the .is-dark class added by the Twig template. */

.paragraph--type--text-only.is-dark {
  background-color: var(--mad-ink);
  color: var(--mad-paper);
}

.paragraph--type--text-only.is-dark .field--name-field-kickoff {
  color: var(--mad-paper);
}

.paragraph--type--text-only.is-dark .field--name-field-body,
.paragraph--type--text-only.is-dark .field--name-field-body-long {
  color: var(--mad-paper-70);
}

.paragraph--type--text-only.is-dark .field--name-field-body a,
.paragraph--type--text-only.is-dark .field--name-field-body-long a {
  color: var(--mad-paper-70);
}

/* ── About / model pages — body text ─────────────────────────────── */

/* Regular node body field (not in a paragraph) */
.node__content > .field--name-body {
  padding: var(--mad-section-v) var(--mad-gutter);
  max-width: calc(var(--mad-max-w) + 2 * var(--mad-gutter));
  margin: 0 auto;
}

.node__content > .field--name-body .field__item {
  max-width: 720px;
  font-family: var(--mad-font-ui);
  font-size: 17px;
  line-height: 1.65;
  color: var(--mad-ink-70);
}

.node__content > .field--name-body h2 {
  font-size: clamp(22px, 2.8vw, 36px);
  margin-top: 2em;
  margin-bottom: 0.5em;
  color: var(--mad-ink);
}

.node__content > .field--name-body h3 {
  font-size: clamp(18px, 2vw, 24px);
  margin-top: 1.5em;
  color: var(--mad-ink);
}

.node__content > .field--name-body blockquote {
  border-left: 3px solid var(--mad-support);
  margin-left: 0;
  padding-left: 20px;
  font-family: var(--mad-font-display);
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: var(--mad-ink-70);
}

/* ── View header / page title bands ─────────────────────────────── */

/* Views-generated page titles (Work, Capabilities, etc.) */
.view > h2,
.block-views-exposed-filter-blockt h2,
.views-element-container > h2 {
  font-size: clamp(32px, 5vw, 60px);
  font-weight: 600;
  letter-spacing: -0.02em;
  padding: clamp(32px, 4vw, 60px) var(--mad-gutter) 0;
  max-width: calc(var(--mad-max-w) + 2 * var(--mad-gutter));
  margin: 0 auto 0;
  border-bottom: none;
}

/* Page header block */
.block-page-title-block h1 {
  font-size: clamp(32px, 5vw, 60px);
  font-weight: 600;
  letter-spacing: -0.02em;
  padding: clamp(32px, 4vw, 60px) 0 0;
}

/* ── Webform — contact page decoration ───────────────────────────── */

/* Contact page: show a faint "start_a_project" annotation */
.node--type-page.path-contact .node__content::before,
.webform-submission-form::before {
  content: "start_a_project  ·  webform";
  display: block;
  font-family: var(--mad-font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mad-ink);
  opacity: var(--mad-bp-light);
  margin-bottom: 20px;
}

/* Webform field labels */
.webform-submission-form .form-item > label,
.webform-submission-form .form-item .fieldset-legend {
  display: block;
  font-family: var(--mad-font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mad-support);
  margin-bottom: 6px;
}

/* Webform actions */
.webform-submission-form .form-actions {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--mad-rule);
}

/* ── Responsive / mobile ─────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Reduce blueprint noise on small screens */
  .paragraph::before,
  .paragraph::after {
    display: none;
  }

  .navbar::before {
    display: none;
  }

  footer[role="contentinfo"]::before {
    display: none;
  }

  /* Stack footer columns */
  footer[role="contentinfo"] .row {
    flex-direction: column;
    gap: 32px;
  }

  /* Stats 2-col on small screens — flex override (belt-and-braces; primary rule in style.css) */
  .paragraph--type--stats .field--name-field-stats > .field__item {
    flex: 1 1 calc(50% - 12px);
  }
}

@media (min-width: 769px) {
  /* Footer columns: brand wide, two nav columns equal */
  footer[role="contentinfo"] .row > .col:first-child {
    flex: 0 0 40%;
    max-width: 40%;
  }

  footer[role="contentinfo"] .row > .col:not(:first-child) {
    flex: 0 0 20%;
    max-width: 20%;
  }
}

/* ── Case study teaser — client logo ────────────────────────────── */

/* Logo sits above the title in teaser cards (weight -10 in view display).
   Constrain height so no logo dominates the card regardless of dimensions;
   object-fit: contain keeps aspect ratio intact (no cropping). */
.node--type-case-study.node--view-mode-teaser .field--name-field-image {
  margin-bottom: 16px;
}

.node--type-case-study.node--view-mode-teaser .field--name-field-image img {
  display: block;
  max-height: 56px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  object-position: left center;
}

/* ── Case study full page ────────────────────────────────────────── */

.node--type-case-study.node--view-mode-full {
  max-width: calc(var(--mad-max-w) + 2 * var(--mad-gutter));
  margin: 0 auto;
  padding: var(--mad-section-v) var(--mad-gutter);
}

.node--type-case-study.node--view-mode-full h1 {
  font-size: clamp(28px, 4vw, 56px);
  margin-bottom: 16px;
}

.node--type-case-study.node--view-mode-full .field--name-field-outcome {
  font-family: var(--mad-font-display);
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.4;
  color: var(--mad-ink-70);
  margin-bottom: 32px;
  font-style: italic;
  max-width: 700px;
}

.node--type-case-study.node--view-mode-full .field--name-field-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  margin-bottom: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--mad-rule);
}

.node--type-case-study.node--view-mode-full .field--name-field-stack .field__item {
  font-family: var(--mad-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  background-color: var(--mad-ink-10);
  border: 1px solid var(--mad-rule);
  border-radius: 3px;
  color: var(--mad-support);
}

/* ── Front page special: remove container constraint for paragraphs ── */

/* The front page node renders inside .container which clips the
   full-width paragraph bands. We override with negative margins. */
.path-frontpage .node__content {
  margin-left: calc(-1 * var(--mad-gutter));
  margin-right: calc(-1 * var(--mad-gutter));
  width: calc(100% + 2 * var(--mad-gutter));
}

/* F-022: front-page footer breathing room.
   With the two dark cta_bands removed, the last paragraph on the front page
   ends at its natural bottom padding and transitions directly into the footer.
   Add bottom padding to the front page's content node so there is a clean
   gap between the last section and the footer's top border. */
.path-frontpage .node__content {
  padding-bottom: var(--mad-section-v);
}

/* ── Language switcher dropdown — F-021 (replaces F-014/F-019) ────── */
/* Own behavior (js/lang-switcher.js): whole-widget click toggles
   .is-open on the BLOCK; no arrow at all; the open list is an
   absolutely-positioned overlay (z-index) so it never pushes the
   header. Inverted colors: paper panel, ink text, on the dark navbar.
   Core dropbutton chrome (toggle button, arrow) is suppressed. */

#block-maddev-bootstrap-dropdown-language {
  position: relative;
  align-self: center;
  margin: 10px 0 0 12px;
  width: 138px;
  height: 32px;
  cursor: pointer;
}

#block-maddev-bootstrap-dropdown-language:focus-visible {
  outline: 2px solid var(--mad-support);
  outline-offset: 2px;
  border-radius: var(--mad-radius);
}

/* Neutralize core wrapper/widget boxes entirely */
#block-maddev-bootstrap-dropdown-language .dropbutton-wrapper,
#block-maddev-bootstrap-dropdown-language .dropbutton-widget {
  position: static;
  background: transparent;
  border: none;
  margin: 0;
  padding: 0;
  min-width: 0;
  max-width: none;
}

/* The list IS the widget: overlay panel anchored to the block box */
#block-maddev-bootstrap-dropdown-language ul.dropbutton {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 1200;
  background: var(--mad-paper);
  border: 1px solid var(--mad-ink-20);
  border-radius: var(--mad-radius);
  box-shadow: var(--mad-shadow-md);
  overflow: hidden;
}

/* Closed: only the active language shows */
#block-maddev-bootstrap-dropdown-language ul.dropbutton li {
  display: none;
  background: transparent;
  border: none;
  margin: 0;
}

#block-maddev-bootstrap-dropdown-language ul.dropbutton li:first-child {
  display: block;
}

#block-maddev-bootstrap-dropdown-language.is-open ul.dropbutton li {
  display: block;
}

#block-maddev-bootstrap-dropdown-language.is-open ul.dropbutton li + li {
  border-top: 1px solid var(--mad-ink-10);
}

/* Language rows — ink on paper (inverted vs navbar). !important required:
   style.css forces `.navbar a { color: paper !important }`, which painted
   the non-active language links paper-on-paper (invisible-ish). */
#block-maddev-bootstrap-dropdown-language .language-link {
  color: var(--mad-ink) !important;
  background: transparent;
  padding: 1px 6px;
  font-family: var(--mad-font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  text-decoration: none;
  width: 100%;
  cursor: pointer;
}

#block-maddev-bootstrap-dropdown-language.is-open ul.dropbutton li:hover {
  background: var(--mad-support-15);
}

/* No arrow, no core toggle — the whole widget is the control */
#block-maddev-bootstrap-dropdown-language .dropbutton__toggle,
#block-maddev-bootstrap-dropdown-language .dropbutton-toggle,
#block-maddev-bootstrap-dropdown-language .dropbutton__arrow,
#block-maddev-bootstrap-dropdown-language .dropbutton-arrow {
  display: none !important; /* third-party chrome suppression, not a color */
}

/* Flag images */
#block-maddev-bootstrap-dropdown-language .language-icon {
  width: 18px;
  height: auto;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ── Pager styling ───────────────────────────────────────────────── */

.pager {
  padding: 32px var(--mad-gutter);
  max-width: calc(var(--mad-max-w) + 2 * var(--mad-gutter));
  margin: 0 auto;
}

.pager__items {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}

.pager__item a,
.pager__item.is-active a {
  font-family: var(--mad-font-mono);
  font-size: 13px;
  padding: 6px 12px;
  border: 1px solid var(--mad-rule);
  border-radius: var(--mad-radius);
  color: var(--mad-support);
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s;
}

.pager__item a:hover {
  background-color: var(--mad-ink-10);
  border-color: var(--mad-support-40);
}

.pager__item.is-active a {
  background-color: var(--mad-ink);
  color: var(--mad-paper);
  border-color: var(--mad-ink);
}

/* ═══════════════════════════════════════════════════════════════════════
   F-016 — Front page rebuild
   Two-column editorial grid, motif slots, vertical rhythm, logotype,
   band fills. 2026-06-12.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Tighten vertical rhythm one notch ──────────────────────────── */

/* Reduce --mad-section-v: was clamp(56px,6.5vw,100px), now one notch tighter.
   This affects all paragraphs on all pages via the token reference in style.css. */
:root {
  --mad-section-v:       clamp(44px, 5vw, 80px);
  --mad-section-v-tight: clamp(28px, 3vw, 52px);
  /* Max-height cap on sparse bands so no band reads as empty space */
  --mad-band-max-h: 640px;
}

/* Cap sparse text-only bands (single short text block) */
.paragraph--type--text-only:not(.is-dark) {
  max-height: none; /* don't cap — height is content-driven; rhythm fix is enough */
}

/* ── 2. Navbar logotype — differentiated-D ─────────────────────────── */

/* brand-mark (F-023): the HERO WORDMARK COMPOSITION in miniature for the
   navbar — same structure as .hero-mark, primary colors FLIPPED for the
   ink navbar (paper text; terracotta D/of/lead-in unchanged). One look,
   not two. text-transform guards: never "MADDEV". */
.brand-mark {
  display: flex;
  align-items: flex-start;
  gap: 3px;
  text-transform: none;
  font-variant: normal;
  font-feature-settings: normal;
}

.brand-mark__madd {
  font-family: var(--mad-font-display);
  font-weight: 700;
  font-size: 34px;
  line-height: 0.82;
  letter-spacing: -0.03em;
  color: var(--mad-paper);
}

.brand-mark__d2 {
  color: var(--mad-support);
}

.brand-mark__stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 1px;
  text-align: left;
}

.brand-mark__row {
  display: flex;
  flex-direction: column;
  position: relative;
}

.brand-mark__big {
  font-family: var(--mad-font-display);
  font-weight: 600;
  font-size: 12px;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--mad-paper);
}

.brand-mark__lead-in {
  color: var(--mad-support);
}

.brand-mark__mada {
  position: relative;
}

.brand-mark__of {
  font-family: var(--mad-font-script);
  font-weight: 600;
  line-height: 1;
  font-size: 10px;
  color: var(--mad-support);
  position: absolute;
  left: -0.1em;
  top: -0.6em;
  transform: rotate(-11deg);
  pointer-events: none;
}

.brand-mark__strap {
  font-family: var(--mad-font-mono);
  font-size: 6.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mad-paper-40);
  margin-top: 2px;
  white-space: nowrap;
}

/* Ensure site-title link itself is unstyled */
a.site-title {
  text-decoration: none;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

/* ── 3. Two-column text-only intro-grid layout ──────────────────────── */

/* The mad-intro-grid renders left/right in the mockup's "intro-grid" pattern.
   Left = section label (kickoff), Right = body copy.
   On mobile: single column. */

.mad-intro-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: flex-start;
}

.mad-intro-grid > * {
  flex: 1 1 100%;
}

@media (min-width: 920px) {
  .mad-intro-grid {
    flex-wrap: nowrap;
    gap: clamp(48px, 6vw, 96px);
  }

  .mad-intro-grid > .mad-intro-side {
    flex: 0 0 calc((100% - clamp(48px, 6vw, 96px)) * 0.4);
  }

  .mad-intro-grid > .mad-intro-body {
    flex: 1 1 auto;
  }
}

/* Left side: section label, displayed as large editorial label */
.mad-intro-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* The kickoff field (field--name-field-kickoff) rendered inside the side */
.mad-intro-side .field--name-field-kickoff {
  font-family: var(--mad-font-display);
  font-size: clamp(22px, 2.8vw, 38px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--mad-ink);
  margin-bottom: 0;
}

/* Right side: body copy */
.mad-intro-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mad-intro-body .field--name-field-body p,
.mad-intro-body .field--name-field-body-long p {
  font-family: var(--mad-font-ui);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--mad-ink-70);
  margin-bottom: 1em;
  max-width: 66ch;
}

.mad-intro-body .field--name-field-body a,
.mad-intro-body .field--name-field-body-long a {
  color: var(--mad-support);
  border-bottom: 1px solid var(--mad-support-40);
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
}

.mad-intro-body .field--name-field-body a:hover,
.mad-intro-body .field--name-field-body-long a:hover {
  color: var(--mad-ink);
  border-color: var(--mad-ink-40);
}

/* ── 4. Two-column section head for content bands ───────────────────── */

/* mad-section-head: left = eyebrow + title; right = intro text.
   Mirrors app.jsx .section-head pattern. */

.mad-section-head {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: clamp(32px, 4vw, 52px);
  align-items: flex-end;
}

.mad-section-head > * {
  flex: 1 1 100%;
}

@media (min-width: 900px) {
  .mad-section-head {
    flex-wrap: nowrap;
    gap: 48px;
  }

  .mad-section-head > .mad-section-left,
  .mad-section-head > .mad-section-right {
    flex: 1 1 calc(50% - 24px);
  }
}

.mad-section-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Section eyebrow inside content-band uses the field--name-field-title
   which is already styled mono in style.css — re-enforce here. */
.mad-section-head .field--name-field-title {
  font-family: var(--mad-font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mad-support);
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* Remove the content_band annotation pseudo from the new template context */
.mad-section-head .field--name-field-title::after {
  display: none;
}

.mad-section-right .mad-band-intro {
  font-family: var(--mad-font-display);
  font-size: clamp(17px, 1.8vw, 22px);
  line-height: 1.45;
  color: var(--mad-ink-70);
  max-width: 520px;
}

/* ── 5. Case-study editorial rows (mad-work-row) ────────────────────── */

/* The "Selected work" editorial list — rows not cards.
   Name + one-line outcome + stack tags + arrow. Mockup editorial language. */

.mad-content-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--mad-rule);
}

/* Case study editorial row */
.mad-work-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 28px 0;
  border-bottom: 1px solid var(--mad-rule);
  text-decoration: none;
  color: var(--mad-ink);
  transition: background-color 0.2s ease;
  position: relative;
  align-items: flex-start;
}

.mad-work-row > * {
  flex: 1 1 100%;
}

@media (min-width: 820px) {
  .mad-work-row {
    flex-wrap: nowrap;
    gap: 36px;
  }

  .mad-work-row > .mad-work-row__meta {
    flex: 0 0 56px;
  }

  .mad-work-row > .mad-work-row__body {
    flex: 1 1 auto;
  }

  .mad-work-row > .mad-work-row__arrow {
    flex: 0 0 36px;
  }
}

.mad-work-row:hover {
  background-color: var(--mad-support-15);
}

.mad-work-row__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 6px;
}

.mad-work-row__idx {
  font-family: var(--mad-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--mad-support);
}

.mad-work-row__type {
  font-family: var(--mad-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mad-ink-40);
}

.mad-work-row__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mad-work-row__title {
  font-family: var(--mad-font-display);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--mad-ink);
  margin-bottom: 0;
}

.mad-work-row__outcome {
  font-family: var(--mad-font-ui);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--mad-ink-70);
  max-width: 640px;
  margin-bottom: 0;
}

.mad-work-row__stack {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}

.mad-stack-tag {
  font-family: var(--mad-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  background-color: var(--mad-ink-10);
  border: 1px solid var(--mad-rule);
  border-radius: 3px;
  color: var(--mad-support);
}

.mad-work-row__arrow {
  display: flex;
  align-items: flex-start;
  padding-top: 8px;
  color: var(--mad-ink-40);
  font-size: 18px;
  transition: color 0.2s, transform 0.2s;
}

.mad-work-row:hover .mad-work-row__arrow {
  color: var(--mad-ink);
  transform: translateX(4px);
}

/* ── 6. Capability / service method rows (mad-method-row) ─────────── */

.mad-method-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 24px 0;
  border-bottom: 1px solid var(--mad-rule);
  text-decoration: none;
  color: var(--mad-ink);
  transition: background-color 0.2s ease;
  align-items: flex-start;
}

.mad-method-row > * {
  flex: 1 1 100%;
}

@media (min-width: 820px) {
  .mad-method-row {
    flex-wrap: nowrap;
    gap: 32px;
  }

  .mad-method-row > .mad-method-row__idx {
    flex: 0 0 56px;
  }

  .mad-method-row > .mad-method-row__label {
    flex: 0 0 180px;
  }

  .mad-method-row > .mad-method-row__body {
    flex: 1 1 auto;
  }

  .mad-method-row > .mad-method-row__arrow {
    flex: 0 0 36px;
  }
}

.mad-method-row:hover {
  background-color: var(--mad-support-15);
}

.mad-method-row__idx {
  font-family: var(--mad-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--mad-support);
  padding-top: 6px;
}

.mad-method-row__label {
  font-family: var(--mad-font-mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--mad-support);
  padding-top: 6px;
}

.mad-method-row__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mad-method-row__title {
  font-family: var(--mad-font-display);
  font-size: clamp(18px, 1.9vw, 24px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--mad-ink);
  margin-bottom: 0;
}

.mad-method-row__blurb {
  font-family: var(--mad-font-ui);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--mad-ink-70);
  margin-bottom: 0;
  max-width: 540px;
}

.mad-method-row__arrow {
  display: flex;
  align-items: flex-start;
  padding-top: 6px;
  color: var(--mad-ink-40);
  font-size: 18px;
  transition: color 0.2s, transform 0.2s;
}

.mad-method-row:hover .mad-method-row__arrow {
  color: var(--mad-ink);
  transform: translateX(4px);
}

/* View-all / band footer link */
.mad-band-footer {
  display: flex;
  justify-content: flex-start;
  margin-top: 32px;
}

.mad-band-footer a,
.mad-band-footer .field__item a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mad-font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--mad-ink);
  border-bottom: 1px solid var(--mad-ink-40);
  padding-bottom: 2px;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
}

.mad-band-footer a:hover,
.mad-band-footer .field__item a:hover {
  color: var(--mad-support);
  border-color: var(--mad-support-40);
}

/* ── 7. Motif slot mechanism ─────────────────────────────────────────── */

/*
 * Madagascar motif slot system.
 *
 * Each paragraph band can carry a faint watermark motif in the empty margin,
 * behind content. The mechanism:
 *
 *   1. A data attribute on the paragraph wrapper sets the motif name:
 *        data-motif="gecko"      → images/motifs/gecko.png
 *        data-motif="baobab"     → images/motifs/baobab.png  (art pending)
 *        data-motif="maki"       → images/motifs/maki.png    (art pending)
 *        data-motif="vanilla"    → images/motifs/vanilla.png (art pending)
 *
 *   2. The ::after pseudo of the paragraph renders the motif.
 *      - Faint (opacity ~0.08–0.10 on the beige background).
 *      - Fixed position: right side, vertically centred.
 *      - Blueprint-compatible: beneath all content (z-index: 0).
 *
 * ROTATION MAP (per README):
 *   Home/About band  → gecko      (asset: images/gecko-sepia.png + motifs/gecko.png)
 *   Work band        → gecko      (gecko-sepia.png used; motifs/gecko.png fallback)
 *   Services/caps    → baobab     (pending)
 *   Pricing          → vanilla    (pending)
 *   The model CTA    → maki       (pending)
 *
 * DROP-IN INSTRUCTIONS (for when new art arrives):
 *   Save the PNG as: web/themes/custom/maddev_bootstrap/images/motifs/<name>.png
 *   The CSS slot will pick it up automatically via the [data-motif] selector.
 *   Recommended size: 300–500px, brown/sepia line art, transparent bg.
 *   No code changes needed — the slot is already wired.
 *
 * NAMING CONVENTION: images/motifs/<slug>.png  (lowercase, hyphenated)
 *   Slugs: gecko | baobab | maki | vanilla
 */

/* Generic motif slot — fires when data-motif is set on the paragraph.
   background: none FIRST resets the crosshair ::after background inherited
   from style.css; the per-motif rules BELOW then set the image. (An earlier
   version reset AFTER the per-motif rules — same specificity, later in
   source — which silently killed every motif except the gecko fallback.
   Cascade-order bug surfaced when the real art landed; do not reorder.) */
.paragraph[data-motif]::after {
  content: "";
  background: none;
  position: absolute;
  right: calc(var(--mad-gutter) - 40px);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(180px, 22vw, 320px);
  height: clamp(180px, 22vw, 320px);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
  /* F-029: no edge-fade mask — Rudi wants crisp silhouettes, not fuzz. */
}

/* Per-motif image references */
.paragraph[data-motif="gecko"]::after {
  background-image: url("../images/motifs/gecko.png");
}

.paragraph[data-motif="baobab"]::after {
  background-image: url("../images/motifs/baobab.png");
}

.paragraph[data-motif="maki"]::after {
  background-image: url("../images/motifs/maki.png");
}

.paragraph[data-motif="vanilla"]::after {
  background-image: url("../images/motifs/vanilla.png");
}

.paragraph[data-motif="kitesurfer"]::after {
  background-image: url("../images/motifs/kitesurfer.png");
}

.paragraph[data-motif="baobab-2"]::after {
  background-image: url("../images/motifs/baobab-2.png");
}

.paragraph[data-motif="maki-2"]::after {
  background-image: url("../images/motifs/maki-2.png");
}

/* Alternate sides per band (Rudi 2026-06-12): even-numbered sections place
   the motif in the LEFT margin, mirrored (scaleX) so figures face into the
   page. Odd sections keep the right side. */
.field--name-field-sections > .field__item:nth-child(even) .paragraph[data-motif]::after {
  right: auto;
  left: calc(var(--mad-gutter) - 40px);
  transform: translateY(-50%) scaleX(-1);
}

/* CTA bands already use ::after for diagonal texture — don't stomp it */
.paragraph--type--cta-band[data-motif]::after {
  display: none;
}

/* On mobile, suppress motifs (too large relative to content) */
@media (max-width: 640px) {
  .paragraph[data-motif]::after {
    display: none;
  }
}

/* ── 8. Performance: no scroll-triggered JS in this theme ───────────── */

/*
 * Audit result: no scroll-listener JS in maddev_bootstrap (no .js files).
 * maddev_main JS (navigation.js, nav-resize.js, etc.) is inherited from the
 * Bootstrap 5 base theme — these are resize/toggle handlers, not scroll
 * listeners. No IntersectionObserver, no will-change on animated elements.
 *
 * Entrance animations are CSS-only on hero elements only (hero-meta,
 * hero-mark, hero-tagline, hero-eyebrow — see style.css @keyframes mad-rise).
 * They run once on page load, respect prefers-reduced-motion, and are not
 * scroll-linked. No jank mechanism remains.
 *
 * This comment serves as the audit record. No code changes needed here.
 */

/* ── 9. CTA band content layout (two-column for dark model band) ──── */

/* The dark "Fair wages" CTA band and contact band: on wide screens, render
   as the mockup's callout layout: left = heading + copy + CTA;
   right = fact rows. Currently the fields are: title + body_long + link.
   No fact-rows field exists — the layout works fine as centred single col. */

/* Ensure inner content of cta bands has position relative so motif z-index works */
.paragraph--type--cta-band > .field,
.paragraph--type--cta-band > .mad-section-head {
  position: relative;
  z-index: 1;
}

/* ── 10. Front page: paragraph inner content z-index + site margins ─── */

/* All paragraph content must sit above the motif pseudo-element (z-index 0).
   .paragraph > .field already gets max-width + gutter padding from style.css.
   The project-specific layout wrappers (mad-intro-grid, mad-section-head,
   mad-content-rows, mad-band-footer) are direct children of .paragraph but are
   NOT covered by that rule — apply the same site-margin pattern to them here
   so every band's content is margin-constrained while the band background bleeds. */

/* Lift content above the motif pseudo-element for all direct paragraph children */
.paragraph > .mad-intro-grid,
.paragraph > .mad-section-head,
.paragraph > .mad-content-rows,
.paragraph > .mad-band-footer,
.paragraph > .field {
  position: relative;
  z-index: 1;
}

/* Apply site margins to the four project-specific wrappers that are NOT .field.
   (.paragraph > .field already receives max-width + gutter padding in style.css.) */
.paragraph > .mad-intro-grid,
.paragraph > .mad-section-head,
.paragraph > .mad-content-rows,
.paragraph > .mad-band-footer {
  max-width: var(--mad-max-w);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--mad-gutter);
  padding-right: var(--mad-gutter);
}