/*
 * Path: css/core/layout.css
 * Purpose: Structural primitives (page shells, sections, container, grids, focus, utilities)
 * Boundaries: No component styling; no theme tokens here; no print. Header/footer only as shells.
 * Dependencies: css/core/tokens.css, css/core/reset.css
 * Principles: SRP, DRY, KISS, ALCOA-C
 * Version: 0.9.0 (pre-1.0)
 */

/* =========================================
   1) Page shells
   ========================================= */
main { padding-top: var(--header-h); } /* clear fixed header */

/* Sections */
.section { position: relative; padding-block: clamp(3rem, 6vw, 6rem); }
.section + .section {
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}

/* Muted and invert bands are semantic wrappers */
.section.is-muted { background: var(--section-muted, var(--surface-muted)); }
body:not([data-theme-tone="dark"]) .section.is-muted {
  --section-muted: color-mix(in srgb, var(--ec-navy-900) 3%, var(--ec-neutral-100));
}
body[data-theme-tone="dark"] .section.is-muted {
  --section-muted: color-mix(in srgb, #FFFFFF 8%, var(--ec-neutral-950));
}

.section.is-invert {
  --heading-color: var(--text-invert);
  background: var(--surface-invert);
  color: var(--text-invert);
}

/* Layout container */
.container { width: min(1100px, 92vw); margin-inline: auto; }

/* Hero section aligns flush with hidden header without jump */
.section.hero{
  position: relative; display: flex; align-items: center;
  min-height: 100dvh;   /* fallback */
  min-height: 100svh;   /* mobile-stable if supported */
  padding-block: 0; margin-top: calc(-1 * var(--header-h));
}
.section.hero .container.hero-inner{
  min-height: inherit; width: min(1100px, 92vw);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
}

/* =========================================
   2) Header shell (neutral chrome only)
   Component-specific styles move to components/header.css
   ========================================= */
.site-header{
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
  background: transparent; border-bottom: none;
  color: var(--hdr-color, var(--text)); /* tone computed by JS */
  transition:
    opacity var(--dur-med) var(--easing),
    transform var(--dur-med) var(--easing),
    background-color var(--dur-med) var(--easing),
    backdrop-filter var(--dur-med) var(--easing);
}

/* Opt-in chrome for non-home pages or explicit header class */
body:not([data-page="home"]) .site-header,
.site-header.has-chrome{
  background: linear-gradient(to bottom, var(--hdr-grad-start) 0%, var(--hdr-grad-end) 100%);
  -webkit-backdrop-filter: saturate(1.1) blur(var(--hdr-blur));
          backdrop-filter: saturate(1.1) blur(var(--hdr-blur));
  border-bottom: 1px solid var(--hdr-border);
}

/* Hidden until hero passes; JS toggles .is-active */
.js .site-header { opacity: 0; pointer-events: none; transform: translateY(-8px); }
.site-header.is-active { opacity: 1; pointer-events: auto; transform: translateY(0); }

.site-header .header-inner{
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  min-height: var(--header-h);
  padding-block: 8px; padding-inline: clamp(12px, 2.4vw, 24px);
  justify-content: flex-end; /* right-align when no brand exists (home) */
}

/* Brand block (non-home pages only) */
.site-brand { display: flex; align-items: center; margin-right: auto; flex: 0 0 auto; }
.site-brand a { display: inline-flex; align-items: center; text-decoration: none; }
.site-brand img, .site-brand picture { display: block; }
/* Brand guide: never below 120px wide */
.site-brand img { width: clamp(120px, 18vw, 200px); height: auto; }

/* If brand exists, switch to space-between layout */
.site-header .header-inner:has(.site-brand){ justify-content: space-between; }

/* Navigation inherits the header tone (interaction lives in components) */
.site-nav { display: inline-flex; gap: 18px; margin-left: auto; }
.site-nav a{
  color: currentColor; text-decoration: none;
  font-weight: var(--ec-w-semibold);
  padding: 8px 2px; border-radius: 6px;
  transition: color var(--dur-med) var(--easing);
}
.site-nav a:hover{ text-decoration: underline; text-decoration-thickness: 2px; }

/* Mobile toggle base */
.nav-toggle{ display: none; }

/* Themeable UI tokens for header chrome (kept here for shell completeness) */
:root{
  --nav-toggle-bg:  var(--ec-neutral-200);
  --nav-toggle-fg:  var(--ec-neutral-900);
  --nav-panel-bg:   var(--ec-neutral-200);
  --nav-panel-fg:   var(--ec-neutral-900);
  --nav-panel-border: var(--border);
  --nav-scrim-bg: rgba(0,0,0,.28);

  --hdr-grad-start: color-mix(in srgb, var(--surface) 88%, transparent);
  --hdr-grad-end:   color-mix(in srgb, var(--surface) 40%, transparent);
  --hdr-border:     color-mix(in srgb, var(--border) 85%, transparent);
  --hdr-blur: 6px;
}
body[data-theme-tone="dark"]{
  --nav-toggle-bg:  color-mix(in srgb, var(--ec-neutral-900) 88%, #ffffff 12%);
  --nav-toggle-fg:  var(--ec-neutral-100);
  --nav-panel-bg:   color-mix(in srgb, var(--ec-neutral-900) 88%, #ffffff 12%);
  --nav-panel-fg:   var(--ec-neutral-100);
  --nav-panel-border: color-mix(in srgb, #ffffff 25%, transparent);
  --nav-scrim-bg: rgba(0,0,0,.5);

  --hdr-grad-start: color-mix(in srgb, var(--surface) 84%, transparent);
  --hdr-grad-end:   color-mix(in srgb, var(--surface) 36%, transparent);
  --hdr-border:     color-mix(in srgb, #ffffff 18%, transparent);
  --hdr-blur: 8px;
}

/* =========================================
   3) Footer shell
   ========================================= */
.site-footer{
  background: transparent; color: var(--text);
  font-size: 0.75rem; font-weight: var(--ec-w-light); line-height: 1.35; text-align: center;
}
.site-footer.section{
  position: static; padding-block: clamp(6px, 0.6vw, 10px); z-index: auto;
}
.site-footer.section .container{
  width: 100%; max-width: none; margin: 0; padding-inline: clamp(8px, 2vw, 14px);
}

/* =========================================
   4) Focus & interactive base
   ========================================= */
:where(a,button,[role="button"],input,textarea,select):focus-visible{
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  text-decoration: none;
}
:where(a,button,[role="button"],input,textarea,select){ -webkit-tap-highlight-color: rgba(0,0,0,0); }

/* =========================================
   5) Utilities
   ========================================= */
.hide { display: none !important; }
.visually-hidden{
  position: absolute !important; height: 1px; width: 1px; overflow: hidden;
  clip: rect(1px,1px,1px,1px); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* =========================================
   6) Grid & surface primitives
   ========================================= */
.grid{ display: grid; gap: clamp(1rem, 2vw, 1.25rem); }
@media (min-width: 768px){
  .grid.cols-2{ grid-template-columns: repeat(2, 1fr); }
  .grid.cols-3{ grid-template-columns: repeat(3, 1fr); }
}

/* Cards are neutral containers; visual variants live with components */
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: clamp(1rem, 2vw, 1.25rem);
}

/* =========================================
   7) Motion preferences
   ========================================= */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}