/* /shared/site.css */

:root {
  /* Ashby & Vane Base Colors */
  --navy: #0A111F;
  --navy-light: #1A253A;
  --cream: #F9F8F5;
  --cream-dark: #EAE6DF;
  --ink: #1C2331;
  --ink-light: #4A5365;
  --gold: #C0A074;
  --gold-light: #DFCA9B;
  --white: #FFFFFF;
  --border: rgba(10, 17, 31, 0.1);
  --border-light: rgba(255, 255, 255, 0.1);

  /* Legacy Variable Mappings */
  --black: var(--navy);
  --off-white: var(--cream);
  --gray: var(--ink-light);
  --gray-dark: var(--ink);
  --true-gold: var(--gold);
  --line: var(--border-light);
  --line-dark: var(--border);
  --panel: var(--navy-light);
  --panel-row: var(--navy);
  --green: #3ddc97;

  /* Typography */
  --font-sans: 'Inter', -apple-system, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
  --sans: var(--font-sans);
  --serif: var(--font-serif);
}

/* Global Typography & Elements */
body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

h2, h3, .sec-title, .closing h2, .gap-head h2, .pillars-head h2, .standard h2, .why-head h2, .pkg-head h2, .tier-head h2, .calc1-head h2, .calc2-head h2 {
  font-family: var(--font-serif) !important;
}

/* Hero H1s (Inter) */
h1 {
  font-family: var(--font-sans) !important;
}

/* Editorial overrides for H1 */
.art-hero h1, .article-intro h1, .article-intro h2, .copy h1, .book-title {
  font-family: var(--font-serif) !important;
}

/* Emphasis */
h1 em, h2 em, h3 em, blockquote em, .sec-title em {
  font-style: italic !important;
  color: var(--gold) !important;
  font-weight: 500 !important;
}

blockquote {
  font-family: var(--font-serif) !important;
  border-left-color: var(--gold) !important;
}

/* Buttons */
.btn-navy, .btn-dark, .submit-btn, .download, .btn-navy-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gold) !important;
  color: var(--navy) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 14px 32px !important;
  border-radius: 40px !important;
  text-decoration: none !important;
  transition: background 0.3s ease !important;
  border: none !important;
  cursor: pointer !important;
}
.btn-navy:hover, .btn-dark:hover, .submit-btn:hover, .download:hover, .btn-navy-pill:hover {
  background: var(--gold-light) !important;
}

.btn-outline, .nav-cta, .apply, .logo-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--navy) !important;
  color: var(--navy) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 12px 28px !important;
  border-radius: 40px !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  background: transparent !important;
}
.btn-outline:hover, .nav-cta:hover, .apply:hover {
  background: var(--navy) !important;
  color: var(--white) !important;
}

/* Dark mode buttons */
nav.dark-nav .btn-outline, nav.dark-nav .nav-cta, nav.dark-nav .apply, nav.dark-nav .logo-box, .dark .btn-outline {
  border-color: var(--white) !important;
  color: var(--white) !important;
}
nav.dark-nav .btn-outline:hover, nav.dark-nav .nav-cta:hover, nav.dark-nav .apply:hover, .dark .btn-outline:hover {
  background: var(--white) !important;
  color: var(--navy) !important;
}

.btn-light {
  background: var(--white) !important;
  color: var(--navy) !important;
  border-radius: 40px !important;
}
.btn-light:hover {
  background: var(--cream-dark) !important;
}

.btn-gold, .btn {
  background: var(--gold) !important;
  color: var(--navy) !important;
  border-radius: 40px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 14px 32px !important;
  text-decoration: none !important;
  transition: background 0.3s ease !important;
  border: none !important;
}
.btn-gold:hover, .btn:hover {
  background: var(--gold-light) !important;
}

