/* DropBlockCMS — Layout: containers, nav, hero, footer, grid */

.container      { max-width: var(--max-width-wide); margin: 0 auto; padding: 0 var(--space-6); }
.container-text { max-width: var(--max-width-content); margin: 0 auto; padding: 0 var(--space-6); }
/* F-page-1: .section (later, equal specificity) clobbers .container-text's shorthand,
   zeroing horizontal padding. Restore it so page/landing/salespage body matches the
   article body's horizontal inset (var(--space-6)) while keeping the section's vertical rhythm. */
.container-text.section { padding: var(--space-16) var(--space-6); }
/* Per-template width overrides (scope-briefs/005) — compound selectors so they always win over
   the base .container-text rule above regardless of source order. .container-text still carries
   the shared margin/padding; only max-width differs per template. */
.container-text.page-body    { max-width: var(--max-width-page); }
.container-text.landing-body { max-width: var(--max-width-landing); }
.page          { display: flex; flex-direction: column; min-height: 100vh; }
.page-main     { flex: 1 0 auto; }

/* --- Top navigation --- */
.top-nav {
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-height);
  background: var(--color-surface-white);
  border-bottom: 1px solid var(--color-border-default);
}
.top-nav .nav-inner {
  max-width: var(--max-width-wide); margin: 0 auto; height: 100%;
  padding: 0 var(--space-6);
  display: flex; align-items: center; justify-content: space-between;
}
.nav-logo {
  font-family: var(--font-display); font-size: var(--text-md);
  font-weight: var(--weight-semibold); color: var(--color-text-primary);
}
.nav-logo:hover { text-decoration: none; }
.nav-logo .accent { color: var(--color-brand-primary); }
.nav-logo-img { display: block; height: 40px; width: auto; max-width: 260px; }
.nav-links { display: flex; align-items: center; gap: var(--space-6); list-style: none; }
.nav-links a {
  font-family: var(--font-ui); font-size: var(--text-sm);
  color: var(--color-nav-link);   /* scope-briefs/023: the menu's own colour, not the muted body tone */
}
.nav-links a:hover { color: var(--color-nav-link-active); text-decoration: none; }
.nav-links a.is-active { color: var(--color-nav-link-active); font-weight: var(--weight-medium); }
.nav-toggle { display: none; font-size: var(--text-xl); color: var(--color-text-primary); padding: var(--space-2); }

@media (max-width: 768px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute; top: var(--nav-height); left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--color-surface-white);
    border-bottom: 1px solid var(--color-border-default);
    max-height: 0; overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .nav-links.is-open { max-height: 60vh; }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: var(--space-4) var(--space-6); width: 100%; }
}

/* --- Hero --- */
/* scope-briefs/034 D1: the band's height was a FIXED 280px with a 768px WIDTH breakpoint —
   which cannot answer the complaint it was causing (Martin, 2026-09-06: "on the smaller screen
   the hero banner looks too large, on the larger screen it looks about right"). A laptop is wide
   and short, so the breakpoint never fired and the same 280px ate a third of the screen.
   clamp() keys the default to viewport HEIGHT instead: it still lands on exactly 280px on a tall
   monitor (the size Martin approved), gives ~198px back on a 760px-tall laptop, and comes out
   near the old 220px on a phone — which is why the width media query below no longer needs a
   min-height line at all. align-items/padding are deliberately UNTOUCHED (Martin, 2026-09-06:
   the current lift off the bottom "works, looks good"). */
.hero {
  position: relative; min-height: clamp(190px, 26vh, 280px);
  display: flex; align-items: flex-end;
  color: var(--color-surface-white);
  overflow: hidden;
}

/* scope-briefs/034, revised after Martin's walk of v1.31.3. It shipped with four heights; three
   of them are gone. Full screen "just looks daft" (his words), and anything TALLER than the
   default is a Container's job — Container does it better, with real control over what sits
   inside. What was actually missing was a way to go SMALLER, which no setting offered.

   So: one modifier, and it goes down. The DEFAULT ('banner') still emits NO class at all, so
   every banner published before any of this renders byte-identical (same precedent as
   Container's 'fill' position, article.css).

   Slim has to touch padding, and here is why — a trap worth writing down. On a laptop the band
   measured 214px while its own min-height was 208px: the CONTENT was setting the height, not the
   minimum. `.hero-content` carries 48px top and bottom (--space-12). So lowering min-height alone
   would have produced a setting that appeared to do something and did nothing. Slim therefore
   drops that padding to 16px, and ONLY for slim — the default keeps its 48px lift untouched
   (Martin, 2026-09-06: the current lift "works, looks good").

   NOTE for whoever edits these: never add a `transform` here — .fade-in (animations.css) already
   owns transform on this element, and the .article-body .hero full-bleed breakout below had to
   use margins for exactly that reason. That collision has cost this codebase twice already. */
.hero--h-slim { min-height: clamp(110px, 12vh, 150px); }
.hero--h-slim .hero-content {
  padding-top: var(--space-4); padding-bottom: var(--space-4);
}
/* Image heroes render as a BANNER, not a full 16:9 container (Decision 11, reconciled
   2026-06-04: a 16:9 box filled the desktop viewport — a billboard, not a banner). They
   inherit the .hero min-height above (~280px desktop / ~220px mobile) and object-fit:cover
   centre-crops. "16:9 ~1600×900" is now UPLOAD/source guidance only, not a rendered height.
   Gradient (text-only) heroes use the same compact min-height. */
