/* ============================================
   DOCS 2025 - Global Styles
   Based on DOCS 2025 UX Guide
   ============================================ */

/* ============================================
   DOCS 2025 - Font Face (Roboto)
   ============================================ */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src:
        local('Roboto'),
        local('Roboto Regular'),
        url(/fonts/Roboto-Regular.woff2?c065bd9fa03a7a797d95ba7f198a9dcf) format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src:
        local('Roboto Bold'),
        local('Roboto-Bold'),
        url(/fonts/Roboto-Bold.woff2?9b710d53f3626e7ea660a7cc88c375e6) format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 900; /* super bold / black */
    font-display: swap;
    src:
        local('Roboto Black'),
        local('Roboto-Black'),
        url(/fonts/roboto-bold-900.woff2?7e398a127a40e6b5372a20492589a694) format('woff2');
}

:root {
    /* ============================================
       Color Palette
       ============================================ */

    /* Backgrounds, Accents (secondary color) */
    --color-light-blue: #dde4ea;

    /* Primary Brand Color, Buttons, Key elements */
    --color-slate: #5d7f95;

    /* Text, Icons (Primary text color) */
    --color-forest: #243830;

    /* Example: background for 'Stats' strip */
    --color-khaki: #cfbeaa;

    /* Example: text in 'Stats' strip, Secondary text */
    --color-graphite: #38393d;

    /* Separators, Borders, Neutral elements */
    --color-fog: #dadada;

    /* ============================================
       Typography - Font Family
       ============================================ */
    --font-primary: 'Roboto', sans-serif;
    --font-family-italic: Georgia, "Times New Roman", serif;

    /* ============================================
       Typography - Font Sizes (Desktop)
       ============================================ */
    --font-size-superbig-desktop: 74px;
    --font-size-h1-desktop: 60px;
    --font-size-h2-desktop: 48px;
    --font-size-h3-desktop: 36px;
    --font-size-h4-desktop: 24px;
    --font-size-h5-desktop: 24px;
    --font-size-p1-desktop: 24px;
    --font-size-p2-desktop: 16px;
    --font-size-b1-desktop: 14px;

    /* ============================================
       Typography - Font Sizes (Mobile)
       ============================================ */
    --font-size-h1-mobile: 48px;
    --font-size-h2-mobile: 36px;
    --font-size-h3-mobile: 24px;
    --font-size-h4-mobile: 24px;
    --font-size-h5-mobile: 24px;
    --font-size-p1-mobile: 24px;
    --font-size-p2-mobile: 16px;
    --font-size-b1-mobile: 16px;

    /* ============================================
       Typography - Line Height
       ============================================ */
    --line-height-default: 1.15;

    /* ============================================
       Typography - Font Weights
       ============================================ */
    --font-weight-regular: 400;
    --font-weight-bold: 700;
    --font-weight-superbold: 900;
}

/* ============================================
   Base & Reset
   ============================================ */

/* Best-practice box-sizing reset */
html {
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
}

body {
    font-family: var(--font-primary);
    color: var(--color-graphite);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-default);
}

/* ============================================
   Global Link Reset (Kills default blue/purple)
   ============================================ */
/* We wrap these in :where() to drop specificity to 0,0,0.
   This ensures that any custom class you write will easily override these defaults! */

:where(a) {
    color: var(--color-forest);
    text-decoration: none;
    transition: color .15s ease, -webkit-text-decoration .15s ease;
    transition: color .15s ease, text-decoration .15s ease;
    transition: color .15s ease, text-decoration .15s ease, -webkit-text-decoration .15s ease;
}

:where(a:visited) {
    color: var(--color-forest);
}

:where(a:hover) {
    color: var(--color-slate);
    text-decoration: underline;
}

:where(a:active) {
    color: var(--color-graphite);
    text-decoration: none;
}

/* ============================================
   Typography - Headings
   ============================================ */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

