/* =====================================================
   1. DESIGN SYSTEM: MASTER VARIABLES
   ===================================================== */

/* --- XS: 0px - 767px (Mobile) --- */
:root {
    /* Layout */
    --sys-margin: 24px;
    --sys-gutter: 16px;
    --hero-top-offset: 40px;
    --hero-box-py: 24px;

    /* Body (Ag XS) */
    --sys-font-size: 20px; /* Renamed to match system generic usage */
    --sys-line-height: 1.4;

    /* Headings */
    --sys-h1-size: 40px;
    --sys-h1-lh: 1.1;
    --sys-h2-size: 40px;
    --sys-h2-lh: 1.1;

    /* Kicker (AG XS 14/120) */
    --sys-kicker-size: 14px;
    --sys-kicker-lh: 1.2;

    /* Caption (Medium & Regular 16/140 & 16/110) */
    --sys-caption-size: 16px;
    --sys-caption-med-lh: 1.4;
    --sys-caption-reg-lh: 1.1;

    /* Footer (14/140) */
    --sys-footer-size: 14px;
    --sys-footer-lh: 1.4;
    
    /* Menu */
    --sys-menu-size: 20px;
    
    /* Tab Content Padding */
    --tab-content-pt: 40px;
    --tab-content-pb: 40px;
}

/* --- SM: 768px - 1023px (Tablet) --- */
@media screen and (min-width: 768px) {
    :root {
        --sys-margin: 40px;
        --hero-box-py: 24px;
        --hero-top-offset: 40px;

        /* Body (Ag SM: 14/140) */
        --sys-font-size: 14px;

        /* Headings */
        --sys-h1-size: 40px;
        --sys-h2-size: 28px;

        /* Kicker (12/120) */
        --sys-kicker-size: 12px;

        /* Caption (14px) */
        --sys-caption-size: 14px;

        /* Footer (14/140) */
        --sys-footer-size: 14px;

        /* Menu (14/110) */
        --sys-menu-size: 14px;
        --sys-menu-lh: 1.1;
        
        /* Tab Content Padding */
        --tab-content-pt: 48px;
        --tab-content-pb: 60px;
    }
}

/* --- LG: 1024px - 1439px (Desktop) --- */
@media screen and (min-width: 1024px) {
    :root {
        --sys-margin: 60px;
        --hero-box-py: 40px;
        --hero-top-offset: 80px;

        /* Body (Ag LG: 20/140) */
        --sys-font-size: 20px;

        /* Headings */
        --sys-h1-size: 60px;
        --sys-h2-size: 40px;

        /* Kicker (16/120) */
        --sys-kicker-size: 16px;

        /* Caption (16px) */
        --sys-caption-size: 16px;

        /* Footer (16/140) */
        --sys-footer-size: 16px;

        /* Menu (16/110) */
        --sys-menu-size: 16px;
        
        /* Tab Content Padding */
        --tab-content-pt: 64px;
        --tab-content-pb: 60px;
    }
}

/* --- XL: 1440px+ (Large Screens) --- */
@media screen and (min-width: 1440px) {
    :root {
        --sys-gutter: 24px;
        --hero-box-py: 60px;
        --hero-top-offset: 120px;
        --boxed-offset: calc((100vw - 1360px) / 2);

        /* Body (Ag XL: 22/140) */
        --sys-font-size: 22px;

        /* Headings */
        --sys-h1-size: 80px;
        --sys-h2-size: 60px;

        /* Kicker (18/120) */
        --sys-kicker-size: 18px;

        /* Caption (20px) */
        --sys-caption-size: 20px;

        /* Footer (18/140) */
        --sys-footer-size: 18px;

        /* Menu (20/140) */
        --sys-menu-size: 20px;
        --sys-menu-lh: 1.4;
        
        /* Tab Content Padding */
        --tab-content-pt: 80px;
        --tab-content-pb: 60px;
    }
}


/* =====================================================
   2. GLOBAL TYPOGRAPHY RESET (Set and Forget)
   ===================================================== */

/* --- GLOBAL BODY TEXT (Paragraphs) --- */
body,
p,
li,
.wpb_text_column,
.wpb_text_column p {
    font-family: "Aeonik", sans-serif !important;
    font-size: var(--sys-font-size) !important;       
    line-height: var(--sys-line-height) !important;   
    font-weight: 400 !important;
}

/* --- GLOBAL H1 (Main Titles) --- */
h1,
.h1,
.wpex-heading h1,
.vc_custom_heading h1 {
    font-family: "Aeonik", sans-serif !important;
    font-size: var(--sys-h1-size) !important;         
    line-height: var(--sys-h1-lh) !important;
    font-weight: 400 !important;
    margin-top: 0 !important;
    margin-bottom: var(--sys-gutter) !important;      
}

