/**
 * Public site typography & design tokens
 * Edit fonts and sizes here — other public CSS files use var(...) from :root.
 *
 * Title → Lora | Body → Spectral (loaded in _Layout.cshtml)
 */

:root {
    --font-title: "Lora", Georgia, "Times New Roman", serif;
    --font-display: "Test Tiempos Headline", "Tiempos Headline", Georgia, "Times New Roman", serif;
    /*    --font-body: "Spectral", Georgia, "Times New Roman", serif;
    --font-title: "Poppins", system-ui, sans-serif;*/
    --font-body: "DM Sans", system-ui, sans-serif;
    --public-body-size: 1rem;
    --public-body-leading: 1.5625;
    --public-nav-size: 1rem;
    --public-h1-size: 2.8125rem;
    --public-h1-leading: 3.375rem;
    --public-h2-size: clamp(2rem, 4vw, 2.75rem);
    --public-h3-size: clamp(1.75rem, 3vw, 2.25rem);
    --public-h4-size: 1.625rem;
    --public-h5-size: 1.375rem;
    --public-h6-size: 1.125rem;
    /* Brand colors */
    --jm-color-accent: #bc4527;
    --jm-color-accent-rgb: 188, 69, 39;
    --jm-color-earth: #2D251E;
    --jm-color-text: #333333;
    --jm-color-text-muted: #555555;
    --jm-color-text-soft: #5A524A;
    --jm-color-text-subtle: #7A726A;
    --jm-color-text-warm: #4A423A;
    --jm-color-stat-label: #6E6560;
    --jm-color-orange: #f7941e;
    --jm-color-orange-light: #f9a84d;
    --jm-color-orange-hover: #e35216;
    --jm-color-orange-dark: #be3a0e;
    --jm-color-orange-quote: #c46d46;
    --jm-color-white: #FFFFFF;
    --jm-color-ivory: #FFF9EF;
    --jm-color-grey: #414042;
    --jm-color-lightbrown: #C29D8B;
    --jm-color-cream: #FDF7EE;
    --jm-color-cream-alt: #F5EFEB;
    --jm-color-sand: #F4EBE1;
    --jm-color-sand-hover: #E6DBD0;
    --jm-color-sand-card: #EDE4D7;
    --jm-color-border: #D6CEC4;
    --jm-color-border-light: #F5F0EA;
    --jm-color-border-neutral: #EAEAEA;
    --jm-color-border-gray: #CCCCCC;
    --jm-color-border-dark: #A0A0A0;
    --jm-color-surface-muted: #F9F9F9;
    --jm-color-olive: #556B43;
    --jm-color-olive-text: #FDF7EE;
    --jm-color-olive-eyebrow: #D6CEC4;
    --jm-color-glossary-term: #E6A15C;
    --jm-color-glossary-desc: #E2DDD5;
    --jm-color-connect-bg: #0D0806;
    --jm-color-connect-text: #F5EFEB;
    --jm-color-connect-muted: #A89F9A;
    --jm-color-connect-desc: #D6CFCB;
    --jm-color-connect-border: #3A312C;
    --jm-color-connect-gold: #EBB04D;
    --jm-color-connect-gold-hover: #D69E3F;
    --jm-color-connect-btn-text: #140D0A;
    --jm-color-on-dark: #FFFFFF;
    --jm-color-on-dark-muted: rgba(255, 255, 255, 0.7);
    --jm-color-on-dark-soft: rgba(255, 255, 255, 0.9);
    /* Typography scale */
    --jm-text-eyebrow: 0.75rem;
    --jm-text-eyebrow-sm: 0.65rem;
    --jm-text-eyebrow-lg: 0.8rem;
    --jm-text-eyebrow-hero: 0.68rem;
    --jm-text-label: 0.7rem;
    --jm-text-caption: 0.85rem;
    --jm-text-small: 0.8rem;
    --jm-text-btn: 0.78rem;
    --jm-text-btn-sm: 0.72rem;
    --jm-text-lead: 1.05rem;
    --jm-text-lead-lg: 1.1rem;
    --jm-text-body-sm: 0.88rem;
    --jm-text-body-xs: 0.95rem;
    --jm-text-quote: 1.15rem;
    --jm-text-stat: 2.5rem;
    --jm-text-card-title: 1.25rem;
    --jm-text-section-title: 1.35rem;
    --jm-text-season-title: 1.5rem;
    --jm-text-glossary-title: 1.6rem;
    --jm-text-hero-title: calc(2.8rem + 2.5vw);
    --jm-tracking-eyebrow: 0.15em;
    --jm-tracking-eyebrow-wide: 0.2em;
    --jm-tracking-eyebrow-tight: 0.12em;
    --jm-tracking-eyebrow-hero: 0.16em;
    --jm-tracking-label: 0.1em;
    --jm-tracking-btn: 0.08em;
    --jm-tracking-btn-wide: 0.1em;
    --jm-tracking-btn-wider: 0.12em;
    --jm-tracking-tight: 0.05em;
    --jm-weight-normal: 400;
    --jm-weight-medium: 500;
    --jm-weight-semibold: 600;
    --jm-weight-bold: 700;
    --jm-leading-tight: 1.15;
    --jm-leading-snug: 1.4;
    --jm-leading-normal: 1.5;
    --jm-leading-relaxed: 1.6;
    --jm-leading-loose: 1.65;
    /* Layout */
    --jm-section-padding: 80px;
    --jm-section-padding-lg: 90px;
    --jm-section-padding-xl: 100px;
    --jm-section-padding-hero: 120px;
    --jm-radius-sm: 6px;
    --jm-radius-md: 8px;
    --jm-radius-lg: 12px;
    --jm-radius-pill: 999px;
    --jm-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.02);
    --jm-shadow-soft: 0 4px 15px rgba(0, 0, 0, 0.05);
    --jm-shadow-badge: 0 2px 4px rgba(0, 0, 0, 0.02);
    --jm-gradient-light: linear-gradient(to bottom, var(--jm-color-white) 0%, var(--jm-color-cream) 100%);
    --jm-gradient-warm: linear-gradient(to bottom, var(--jm-color-white) 0%, var(--jm-color-cream-alt) 100%);
    --jm-gradient-hero: linear-gradient( to bottom, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 25%, rgba(var(--jm-color-accent-rgb), 0.2) 50%, rgba(var(--jm-color-accent-rgb), 0.8) 80%, rgba(var(--jm-color-accent-rgb), 1) 100% );
}

