/*
 * Project typography rules. Loaded after main.css so it can override theme defaults.
 * Body text -> Mulish (cascades everywhere by inheritance).
 * Editorial headings + decorative phrases -> Cormorant Garamond.
 */

/* ─── Global body font (Mulish cascades to all elements unless overridden) ─── */
body {
    font-family: 'Mulish', system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ─── Editorial decorative phrases (Bucket D) ─── */
.partner-coming-heading,
.cta-banner__title,
.partner-coming-tagline,
.partner-coming-eyebrow,
.kcm-testimonies-phrase {
    font-family: 'Cormorant Garamond', Georgia, "Times New Roman", serif;
}
.hero-main__title, #hero-main.hero-main--front-title-xl .hero-main__title {
    font-family: 'Cormorant Garamond', Georgia, "Times New Roman", serif;
    font-size: clamp(76px, calc(76px + 20px * (100vw - 768px) / (1400px - 768px)), 76px);
    line-height: 0.9;
}

/* ─── Logo safety net ───────────────────────────────────────────────────────
 * The logo is an unclassed <h2> inside .utility-nav-logo / .mobile-logo-link.
 * If main.css later adds an `h2 { font-family: ... }` rule, that would override
 * body{}. Anchor the logo back to Mulish so it never becomes serif.
 */
.utility-nav-logo h2,
.mobile-logo-link h2,
.utility-nav-link,
.mobile-menu-link,
.mobile-menu-title {
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 700;
}

/* ─── CTA text utility ─────────────────────────────────────────────────────
 * Add to any text-link CTA that contains an arrow icon ("Learn more →" style).
 * NOT for bordered button-style actions (Shop / Give / Search header actions,
 * mobile drawer Shop/Give buttons, footer region selector — those keep main.css
 * styling without typography override).
 * Example:
 *   <a class="partner-main-cta cta_text">Become a Partner <svg>arrow</svg></a>
 */
