/* ══════════════════════════════════════════════════════════
   header-logo.css — animated, clickable TIMBUKTU nav title
   Loaded AFTER each page's own stylesheet on every page.
   Uses only background-position + filter so it never fights
   the translateX(-50%) centering in the page CSS.
══════════════════════════════════════════════════════════ */
a.header-logo {
    pointer-events: auto;
    cursor: pointer;
    text-decoration: none;
    text-shadow: none;
    z-index: 2;
    -webkit-tap-highlight-color: transparent;
}

a.header-logo .header-logo-text {
    display: inline-block;
    background: linear-gradient(90deg, #c9a227 0%, #ffd700 30%, #fff8dc 50%, #ffd700 70%, #c9a227 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, .35));
    animation: tmt-logo-shimmer 4.5s linear infinite;
    transition: transform .3s ease, filter .3s ease;
}

a.header-logo:hover .header-logo-text,
a.header-logo:focus-visible .header-logo-text {
    transform: scale(1.05);
    filter: drop-shadow(0 0 16px rgba(255, 215, 0, .8));
    animation-duration: 1.8s;
}

a.header-logo:focus-visible {
    outline: 2px solid #ffd700;
    outline-offset: 6px;
    border-radius: 4px;
}

@keyframes tmt-logo-shimmer {
    from { background-position: 0% 0; }
    to   { background-position: 200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    a.header-logo .header-logo-text { animation: none; background-position: 50% 0; transition: none; }
}

/* ══════════════════════════════════════════════════════════ Longer nav labels (Explore Divisions / Company Mission / Contact Us) The brand is normally absolutely centered; with the longer labels it would collide with the nav on mid-size screens, so: 1001–1440px : brand flows left (next to the logo images), nav right ≤1000px : hamburger menu (replaces the old 900px breakpoint) ══════════════════════════════════════════════════════════ */
@media (min-width: 1001px) and (max-width: 1440px) { .header-container a.header-logo { position: static; transform: none; margin-right: auto; margin-left: 4px; }
.nav-item a { padding: 8px 10px; letter-spacing: .5px; }
}
@media (max-width: 1000px) { .header-container { flex-wrap: wrap; padding: 10px 16px; height: auto; }
.hamburger { display: flex; order: 3; }
.logo-images { order: 1; }
.header-container a.header-logo { position: static; transform: none; flex: 1; text-align: center; order: 2; }
.header-links { order: 4; width: 100%; overflow: hidden; max-height: 0; flex: 1 0 100%; border-top: 0 solid transparent; transition: max-height .4s ease, border-top .4s; }
.nav-toggle-input:checked ~ .header-links { max-height: 500px; border-top: 1px solid rgba(255,215,0,.15); }
.nav-list { flex-direction: column; gap: 4px; padding: 10px 0; width: 100%; align-items: stretch; }
.nav-item { width: 100%; text-align: center; }
.nav-item a { display: block; width: 100%; padding: 12px 0; font-size: 15px; color: rgba(255,255,255,.85); }
.nav-item a::after { display: none; }
.nav-item a:hover { color: var(--gold, #FFD700); background: rgba(255,215,0,.08); }
}