/* ========================================
   Python Tutor Homepage - styles.css
   BEM + CSS Custom Properties
   ======================================== */

/* TODOs written by me (and maybe modified by Claude Code)

- map visualization:
  - backend: run cron job to get latest 24-hour samples from latest day,
    and cron job for checking to restart the server if it does [does
    gunicorn have some 'forever'-style auto-restart thing?]
  - for status display of live mode, maybe format a date/time that's
    moving and set to the user's local browser clock so it looks like
    it's actually DYNAMIC and something is happening?
  - testing: what happens if the user clicks on '24 hour' or 'all-time'
    before those JSON file get loaded?
  - testing: is there a case when live mode activates 'too early' before
    the map widget is ready, and thus fails?
  - 24-hour replay mode: maybe use SSE streaming (with something like a
    line-oriented text format instead of JSON for data file) so that
    users can start seeing dots instantly rather than waiting for it to
    load the entire JSON file

- SEO:
  - make good html title, meta tags, and other content for search engines

- testing: test on a non-apple (e.g., chromebook) to make sure that
  fallback fonts still look good
- tweak hero animation so that it doesn't fade or flash so much
- add upper-left language-specific icons [lower priority, maybe
  unnecessary?] -- maybe don't have it on mobile to save horizontal
  space
- make fonts smaller on desktop or maybe scale down as desktop width
  shrinks
- download all font files to my server if necessary
- note to lauren: "yeah, more generally we can think whether it's
  necessary to expand [the home page] to full width for people with
  super-wide monitors/browsers -- maybe capping it at a max width of
  1300px or something is enough, so that we can guarantee the hero image
  doesn't look ridiculously big, and also that the body text doesn't get
  too wide when stretched"
- tablet: left/right margins seem too big, giving the site a 'puffy' look
  - it also makes the map visualization buttons squish too much against
    south america before popping to the mobile breakpoint

- for visualizer pages: maybe add a second line below header to describe
  what the tool does, since people who land on the various visualizer
  pages won't go to the home page, so they don't have any context. maybe
  a second line saying "Write code and visualize run-time code execution
  state" or something

*/

/* ========================================
   TESTING MODE: Simulate Old Browser Behavior
   ========================================

Uncomment the section below to test how the hero image looks in browsers
that don't support CSS animations (IE 9 and earlier).

Expected behavior when enabled:
- All 4 hero images will be visible and stacked
- Image 4 (top layer) will be the visible one
- No animation/crossfade effect

IMPORTANT: Comment this out again when done testing!
*/
/*
.hero__image-img {
  animation: none !important;
  opacity: 1 !important;
}
*/

/* ========================================
   1. DESIGN TOKENS (CSS Custom Properties)
   ======================================== */
:root {
  /* Colors */
  --color-navy: #2e4566;
  --color-cream: #fffefd;
  --color-beige: #fffdfa;
  --color-tan: #f5f1ec;
  --color-sky: #e2ebf6;
  --color-mist: #f1f4f9;
  --color-teal-light: #f1f7f9;
  --color-teal-medium: #e2f2f6;
  --color-teal-dark: #d1eaf0;
  --color-deep-teal: #bbe0e9;
  --color-navy-60: rgba(46, 69, 102, 0.6);
  --color-body-text: #4d617d;
  --color-mocha: #75706d;
  --color-quote-bg: #f9f5ef;
  --color-hover-brown: #ece7e1;
  --color-chat-grey: #f5f5f5;
  --color-red: #E10C65;  /* Red color for "NEW:" labels and warnings */

  /* Typography */
  --font-heading: 'Radio Canada Big', sans-serif;
  /*
    Body Font: Funnel Sans

    RATIONALE FOR CHANGE (from Lauren, 2025-12-22):
    "Although Geist as the body font still goes well with the title typeface,
    when I view it on the site right now, it feels hard to read for me...
    probably because its 'regular' is too light which makes it hard on the
    eyes or the curvature of the glyphs themselves gets excessive over time...
    maybe the spacing of the lines could be decreased slightly. I'll think
    about this more, but for now, I've tried Funnel Sans here, which I've
    used in a project before."

    FALLBACK STACK RATIONALE:
    All fallbacks are neo-grotesque sans-serifs matching Funnel Sans's clean,
    modern aesthetic. The order ensures optimal rendering on each platform:

    1. 'Funnel Sans'       - Primary font (Google Fonts CDN)
    2. -apple-system       - macOS 10.11+, iOS 9+ (triggers San Francisco)
    3. BlinkMacSystemFont  - Chrome on macOS (triggers San Francisco)
    4. 'Segoe UI'          - Windows Vista+ system font
    5. Roboto              - Android 4.0+, Chrome OS system font
    6. 'Helvetica Neue'    - Older macOS/iOS fallback
    7. Arial               - Universal cross-platform fallback
    8. sans-serif          - Final generic fallback
  */
  --font-body: 'Funnel Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Font Sizes */

  /* Philip enlarged slightly for readability: */
  --text-xs: 16px;
  --text-sm: 18px;
  --text-base: 20px;
  --text-lg: 24px;
  --text-xl: 28px;
  --text-2xl: 30px;

  /* Lauren's originals from Figma:
  --text-xs: 14px;
  --text-sm: 16px;
  --text-base: 18px;
  --text-lg: 24px;
  --text-xl: 28px;
  --text-2xl: 30px;
  */

  /* Font Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.1;
  --leading-normal: 1.4;

  /* Spacing */
  --space-xs: 8px;
  --space-sm: 14px;
  --space-md: 20px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 50px;
  --space-3xl: 60px;
  --space-4xl: 100px;

  /* Borders & Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-pill: 38px;
  --border-width: 1px;

  /* Layout */
  --max-width-content: 1240px;
  --min-width-desktop: 1140px;

  /*
    Nav Bar Spacing
    ===============
    Adjust these to change nav height. The nav contains:
    - Vertical padding (top + bottom)
    - Content height (logo text at 20px font-size, ~24px rendered)
    - Content is vertically centered via flexbox

    IMPORTANT: --nav-height is calculated from these values and used by:
    - Mobile menu positioning (top: var(--nav-height))
    - Mobile menu height (calc(100dvh - var(--nav-height)))

    If you change the padding values, the mobile menu will automatically
    adjust to stay positioned correctly below the nav bar.
  */
  --nav-padding-top: 12px;
  --nav-padding-bottom: 12px;
  --nav-padding-x-desktop: 32px;
  --nav-padding-x-mobile: 24px;
  /* Approximate height of tallest nav content element (logo text at 20px font-size).
     Used to calculate --nav-height for mobile menu positioning. */
  --nav-content-height: 24px;
  --nav-height: calc(var(--nav-padding-top) + var(--nav-padding-bottom) + var(--nav-content-height));

  /* Button padding adjustment */
  --button-padding-reduce: 2px; /* Reduce all button top/bottom padding */

  /* Shadows */
  --shadow-card: 0px 5px 15.7px 0px rgba(245, 241, 236, 0.25);
  --shadow-teal: 0px 5px 15.7px 0px rgba(209, 234, 240, 0.25);

  /* Hover Effects */
  --hover-opacity: 0.85;
}

