/* ============ NAV OVERRIDES (desktop) ============ */
@media (min-width: 768px) {

    /* Layout: keep one clean row */
    .header .nav-links {
        display: flex;
        align-items: center;
        gap: 2rem;
    }

    /* Hide the stray <br> tags used in the current HTML */
    .header .nav-links br {
        display: none !important;
    }

    .header .nav-item {
        position: relative;
        padding: .75rem 0;
    }

    .header .nav-item>a {
        display: inline-block;
        font-family: var(--font-heading, "Space Grotesk", sans-serif);
        font-size: .95rem;
        /* slightly tighter than base */
        letter-spacing: .03em;
        text-transform: uppercase;
        color: var(--color-text);
        padding: .5rem 0;
        line-height: 1.1;
    }

    .header .nav-item>a:hover,
    .header .nav-item>a:focus {
        color: var(--color-secondary);
    }

    /* Caret */
    .header .has-dropdown::after {
        margin-left: .35rem;
        font-size: .8em;
        color: var(--color-secondary);
    }

    /* Base dropdown (hidden by default) */
    .header .dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 260px;
        padding: .5rem 0;
        border-radius: 12px;
        background: var(--dropdown-bg, #1b120e);
        border: 1px solid var(--dropdown-border, rgba(255, 106, 19, .22));
        box-shadow: var(--shadow-md, 0 10px 30px rgba(0, 0, 0, .5));
        z-index: 1200;

        /* keep it in flow but invisible for smoother transitions */
        display: block;
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        transition: transform .2s ease, opacity .2s ease, visibility .2s ease;
    }

    /* Nested dropdowns open to the right */
    .header .dropdown .dropdown {
        top: 0;
        left: 100%;
        margin-left: .25rem;
    }

    /* Dropdown items */
    .header .dropdown-item {
        display: block;
        padding: .6rem 1rem;
        margin: 0;
        color: var(--color-text);
        white-space: nowrap;
    }

    .header .dropdown-item:hover,
    .header .dropdown-item:focus {
        background: rgba(255, 106, 19, .12);
        color: var(--color-white);
    }

    /* Show submenu on hover OR keyboard focus */
    .header .has-dropdown:hover>.dropdown,
    .header .has-dropdown:focus-within>.dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

/* Optional: ensure dropdowns overlay hero sections on all engines */
.header {
    z-index: 1000;
}

/* vw-ovr.css
   Force design to render as if viewport = 1715px (≈ 2560px * 0.67) on all devices
*/

/* Root font sizing baseline */
html {
    font-size: calc(1715px / 100);
    /* 1rem ≈ 17.15px baseline */
}

/* Override container widths */
.container {
    max-width: 1715px !important;
    padding: 0 3vw;
    /* keep proportional padding */
}

/* Force nav and header to scale consistently */
header.header,
.header-inner,
.nav-links {
    max-width: 1715px;
    margin: 0 auto;
}

/* Typography adjustments */
body {
    font-size: 1rem;
    /* baseline is now locked */
    line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 1em;
    /* keep relative */
    line-height: 1.2;
}

.section__header h2 {
    font-size: xxx-large;
}

/* Scale hero and section padding to match */
.hero,
.section {
    padding-left: 3vw;
    padding-right: 3vw;
}

/* Ensure dropdowns scale correctly */
.header .dropdown {
    min-width: 260px;
    font-size: 0.95rem;
}

/* ================================
   Submenu visibility control
   ================================ */

/* Base: hide nested submenus */
.header .dropdown .dropdown {
    display: block;
    /* keep them in flow for transition */
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: transform .2s ease, opacity .2s ease, visibility .2s ease;
}

/* Show nested submenu on hover or keyboard focus */
.header .dropdown-item.has-dropdown:hover>.dropdown,
.header .dropdown-item.has-dropdown:focus-within>.dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* CONTACT FORM — screenshot style */
.contact-form {
    width: 100%;
}

.contact-stack {
    display: grid;
    gap: 18px;
}

/* big pale boxes */
.box {
    position: relative;
    background: #eef4f9;
    /* light blue-grey like screenshot */
    border: 1px solid #e1e9f2;
    border-radius: 2px;
    padding: 22px 18px 16px;
    min-height: 64px;
    display: grid;
}

.box--tall {
    min-height: 180px;
}

/* label inside box, uppercase with star */
.box__label {
    font: 600 13px/1.2 var(--font-inter, Inter, system-ui, sans-serif);
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #3a4957;
    margin-bottom: 6px;
    display: inline-block;
}

.box__label.req::before {
    content: "* ";
    color: #ff6a13;
    /* brand orange for the asterisk */
    font-weight: 700;
}

/* inputs fill the box, no borders */
.box input,
.box select,
.box textarea {
    background: transparent;
    border: none;
    outline: none;
    font: 400 16px/1.4 var(--font-inter, Inter, system-ui, sans-serif);
    color: var(--text, #0f1720);
    padding: 0;
    width: 100%;
}

/* textarea fills remaining height nicely */
.box textarea {
    resize: vertical;
    min-height: 120px;
}

/* custom select caret (right chevron) */
.box select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 28px;
    cursor: pointer;
}

.box__chev {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-6px);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid #5a6a78;
    pointer-events: none;
}

/* checkbox line like screenshot */
.policy {
    display: flex;
    align-items: center;
    gap: 10px;
    font: 500 14px/1.4 var(--font-inter, Inter, system-ui, sans-serif);
    color: var(--text, #0f1720);
}

.policy a {
    text-decoration: underline;
}

/* dark theme compatibility */
[data-theme="dark"] .box {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .box__label {
    color: rgba(255, 255, 255, 0.85);
}

[data-theme="dark"] .box input,
[data-theme="dark"] .box select,
[data-theme="dark"] .box textarea,
[data-theme="dark"] .policy {
    color: #fff;
}

[data-theme="dark"] .box__chev {
    border-top-color: rgba(255, 255, 255, 0.8);
}