.site-nav .nav-actions .btn-outline,
.site-nav > .apply,
.site-nav .nav-cta {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: var(--navy) !important;
}
.site-nav .nav-actions .btn-outline:hover,
.site-nav > .apply:hover,
.site-nav .nav-cta:hover {
  background: var(--gold-light) !important;
  border-color: var(--gold-light) !important;
  color: var(--navy) !important;
}

/* Focus States */
:focus-visible {
  outline: 2px solid var(--gold) !important;
  outline-offset: 3px !important;
}

/* Forms */
input[type="text"], input[type="email"], input[type="tel"] {
  font-family: var(--font-sans) !important;
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  color: var(--ink) !important;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus {
  border-color: var(--navy) !important;
}

/* Generic Nav and Footer overriding */
.site-nav {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 24px 5% !important;
  background: var(--white) !important;
  border-bottom: 1px solid var(--border) !important;
  position: relative;
  z-index: 1000;
}
.site-nav.dark-nav {
  background: var(--navy) !important;
  border-bottom: 1px solid var(--border-light) !important;
}

.logo-box, .logo, .site-nav .logo a {
  font-family: var(--font-serif) !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  color: var(--navy) !important;
  text-transform: none !important;
  letter-spacing: -0.02em !important;
  border: none !important;
  padding: 0 !important;
  text-decoration: none !important;
}
.site-nav.dark-nav .logo-box, .site-nav.dark-nav .logo, .site-nav.dark-nav .logo a {
  color: var(--white) !important;
}
.site-nav.dark-nav .logo-box:hover {
  background: transparent !important;
}

.site-nav .nav-right, .site-nav .nav-links {
  display: flex !important;
  gap: 36px !important;
  align-items: center !important;
}
.site-nav .nav-links a, .site-nav .nav-right .nav-link, .site-nav .nav-item {
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.site-nav.dark-nav .nav-links a, .site-nav.dark-nav .nav-right .nav-link, .site-nav.dark-nav .nav-item {
  color: rgba(255,255,255,0.85) !important;
}
.site-nav .nav-links a:hover, .site-nav .nav-links a.active, .site-nav .nav-right .nav-link:hover, .site-nav .nav-item:hover {
  color: var(--gold) !important;
}

.site-nav .dropdown-wrapper, .site-nav .nav-item {
  position: relative !important;
  padding: 10px 0 !important;
  cursor: pointer !important;
}
.site-nav .dropdown {
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(10px) !important;
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 32px rgba(10,17,31,0.06) !important;
  padding: 16px 0 !important;
  min-width: 240px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: all 0.2s ease !important;
  z-index: 1000 !important;
}
.site-nav.dark-nav .dropdown {
  background: var(--navy) !important;
  border-color: var(--border-light) !important;
}
.site-nav .dropdown-wrapper:hover .dropdown, .site-nav .nav-item:hover .dropdown {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(0) !important;
}
.site-nav .dropdown a {
  display: block !important;
  padding: 10px 24px !important;
  font-size: 13px !important;
  color: var(--ink) !important;
}
.site-nav.dark-nav .dropdown a {
  color: rgba(255,255,255,0.8) !important;
}
.site-nav .dropdown a:hover {
  background: var(--cream) !important;
  color: var(--navy) !important;
}
.site-nav.dark-nav .dropdown a:hover {
  background: var(--navy-light) !important;
  color: var(--gold) !important;
}

.site-nav .mobile-menu-toggle {
  display: none !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  flex-direction: column !important;
  gap: 5px !important;
  padding: 5px !important;
}
.site-nav .mobile-menu-toggle .bar {
  width: 24px !important;
  height: 2px !important;
  background: var(--navy) !important;
  transition: all 0.3s !important;
}
.site-nav.dark-nav .mobile-menu-toggle .bar {
  background: var(--white) !important;
}
.site-nav .mobile-apply-btn { display: none !important; }

.site-footer {
  background: var(--navy) !important;
  color: var(--white) !important;
  padding: 100px 5% 40px !important;
}
.site-footer .footer-top {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  gap: 60px !important;
  max-width: 1320px !important;
  margin: 0 auto 88px !important;
}
.site-footer .footer-brand {
  flex: 1 1 280px !important;
  max-width: 340px !important;
}
.site-footer .footer-logo {
  margin-bottom: 24px !important;
  color: var(--white) !important;
  font-family: var(--font-serif) !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}
.site-footer .footer-brand p {
  margin: 0 !important;
  color: rgba(255,255,255,0.6) !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
}
.site-footer .footer-links {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(145px, 1fr)) !important;
  flex: 2 1 760px !important;
  gap: 52px !important;
}
.site-footer .footer-col h4,
.site-footer .footer-apply h4 {
  margin: 0 0 24px !important;
  color: var(--gold) !important;
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}
.site-footer .footer-col a {
  display: block !important;
  margin-bottom: 14px !important;
  color: rgba(255,255,255,0.62) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}
.site-footer .footer-bottom {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 32px !important;
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding-top: 40px !important;
  border-top: 1px solid rgba(255,255,255,0.14) !important;
}
.site-footer .footer-apply h4 {
  margin-bottom: 8px !important;
}
.site-footer .footer-apply a {
  color: var(--white) !important;
  font-family: var(--font-serif) !important;
  font-size: 22px !important;
  line-height: 1.35 !important;
}
.site-footer .footer-legal {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 24px 32px !important;
  color: rgba(255,255,255,0.44) !important;
  font-size: 12px !important;
}
.site-footer.minimal-footer {
  padding: 36px 5% !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  border-top: 1px solid var(--border-light) !important;
  font-size: 12px !important;
  color: rgba(255,255,255,0.6) !important;
}
.site-footer a {
  color: rgba(255,255,255,0.6) !important;
  transition: color 0.3s ease !important;
  text-decoration: none !important;
}
.site-footer a:hover {
  color: var(--white) !important;
}

@media (max-width: 860px) {
  .site-nav .nav-links, .site-nav .nav-right {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: var(--white) !important;
    flex-direction: column !important;
    padding: 32px !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05) !important;
    display: none !important;
    gap: 24px !important;
  }
  .site-nav.dark-nav .nav-links, .site-nav.dark-nav .nav-right {
    background: var(--navy) !important;
    border-bottom: 1px solid var(--border-light) !important;
  }
  .site-nav .nav-links.active, .site-nav .nav-right.active { display: flex !important; }
  .site-nav .mobile-menu-toggle { display: flex !important; }
  .site-nav .nav-actions { display: none !important; }
  .site-nav > .apply { display: inline-flex !important; }
  .site-nav .nav-right .nav-cta,
  .site-nav .nav-links .nav-cta { display: inline-flex !important; margin-left: 0 !important; }
  .site-nav .dropdown {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
    padding-left: 16px !important;
    min-width: 0 !important;
  }
  .site-nav .dropdown-wrapper, .site-nav .nav-item { width: 100% !important; }
  .site-nav .mobile-apply-btn {
    display: block !important;
    background: var(--gold) !important;
    color: var(--navy) !important;
    padding: 14px 32px !important;
    border-radius: 40px !important;
    text-align: center !important;
    margin-top: 16px !important;
    width: 100% !important;
  }
  .site-nav.dark-nav .mobile-apply-btn { background: var(--gold) !important; color: var(--navy) !important; }
  .site-footer {
    padding: 72px 6% 32px !important;
  }
  .site-footer .footer-top {
    margin-bottom: 56px !important;
    gap: 48px !important;
  }
  .site-footer .footer-links {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 42px 28px !important;
  }
  .site-footer .footer-bottom {
    align-items: flex-start !important;
    flex-direction: column !important;
  }
}

@media (max-width: 520px) {
  .site-footer .footer-links {
    grid-template-columns: 1fr !important;
  }
}

/* Eyebrows */
.eyebrow {
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
}