/**
 * Public site typography & design tokens
 * Edit fonts and sizes here — other public CSS files use var(...) from :root.
 *
 * Title → Space Grotesk (Google Fonts) | Body → Helvetica Neue (system font)
 */

/* ─── Space Grotesk via Google Fonts ─── */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

:root {
    --font-title: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-body:  "Helvetica Neue", Helvetica, Arial, sans-serif;
    --public-body-size: 1rem;
    --public-body-leading: 1.5625;
    --public-nav-size: 1rem;
    --public-h1-size: clamp(2.5rem, 5vw, 3.25rem);
    --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 */
    --fnfc-color-primary: #2D2E74;
    --fnfc-color-secondary: #231F20;
    --fnfc-color-accent: #00B3B5;
    --fnfc-color-accent-rgb: 0, 179, 181;
    --fnfc-color-earth: #2D251E;
    --fnfc-color-text: #333333;
    --fnfc-color-text-muted: #555555;
    --fnfc-color-text-soft: #5A524A;
    --fnfc-color-text-subtle: #7A726A;
    --fnfc-color-text-warm: #4A423A;
    --fnfc-color-stat-label: #6E6560;
    --fnfc-color-orange: #33C2C4;
    --fnfc-color-orange-light: #4DCCCE;
    --fnfc-color-orange-hover: #009A9C;
    --fnfc-color-orange-dark: #007A7B;
    --fnfc-color-orange-quote: #5BBCBD;
    --fnfc-color-white: #FFFFFF;
    --fnfc-color-ivory: #FFF9EF;
    --fnfc-color-grey: #414042;
    --fnfc-color-lightbrown: #C29D8B;
    --fnfc-color-cream: #FDF7EE;
    --fnfc-color-cream-alt: #F5EFEB;
    --fnfc-color-sand: #F4EBE1;
    --fnfc-color-sand-hover: #E6DBD0;
    --fnfc-color-sand-card: #EDE4D7;
    --fnfc-color-border: #D6CEC4;
    --fnfc-color-border-light: #F5F0EA;
    --fnfc-color-border-neutral: #EAEAEA;
    --fnfc-color-border-gray: #CCCCCC;
    --fnfc-color-border-dark: #A0A0A0;
    --fnfc-color-surface-muted: #F9F9F9;
    --fnfc-color-olive: #556B43;
    --fnfc-color-olive-text: #FDF7EE;
    --fnfc-color-olive-eyebrow: #D6CEC4;
    --fnfc-color-glossary-term: #E6A15C;
    --fnfc-color-glossary-desc: #E2DDD5;
    --fnfc-color-connect-bg: #0D0806;
    --fnfc-color-connect-text: #F5EFEB;
    --fnfc-color-connect-muted: #A89F9A;
    --fnfc-color-connect-desc: #D6CFCB;
    --fnfc-color-connect-border: #3A312C;
    --fnfc-color-connect-gold: #EBB04D;
    --fnfc-color-connect-gold-hover: #D69E3F;
    --fnfc-color-connect-btn-text: #140D0A;
    --fnfc-color-on-dark: #FFFFFF;
    --fnfc-color-on-dark-muted: rgba(255, 255, 255, 0.7);
    --fnfc-color-on-dark-soft: rgba(255, 255, 255, 0.9);
    /* Typography scale */
    --fnfc-text-eyebrow: 0.75rem;
    --fnfc-text-eyebrow-sm: 0.65rem;
    --fnfc-text-eyebrow-lg: 0.8rem;
    --fnfc-text-eyebrow-hero: 0.68rem;
    --fnfc-text-label: 0.7rem;
    --fnfc-text-caption: 0.85rem;
    --fnfc-text-small: 0.8rem;
    --fnfc-text-btn: 0.78rem;
    --fnfc-text-btn-sm: 0.72rem;
    --fnfc-text-lead: 1.05rem;
    --fnfc-text-lead-lg: 1.1rem;
    --fnfc-text-body-sm: 0.88rem;
    --fnfc-text-body-xs: 0.95rem;
    --fnfc-text-quote: 1.15rem;
    --fnfc-text-stat: 2.5rem;
    --fnfc-text-card-title: 1.25rem;
    --fnfc-text-section-title: 1.35rem;
    --fnfc-text-season-title: 1.5rem;
    --fnfc-text-glossary-title: 1.6rem;
    --fnfc-text-hero-title: calc(2.8rem + 2.5vw);
    --fnfc-tracking-eyebrow: 0.15em;
    --fnfc-tracking-eyebrow-wide: 0.2em;
    --fnfc-tracking-eyebrow-tight: 0.12em;
    --fnfc-tracking-eyebrow-hero: 0.16em;
    --fnfc-tracking-label: 0.1em;
    --fnfc-tracking-btn: 0.08em;
    --fnfc-tracking-btn-wide: 0.1em;
    --fnfc-tracking-btn-wider: 0.12em;
    --fnfc-tracking-tight: 0.05em;
    --fnfc-weight-normal: 400;
    --fnfc-weight-medium: 500;
    --fnfc-weight-semibold: 600;
    --fnfc-weight-bold: 700;
    --fnfc-leading-tight: 1.15;
    --fnfc-leading-snug: 1.4;
    --fnfc-leading-normal: 1.5;
    --fnfc-leading-relaxed: 1.6;
    --fnfc-leading-loose: 1.65;
    /* Layout */
    --fnfc-section-padding: 80px;
    --fnfc-section-padding-lg: 90px;
    --fnfc-section-padding-xl: 100px;
    --fnfc-section-padding-hero: 120px;
    --fnfc-radius-sm: 6px;
    --fnfc-radius-md: 8px;
    --fnfc-radius-lg: 12px;
    --fnfc-radius-pill: 999px;
    --fnfc-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.02);
    --fnfc-shadow-soft: 0 4px 15px rgba(0, 0, 0, 0.05);
    --fnfc-shadow-badge: 0 2px 4px rgba(0, 0, 0, 0.02);
    --fnfc-gradient-light: linear-gradient(to bottom, var(--fnfc-color-white) 0%, var(--fnfc-color-cream) 100%);
    --fnfc-gradient-warm: linear-gradient(to bottom, var(--fnfc-color-white) 0%, var(--fnfc-color-cream-alt) 100%);
    --fnfc-gradient-hero: linear-gradient( to bottom, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 25%, rgba(var(--fnfc-color-accent-rgb), 0.2) 50%, rgba(var(--fnfc-color-accent-rgb), 0.8) 80%, rgba(var(--fnfc-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: 500;
}

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: 1.15;
}

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;
}

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;
}

