/**
 * MIDHATI — Uniform contrast & paragraph alignment
 *
 * Rules (enforced site-wide):
 * 1. Light background (white, cream, off-white) → dark body text, navy headings
 * 2. Navy background → white/gold headings & intro text
 * 3. Cards (always on a light card surface) → dark paragraph text, navy titles
 * 4. Body paragraphs → justified (exceptions: headers, heroes, CTAs, footer)
 *
 * Tokens are set in :root via Midhati Design (Customizer).
 */

/* ==========================================================================
   Semantic aliases (Customizer overrides these on :root)
   ========================================================================== */

:root {
	--color-on-light-body: var(--color-text-body, #2e2e2e);
	--color-on-light-heading: var(--color-heading-light, #1b3a61);
	--color-on-light-muted: var(--color-text-muted, #5a5a5a);
	--color-on-navy-heading: var(--color-navy-on-heading, #ffffff);
	--color-on-navy-body: var(--color-navy-on-subtext, rgba(255, 255, 255, 0.85));
	--color-on-navy-label: var(--color-label, #c9a32d);
	--color-on-card-heading: var(--color-card-heading, var(--color-on-light-heading));
	--color-on-card-body: var(--color-card-text, var(--color-on-light-muted));
}

/* ==========================================================================
   1 — Paragraph justification (global default)
   ========================================================================== */

body p,
.entry-content p,
.site-main p,
main#main p,
.midhati-about-page p,
.midhati-blog-article p,
.midhati-blog-article .blog-content p {
	text-align: justify;
	text-justify: inter-word;
}

/* Layout exceptions — keep centered or inherited alignment */
.section-header,
.section-header p,
.section-header .section-intro,
.text-center,
.text-center p,
.page-hero,
.page-hero p,
.page-hero-sub,
.cta-banner,
.cta-banner p,
.cta-sub,
.prose-section,
.prose-section p,
.midhati-about-page #closing p,
.midhati-about-page .vm-card,
.midhati-about-page .vm-card p,
.midhati-about-page .vm-card li,
.midhati-about-page .mission-list li,
.midhati-site-footer p,
.breadcrumb-nav,
.nav-list,
.btn,
.midhati-sidebar-widget--cta p {
	text-align: center;
}

.midhati-about-page .hero-sub {
	text-align: left;
}

/* ==========================================================================
   2 — Light surfaces (white, cream, grey bands)
   ========================================================================== */

body,
.bg-white,
.bg-light,
.section--tinted,
.section--cream,
.about-intro,
.midhati-about-page .about-intro,
.midhati-about-page .founder-section,
.midhati-blog-article .blog-hero {
	color: var(--color-on-light-body);
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
.section-heading,
.section-title,
.about-main-heading,
.page-hero-heading,
.closing-heading,
.col-text h2,
.midhati-blog-article h1,
.midhati-blog-article h2,
.midhati-blog-article h3,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.site-main h1,
.site-main h2,
.site-main h3 {
	color: var(--color-on-light-heading);
}

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

.section-intro,
.section-lede,
.lead {
	color: var(--color-on-light-body);
}

/* ==========================================================================
   3 — Navy / blue surfaces
   ========================================================================== */

:is(
	.page-hero,
	.cta-banner,
	.bg-navy,
	.section--navy,
	.section--navy-mid,
	.awareness,
	.hero-text,
	.midhati-about-page .hero-text,
	.midhati-about-page .section--navy,
	.midhati-about-page .section--navy-mid
) {
	color: var(--color-on-navy-body);
}

:is(
	.page-hero,
	.cta-banner,
	.bg-navy,
	.section--navy,
	.section--navy-mid,
	.awareness,
	.hero-text,
	.midhati-about-page .hero-text,
	.midhati-about-page .section--navy
) :is(
	.section-heading,
	.section-title,
	.section-heading--light,
	.page-hero-heading,
	.page-hero h1,
	.cta-heading,
	.hero-heading,
	.section-head .section-title,
	.section-header h2
) {
	color: var(--color-on-navy-heading) !important;
}

:is(
	.page-hero,
	.cta-banner,
	.bg-navy,
	.section--navy,
	.section--navy-mid,
	.awareness,
	.hero-text,
	.midhati-about-page .hero-text,
	.midhati-about-page .section--navy
) :is(
	.hero-sub,
	.page-hero-sub,
	.section-lede,
	.section-head .section-lede,
	.cta-sub,
	.contact-intro,
	.text-on-navy-secondary
) {
	color: var(--color-on-navy-body) !important;
}

:is(
	.page-hero,
	.cta-banner,
	.bg-navy,
	.section--navy,
	.section--navy-mid,
	.awareness,
	.hero-text,
	.midhati-about-page .hero-text,
	.midhati-about-page .section--navy
) :is(
	.section-label,
	.section-label--light,
	.hero-eyebrow,
	.page-hero-eyebrow,
	.eyebrow,
	.eyebrow--on-navy,
	.values-banner p
) {
	color: var(--color-on-navy-label) !important;
}

.midhati-about-page .hero-heading em {
	color: var(--color-label-light, #e2c898);
}

.page-hero .breadcrumb-nav,
.page-hero .breadcrumb-nav a {
	color: rgba(255, 255, 255, 0.72);
}

.page-hero .breadcrumb-nav a:hover {
	color: var(--color-gold);
}

/* ==========================================================================
   4 — Cards (light surface — dark text always wins inside cards)
   ========================================================================== */

:is(
	.practice-item,
	.value-card,
	.quick-card,
	.feature-card,
	.service-card,
	.blog-card,
	.awareness-item,
	.midhati-card,
	.vm-card,
	.ccard,
	.internship-card,
	.hours-card,
	.map-card
) {
	background: var(--color-card-bg, #ffffff);
}

:is(
	.practice-item,
	.value-card,
	.quick-card,
	.feature-card,
	.service-card,
	.blog-card,
	.awareness-item,
	.midhati-card,
	.vm-card,
	.ccard
) h3,
:is(
	.practice-item,
	.quick-card,
	.feature-card,
	.service-card,
	.blog-card,
	.awareness-item
) .quick-title {
	color: var(--color-on-card-heading) !important;
	text-align: center;
}

:is(
	.practice-item,
	.value-card,
	.quick-card,
	.feature-card,
	.service-card,
	.blog-card,
	.awareness-item,
	.midhati-card,
	.vm-card,
	.ccard
) p,
:is(
	.practice-item,
	.quick-card,
	.feature-card,
	.service-card,
	.blog-card,
	.awareness-item
) .quick-text,
.blog-excerpt {
	color: var(--color-on-card-body) !important;
	text-align: justify !important;
	text-justify: inter-word;
}

/* Navy parent must not bleed white text into cards */
:is(.page-hero, .cta-banner, .bg-navy, .section--navy, .section--navy-mid, .awareness)
	:is(.practice-item, .value-card, .quick-card, .feature-card, .service-card, .blog-card, .awareness-item, .vm-card, .ccard)
	h3 {
	color: var(--color-on-card-heading) !important;
}

:is(.page-hero, .cta-banner, .bg-navy, .section--navy, .section--navy-mid, .awareness)
	:is(.practice-item, .value-card, .quick-card, .feature-card, .service-card, .blog-card, .awareness-item, .vm-card, .ccard)
	p {
	color: var(--color-on-card-body) !important;
}

/* Vision & mission cards on navy — white cards, dark text */
:is(.section--navy, .section--navy-mid) .vm-card h3 {
	color: var(--color-on-card-heading) !important;
}

:is(.section--navy, .section--navy-mid) .vm-card p,
:is(.section--navy, .section--navy-mid) .vm-card li {
	color: var(--color-on-card-body) !important;
}

/* ==========================================================================
   5 — Section & chrome backgrounds (Customizer-driven)
   ========================================================================== */

:is(.bg-navy, .section--navy, .section--navy-mid, .page-hero, .cta-banner, .awareness, .midhati-about-page .section--navy, .midhati-about-page .section--navy-mid) {
	background: var(--color-navy-section) !important;
}

:is(.bg-light, .section--tinted, .midhati-about-page .section--tinted) {
	background: var(--color-section-light) !important;
}

:is(.section--cream, .midhati-about-page .section--cream, .midhati-about-page .founder-section) {
	background: var(--color-section-cream) !important;
}

.midhati-site-header {
	background: var(--color-navy-header) !important;
}

.midhati-site-footer {
	background: var(--color-navy-header) !important;
}

/* ==========================================================================
   6 — Links on hover (unchanged behaviour)
   ========================================================================== */

a:hover,
a:focus-visible {
	color: var(--color-gold);
}