/**
 * MIDHATI — Site-wide typography system
 * Root reference: About Us page (EB Garamond + Inter).
 * Loaded last to override Astra and page-specific drift.
 */

/* ==========================================================================
   A — Design tokens (About Us as source of truth)
   ========================================================================== */

:root {
	--color-text-body: #2e2e2e;
	--color-text-muted-body: #5a5a5a;
	--color-label: #a07840;
	--color-label-light: #e2c898;

	--font-size-body: 18px;
	--font-size-about-body: 19px;

	--font-size-label: 0.72rem;
	--font-size-section-heading: clamp(1.6rem, 2.8vw, 2.25rem);
	--font-size-page-heading: clamp(2rem, 3.6vw, 3.1rem);
	--font-size-hero-heading: clamp(1.95rem, 3.2vw, 2.85rem);
	--font-size-card-heading: 1rem;
	--font-size-card-body: 0.88rem;
	--font-size-intro: 1.02rem;

	--letter-spacing-label: 0.18em;
	--letter-spacing-heading: -0.01em;
}

/* ==========================================================================
   B — Base body text (all pages, posts, templates)
   ========================================================================== */

body,
body .site,
body .site-content,
body #content,
body .entry-content,
body main#main,
body .site-main,
body .midhati-main,
body .midhati-blog-article,
body .ast-article-single,
body .ast-separate-container .ast-article-single,
body .wp-block-post-content {
	font-family: var(--font-body) !important;
	font-size: var(--font-size-body) !important;
	line-height: 1.78 !important;
	color: var(--color-text-body) !important;
	-webkit-font-smoothing: antialiased;
}

body p,
body .entry-content p,
body main#main p,
body .site-main p,
body li,
body .entry-content li {
	font-family: var(--font-body) !important;
	font-size: inherit !important;
	line-height: 1.78 !important;
	color: inherit;
}

/* About Us — paragraphs +1px vs site base */
body .midhati-about-page {
	font-size: var(--font-size-about-body) !important;
}

body .midhati-about-page p,
body .midhati-about-page .section-intro,
body .midhati-about-page .about-intro-text p,
body .midhati-about-page .col-text p,
body .midhati-about-page .prose-section p {
	font-size: var(--font-size-about-body) !important;
}

/* ==========================================================================
   C — Section labels / eyebrows (Inter UI — About “OUR STORY” style)
   ========================================================================== */

.section-label,
.eyebrow,
.page-hero-eyebrow,
.hero-eyebrow,
.midhati-about-page .hero-eyebrow {
	font-family: var(--font-ui) !important;
	font-size: var(--font-size-label) !important;
	font-weight: 600 !important;
	letter-spacing: var(--letter-spacing-label) !important;
	text-transform: uppercase !important;
	line-height: 1.4 !important;
}

.section-label,
.eyebrow:not(.eyebrow--on-navy) {
	color: var(--color-label) !important;
}

.section-label--light,
.eyebrow--on-navy {
	color: var(--color-label-light) !important;
}

.eyebrow--on-navy {
	color: var(--color-gold) !important;
}

/* ==========================================================================
   D — Section & page headings (EB Garamond — About section-heading style)
   ========================================================================== */

.section-heading,
.section-title,
.about-main-heading,
.page-hero-heading,
.closing-heading,
.midhati-about-page .about-main-heading,
.midhati-about-page .section-heading,
.midhati-about-page .col-text h2 {
	font-family: var(--font-heading) !important;
	font-size: var(--font-size-section-heading) !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	letter-spacing: var(--letter-spacing-heading) !important;
	color: var(--color-heading-light, var(--color-navy-section)) !important;
}

.cta-heading {
	font-family: var(--font-heading) !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	letter-spacing: var(--letter-spacing-heading) !important;
}

.hero-heading,
.midhati-about-page .hero-heading {
	font-family: var(--font-heading) !important;
	font-size: var(--font-size-hero-heading) !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	letter-spacing: var(--letter-spacing-heading) !important;
}

.section-heading--light,
.section-title.text-on-navy,
.hero-heading,
.midhati-about-page .section-heading--light,
.midhati-about-page .hero-heading {
	color: var(--color-white) !important;
}

/* WordPress / blog post content headings */
.entry-content h1,
.site-main h1,
.midhati-blog-article h1 {
	font-family: var(--font-heading) !important;
	font-size: var(--font-size-page-heading) !important;
	font-weight: 500 !important;
	line-height: 1.14 !important;
	letter-spacing: -0.015em !important;
	color: var(--color-navy-section) !important;
}

.entry-content h2,
.site-main h2,
.midhati-blog-article h2 {
	font-family: var(--font-heading) !important;
	font-size: var(--font-size-section-heading) !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	letter-spacing: var(--letter-spacing-heading) !important;
	color: var(--color-navy-section) !important;
}

.entry-content h3,
.site-main h3,
.midhati-blog-article h3 {
	font-family: var(--font-heading) !important;
	font-size: clamp(1.15rem, 1.8vw, 1.45rem) !important;
	font-weight: 500 !important;
	line-height: 1.25 !important;
	color: var(--color-navy-section) !important;
}

.entry-content h4,
.entry-content h5,
.entry-content h6,
.site-main h4,
.site-main h5,
.site-main h6 {
	font-family: var(--font-heading) !important;
	font-weight: 500 !important;
	color: var(--color-navy-section) !important;
}

/* Section intro / lede paragraphs (light backgrounds only) */
.section-intro,
.section-lede,
.lead,
.midhati-about-page .section-intro {
	font-family: var(--font-body) !important;
	font-size: var(--font-size-intro) !important;
	line-height: 1.76 !important;
	color: var(--color-text-body) !important;
}

