/*! PolyFishCSS-Headers.css | v1.0.0-rc.2-rc.1-rc.1-rc.1-rc.1-rc.1 | polyfish.org | MIT
 *
 * Everything above the fold: announcement bar, sticky navigation, hero
 * variants, interior page headers and breadcrumbs. Needs no script - the
 * mobile menu is a checkbox and a sibling selector.
 *
 * Depends on: PolyFishCSS-Core.css (tokens, buttons, container).
 * Load order: Core -> Headers -> Content -> Footers -> Utilities.
 *             Utilities must come last; several of its helpers rely on being
 *             the later rule when specificity ties with a component.
 *
 * CONTENTS
 *   1. Announcement bar
 *   2. Navigation
 *   3. Hero
 *   4. Interior page header + breadcrumbs
 *
 * CONVENTIONS
 *   .pf-block            component root
 *   .pf-block__element   part of a component, never used alone
 *   .pf-block--modifier  variant, always applied alongside the root class
 *
 *   Components read role tokens (--pf-accent, --pf-surface, --pf-border) and
 *   never raw palette values, which is what makes a theme a handful of
 *   redeclared properties rather than a fork. See docs/tokens for the list.
 *
 * BROWSER BASELINE
 *   Custom properties, grid, gap, clamp(), clip-path, :focus-visible.
 *   Roughly Chrome 105 / Safari 15.4 / Firefox 103 and newer. Later features
 *   (color-mix, animation-timeline) are used only behind @supports or with a
 *   declared fallback, so nothing breaks on older engines - it just does less.
 */

@layer polyfish.core, polyfish.grid, polyfish.headers, polyfish.content, polyfish.forms, polyfish.components, polyfish.footers, polyfish.space, polyfish.effects, polyfish.utilities, polyfish.fonts, polyfish.compat;

/* ==========================================================================
   CASCADE LAYER
   ==========================================================================
   Everything below sits in `polyfish.headers`. The layer order is declared in
   every module, so it holds no matter which order you link the files in.

   Why this matters to you: unlayered CSS beats layered CSS regardless of
   specificity. Your own stylesheet overrides any framework rule with a plain
   class selector — no `!important`, no specificity arms race, no worrying
   about whether Utilities loaded last.

     <link rel="stylesheet" href="PolyFishCSS-Core.min.css">
     <link rel="stylesheet" href="my-app.css">   <!-- wins, always -->

   If you want your CSS layered too, name a layer after the framework's:

     @layer polyfish, app;
     @layer app { .card { background: rebeccapurple; } }
   ========================================================================== */

