/* Header & footer designed in Elementor (Templates > Saved Templates).
   Declared first so the header/footer rules below win where they set the same property. */
.whc-hf .e-con { --padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px; --gap:0px; --row-gap:0px; --column-gap:0px; --width:auto; --min-height:initial; --position:static; --overflow:visible; --flex-direction:row; --flex-wrap:nowrap; --text-align:inherit; --border-radius:initial; }
:where(.whc-hf) .e-con.whc-block { display: block; }
.whc-hf .elementor-widget.whc-contents,
.whc-hf .elementor-widget.whc-contents > .elementor-widget-container { display: contents; }
.whc-hf .elementor-widget-heading .elementor-heading-title { line-height: inherit; }
.whc-hf .elementor-widget-text-editor p:has(> .nav-brand) { display: contents; }

/* Site header (fixed nav) */
/* Everything is scoped to .whc-nav — nothing leaks to the rest of the site */
    .whc-nav,
    .whc-nav *,
    .whc-nav *::before,
    .whc-nav *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .whc-nav {
        position: fixed;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - 40px);
        max-width: 1360px;
        z-index: 99999;
        background: rgba(6, 10, 17, 0.95);
        border: 1px solid rgba(26, 34, 51, 0.8);
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
        font-family: 'DM Sans', sans-serif;
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
    }

    /* Extra safety net in case something elsewhere on the page is
       overflowing horizontally and widening the whole layout viewport */
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }

    /* Push down below the WordPress admin bar when logged in */
    body.admin-bar .whc-nav { top: 52px; }
    @media (max-width: 782px) {
        body.admin-bar .whc-nav { top: 62px; }
    }

    /* Reserve space so page content isn't hidden under the fixed nav */
    body.whc-has-nav { padding-top: 100px !important; }

    /* Anchor links land below the nav */
    html { scroll-padding-top: 116px; }

    /* Logo pushed left, menu pushed right */
    .whc-nav .nav-inner {
        max-width: 100%;
        margin: 0 auto;
        padding: 0 28px;
        height: 76px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .whc-nav .nav-brand {
        display: flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
        font-family: 'Space Grotesk', sans-serif;
        font-weight: 700;
        font-size: 17px;
        color: #eef2f7;
        flex-shrink: 0;
    }
    .whc-nav .nav-brand i {
        color: #0ea5e9;
        font-size: 18px;
    }

    .whc-nav .desk-links {
        display: flex;
        align-items: center;
        gap: 28px;
        font-size: 14px;
    }

    .whc-nav .nl {
        position: relative;
        color: #5e6e82;
        text-decoration: none;
        transition: color 0.2s;
        white-space: nowrap;
    }
    .whc-nav .nl::after {
        content: '';
        position: absolute;
        bottom: -4px;
        left: 0;
        width: 0;
        height: 2px;
        background: #0ea5e9;
        transition: width 0.3s ease;
        border-radius: 1px;
    }
    .whc-nav .nl:hover::after,
    .whc-nav .nl.act::after { width: 100%; }
    .whc-nav .nl:hover,
    .whc-nav .nl.act { color: #0ea5e9; }

    /* ---- Dropdown (desktop) ---- */
    .whc-nav .has-drop {
        position: relative;
    }
    .whc-nav .drop-trigger {
        display: flex;
        align-items: center;
        gap: 5px;
        cursor: pointer;
        background: none;
        border: none;
        font-family: inherit;
        font-size: 14px;
    }
    .whc-nav .drop-trigger i.chev {
        font-size: 10px;
        transition: transform 0.2s ease;
    }
    .whc-nav .has-drop.drop-open .drop-trigger i.chev {
        transform: rotate(180deg);
    }
    .whc-nav .drop-menu {
        position: absolute;
        top: calc(100% + 16px);
        left: 50%;
        transform: translateX(-50%) translateY(-6px);
        min-width: 230px;
        background: #0c1119;
        border: 1px solid #1a2233;
        border-radius: 14px;
        padding: 8px;
        box-shadow: 0 14px 32px rgba(0,0,0,0.45);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    }
    .whc-nav .has-drop.drop-open .drop-menu {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }
    .whc-nav .drop-menu a {
        display: block;
        padding: 9px 12px;
        border-radius: 6px;
        color: #5e6e82;
        text-decoration: none;
        font-size: 13.5px;
        white-space: nowrap;
        transition: color 0.15s, background 0.15s;
    }
    .whc-nav .drop-menu a:hover {
        color: #0ea5e9;
        background: rgba(14, 165, 233, 0.08);
    }

    .whc-nav .mob-toggle {
        display: none;
        background: none;
        border: none;
        color: #5e6e82;
        font-size: 18px;
        cursor: pointer;
        padding: 4px;
        line-height: 1;
    }

    .whc-nav .mob-menu {
        display: none;
        border-top: 1px solid #1a2233;
        padding: 12px 16px;
        background: rgba(6, 10, 17, 0.98);
    }
    .whc-nav .mob-menu.open { display: block; }
    .whc-nav .mob-menu > a {
        display: block;
        padding: 10px 0;
        color: #5e6e82;
        text-decoration: none;
        font-size: 14px;
        transition: color 0.2s;
    }
    .whc-nav .mob-menu > a:hover { color: #0ea5e9; }

    /* ---- Dropdown (mobile, accordion-style) ---- */
    .whc-nav .mob-menu .mob-drop-trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 10px 0;
        background: none;
        border: none;
        color: #5e6e82;
        font-family: inherit;
        font-size: 14px;
        cursor: pointer;
        transition: color 0.2s;
    }
    .whc-nav .mob-menu .mob-drop-trigger i.chev {
        font-size: 11px;
        transition: transform 0.2s ease;
    }
    .whc-nav .mob-menu .mob-drop.open .mob-drop-trigger { color: #0ea5e9; }
    .whc-nav .mob-menu .mob-drop.open .mob-drop-trigger i.chev { transform: rotate(180deg); }
    .whc-nav .mob-menu .mob-sub {
        display: none;
        padding-left: 14px;
        border-left: 1px solid #1a2233;
        margin-left: 2px;
    }
    .whc-nav .mob-menu .mob-drop.open .mob-sub { display: block; }
    .whc-nav .mob-menu .mob-sub a {
        display: block;
        padding: 8px 0;
        color: #5e6e82;
        text-decoration: none;
        font-size: 13.5px;
    }
    .whc-nav .mob-menu .mob-sub a:hover { color: #0ea5e9; }

    @media (max-width: 767px) {
        .whc-nav .desk-links { display: none; }
        .whc-nav .mob-toggle { display: block; }
        .whc-nav .nav-inner { padding: 0 18px; }  /* tighter on phones */
    }
    @media (min-width: 768px) {
        .whc-nav .mob-toggle { display: none; }
        .whc-nav .mob-menu { display: none; }
    }

/* Site footer */
/* Scoped CSS to prevent Elementor conflicts */
[id="whc-footer"] * { box-sizing: border-box; margin: 0; padding: 0; }

[id="whc-footer"] {
    font-family: 'DM Sans', sans-serif;
    background-color: #0c0c0f;
    color: #a1a1aa;
    padding: 56px 32px 0;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

/* Top separator line */
[id="whc-footer"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 32px;
    right: 32px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 50%, transparent 100%);
}

[id="whc-footer"] .footer-inner {
    position: relative;
    z-index: 1;
    max-width: 960px;
    margin: 0 auto;
}

/* Grid layout */
[id="whc-footer"] .footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 36px;
    padding-bottom: 40px;
}

/* Brand column */
[id="whc-footer"] .footer-brand .brand-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #f4f4f5;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
[id="whc-footer"] .footer-brand .brand-name i {
    color: #3b82f6;
    font-size: 18px;
}
[id="whc-footer"] .footer-brand p {
    font-size: 13px;
    line-height: 1.7;
    color: #71717a;
    max-width: 280px;
}

/* Column headings */
[id="whc-footer"] .footer-col h4 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #f4f4f5;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 18px;
}

/* Links */
[id="whc-footer"] .footer-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
[id="whc-footer"] .footer-col ul li a {
    font-size: 13px;
    color: #71717a;
    text-decoration: none;
    transition: color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
[id="whc-footer"] .footer-col ul li a:hover {
    color: #d4d4d8;
}
[id="whc-footer"] .footer-col ul li a i {
    font-size: 10px;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.2s, transform 0.2s;
}
[id="whc-footer"] .footer-col ul li a:hover i {
    opacity: 0.6;
    transform: translateX(0);
}

/* Bottom bar */
[id="whc-footer"] .footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
[id="whc-footer"] .footer-bottom .copyright {
    font-size: 12px;
    color: #52525b;
}
[id="whc-footer"] .footer-bottom .disclaimer {
    font-size: 11px;
    color: #3f3f46;
    line-height: 1.5;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    [id="whc-footer"] {
        padding: 40px 20px 0;
    }
    [id="whc-footer"]::before {
        left: 20px;
        right: 20px;
    }
    [id="whc-footer"] .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
    [id="whc-footer"] .footer-brand {
        grid-column: 1 / -1;
    }
    [id="whc-footer"] .footer-brand p {
        max-width: 100%;
    }
}
@media (max-width: 480px) {
    [id="whc-footer"] .footer-grid {
        grid-template-columns: 1fr;
    }
}

/* Footer spacing inside the theme layout */
.whc-site-footer { padding: 0 20px 20px; }
[id="whc-footer"] { max-width: 1360px; margin: 0 auto; }
/* Skip link */
.whc-skip { position: absolute; left: -9999px; top: 8px; z-index: 100000; background: #0ea5e9; color: #fff; padding: 8px 14px; border-radius: 8px; }
.whc-skip:focus { left: 8px; }

/* =========================================================================
 * Elementor compatibility (scoped to .whc-el, the wrapper around page content)
 * Elementor's defaults (10px container padding, 20px gaps, flex columns,
 * Roboto fonts, kit colours) are neutralised so the design's CSS classes
 * decide the look. Settings you change in Elementor still win, because
 * Elementor's per-element CSS is more specific than these rules.
 * ====================================================================== */
.whc-el .e-con {
    --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
    --gap: 0px; --row-gap: 0px; --column-gap: 0px;
    --width: auto; --min-height: initial; --position: static; --overflow: visible;
    --flex-direction: row; --flex-wrap: nowrap; --text-align: inherit;
    --border-radius: initial;
}
/* Containers that were plain boxes in the design stay plain boxes. */
/* .whc-block (no display utility) is declared at the top of each page stylesheet. */
.whc-el .elementor-widget { position: static; }
.whc-el .elementor-widget-heading .elementor-heading-title {
    color: inherit; font-family: inherit; font-weight: inherit; font-size: inherit;
    line-height: inherit; letter-spacing: inherit; text-transform: inherit;
}
.whc-el .elementor-widget-text-editor { color: inherit; font-family: inherit; font-weight: inherit; }
.whc-el .whc-fill > :is(input, select, textarea) { width: 100%; }
/* A widget sitting directly in a grid/flex layout: its content fills the cell like the original box did. */
.whc-el .elementor-widget.whc-stretch { display: flex; flex-direction: column; }
.whc-el .elementor-widget.whc-stretch > :not(.elementor-widget-container),
.whc-el .elementor-widget.whc-stretch > .elementor-widget-container { flex: 1 1 auto; }
.whc-el .elementor-widget.whc-stretch > .elementor-widget-container { display: flex; flex-direction: column; }
.whc-el .elementor-widget.whc-stretch > .elementor-widget-container > * { flex: 1 1 auto; }
.whc-el .elementor-widget-html > .elementor-widget-container:empty,
.whc-el .elementor-widget-html:empty { display: contents; }

/* In the Elementor editor, show scroll-reveal sections immediately. */
body.elementor-editor-active .whc-el .reveal,
body.elementor-editor-active .whc-el .rv { opacity: 1 !important; transform: none !important; }

@media print {
    .whc-nav, .whc-site-footer, .whc-skip { display: none !important; }
}
/* Decorative empty elements (glows, timeline dots): the widget wrapper takes no space. */
.whc-el .elementor-widget.whc-contents,
.whc-el .elementor-widget.whc-contents > .elementor-widget-container { display: contents; }
