/* ── TESTME GLOBALS.CSS ─────────────────────────────────────────
   Semantic CSS variables for the Material Design color system.
   Light and dark mode values are defined here.
   Tailwind picks these up via var() references in the config.
   ─────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/fonts/manrope-variable.woff2') format('woff2-variations'),
       url('/fonts/manrope-variable.woff2') format('woff2');
}

@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/lexend-variable.woff2') format('woff2-variations'),
       url('/fonts/lexend-variable.woff2') format('woff2');
}

@font-face {
  font-family: 'OpenDyslexic';
  src: url('https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/fonts/OpenDyslexic-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


.material-symbols-outlined {
  display: inline-block;
  width: 1em;
  height: 1em;
  overflow: hidden;
  vertical-align: middle;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  opacity: 0;
  transition: opacity 0.12s ease-in-out;
}

html:not(.fonts-loaded) .material-symbols-outlined {
  color: transparent !important;
}

html.fonts-loaded .material-symbols-outlined {
  opacity: 1 !important;
}

html.fonts-loaded .panda-header .material-symbols-outlined {
  color: var(--color-on-surface-variant) !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
}

html.fonts-loaded .t-nav-streak .material-symbols-outlined {
  color: #f97316 !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
}

html {
  scrollbar-gutter: stable;
}

/* ─── CUSTOM SCROLLBARS ─── */

/* 1. Standard scrollbar properties for Firefox and fallback */
@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--color-on-background) 20%, transparent) transparent;
  }
}

/* 2. WebKit Scrollbar Styling (Chrome, Safari, Edge, Opera) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--color-on-background) 16%, transparent);
  border: 2.5px solid transparent;
  background-clip: padding-box;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--color-on-background) 30%, transparent);
  border: 2.5px solid transparent;
  background-clip: padding-box;
}

/* 3. Utility to completely hide scrollbars */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* ─── LIGHT MODE (default) ─── */
:root,
html.light {
  color-scheme: light;
  --color-background:               #f5f7fb; /* Warm light grey-blue background for card depth */
  --color-surface:                  #ffffff; /* Pure white cards */
  --color-surface-bright:           #ffffff;
  --color-surface-dim:              #eff2f6;
  --color-surface-variant:          #e4e8f0;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low:    #ffffff;
  --color-surface-container:        #e4e8f0;
  --color-surface-container-high:   #dadfe8;
  --color-surface-container-highest:#cbd5e1;
  --color-inverse-surface:          #0a0f1d;
  --color-inverse-on-surface:       #ffffff;

  /* Deep dark primary text/button */
  --color-primary:                  #1e293b;
  --color-on-primary:               #ffffff;
  --color-primary-container:        #cbd5e1;
  --color-on-primary-container:     #1e293b;
  --color-primary-fixed:            #1e293b;
  --color-primary-fixed-dim:        #334155;
  --color-on-primary-fixed:         #ffffff;
  --color-on-primary-fixed-variant: #475569;
  --color-inverse-primary:          #ffffff;
  --color-surface-tint:             #1e293b;

  --color-secondary:                #475569;
  --color-on-secondary:             #ffffff;
  --color-secondary-container:      #e2e8f0;
  --color-on-secondary-container:   #0f172a;
  --color-secondary-fixed:          #cbd5e1;

  --color-tertiary:                 #475569; /* Sleek Slate Accent */
  --color-on-tertiary:              #ffffff;
  --color-tertiary-container:       #f1f5f9;
  --color-on-tertiary-container:    #1e293b;
  --color-tertiary-fixed:           #e2e8f0;
  --color-tertiary-fixed-dim:       #cbd5e1;
  --color-on-tertiary-fixed:        #1e293b;
  --color-on-tertiary-fixed-variant:#475569;

  --color-on-background:            #1e293b; /* Deep slate-blue instead of harsh black */
  --color-on-surface:               #1e293b;
  --color-on-surface-variant:       #64748b;

  --color-outline:                  #cbd5e1; /* Faint but clearly defined border */
  --color-outline-variant:          #94a3b8;

  --color-error:                    #ef4444;
  --color-on-error:                 #ffffff;
  --color-error-container:          #fee2e2;
  --color-on-error-container:       #991b1b;

  /* Nav / Header specific */
  --color-header-bg:                rgba(245, 247, 251, 0.85);
  --color-header-border:            rgba(30, 41, 59, 0.08);
  --color-nav-hover:                rgba(30, 41, 59, 0.04);

  /* Footer */
  --color-footer-bg:                #e9ecf2;
  --color-footer-border:            #dadfe8;
  --color-footer-text:              #64748b;
  --color-footer-link-hover:        #1e293b;

  /* Rich background patterns and glows */
  --color-bg-glow-1:                rgba(148, 163, 184, 0.08); /* Soft Slate glow */
  --color-bg-glow-2:                rgba(203, 213, 225, 0.06);  /* Soft Light Slate glow */
  --color-hero-glow:                rgba(148, 163, 184, 0.12); /* Ambient hero glow */
  --color-grid:                     rgba(148, 163, 184, 0.08); /* Dotted grid color */
  --color-input-focus:              #475569;
}