@layer polyfish.headers {
  /* ==========================================================================
     #ANNOUNCEMENT BAR
     ========================================================================== */
  
  /**
   * Top bar
   *
   * <div class="pf-topbar">
   *   <div class="pf-container pf-topbar__inner"> ... </div>
   * </div>
   *
   * Variant: --green fills with the accent and recolours its own links.
   * Sits above .pf-nav in the markup so the sticky navigation scrolls over it.
   */
  
  .pf-topbar {
    background: var(--pf-base-900);
    border-bottom: 1px solid var(--pf-border);
    color: var(--pf-text-muted);
    font-size: var(--pf-text-xs);
  }
  .pf-topbar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--pf-space-3);
    padding-block: 0.65rem;
    text-align: center;
  }
  .pf-topbar a { font-weight: 500; }
  .pf-topbar--accent { background: var(--pf-hue-1); border-color: transparent; color: var(--pf-base-950); }
  .pf-topbar--accent a { color: var(--pf-base-950); text-decoration-color: rgba(0, 16, 58, 0.5); }
  
  /* ==========================================================================
     #NAVIGATION
     ========================================================================== */
  
  /**
   * Navigation
   *
   * <header class="pf-nav">
   *   <div class="pf-container pf-nav__inner">
   *     <a class="pf-nav__brand" href="/">Brand</a>
   *
   *     <input type="checkbox" id="pf-nav-toggle" class="pf-nav__checkbox">
   *     <label class="pf-nav__burger" for="pf-nav-toggle"><span></span></label>
   *
   *     <div class="pf-nav__menu">
   *       <ul class="pf-nav__links"> ... </ul>
   *       <div class="pf-nav__actions"> ... </div>
   *     </div>
   *   </div>
   * </header>
   *
   * Variants: --static (scrolls away)  --flush (transparent, over a photo hero)
   *
   * ORDER MATTERS. The checkbox must precede .pf-nav__menu, because the open
   * state is expressed as :checked ~ .pf-nav__menu and the subsequent-sibling
   * combinator only looks forward. Move the input and the menu stops opening.
   *
   * Mark the current page with aria-current on its link; the underline is
   * styled off that attribute rather than a modifier class, so the
   * accessibility hint and the visual state cannot drift apart.
   */
  
  .pf-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--pf-bg); /* fallback where color-mix is unsupported */
    background: color-mix(in srgb, var(--pf-bg) 88%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--pf-border);
  }
  .pf-nav--static { position: static; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .pf-nav--flush { background: transparent; border-bottom-color: transparent; }
  
  .pf-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pf-space-5);
    min-height: 4.5rem;
  }
  
  .pf-nav__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--pf-text);
    font-family: var(--pf-font-display);
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-decoration: none;
    flex: none;
  }
  .pf-nav__brand:hover { color: var(--pf-text); }
  .pf-nav__brand img,
  .pf-nav__brand svg { width: 2.1rem; height: 2.1rem; }
  .pf-nav__brand small {
    align-self: center;
    color: var(--pf-text-muted);
    font-family: var(--pf-font-mono);
    font-size: 0.62rem;
    font-weight: 400;
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius-pill);
    padding: 0.1rem 0.5rem;
  }
  
  .pf-nav__menu {
    display: flex;
    align-items: center;
    gap: var(--pf-space-6);
    margin-inline-start: auto;
  }
  
  .pf-nav__links {
    display: flex;
    align-items: center;
    gap: var(--pf-space-5);
    margin: 0;
  }
  .pf-nav__links a {
    color: var(--pf-text-muted);
    font-size: var(--pf-text-base);
    font-weight: 500;
    text-decoration: none;
    padding-block: 0.4rem;
    position: relative;
  }
  .pf-nav__links a:hover { color: var(--pf-base-50); }
  .pf-nav__links a[aria-current] { color: var(--pf-base-50); }
  .pf-nav__links a[aria-current]::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-inline-end: 0;
    bottom: -0.15rem;
    height: 2px;
    background: var(--pf-accent);
  }
  
  .pf-nav__actions {
    display: flex;
    align-items: center;
    gap: var(--pf-space-3);
  }
  
  /**
   * The checkbox is visually hidden but not display:none - it has to stay
   * focusable so the menu is reachable by keyboard. The label is its accessible
   * hit area and carries a visually-hidden text node for screen readers.
   */
  .pf-nav__checkbox { position: absolute; opacity: 0; pointer-events: none; }
  
  .pf-nav__burger {
    display: none;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius);
    cursor: pointer;
    place-items: center;
  }
  .pf-nav__burger span,
  .pf-nav__burger span::before,
  .pf-nav__burger span::after {
    display: block;
    width: 1.1rem;
    height: 2px;
    background: var(--pf-text);
    content: "";
    transition: transform var(--pf-speed) var(--pf-ease), opacity var(--pf-speed) var(--pf-ease);
  }
  .pf-nav__burger span::before { transform: translateY(-6px); }
  .pf-nav__burger span::after { transform: translateY(4px); }
  .pf-nav__checkbox:focus-visible + .pf-nav__burger { outline: 2px solid var(--pf-focus); outline-offset: 2px; }
  
  @media (max-width: 860px) {
    .pf-nav__burger { display: grid; }
    .pf-nav__menu {
      position: absolute;
      inset: 100% 0 auto;
      display: grid;
      gap: var(--pf-space-4);
      background: var(--pf-base-900);
      border-bottom: 1px solid var(--pf-border);
      padding: var(--pf-space-5) var(--pf-gutter) var(--pf-space-6);
      /* A long menu on a short phone has to scroll rather than run off the
         bottom of the screen with no way to reach the last item. dvh, not vh,
         because vh on mobile is the viewport with the address bar hidden. */
      max-height: calc(100dvh - 4.5rem);
      overflow-y: auto;
      overscroll-behavior: contain;
      padding-bottom: max(var(--pf-space-6), env(safe-area-inset-bottom));
      visibility: hidden;
      opacity: 0;
      transform: translateY(-0.5rem);
      transition: opacity var(--pf-speed) var(--pf-ease), transform var(--pf-speed) var(--pf-ease),
        visibility var(--pf-speed);
    }
    .pf-nav__checkbox:checked ~ .pf-nav__menu { visibility: visible; opacity: 1; transform: none; }
    .pf-nav__checkbox:checked ~ .pf-nav__burger span { background: transparent; }
    .pf-nav__checkbox:checked ~ .pf-nav__burger span::before { transform: rotate(45deg); }
    .pf-nav__checkbox:checked ~ .pf-nav__burger span::after { transform: rotate(-45deg); }
    .pf-nav__links { flex-direction: column; align-items: stretch; gap: var(--pf-space-1); }
    .pf-nav__links a { font-size: var(--pf-text-lg); padding-block: 0.5rem; }
    .pf-nav__actions { flex-direction: column; align-items: stretch; }
    .pf-nav__inner { position: relative; }
  }
  
  /* ==========================================================================
     #HERO
     ========================================================================== */
  
  /**
   * Hero
   *
   * <section class="pf-hero pf-hero--split">
   *   <div class="pf-container pf-hero__inner">
   *     <div>
   *       <p class="pf-hero__eyebrow"> ... </p>
   *       <h1 class="pf-hero__title"> ... </h1>
   *       <p class="pf-hero__lede"> ... </p>
   *       <div class="pf-hero__actions"> ... </div>
   *     </div>
   *     <div class="pf-hero__media"> ... </div>
   *   </div>
   * </section>
   *
   * Variants: --split (copy + media)  --center (one column)  --photo (image bg)
   *
   * The triangle mesh is a masked pseudo-element, not an image: no extra
   * request, and it recolours with the theme because the SVG is a data URI
   * built from the accent. The mask fades it out before it reaches the copy,
   * which is what keeps the headline legible without a scrim.
   *
   * For --photo, set the image on the section itself:
   *   <section class="pf-hero pf-hero--photo" style="--pf-hero-image: url(/x.jpg)">
   */
  
  .pf-hero {
    position: relative;
    overflow: hidden;
    background: var(--pf-bg);
    padding-block: clamp(5.5rem, 13vw, 11rem);
  }
  .pf-hero::before {
    content: "";
    position: absolute;
    inset: -20% -10% auto;
    height: 150%;
    background-image: var(--pf-mesh);
    background-position: center top;
    -webkit-mask-image: radial-gradient(120% 80% at 78% 0%, #000 0%, transparent 68%);
    mask-image: radial-gradient(120% 80% at 78% 0%, #000 0%, transparent 68%);
    pointer-events: none;
  }
  .pf-hero > * { position: relative; }
  
  .pf-hero__inner { display: grid; gap: var(--pf-space-5); }
  .pf-hero--center .pf-hero__inner { justify-items: center; text-align: center; }
  .pf-hero--center .pf-hero__lede { margin-inline: auto; }
  
  .pf-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--pf-space-2);
    background: var(--pf-surface);
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius-pill);
    color: var(--pf-text-muted);
    font-size: var(--pf-text-xs);
    padding: 0.45rem 0.95rem;
    width: fit-content;
  }
  
  .pf-hero__title {
    font-size: var(--pf-text-5xl);
    line-height: var(--pf-leading-tight);
    letter-spacing: -0.038em;
    max-width: 15ch;
  }
  .pf-hero--center .pf-hero__title { max-width: 20ch; }
  
  .pf-hero__lede {
    color: var(--pf-text-muted);
    font-size: var(--pf-text-xl);
    line-height: 1.55;
    max-width: 52ch;
  }
  
  .pf-hero__actions { display: flex; flex-wrap: wrap; gap: var(--pf-space-3); margin-top: var(--pf-space-2); }
  
  .pf-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pf-space-2) var(--pf-space-5);
    margin-top: var(--pf-space-4);
    color: var(--pf-text-muted);
    font-size: var(--pf-text-sm);
  }
  .pf-hero__meta li { display: flex; align-items: center; gap: 0.5rem; }
  
  /* Split hero: copy left, artwork or code sample right. */
  .pf-hero--split .pf-hero__inner {
    grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
    gap: var(--pf-gap-lg);
    align-items: center;
  }
  .pf-hero__media {
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius-lg);
    background: var(--pf-base-900);
    overflow: hidden;
    box-shadow: var(--pf-lift);
  }
  .pf-hero__media img { width: 100%; }
  
  /**
   * The ::after gradient sits at z-index 0 and the hero's children are lifted to
   * 1. Without that explicit lift the pseudo-element paints over the copy,
   * because positioned siblings paint in document order and ::after comes last.
   */
  .pf-hero--photo { --pf-hero-image: none; }
  .pf-hero--photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to right, var(--pf-base-800) 12%, rgba(0, 15, 63, 0.72) 55%, rgba(0, 8, 35, 0.85)),
      var(--pf-hero-image);
    background-size: cover;
    background-position: center;
    z-index: 0;
  }
  .pf-hero--photo > * { z-index: 1; }
  
  /* ==========================================================================
     #PAGE HEADER + BREADCRUMBS
     ========================================================================== */
  
  /**
   * Page header
   *
   * <div class="pf-pagehead">
   *   <div class="pf-container pf-pagehead__inner">
   *     <ul class="pf-breadcrumb"> ... </ul>
   *     <h1 class="pf-pagehead__title"> ... </h1>
   *     <p class="pf-pagehead__lede"> ... </p>
   *   </div>
   * </div>
   *
   * Shorter than a hero, because the visitor has already arrived. The
   * breadcrumb separator is a ::before on each item after the first, so it is
   * never selected when the text is copied.
   */
  
  .pf-pagehead {
    border-bottom: 1px solid var(--pf-border);
    padding-block: clamp(4rem, 8vw, 6.5rem);
    background: linear-gradient(var(--pf-base-900), var(--pf-bg));
  }
  .pf-pagehead__inner { display: grid; gap: var(--pf-space-3); }
  .pf-pagehead__title { font-size: var(--pf-text-4xl); max-width: 18ch; }
  .pf-pagehead__lede { color: var(--pf-text-muted); font-size: var(--pf-text-lg); line-height: 1.6; max-width: 58ch; }
  
  .pf-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pf-space-2);
    color: var(--pf-text-muted);
    font-size: var(--pf-text-sm);
    margin: 0;
  }
  .pf-breadcrumb li { display: flex; align-items: center; gap: var(--pf-space-2); }
  .pf-breadcrumb li + li::before { content: "/"; color: rgba(169, 188, 216, 0.5); }
  .pf-breadcrumb a { text-decoration: none; }
}