.cta_text,
.view-more {
    display: flex;
    align-items: center;
    gap: 18px;
    color: var(--black-700, #151515);
    font-family: 'Mulish', system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(15px, 0.7911392405vw + 8.9240506329px, 20px);
    text-decoration: none;
    transition: transform .3s ease;
}
.cta_text span, .view-more span { white-space: nowrap; }
.cta_text svg,  .view-more svg  { width: 21px; height: 15px; }
.cta_text:hover, .view-more:hover { transform: translateX(4px); }

/* Inverse colour for CTAs sitting on a dark hero background.
 * Arrow SVG inherits via fill="currentColor". */
.hero__cta-link.cta_text { color: #ffffff; }

/* Inline subscript-style suffix inside post titles, e.g. "<span class='sub'>(часть 1)</span>". */
.kcm-post-title .sub {
    font-size: .85em;
    opacity: .7;
    font-weight: 400;
    margin-left: .25em;
}


/* ─── Per-element font overrides (rely on main.css for layout/sizing) ──── */

/* Resource card label (renamed from .kcm-resource-title — drops kcm- prefix).
 * Replicates the original uppercase label from main.css with Mulish. */
.resource-title {
    text-align: center;
    font-family: 'Manrope', system-ui, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: clamp(10px, 0.3vw + 11px, 16px);
    color: #151515;
    margin: 0;
}

/* Font-only overrides — sizing/colour stay from main.css */
.kcm-find-resource-description,
.kcm-explore-link,
.article-card .article-title a, .article-card .article-title .article-link, .article-read-more,
.hero-main__lead,
.kcm-mega-nav-link, .kcm-topics-nav .kcm-nav-link  {
    font-family: 'Mulish', system-ui, sans-serif;
}
.article-card .article-excerpt {
    font-family: 'Mulish', system-ui, sans-serif;
    font-size: clamp(12px, 1.2658227848vw + 2.2784810127px, 17px);
}
.kcm-post-title {
    font-family: 'Manrope', system-ui, sans-serif;
}
.kcm-find-resource-description {
    max-width: 320px;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * SECTION TYPOGRAPHY UTILITIES
 * Generic classes that consolidate duplicated per-section rules from main.css.
 *
 * Migration pattern:
 *   <h2 class="partner-main-title__00 section-main-title section-main-title--md">
 *
 * The "__00" suffix marks the legacy themed class as deprecated (no longer
 * matches any CSS rule). The generic .section-* class supplies the typography.
 *
 * On NEW pages: use only the generic class — no themed class needed.
 *   <h2 class="section-main-title">My title</h2>
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Big display heading (h2) — Group 1.
 * Was: .partner-main-title, .partner-benefits-title, .partner-spirit-title,
 *      .kcm-giving-title, .kcm-testimonies-title, .kcm-partner-intro-title,
 *      .kcm-trending-title, .kcm-find-resource-heading. */
.section-main-title {
    font-family: 'Cormorant Garamond', Georgia, "Times New Roman", serif;
    font-weight: 400;
    line-height: 1.1;
    color: #151515;
    margin: 0;
    font-size: clamp(36px, 3.5vw + 12px, 80px);
}
.section-main-title--lg { font-size: clamp(47px, 3.5vw + 18px, 80px); }
.section-main-title--md { font-size: clamp(36px, 2.5vw + 18px, 61px); }
.section-main-title--sm { font-size: clamp(27px, 1.5vw + 18px, 47px); }

/* Section subtitle (h3) — Group 4.
 * Was: .partner-benefits-subtitle, .kcm-benefit-title. */
.section-main-subtitle {
    font-family: 'Cormorant Garamond', Georgia, "Times New Roman", serif;
    font-weight: 400;
    line-height: 1.15;
    color: #151515;
    margin: 0;
    font-size: clamp(27px, 1.5vw + 18px, 47px);
}

/* Card title (h4) — Group 5.
 * Was: .benefit-title, .kcm-giving-card-title, .kcm-post-title. */
.section-card-title {
    font-family: 'Cormorant Garamond', Georgia, "Times New Roman", serif;
    font-weight: 500;
    line-height: 1.2;
    color: #151515;
    margin: 0;
    font-size: clamp(20px, 1vw + 14px, 26px);
}
.section-card-title--uppercase {
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.05em;
}

/* Body text (div/p wrapping editorial paragraphs) — Group 2.
 * Was: .partner-main-text, .kcm-partner-intro-text,
 *      .kcm-find-resource-description, .kcm-testimonies-description. */
.section-main-text {
    font-family: 'Mulish', system-ui, sans-serif;
    font-weight: 400;
    line-height: 1.5;
    color: #151515;
    font-size: clamp(15px, 0.5vw + 13px, 18px);
}
.section-main-text--lead {
    font-size: clamp(16px, 1vw + 12px, 20px);
}

/* Uppercase eyebrow / section label — Group 3.
 * Was: .kcm-section-label, .kcm-giving-label, .kcm-resource-title. */
.section-main-label {
    font-family: 'Mulish', system-ui, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    color: #151515;
    letter-spacing: 0.15em;
    font-size: clamp(10px, 0.3vw + 9px, 14px);
    line-height: 1.2;
}


/* ─── Footer typography ─────────────────────────────────────────────────────
 * main.css sets --font-family-sans: inter-variable on many elements.
 * All rules below explicitly override inter-variable for every footer element.
 *
 * Nunito           → navigation / UI controls (section toggles, region selector)
 * Cormorant Garamond → editorial h4 phrases, modal heading
 * Mulish           → body text, links, legal, copyright, CTAs
 */

/* ── Mulish: body text, links, legal, copyright ──────────────────────────── */
.kcm-footer-mission,
.kcm-footer-links a,
.kcm-footer-links li,
.kcm-footer-legal-links a,
.kcm-footer-legal-note,
.kcm-footer-copyright,
.kcm-footer-copyright p {
    font-family: 'Mulish', system-ui, sans-serif;
}

.kcm-footer-copyright a {
    color: inherit;
    text-decoration: none;
}

/* CTA links: "Subscribe for Daily Devotionals", "Submit Testimony", etc. */
.kcm-devotional-link,
.kcm-devotional-link span {
    font-family: 'Mulish', system-ui, sans-serif;
    font-weight: 700;
}

/* ── Nunito: navigation section toggles + region selector UI ─────────────── */
.kcm-footer-heading,
.kcm-footer-heading span {
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 700;
}

.kcm-footer-region__label,
.kcm-footer-region__button,
.kcm-footer-region__text,
.kcm-footer-region__dropdown li {
    font-family: 'Nunito', system-ui, sans-serif;
}

/* ── Cormorant Garamond: editorial h4 phrases + modal heading ────────────── */
.kcm-footer-heading-static {
    font-family: 'Cormorant Garamond', Georgia, "Times New Roman", serif;
    font-weight: 400;
}

.kcm-devotional-modal__title {
    font-family: 'Cormorant Garamond', Georgia, "Times New Roman", serif;
    font-weight: 400;
}