/* ============================================================================
   Page-level base + layout primitives.
   Web components own their internals via Shadow DOM; this stylesheet styles
   the LIGHT-DOM content (slotted into components) plus global reset, body,
   and shared primitives like .btn, .eyebrow, h1-h6, links, etc. — those need
   to be styled here because Shadow DOM can't reach slotted content's
   own descendants.
   ============================================================================ */

@layer reset, base, components, utilities;

/* ════════════════════════════════════════════════════════════════════════
   FOUCE guard — hide custom elements until they have been upgraded.
   Without this, the browser renders the slotted light-DOM content (h1, p,
   ul, etc.) with default UA styles for ~50–300ms between HTML parse and JS
   module execution. Once customElements.define() runs for each tag, the
   element matches :defined and the shadow-DOM-styled version takes over.
   The host body bg keeps the page from looking broken during this gap.
   ════════════════════════════════════════════════════════════════════════ */
bw-header:not(:defined),
bw-hero:not(:defined),
bw-services:not(:defined),
bw-colors:not(:defined),
bw-gallery:not(:defined),
bw-process:not(:defined),
bw-service-area:not(:defined),
bw-project-form:not(:defined),
bw-footer:not(:defined) {
  display: block;
  visibility: hidden;
  /* Reserve some height so the page doesn't jolt when the hero upgrades. */
  min-height: 1px;
}
bw-hero:not(:defined) { min-height: 50vh; }

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
  ul, ol { padding: 0; list-style: none; }
  img, picture, svg, video { display: block; max-width: 100%; height: auto; }
  button, input, textarea, select { font: inherit; color: inherit; }
  a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
  :focus-visible { outline: 2px solid var(--bw-accent); outline-offset: 3px; border-radius: 2px; }
  ::selection { background: var(--bw-navy-700); color: var(--bw-paint-50); }
}

@layer base {
  html { scroll-padding-top: 88px; }
  body {
    font-family: var(--bw-font-body);
    font-size: var(--bw-text-base);
    line-height: var(--bw-leading-normal);
    color: var(--bw-fg);
    background: var(--bw-bg);
    min-height: 100vh;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  main { display: block; }
  section { scroll-margin-top: 88px; }

  /* No global h1/h2/h3 typography here. Per CSS Cascade Level 5 §6.4,
     outer-context (light DOM) declarations win over inner-context (shadow
     DOM ::slotted) declarations at equal importance — so any rule we set
     here would override every component's intended typography. Each web
     component owns its own slotted-heading styles via its shadow DOM. */
  em { font-style: italic; color: var(--bw-accent); }

  p { max-width: var(--bw-size-prose); line-height: var(--bw-leading-relaxed); }

  .eyebrow {
    font-family: var(--bw-font-eyebrow);
    text-transform: uppercase;
    letter-spacing: var(--bw-tracking-widest);
    font-size: var(--bw-text-xs);
    font-weight: var(--bw-weight-medium);
    color: var(--bw-fg-muted);
    margin-block-end: var(--bw-space-3);
  }

  a:hover { color: var(--bw-brand-hover); }
}

@layer components {
  /* ── Buttons (.btn primary/ghost) ───────────────────────────────────── */
  .btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--bw-space-2);
    padding: var(--bw-space-3) var(--bw-space-5);
    flex-shrink: 0;
    white-space: nowrap;
    font-family: var(--bw-font-eyebrow);
    font-weight: var(--bw-weight-semibold);
    font-size: var(--bw-text-sm);
    letter-spacing: var(--bw-tracking-wider);
    text-transform: uppercase;
    text-decoration: none;
    border: 1.5px solid transparent;
    border-radius: var(--bw-radius);
    cursor: pointer;
    transition:
      transform var(--bw-duration-fast) var(--bw-ease-brush),
      background var(--bw-duration) var(--bw-ease-standard),
      color var(--bw-duration) var(--bw-ease-standard),
      border-color var(--bw-duration) var(--bw-ease-standard),
      box-shadow var(--bw-duration) var(--bw-ease-standard);
  }
  .btn:hover { transform: translateY(-1px); }
  .btn:active { transform: translateY(0); }

  .btn-primary {
    background: var(--bw-brand);
    color: var(--bw-fg-inverse);
    border-color: var(--bw-brand);
    box-shadow: var(--bw-shadow);
  }
  .btn-primary:hover {
    background: var(--bw-brand-hover);
    border-color: var(--bw-brand-hover);
    color: var(--bw-fg-inverse);
    box-shadow: var(--bw-shadow-md);
  }

  .btn-ghost {
    background: transparent;
    color: var(--bw-brand);
    border-color: color-mix(in oklch, currentColor 40%, transparent);
  }
  .btn-ghost:hover {
    color: var(--bw-brand-hover);
    border-color: currentColor;
    background: color-mix(in oklch, currentColor 6%, transparent);
  }

  /* ── Sectional container ────────────────────────────────────────────── */
  .container {
    width: min(100% - 2 * var(--bw-space-6), var(--bw-size-page));
    margin-inline: auto;
  }

  /* ── CTA links (text-style call-to-action with arrow) ───────────────── */
  .arrow-link {
    display: inline-flex; align-items: center; gap: var(--bw-space-2);
    color: var(--bw-brand);
    font-family: var(--bw-font-eyebrow);
    font-weight: var(--bw-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--bw-tracking-wider);
    font-size: var(--bw-text-xs);
    text-decoration: none;
    padding-block: var(--bw-space-1);
    border-bottom: 1px solid currentColor;
    width: max-content;
    transition: gap var(--bw-duration) var(--bw-ease-brush);
  }
  .arrow-link::after { content: "→"; }
  .arrow-link:hover { gap: var(--bw-space-3); }
}

/* Hero intro animation — keyframes must live in light-DOM scope so that
   slotted elements styled via ::slotted in <bw-hero> can resolve them.
   Per CSS Animations §3.1, animation-name lookup happens in the tree scope
   of the declaring rule; shadow-DOM-defined @keyframes are NOT visible to
   light-DOM elements (even when those elements are targeted via ::slotted). */
@keyframes bw-hero-fadeup {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

@layer utilities {
  .sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
  .no-scroll { overflow: hidden; }
}

/* ════════════════════════════════════════════════════════════════════════
   Responsive overrides — uses the four canonical breakpoints from tokens.css.
   Mobile is the base; everything above gets progressively enhanced.
   ──────────────────────────────────────────────────────────────────────
     sm  → 480px  (--bw-bp-sm)
     md  → 768px  (--bw-bp-md)
     lg  → 1024px (--bw-bp-lg)
     xl  → 1280px (--bw-bp-xl)
   No ad-hoc widths anywhere else in the codebase.
   ════════════════════════════════════════════════════════════════════════ */

@media (min-width: 480px) {
  /* sm — phone landscape, larger phones */
  .btn { padding: var(--bw-space-3) var(--bw-space-6); font-size: var(--bw-text-sm); }
}

@media (min-width: 768px) {
  /* md — tablet portrait, 2-col layouts emerge */
  html { scroll-padding-top: 96px; }
  section { scroll-margin-top: 96px; }
}

@media (min-width: 1024px) {
  /* lg — laptops, 3-col layouts */
}

@media (min-width: 1280px) {
  /* xl — desktop, full-width compositions */
}