/* ========================================
   2. CSS RESET & BASE STYLES
   ======================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*
  overscroll-behavior-y: none prevents the "bounce" effect when scrolling
  past the top or bottom of the page. This is a progressive enhancement
  (~96% browser support as of 2024; unsupported browsers just get default
  overscroll behavior which is fine).
*/
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-body-text);
  background-color: var(--color-cream); /* match .page bg for mobile horizontal overflow */
  overscroll-behavior-y: none;
}

/* Utility: mobile-only elements (hidden on tablet and desktop) */
.mobile-only {
  display: none;
}

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

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

button {
  font: inherit;
  cursor: pointer;

  /* PG commented out */
  /*
  border: none;
  background: none;
  */
}

/* PG commented out */
/*
ul, ol {
  list-style-position: inside;
}
*/

/* ========================================
   3. TYPOGRAPHY
   ======================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-navy);
}

p {
  margin-bottom: 0;
}

/* ========================================
   4. LAYOUT COMPONENTS
   ======================================== */
.page {
  min-width: var(--min-width-desktop);
  display: flex;
  flex-direction: column;
  /* Cream background covers the navy body so content area stays light */
  background-color: var(--color-cream);
}

.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xl);
  padding: var(--space-2xl) var(--space-4xl) var(--space-4xl);
}

/* ========================================
   5. NAVIGATION
   ======================================== */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--nav-padding-top) var(--nav-padding-x-desktop) var(--nav-padding-bottom);
  background-color: var(--color-beige);
  min-width: var(--min-width-desktop);
  transition: box-shadow 0.2s ease;
}

.nav--scrolled {
  border-bottom: 1px solid var(--color-tan);
  box-shadow: 0px 4px 12.8px 0px rgba(117, 112, 109, 0.05);
}

/* Border only, no shadow - used on pages with non-sticky header */
.nav--border {
  border-bottom: 1px solid var(--color-tan);
}

.nav__left {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.nav__logo-icon {
  width: 22px;
  height: 31px;
  background-color: var(--color-navy);
  border-radius: 4px;
}

.nav__logo-text {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: var(--weight-bold);
  color: var(--color-navy);
}

.nav__languages {
  display: flex;
  gap: var(--space-sm);
}

.nav__lang-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px; /* controls the pill size */
  background-color: var(--color-tan);
  border: 1px solid var(--color-hover-brown);
  border-radius: 30px;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: var(--weight-semibold);
  color: var(--color-navy);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.nav__lang-link:hover {
  background-color: var(--color-hover-brown);
  border-color: var(--color-hover-brown);
}

.nav__right {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.nav__link {
  padding: 8px 0;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: var(--weight-semibold);
  color: var(--color-navy);
  transition: opacity 0.2s ease;
}

.nav__link:hover {
  opacity: var(--hover-opacity);
}

.nav__link--donate {
  padding: 4px 14px; /* controls the pill size */
  background-color: var(--color-navy);
  border: 1px solid var(--color-navy);
  color: var(--color-cream);
  border-radius: 32px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.nav__link--donate:hover {
  background-color: var(--color-body-text);
  border-color: var(--color-body-text);
}

/* ========================================
   6. HERO SECTION
   ======================================== */
.hero {
  padding: 82px 98px; /* Symmetric: 82px top/bottom, 98px left/right (Figma: 82px 98px 82.195px 97px) */
  overflow: hidden;
  /* Radial gradient from bottom center: teal tint fading to warm white (from Figma dev mode) */
  /* Note: rgba is --color-teal-light at 70% opacity */
  background: radial-gradient(114.56% 83.25% at 50% 100%, rgba(241, 247, 249, 0.70) 33.17%, var(--color-beige) 100%), var(--color-cream);
}

.hero__content {
  display: flex;
  flex-direction: column;
  gap: 56px;
  align-items: center;
}

.hero__image {
  width: 100%;
  max-width: 1160px; /* Fallback for browsers without calc/custom properties */
  max-width: calc(var(--max-width-content) - 2 * var(--space-xl));
  position: relative;
}

/* Hero image animation base styles
   Progressive Enhancement Strategy:
   - Default: opacity: 1 (visible) for browsers without animation support
   - Modern browsers: @supports block sets opacity: 0, allowing animations to run
   Fallback behavior (IE 9 and earlier):
   - No @supports, no animations → all images visible at opacity: 1
   - Images 2-4 are absolutely positioned over image 1
   - Result: Users see image 4 (top layer) as a static image
*/
.hero__image-img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 1; /* Fallback for browsers without animation support */
  animation: heroImageFade 3s linear 1;
  animation-fill-mode: forwards;
  /* Commented out to match hero__bottom width instead of fixed 750px */
  /* max-width: 750px; */
  /* margin: 0 auto; */
}

/* Only hide images initially if animations are supported */
@supports (animation: none) {
  .hero__image-img {
    opacity: 0;
  }
}

/* Stack images 2-4 on top, keep image 1 in flow for height */
.hero__image-img--2,
.hero__image-img--3,
.hero__image-img--4 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

/* Stagger the animation for each image */
.hero__image-img--1 {
  animation-delay: 1s;
  position: relative; /* Keep in flow for container height */
}

.hero__image-img--2 {
  animation-delay: 1.75s;
}

.hero__image-img--3 {
  animation-delay: 2.5s;
}

.hero__image-img--4 {
  animation-delay: 3.25s;
  animation-name: heroImageFadeLast;
}

/* Desktop: 4-frame crossfade animation */
@keyframes heroImageFade {
  0% { opacity: 0; }
  12.5% { opacity: 1; }
  25% { opacity: 1; }
  37.5% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes heroImageFadeLast {
  0% { opacity: 0; }
  12.5% { opacity: 1; }
  100% { opacity: 1; }
}

/* Mobile: 3-frame crossfade animation */
@keyframes heroImageFadeMobile {
  0% { opacity: 0; }
  16.67% { opacity: 1; }
  33.33% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes heroImageFadeMobileLast {
  0% { opacity: 0; }
  16.67% { opacity: 1; }
  100% { opacity: 1; }
}

.hero__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1160px; /* Fallback for browsers without calc/custom properties */
  max-width: calc(var(--max-width-content) - 2 * var(--space-xl));
}

.hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.hero__title {
  font-size: 48px;
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-navy);
  max-width: 851px;
}

.hero__subtitle {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  color: var(--color-navy);
  max-width: 629px;
}

.hero__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
}

.hero__stats {
  border-left: 3px solid var(--color-deep-teal);
  padding-left: 30px;
  padding-bottom: 2px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hero__stat {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}

.hero__stat-number {
  color: var(--color-navy);
}

.hero__stat-label {
  color: var(--color-navy-60);
}

/* ========================================
   7. BUTTONS
   ======================================== */
.button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-pill);
  transition: opacity 0.2s ease;
  cursor: pointer;
}

