/* ==========================================================================
   OMEIDA TRADING 105 — Utility bar, header, navigation, footer
   ========================================================================== */

/* ── Utility bar ───────────────────────────────────────────────────────── */

.util {
    background: var(--navy);
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.85rem;
}
.util .wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem 1.8rem;
    min-height: var(--util-h);
    padding-block: 0.35rem;
}
.util-left { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.6rem; }
.util a { color: rgba(255, 255, 255, 0.74); text-decoration: none; }
.util a:hover { color: #fff; text-decoration: underline; }
.util .lbl { color: var(--green); font-weight: 700; }
.util-item { display: inline-flex; align-items: center; gap: 8px; }
.util-item svg { width: 15px; height: 15px; color: var(--green); flex-shrink: 0; }
@media (max-width: 767.98px) {
    /* On a phone the address is noise; the phone number is the point. */
    .util-addr { display: none; }
}

/* ── Header ────────────────────────────────────────────────────────────── */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    transition: box-shadow var(--dur) var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow); }

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
    min-height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; flex-shrink: 0; text-decoration: none; }
.brand img {
    /* Source artwork is 219x116 after cropping the dead whitespace. At 58px tall
       that is exactly 2x pixel density, so it stays crisp on retina screens.
       Going larger than this would visibly soften — it needs vector artwork. */
    height: 58px;
    width: auto;
}
@media (max-width: 1049.98px) { .brand img { height: 46px; } }
@media (max-width: 359.98px)  { .brand img { height: 40px; } }

/* ── Desktop navigation ────────────────────────────────────────────────── */

.nav-desktop { display: none; }

@media (min-width: 1050px) {
    .nav-desktop { display: flex; align-items: center; gap: 0.2rem; }

    .nav-desktop .nav-link {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 0.85rem 0.95rem;
        font-family: var(--head);
        font-size: 0.83rem;
        font-weight: 600;
        letter-spacing: var(--tracking-nav);
        text-transform: uppercase;
        text-decoration: none;
        color: var(--body);
        background: none;
        border: 0;
        border-bottom: 3px solid transparent;
        cursor: pointer;
        transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
    }
    .nav-desktop .nav-link:hover,
    .nav-desktop .nav-link.is-active {
        color: var(--navy);
        border-bottom-color: var(--green);
    }
    .header-cta { margin-left: var(--sp-4); }
}
@media (min-width: 1050px) and (max-width: 1199.98px) {
    /* Reclaim room so the CTA does not crowd the nav on small laptops. */
    .nav-desktop .nav-link { padding-inline: 0.6rem; font-size: 0.79rem; }
    .header-cta { padding-inline: 1.3rem; font-size: 0.76rem; }
}

/* Services dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown .caret { width: 10px; height: 10px; transition: transform var(--dur) var(--ease); }
.nav-dropdown[data-open="true"] .caret { transform: rotate(180deg); }

.nav-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    width: min(370px, calc(100vw - 2rem));
    margin: 0;
    padding: 0.6rem;
    list-style: none;
    background: var(--white);
    border: 1px solid var(--line);
    border-top: 3px solid var(--green);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -6px);
    transition: opacity var(--dur) var(--ease),
                transform var(--dur) var(--ease),
                visibility var(--dur) var(--ease);
}
.nav-dropdown[data-open="true"] .nav-menu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}
.nav-menu li { margin: 0; }
.nav-menu a {
    display: block;
    padding: 0.7rem 0.9rem;
    border-radius: var(--radius-sm);
    color: var(--body);
    /* Primary navigation is set in --head. The dropdown hangs directly off a
       nav link, so it must not fall back to the body face. */
    font-family: var(--head);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-menu a .note {
    display: block;
    margin-top: 2px;
    /* The note is a descriptive sentence, so it returns to the body face —
       the same pairing used by a card heading and its supporting copy. */
    font-family: var(--sans);
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--muted);
}
.nav-menu a:hover, .nav-menu a:focus-visible { background: var(--green-tint); color: var(--navy); }
.nav-menu a:hover .note { color: var(--olive); }