/* ─── DARK MODE ─── */
html.dark {
  color-scheme: dark;
  --color-background:               #121212; /* Comfortable matte black background */
  --color-surface:                  #1c1c1e; /* Comfortable charcoal-slate card surface */
  --color-surface-bright:           #2c2c2e;
  --color-surface-dim:              #171719;
  --color-surface-variant:          #252528;
  --color-surface-container-lowest: #0d0d0d;
  --color-surface-container-low:    #121212;
  --color-surface-container:        #1c1c1e;
  --color-surface-container-high:   #252528;
  --color-surface-container-highest:#303033;
  --color-inverse-surface:          #ffffff;
  --color-inverse-on-surface:       #121212;

  /* Clean light text for dark mode */
  --color-primary:                  #f1f5f9;
  --color-on-primary:               #121212;
  --color-primary-container:        #252528;
  --color-on-primary-container:     #f1f5f9;
  --color-primary-fixed:            #ffffff;
  --color-primary-fixed-dim:        #e2e8f0;
  --color-on-primary-fixed:         #121212;
  --color-on-primary-fixed-variant: #cbd5e1;
  --color-inverse-primary:          #121212;
  --color-surface-tint:             #ffffff;

  --color-secondary:                #94a3b8;
  --color-on-secondary:             #121212;
  --color-secondary-container:      #252528;
  --color-on-secondary-container:   #f1f5f9;
  --color-secondary-fixed:          #252528;

  --color-tertiary:                 #cbd5e1; /* Sleek Silver Accent for dark mode */
  --color-on-tertiary:              #121212;
  --color-tertiary-container:       #1e293b;
  --color-on-tertiary-container:    #f1f5f9;
  --color-tertiary-fixed:           #334155;
  --color-tertiary-fixed-dim:       #334155;
  --color-on-tertiary-fixed:        #f1f5f9;
  --color-on-tertiary-fixed-variant:#cbd5e1;

  --color-on-background:            #f1f5f9;
  --color-on-surface:               #f1f5f9;
  --color-on-surface-variant:       #a1a1aa;

  --color-outline:                  #2c2c2e; /* Slate charcoal borders */
  --color-outline-variant:          #3a3a3c;

  --color-error:                    #f87171;
  --color-on-error:                 #ffffff;
  --color-error-container:          #450a0a;
  --color-on-error-container:       #fca5a5;

  /* Nav / Header specific */
  --color-header-bg:                rgba(18, 18, 18, 0.85);
  --color-header-border:            rgba(255, 255, 255, 0.05);
  --color-nav-hover:                rgba(255, 255, 255, 0.06);

  /* Footer */
  --color-footer-bg:                #0d0d0d;
  --color-footer-border:            #1c1c1e;
  --color-footer-text:              #71717a;
  --color-footer-link-hover:        #ffffff;

  /* Rich background patterns and glows for dark mode */
  --color-bg-glow-1:                rgba(255, 255, 255, 0.03); /* Very subtle white accent glow */
  --color-bg-glow-2:                rgba(255, 255, 255, 0.01); /* Very subtle white secondary glow */
  --color-hero-glow:                rgba(255, 255, 255, 0.07); /* Ambient hero glow */
  --color-grid:                     rgba(255, 255, 255, 0.02); /* Faint white dots for dark grid */
  --color-input-focus:              #94a3b8;
}