.button:hover {
  opacity: var(--hover-opacity);
}

.button--sm {
  padding: 8px 16px; /* Fallback for browsers without var() support */
  padding: calc(10px - var(--button-padding-reduce)) 16px;
  font-size: var(--text-sm);
}

.button--lg {
  padding: 10px 24px; /* Fallback for browsers without var() support */
  padding: calc(12px - var(--button-padding-reduce)) 24px;
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  gap: var(--space-sm);
  border-radius: 52px;
}

.button--teal {
  background-color: var(--color-teal-medium);
  color: var(--color-navy);
  border: 1px solid var(--color-deep-teal);
}

.button--teal:hover {
  opacity: 1; /* Override generic button hover opacity */
  background-color: var(--color-teal-dark);
  border-color: var(--color-teal-dark); /* Border matches background on hover */
}

.button--teal:hover .button__arrow {
  transform: translate3d(2px, 0, 0); /* Use translate3d to prevent arrow from vertical jiggling on Safari */
}

.button--teal-dark {
  background-color: var(--color-teal-dark);
  color: var(--color-navy);
  border: 1px solid var(--color-deep-teal);
  border-radius: 39px; /* Figma Button 2 uses 39px, not 38px */
}

.button--teal-dark:hover {
  opacity: 1; /* Override generic button hover opacity */
  background-color: var(--color-deep-teal);
  border-color: var(--color-deep-teal); /* Border matches background on hover */
}

.button--teal-dark:hover .button__arrow {
  transform: translate3d(2px, 0, 0); /* Use translate3d to prevent arrow from vertical jiggling on Safari */
}

.button__arrow {
  width: 15px; /* Whole pixel to avoid sub-pixel rendering issues */
  height: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
  /* Fix vertical jiggle on Safari during hover animation */
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.button__arrow svg {
  width: 100%;
  height: 100%;
}

/* Responsive arrow variants (hero button) */
.button__arrow-sm { display: none; }
.button__arrow-lg { display: block; }

.button__arrow--lg {
  width: 27px;
  height: 21px;
}

/* ========================================
   8. CARDS
   ======================================== */
.card {
  width: 100%;
  max-width: var(--max-width-content);
  border-radius: var(--radius-xl);
}

/* Card: No outline (Python Tutor intro) */
.card--intro {
  /* 30px top padding so gap from hero to "Learn Programming Visually" title
     looks equal to gap between card titles below */
  padding: 30px var(--space-xl) var(--space-xs);
}

.card--intro .card__content {
  display: flex;
  gap: var(--space-3xl);
  align-items: flex-start;
}

.card--intro .card__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
}

.card--intro .card__media {
  flex: 1.1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card__title {
  font-size: var(--text-xl);
  margin-bottom: var(--space-sm);
}

.card__body {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-body-text);
}

.card__body p {
  margin-bottom: 1em;
}

.card__body p:last-child {
  margin-bottom: 0;
}

.card__body a {
  text-decoration: underline;
}

.card__media-placeholder {
  width: 100%;
  /*aspect-ratio: 2316 / 1534;*/ /* originally in Figma but commented out */
  background-color: var(--color-sky);
  border: 1px solid var(--color-sky);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

.card__media-img {
  width: 550px;
  height: auto;
  padding: 15px;
  background-color: white;
  border: 1px solid var(--color-sky);
  border-radius: var(--radius-xl);
  box-shadow: 0px 5px 15.7px 0px rgba(245, 241, 236, 0.25);
}

/* Split media container (two images side-by-side) */
.card__media-split {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  width: 100%;
  background-color: white;
  padding: 15px;
  border: 1px solid var(--color-sky);
  /* border: var(--border-width) solid var(--color-hover-brown); */ /* matches all the other box borders */
  border-radius: var(--radius-xl);
  box-shadow: 0px 5px 15.7px 0px rgba(245, 241, 236, 0.25);
}

.card__media-split-img {
  height: auto;
  max-width: 100%;
  flex: 1;
  min-width: 0;
}

/* Code image smaller than visualization image */
.card__media-split-img:first-child {
  flex: 0.7;
}

/* Narrow desktop: stack split images vertically */
@media (max-width: 1299px) and (min-width: 1140px) {
  .card--intro .card__text {
    flex: 1.35;
  }

  .card--intro .card__media {
    flex: 1;
  }

  .card__media-split {
    flex-direction: column;
  }

  /* Code image 60% width of vis image when stacked */
  .card__media-split-img:first-child {
    flex: none;
    width: 60%;
  }

  .card__media-split-img:last-child {
    flex: none;
    width: 100%;
  }
}

/* Card: AI Chat */
.card--ai {
  padding: var(--space-xs) var(--space-xl);
}

.card--ai .card__content {
  display: flex;
  gap: var(--space-3xl);
  align-items: center;
}

.card--ai .card__chat {
  width: 400px;
  flex-shrink: 0;
}

.card--ai .card__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
}

/* AI Chat - Reversed variant (text on left, chat on right) */
.card--ai-reversed .card__content {
  flex-direction: row-reverse;
}

/* AI Chat UI */
.chat-example {
  background-color: var(--color-beige);
  border: var(--border-width) solid var(--color-hover-brown);
  border-radius: var(--radius-lg);
  padding: 12px;
  box-shadow: var(--shadow-card);
}

.chat-example__messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-message {
  padding: 10px;
  border-radius: var(--radius-sm);
}

.chat-message--user {
  background-color: var(--color-teal-light);
}

.chat-message--ai {
  background-color: var(--color-chat-grey);
}

.chat-message__header {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-navy);
  margin-bottom: 5px;
}

.chat-message__body {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--color-body-text);
}

.chat-message__body code {
  font-family: 'JetBrains Mono', monospace;
  font-size: inherit;
}

.chat-message__body ol {
  margin-top: 1em;
}

.chat-message__body ol > li {
  margin-bottom: 10px;
}

.chat-message__body ol > li:last-child {
  margin-bottom: 0;
}

.chat-message__body--truncated {
  height: 200px;
  overflow: hidden;
  position: relative;
}

.chat-message__body--truncated::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0px -74px 72.7px 0px rgba(245, 245, 245, 0.9);
}

/* Card: Impact Full Width */
.card--impact-full {
  background-color: var(--color-teal-light);
  border: var(--border-width) solid var(--color-teal-dark);
  padding: var(--space-xl) var(--space-2xl);
  box-shadow: var(--shadow-teal);
}

.card--impact-full .card__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.card--impact-full .card__media {
  width: 100%;
  position: relative;
  margin-top: calc(-1 * var(--space-lg)); /* pull map up a bit */
  margin-bottom: var(--space-md); /* add breathing space below map */
}

