/* ============================================================================
   ORDIAN CAPITAL — Responsive Stylesheet
   ----------------------------------------------------------------------------
   Mobile-first. We build up, never down. Most component styles live in
   style.css; this file holds the layout adjustments for narrower viewports
   plus the mobile navigation drawer.
   ============================================================================ */

/* ---------- Default: MOBILE (below 768px) ----------
   Adjustments to make the mobile experience feel as premium as desktop. */
@media (max-width: 767px) {

    :root {
        --header-h: 72px;
    }

    /* Mobile nav — hide the desktop list and right-side group, show a drawer */
    .site-nav .nav-list,
    .site-nav .nav-right { display: none; }

    .nav-toggle { display: flex; }

    .nav-list.is-open {
        display: flex;
        position: fixed;
        inset: 0;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: var(--space-4);
        padding: calc(var(--header-h) + var(--space-6)) var(--container-pad) var(--space-8);
        background: var(--color-onyx);
        z-index: 999;
        overflow-y: auto;
    }
    .nav-list.is-open .nav-list__item { width: 100%; }
    .nav-list.is-open .nav-link {
        font-family: var(--font-display);
        font-size: clamp(1.75rem, 7vw, 2.5rem);
        color: var(--color-white);
        font-weight: 400;
        line-height: 1;
    }
    .nav-list.is-open .nav-link.is-active { color: var(--color-accent); }
    .nav-list.is-open .nav-link.is-active::after { display: none; }
    /* On mobile, dropdown panels render inline beneath their parent.
       Reset the absolute positioning + animation used on desktop. */
    .nav-list.is-open .nav-submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: transparent;
        border: 0;
        box-shadow: none;
        padding: var(--space-2) 0 0 var(--space-3);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .nav-list.is-open .nav-submenu__link {
        font-family: var(--font-display);
        font-size: 1.25rem;
        padding: 0.4rem 0;
        color: rgba(255,255,255,0.75);
    }
    .nav-list.is-open .nav-link__caret { display: none; }

    /* When the drawer is open, darken the toggle lines to white regardless of page */
    body.nav-open { overflow: hidden; }
    body.nav-open .nav-toggle__line { background: var(--color-white); }

    /* Section padding — tighten for mobile */
    .section { padding-block: var(--space-8); }
    .section--tight { padding-block: var(--space-7); }

    /* Footer — single column, generous spacing */
    .site-footer__grid {
        grid-template-columns: 1fr;
        gap: var(--space-7);
    }
    .site-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }
}

/* ---------- TABLET (768px – 1023px) ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
    .site-footer__grid {
        grid-template-columns: 1fr 1fr;
    }
    .site-footer__brand { grid-column: 1 / -1; }
}

/* ---------- SMALL DESKTOP (below 1100px) — trim nav spacing ---------- */
@media (max-width: 1099px) {
    .nav-list { gap: var(--space-4); }
    .nav-right { gap: var(--space-4); }
    .site-nav { gap: var(--space-4); }
    /* Swap CTA copy to a shorter label so the button doesn't wrap. */
    .nav-cta__label--full { display: none; }
    .nav-cta__label--short { display: inline; }
}

/* ---------- DESKTOP (1100px+) — full CTA copy ---------- */
@media (min-width: 1100px) {
    .nav-cta__label--full { display: inline; }
    .nav-cta__label--short { display: none; }
}

/* ---------- LARGE DESKTOP (1440px+) — bigger type feels ---------- */
@media (min-width: 1440px) {
    :root { --container-pad: 3rem; }
}

/* ---------- Print ---------- */
@media print {
    .site-header, .site-footer, .nav-toggle, .btn { display: none !important; }
    body { background: white; color: black; }
}