/* Marketing-shell chrome (#325): top header for public surfaces.
   Layout overrides + header styling for body[data-shell="marketing"].

   Surfaces wrapped: /, /legal/*, /dmca, /dmca-policy, /copyright.
   The slim public footer (site-footer.css, PR #280) already renders on
   these surfaces -- this file does not re-define it.

   Composition target (bug #2): / composes within 100dvh at 1440x900 +
   390x844 with no chrome-induced overflow. The override below collapses
   the default body grid (sidebar + main) to a single column header + main
   + footer stack, so the home hero gets the full viewport minus header +
   footer height. The hero's own flex-1 inside .app-shell__main keeps the
   single-screen target without bleeding into a scroll. */

@layer layout {
  /* Marketing shell rewires body grid: no sidebar column, single-column
     header + main + footer rows. The default body grid in layout.css is
     1fr at all viewports for column 1, and adds a sidebar-width column
     at >=1024px; the marketing shell discards both. */
  body[data-shell="marketing"] {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
  }

  /* Re-apply the single-column override at the desktop breakpoint so the
     layout.css `min-width: 1024px` block (which sets two columns + one
     row for the app shell) doesn't win against the unscoped body rule
     above. Cascade-layer order makes this redundant in modern browsers,
     but a direct restatement is cheaper to reason about than chasing
     specificity. */
  @media (min-width: 1024px) {
    body[data-shell="marketing"] {
      grid-template-columns: 1fr;
      grid-template-rows: auto 1fr auto;
    }
  }

  /* Marketing-shell main gets the page-gutter inline padding plus a
     modest block padding -- no `padding-block-end: tab-bar-height` since
     there's no bottom tab bar on this shell. Block-start is zero so the
     home hero's own internal spacing (home.css) controls the gap from
     the header to the heading, fixing the "excess top whitespace" arm
     of bug #2. */
  body[data-shell="marketing"] .app-shell__main {
    padding-block: 0;
    padding-inline: var(--space-page);
    /* Minimum viewport composition: header + main + footer == 100dvh
       on / specifically; min-height: 0 lets main flex inside the grid
       without imposing its content's intrinsic height. */
    min-block-size: 0;
  }

}

@layer components {
  /* / hero composition lives in `components` (not `layout`) because the
     base .home-hero rule it overrides is itself in `components` (see
     home.css). Cross-layer cascade: components beats layout regardless
     of selector specificity, so the override has to share home.css's
     layer to win. */
  body[data-shell="marketing"] .home-hero {
    /* Hero parks at the top of the available viewport-fill block,
       directly under the marketing header. Heading sits flush against
       the header bar; the min-block-size guarantees no body scroll on /.
       NOTE: align-items: start (not align-content) is the load-bearing
       override — home.css:166 sets align-items: center on the desktop
       breakpoint, which vertically-centers the grid items inside the
       tall min-block-size row. align-content was a no-op there. */
    block-size: 100%;
    min-block-size: calc(100dvh - var(--marketing-header-h, 64px) - var(--marketing-footer-h, 120px));
    align-items: start;
  }

  /* Header sizing token published so the home-hero composition above can
     subtract the header + footer footprint without hardcoding pixels.
     Updated by mobile breakpoint below. */
  :root {
    --marketing-header-h: 64px;
  }

  /* Top header bar: mascot + wordmark left, Sign in right. Sticky to
     viewport top so it stays visible during scroll on longer marketing
     surfaces (legal pages). On / the page fits in one screen so the
     stickiness is a no-op. */
  .marketing-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 5;
    background: var(--md-surface);
    border-block-end: 1px solid color-mix(in oklch, var(--md-border-muted) 70%, transparent);
  }

  .marketing-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    inline-size: 100%;
    max-inline-size: var(--content-max);
    margin-inline: auto;
    padding-block: var(--space-4);
    padding-inline: var(--space-page);
  }

  /* Left cluster: mascot + wordmark in one anchor. Single click target,
     single tab stop. */
  .marketing-header__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    color: var(--md-on-surface);
    transition: opacity var(--motion-spring-fast-effects-duration) var(--motion-spring-fast-effects);
  }
  .marketing-header__brand:hover { opacity: 0.85; }
  .marketing-header__brand:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-xs);
  }

  .marketing-header__mascot {
    inline-size: 28px;
    block-size: 28px;
    display: block;
    flex-shrink: 0;
  }

  .marketing-header__wordmark {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: var(--text-lg);
    letter-spacing: -0.01em;
    color: var(--md-on-surface);
  }

  /* Right cluster: marketing destinations. Currently a single "Sign in"
     link; About + Pricing land here as their pages ship in follow-up
     slices. ml: auto pins the cluster to the inline-end. */
  .marketing-header__nav {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: var(--space-6);
  }

  .marketing-header__link {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--md-on-surface-variant);
    text-decoration: none;
    transition: color var(--motion-spring-fast-effects-duration) var(--motion-spring-fast-effects);
  }
  .marketing-header__link:hover { color: var(--md-on-surface); }
  .marketing-header__link:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-xs);
  }

  /* Mobile: tighter padding, slightly smaller header so the hero gets
     more of the viewport. Mascot stays; wordmark stays (V2 spec keeps
     the wordmark visible at all breakpoints -- only fall to mascot-only
     if a follow-up slice introduces enough right-cluster items to
     pressure the bar). */
  @media (max-width: 767px) {
    :root { --marketing-header-h: 56px; }
    .marketing-header__inner {
      padding-block: var(--space-3);
      gap: var(--space-3);
    }
    .marketing-header__nav { gap: var(--space-4); }
    .marketing-header__wordmark { font-size: var(--text-base); }
  }
}