/* ResumeGrow — Global Typography System (v30.4)
   Unifies all pages on Inter (headings/UI) + Plus Jakarta Sans (body).
   Enqueued LAST so it overrides any legacy hardcoded font-family declarations. */

:root {
  --font-primary:   'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-secondary: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;

  /* Legacy aliases used by older stylesheets */
  --rg-font:         var(--font-primary);
  --rg-font-heading: var(--font-primary);
  --rg-font-body:    var(--font-secondary);
  --brand-font:      var(--font-primary);

  /* Shared hero heading tokens — applied to every page hero/title.
     v30.4: reduced ~22% from prior scale for a tighter, simplified hero. */
  --hero-font-family:    var(--font-primary);
  --hero-font-size:      clamp(1.75rem, 3.4vw, 2.875rem);
  --hero-font-weight:    800;
  --hero-line-height:    1.12;
  --hero-letter-spacing: -0.02em;
  --hero-color:          #0F172A;
  --hero-padding-y:      48px;
  --hero-subtitle-size:  clamp(0.95rem, 1.3vw, 1.0625rem);
}

/* ---------- Body / defaults ---------- */
html, body,
body p, body li, body dd, body dt,
body input, body textarea, body select, body button {
  font-family: var(--font-secondary) !important;
}

/* ---------- Headings, nav, UI: Inter ---------- */
h1, h2,
.hero-title, .rg-hero__title, .hero-heading, .page-title,
.rg-section-title, .srv-hero-title, .srv-section-title,
nav a, .menu a, .main-navigation a, #site-navigation a,
button, .btn, .button, input[type="submit"], input[type="button"],
.tag, .badge, .pill, .chip, .label,
.rg-brand, .rg-logo, .rg-cta__btn, .rg-loadmore {
  font-family: var(--font-primary) !important;
}

/* ---------- Smaller subheadings & captions: Plus Jakarta ---------- */
h3, h4, h5, h6,
.card-title, .rg-card__title, .rg-card__excerpt,
.caption, .footer-widget, .footer-widget *,
figcaption, blockquote, .faq, .faq * {
  font-family: var(--font-secondary) !important;
}

/* ---------- Unified Hero Heading ---------- */
.hero-title,
.rg-hero__title,
.hero-heading,
.page-hero h1,
.srv-hero-title,
.about-hero h1,
.case-studies-hero h1,
.contact-hero h1,
.pricing-hero h1,
.resume-templates-hero h1,
.blog-hero h1,
.services-hero h1,
.rg-blog-archive .rg-hero__title {
  font-family: var(--hero-font-family) !important;
  font-size: var(--hero-font-size) !important;
  font-weight: var(--hero-font-weight) !important;
  line-height: var(--hero-line-height) !important;
  letter-spacing: var(--hero-letter-spacing) !important;
  color: var(--hero-color);
  margin: 0 0 16px;
}

/* Responsive scaling — family/weight/letter-spacing stay constant */
@media (max-width: 1024px) {
  :root { --hero-font-size: clamp(2rem, 5.5vw, 3rem); }
}
@media (max-width: 640px) {
  :root { --hero-font-size: clamp(1.75rem, 7vw, 2.25rem); }
}

/* ---------- v30.4: Simplified, smaller hero across all pages ---------- */
.page-hero, .about-hero, .case-studies-hero, .contact-hero,
.pricing-hero, .resume-templates-hero, .blog-hero, .services-hero,
.rg-blog-archive .rg-hero, .single-post-hero, .srv-hero,
.rg-sv-hero, .interview-guides-hero, .job-search-tips-hero {
  padding-top: var(--hero-padding-y) !important;
  padding-bottom: var(--hero-padding-y) !important;
}

/* Hide oversized decorative hero graphics on these pages */
.page-hero .hero-illustration,
.page-hero .hero-decoration,
.page-hero .hero-bg-graphic,
.about-hero .hero-illustration,
.pricing-hero .hero-illustration,
.contact-hero .hero-illustration,
.case-studies-hero .hero-illustration,
.resume-templates-hero .hero-illustration,
.blog-hero .hero-illustration,
.srv-hero .srv-hero-graphic,
.rg-sv-hero .rg-sv-hero-graphic {
  display: none !important;
}

/* Hero subtitle — single short line */
.hero-subtitle, .page-hero p.lead, .about-hero p, .pricing-hero p,
.contact-hero p, .case-studies-hero p, .resume-templates-hero p,
.blog-hero p, .srv-hero-subtitle, .rg-sv-hero__subtitle {
  font-family: var(--font-secondary) !important;
  font-size: var(--hero-subtitle-size) !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  color: #475569;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1024px) {
  :root { --hero-padding-y: 40px; }
}
@media (max-width: 640px) {
  :root { --hero-padding-y: 32px; }
}