/*
   Browser default for headings is bold.
   We explicitly set regular here per UX guide.
*/
h1 {
    font-size: var(--font-size-h1-desktop);
    font-weight: var(--font-weight-regular);
}

h2 {
    font-size: var(--font-size-h2-desktop);
    font-weight: var(--font-weight-regular);
}

h3 {
    font-size: var(--font-size-h3-desktop);
    font-weight: var(--font-weight-regular);
}

h4 {
    font-size: var(--font-size-h4-desktop);
    font-weight: var(--font-weight-regular);
    text-transform: uppercase;
}

h5 {
    font-size: var(--font-size-h5-desktop);
    font-weight: var(--font-weight-bold);
}

/* ============================================
   Typography - Utility Classes
   ============================================ */

/* Decoupled from tags to prevent specificity clashes */
.bold,
.font-weight-bold {
    font-weight: var(--font-weight-bold);
}

.font-weight-super-bold {
    font-weight: var(--font-weight-superbold);
}

.font-italic {
    font-family: var(--font-family-italic);
    font-style: italic;
}

/* ============================================
   Typography - Paragraphs
   ============================================ */

.p1 {
    font-size: var(--font-size-p1-desktop);
}

.p2 {
    font-size: var(--font-size-p2-desktop);
}

/* ============================================
   Typography - Buttons/Labels
   ============================================ */

.b1 {
    font-size: var(--font-size-b1-desktop);
    text-transform: uppercase;
}

/* button style for brand site */
.brand-site-btn {
    display: inline-block;
    padding: 8px 20px;
    text-decoration: none;
    border: 1px solid var(--color-slate);
    border-radius: 50px;
    color: var(--color-graphite);
    line-height: 1;
    font-size: 15px;
    min-width: 150px;
    text-align: center;
}

/* ============================================
   LAYOUT PRESERVE SPACE ON LEFT/RIGHT;
   VISUAL LINES WHERE APPLICABLE
   ============================================ */

