/* ==================================================
   PRODUCT SCHOLAR — MAIN STYLESHEET
   css/main.css

   Loaded by every page on the site.
   Contains brand tokens, base reset, logo mark styles,
   and the bottom pill navigation.

   TABLE OF CONTENTS
   -----------------
   1.  Google Fonts Import
   2.  CSS Custom Properties (Brand Tokens)
   3.  Base Reset & Body Defaults
   4.  Page Transition (fade in / fade out)
   5.  Logo Mark — Bottom Left Corner
   6.  Nav — Outer Container & Pill Shell
   7.  Nav — Section Labels & Indicator Dot
   8.  Nav — Dividers Between Sections
   9.  Nav — Sub-Section Pills
   10. Nav — Home Page Hidden/Reveal State
   11. Nav — Active / Current Page State
   ================================================== */


/* ==================================================
   1. GOOGLE FONTS IMPORT
   @import must be the first rule in the file.
   Loads Open Sans (primary), Montserrat (rare: large
   background text), and Roboto Slab (rare: citations).
   ================================================== */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,400&family=Montserrat:wght@700;900&family=Roboto+Slab:wght@400&display=swap');


/* ==================================================
   2. CSS CUSTOM PROPERTIES (BRAND TOKENS)

   !! RULE: Never hardcode a hex color anywhere else
   !! in the CSS. Change a color here; it updates
   !! everywhere automatically.
   ================================================== */
:root {

  /* --- Core Colors ---
     Used for elements of roughly equivalent importance.
     PSBlue gets slightly more presence than the others. */
  --ps-blue:    #322cdd;
  --ps-purple:  #6661e5;
  --ps-green:   #218380;
  --ps-red:     #993955;
  --ps-orange:  #de9151;

  /* --- Neutrals --- */
  --ps-off-white: #eeedfc;  /* Default page background */
  --ps-off-black: #343434;  /* Default text color */

  /* --- Blue Tints (progressively lighter) --- */
  --ps-blue-tint-1: #6661e5;
  --ps-blue-tint-2: #7773e8;
  --ps-blue-tint-3: #8884eb;
  --ps-blue-tint-4: #aaa7f1;
  --ps-blue-tint-5: #cccaf7;
  --ps-blue-tint-6: #dddcf9;

  /* --- Blue Shades (progressively darker) --- */
  --ps-blue-shade-1: #211daf;
  --ps-blue-shade-2: #1b178c;

  /* --- Typography ---
     Montserrat and Roboto Slab are loaded but used rarely.
     See brand guide for permitted use cases. */
  --font-primary:  'Open Sans', sans-serif;
  --font-display:  'Montserrat', sans-serif;    /* Extra-large low-contrast bg text only */
  --font-citation: 'Roboto Slab', serif;         /* External source citations only */

  /* --- Type Scale --- */
  --text-xs:   0.75rem;    /*  12px */
  --text-sm:   0.8125rem;  /*  13px */
  --text-base: 1rem;       /*  16px */
  --text-lg:   1.125rem;   /*  18px */
  --text-xl:   1.25rem;    /*  20px */
  --text-2xl:  1.5rem;     /*  24px */
  --text-3xl:  2rem;       /*  32px */
  --text-4xl:  2.5rem;     /*  40px */

  /* --- Spacing Scale --- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* --- Ergo-Tactile Shape Radii (per brand guide: 8–12px) --- */
  --radius-sm:   8px;
  --radius-md:   10px;
  --radius-lg:   12px;
  --radius-pill: 999px;  /* Fully-rounded capsule shape */

  /* --- Transitions ---
     High-level nav uses faster/more-pronounced transitions.
     Low-level (sub-nav) uses slower/subtler transitions.
     Per Ergo-Tactile interactivity rules. */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* --- Ergo-Tactile Shadows ---
     Depth through elevation, not hard edges. */
  --shadow-subtle: 0 2px 8px  rgba(50, 44, 221, 0.08);
  --shadow-medium: 0 4px 16px rgba(50, 44, 221, 0.14);
  --shadow-raised: 0 8px 28px rgba(50, 44, 221, 0.18);

  /* --- Nav-Specific Tokens ---
     Keeping all nav values in one place makes resizing
     or recoloring the nav a one-stop edit. */
  --nav-bg:              rgba(52, 52, 52, 0.88);  /* PSOffBlack at 88% opacity */
  --nav-blur:            6px;
  --nav-height:          44px;
  --nav-padding-h:       8px;
  --nav-bottom-offset:   24px;
  --nav-text-rest:       var(--ps-blue-tint-5);    /* Dimmed label at rest */
  --nav-text-hover:      var(--ps-off-white);       /* Bright label on hover/active */
  --nav-dot-color:       var(--ps-blue);            /* Indicator dot under hovered label */
  --nav-dot-size:        4px;

  /* How long the cursor must dwell in the bottom 40px
     before the nav appears on the home page. */
  --nav-reveal-delay: 400ms;
}