/*
  Map Container Aspect Ratio
  ==========================
  Reserves space before JavaScript loads to prevent layout shift (CLS).

  IMPORTANT: This ratio MUST match the JavaScript constant:
    var MAP_ASPECT_RATIO = 800.0/440;  (in index.html)

  If you change one, you MUST change the other, or the map will "jump"
  when JS initializes and overrides the height.

  Why this works:
  - CSS aspect-ratio reserves space immediately (no JS needed)
  - JS then calculates the same dimensions and sets them explicitly
  - Since ratios match, there's no visible shift

  Browser support: Chrome 88+, Firefox 89+, Safari 15+
  Fallback: Older browsers ignore aspect-ratio; map area collapses until
  JS runs (acceptable since map requires JS anyway)
*/
/*
  Scroll Margin for Anchor Links
  ==============================
  When navigating to #impact via anchor link, the browser needs to account
  for the sticky header. scroll-margin-top reserves space so the element's
  top border is visible below the nav bar, not hidden behind it.

  Uses --nav-height which is already calculated from nav padding + content.
  Adding a small buffer (8px) for visual breathing room.
*/
#impact {
  scroll-margin-top: calc(var(--nav-height) + 8px);
}

#impact-map {
  width: 100%;
  aspect-ratio: 800 / 440;
}

/* Map Control Buttons
   ====================
   Three pill-shaped buttons overlaid on the impact map to switch visualization modes.
   See index.html comment above ".card--impact-full" for full documentation.

   Structure:
   - .map-controls: Positioned container (absolute within .card__media)
   - .map-btn: Individual button styling
   - .map-btn--active: Applied to currently selected mode via JS

   Design tokens from Figma (2025-12-24):
   - Default: bg #e2f2f6, border #bbe0e9
   - Active: bg #bbe0e9, border #009fad
   - Font: Radio Canada Big, 600 weight, 16px

   Responsive:
   - Desktop: Stacked vertically, bottom-left (bottom: 36px, left: 45px)
   - Tablet: Same layout, adjusted position (bottom: 24px, left: 30px)
   - Mobile: Horizontal row, centered at bottom
*/

.map-controls {
  position: absolute;
  bottom: 66px;
  left: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Don't stretch buttons to equal width */
  gap: 6px;                          /* Fallback for old browsers */
  gap: clamp(4px, 0.6vw, 8px);
  z-index: 10;
}

/* Hide buttons until map widget is fully ready (prevents clicks during load) */
.map-controls--loading {
  visibility: hidden;
}

.map-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;                          /* Fallback for old browsers */
  gap: clamp(4px, 0.6vw, 8px);
  padding: calc(8px - var(--button-padding-reduce)) 13px;                 /* Fallback for old browsers */
  padding: clamp(calc(6px - var(--button-padding-reduce)), 0.8vw, calc(10px - var(--button-padding-reduce))) clamp(10px, 1.2vw, 16px);
  background-color: var(--color-teal-medium);
  border: 1px solid var(--color-deep-teal);
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: 14px;                   /* Fallback for old browsers */
  font-size: clamp(12px, 1.2vw, 16px);
  font-weight: var(--weight-semibold);
  color: var(--color-navy);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.map-btn:not(.map-btn--active):hover {
  background-color: var(--color-teal-dark);
}

/* Active state (darker teal, accent border, no hover) */
.map-btn--active {
  background-color: var(--color-deep-teal);
  border-color: #009fad;
  cursor: default;
}

/* Icon sizing - scales with button */
.map-btn svg {
  width: 10px;                       /* Fallback for old browsers */
  width: clamp(8px, 1vw, 12px);
  height: 10px;                      /* Fallback for old browsers */
  height: clamp(8px, 1vw, 12px);
  flex-shrink: 0;
}

/* Live button pulsating animation
   ================================
   When the Live button is active, its teal circle icon pulses to signal
   real-time streaming. The circle gently scales (breathes) between 110%
   and 90% to create a subtle heartbeat effect.
*/
.map-btn[data-mode="live"] svg {
  overflow: visible; /* Allow scaled circle to extend beyond SVG bounds */
}

.map-btn[data-mode="live"] svg circle {
  transform-origin: center;
  transform-box: fill-box;
}

/* Pulsating animation when Live mode is active */
.map-btn--active[data-mode="live"] svg circle {
  animation: livePulse 2s ease-in-out infinite;
}

/* Gentle breathing animation for the circle */
@keyframes livePulse {
  0%, 100% {
    transform: scale(1.1);
  }
  50% {
    transform: scale(0.9);
  }
}


.card--impact-full .card__media-placeholder {
  aspect-ratio: 916 / 460;
  background-color: var(--color-teal-dark);
  border: none;
  border-radius: var(--radius-md);
}

.card--impact-full .card__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
}

/* Card: Persona cards (Teachers, Students, Programmers) */
.card--teachers,
.card--students,
.card--programmers {
  padding: var(--space-md);
  background-color: #fffcf8;
  border: var(--border-width) solid var(--color-hover-brown);
  box-shadow: var(--shadow-card);
}

.card--teachers .card__content,
.card--students .card__content,
.card--programmers .card__content {
  display: flex;
  gap: 56px;
  align-items: stretch;
}

.card--teachers .card__text,
.card--students .card__text,
.card--programmers .card__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
  padding: var(--space-md) 0 var(--space-md) var(--space-md);
}

.card--teachers .card__quote,
.card--students .card__quote,
.card--programmers .card__quote {
  flex: 1;
  background-color: var(--color-quote-bg);
  border: var(--border-width) solid var(--color-hover-brown);
  border-radius: var(--radius-md);
  padding: var(--space-md) 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  min-height: 100%;
}

.card--teachers .card__title,
.card--students .card__title,
.card--programmers .card__title {
  margin-bottom: var(--space-md);
}

.card__list {
  list-style-type: disc;
  list-style-position: outside;
  padding-left: 1.2em;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-body-text);
}

.card__list li {
  margin-bottom: 0;
}

.card__quote-icon {
  width: 100px;
  height: 79px;
}

.card__quote-text {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-style: italic;
  line-height: var(--leading-normal);
  color: var(--color-mocha);
}

.card__quote-author {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  color: rgba(143, 137, 133, 0.6);
}

/* ========================================
   9. FOOTER
   ======================================== */
.footer {
  background-color: var(--color-navy);
  width: 100%;
  padding: 38px 48px 121px; /* Figma: 38.5px 47px 120.5px 48px - symmetric left/right */
}

.footer__content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Row 1: Title + Donate CTA */
.footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl); /* was var(--text-2xl), trying smaller */
  font-weight: var(--weight-semibold);
  color: var(--color-teal-medium);
  line-height: var(--leading-none);
}