/* ── Mobile navigation ─────────────────────────────────────────────────── */

.nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    padding: 0;
    background: var(--navy);
    border: 0;
    border-radius: var(--radius);
    color: #fff;
    cursor: pointer;
}
@media (min-width: 1050px) { .nav-toggle { display: none; } }

.nav-toggle span { position: relative; display: block; width: 20px; height: 2px; background: currentColor; }
.nav-toggle span::before,
.nav-toggle span::after {
    content: "";
    position: absolute;
    left: 0;
    width: 20px; height: 2px;
    background: currentColor;
    transition: transform var(--dur) var(--ease), top var(--dur) var(--ease);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top:  6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/*
 * The panel is a sibling of <header>, never a child. A header with a filter or
 * backdrop-filter becomes a containing block for position:fixed descendants,
 * which would size this against the header box instead of the viewport.
 */
.mobile-nav {
    position: fixed;
    inset: calc(var(--header-h)) 0 0 0;
    z-index: 1029;
    padding: var(--sp-4) var(--pad) var(--sp-9);
    background: var(--white);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--dur) var(--ease),
                transform var(--dur) var(--ease),
                visibility var(--dur) var(--ease);
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; }
@media (min-width: 1050px) { .mobile-nav { display: none; } }

.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav > ul > li { border-bottom: 1px solid var(--line); }
.mobile-nav > ul > li:last-child { border-bottom: 0; }
.mobile-nav a {
    display: block;
    padding: var(--sp-4) 0;
    font-family: var(--head);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
}
.mobile-nav a.is-active { color: var(--olive); }
.m-label {
    display: block;
    padding: var(--sp-4) 0 var(--sp-2);
    font-family: var(--head);
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--muted);
}
.m-sub { padding: 0 0 var(--sp-4) var(--sp-4); border-left: 3px solid var(--green); }
.m-sub a { padding: var(--sp-3) 0; font-size: 0.86rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--body); }
.mobile-nav .btn { width: 100%; margin-top: var(--sp-6); }
.mobile-nav .m-contact { margin-top: var(--sp-6); font-size: var(--fs-sm); color: var(--muted); }
.mobile-nav .m-contact a { display: inline; padding: 0; font-family: var(--sans); font-size: inherit; text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--navy-2); }

body.nav-open { overflow: hidden; }

/* ── Footer ────────────────────────────────────────────────────────────── */

.site-footer { background: var(--navy); color: rgba(255, 255, 255, 0.68); font-size: 0.93rem; }
.site-footer a { color: rgba(255, 255, 255, 0.68); text-decoration: none; transition: color var(--dur) var(--ease); }
.site-footer a:hover { color: #fff; text-decoration: underline; }

.footer-main {
    display: grid;
    gap: var(--sp-7);
    padding-block: var(--sp-10) var(--sp-7);
    grid-template-columns: 1fr;
}
@media (min-width: 640px) { .footer-main { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .footer-main { grid-template-columns: 1.7fr 1fr 1.25fr 1.3fr; } }

.footer-title {
    margin-bottom: var(--sp-5);
    font-family: var(--head);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: #fff;
}
.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list li { margin-bottom: var(--sp-1); }
/* Navigation targets, not inline prose — keep them comfortable to tap. */
.footer-list a, .footer-address a { display: inline-block; padding-block: 7px; }

.footer-brand img {
    height: 68px;
    width: auto;
    margin-bottom: var(--sp-5);
    /* Dark artwork on white: a white plate keeps it legible on navy without
       needing a separate reversed asset. */
    background: #fff;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
}
.footer-brand p { max-width: 44ch; line-height: 1.75; }

/* Credentials as plain text, not pills — they are facts to read, not controls. */
.footer-creds {
    margin-top: var(--sp-5);
    color: var(--green);
    font-family: var(--head);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.9;
}

address.footer-address { font-style: normal; line-height: 1.8; }

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding-block: var(--sp-5);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 0.81rem;
    color: rgba(255, 255, 255, 0.55);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.footer-legal a { display: inline-block; padding-block: 6px; }