/* ==================================================
   3. BASE RESET & BODY DEFAULTS
   ================================================== */

/* Universal box-sizing: padding and borders are
   included in element width/height (never add to it). */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  /* Smoother text rendering on most screens */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  color: var(--ps-off-black);
  background-color: var(--ps-off-white);
  line-height: 1.6;
  min-height: 100vh;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

ul, ol {
  list-style: none;
}


/* ==================================================
   4. PAGE TRANSITION (FADE IN / FADE OUT)

   FADE IN: Runs automatically on every page load via
   a CSS @keyframes animation on <body>. No JS needed
   for the fade-in.

   FADE OUT: main.js adds the class 'page-exit' to
   <body> when an internal link is clicked. This triggers
   the fade-out animation, then JS navigates to the
   new URL after the animation completes (~300ms).

   Because pages start at opacity 0 via the animation,
   this also masks any brief flash while includes.js
   adds the 'is-home-page' class to <body>.
   ================================================== */

@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes pageFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Every page fades in on load */
body {
  animation: pageFadeIn var(--transition-slow) ease forwards;
}

/* Applied by main.js when navigating away */
body.page-exit {
  animation: pageFadeOut var(--transition-slow) ease forwards;
  pointer-events: none;  /* Block clicks during the fade-out */
}


/* ==================================================
   5. LOGO MARK — BOTTOM LEFT CORNER

   The PS mark sits fixed in the bottom-left corner
   on every page.

   REST STATE: Low opacity, slightly desaturated.
   Reads as a PSBlueTint5-level presence against the
   PSOffWhite background — visible but undemanding.

   HOVER STATE: Full color, slight scale-up.

   HOME PAGE: pointer-events are disabled so the logo
   is decorative only (no link / no cursor change).
   Applied via the 'is-home-page' class on <body>,
   which includes.js adds when on index.html.

   INTERIOR PAGES: Clicking navigates to index.html.

   !! IMAGE NOTE: ps-mark.png must have a TRANSPARENT
   !! background. The brand guide export has a black
   !! background — see ASSUMPTIONS at the bottom of
   !! the chat for the required fix before deploying.
   ================================================== */

#ps-logo {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 90;  /* Just below the nav pill (z-index: 100) */
}

.ps-logo__link {
  display: block;
  border-radius: var(--radius-md);
  /* Visible focus ring for keyboard users */
  outline-offset: 4px;
}

.ps-logo__link:focus-visible {
  outline: 2px solid var(--ps-blue-tint-4);
}

.ps-logo__img {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);

  /* Rest state: muted, recedes into the background */
  opacity: 0.38;
  filter: saturate(0.5) brightness(1.15);

  transition:
    opacity   var(--transition-base),
    filter    var(--transition-base),
    transform var(--transition-base);
}

/* Hover: full color, slight lift */
.ps-logo__link:hover .ps-logo__img,
.ps-logo__link:focus-visible .ps-logo__img {
  opacity: 1;
  filter: none;
  transform: scale(1.06);
}

/* Home page: logo is decorative, no interactivity */
body.is-home-page .ps-logo__link {
  pointer-events: none;
  cursor: default;
}

/* On the home page, nudge opacity slightly higher —
   the logo is the only branded element visible. */