/* ─── GLOBAL RESETS & HELPERS ─── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--color-background);
  background-image: 
    radial-gradient(circle at 80% 15%, var(--color-bg-glow-1) 0%, transparent 60%),
    radial-gradient(circle at 15% 65%, var(--color-bg-glow-2) 0%, transparent 60%),
    radial-gradient(var(--color-grid) 1.5px, transparent 1.5px);
  background-size: 100% 100%, 100% 100%, 24px 24px;
  color: var(--color-on-background);
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* Header / Nav */
.panda-header {
  background: var(--color-header-bg);
  border-bottom-color: var(--color-header-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}




.panda-nav-link {
  color: var(--color-on-surface-variant);
  transition: color 0.15s, border-color 0.15s;
  padding-bottom: 0.25rem;
  border-bottom: 2px solid transparent;
  font-weight: 600;
  text-decoration: none;
}
.panda-nav-link:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-outline-variant);
}
.panda-nav-link.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary) !important;
}

.nav-text-link {
  color: var(--color-on-background);
  text-decoration: none;
  font-family: 'Manrope', sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  opacity: 0.65;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-block;
}
.nav-text-link:hover {
  opacity: 1;
  transform: translateY(-0.5px);
}
.nav-text-link.active {
  opacity: 1 !important;
  color: var(--color-primary);
  font-weight: 800;
  pointer-events: none;
}

.logo-link {
  transition: opacity 0.2s ease;
}
.logo-link:hover {
  opacity: 0.95;
}
.logo-link:hover img {
  transform: scale(1.06);
}


.panda-icon-btn {
  color: var(--color-on-surface-variant);
  background: transparent;
  border-radius: 0.5rem;
  transition: background 0.15s, color 0.15s;
}
.panda-icon-btn:hover {
  background: var(--color-nav-hover);
  color: var(--color-on-surface);
}

/* Footer */
.panda-footer {
  background: var(--color-footer-bg);
  border-top-color: var(--color-footer-border);
}
.panda-footer-text { color: var(--color-footer-text); }
.panda-footer-link {
  color: var(--color-footer-text);
  transition: color 0.15s;
}
.panda-footer-link:hover {
  color: var(--color-footer-link-hover);
}

/* ─── MATERIAL ICON FONT SETTINGS ─── */
.material-symbols-outlined,
.material-symbols-rounded,
.material-symbols-sharp,
.material-icons {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

/* ─── ACCESSIBILITY Overrides ─── */
html.high-contrast {
  /* Light High Contrast */
  --color-background:               #ffffff !important;
  --color-surface:                  #ffffff !important;
  --color-surface-dim:              #f8fafc !important;
  --color-surface-variant:          #e2e8f0 !important;
  --color-on-background:            #000000 !important;
  --color-on-surface:               #000000 !important;
  --color-on-surface-variant:       #334155 !important; /* Soft dark slate text */
  --color-outline:                  #000000 !important;
  --color-outline-variant:          #000000 !important;
  --color-primary:                  #000000 !important;
  --color-on-primary:               #ffffff !important;
  --color-secondary:                #000000 !important;
  --color-tertiary:                 #000000 !important;
  --color-header-bg:                #ffffff !important;
  --color-footer-bg:                #f8fafc !important;

  /* Disable distracting glows and grid backgrounds */
  --color-bg-glow-1:                transparent !important;
  --color-bg-glow-2:                transparent !important;
  --color-hero-glow:                transparent !important;
  --color-grid:                     transparent !important;
}

html.high-contrast.dark {
  /* Dark High Contrast */
  --color-background:               #000000 !important;
  --color-surface:                  #000000 !important;
  --color-surface-dim:              #1c1c1e !important;
  --color-surface-variant:          #3a3a3c !important;
  --color-on-background:            #ffffff !important;
  --color-on-surface:               #ffffff !important;
  --color-on-surface-variant:       #cbd5e1 !important; /* Soft light slate text */
  --color-outline:                  #ffffff !important;
  --color-outline-variant:          #ffffff !important;
  --color-primary:                  #ffffff !important;
  --color-on-primary:               #000000 !important;
  --color-secondary:                #ffffff !important;
  --color-tertiary:                 #ffffff !important;
  --color-header-bg:                #000000 !important;
  --color-footer-bg:                #1c1c1e !important;

  /* Disable distracting glows and grid backgrounds */
  --color-bg-glow-1:                transparent !important;
  --color-bg-glow-2:                transparent !important;
  --color-hero-glow:                transparent !important;
  --color-grid:                     transparent !important;
}

html.high-contrast body {
  background-color: var(--color-background) !important;
  background-image: none !important; /* Remove background glows/grids completely */
  color: var(--color-on-background) !important;
}

html.high-contrast a { 
  text-decoration: underline !important;
  font-weight: 700 !important;
}

html.high-contrast button, 
html.high-contrast [role="button"],
html.high-contrast a.inline-flex,
html.high-contrast .cta-card,
html.high-contrast .value-item,
html.high-contrast .content-card,
html.high-contrast .category-section,
html.high-contrast .test-card {
  border: 2px solid var(--color-outline) !important;
}

/* Hide line grid background in High Contrast */
html.high-contrast .hero-grid-lines {
  display: none !important;
}
html.reduced-motion * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
}
html.dyslexic-font *:not(.material-symbols-outlined):not(.material-symbols-rounded):not(.material-symbols-sharp):not(.material-icons) {
    font-family: "OpenDyslexic", "Comic Sans MS", sans-serif !important;
}
html.dyslexic-font .material-symbols-outlined,
html.dyslexic-font .material-symbols-rounded,
html.dyslexic-font .material-symbols-sharp,
html.dyslexic-font .material-icons {
    font-family: 'Material Symbols Outlined', 'Material Icons' !important;
}
html.large-text {
    font-size: 115%;
}