/* --- GLOBAL H2 (Secondary Titles) --- */
h2,
.h2,
.wpex-heading h2,
.vc_custom_heading h2 {
    font-family: "Aeonik", sans-serif !important;
    font-size: var(--sys-h2-size) !important;         
    line-height: var(--sys-h2-lh) !important;
    font-weight: 400 !important;
    margin-top: 0 !important;
    margin-bottom: var(--sys-gutter) !important;
}

/* --- ITALIC EXCEPTION (Global) --- */
/* Ensures "special-font" works everywhere, inside anything */
.special-font,
h1 .special-font,
h2 .special-font,
p .special-font,
.u-sys-h1 .special-font,
.u-sys-h2 .special-font {
    font-family: 'PP Editorial New', serif !important;
    font-weight: 200 !important;
    font-style: italic !important;
    font-size: inherit !important;
    line-height: inherit !important;
}



/* =====================================================
   3. GLOBAL COMPONENTS (Automatic Targets)
   ===================================================== */

/* --- GLOBAL FOOTER --- */
#footer, #footer p, #footer a, #footer li, .site-footer {
    font-family: "Aeonik", sans-serif !important;
    font-size: var(--sys-footer-size) !important;
    line-height: var(--sys-footer-lh) !important;
}

/* --- GLOBAL MENU --- */
#site-navigation .menu-item a,
.mobile-menu .menu-item a,
.main-navigation a {
    font-family: "Aeonik", sans-serif !important;
    font-size: var(--sys-menu-size) !important;
    line-height: var(--sys-menu-lh, 1) !important; 
    font-weight: 400 !important;
}

/* Force navigation link-inner to use design system variable */
.main-navigation-ul .link-inner {
    font-size: var(--sys-menu-size) !important;
}

/* =====================================================
   UTILITY: STYLE AS FOOTER (Strong Override)
   Forces section to match footer size, overriding global p reset
   ===================================================== */

.style-as-footer,
.style-as-footer p,
.style-as-footer a,
.style-as-footer li,
.style-as-footer .wpb_text_column,
.style-as-footer .wpb_text_column p { /* <--- The magic selector */
    font-family: "Aeonik", sans-serif !important;
    font-size: var(--sys-footer-size) !important;
    line-height: var(--sys-footer-lh) !important;
}

/* =====================================================
   4. MANUAL UTILITY CLASSES (Use in "Extra class name")
   ===================================================== */

/* --- KICKER (Uppercase Small Title) --- */
/* --- KICKER (Uppercase Small Title) --- */
/* Updated to override global paragraph styles */
.sys-kicker, 
.sys-kicker p,       /* <--- Added this to target inner text */
.sys-kicker span, 
.u-sys-kicker {
    font-family: "Aeonik", sans-serif !important;
    font-size: var(--sys-kicker-size) !important;
    line-height: var(--sys-kicker-lh) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    display: block;
    margin-bottom: 0 !important; /* Kickers usually don't need bottom margin inside */
}

/* --- CAPTIONS --- */
/* Use class: "sys-caption-medium" or "sys-caption-regular" */
/* Updated to override Global Paragraph Reset */

/* Medium Weight Caption */
.sys-caption-medium, 
.sys-caption-medium p, 
.sys-caption-medium span, 
.sys-caption-medium li {
    font-family: "Aeonik", sans-serif !important;
    font-size: var(--sys-caption-size) !important;
    line-height: var(--sys-caption-med-lh) !important;
    font-weight: 500 !important; /* Medium Weight */
    margin-bottom: 0 !important;
}

/* Regular Weight Caption */
.sys-caption-regular, 
.sys-caption-regular p, 
.sys-caption-regular span, 
.sys-caption-regular li {
    font-family: "Aeonik", sans-serif !important;
    font-size: var(--sys-caption-size) !important;
    line-height: var(--sys-caption-reg-lh) !important;
    font-weight: 400 !important; /* Regular Weight */
    margin-bottom: 0 !important;
}

/* --- H1 OVERRIDE (Forcing H1 look on any element) --- */
.u-sys-h1, .u-sys-h1 * {
    font-family: "Aeonik", sans-serif !important;
    font-size: var(--sys-h1-size) !important; 
    line-height: var(--sys-h1-lh) !important;
    font-weight: 400 !important;
    margin-top: 0 !important;
}

/* --- H2 OVERRIDE (Forcing H2 look on any element) --- */
.u-sys-h2, .u-sys-h2 * {
    font-family: "Aeonik", sans-serif !important;
    font-size: var(--sys-h2-size) !important; 
    line-height: var(--sys-h2-lh) !important;
    font-weight: 400 !important;
    margin-top: 0 !important;
}