.hero-sub {
	font-family: var(--font-body) !important;
	font-size: var(--font-size-intro) !important;
	line-height: 1.76 !important;
}

/* ==========================================================================
   E & F — Contrast, cards, navy bands → design-system.css
   ========================================================================== */

/* Card typography — fonts & sizes only (colours in design-system.css) */

.practice-item h3,
.value-card h3,
.quick-card h3,
.quick-title,
.feature-card h3,
.service-card h3,
.blog-card h3,
.awareness-item h3,
.midhati-card h3 {
	font-family: var(--font-heading) !important;
	font-size: var(--font-size-card-heading) !important;
	font-weight: 600 !important;
	text-align: center !important;
}

.practice-item p,
.value-card p,
.quick-card p,
.quick-text,
.feature-card p,
.service-card p,
.blog-card p,
.blog-excerpt,
.awareness-item p,
.midhati-card p {
	font-family: var(--font-card) !important;
	font-size: var(--font-size-card-body) !important;
	line-height: 1.62 !important;
}

/* ==========================================================================
   G — Header typography (Inter UI — aligned with About labels/buttons)
   ========================================================================== */

.midhati-site-header,
.midhati-site-header .nav-link,
.midhati-site-header .header-lang,
.midhati-site-header .header-lang a,
.midhati-site-header .btn-gold,
.midhati-site-header .menu-toggle {
	font-family: var(--font-ui) !important;
}

.midhati-site-header .nav-link {
	font-size: 0.95rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em !important;
}

.midhati-site-header .header-lang {
	font-size: 0.85rem !important;
	font-weight: 600 !important;
}

.midhati-site-header .btn-gold {
	font-size: 0.9rem !important;
	font-weight: 600 !important;
}

/* ==========================================================================
   H — Footer typography
   ========================================================================== */

.midhati-site-footer {
	font-family: var(--font-body) !important;
}

.midhati-site-footer .footer-org-name {
	font-family: var(--font-heading) !important;
	font-size: 1.05rem !important;
	font-weight: 500 !important;
	line-height: 1.35 !important;
	color: var(--color-white) !important;
}

.midhati-site-footer .footer-tagline,
.midhati-site-footer .footer-nav-link,
.midhati-site-footer .footer-contact-value,
.midhati-site-footer .footer-contact-value--address {
	font-family: var(--font-body) !important;
	font-size: 0.92rem !important;
	line-height: 1.78 !important;
}

.midhati-site-footer .footer-heading,
.midhati-site-footer .footer-contact-label {
	font-family: var(--font-ui) !important;
	font-size: var(--font-size-label) !important;
	font-weight: 600 !important;
	letter-spacing: var(--letter-spacing-label) !important;
	text-transform: uppercase !important;
	color: var(--color-gold) !important;
}

.midhati-site-footer .footer-copyright,
.midhati-site-footer .footer-credit,
.midhati-site-footer .midhati-footer-back-to-top {
	font-family: var(--font-ui) !important;
	font-size: 0.82rem !important;
}

/* ==========================================================================
   I — UI elements (buttons, sidebar labels)
   ========================================================================== */

.btn,
.midhati-sidebar-widget__title,
.midhati-sidebar-more,
.midhati-sidebar-cta-btn {
	font-family: var(--font-ui) !important;
}

.midhati-sidebar-widget__title {
	font-family: var(--font-heading) !important;
	font-size: 1.05rem !important;
	font-weight: 500 !important;
	color: var(--color-navy-section) !important;
}

.midhati-blog-sidebar p,
.midhati-sidebar-empty {
	font-family: var(--font-body) !important;
	font-size: var(--font-size-body) !important;
	line-height: 1.78 !important;
}

/* ==========================================================================
   J — Kill Astra / theme font overrides
   ========================================================================== */

body,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body p,
body a,
body span,
body button,
body input,
body textarea,
body select,
body label,
.ast-button,
.ast-custom-button,
.site-title,
.site-description,
.main-header-menu .menu-link {
	font-family: inherit;
}

/* ==========================================================================
   K — Uniform pill buttons (site-wide)
   ========================================================================== */

.btn,
.btn-primary,
.btn-gold,
.btn-secondary,
.btn-outline,
.btn-outline-gold,
.btn-outline-navy,
.btn-outline-light,
.btn-ghost-navy,
.btn-ghost-white,
.midhati-about-page .btn-primary,
.midhati-about-page .btn-outline,
.midhati-about-page .btn-outline-light,
.midhati-footer-back-to-top,
.midhati-blog-article .blog-cta .btn-gold,
input[type="submit"],
input[type="button"].btn,
button.btn,
.form-submit .btn,
.form-submit input[type="submit"],
.wpcf7-submit {
	border-radius: var(--border-radius-pill) !important;
}

.btn,
.btn-primary,
.btn-gold,
.btn-secondary,
.btn-outline,
.btn-outline-gold,
.btn-outline-navy,
.btn-outline-light,
.btn-ghost-navy,
.btn-ghost-white,
.midhati-about-page .btn-primary,
.midhati-about-page .btn-outline,
.midhati-about-page .btn-outline-light {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-family: var(--font-ui) !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
}

.btn-primary,
.btn-gold,
.midhati-about-page .btn-primary,
.form-submit .btn,
.form-submit input[type="submit"],
.wpcf7-submit {
	background: var(--color-gold) !important;
	color: var(--color-navy-dark) !important;
	border: 2px solid var(--color-gold) !important;
}

.btn-primary:hover,
.btn-gold:hover,
.midhati-about-page .btn-primary:hover,
.form-submit .btn:hover,
.form-submit input[type="submit"]:hover {
	background: var(--color-gold-hover) !important;
	border-color: var(--color-gold-hover) !important;
	color: var(--color-navy-dark) !important;
	transform: translateY(-1px);
}