/* =========================================================================
   nav-rail.css - the stylesheet EVERY page loads

   WHY THIS IS ITS OWN STYLESHEET
   The site is styled by two files that never meet. The root pages load
   premium.css, whose every selector is scoped to `.pp-refresh` on the body;
   the article, tutorial and journal pages load styles.css and carry no such
   class. Anything both halves need - the header, and the shared interaction
   tokens - has to live in a file both sides load, and this is that file.

   The name is historical: it began as the stylesheet for the department image
   rail in the old mega-menu. The rail went with that menu on 18 Sep 2026. The
   file keeps its name because 23,000 pages and the cache-busting list in
   tools/refresh-design-cache.mjs reference it; renaming it would touch every
   page for no change in behaviour.

   Contents:
     1. Shared interaction palette (orange hover/active, 17 Sep 2026)
     2. Site header and primary navigation (spec menu, 18 Sep 2026)
   ========================================================================= */

/* =========================================================================
   SHARED INTERACTION PALETTE - orange hover and active   (17 Sep 2026)

   Every button, icon button, thumbnail and accordion header on the site turns
   orange on hover, and an open accordion header stays orange in a deeper tone.

   WHY THE TOKENS LIVE HERE
   The two stylesheets never meet and each defines its own token set -
   `.pp-refresh{--pp-ink,...}` in premium.css, `:root{--ink,--royal,...}` in
   styles.css. A value declared in either one is undefined on half the site,
   and this is the only stylesheet both sides load. Declared on :root so it
   inherits into `.pp-refresh` pages too.

   TEXT ON ORANGE IS INK, NEVER WHITE.
   #f97316 against white is 2.8:1 and fails AA. Against --pp-orange-ink it is
   6.1:1, and the deepest stop --pp-orange-deep is still 4.8:1. If these values
   ever change, keep the dark-text pairing or the labels stop being legible.

   THE FACE GRADIENT runs light -> deep -> light VERTICALLY, so a button and an
   accordion header read as the same lit surface. It replaced a 120deg diagonal
   that deepened from left to right.
   ========================================================================= */