/* Prevent trackpad/mouse "overscroll bounce" past the end of the page. */
html {
    overscroll-behavior-y: none;
}

body.public-site {
    /* Prevent the browser's automatic dark-theme heuristic from re-tinting
       near-black text/backgrounds (e.g. #212529 rendering as blue-grey). */
    color-scheme: light;
    font-family: var(--font-body);
    font-size: var(--public-body-size);
    line-height: var(--public-body-leading);
}

    body.public-site p,
    body.public-site li {
        font-size: inherit;
        line-height: var(--public-body-leading);
    }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.font-title {
    font-family: var(--font-title);
    font-weight: 600;
}

body.public-site h1,
body.public-site .h1,
body.public-site .cms-section h1,
body.public-site .cms-page-detail-body h1,
body.public-site .cms-rich-text h1 {
    font-size: var(--public-h1-size);
    line-height: var(--public-h1-leading);
}

body.public-site h2,
body.public-site .h2,
body.public-site .cms-section h2,
body.public-site .cms-page-detail-body h2,
body.public-site .cms-rich-text h2 {
    font-size: var(--public-h2-size);
    line-height: 1.2;
}

/* Section display titles (h1 + h2.display-4/5). Must follow the h2 block
   so this size wins over --public-h2-size / Bootstrap .display-*. */
body.public-site h1,
body.public-site h1.display-4,
body.public-site h1.display-5,
body.public-site h2.display-4,
body.public-site h2.display-5,
body.public-site .h1,
body.public-site .display-4,
body.public-site .display-5,
body.public-site .cms-section h1,
body.public-site .cms-section h2.display-4,
body.public-site .cms-section h2.display-5,
body.public-site .public-cms-section--hero h1,
body.public-site .cms-page-detail-body h1,
body.public-site .cms-rich-text h1 {
    font-family: var(--font-display);
    font-size: var(--public-h1-size);
    line-height: var(--public-h1-leading);
}

body.public-site h3,
body.public-site .h3,
body.public-site .cms-section h3,
body.public-site .cms-page-detail-body h3,
body.public-site .cms-rich-text h3 {
    font-size: var(--public-h3-size);
    line-height: 1.25;
}

