/* ============================================================================
   Navigation (M6 — navigation simplification) — hover dropdowns for the
   simplified header (Products ▼ / Advanced ▼). Additive; reuses the existing
   M1 design tokens (--pw-*) only. No redesign of the design system.
   Desktop: reveal on hover / focus-within. Touch/keyboard: `.open` class
   (toggled by navigation.js). Mobile drawer renders the same links flattened.
   ============================================================================ */
.pw-dd { position: relative; display: inline-flex; }
.pw-dd-toggle { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; cursor: pointer; font: inherit; }
.pw-dd-toggle .pw-dd-caret { transition: transform .15s ease; }
.pw-dd.open > .pw-dd-toggle .pw-dd-caret,
.pw-dd:hover > .pw-dd-toggle .pw-dd-caret { transform: rotate(180deg); }

.pw-dd-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 70;
  min-width: 210px; padding: 6px;
  background: var(--pw-surface, #fff);
  border: 1px solid var(--pw-border, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(28, 25, 23, .14), 0 2px 8px rgba(28, 25, 23, .08);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
/* a small hover bridge so the menu doesn't close in the gap */
.pw-dd::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 8px; }
.pw-dd:hover > .pw-dd-menu,
.pw-dd:focus-within > .pw-dd-menu,
.pw-dd.open > .pw-dd-menu { opacity: 1; visibility: visible; transform: translateY(0); }

.pw-dd-item { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 8px; text-decoration: none; color: var(--pw-text, #1c1917); font-size: .9375rem; white-space: nowrap; line-height: 1.2; }
.pw-dd-item:hover, .pw-dd-item:focus-visible { background: var(--pw-surface-2, rgba(120,113,108,.10)); outline: none; }
.pw-dd-item .pw-ico { color: var(--pw-accent); flex: none; }
.pw-dd-item .pw-dd-sub { display: block; font-size: .75rem; color: var(--pw-text-subtle, #78716c); }
.pw-dd-item .pw-dd-tt { display: flex; flex-direction: column; }

/* compact two-column mega menu (Advanced labs) */
.pw-dd-mega > .pw-dd-menu { min-width: 380px; }
.pw-dd-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }

/* right-align the last dropdown so it doesn't overflow the viewport edge */
.pw-dd.pw-dd-right > .pw-dd-menu { left: auto; right: 0; }

/* Mobile drawer: dropdown groups render as labelled sections */
.pw-drawer .pw-dd-group { margin-top: 6px; }
.pw-drawer .pw-dd-group-label { font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em; color: var(--pw-text-subtle, #78716c); padding: 8px 0 4px; }

/* M8.8 P5 (RC polish): keep the header from clipping its right-side pill at the
   smallest desktop width. The full nav only just fits at ~1024px, so tighten the
   item spacing between 1024–1180px only; wider viewports are unchanged. Pure
   presentational — no behavior or breakpoint change. */
@media (min-width: 1024px) and (max-width: 1180px) {
  .pw-nav { gap: 2px; }
  .pw-nav-link { padding-left: 9px; padding-right: 9px; }
  .pw-dd-toggle { padding-left: 3px; padding-right: 3px; }
}

/* The right-side header pill — the product tag on most pages, and the
   "Identity Provider" context badge on the OAuth Authorization Server —
   must never wrap.
   ---------------------------------------------------------------------------
   It used to say nowrap only inside the 1024–1180px media query above, on the
   theory that a pill is "free to wrap" elsewhere. It is not: .pw-badge and
   .pw-tag-system both carry a FIXED height (22px and 20px), so a second line
   does not make the pill taller — it spills out of it. "Identity Provider"
   broke across two lines at ordinary desktop widths, the text escaped the
   rounded background, and the whole right-hand cluster lost its vertical
   alignment with the navigation.
   flex: 0 0 auto is the other half: without it the pill is a shrinkable flex
   item, so the browser squeezes it narrow enough to force the wrap in the
   first place. Presentational only — no breakpoint, markup or behaviour
   change, and nothing here touches the OAuth flow. */
.pw-header .pw-tag-system,
.pw-header .pw-badge-brand {
  white-space: nowrap;
  flex: 0 0 auto;
}

/* No narrow-width companion rule is needed, and one was removed rather than
   left in place looking useful: measured at 390/375/360/320px, the header's
   right edge sits at the same x with the pill wrapped or unwrapped, because
   .pw-header-end is already floored by its two icon buttons. Making the brand
   shrinkable changed nothing at any width, so it is not here. */

/* ============================================================================
   GLOBAL SHELL REFINEMENT
   ----------------------------------------------------------------------------
   The header used to sit on --pw-surface at 85% opacity, which is the page
   background, so it read as part of the page rather than as the application
   shell. The footer already solved this: --pw-surface-2 with a hairline
   border. The header now uses the same recipe from the other side, keeping the
   blur so content scrolling underneath stays soft.
   ============================================================================ */
.pw-header {
  background: color-mix(in srgb, var(--pw-surface-2) 92%, #0000);
  border-bottom: 1px solid var(--pw-border);
  box-shadow: 0 1px 0 rgba(28, 25, 23, .02), 0 1px 3px rgba(28, 25, 23, .04);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .pw-header { background: var(--pw-surface-2); }
}

/* The shell gets a wider container than the page content. .pw-container caps
   at 1200px, which is right for reading columns and wrong for a bar carrying
   a brand, ten items and two controls — it squeezed the navigation into the
   middle while leaving the far left and right of the window empty. The header
   overrides it to 1440px with roomier gutters; page content is untouched. */
.pw-header .pw-header-inner {
  max-width: 1440px;
  padding-left: 28px;
  padding-right: 28px;
}
@media (max-width: 640px) {
  .pw-header .pw-header-inner { padding-left: 16px; padding-right: 16px; }
}

/* The page-context chip beside the brand (PW_PAGE.tag) is fixed-width content
   in a bar that has none to spare on a phone: it was pushing the theme toggle
   and menu button off the right edge — 42px past the viewport on Interview
   Hub, 29px on Community. It is contextual decoration, so it stands down on
   small screens, and the brand truncates rather than shoving the controls. */
@media (max-width: 560px) {
  .pw-header .pw-tag-system { display: none; }
  .pw-brandwrap { min-width: 0; }
  .pw-brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* brand hard left, controls hard right, navigation taking the space between */
.pw-header-inner { justify-content: flex-start; gap: 22px; }
.pw-brandwrap { display: flex; align-items: center; gap: 10px; flex: none; }
.pw-header-end { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }
.pw-nav { margin-right: auto; }

/* a little more hierarchy: navigation reads as chrome, the current page reads
   as the exception, and hover has somewhere to go */
.pw-nav-link { font-weight: 500; transition: color .15s ease, background-color .15s ease; }
.pw-nav-link:hover { color: var(--pw-text); background: color-mix(in srgb, var(--pw-text) 6%, transparent); }
.pw-nav-link[aria-current="page"] { color: var(--pw-text); font-weight: 600; }
.pw-brand { letter-spacing: -.01em; }

/* ── Brand logo ───────────────────────────────────────────────────────────
   The header brand is the GEN X EVO ACADEMY lockup, applied as a CSS mask
   over background-color: currentColor.

   Mask rather than <img> so ONE black asset serves both themes: the visible
   colour is inherited from .pw-brand's text colour, which already flips with
   the theme, so there is no light file and dark file to keep in sync and no
   flash of the wrong one while the theme resolves. It also means the logo
   picks up :hover and :focus states for free.

   Width is computed, never `auto`. .pw-brand is a flex line, and a masked
   span has no intrinsic size — `width: auto` collapses it to zero and the
   logo silently disappears. calc(height × aspect-ratio) is the fix, and the
   ratio is the artwork's own bounding box measured from the source file
   rather than eyeballed: 140 / 18.958 = 7.3847.

   Size is a fit constraint, not a taste call. Measured on the page with the
   widest brand row (Practice, whose page-tag chip is 133px), the old
   "PW Platform" wordmark made .pw-brandwrap 258px, and at the container's
   1440px maximum that left the header with no slack at all: brand 258 +
   nav 948 + controls 114 + two 22px gaps = 1440 exactly. Anything wider here
   pushes the row past the container, and Practice at 1366px — where the nav
   is still at full width — already overflows by 26px without any help. So the
   budget for the logo is 258 - 133 = 125px, and 17px tall gives 125.5px.

   17px is also the right optical size rather than a grudging one: the SVG's
   bounding box IS the glyphs, so --pw-brand-h is the letter height, and 17px
   sits alongside the header's own type instead of shouting over it.

   The taller GEN X EVO ACADEMY lockup (10.29:1, ~250px at a legible height)
   cannot meet that budget while the full navigation is showing, which is why
   it is not the header asset. See the note in platform-shell.js. */
.pw-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--pw-text);
}
.pw-brand-logo {
  --pw-brand-h: 17px;
  display: block;
  flex: none;
  height: var(--pw-brand-h);
  width: calc(var(--pw-brand-h) * 7.3847);
  background-color: currentColor;
  -webkit-mask-image: url("/assets/images/GENXEVO/genxevo-mark.svg");
          mask-image: url("/assets/images/GENXEVO/genxevo-mark.svg");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: left center;
          mask-position: left center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
/* Below 560px the page-tag chip already stands down and the navigation is a
   drawer, so the constraint is the viewport rather than the nav. */
@media (max-width: 560px) {
  .pw-brand-logo { --pw-brand-h: 16px; }
}
/* A mask is decoration to a print stylesheet and to any renderer that drops
   background images. The link keeps its aria-label either way, so the brand
   is still announced; this only stops the row from collapsing to nothing. */
@media print {
  .pw-brand-logo { display: none; }
  .pw-brand::after { content: "GEN X EVO ACADEMY"; font-weight: 700; }
}

/* Courses and Blogs are ordinary links now — nothing in the header is
   dimmed or badged. This remains only for the footer, where Discord and
   GitHub genuinely have no destination. */
.pw-soon-link { color: var(--pw-text-subtle); opacity: .7; }

/* footer columns, so the shell owns its own type rather than inline styles */
.pw-foot-h { font-weight: 600; margin-bottom: 8px; }
.pw-foot-links { display: grid; gap: 6px; font-size: .875rem; }

/* The full navigation is ten items now. It no longer fits at 1024px, so the
   drawer covers 1024–1199 and the inline nav starts at 1200. This is the only
   breakpoint change; the drawer itself is untouched. */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .pw-nav { display: none; }
  .pw-header .lg\:hidden { display: inline-flex; }
}
/* With the wider shell container there is room to breathe from about 1400px
   up, so the navigation keeps its natural spacing there. Between the drawer
   breakpoint and that point the bar is genuinely full, so the items tighten
   rather than overflow. Two steps, not one, so nothing looks cramped when it
   does not have to be. */
@media (min-width: 1200px) and (max-width: 1329.98px) {
  .pw-nav { gap: 0; }
  .pw-nav-link { padding-left: 8px; padding-right: 8px; font-size: .875rem; }
  .pw-dd-toggle { padding-left: 2px; padding-right: 2px; }
  .pw-header-inner { gap: 14px; }
}

/* dropdown polish — same shapes, slightly more intent */
.pw-dd-item { transition: background-color .14s ease, color .14s ease; }
.pw-dd-item:hover .pw-ico, .pw-dd-item:focus-visible .pw-ico { color: var(--pw-accent-hover); }
.pw-dd-menu { padding: 7px; }

/* ══════════════════════════════════════════════════════════════════
   ANNOUNCEMENT BAR  ·  Module 7, additive only
   ------------------------------------------------------------------
   Rendered by platform-shell.js above the header from Admin Console →
   Settings → Announcements. The CONTENT is owner-supplied and arrives
   as text nodes; the styling is entirely here, in code, so there is
   no path from a settings value to CSS.
   ══════════════════════════════════════════════════════════════════ */
.pw-announce { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
               gap: 6px 12px; padding: 9px 16px; font-size: .8125rem; line-height: 1.5;
               border-bottom: 1px solid var(--pw-border);
               background: var(--pw-surface-2); color: var(--pw-text); }
.pw-announce-title { font-weight: 700; }
.pw-announce-msg { margin: 0; }
.pw-announce-cta { font-weight: 700; color: var(--pw-accent); text-decoration: underline;
                   text-underline-offset: 2px; }
.pw-announce-cta:hover { color: var(--pw-accent-hover, var(--pw-accent)); }
.pw-announce[data-tone="success"] { background: color-mix(in srgb, var(--pw-green, #16a34a) 12%, var(--pw-surface));
                                    border-bottom-color: color-mix(in srgb, var(--pw-green, #16a34a) 34%, var(--pw-border)); }
.pw-announce[data-tone="warning"] { background: color-mix(in srgb, #ca8a04 14%, var(--pw-surface));
                                    border-bottom-color: color-mix(in srgb, #ca8a04 36%, var(--pw-border)); }

/* ============================================================================
   Header Login button — brand, not page accent
   ----------------------------------------------------------------------------
   .pw-btn-primary paints with --pw-accent, and --pw-accent is deliberately
   re-pointed per product: .accent-commerce is rust, .accent-oauth green,
   .accent-cineverse yellow, .accent-arena a different red. That is right for
   page content, but it meant the one global control in the header changed
   colour from page to page — red on Home, rust on the shop.

   These tokens hold the brand values that :root and .dark already declare for
   --pw-accent, so the Login button stays the same red everywhere regardless of
   which accent the page is wearing. Nothing else is affected: the class is
   used only by the header and drawer Login links.
   ============================================================================ */
:root { --pw-brand: #a32234; --pw-brand-hover: #c6372e; --pw-brand-fg: #fff; }
.dark { --pw-brand: #e06b62; --pw-brand-hover: #ec7e75; --pw-brand-fg: #1a1211; }

.pw-btn.pw-btn-brand {
  background: var(--pw-brand);
  color: var(--pw-brand-fg);
}
.pw-btn.pw-btn-brand:hover:not(:disabled) {
  background: var(--pw-brand-hover);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--pw-brand) 34%, transparent);
}
.pw-btn.pw-btn-brand:focus-visible {
  outline: 2px solid var(--pw-brand-hover);
  outline-offset: 2px;
}