/* Donate pill with border */
.footer__donate {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 7px 7px 7px 20px;
  border: 1px solid rgba(226, 242, 246, 0.5);
  border-radius: 100px;
}

.footer__donate-text {
  font-family: var(--font-body);
  font-size: var(--text-xs); /* was var(--text-base), trying mobile size */
  color: var(--color-teal-medium);
  line-height: var(--leading-normal);
}

.footer__donate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px; /* Fallback for browsers without var() support */
  padding: calc(8px - var(--button-padding-reduce)) 14px;
  background-color: var(--color-teal-dark);
  border: 1px solid var(--color-deep-teal);
  border-radius: 32px;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-navy);
  transition: background-color 0.2s ease;
}

.footer__donate-btn:hover {
  background-color: var(--color-teal-medium);
}

/* Row 2: Link Columns */
.footer__links {
  display: flex;
  gap: 29px;
  color: var(--color-teal-medium);
}

.footer__col {
  min-width: 82px;
}

.footer__col--wide {
  min-width: 185px;
}

.footer__col-title {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: rgba(226, 242, 246, 0.5);
  line-height: var(--leading-none);
  margin-bottom: 8px;
}

.footer__col-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.footer__col-list a {
  font-family: var(--font-body);
  font-size: var(--text-sm); /* was var(--text-base), trying mobile size */
  color: var(--color-teal-medium);
  line-height: var(--leading-normal);
  transition: opacity 0.2s ease;
}

.footer__col-list a:hover {
  opacity: var(--hover-opacity);
}

/* ========================================
   10. UTILITY CLASSES
   ======================================== */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* "NEW:" label style for announcements */
.new-label {
  color: var(--color-red);
  font-weight: bold;
}

/* ========================================
   11. HAMBURGER MENU (hidden on desktop)
   ======================================== */
.nav__hamburger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
}

/* Hamburger bars (for animated X transition) */
.nav__hamburger-bar {
  display: block;
  width: 25px;
  height: 2px;
  background-color: var(--color-navy);
  border-radius: 1px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Hamburger → X animation (mobile only) */
@media (max-width: 749px) {
  body.nav-menu-open .nav__hamburger-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  body.nav-menu-open .nav__hamburger-bar:nth-child(2) {
    opacity: 0;
  }

  body.nav-menu-open .nav__hamburger-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}

/* ========================================
   11b. SLIDE-OUT MENU (tablet/mobile)
   ======================================== */

/* Overlay - semi-transparent backdrop */
.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(46, 69, 102, 0.3);
  z-index: 150;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.nav-overlay--visible {
  display: block;
}

.nav-overlay--active {
  opacity: 1;
}

/* Slide-out menu panel */
.nav-menu {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  width: 277px;
  height: 100vh;
  height: 100dvh;
  background-color: var(--color-beige);
  border-left: 1px solid var(--color-hover-brown);
  box-shadow: -4px 0px 12.8px 0px rgba(117, 112, 109, 0.05);
  z-index: 200;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.nav-menu--visible {
  display: block;
}

.nav-menu--open {
  transform: translateX(0);
}

/* Close button */
.nav-menu__close {
  position: absolute;
  top: 20px;
  right: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-navy);
  transition: opacity 0.2s ease;
}

.nav-menu__close:hover {
  opacity: var(--hover-opacity);
}

.nav-menu__close svg {
  width: 15px;
  height: 15px;
}

/* Menu links container */
.nav-menu__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 71px 40px 50px; /* 40px horizontal to match Figma (30px outer + 10px inner wrapper) */
}

/* Individual menu links */
.nav-menu__link {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-navy);
  line-height: var(--leading-none);
  padding: 2px;
  transition: opacity 0.2s ease;
}

.nav-menu__link:hover {
  opacity: var(--hover-opacity);
}

/* Donate button in menu */
.nav-menu__link--donate {
  margin-top: 10px; /* 30px total gap: 20px from gap + 10px margin */
  padding: 8px 16px; /* Fallback for browsers without var() support */
  padding: calc(10px - var(--button-padding-reduce)) 16px;
  background-color: var(--color-navy);
  color: var(--color-cream);
  border-radius: 32px;
  transition: background-color 0.2s ease;
}

.nav-menu__link--donate:hover {
  opacity: 1;
  background-color: var(--color-body-text);
}

/* Prevent body scroll when menu is open */
body.nav-menu-open {
  overflow: hidden;
}

/* Mobile-only elements (hidden on tablet/desktop) */
.nav-menu__header,
.nav-menu__languages,
.nav-menu__card {
  display: none;
}

/* Tablet close button (shown on tablet, hidden on mobile) */
.nav-menu__close--tablet {
  display: flex;
}

.nav-menu__close--mobile {
  display: none;
}

/* ========================================
   12. TABLET STYLES (750px - 1139px)
   ======================================== */
@media (max-width: 1139px) and (min-width: 750px) {

  /* Layout */
  .page {
    min-width: 750px;
  }

  /* Navigation */
  .nav {
    min-width: 750px;
  }

  .nav__right {
    display: none;
  }

  .nav__hamburger {
    display: flex;
  }

  /* Hero */
  .hero {
    padding: 52px 47px; /* Symmetric: 52px top/bottom, 47px left/right */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Tablet gradient: narrower ellipse, inner stop at 53.71% (from Figma dev mode) */
    /* Note: rgba is --color-teal-light at 70% opacity */
    background: radial-gradient(97.81% 83.25% at 50% 100%, rgba(241, 247, 249, 0.70) 53.71%, var(--color-beige) 100%), var(--color-cream);
  }

  .hero__content {
    gap: 33px;
    width: 100%;
  }

  .hero__image {
    min-width: 600px;
    max-width: 900px;
  }

  .hero__bottom {
    min-width: 600px;
    max-width: 900px;
    gap: 23px;
  }

  .hero__title {
    font-size: 32px;
  }

  .hero__subtitle {
    font-size: 18px;
  }

  .hero__left {
    gap: 10px;
  }

  .hero__stats {
    padding-left: 20px;
    gap: 10px;
  }

  .hero__stat {
    font-size: var(--text-sm);
    line-height: var(--leading-none);
  }

  /* Main content padding */
  .main {
    padding: var(--space-2xl) var(--space-4xl) var(--space-4xl);
  }

  /* Cards - Stack Vertically */

  /* Card: Intro */
  .card--intro {
    /* more top padding so gap from hero to "Learn Programming Visually" title
       looks equal to gap between card titles below */
    padding: 30px 0 var(--space-md);
  }

  .card--intro .card__content {
    flex-direction: column;
    align-items: stretch;
    gap: 48px;
  }

  .card--intro .card__media {
    order: -1; /* Image on top */
    align-self: flex-start; /* Left align on tablet */
  }

  .card__media-split {
    max-width: 550px;
  }

  /* Card: AI Chat */
  .card--ai {
    padding: var(--space-md) 0;
  }

  .card--ai .card__content {
    flex-direction: column;
    gap: 48px;
  }

  .card--ai .card__chat {
    width: 100%;
    max-width: 400px;
    align-self: flex-start; /* Left align on tablet */
  }

  /* Impact full - keep same gap as desktop (var(--space-md) = 20px) */

  /* Map controls - tablet: fluid scaling handles sizing, no overrides needed */

  /* Persona cards - quote on top */
  .card--teachers,
  .card--students,
  .card--programmers {
    padding: var(--space-md) var(--space-md) 30px;
  }

  .card--teachers .card__content,
  .card--students .card__content,
  .card--programmers .card__content {
    flex-direction: column;
    gap: 32px;
  }

  .card--teachers .card__quote,
  .card--students .card__quote,
  .card--programmers .card__quote {
    order: -1; /* Move quote above text */
    padding: 30px;
  }

  .card--teachers .card__text,
  .card--students .card__text,
  .card--programmers .card__text {
    padding: 0 10px;
  }

  .card__quote-icon {
    width: 80px;
    height: 63px;
  }

  /* Footer - Tablet */
  .footer {
    /* comment-out to make padding identical to desktop */
    /*padding: 38px 48px 121px; */ /* Figma: 41px 51px 121px 50px - symmetric left/right */
  }

  .footer__content {
    gap: 30px;
  }
}

