/* ============================================================
   Astroyog - GLOBAL design layer (loaded on every page)
   Unifies typography, header, buttons & color with the
   redesigned homepage. Theme (maroon + gold) preserved.
   ============================================================ */

:root {
  --ay-maroon: #9a0a0a;
  --ay-maroon-2: #7d0808;
  --ay-maroon-ink: #5a0606;
  --ay-gold: #c49a46;
  --ay-gold-deep: #a97f31;
  --ay-gold-soft: #e7d2a2;
  --ay-ink: #2a211c;
  --ay-ink-soft: #6c5f56;
  --ay-cream: #faf5ee;
  --ay-gold-line: rgba(196, 154, 70, 0.38);
  --ay-serif: "Lato", "Segoe UI", Arial, Helvetica, sans-serif;
  --ay-sans: "Open Sans", system-ui, -apple-system, Arial, sans-serif;
}

/* ---------- Typography unification ---------- */
body {
  font-family: var(--ay-sans) !important;
  color: var(--ay-ink);
  background-color: var(--ay-cream);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6,
.cs-section_title, .cs-section_subtitle,
.cs-funfact_number, .cs-cta_title, .cs-page_title,
.cs-footer_widget .cs-widget_title, .cs-iconbox_title,
.cs-post_title, .cs-testimonial_text, blockquote {
  font-family: var(--ay-serif) !important;
  letter-spacing: -0.01em;
}
/* keep small eyebrow/subtitles in the clean sans for contrast */
.cs-section_subtitle {
  font-family: var(--ay-sans) !important;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: var(--ay-gold-deep) !important;
}
body ::selection { background: var(--ay-gold-soft); color: var(--ay-maroon-ink); }

/* ---------- Header: visible, premium nav on every page ---------- */
.cs-main_header {
  background: rgba(250, 245, 238, 0.90);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--ay-gold-line);
}
.cs-site_header.cs-sticky-active .cs-main_header {
  background: rgba(250, 245, 238, 0.96);
  box-shadow: 0 2px 14px rgba(90, 30, 10, 0.08);
}
.cs-nav .cs-nav_list > li > a {
  color: var(--ay-ink) !important;
  font-family: var(--ay-sans) !important;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  font-size: 15.5px;
  transition: color .2s ease;
}
.cs-nav .cs-nav_list > li > a:hover,
.cs-nav .cs-nav_list > li:hover > a { color: var(--ay-maroon) !important; }
.cs-icon_btn .cs-icon_btn_in span { background-color: var(--ay-maroon) !important; }

/* ---------- Links & buttons polish ---------- */
a { transition: color .2s ease; }
.cs-btn, .cs-text_btn, .cs-btn.cs-style1, .cs-btn.cs-color1 {
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background-color .25s, color .25s !important;
}
.cs-btn:hover, .cs-btn.cs-style1:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(154,10,10,.5); }
.cs-text_btn:hover { color: var(--ay-maroon); }

/* ---------- Accessibility: visible keyboard focus ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--ay-gold); outline-offset: 2px; border-radius: 3px;
}

/* ---------- Section headings get a touch more presence ---------- */
.cs-section_title { line-height: 1.12; }

/* ---------- Smooth, reduced-motion aware ---------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}