body.is-home-page .ps-logo__img {
  opacity: 0.45;
}


/* ==================================================
   6. NAV — OUTER CONTAINER & PILL SHELL

   #ps-nav is the fixed-position anchor. It always
   sits at the bottom-center of the viewport.

   .nav-pill is the visible dark capsule shape.
   It uses a frosted-glass effect (backdrop-filter)
   and a soft inner-glow for Ergo-Tactile depth.
   ================================================== */

#ps-nav {
  position: fixed;
  bottom: var(--nav-bottom-offset);
  left: 50%;
  /* translateX(-50%) centers the pill horizontally */
  transform: translateX(-50%);
  z-index: 100;
  /* Transition is needed for the home page reveal animation.
     Interior pages override opacity/transform below. */
  transition:
    opacity   var(--transition-base),
    transform var(--transition-base);
}

.nav-pill {
  display: flex;
  align-items: center;
  height: var(--nav-height);
  padding: 0 var(--nav-padding-h);
  background: var(--nav-bg);

  /* Frosted glass blur — works in modern browsers.
     Falls back gracefully to the opaque background color. */
  backdrop-filter: blur(var(--nav-blur));
  -webkit-backdrop-filter: blur(var(--nav-blur));

  border-radius: var(--radius-pill);

  /* Ergo-Tactile: drop shadow for elevation +
     inset highlight suggests a pressable surface */
  box-shadow:
    0 2px 14px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}


/* ==================================================
   7. NAV — SECTION LABELS

   Each section is a .nav-section flex item.
   The .nav-label is the clickable/hoverable text.
   On hover: label brightens (color transition only).
   No dot indicator — text brightness is sufficient feedback.

   Per Ergo-Tactile rules: HIGH-LEVEL nav transitions
   are more pronounced than low-level nav.
   ================================================== */

.nav-section {
  position: relative;  /* Anchors the absolutely-positioned .subnav */
  display: flex;
  align-items: center;
  height: 100%;
}

/* The visible label text (or link for Home) */
.nav-label {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.025em;
  color: var(--nav-text-rest);
  white-space: nowrap;
  cursor: pointer;
  border-radius: var(--radius-pill);

  /* High-level nav: more pronounced transition (base, not fast) */
  transition: color var(--transition-base);
}

/* Hover and current-page: label brightens */
.nav-section:hover .nav-label,
.nav-section.nav-current .nav-label {
  color: var(--nav-text-hover);
}


/* ==================================================
   8. NAV — DIVIDERS BETWEEN SECTIONS

   Thin vertical lines separating the four sections.
   Low-opacity PSBlueTint5 against the dark pill.
   ================================================== */

.nav-divider {
  width: 1px;
  height: 16px;
  background-color: rgba(204, 202, 247, 0.18);  /* PSBlueTint5 at ~18% opacity */
  flex-shrink: 0;
}


/* ==================================================
   9. NAV — SUB-SECTION PILLS

   Sub-pills appear above their parent section on hover.
   They are staggered: the pill closest to the nav bar
   appears first; higher pills follow.

   STAGGER LOGIC:
   - .subnav uses flex-direction: column (top to bottom)
   - The last-child is visually lowest (nearest the bar)
   - Delay 0ms on last-child, increasing up the stack

   HOVER GAP BRIDGE:
   - padding-bottom + negative margin-bottom on .subnav
     extends its hit area downward to overlap the nav
     pill, so moving the mouse upward doesn't briefly
     exit the hover zone.

   HIDE DELAY:
   - Delay on show is set via nth-child on the active state
   - Delay on hide is 0ms (base state), so hiding is instant
   ================================================== */

.subnav {
  position: absolute;
  /* Position the bottom of the subnav flush with the top of the nav pill */
  bottom: 100%;
  /* Center the subnav above its parent section */
  left: 50%;
  transform: translateX(-50%);

  display: flex;
  flex-direction: column;  /* First child = top, last child = bottom (nearest bar) */
  align-items: center;
  gap: var(--space-2);

  /* Hidden: no pointer events until active */
  pointer-events: none;

  /* Gap bridge: extends hit area downward so mouse can travel
     from the nav bar up to the pills without a "dead zone". */
  padding-bottom: 10px;
  margin-bottom: -10px;
}