:root{
  --pp-orange-soft:#fdba74;   /* the lit top and bottom edge */
  --pp-orange:#f97316;        /* hover: the middle of the ramp */
  --pp-orange-deep:#ea580c;   /* open/active: the middle, one step deeper */
  --pp-orange-ink:#211631;    /* the only text colour used on orange */
  --pp-orange-edge:#c2410c;   /* borders and the contrasting arrow edge */

  --pp-orange-face:linear-gradient(180deg,
    var(--pp-orange-soft) 0%,
    var(--pp-orange) 50%,
    var(--pp-orange-soft) 100%);
  --pp-orange-face-open:linear-gradient(180deg,
    var(--pp-orange) 0%,
    var(--pp-orange-deep) 50%,
    var(--pp-orange) 100%);

  /* The resting button edge keeps the brand gold but takes the same vertical
     shape, so hovering changes the colour and not the lighting. */
  --pp-gold-face:linear-gradient(180deg,#f8e7a8 0%,#b77b1d 50%,#f8e7a8 100%);

  /* ---- variables that were used but never declared -----------------------
     premium.css referenced all three and styles.css referenced --purple. An
     unresolved var() is invalid at computed-value time, so each declaration
     was dropped whole: `border:1px solid var(--pp-gold)` gave the mega-menu
     panel NO border at all, and the submenu eyebrow on article pages had no
     colour. Declared here because both stylesheets need them. */
  --pp-gold:#d79a37;
  --pp-purple:#7b3fc6;
  --pp-raspberry:#c6546d;
  --purple:#7c3aed;
}

/* =========================================================================
   SITE HEADER AND PRIMARY NAVIGATION                    (18 Sep 2026)

   Built to the NurtureCrest navigation specification
   (NurtureCrest/docs/navigation-menus.md). Markup comes from
   tools/nav-template.mjs; behaviour from the "Site header" block in script.js.

   Class names carry a `pp-` prefix, as the spec intends for reuse, so none of
   this collides with the old `.nav`, `.nav-links` and `.logo` rules that are
   still in premium.css and styles.css. Every selector is also qualified through
   `.pp-header`, because each stylesheet has blanket link rules - `.pp-refresh a`
   in one, `a:hover` in the other - that would otherwise outrank or equal these.

   Colour tokens are the spec's own. Where the spec defers to "the site-wide
   button style" - the Menu button's hover - this uses PowderedPurple's orange
   tokens from the block above, so there is one orange on the site.
   ========================================================================= */
:root{
  --nav-ink:#211631;          /* link text */
  --nav-paper:#fffdf9;        /* header and panel background */
  --nav-line:#d4c4e8;         /* hairlines and borders */
  --nav-accent:#6c4b92;       /* dropdown label text */
  --nav-hover-text:#93621b;   /* top-level link and flyout item hover */
  --nav-hover-bg:#eee7f7;     /* dropdown item hover */
  --nav-shadow:0 18px 38px rgba(33,22,49,.17);
  --nav-height:76px;
  --nav-shell:1200px;
}

/* ---- header bar --------------------------------------------------------- */
.pp-header{position:sticky;top:0;z-index:100;background:rgba(255,253,249,.98);border-bottom:1px solid var(--nav-line)}
.pp-header .pp-shell{width:min(var(--nav-shell),calc(100% - 56px));margin:auto}
.pp-header .pp-nav-row{min-height:var(--nav-height);display:flex;align-items:center;gap:25px}

/* The brand mark is unchanged from the previous header: a 40px icon, then
   "Powdered" in Fraunces ink and "Purple" in rose. */
.pp-header .pp-logo{display:flex;align-items:center;gap:11px;flex:0 0 auto;color:var(--nav-ink);text-decoration:none}
.pp-header .pp-logo img{display:block;width:40px;height:40px;object-fit:contain}
.pp-header .pp-logo-text{font:600 1.14rem/1 Fraunces,Georgia,serif;color:var(--nav-ink);letter-spacing:normal}
.pp-header .pp-logo-text span{color:#c6546d}

/* ---- top-level links ---------------------------------------------------- */
.pp-header .pp-nav{display:flex;align-items:center;gap:28px;margin-left:auto}
.pp-header .pp-nav > a,
.pp-header .pp-dropdown-trigger{color:var(--nav-ink);text-decoration:none;font:700 .88rem/1.2 Inter,system-ui,sans-serif;white-space:nowrap;background:none}
.pp-header .pp-nav > a:hover,
.pp-header .pp-dropdown-trigger:hover{color:var(--nav-hover-text)}
/* The spec has no current-page state; this is the lightest one that still
   tells a visitor where they are, and it is not a colour-only cue. */
.pp-header .pp-nav > a[aria-current="page"],
.pp-header .pp-dropdown-trigger[aria-current="page"]{color:var(--nav-accent);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.pp-header a:focus-visible,
.pp-header button:focus-visible{outline:2px solid var(--nav-accent);outline-offset:3px}

/* ---- dropdowns ---------------------------------------------------------- */
/* The trigger's padding fills the bar's height, so the pointer never crosses
   empty space between the link and its panel and the panel never flickers
   shut on the way down (spec, section 3). */
.pp-header .pp-dropdown{position:relative}
.pp-header .pp-dropdown-trigger{display:block;padding:28px 0}

/* Hidden with three properties together (spec, section 2): opacity for the
   fade, visibility to take the links out of the tab order and away from screen
   readers, pointer-events so an invisible panel cannot catch a click.
   :focus-within opens it for keyboard users. .is-open is the touch/tap state
   and .is-dismissed the Escape state, both set by script.js. */
.pp-header .pp-dropdown-panel{visibility:hidden;opacity:0;pointer-events:none;position:absolute;top:100%;z-index:5;padding:8px;background:var(--nav-paper);box-shadow:var(--nav-shadow);transition:opacity .14s ease}
.pp-header .pp-dropdown:hover .pp-dropdown-panel,
.pp-header .pp-dropdown:focus-within .pp-dropdown-panel,
.pp-header .pp-dropdown.is-open .pp-dropdown-panel{visibility:visible;opacity:1;pointer-events:auto}
.pp-header .pp-dropdown.is-dismissed .pp-dropdown-panel{visibility:hidden;opacity:0;pointer-events:none}
.pp-header .pp-dropdown-panel.is-mega{left:-150px;width:300px}
.pp-header .pp-dropdown-panel.is-list{right:-18px;width:275px}

/* Dropdown items: small, heavy, upper-case - the look that gives the panels
   their character (spec, section 6). */
.pp-header .pp-panel-link{display:flex;justify-content:space-between;gap:8px;padding:10px 14px;color:var(--nav-accent);text-decoration:none;text-transform:uppercase;letter-spacing:.06em;font:800 .75rem/1.3 Inter,system-ui,sans-serif}
.pp-header .pp-panel-link:hover{background:var(--nav-hover-bg);color:var(--nav-accent)}
.pp-header .pp-panel-note{margin:8px 10px 5px;padding-top:9px;border-top:1px solid var(--nav-line);font-size:.68rem;line-height:1.35;color:#655b6f}

/* ---- second level: the flyout beside a department ----------------------
   Opens to the RIGHT. The spec's demo opens flyouts left because its Shop menu
   sits at the right of the header; section 4 says to flip the direction when a
   menu sits further left, and to test both ends of the desktop range.

   Here Products is the LEFTMOST item in the nav. Measured on 18 Sep 2026: a
   left-opening flyout starts at (trigger - 420px), which is off-screen below a
   1,140px viewport - clipped by 50px at 1,081px. Opening right, its far edge is
   at (trigger + 420px), and the five items to the right of Products occupy at
   least 610px, so the flyout ends at least ~290px inside the viewport at every
   desktop width. Hidden panels still take layout space, so this is also what
   keeps a closed flyout from adding a horizontal scrollbar (spec, section 4).
   The chevron `›` points right, which now matches (spec, "worth adding" 5). */
.pp-header .pp-category{position:relative}
.pp-header .pp-flyout{visibility:hidden;opacity:0;pointer-events:none;position:absolute;top:0;left:100%;width:270px;padding:12px 18px;background:var(--nav-paper);box-shadow:var(--nav-shadow);transition:opacity .14s ease}
.pp-header .pp-category:hover .pp-flyout,
.pp-header .pp-category:focus-within .pp-flyout,
.pp-header .pp-category.is-open .pp-flyout{visibility:visible;opacity:1;pointer-events:auto}
.pp-header .pp-flyout a{display:block;padding:5px 0;color:var(--nav-ink);font:400 .83rem/1.4 Inter,system-ui,sans-serif;text-decoration:none;text-transform:none;letter-spacing:normal}
.pp-header .pp-flyout a:hover{color:var(--nav-hover-text)}

/* ---- mobile: a Menu button replaces the row of links --------------------
   Collapse at 1,000px, not the spec's 820px: section 5 says to move it if the
   logo or menu is wider, and this one is. Measured on 18 Sep 2026, the logo and
   six links need 963px on one row; 1,000px leaves room for font-loading
   differences. script.js COLLAPSE must match this number. */
.pp-header .pp-menu-button{display:none}
@media (max-width: 1000px){
  .pp-header .pp-shell{width:min(100% - 36px, var(--nav-shell))}
  .pp-header .pp-menu-button{
    display:block;margin-left:auto;padding:9px 12px;border:1px solid var(--nav-line);border-radius:14px;
    background:linear-gradient(135deg, rgba(78,45,105,.96), rgba(39,24,55,.97));color:#fff;
    font:700 .78rem Inter,system-ui,sans-serif;cursor:pointer;
  }
  /* The site-wide button hover: orange face, ink label. */
  .pp-header .pp-menu-button:hover{background:var(--pp-orange-face);color:var(--pp-orange-ink);border-color:var(--pp-orange-deep)}
  .pp-header .pp-nav{display:none}
  .pp-header .pp-nav.is-open{
    display:flex;position:absolute;top:100%;left:0;right:0;margin:0;padding:14px 28px 20px;
    flex-direction:column;align-items:flex-start;gap:13px;
    background:var(--nav-paper);border-bottom:2px solid var(--nav-line);box-shadow:0 15px 28px rgba(33,22,49,.14);
    max-height:calc(100vh - var(--nav-height));overflow-y:auto;
  }
  .pp-header .pp-nav.is-open .pp-dropdown-trigger{padding:0}
  .pp-header .pp-nav.is-open .pp-dropdown-panel{position:static;visibility:visible;opacity:1;pointer-events:auto;width:min(100%, 300px);margin-top:8px;box-shadow:none;padding:0}
  /* On a phone each department link goes straight to its page. */
  .pp-header .pp-nav.is-open .pp-flyout{display:none}
  .pp-header .pp-nav.is-open .pp-panel-link span{display:none}
}
@media (max-width: 510px){ .pp-header .pp-shell{width:min(100% - 28px, var(--nav-shell))} }