/* fuji-base.css — Design tokens, resets, global typography, page-banner, breadcrumb, section-heading */
/* =============================================================================
   DESIGN TOKENS — edit these variables to retheme the entire site
   ============================================================================= */
:root {
    /* --- Brand blues --- */
    --color-primary: #004098;
    --color-primary-dark: #002d6b;
    --color-primary-mid: #3265af;
    --color-primary-light: #e8f0fb;
    --color-primary-subtle: color-mix(in srgb, var(--color-primary) 35%, transparent);
    --color-primary-link: #215094;
    /* --- Neutral gray scale --- */
    --color-gray-100: #f8f9fa;
    --color-gray-200: #e9ecef;
    --color-gray-300: #dee2e6;
    --color-gray-400: #ced4da;
    --color-gray-500: #adb5bd;
    --color-gray-600: #6c757d;
    --color-gray-700: #495057;
    --color-gray-900: #212529;
    /* --- Surface colors --- */
    --color-surface: #ffffff;
    --color-surface-raised: #f8f9fa;
    --color-surface-sunken: #e9ecef;
    /* --- UI background variants (site-specific; not in Bootstrap gray scale) --- */
    --color-bg-light: var(--color-surface-raised); /* ≈ #fafafa — card & list backgrounds */
    --color-bg-section: #e5e5e5; /* section/thead/feature header tint */
    --color-bg-header: #cccccc; /* page-header banner fallback, table borders */
    /* --- Component-specific color tokens --- */
    --color-footer-text: #aaaaaa; /* subdued footer text; intentionally darker than gray-500 */
    --color-footer-text-hover: #dddddd; /* footer link hover; lighter than gray-300 */
    /* --- Status --- */
    --color-success: #198754;
    --color-warning: #cc7a00;
    --color-error: #b02a37;
    --color-error-text: #842029;
    --color-error-bg: #f8d7da;
    --color-error-border: #f5c2c7;
    --color-error-hover: #8c1f28;
    --color-info: #0d6efd;
    /* --- Typography — families --- */
    --font-body: 'Arimo', Arial, sans-serif;
    --font-heading: 'Michroma', 'Arial Narrow', sans-serif;
    /* --- Typography — scale (rem relative to 16px html root) --- */
    --text-xs: 0.75rem; /*  12px */
    --text-sm: 0.875rem; /*  14px */
    --text-base: 1rem; /*  16px */
    --text-lg: 1.125rem; /*  18px */
    --text-xl: 1.25rem; /*  20px */
    --text-2xl: 1.5rem; /*  24px */
    --text-3xl: 1.875rem; /*  30px */
    --text-4xl: 2.25rem; /*  36px */
    --text-5xl: 3rem; /*  48px */
    /* --- Typography — metrics --- */
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-loose: 1.75;
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-bold: 700;
    --tracking-tight: -0.01em;
    --tracking-normal: 0em;
    --tracking-wide: 0.05em;
    --tracking-wider: 0.1em;
    --tracking-widest: 0.2em;
    /* --- Spacing scale (base 4px) --- */
    --space-1: 0.25rem; /*  4px */
    --space-2: 0.5rem; /*  8px */
    --space-3: 0.75rem; /* 12px */
    --space-4: 1rem; /* 16px */
    --space-5: 1.25rem; /* 20px */
    --space-6: 1.5rem; /* 24px */
    --space-8: 2rem; /* 32px */
    --space-10: 2.5rem; /* 40px */
    --space-12: 3rem; /* 48px */
    --space-16: 4rem; /* 64px */
    --space-20: 5rem; /* 80px */
    /* --- Semantic spacing aliases --- */
    --section-gap: var(--space-16);
    --content-gap: var(--space-8);
    --component-gap: var(--space-4);
    --container-pad: var(--space-6);
    /* --- Border radius --- */
    --radius-none: 0;
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --radius-xl: 8px;
    --radius-pill: 9999px;
    /* --- Shadows --- */
    --shadow-none: none;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.10);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
    /* --- Layout --- */
    --container-max-width: 1200px;
    --content-max-width: 760px;
    /* --- Button tokens --- */
    --btn-padding-y: var(--space-2);
    --btn-padding-x: var(--space-6);
    --btn-padding-y-sm: var(--space-1);
    --btn-padding-x-sm: var(--space-3);
    --btn-font-size: var(--text-sm);
    --btn-font-weight: var(--weight-bold);
    --btn-radius: var(--radius-md);
    --btn-letter-spacing: var(--tracking-wide);
    --btn-transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
    /* --- Input tokens --- */
    --input-height: 2.5rem;
    --input-padding-y: var(--space-2);
    --input-padding-x: var(--space-3);
    --input-font-size: var(--text-base);
    --input-border: 1px solid var(--color-gray-300);
    --input-radius: var(--radius-sm);
    --input-bg: var(--color-surface);
    --input-bg-disabled: var(--color-surface-sunken);
    --input-color: var(--color-gray-900);
    --input-focus-border: var(--color-primary);
    --input-focus-shadow: 0 0 0 3px var(--color-primary-light);
    --label-font-size: var(--text-sm);
    --label-font-weight: var(--weight-medium);
    --label-color: var(--color-gray-900);
    --label-gap: var(--space-1);
}

/* ============================================================================= */

.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    z-index: 9999;
    padding: 0.5rem 1rem;
    background: var(--color-primary);
    color: var(--color-surface);
    font-weight: bold;
    text-decoration: none;
}

    .skip-link:focus {
        top: 0;
        outline: 3px solid var(--color-surface);
        outline-offset: 2px;
    }

/* ============================================================================= */

html, body, div, span, h1, h2, h3, h4, h5, h6, p, ol, ul, li, form {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-gray-900);
    background-color: var(--color-surface);
}


