/* National Laureate — custom design system (mirrors src/styles.css) */

:root {
  --radius: 0.625rem;

  --laureate-deep: #0f4a2b;
  --laureate: #1a5c38;
  --forest: #1e5e3a;
  --gold: #d4a017;
  --gold-rich: #b8860b;
  --gold-light: #faf6e8;
  --torch: #f97316;
  --cream: #ffffff;
  --surface: #ffffff;
  --white: #ffffff;
  --ink: #111827;

  --background: var(--white);
  --foreground: var(--ink);
  --text-on-light: var(--ink);
  --text-on-light-muted: #4b5563;
  --text-on-dark: #fafafa;
  --text-on-dark-muted: #f5f0e0;
  --heading-on-light: var(--laureate-deep);
  --heading-on-dark: #fafafa;

  --gradient-hero: linear-gradient(135deg, color-mix(in oklab, var(--laureate-deep) 92%, transparent), color-mix(in oklab, var(--forest) 70%, transparent) 50%, color-mix(in oklab, var(--gold) 35%, transparent));
  --gradient-gold: linear-gradient(135deg, #ffffff, color-mix(in oklab, white 55%, var(--gold-light)) 30%, color-mix(in oklab, white 35%, var(--gold)) 70%, color-mix(in oklab, white 20%, var(--gold-rich)));
  --gradient-gold-btn: linear-gradient(135deg, #e8c547, var(--gold) 60%, var(--torch));
  --gradient-gold-text: linear-gradient(135deg, var(--gold-rich), var(--gold) 55%, var(--gold-rich));

  --shadow-elegant: 0 30px 60px -30px color-mix(in oklab, var(--laureate-deep) 50%, transparent);
  --shadow-gold: 0 20px 50px -20px color-mix(in oklab, var(--gold) 60%, transparent);
  --shadow-soft: 0 10px 30px -15px color-mix(in oklab, var(--ink) 20%, transparent);

  --font-display: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-accent: "DM Sans", ui-sans-serif, system-ui, sans-serif;
}

* { border-color: #e5e7eb; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--background);
  color: var(--text-on-light);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .font-display {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

.font-accent { font-family: var(--font-accent); }

/* Utilities */
.text-on-light { color: var(--text-on-light); }
.text-on-light-muted { color: var(--text-on-light-muted); }
.text-on-dark { color: var(--text-on-dark); }
.text-on-dark-muted { color: var(--text-on-dark-muted); }
.text-heading { color: var(--heading-on-light); }
.text-muted { color: var(--text-on-light-muted); }
.section-light, .section-white, .surface-light, .surface-white {
  background-color: var(--white);
  color: var(--text-on-light);
}

.container-x {
  width: 100%;
  margin-inline: auto;
  padding-inline: 1.25rem;
  max-width: 80rem;
}

.section-y { padding-block: 5rem; }

.gradient-text-gold {
  background: var(--gradient-gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.glass-card {
  background: color-mix(in oklab, white 10%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid color-mix(in oklab, var(--gold) 30%, transparent);
}

.btn-gold {
  background: var(--gradient-gold-btn);
  color: var(--ink);
  box-shadow: var(--shadow-gold);
  transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease;
}
.btn-gold:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

.ornate-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--gold);
}
.ornate-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--gold) 60%, transparent), transparent);
}

.hover-lift {
  transition: transform 280ms ease, box-shadow 280ms ease;
}
.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-elegant);
}

.laurel-frame {
  position: relative;
}
.laurel-frame::before,
.laurel-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid color-mix(in oklab, var(--gold) 45%, transparent);
  border-radius: inherit;
  pointer-events: none;
}
.laurel-frame::after {
  inset: 8px;
  border-color: color-mix(in oklab, var(--gold) 25%, transparent);
}

/* Animations */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes float-slow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes spin-slow { to { transform: rotate(360deg); } }
@keyframes shine-sweep {
  0% { transform: translateX(-120%) skewX(-20deg); }
  100% { transform: translateX(220%) skewX(-20deg); }
}
@keyframes pulse-ring {
  0% { transform: scale(0.85); opacity: 0.55; }
  100% { transform: scale(1.7); opacity: 0; }
}
@keyframes ticker-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

.animate-fade-up { animation: fade-up 0.8s ease-out both; }
.animate-fade-in { animation: fade-in 0.8s ease-out both; }
.animate-float { animation: float-slow 6s ease-in-out infinite; }
.animate-marquee { animation: marquee 38s linear infinite; }
.animate-spin-slow { animation: spin-slow 28s linear infinite; }
.animate-shine { animation: shine-sweep 2.8s ease-in-out infinite; }
.animate-pulse-ring { animation: pulse-ring 2.6s ease-out infinite; }
.animate-ticker-dot { animation: ticker-dot 1.4s ease-in-out infinite; }

/* Header */
.site-header--over-hero {
  background: transparent;
}
.site-header--scrolled {
  border-bottom: 1px solid color-mix(in oklab, var(--gold) 20%, transparent);
  background: white;
  box-shadow: var(--shadow-soft);
}

.nav-link--active { color: var(--laureate-deep) !important; }
.nav-link--active::after {
  content: "";
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: -2px;
  height: 2px;
  border-radius: 9999px;
  background: var(--gradient-gold);
}

/* Dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 11rem;
  margin-top: 0.25rem;
  border-radius: 0.75rem;
  border: 1px solid color-mix(in oklab, var(--gold) 20%, transparent);
  background: white;
  padding: 0.375rem;
  box-shadow: var(--shadow-soft);
  z-index: 60;
}
.nav-dropdown.open .nav-dropdown-menu { display: block; }
.nav-dropdown-item {
  display: block;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-family: var(--font-accent);
  font-size: 13px;
  color: var(--ink);
  transition: background 150ms, color 150ms;
}
.nav-dropdown-item:hover,
.nav-dropdown-item--active {
  background: color-mix(in oklab, var(--gold-light) 50%, transparent);
  color: var(--laureate-deep);
}

/* Mobile menu */
.mobile-menu { display: none; }
.mobile-menu.open { display: block; }

/* FAQ */
.faq-answer { display: none; }
.faq-item.open .faq-answer { display: block; animation: fade-in 0.8s ease-out both; }
.faq-item.open .faq-chevron { transform: rotate(180deg); }

/* Footer */
.footer--home { margin-top: 0; }
.footer--inner { margin-top: 6rem; }