.hero.has-image::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4,44,83,0.15) 0%, rgba(4,44,83,0.78) 100%);
}
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-content {
  position: relative; z-index: 1;
  max-width: var(--max-width-wide); width: 100%;
  margin: 0 auto; padding: var(--space-12) var(--space-6);
}
.hero h1 { color: var(--color-surface-white); margin: var(--space-4) 0; }
/* scope-briefs/045 D7 — a Banner block on a light palette colour can ask for dark text. Banner-only:
   the class is emitted solely by the banner renderer, never on the other seven .hero emitters. */
.hero.hero--text-dark,
.hero.hero--text-dark h1 { color: var(--color-text-primary); }
/* D12 — dark words on a photo. The overlay that makes white readable (.hero.has-image::after, below)
   would make dark words unreadable, so it turns light instead: same shape, white rather than navy. */
.hero.has-image.hero--text-dark::after {
  background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.8) 100%);
}
.hero-meta {
  font-family: var(--font-ui); font-size: var(--text-sm);
  color: rgba(255,255,255,0.65);
  display: flex; flex-wrap: wrap; gap: var(--space-4);
}
@media (max-width: 768px) {
  /* min-height dropped in scope-briefs/034 — the clamp() above already lands near this value on a
     phone, and keying height off screen WIDTH was the original fault. The type step stays. */
  .hero h1 { font-size: var(--text-2xl); }
}

/* scope-briefs/009 Phase A, fixed after Martin's walk-test 2026-08-28: a `banner` block's .hero
   renders as an ordinary block now — inside .article-body, inside a width-capped
   .container-text (page-body/landing-body) — so without this it inherits that cap and looks
   "boxed" instead of the original edge-to-edge banner. .hero-content's own max-width/padding
   (above) is untouched, so the headline/strapline keep sitting exactly where they did before;
   only the background stretches full-bleed.
   Margin-based breakout, NOT left/transform — every block also carries .fade-in
   (animations.css), which sets its OWN `transform: translateY(16px)` for the scroll-reveal
   slide-up; two rules setting `transform` on the same element collide (equal specificity,
   .fade-in wins, silently zeroing the breakout) — the exact gotcha already hit and fixed for
   Container's own edge-to-edge width tier (scope-briefs/008 build log), reused verbatim here
   rather than re-discovered the hard way twice. Scoped to `.article-body .hero` so the
   page/article template's own FIXED hero header — rendered OUTSIDE .article-body, already
   naturally full width — is completely untouched. */
.article-body .hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* scope-briefs/009 Phase A, walk-test round 2 (Martin, 2026-08-28): the SAME ambient-padding
   gap already found and fixed for Container ("Flush-against-the-hero", article.css, same day)
   — .container-text.section's own ambient `padding: var(--space-16) …` still sits above a
   banner block even when it's the very first thing on the page, pushing it down from the nav
   instead of sitting flush against it the way the original fixed hero always did. Cancel that
   ambient top padding specifically when .hero is the TRUE first block on the page — same
   selector shape as Container's own fix (`:first-child`, scoped to `.container-text.section >
   .article-body >`), reused rather than rediscovered. Only the top is cancelled — Martin's
   report was specifically about the nav-to-hero gap, and a banner isn't typically the last
   block on a page, so no matching :last-child rule is added here. */
.container-text.section > .article-body > .hero:first-child {
  margin-top: calc(-1 * var(--space-16));
}

/* --- Article layout --- */
/* scope-briefs/048 D2: ONE centred column on every screen. It was a two-column grid that always kept
   room for an "On this page" sidebar, printed or not, so the text sat hard left on a laptop (measured
   live: 37px from the left, 574px from the right at 1440px) and every wide block's breakout — which
   assumes a centred parent — landed off-centre. The sidebar is replaced by the bar in article.css. */
.article-layout {
  max-width: var(--max-width-wide);
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
}
.article-main { min-width: 0; max-width: var(--max-width-article); margin: 0 auto; }

/* 048 D1: a page with its header and hero switched off prints its title as a plain H1 instead. */
.page-title { margin-bottom: var(--space-8); }

/* --- Section spacing --- */
.section { padding: var(--space-16) 0; }
.section-tight { padding: var(--space-10) 0; }

/* --- Footer --- */
.site-footer {
  flex-shrink: 0;
  background: var(--color-footer-bg);   /* scope-briefs/023: the footer's own background */
  border-top: 1px solid var(--color-border-default);
  /* Progressive enhancement: on a dark footer the fixed 10%-black divider vanishes, so tint it
     from the footer's own text colour where color-mix() is supported. The line above stays as
     the fallback for anything that doesn't understand it. */
  border-top-color: color-mix(in srgb, var(--color-footer-text) 25%, transparent);
  margin-top: var(--space-20);
  padding: var(--space-16) 0 var(--space-8);
}
.footer-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-10);
  max-width: var(--max-width-wide); margin: 0 auto; padding: 0 var(--space-6);
}
.footer-col h4 {
  font-family: var(--font-ui); font-size: var(--text-xs);
  font-weight: var(--weight-medium); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-footer-text);
  margin-bottom: var(--space-4);
}
.footer-col ul { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-col a { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-footer-link); }
.footer-legal {
  max-width: var(--max-width-wide); margin: var(--space-12) auto 0;
  padding: var(--space-6) var(--space-6) 0;
  border-top: 1px solid var(--color-border-default);
  border-top-color: color-mix(in srgb, var(--color-footer-text) 25%, transparent);
  font-family: var(--font-ui); font-size: var(--text-xs);
  color: var(--color-footer-text);
  display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between;
}
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-8); }
}