/* ========================================
   13. MOBILE STYLES (340px - 749px)
   ======================================== */
@media (max-width: 749px) {

  /* Utility: show mobile-only elements */
  .mobile-only {
    display: inline;
  }

  /* Layout */
  .page {
    min-width: 340px;
  }

  /* Navigation */
  .nav {
    min-width: 340px;
    padding: var(--nav-padding-top) var(--nav-padding-x-mobile) var(--nav-padding-bottom);
  }

  .nav__logo-icon {
    width: 16px;
    height: 23px;
  }

  .nav__logo-text {
    font-size: 20px;
  }

  .nav__languages {
    display: none;
  }

  .nav__right {
    display: none;
  }

  .nav__hamburger {
    display: flex;
  }

  /* Hero */
  .hero {
    padding: 62px 31px; /* Symmetric: 62px top/bottom, 31px left/right */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Mobile gradient: smaller ellipse, below bottom, solid teal (from Figma dev mode) */
    background: radial-gradient(87.27% 74.28% at 50% 105.24%, var(--color-teal-light) 35.58%, var(--color-beige) 100%), var(--color-cream);
  }

  .hero__content {
    gap: 33px;
    width: 100%;
    align-items: flex-start;
  }

  .hero__image {
    min-width: 277px;
    max-width: 687px;
  }

  /* Mobile hero animation: 3 frames instead of 4 */
  .hero__image-img {
    animation: heroImageFadeMobile 3s linear 1;
    animation-fill-mode: forwards;
  }

  .hero__image-img--1 {
    animation-delay: 1s;
  }

  .hero__image-img--2 {
    animation-delay: 2s;
  }

  .hero__image-img--3 {
    animation-name: heroImageFadeMobileLast;
    animation-delay: 3s;
  }

  .hero__image-img--4 {
    display: none;
  }

  .hero__bottom {
    min-width: 277px;
    max-width: 687px;
    flex-direction: column;
    align-items: flex-start;
    gap: 33px;
  }

  .hero__left {
    flex-direction: column;
    gap: 33px;
  }

  .hero__text {
    gap: 10px;
  }

  .hero__title {
    font-size: 32px;
    line-height: var(--leading-none);
  }

  .hero__subtitle {
    font-size: var(--text-sm);
    line-height: var(--leading-tight);
  }

  .hero__stats {
    padding-left: 20px;
    gap: 10px;
  }

  .hero__stat {
    font-size: var(--text-sm);
    line-height: var(--leading-none);
  }

  /* Main content */
  .main {
    gap: 30px;
    padding: 10px 30px var(--space-4xl);
  }

  /* Body text smaller on mobile */
  .card__body {
    font-size: var(--text-sm);
  }

  .card__list {
    font-size: var(--text-sm);
    padding-left: 1.2em;
  }

  /* Smaller buttons on mobile */
  .button--sm {
    font-size: var(--text-xs);
  }

  /* Card: Intro */
  .card--intro {
    /* more top padding so gap from hero to "Learn Programming Visually" title
       looks equal to gap between card titles below */
    padding: 30px var(--space-xs) var(--space-md);
  }

  .card--intro .card__content {
    flex-direction: column;
    align-items: stretch;
    gap: 48px;
  }

  .card--intro .card__media {
    order: -1;
  }

  .card--intro .card__text {
    gap: var(--space-lg);
  }

  .card__media-placeholder {
    border-radius: var(--radius-md);
  }

  /* Card: AI Chat */
  .card--ai {
    padding: var(--space-md) var(--space-xs);
  }

  .card--ai .card__content {
    flex-direction: column;
    gap: 48px;
  }

  .card--ai .card__chat {
    width: 100%;
  }

  .chat-message__body--truncated {
    height: 244px;
  }

  .chat-message__body strong {
    font-weight: normal;
  }

  /* Impact card - mobile specific */
  .card--impact-full {
    padding: 30px;
    border-radius: 30px;
    gap: var(--space-md);
  }

  .card--impact-full .card__content {
    gap: var(--space-md);
  }

  .card--impact-full .card__text {
    gap: var(--space-lg);
  }

  .card--impact-full .card__media-placeholder {
    aspect-ratio: 1695 / 824;
  }

  /* Enable flex reordering so controls appear below map */
  .card--impact-full .card__media {
    display: flex;
    flex-direction: column;
    margin-top: -6px; /* pull map up a bit but less than on desktop */
  }

  /* Map controls - mobile: horizontal row below the map */
  .map-controls {
    position: static;
    order: 1; /* Push after #impact-map (default order: 0) */
    margin-top: 8px;
    flex-direction: row;
    justify-content: flex-start;
    /* gap inherits fluid scaling from base styles */
  }

  .map-btn {
    white-space: nowrap; /* Prevent text wrapping */
    /* font-size and padding inherit fluid scaling from base styles */
  }

  /* Persona cards - mobile */
  .card--teachers,
  .card--students,
  .card--programmers {
    padding: var(--space-md) var(--space-md) 30px;
    border-radius: 30px;
  }

  .card--teachers .card__content,
  .card--students .card__content,
  .card--programmers .card__content {
    flex-direction: column;
    gap: 32px;
  }

  .card--teachers .card__quote,
  .card--students .card__quote,
  .card--programmers .card__quote {
    order: -1;
    padding: var(--space-md);
    border-radius: 16px;
    gap: 15px;
  }

  .card--teachers .card__text,
  .card--students .card__text,
  .card--programmers .card__text {
    padding: 0 10px;
    gap: var(--space-lg);
  }

  .card__quote-text {
    font-size: var(--text-sm);
  }

  .card__quote-author {
    font-size: var(--text-sm);
  }

  .card__quote-icon {
    width: 80px;
    height: 63px;
  }

  /* Title gap adjustment */
  .card__title {
    margin-bottom: 12px;
  }

  /* ========================================
     MOBILE SLIDE-OUT MENU
     ======================================== */

  /* Hide overlay on mobile (full screen menu, no backdrop needed) */
  .nav-overlay {
    display: none !important;
  }

  /* Mobile menu container - fades in below fixed header */
  .nav-menu {
    width: 100%;
    left: 0;
    right: 0;
    top: var(--nav-height); /* Position below fixed header */
    height: calc(100vh - var(--nav-height));
    height: calc(100dvh - var(--nav-height));
    background-color: #fffcf8; /* card-beige */
    border-left: none;
    box-shadow: none;
    /* Fade animation instead of slide */
    transform: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    display: none;
    flex-direction: column;
    /* Scrollable when content overflows */
    overflow-y: auto;
  }

  .nav-menu--visible {
    display: flex;
  }

  .nav-menu--open {
    opacity: 1;
  }

  /* Hide tablet-only elements on mobile */
  .nav-menu__close--tablet,
  .nav-menu__links {
    display: none;
  }

  /* Show mobile-only elements (except header - main nav stays fixed) */
  .nav-menu__languages,
  .nav-menu__card {
    display: flex;
  }

  /* Hide duplicate header - main nav stays fixed */
  .nav-menu__header {
    display: none;
  }

  /* Hide mobile close button - hamburger toggles to X */
  .nav-menu__close--mobile {
    display: none;
  }

  /* Mobile close button (in header) */
  .nav-menu__close--mobile {
    position: static;
    padding: 8px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-navy);
    transition: opacity 0.2s ease;
  }

  .nav-menu__close--mobile:hover {
    opacity: var(--hover-opacity);
  }

  /* Mobile menu content area - flex-end to push content to bottom */
  .nav-menu__languages,
  .nav-menu__card {
    flex-direction: column;
  }

  /* Content wrapper to push to bottom */
  .nav-menu__languages {
    flex: 1;
    justify-content: flex-end;
    align-items: flex-start;
    gap: clamp(14px, 3vh, 20px);
    padding: clamp(30px, 6vh, 50px) 30px clamp(20px, 4vh, 30px);
  }

  /* Language tutor buttons */
  .nav-menu__lang-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px; /* Fallback for browsers without var() support */
    padding: clamp(calc(8px - var(--button-padding-reduce)), 2vh, calc(12px - var(--button-padding-reduce))) clamp(14px, 3vw, 20px);
    background-color: var(--color-tan);
    border: 1px solid var(--color-hover-brown);
    border-radius: 30px;
    font-family: var(--font-heading);
    /*font-size: clamp(18px, 4vw, 24px); -- original Figma size */
    /*font-size: clamp(12px, 4vw, 24px); -- PG: smaller */
    /*font-size: clamp(10px, 3vw, 18px); -- PG: smaller */
    font-size: clamp(20px, 5vw, 24px); /* -- PG: bigger */
    font-weight: var(--weight-semibold);
    color: var(--color-navy);
    transition: background-color 0.2s ease;
  }

  .nav-menu__lang-btn:hover {
    background-color: var(--color-hover-brown);
  }

  /* Teal card */
  .nav-menu__card {
    flex-shrink: 0;
    margin: 0 30px clamp(30px, 6vh, 50px);
    padding: clamp(20px, 5vh, 35px);
    background-color: var(--color-teal-light);
    border: 1px solid var(--color-teal-medium);
    border-radius: 30px;
  }

  /* Links inside teal card */
  .nav-menu__card-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(18px, 4vh, 25px);
  }

  .nav-menu__card-link {
    font-family: var(--font-heading);
    /*font-size: clamp(18px, 4vw, 24px); -- original Figma size */
    /*font-size: clamp(12px, 4vw, 24px); -- PG: smaller */
    /*font-size: clamp(10px, 3vw, 18px); -- PG: smaller */
    font-size: clamp(20px, 5vw, 24px); /* -- PG: bigger, matches .nav-menu__lang-btn */
    font-weight: var(--weight-semibold);
    color: var(--color-navy);
    line-height: var(--leading-none);
    transition: opacity 0.2s ease;
  }

  .nav-menu__card-link:hover {
    opacity: var(--hover-opacity);
  }

  /* Donate button in teal card */
  .nav-menu__card-link--donate {
    margin-top: clamp(6px, 1.5vh, 10px); /* Extra gap before donate */
    padding: 6px 14px; /* Fallback for browsers without var() support */
    padding: clamp(calc(8px - var(--button-padding-reduce)), 2vh, calc(12px - var(--button-padding-reduce))) clamp(14px, 3vw, 20px);
    background-color: var(--color-navy);
    color: var(--color-cream);
    border-radius: 32px;
    transition: background-color 0.2s ease;
  }

  .nav-menu__card-link--donate:hover {
    opacity: 1;
    background-color: var(--color-body-text);
  }

  /* ========================================
     MOBILE FOOTER
     ======================================== */

  .footer {
    padding: 39px 35px 93px; /* Figma: 39px 36px 93px 35px - symmetric left/right */
  }

  .footer__content {
    gap: 30px;
  }

  /* Stack title and donate vertically */
  .footer__top {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  /* Donate pill - stays pill shape on mobile */
  .footer__donate {
    border-radius: 100px;
    padding: 10px 10px 10px 18px;
    gap: 10px;
  }

  .footer__donate-text {
    font-size: var(--text-xs);
    line-height: var(--leading-tight);
    max-width: 150px;
  }

  /* Links - 2x2 grid layout */
  .footer__links {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    gap: 29px;
  }

  /* Reorder columns for grid */
  .footer__col:nth-child(1) { grid-column: 1; grid-row: 1; } /* Languages */
  .footer__col:nth-child(2) { grid-column: 1; grid-row: 2; } /* About */
  .footer__col:nth-child(3) { grid-column: 2; grid-row: 2; } /* Learn */
  .footer__col:nth-child(4) { grid-column: 2; grid-row: 1; } /* Help & Security */

  .footer__col--wide {
    min-width: 172px;
  }

  /* Smaller link font size on mobile */
  .footer__col-list a {
    font-size: var(--text-sm);
  }
}