ol, ul {
    list-style: none;
}

a img {
    border: none;
}

a:visited img {
    border: none;
}

a, a:hover, a:visited, a:active {
    text-decoration: none;
    color: inherit;
    font-weight: inherit;
    font-style: inherit;
    font-size: inherit;
    font-family: inherit;
}

    a:hover {
        color: var(--color-gray-500);
        text-decoration: underline;
    }

.active-tab {
    background: var(--color-primary);
    border-radius: var(--radius-md);
}

/* Raise specificity above a:link (0,1,1) and .dropdown-toggle::after from fuji-header */
.nav-link.active-tab,
.nav-link.active-tab:link,
.nav-link.active-tab:visited,
.nav-link.active-tab:hover {
    color: white;
}

    .nav-link.active-tab::after {
        color: white;
    }

address {
    margin-bottom: 0;
    font-style: normal;
    line-height: inherit;
}

h1 {
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: var(--weight-normal);
}

h2 {
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: var(--weight-normal);
    line-height: var(--leading-normal);
    margin-top: var(--space-2);
}

h3 {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
}

h4 {
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    line-height: var(--leading-normal);
}

h5 {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    line-height: var(--leading-normal);
}

h6 {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    line-height: var(--leading-normal);
}

.p-body {
    font-size: var(--text-base);
    font-weight: var(--weight-normal);
    line-height: var(--leading-loose);
}

.bg-fuji {
    background-color: var(--color-bg-section);
}

.bg-fuji-light {
    background-color: var(--color-bg-light);
}

.bg-fuji-white {
    background-color: white;
}

.info-link {
    color: var(--color-primary-link);
    text-decoration: underline;
}

.info-link:hover {
    color: var(--color-primary);
}

.bold-title {
    font-weight: bold;
    line-height: 30px;
    letter-spacing: 1px;
}

.add-bottom-margin {
    margin-bottom: var(--space-4);
}

/* ── Content page body typography ───────────────────────────── */
#content .container p,
#content .container li {
    line-height: var(--leading-loose);
    color: var(--color-gray-900);
}

#content .container h2:not(.section-header):not(.section-subtitle) {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--color-gray-900);
    margin-top: 0;
    margin-bottom: var(--space-3);
}

#content .container h3 {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--color-gray-900);
}

.add-bottom-border {
    background-image: url(../imgs/Section-Header-Border.gif);
    background-position: bottom left;
    background-repeat: no-repeat;
}

/* ── Page banner ─────────────────────────────────────────────── */
.page-header {
    min-height: 80px;
    background-color: var(--color-bg-header);
    background-image: url(../imgs/Header-0.2.0.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-bottom: 1px solid var(--color-gray-300);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4) var(--space-8);
}

    .page-header + #content {
        margin-top: var(--space-6);
    }

        /* First .section-header immediately after the page banner already has the
   banner's own bottom padding for separation — cancel its top margin. */
        .page-header + #content > .container > .row:first-child .section-header,
        .page-header + #content > [class*="container"] > .row:first-child .section-header {
            margin-top: 0;
        }

    .page-header h1 {
        font-family: var(--font-heading);
        font-weight: var(--weight-medium);
        font-size: clamp(1.25rem, 3.5vw, 2.5rem);
        color: var(--color-gray-900);
        text-align: center;
        text-transform: uppercase;
        letter-spacing: var(--tracking-widest);
        line-height: var(--leading-tight);
        margin: 0;
    }

        /* Title-length variants — reduce letter-spacing for longer strings */
        .page-header h1.long-title {
            letter-spacing: var(--tracking-wider);
        }

        .page-header h1.extra-long-title {
            letter-spacing: var(--tracking-wide);
        }

        .page-header h1.squeeze {
            letter-spacing: var(--tracking-wider);
        }

    /* ── Breadcrumb ─────────────────────────────────────────────── */
    .page-header:has(.breadcrumb) {
        flex-direction: column;
        gap: var(--space-2);
    }

.breadcrumb {
    margin-bottom: 0;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--color-gray-500);
}

.breadcrumb-item a {
    color: var(--color-primary-link);
    text-decoration: none;
}

    .breadcrumb-item a:hover {
        text-decoration: underline;
    }

.breadcrumb-item.active {
    color: var(--color-gray-600);
}

.modal-open {
    height: 100vh;
    overflow-y: hidden;
    padding-right: 15px; /* Avoid width reflow */
}

/* ── Section headings ────────────────────────────────────────── */
.section-header {
    width: 100%;
    margin-top: var(--space-8);
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-4);
    font-size: var(--text-2xl);
    font-weight: var(--weight-normal);
    color: var(--color-gray-900);
    line-height: var(--leading-tight);
    text-transform: uppercase;
    border-bottom: 2px solid var(--color-primary);
}

.section-header-newsletter-text {
    font-size: var(--text-sm);
    text-transform: none;
    font-family: var(--font-body);
}

a.section-header-newsletter-button, a.section-header-newsletter-button:hover {
    font-size: var(--text-sm);
    text-transform: none;
    font-family: var(--font-body);
    color: white;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    display: inline-block;
    text-align: center;
    border: 1px solid transparent;
    padding: .2rem 0.75rem;
    line-height: 30px;
    border-radius: var(--radius-md);
    margin: 1em 0;
}

.tradeshow-header {
    width: 100%;
    height: auto;
    float: left;
    margin-top: var(--space-3);
    margin-bottom: 5px;
    font-size: var(--text-lg);
    line-height: 60px;
}

.section-subtitle {
    color: var(--color-primary);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    margin-top: 0;
    margin-bottom: var(--space-1);
}