/* Richtext from the CMS editor — article scale, not page-title scale */
body.public-site .cms-desc h1,
body.public-site .cms-desc h2,
body.public-site .cms-desc h3,
body.public-site .cms-desc h4,
body.public-site .cms-desc h5,
body.public-site .cms-desc h6 {
    font-family: var(--font-title);
    font-weight: 500;
    color: var(--fnfc-color-secondary);
    margin: 1.25rem 0 0.5rem;
}

body.public-site .cms-desc h1:first-child,
body.public-site .cms-desc h2:first-child,
body.public-site .cms-desc h3:first-child,
body.public-site .cms-desc h4:first-child,
body.public-site .cms-desc h5:first-child,
body.public-site .cms-desc h6:first-child {
    margin-top: 0;
}

body.public-site .cms-desc h1 { font-size: 2rem; line-height: 1.2; }
body.public-site .cms-desc h2 { font-size: 1.5rem; line-height: 1.25; }
body.public-site .cms-desc h3 { font-size: 1.25rem; line-height: 1.3; }
body.public-site .cms-desc h4 { font-size: 1.125rem; line-height: 1.35; }
body.public-site .cms-desc h5 { font-size: 1rem; line-height: 1.4; }
body.public-site .cms-desc h6 { font-size: 0.9375rem; line-height: 1.4; }

body.public-site .cms-desc p,
body.public-site .cms-desc li {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: var(--public-body-leading);
}

.cms-section h1, .cms-section h2, .cms-section h3, .cms-section h4, .cms-section h5, .cms-section h6,
[class^="cms-hero"] h1,
[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-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(--fnfc-color-accent);
        text-decoration: underline;
        text-underline-offset: 2px;
    }

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

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

.text-color-nab {
    color: var(--fnfc-color-accent) !important;
}

.bg-color-nab {
    background-color: var(--fnfc-color-accent) !important;
}

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

.text-ivory {
    color: var(--fnfc-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(--fnfc-color-ivory) !important;
}

.cms-desc p {
    margin-top: 0;
    margin-bottom: 1rem;
}

.cms-desc--plain {
    white-space: pre-line;
}

.cms-desc p:last-child {
    margin-bottom: 0;
}

/* Paragraf kosong dari editor → zero height */
.cms-desc p:empty:not(:has(img)),
.cms-desc p:has(> br:only-child):not(:has(img)) {
    margin: 0;
    padding: 0;
    font-size: 0;
    line-height: 0;
    height: 0;
}

.cms-desc ul,
.cms-desc ol {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
    list-style: none;
}

.cms-desc li {
    margin-bottom: 0.25rem;
}

/* Quill stores bullets and numbers both as <ol>; type is on li[data-list]. */
body.public-site .cms-desc li[data-list="bullet"] {
    list-style-type: disc;
}

body.public-site .cms-desc li[data-list="ordered"] {
    list-style-type: decimal;
}

body.public-site .cms-desc ul > li {
    list-style-type: disc;
}

body.public-site .cms-desc ol > li:not([data-list]) {
    list-style-type: decimal;
}

.cms-desc p:has(> img),
.cms-rich-text p:has(> img),
.cms-page-detail-body p:has(> img) {
    overflow: auto;
}

.cms-desc img,
.cms-rich-text img,
.cms-page-detail-body img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0.75rem 0;
}

.cms-desc img[data-align="left"],
.cms-rich-text img[data-align="left"],
.cms-page-detail-body img[data-align="left"] {
    margin-left: 0;
    margin-right: auto;
}

.cms-desc img[data-align="right"],
.cms-rich-text img[data-align="right"],
.cms-page-detail-body img[data-align="right"] {
    margin-left: auto;
    margin-right: 0;
}

.cms-desc img[data-align="center"],
.cms-rich-text img[data-align="center"],
.cms-page-detail-body img[data-align="center"] {
    margin-left: auto;
    margin-right: auto;
}

/* ─── Color utilities ─── */
.text-orange      { color: #CE6838 !important; }
.bg-orange        { background-color: #CE6838 !important; }

.text-muted-light { color: #F7F3E8 !important; }
.bg-muted-light   { background-color: #F7F3E8 !important; }

/* ─── Font family utilities ─── */
.font-title  { font-family: var(--font-title) !important; }  /* Space Grotesk */
.font-body   { font-family: var(--font-body)  !important; }  /* Helvetica Neue */

/* ─── Font weight utilities (alias lebih eksplisit) ─── */
.fw-light    { font-weight: 300 !important; }
.fw-regular  { font-weight: 400 !important; }
.fw-medium   { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-bold     { font-weight: 700 !important; }