/* ============================================================
   TS FAST AUTO LOGISTICS, LLC — HEADER STYLESHEET
   File: assets/css/header.css
   Purpose: Sticky header, logo, nav links, theme toggle, mobile menu
   Depends on: style.css (for design tokens)
   ============================================================ */

/* ------------------------------------------------------------
   1. HEADER WRAPPER
   ------------------------------------------------------------ */
.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background-color: var(--color-header-bg);
    border-bottom: 1px solid var(--color-header-border);
    color: var(--color-header-text);
    transition: background-color var(--transition-base),
        border-color var(--transition-base),
        box-shadow var(--transition-base);
}

.site-header.scrolled {
    box-shadow: 0 4px 16px rgba(10, 25, 48, 0.25);
}

/* Focus rings must stay visible on the navy bar */
.site-header :focus-visible {
    outline-color: var(--color-header-active);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    height: var(--header-height);
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* ------------------------------------------------------------
   2. LOGO
   ------------------------------------------------------------ */
.logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
    color: var(--color-header-text);
    text-decoration: none;
    white-space: nowrap;
    transition: opacity var(--transition-fast);
}

.logo:hover {
    color: var(--color-header-text);
    opacity: 0.9;
}

/* The logo mark is the TS shield (assets/brand/logo.svg): transparent, so it sits on both light and dark headers */
.logo-mark {
    display: block;
    flex-shrink: 0;
    width: auto;
    height: 42px;
    max-width: none;
    object-fit: contain;
}

.logo-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    line-height: 1.15;
}

.logo-text .brand-main {
    font-size: 1.0625rem;
    /* 17px */
    font-weight: var(--fw-extrabold);
    letter-spacing: -0.015em;
    color: var(--color-header-text);
}

.logo-text .brand-sub {
    font-size: 0.625rem;
    /* 10px */
    font-weight: var(--fw-semibold);
    color: var(--color-header-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ------------------------------------------------------------
   3. PRIMARY NAVIGATION
   ------------------------------------------------------------ */
.nav {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: center;
    min-width: 0;
}

.nav-list {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    /* 28px */
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-size: 0.9375rem;
    /* 15px */
    font-weight: var(--fw-semibold);
    line-height: 1.4;
    letter-spacing: -0.005em;
    color: var(--color-header-text);
    text-decoration: none;
    white-space: nowrap;
    padding: var(--space-2) 0;
    transition: color var(--transition-fast);
}

.nav-link:hover,
.nav-link.active {
    color: var(--color-header-active);
}

/* Animated underline on hover */
.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background-color: var(--color-header-active);
    transition: width var(--transition-base);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

/* ------------------------------------------------------------
   4. DROPDOWN (Services, Locations)
   ------------------------------------------------------------ */
.nav-item {
    position: relative;
}

/* Chevron. Drawn with ::before (::after is the underline) and moved
   AFTER the label with flex `order`, with its gap on the left. */
.nav-item.has-dropdown>.nav-link::before {
    content: '';
    order: 1;
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    margin-left: 7px;
    border-right: 1.75px solid currentColor;
    border-bottom: 1.75px solid currentColor;
    opacity: 0.65;
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.nav-item.has-dropdown:hover>.nav-link::before,
.nav-item.has-dropdown:focus-within>.nav-link::before {
    opacity: 1;
    transform: translateY(1px) rotate(-135deg);
}

/* Underline the label only, not the chevron */
.nav-item.has-dropdown>.nav-link:hover::after,
.nav-item.has-dropdown>.nav-link.active::after {
    width: calc(100% - 15px);
}

.dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(16px);
    min-width: 240px;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-3) 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transition-base),
        transform var(--transition-base),
        visibility var(--transition-base);
    z-index: var(--z-dropdown);
}

/* Invisible bridge over the gap between the link and the panel so the
   menu doesn't close while the pointer travels down to it. */
.dropdown::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -16px;
    height: 16px;
}

.nav-item.has-dropdown:hover .dropdown,
.nav-item.has-dropdown:focus-within .dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(12px);
}

/* Items are sized to their label so the slide-in underline (shared
   link rule in style.css) matches the text width, like the nav links */
