/* ============================================================
   CONNECTX — GLOBAL TYPOGRAPHY SYSTEM v2
   Single source of truth: matches Index (home) page exactly.
   Loaded globally via layout/app.blade.php — last in stack.

   PHILOSOPHY:
   • Apply Manrope font universally (no !important wars needed)
   • Apply heading sizes only to genuine page headings,
     not every h2/h3 regardless of context
   • Use targeted classes for section titles and card titles
   • Responsive scaling mirrors Index page breakpoints
   ============================================================ */

/* ── 1. Font Foundation ──────────────────────────────────── */
html, body,
h1, h2, h3, h4, h5, h6,
p, span, a, li, label,
input, select, textarea, button,
div, section, article, header, footer, nav,
::placeholder {
    font-family: 'Manrope', sans-serif !important;
}

/* ── 2. Body Base ────────────────────────────────────────── */
body {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    color: #232323;
}

/* ── 3. Hero H1 — Page-level title ──────────────────────── */
/* Applied to genuine hero headings — uses clamp for fluid scaling */
h1 {
    font-size: clamp(36px, 5vw, 60px);
    font-weight: 900 !important;
    line-height: 1.15 !important;
    letter-spacing: -2px !important;
}

/* Partner page hero h1 has an explicit 50px override — align it */
.partner-content h1 {
    font-size: clamp(32px, 4.5vw, 52px) !important;
    font-weight: 900 !important;
    letter-spacing: -2px !important;
    line-height: 1.15 !important;
    color: #0c3a30 !important;
}

/* Events page custom hero headline — keep its gradient but align weight */
.text-glow-headline {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    letter-spacing: -3px !important;
}

/* Contact page hero heading */
.inner-banner-one .hero-heading,
.hero-heading {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    letter-spacing: -2px !important;
}

/* ── 4. Section / Page H2 — Large section headings ──────── */
/* These are primary section headings, like on the index page */
.sec-title,
.cx-main-heading,
.hcw-heading,
.founder-title,
.how-work-main-heading,
.main-title,
.connectx-partnership-section h2.main-title {
    font-family: 'Manrope', sans-serif !important;
    font-size: clamp(34px, 4vw, 56px) !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    letter-spacing: -2px !important;
    color: #0c3a30;
}

/* Generic h2 — apply strong but not "section hero" sizing.
   Let page-specific CSS still control h2s in card/form contexts. */
h2 {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
}

/* About page section titles */
.founder-section .section-title,
.cta-section .section-title {
    color: #ffffff;
}

.hcw-heading {
    color: #ffffff;
}

/* ── 5. H3 ───────────────────────────────────────────────── */
h3 {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.3px !important;
}

/* ── 6. H4 ───────────────────────────────────────────────── */
h4 {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.2px !important;
}