/* Individual sub-section pill */
.subnav-pill {
  display: block;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  font-family: var(--font-primary);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.035em;
  color: var(--ps-off-white);
  white-space: nowrap;
  text-align: center;
  min-width: 108px;

  /* Start state: shifted down and invisible */
  opacity: 0;
  transform: translateY(8px);

  /* Low-level nav: more subtle (slower spring easing).
     transition-delay is 0ms here = instant hide.
     Show delays are set per nth-child on the active state only. */
  transition:
    opacity          220ms cubic-bezier(0.34, 1.56, 0.64, 1) 0ms,
    transform        220ms cubic-bezier(0.34, 1.56, 0.64, 1) 0ms,
    background-color var(--transition-fast)                   0ms,
    box-shadow       var(--transition-fast)                   0ms,
    filter           150ms ease                               0ms;

  /* Ergo-Tactile: soft inner glow + drop shadow */
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* Enabled state: pointer events, pills are visible and translated to position */
.nav-section.subnav-active .subnav {
  pointer-events: all;
}

.nav-section.subnav-active .subnav-pill {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays — applied only on the active (show) state.
   Counts from the bottom (last-child is closest to nav bar, delay 0ms).
   The base rule has transition-delay: 0ms, so hide is always instant. */
.nav-section.subnav-active .subnav-pill:nth-child(3) { transition-delay: 0ms;  }  /* Bottom: first to appear */
.nav-section.subnav-active .subnav-pill:nth-child(2) { transition-delay: 55ms; }  /* Middle */
.nav-section.subnav-active .subnav-pill:nth-child(1) { transition-delay: 110ms;}  /* Top: last to appear */

/* --- Sub-pill colors by section ---
   Base background colors are set via inline styles in nav.html,
   using CSS custom properties (var(--ps-green) for Training, etc.).
   The training section uses the main.css rule below as a fallback. */

.nav-section[data-section="training"] .subnav-pill {
  background-color: var(--ps-green);
}

/* --- Sub-pill hover treatment — all sections ---
   A single consistent brightness boost applies to every sub-pill
   on hover, regardless of which section it belongs to.
   Previously each section had its own color-specific hover rule —
   replaced here with one rule for maintainability.
   filter: brightness(1.15) lightens the pill's existing color
   without needing to know what that color is. */
.subnav-pill:hover {
  filter: brightness(1.15);
}

/* External link arrow — appended to pills with data-external="true".
   Set on the Courses link in nav.html. */
.subnav-pill[data-external="true"]::after {
  content: ' ↗';
  font-size: 0.7em;
  opacity: 0.7;
  vertical-align: 1px;
}


/* ==================================================
   10. NAV — HOME PAGE HIDDEN / REVEAL STATE

   On the home page (body.is-home-page), the nav starts
   hidden and out of view.

   It is revealed by nav.js which adds 'nav-visible'
   to #ps-nav when:
   (a) Cursor dwells in the bottom 40px for 400ms.
   (b) Tab key is pressed (keyboard accessibility).

   It returns to hidden when the mouse leaves the nav.

   On interior pages (body:not(.is-home-page)), the nav
   is always visible and fully interactive.
   ================================================== */

/* Home page: hidden by default, positioned below view */
body.is-home-page #ps-nav {
  opacity: 0;
  transform: translateX(-50%) translateY(14px);
  pointer-events: none;
}

/* Revealed via nav.js */
body.is-home-page #ps-nav.nav-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: all;
}

/* Interior pages: always visible, no animation needed */
body:not(.is-home-page) #ps-nav {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: all;
}


/* ==================================================
   11. NAV — ACTIVE / CURRENT PAGE STATE

   nav.js detects the current URL and adds 'nav-current'
   to the matching .nav-section. This keeps the label
   fully lit at rest rather than dimmed.
   ================================================== */

.nav-section.nav-current .nav-label {
  color: var(--nav-text-hover);
}