/* Base Styles */
body {
  font-family: 'Lexend', system-ui, -apple-system, sans-serif;
  background-color: var(--color-background);
  color: var(--color-on-background);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
}

/* Fallback overrides for Tailwind arbitrary font-family classes */
.font-\[Manrope\] {
  font-family: 'Manrope', system-ui, -apple-system, sans-serif !important;
}

.font-\[Lexend\] {
  font-family: 'Lexend', system-ui, -apple-system, sans-serif !important;
}

.shell {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

/* ─── FOCUS RING ─── */
:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Custom focus state for text inputs to avoid thick/double outline and mismatched corner radii */
input[type="text"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus,
input[type="text"]:focus-visible,
input[type="search"]:focus-visible,
input[type="number"]:focus-visible,
input[type="email"]:focus-visible,
input[type="password"]:focus-visible,
input[type="tel"]:focus-visible,
input[type="url"]:focus-visible,
textarea:focus-visible {
  outline: none !important;
  border-color: var(--color-input-focus) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-input-focus) 15%, transparent) !important;
}

/* ─── RESPECT SYSTEM REDUCED MOTION ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Dark Mode logo contrast fix */
html.dark .panda-header img {
  filter: invert(1) brightness(1.8);
}

/* ─── PAGE HERO & BADGES ─── */
.page-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  margin-bottom: 2rem;
}

.page-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  background-color: var(--color-surface-dim);
  border: 1px solid var(--color-outline);
  color: var(--color-on-surface-variant);
  font-family: 'Lexend', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 9999px;
  margin-bottom: 1rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.page-title {
  font-family: 'Manrope', sans-serif;
  font-size: 2.25rem;
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--color-on-background);
  margin-bottom: 0.5rem;
}
@media (min-width: 640px) {
  .page-title {
    font-size: 3rem;
  }
}

.page-sub {
  font-family: 'Lexend', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-on-surface-variant);
  max-width: 620px;
  margin-top: 0.5rem;
}

.page-updated {
  font-family: 'Lexend', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-on-surface-variant);
  opacity: 0.7;
  margin-bottom: 1.5rem;
}

/* ── STREAK BADGE ── */
.t-nav-streak {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: color-mix(in srgb, var(--color-on-surface) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-on-surface) 8%, transparent);
  border-radius: 6px;
  cursor: default;
  transition: all 0.2s;
}
.t-nav-streak:hover {
  background: color-mix(in srgb, var(--color-on-surface) 8%, transparent);
  transform: scale(1.02);
}