/* Om Setu Yogashala — Homepage typography system.
   Loaded only by index.php, so scope is naturally limited to the homepage. */

:root {
  --font-heading: 'Cormorant Garamond', serif;
  --font-accent: 'Cinzel', serif;
  --font-body: 'Montserrat', sans-serif;
  --green: #194D46;
  --coral: #F26A57;
  --gold: #C9A24B;
  --ivory: #F8F4EC;
  --charcoal: #2B2B28;
  --charcoal-soft: #5B5B57;
}

/* ---- Headings: Cormorant Garamond everywhere, lining numerals mandatory ---- */
.font-heading, h1, h2, h3, h4, .title {
  font-family: var(--font-heading);
  font-variant-numeric: lining-nums;
}

h1, h2, h3, h4 {
  font-weight: 600;
  color: var(--green);
}

/* Hero / display title */
h1.title {
  font-size: 40px;
  letter-spacing: 0;
  color: var(--green);
}

/* Section headings */
h2.title {
  font-size: 26px;
  letter-spacing: 0;
  color: var(--green);
}

/* Card / subhead + FAQ accordion titles */
h3,
.faq-section .accordion-button {
  font-size: 20px;
  letter-spacing: 0;
  color: var(--green);
  font-family: var(--font-heading);
  font-variant-numeric: lining-nums;
}

@media (max-width: 1024px) {
  h1.title { font-size: 32px; }
}

@media (max-width: 639px) {
  h1.title { font-size: 24px; }
  h2.title { font-size: 20px; }
  h3, .faq-section .accordion-button { font-size: 18px; }
}

/* ---- Accent / eyebrow labels ---- */
.why-rishikesh-wellness .wrw-eyebrow,
.blogSection .wrw-eyebrow,
.tag-message {
  font-family: var(--font-accent);
  font-weight: 500;
  letter-spacing: 2px;
  font-size: 12px;
  color: var(--gold);
}

/* ---- Buttons ---- */
/* .btn-one and the header CTA font are shared sitewide via css/style.css now
   (header.php and .btn-one render on every page, not just the homepage). */
.btn-one { color: var(--ivory); }
.navbar-light .navbar-nav .nav-link.btn-primary { color: var(--green); }
.navbar-light .navbar-nav .nav-link.btn-primary:hover { color: var(--ivory); }

/* ---- Nav links ---- */
/* Weight/size/letter-spacing now live in css/style.css (shared header.php).
   Only the homepage-specific color remains here. */
.navbar-light .navbar-nav .nav-link {
  color: var(--charcoal);
}

.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link:hover {
  color: var(--coral);
}

/* ---- Form field labels (ebook lead form) ---- */
#guideForm label {
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--charcoal-soft);
}

/* ---- Footer column headers ---- */
.footer-box h6 {
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ivory);
}

/* ---- Body copy: swap Raleway for Montserrat, no other typeface remains ---- */
body,
p,
.about-index-text p,
.intro-points ul li,
.course_item .course_content .courseDesc,
.course_content .time,
.course_content .event__color,
.indian-popup-heading,
.bottom-popup-text {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--charcoal);
}

body { font-size: 16px; line-height: 1.7; }
p { font-size: 16px; line-height: 1.7; }

@media (max-width: 639px) {
  body, p { font-size: 15px; }
}