/* =========================================================================
   Barázda — layout primitives, page chrome, and the surface textures
   Layer: layout. Load after base.css.
   ========================================================================= */

@layer layout {
  /* ---------------------------------------------------------------------
     PRIMITIVES
     Four of these carry almost every layout on the site. Anything a page
     needs beyond them belongs in that page's own stylesheet, not here.
     --------------------------------------------------------------------- */
  .container {
    width: 100%;
    max-width: var(--size-content-max);
    margin-inline: auto;
    padding-inline: var(--space-gutter);
  }

  .prose {
    max-width: var(--size-prose-max);
  }

  /* Vertical rhythm without margin collapsing surprises. */
  .stack > * + * {
    margin-block-start: var(--stack-gap, var(--space-md));
  }

  .stack-sm {
    --stack-gap: var(--space-xs);
  }
  .stack-lg {
    --stack-gap: var(--space-lg);
  }
  .stack-xl {
    --stack-gap: var(--space-xl);
  }

  /* Horizontal grouping that wraps rather than overflows — the reason the
     header and the hero CTA row survive 320px. */
  .cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cluster-gap, var(--space-sm));
  }

  /* Auto-fitting grid. --grid-min is the only knob callers touch. */
  .grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 16rem), 100%), 1fr));
    gap: var(--grid-gap, var(--space-lg));
  }

  .section {
    padding-block: var(--space-section);
  }

  .section-head {
    max-width: var(--size-prose-max);
    margin-block-end: var(--space-xl);
  }

  .section-head p {
    margin-block-start: var(--space-sm);
    color: var(--text-secondary);
    font-size: var(--font-size-body-lg);
  }

  .overline {
    font-size: var(--font-size-overline);
    font-weight: 640;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--accent-fg);
  }

  /* ---------------------------------------------------------------------
     SITE HEADER
     Sticky, but only 1px of border while at the top — the shadow appears
     once the page has scrolled, which `boot` toggles via [data-scrolled].
     --------------------------------------------------------------------- */
  .site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background-color: color-mix(in srgb, var(--surface-page) 88%, transparent);
    backdrop-filter: blur(10px);
    border-block-end: 1px solid var(--border-subtle);
    transition: box-shadow var(--dur-base) var(--ease-standard),
      border-color var(--dur-base) var(--ease-standard);
  }

  /* No backdrop-filter (older browsers, or forced-colors): fall back to an
     opaque bar rather than unreadable text over scrolling content. */
  @supports not (backdrop-filter: blur(10px)) {
    .site-header {
      background-color: var(--surface-page);
    }
  }

  .site-header[data-scrolled="true"] {
    border-color: var(--border-default);
    box-shadow: var(--shadow-sm);
  }

  .site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    min-height: 4rem;
  }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 660;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    text-decoration: none;
    white-space: nowrap;
  }

  .brand__mark {
    width: 1.75rem;
    height: 1.75rem;
    flex: none;
    color: var(--brand-fg);
  }

  .brand:hover {
    color: var(--text-primary);
  }

  .site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    margin-inline-start: auto;
  }

  .site-nav__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--size-tap-min);
    padding-inline: var(--space-sm);
    border-radius: var(--radius-control);
    color: var(--text-secondary);
    font-size: var(--font-size-body-sm);
    font-weight: 550;
    text-decoration: none;
  }

  .site-nav__link:hover {
    background-color: var(--surface-subtle);
    color: var(--text-primary);
  }

  .site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
  }

  /* Mobile disclosure. The button is hidden on wide screens and the nav
     collapses into a panel below the bar — no off-canvas drawer, no focus
     trap, nothing that can obscure a focused field (WCAG 2.2 SC 2.4.11). */
  .nav-toggle {
    display: none;
  }

  /* These two only ever appear inside the collapsed menu panel; on wider
     screens the buttons in the header corner are those routes. */
  .site-nav__signin,
  .site-nav__cta {
    display: none;
  }

  @media (max-width: 60rem) {
    .nav-toggle {
      display: inline-flex;
    }

    .site-nav {
      display: none;
      position: absolute;
      inset-inline: 0;
      top: 100%;
      flex-direction: column;
      align-items: stretch;
      gap: var(--space-3xs);
      margin: 0;
      padding: var(--space-sm) var(--space-gutter) var(--space-md);
      background-color: var(--surface-raised);
      border-block-end: 1px solid var(--border-default);
      box-shadow: var(--shadow-md);
    }

    .site-nav[data-open="true"] {
      display: flex;
    }

    .site-nav__link {
      min-height: var(--size-control-h-lg);
      padding-inline: var(--space-md);
      font-size: var(--font-size-body);
    }

    .site-nav__signin {
      display: flex;
      margin-block-start: var(--space-2xs);
      border-block-start: 1px solid var(--border-subtle);
      font-weight: 600;
      color: var(--brand-fg);
    }

    /* The panel is absolutely positioned against this, so it must be
       positioned everywhere the panel exists — not just on the narrowest
       screens. */
    .site-header__inner {
      position: relative;
    }
  }

  /* Below 30rem the brand, theme control and menu button already fill the
     bar, so the demo CTA moves into the panel rather than being squeezed to
     an unreadable width.

     NOTE: the matching rule that HIDES the header button lives in
     landing.css, not here. The button carries .btn, whose `display` is set in
     the `components` layer — which outranks `layout` regardless of
     specificity — so hiding it has to happen in `pages` or later. */
  @media (max-width: 30rem) {
    .site-nav__cta {
      display: flex;
      justify-content: center;
      margin-block-start: var(--space-2xs);
      background-color: var(--brand-solid);
      color: var(--on-brand);
      font-weight: 600;
    }

    .site-nav__cta:hover {
      background-color: var(--brand-solid-hover);
      color: var(--on-brand);
    }
  }

  /* ---------------------------------------------------------------------
     SITE FOOTER
     --------------------------------------------------------------------- */
  .site-footer {
    margin-block-start: var(--space-section);
    padding-block: var(--space-2xl) var(--space-xl);
    background-color: var(--surface-raised);
    border-block-start: 1px solid var(--border-default);
  }

  .site-footer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--space-xl) var(--space-lg);
  }

  .site-footer__brandcol {
    grid-column: 1 / -1;
    max-width: 24rem;
  }

  @media (min-width: 64rem) {
    .site-footer__grid {
      grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr));
    }

    .site-footer__brandcol {
      grid-column: auto;
    }
  }

  .site-footer h2 {
    margin-block-end: var(--space-sm);
    font-size: var(--font-size-overline);
    font-weight: 640;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .site-footer ul {
    display: flex;
    flex-direction: column;
    /* >=8px between adjacent targets so a thumb does not hit the wrong one. */
    gap: var(--space-2xs);
  }

  .site-footer a {
    display: inline-block;
    padding-block: var(--space-2xs);
    color: var(--text-secondary);
    font-size: var(--font-size-body-sm);
    text-decoration: none;
  }

  .site-footer a:hover {
    color: var(--text-primary);
    text-decoration: underline;
  }

  .site-footer__base {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-lg);
    margin-block-start: var(--space-2xl);
    padding-block-start: var(--space-lg);
    border-block-start: 1px solid var(--border-subtle);
    color: var(--text-muted);
    font-size: var(--font-size-caption);
  }

  .site-footer__base p {
    max-width: 46rem;
  }

  /* ---------------------------------------------------------------------
     TEXTURES
     Every one of these is pure CSS or inline SVG. There is not a single
     image file in this project, which is what keeps it working from file://
     and keeps the whole page under a few tens of kilobytes.
     --------------------------------------------------------------------- */

  /* CONTOUR BACKDROP — an inline <svg> of repeated bezier paths that reads
     as the contour lines on an ordnance survey map. It inherits
     `currentColor`, so it re-themes for free. */
  .contour {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    color: var(--texture-line);
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.55) 55%, transparent 92%);
    mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.55) 55%, transparent 92%);
  }

  @media (max-width: 30rem) {
    /* Thin the line set on small screens — at 360px the dense group is
       visual noise rather than texture. */
    .contour__dense {
      display: none;
    }
  }

  /* FURROW ROWS — tilled rows receding in perspective. The 101deg angle
     (rather than 90) is what makes them read as furrows; the 13px/1px ratio
     keeps them below the threshold of visual noise. */
  .texture-furrow {
    background-image: repeating-linear-gradient(
      101deg,
      transparent 0 13px,
      var(--texture-furrow) 13px 14px
    );
    -webkit-mask-image: radial-gradient(140% 100% at 20% 0%, #000 20%, transparent 78%);
    mask-image: radial-gradient(140% 100% at 20% 0%, #000 20%, transparent 78%);
  }

  /* CADASTRAL GRID — a 24px parcel grid with a heavier section line every
     fourth cell, exactly like a land registry sheet. Used on sunken wells. */
  .texture-grid {
    background-image: repeating-linear-gradient(0deg, var(--texture-grid) 0 1px, transparent 1px 24px),
      repeating-linear-gradient(90deg, var(--texture-grid) 0 1px, transparent 1px 24px),
      repeating-linear-gradient(0deg, var(--border-subtle) 0 1px, transparent 1px 96px),
      repeating-linear-gradient(90deg, var(--border-subtle) 0 1px, transparent 1px 96px);
    -webkit-mask-image: radial-gradient(120% 120% at 50% 50%, #000 45%, transparent 100%);
    mask-image: radial-gradient(120% 120% at 50% 50%, #000 45%, transparent 100%);
  }

  /* Texture is decoration. When the user has asked for more contrast, or the
     OS has taken over colour entirely, all three come off — they sit behind
     body copy and are the first thing to hurt legibility. */
  @media (prefers-contrast: more), (forced-colors: active) {
    .contour,
    .texture-furrow,
    .texture-grid {
      display: none;
      background-image: none;
    }

    body::before {
      display: none;
    }
  }
}