/* ============================================================
   v30.6 — Global tokens: primary button + light footer
   ============================================================ */
:root {
  --btn-primary-bg:       #4b83ff;
  --btn-primary-bg-hover: #3a6fe0;
  --footer-bg:            #D6E7FD;
  --footer-ink:           #0F2044;
  --footer-muted:         #475569;
  --footer-link:          #1E3A8A;
  --footer-link-hover:    #4b83ff;
  --nav-resources-accent: #7C3AED; /* distinct from #4b83ff used by siblings */
}

/* Header "Contact Us" button — use shared primary token */
.rg-header .rg-header-cta .rg-btn,
.rg-header .rg-header-cta .rg-btn-dark,
.rg-header-cta a.rg-btn-dark {
  background: var(--btn-primary-bg) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-family: var(--font-primary) !important;
  box-shadow: 0 6px 16px -6px rgba(75,131,255,0.55);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.rg-header .rg-header-cta .rg-btn:hover,
.rg-header .rg-header-cta .rg-btn-dark:hover,
.rg-header-cta a.rg-btn-dark:hover {
  background: var(--btn-primary-bg-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -8px rgba(75,131,255,0.6);
}

/* ---- Light footer (#D6E7FD) — recolor text/links for contrast ---- */
.rg-footer { background: var(--footer-bg) !important; color: var(--footer-ink) !important; }
.rg-footer .rg-footer-col h4,
.rg-footer .rg-footer-brand strong,
.rg-footer .rg-footer-brand .rg-logo-text strong { color: var(--footer-ink) !important; }
.rg-footer .rg-footer-brand p,
.rg-footer .rg-contact-list li,
.rg-footer .rg-footer-bottom,
.rg-footer .rg-footer-bottom-inner span { color: var(--footer-muted) !important; }
.rg-footer .rg-footer-col ul a,
.rg-footer .rg-footer-bottom a { color: var(--footer-link) !important; transition: color .2s ease; }
.rg-footer .rg-footer-col ul a:hover,
.rg-footer .rg-footer-brand a:hover,
.rg-footer .rg-footer-bottom a:hover { color: var(--footer-link-hover) !important; }
.rg-footer .rg-footer-bottom { border-top: 1px solid rgba(15,32,68,0.10) !important; }
.rg-footer .rg-socials a { color: var(--footer-link) !important; background: rgba(255,255,255,0.55) !important; border: 1px solid rgba(15,32,68,0.08) !important; }
.rg-footer .rg-socials a:hover { color: #fff !important; background: var(--btn-primary-bg) !important; }
.rg-footer .rg-subscribe { background: #fff !important; border: 1px solid rgba(15,32,68,0.10) !important; }
.rg-footer .rg-subscribe input { color: var(--footer-ink) !important; }
.rg-footer .rg-subscribe input::placeholder { color: #94A3B8 !important; }

/* ---- Remove ALL pre-footer CTA blocks except on the homepage ---- */
body:not(.home) .srv-listing-cta,
body:not(.home) .rg-sv-cta,
body:not(.home) section.rg-cta,
body:not(.home) section.rg-cta-dark,
body:not(.home) section.pre-footer-cta { display: none !important; }

/* Clean transition from content into footer when pre-footer CTA is absent */
body:not(.home) .site-main > *:last-child,
body:not(.home) main > section:last-of-type,
body:not(.home) main.rg-blog-archive > section:last-of-type {
  margin-bottom: 0 !important;
  padding-bottom: clamp(48px, 6vw, 80px);
}

/* ---- Resources mega-menu trigger: distinct hover color vs siblings ---- */
.rg-nav-list > li > a:hover,
.rg-nav-list > li > a[aria-expanded="true"] { color: var(--btn-primary-bg); }
.rg-nav-resources:hover,
.rg-nav-resources[aria-expanded="true"],
.rg-nav-resources:hover .rg-chevron,
.rg-nav-resources[aria-expanded="true"] .rg-chevron { color: var(--nav-resources-accent) !important; }
.rg-nav-list > li:has(.rg-nav-resources) > .rg-nav-resources::after,
.rg-nav-resources::after { background: var(--nav-resources-accent) !important; }

/* ---- Service-variant pages: restore proper gap between sections ---- */
.rg-sv-section + .rg-sv-section { padding-top: 72px !important; }
@media (max-width: 768px) {
  .rg-sv-section + .rg-sv-section { padding-top: 48px !important; }
}