/* ── 7. H5 ───────────────────────────────────────────────── */
h5 {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

/* ── 8. H6 ───────────────────────────────────────────────── */
h6 {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

/* ── 9. Paragraphs & Body Text ───────────────────────────── */
p {
    font-family: 'Manrope', sans-serif !important;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.85;
}

/* Section description paragraphs — exactly as Index page */
.sec-desc,
.hero-desc,
.hcw-step-desc,
p.hero-copy,
.cta-tagline,
.body-text,
.fs-brand-desc p,
.partner-content p,
.connectx-expand-section .text-lg,
.how-works-p-desc {
    font-family: 'Manrope', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.85 !important;
    color: #6b7280;
}

/* Dark background paragraphs keep inherited colour */
.hero p,
.founder-section p,
.cta-section p,
.hcw-wrapper p,
.premium-hero-container p,
.partner-content p {
    color: inherit;
}

/* ── 10. Section / Card Titles ───────────────────────────── */
/* H3-level card titles */
.cx-premium-title {
    font-family: 'Manrope', sans-serif !important;
    font-size: 24px !important;
    font-weight: 500 !important;
    letter-spacing: -0.2px !important;
    line-height: 1.3 !important;
}

/* How-works step titles */
.hcw-step-title,
.how-works-h4 {
    font-family: 'Manrope', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.1px !important;
}

/* Partner card names */
.p-name {
    font-family: 'Manrope', sans-serif !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

/* ── 11. Eyebrow / Label Text ────────────────────────────── */
.eyebrow,
.partner-tag,
.p-cat,
.fs-events-label,
.cx-tagline {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    line-height: 1.4 !important;
}

/* Events filter label */
.filter-strip-wrapper span {
    font-family: 'Manrope', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
}

/* ── 12. Buttons ─────────────────────────────────────────── */
button,
.btn,
.btn-main,
.btn-hero-primary,
.btn-hero-outline,
.btn-join,
.fs-website-btn,
.partner-submit-btn,
.cta-btn,
.about-btn-1,
.about-btn-2,
.btn-four,
[class*="btn-"],
input[type="submit"],
input[type="button"] {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
    line-height: 1.4 !important;
}

/* Hero buttons keep their larger size */
.btn-hero-primary,
.btn-hero-outline {
    font-size: 15px !important;
    font-weight: 800 !important;
}

/* Header / join button */
.btn-join,
.fs-website-btn {
    font-size: 13px !important;
    font-weight: 800 !important;
}

/* Submit / form buttons */
.partner-submit-btn {
    font-size: 16px !important;
    font-weight: 700 !important;
}

/* Contact form send button */
.btn-four {
    font-size: 15px !important;
    font-weight: 700 !important;
}

/* Navigation pill buttons on events page */
.custom-pill-nav .nav-link-item {
    font-family: 'Manrope', sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
}

/* ── 13. Form Labels & Inputs ────────────────────────────── */
label,
.form-label {
    font-family: 'Manrope', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    color: #232323;
}

input,
select,
textarea,
.form-control,
.form-select {
    font-family: 'Manrope', sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #232323;
}

input::placeholder,
textarea::placeholder,
select::placeholder {
    font-family: 'Manrope', sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #9ca3af;
}

/* ── 14. Navigation ──────────────────────────────────────── */
.fs-nav-name {
    font-family: 'Manrope', sans-serif !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px !important;
}

.fs-nav-num {
    font-family: 'Manrope', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}

.logo-text .main {
    font-family: 'Manrope', sans-serif !important;
    font-size: 15px !important;
    font-weight: 900 !important;
}

.logo-text .sub {
    font-family: 'Manrope', sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
}

/* ── 15. Footer ──────────────────────────────────────────── */
.footer-title {
    font-family: 'Manrope', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: -0.2px !important;
    line-height: 1.3 !important;
    color: #232323;
}

.footer-nav-link a {
    font-family: 'Manrope', sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.75 !important;
}

.footer-copyright-bar {
    font-family: 'Manrope', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.3px !important;
}

/* ── 16. Marquee ─────────────────────────────────────────── */
.mq-item {
    font-family: 'Manrope', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
}

/* ── 17. Blog / Event Card Text ──────────────────────────── */
.blog-title h4,
.post-data h4 {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.3px !important;
}

/* Event card titles on events page */
.ux-curated-card h3.h5 {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    color: #0c3a30 !important;
}

/* Event card meta text */
.glass-badge-tag {
    font-family: 'Manrope', sans-serif !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
}

/* ── 18. About-Us page specifics ─────────────────────────── */
.founder-quote {
    font-family: 'Manrope', sans-serif !important;
    font-size: clamp(1.2rem, 2.2vw, 1.75rem) !important;
    font-style: italic !important;
    font-weight: 500 !important;
    line-height: 1.65 !important;
}

.section-label {
    font-family: 'Manrope', sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
}

/* Vision/Mission section title  */
.vm-block .section-title {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 900 !important;
    letter-spacing: -1.5px !important;
    line-height: 1.05 !important;
}

/* ── 19. About-us Pills (CTA section) ───────────────────── */
.cta-section .pill,
.about-us-page .pill {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 600 !important;
}

/* ── 20. Responsive Scaling ──────────────────────────────── */
@media (max-width: 991px) {
    h1 {
        letter-spacing: -1.5px !important;
    }
    .sec-title,
    .cx-main-heading,
    .hcw-heading,
    .founder-title,
    .main-title {
        letter-spacing: -1.5px !important;
    }
    .fs-nav-name {
        font-size: 17px !important;
    }
}

@media (max-width: 767px) {
    h1 {
        font-size: clamp(28px, 8vw, 44px) !important;
        letter-spacing: -1px !important;
    }
    .sec-title,
    .cx-main-heading,
    .hcw-heading,
    .founder-title,
    .main-title,
    .how-work-main-heading {
        font-size: clamp(26px, 7vw, 38px) !important;
        letter-spacing: -1px !important;
    }
    p,
    .sec-desc,
    .hero-desc,
    .body-text,
    p.hero-copy,
    .partner-content p {
        font-size: 15px !important;
        line-height: 1.8 !important;
    }
    .fs-nav-name {
        font-size: 18px !important;
    }
    .footer-title {
        font-size: 16px !important;
    }
    .footer-nav-link a {
        font-size: 14px !important;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: clamp(24px, 7vw, 34px) !important;
        letter-spacing: -0.5px !important;
    }
    .sec-title,
    .cx-main-heading,
    .hcw-heading,
    .founder-title,
    .main-title {
        font-size: clamp(22px, 6vw, 30px) !important;
        letter-spacing: -0.5px !important;
    }
    p,
    .sec-desc,
    .hero-desc,
    .body-text {
        font-size: 14px !important;
    }
    .footer-nav-link a {
        font-size: 13px !important;
    }
    .footer-copyright-bar {
        font-size: 12px !important;
    }
}