.dropdown {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.dropdown a {
    display: block;
    margin: 0 var(--space-5);
    padding: 7px 0 5px;
    font-size: var(--fs-sm);
    line-height: 1.4;
    white-space: nowrap;
    font-weight: var(--fw-medium);
    color: var(--color-text-main);
    text-decoration: none;
    transition: background-color var(--transition-fast),
        color var(--transition-fast);
}

.dropdown a:hover {
    color: var(--color-primary);
}

/* ------------------------------------------------------------
   5. RIGHT-SIDE ACTIONS (phone, theme toggle, CTA)
   ------------------------------------------------------------ */
/* Every control on the right is 40px tall so they share one baseline */
.header-actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: var(--space-3);
}

.header-phone {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 40px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--color-header-text);
    text-decoration: none;
    padding: 0 var(--space-3);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast),
        color var(--transition-fast);
}

.header-phone:hover {
    background-color: var(--color-header-control-bg);
    color: var(--color-header-active);
}

.header-phone svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* "24/7" tag next to the Priority Line number (desktop header only: the number collapses to an icon on smaller screens) */
.header-phone .hp-247 {
    margin-left: var(--space-1);
    padding: 1px 5px;
    border: 1px solid currentColor;
    border-radius: 4px;
    font-size: 0.625rem;
    font-weight: var(--fw-extrabold);
    letter-spacing: 0.06em;
    line-height: 1.3;
    color: var(--color-header-active);
}

/* Theme toggle button */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background-color: var(--color-header-control-bg);
    border: 1px solid var(--color-header-control-border);
    border-radius: var(--radius-md);
    color: var(--color-header-text);
    cursor: pointer;
    transition: background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}

.theme-toggle:hover {
    background-color: var(--color-header-control-bg);
    border-color: var(--color-header-active);
    color: var(--color-header-active);
    transform: translateY(-1px);
}

.theme-toggle svg {
    width: 18px;
    height: 18px;
}

/* Show/hide sun or moon depending on current theme */
.theme-toggle .icon-sun {
    display: none;
}

.theme-toggle .icon-moon {
    display: block;
}

[data-theme="dark"] .theme-toggle .icon-sun {
    display: block;
}

[data-theme="dark"] .theme-toggle .icon-moon {
    display: none;
}

/* Header CTA button (Get a Quote) */
.header-cta {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 var(--space-5);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    line-height: 1;
    background-color: var(--color-cta);
    color: var(--color-cta-text);
    border: 2px solid var(--color-cta);
    border-radius: var(--radius-md);
    text-decoration: none;
    white-space: nowrap;
    transition: all var(--transition-base);
}

.header-cta:hover {
    background-color: var(--color-cta-hover);
    border-color: var(--color-cta-hover);
    color: var(--color-cta-text);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* ------------------------------------------------------------
   6. MOBILE MENU TOGGLE (hamburger)
   ------------------------------------------------------------ */
.menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background-color: var(--color-header-control-bg);
    border: 1px solid var(--color-header-control-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.menu-toggle:hover {
    border-color: var(--color-header-active);
}

.menu-toggle svg {
    width: 22px;
    height: 22px;
    color: var(--color-header-text);
}

/* ------------------------------------------------------------
   7. MOBILE MENU PANEL (hidden on desktop)
   ------------------------------------------------------------ */
.mobile-menu {
    display: none;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-bg);
    border-top: 1px solid var(--color-border);
    overflow-y: auto;
    padding: var(--space-6);
    z-index: var(--z-header);
    transform: translateX(100%);
    transition: transform var(--transition-base);
}

.mobile-menu.open {
    transform: translateX(0);
}

.mobile-menu-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-menu-list a {
    display: block;
    padding: var(--space-4) var(--space-3);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--color-text-main);
    text-decoration: none;
    border-bottom: 1px solid var(--color-border);
    transition: color var(--transition-fast),
        background-color var(--transition-fast);
}

.mobile-menu-list a:hover,
.mobile-menu-list a.active {
    color: var(--color-primary);
    background-color: var(--color-primary-light);
}

.mobile-menu-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.mobile-menu-actions .header-phone {
    color: var(--color-text-main);
    border: 1px solid var(--color-border);
}

.mobile-menu-actions .header-phone:hover {
    background-color: var(--color-bg-alt);
    color: var(--color-primary);
}

.mobile-menu-actions .header-cta,
.mobile-menu-actions .header-phone {
    width: 100%;
    height: 52px;
    justify-content: center;
    padding: 0 var(--space-4);
    font-size: var(--fs-base);
}