/* ========================================
   14. MINI HERO SECTION
   ======================================== */

/*
  Mini Hero Section
  =================
  A compact hero section used on tool pages (visualize.html, etc.) with
  Java Tutor, C/C++ Tutor, etc.

  From Figma node 1069:4604 "mini hero":
  - Height: 154px (desktop)
  - Horizontal padding: 76px
  - Content vertically centered
  - Title: Radio Canada Big, Bold, 30px, navy (#2e4566)
  - Subtitle: Funnel Sans, Medium (500), 20px, navy (#2e4566)
  - Gap between title and subtitle: 6.4px
*/

.mini-hero {
  /* Layout from Figma dev mode */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 154px;
  padding: 44px 76px 43px 76px; /* Figma: 43.518px 76px 43.082px 76px - rounded */
  /* Radial gradient from bottom center (from Figma dev mode) */
  background: radial-gradient(97.81% 83.25% at 50% 100%, rgba(246, 249, 250, 0.70) 53.71%, #FFFDFA 100%), var(--color-cream);
}

.mini-hero__content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: var(--max-width-content);
  width: 100%;
}

.mini-hero__title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-navy);
  margin: 0;
}

.mini-hero__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  color: var(--color-navy);
  margin: 0;
}

/* Mini Hero - Tablet (750px - 1139px) */
@media (max-width: 1139px) and (min-width: 750px) {
  .mini-hero {
    min-height: 130px;
    padding: 0 50px;
  }

  .mini-hero__title {
    font-size: 26px;
  }

  .mini-hero__subtitle {
    font-size: var(--text-sm);
  }
}