body.public-site h4,
body.public-site .h4,
body.public-site .cms-section h4,
body.public-site .cms-page-detail-body h4,
body.public-site .cms-rich-text h4 {
    font-size: var(--public-h4-size);
    line-height: 1.3;
}

body.public-site h5,
body.public-site .h5,
body.public-site .cms-section h5,
body.public-site .cms-page-detail-body h5,
body.public-site .cms-rich-text h5 {
    font-size: var(--public-h5-size);
    line-height: 1.35;
}

body.public-site h6,
body.public-site .h6,
body.public-site .cms-section h6,
body.public-site .cms-page-detail-body h6,
body.public-site .cms-rich-text h6 {
    font-size: var(--public-h6-size);
    line-height: 1.4;
}

.cms-section h1, .cms-section h2, .cms-section h3, .cms-section h4, .cms-section h5, .cms-section h6,
[class^="cms-hero"] h1, [class^="cms-section"] h1, [class^="cms-section"] h2,
[class^="cms-research"] h1, [class^="cms-oral"] h1, [class^="cms-calendar"] h1,
[class^="cms-living"] h1, [class^="cms-connect"] h1, [class^="cms-split"] h1, [class^="cms-ar-"] h1,
.cms-page-detail-body h1, .cms-page-detail-body h2, .cms-page-detail-body h3,
.cms-page-detail-body h4, .cms-page-detail-body h5, .cms-page-detail-body h6,
.cms-rich-text h1, .cms-rich-text h2, .cms-rich-text h3,
.cms-rich-text h4, .cms-rich-text h5, .cms-rich-text h6 {
    font-family: var(--font-title);
}

.cms-page-detail-body, .cms-rich-text, .cms-section,
[class^="cms-hero"], [class^="cms-section"], [class^="cms-research"],
[class^="cms-oral"], [class^="cms-calendar"], [class^="cms-living"],
[class^="cms-connect"], [class^="cms-split"], [class^="cms-ar-"] {
    font-family: var(--font-body);
}

    .cms-page-detail-body p, .cms-rich-text p {
        margin-bottom: 0;
    }

    .cms-page-detail-body ul,
    .cms-page-detail-body ol,
    .cms-rich-text ul,
    .cms-rich-text ol {
        padding-left: 1.75rem;
        margin-bottom: 0;
        list-style: none;
    }

    .cms-page-detail-body li[data-list="bullet"],
    .cms-rich-text li[data-list="bullet"] {
        list-style-type: disc;
    }

    .cms-page-detail-body li[data-list="ordered"],
    .cms-rich-text li[data-list="ordered"] {
        list-style-type: decimal;
    }

    .cms-page-detail-body ul > li,
    .cms-rich-text ul > li {
        list-style-type: disc;
    }

    .cms-page-detail-body ol > li:not([data-list]),
    .cms-rich-text ol > li:not([data-list]) {
        list-style-type: decimal;
    }

    .cms-page-detail-body li,
    .cms-rich-text li {
        margin-bottom: 0;
    }

    .cms-page-detail-body a,
    .cms-rich-text a {
        color: var(--jm-color-accent);
        text-decoration: underline;
        text-underline-offset: 2px;
    }

        .cms-page-detail-body a:hover,
        .cms-rich-text a:hover {
            color: var(--jm-color-orange-dark);
        }

.public-header .navbar,
.public-header .nav-link {
    font-family: var(--font-body);
}

.text-color-nab {
    color: #bc4527 !important;
}

.bg-color-nab {
    background-color: #bc4527 !important;
}

.text-pem-grey {
    color: #414042 !important;
}

.text-ivory {
    color: var(--jm-color-ivory) !important;
}

.ls-1 {
    letter-spacing: 1px !important;
}

.ls-2 {
    letter-spacing: 2px !important;
}

.ls-3 {
    letter-spacing: 3px !important;
}

.ls-4 {
    letter-spacing: 4px !important;
}

.fs-16 {
    font-size: 16px !important;
}

.fs-24 {
    font-size: 24px !important;
}

.fs-14 {
    font-size: 14px !important;
}

.fs-12 {
    font-size: 12px !important;
}

.mb-60 {
    margin-bottom: 60px !important;
}

.bg-ivory {
    background-color: var(--jm-color-ivory) !important;
}