/* THE CORE THREE-ZONE FLEX LAYOUT */
.strip_cc {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* LEFT AND RIGHT ARE OPTIONAL REGIONS */
.strip_cc__side {
    position: relative; /* for floating squares, decorations, etc */
    width: 128px;  /* S10 from UX guide */
    min-width: 40px;
    height: 100%;
    flex-grow: 1;
    flex-shrink: 2;
}

/* CLASS TO BE ADDED TO ELEMENTS INSIDE THE ABOVE TO ENABLE ABSOLUTE POSITIONING */
.strip_cc__absolute {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}

/* CLASS TO BE ADDED TO OUTERMOST CONTAINER OF LEFT/RIGHT SIDE CONTENT TO ENABLE ABSOLUTE POSITIONING INSIDE */
.position__relative {
    position: relative;
}

@media (max-width: 1023px) {
    .strip_cc__side {
        display: none; /* collapse left/right */
    }
}

/* CENTER REGION */
.strip_cc__center {
    flex-grow: 0;
    flex-shrink: 1;
    max-width: 1200px;  /* inner container requirement */
    width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: row; /* or column, depending on the strip */
    justify-content: flex-start;
    align-items: center;
}

/* Tablets: */
@media (max-width: 1023px) {
    .strip_cc__center {
        max-width: 100%;        /* no fixed max */
        /* Note below that the sidebar divs will now be hidden, so: */
        padding-left: 32px;     /* S4 = 32px mobile/tablet margin */
        padding-right: 32px;
    }
}

/* ============================================
   Mobile Responsive Typography
   ============================================ */

@media screen and (max-width: 768px) {
    h1 { font-size: var(--font-size-h1-mobile); }
    h2 { font-size: var(--font-size-h2-mobile); }
    h3 { font-size: var(--font-size-h3-mobile); }
    h4 { font-size: var(--font-size-h4-mobile); }
    h5 { font-size: var(--font-size-h5-mobile); }

    .p1 { font-size: var(--font-size-p1-mobile); }
    .p2 { font-size: var(--font-size-p2-mobile); }
    .b1 { font-size: var(--font-size-b1-mobile); }
}

/* ============================================
   Inline Text Links (inside paragraphs)
   Based on UX Guide link behavior
   Resolved to LVHA order (Link, Visited, Hover, Active)
   ============================================ */

.link-inline-dark {
    color: var(--color-forest);
    text-decoration: none;
    transition: color .15s ease, -webkit-text-decoration .15s ease;
    transition: color .15s ease, text-decoration .15s ease;
    transition: color .15s ease, text-decoration .15s ease, -webkit-text-decoration .15s ease;
}

.link-inline-dark:visited {
    color: var(--color-forest);
}

.link-inline-dark:hover {
    color: var(--color-slate);
    text-decoration: underline;
}

.link-inline-dark:active {
    color: var(--color-graphite);
    text-decoration: underline;
}

.link-inline-dark.disabled {
    color: var(--color-fog);
    cursor: not-allowed;
}

/* ============================================
   Inline Text Links - Light (for dark backgrounds)
   ============================================ */

.link-inline-light {
    color: #ffffff;
    text-decoration: underline;
    transition: color .15s ease, -webkit-text-decoration .15s ease;
    transition: color .15s ease, text-decoration .15s ease;
    transition: color .15s ease, text-decoration .15s ease, -webkit-text-decoration .15s ease;
}

.link-inline-light:visited {
    color: #ffffff;
}

.link-inline-light:hover {
    color: var(--color-light-blue);
    text-decoration: none;
}

.link-inline-light:active {
    color: var(--color-fog);
    text-decoration: none;
}

.link-inline-light.disabled {
    color: var(--color-fog);
    cursor: not-allowed;
}

/* ============================================
   WYSIWYG Adjustments
   ============================================ */

.jodit-wysiwyg {
    font-family: var(--font-primary);
    font-size: 16px;
    line-height: 1.3;
}

/* Jodit DOCS text styles used by the blog editor. */
.xxlSlate,
.xxlCharcoal {
    font-size: 49px;
    line-height: 56px;
    font-family: Outfit-SemiBold, sans-serif;
}

.xlSlate,
.xlCharcoal {
    font-size: 40px;
    line-height: 48px;
    font-family: Outfit-SemiBold, sans-serif;
}

.lgSlate,
.lgCharcoal {
    font-size: 34px;
    line-height: 40px;
    font-family: Outfit-SemiBold, sans-serif;
}

.mdSlate,
.mdCharcoal {
    font-size: 28px;
    line-height: 34px;
    font-family: Outfit-SemiBold, sans-serif;
}

.smSlate,
.smCharcoal {
    font-size: 22px;
    line-height: 28px;
    font-family: Outfit-SemiBold, sans-serif;
}

.xsSlate,
.xsCharcoal {
    font-size: 18px;
    line-height: 22px;
    font-family: Outfit-SemiBold, sans-serif;
}

.xxsSlate,
.xxsCharcoal {
    font-size: 14px;
    line-height: 18px;
    letter-spacing: .2rem;
    font-family: Outfit-SemiBold, sans-serif;
}

.xxlSlate,
.xlSlate,
.lgSlate,
.mdSlate,
.smSlate,
.xsSlate,
.xxsSlate {
    color: #687e88;
}

.xxlCharcoal,
.xlCharcoal,
.lgCharcoal,
.mdCharcoal,
.smCharcoal,
.xsCharcoal,
.xxsCharcoal {
    color: #38393d;
}

.docs_float_left_in_jodit {
    float: left;
    max-width: 50%;
    height: auto;
    margin: 0 20px 20px 0 !important;
}

.docs_float_right_in_jodit {
    float: right;
    max-width: 50%;
    height: auto;
    margin: 0 0 20px 20px !important;
}

@media screen and (max-width: 768px) {
    .docs_float_left_in_jodit,
    .docs_float_right_in_jodit {
        float: none;
        display: block;
        max-width: 80vw;
        height: auto;
        margin: 20px auto !important;
    }
}