/* Mini Hero - Mobile (< 750px) */
@media (max-width: 749px) {
  .mini-hero {
    min-height: 110px;
    padding: 20px 30px;
  }

  .mini-hero__content {
    gap: 8px;
  }

  .mini-hero__title {
    font-size: 22px;
  }

  .mini-hero__subtitle {
    font-size: var(--text-xs);
  }
}

/* ========================================
   15. ARTICLE PAGE STYLES
   ======================================== */

/*
  Article Page Layout
  ===================
  The article page uses the same header/footer as the homepage but has
  a dedicated content area for long-form text content. All article styles
  are scoped to article#article to avoid conflicts with homepage styles.

  Typography is based on article-template_2026-01-14.html with:
  - Radio Canada Big for headings
  - Funnel Sans for body text
  - JetBrains Mono for code
*/

/* Article main container - centers content with readable max-width */
.article-main {
  display: flex;
  justify-content: center;
  padding: var(--space-2xl) var(--space-4xl);
  background-color: var(--color-cream);
}

/* Article content area with scoped CSS variables */
article#article {
  /* Layout */
  width: min(100%, 800px);
  margin: 0;

  /* Typography variables (scoped to avoid :root conflicts) */
  --article-title-font: 'Radio Canada Big', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --article-body-font: 'Funnel Sans', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --article-mono-font: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  --article-body-size: 18px;
  --article-body-weight: 400;
  --article-leading-mult: 1.45;

  --article-p-spacing: 18px;

  --article-h1-size: 35px;
  --article-h2-size: 26px;
  --article-h1-weight: 700;
  --article-h2-weight: 600;

  --article-h1-color: #2e4566;
  --article-h2-color: #2e4566;

  --article-section-gap: 40px;
  --article-after-heading: 0px;

  --article-code-gap: 30px;

  --article-text-color: #3b4959;
  --article-accent-color: #363839;

  --article-inlinecode-fill: rgba(227, 231, 233, 0.55);
  --article-inlinecode-text: #3b495a;

  --article-summary-fill: #F1F7F9;
  --article-summary-stroke: #BBE0E9;

  --article-codebox-fill: #F9F5EF;
  --article-codebox-stroke: #ECE7E1;

  --article-box-radius: 10px;
  --article-summary-pad-y: 12px;
  --article-summary-pad-x: 20px;
  --article-code-pad: 20px;

  /* Base typography */
  font-family: var(--article-body-font);
  font-size: var(--article-body-size);
  font-weight: var(--article-body-weight);
  line-height: var(--article-leading-mult);
  color: var(--article-text-color);
}

/* Article paragraphs and blockquotes */
article#article p,
article#article blockquote {
  margin-top: var(--article-p-spacing);
  margin-bottom: var(--article-p-spacing);
}

/* Article lists (tighter spacing) */
article#article ul,
article#article ol {
  margin: 0.5em 0;
  padding-left: 1.2em;
}

article#article li {
  margin: 0;
}

/* Article headings */
article#article h1,
article#article h2,
article#article h3,
article#article h4 {
  font-family: var(--article-title-font);
  font-style: normal;
  margin-top: var(--article-section-gap);
  margin-bottom: var(--article-after-heading);
  line-height: normal;
}

article#article h1 {
  margin-top: 0;
  font-size: var(--article-h1-size);
  font-weight: var(--article-h1-weight);
  color: var(--article-h1-color);
  line-height: 1.0;
  margin-bottom: 12px;
}

article#article h2 {
  font-size: var(--article-h2-size);
  font-weight: var(--article-h2-weight);
  color: var(--article-h2-color);
}

/* Article links */
article#article a {
  color: var(--article-text-color);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-skip-ink: auto;
  border: none;
  outline: none;
  box-shadow: none;
}

article#article a:hover {
  opacity: var(--hover-opacity);
}

/* Article summary box */
article#article .summary-box {
  border-radius: var(--article-box-radius);
  background: var(--article-summary-fill);
  border: 1px solid var(--article-summary-stroke);
  padding: var(--article-summary-pad-y) var(--article-summary-pad-x);
  margin-top: 8px;
  margin-bottom: 12px;
}

article#article .summary-box p {
  margin: 0;
}

article#article .summary-label {
  font-weight: 700;
}

article#article .summary-box + h2 {
  margin-top: 6px;
}

/* Article inline code */
article#article :not(pre) > code {
  font-family: var(--article-mono-font);
  font-size: 0.92em;
  background: var(--article-inlinecode-fill);
  color: var(--article-inlinecode-text);
  padding: 0.1em 0.32em;
  border-radius: 6px;
}

/* Article code blocks */
article#article pre {
  margin: var(--article-code-gap) 0;
}

article#article pre > code {
  display: block;
  font-family: var(--article-mono-font);
  line-height: 1.35;
  background: var(--article-codebox-fill);
  border: 1px solid var(--article-codebox-stroke);
  border-radius: var(--article-box-radius);
  padding: var(--article-code-pad);
  overflow-x: auto;
  white-space: pre;
}

/* ========================================
   14b. ARTICLE PAGE - TABLET STYLES
   ======================================== */
@media (max-width: 1139px) and (min-width: 750px) {
  .article-main {
    padding: var(--space-2xl) var(--space-4xl);
  }
}

/* ========================================
   14c. ARTICLE PAGE - MOBILE STYLES
   ======================================== */
@media (max-width: 749px) {
  .article-main {
    padding: 30px;
  }

  article#article {
    --article-body-size: 16px;
    --article-h1-size: 28px;
    --article-h2-size: 22px;
    --article-p-spacing: 14px;
    --article-section-gap: 30px;
    --article-code-gap: 20px;
  }

  article#article pre > code {
    font-size: 14px;
  }
}