/* ------------------------------------------------------------
   8. RESPONSIVE BREAKPOINTS
   ------------------------------------------------------------ */

/* Small desktops: phone collapses to an icon button (the full
   number would push the nav onto two lines). With the Priority Line menu item the full number
   only fits from 1360px up. */
@media (max-width: 1359px) {
    .header-actions .header-phone {
        width: 40px;
        padding: 0;
        justify-content: center;
        background-color: var(--color-header-control-bg);
        border: 1px solid var(--color-header-control-border);
    }

    .header-actions .header-phone span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

/* Below this width the full nav no longer fits on one line:
   switch to the hamburger menu */
@media (max-width: 1179px) {
    .nav {
        display: none;
    }

    .menu-toggle {
        display: inline-flex;
    }

    .mobile-menu {
        display: block;
    }
}

/* Tablet: phone lives in the mobile menu instead */
/* The Priority Line stays one tap away on tablets and phones: the phone icon button remains in the header
   (it used to be hidden here, leaving the number only inside the menu) */

/* Small tablets / large phones */
@media (max-width: 768px) {
    .header-inner {
        gap: var(--space-4);
    }

    /* The tagline "Your vehicle. Our priority" stays visible on tablets and phones (it fits beside the buttons) */

    .logo-text .brand-main {
        font-size: var(--fs-base);
    }
}

/* Phones */
@media (max-width: 480px) {

    /* Header bar only — the mobile menu keeps its own quote button */
    .header-actions .header-cta {
        display: none;
    }

    .logo-mark {
        width: auto;
        height: 34px;
    }

    .logo-text .brand-main {
        font-size: var(--fs-sm);
    }

    /* The tagline is longer than the old subtitle: tighten it so the header still fits on small phones */
    .logo-text .brand-sub {
        font-size: 0.5625rem;
        letter-spacing: 0.05em;
    }
}

/* Small phones (up to 380px): logo + tagline + phone + theme + menu all have to fit in one row */
@media (max-width: 380px) {
    .header-inner {
        gap: var(--space-2);
        padding-left: var(--space-3);
        padding-right: var(--space-3);
    }

    .logo {
        gap: var(--space-2);
    }

    .logo-mark {
        height: 30px;
    }

    .logo-text .brand-main {
        font-size: 0.8125rem;
    }

    .logo-text .brand-sub {
        font-size: 0.5rem;
        letter-spacing: 0.03em;
    }

    .header-actions {
        gap: var(--space-1);
    }

    .header-actions .header-phone,
    .header-actions .theme-toggle,
    .header-actions .menu-toggle {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
    }
}

/* ---- Priority Line: header pill, menu item, live dot, big call button ---- */
@keyframes pl-pulse {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); }
    70% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.nav-priority {
    font-weight: var(--fw-extrabold);
    color: var(--color-header-active);
}

.nav-priority::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: #22c55e;
    animation: pl-pulse 2s infinite;
    vertical-align: middle;
}

.header-phone {
    height: 44px;
    gap: 10px;
    padding: 0 var(--space-4) 0 6px;
    background-color: var(--color-header-control-bg);
    border: 1px solid var(--color-header-control-border);
    border-radius: 999px;
}

.header-phone svg {
    width: 32px;
    height: 32px;
    padding: 8px;
    border-radius: 50%;
    background: var(--color-cta);
    color: var(--color-cta-text);
}

.header-phone .hp-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1;
}

.header-phone .hp-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.625rem;
    font-weight: var(--fw-extrabold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-header-active);
}

.header-phone .hp-label::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    animation: pl-pulse 2s infinite;
}

.header-phone .hp-num {
    font-size: 0.9375rem;
    font-weight: var(--fw-extrabold);
    letter-spacing: 0.01em;
}

/* The mobile-menu phone button is a plain, full-width action */
.mobile-menu-actions .header-phone {
    height: auto;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    justify-content: center;
}

.mobile-menu-actions .header-phone svg {
    width: 28px;
    height: 28px;
    padding: 6px;
}

@media (prefers-reduced-motion: reduce) {
    .nav-priority::before,
    .header-phone .hp-label::before { animation: none; }
}

/* Collapsed (small desktops and below): keep the phone button a perfect circle */
@media (max-width: 1359px) {
    .header-actions .header-phone {
        height: 40px;
        width: 40px;
    }

    .header-actions .header-phone svg {
        width: 28px;
        height: 28px;
        padding: 7px;
    }
}