/* Hand-authored behavioral/interaction styles that complement the Tailwind build. */

::selection {
    background: #D4AF37;
    color: #0F172A;
}

:focus-visible {
    outline: 2px solid #D4AF37;
    outline-offset: 2px;
}

/* Header */
.nav-link {
    position: relative;
    color: rgba(255, 255, 255, 0.9);
    padding-bottom: 6px;
    transition: color 0.25s ease;
}
.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 0;
    background: #D4AF37;
    transition: width 0.3s ease;
}
.nav-link:hover,
.nav-link.is-active {
    color: #D4AF37;
}
.nav-link:hover::after,
.nav-link.is-active::after {
    width: 100%;
}
.header-icon {
    color: #fff;
}

#site-header[data-state="scrolled"] {
    background: rgba(15, 23, 42, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.35);
}
#site-header[data-state="scrolled"] .h-20,
#site-header[data-state="scrolled"] .md\:h-24 {
    height: 4.5rem;
}

/* Homepage hero header starts fully transparent; inner-page headers sit on a dark banner too, so this default works everywhere */
#site-header[data-state="top"] {
    background: linear-gradient(to bottom, rgba(15, 23, 42, 0.55), rgba(15, 23, 42, 0));
}

/* Marquee */
.marquee-wrapper {
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

/* Filter / tab buttons (fleet, gallery, services) */
.filter-btn {
    transition: all 0.25s ease;
}
.filter-btn.is-active {
    background: linear-gradient(135deg, #D4AF37 0%, #F1D57A 50%, #B8912A 100%);
    color: #0F172A;
    box-shadow: 0 10px 30px -8px rgba(212, 175, 55, 0.5);
}

/* FAQ accordion */
.faq-item[open] > summary .faq-icon {
    transform: rotate(45deg);
}
summary::-webkit-details-marker {
    display: none;
}
summary {
    cursor: pointer;
    list-style: none;
}
.faq-icon {
    transition: transform 0.3s ease;
}

/* Counter reveal */
.counter-value {
    font-variant-numeric: tabular-nums;
}

/* Lightbox */
#lightbox {
    background: rgba(15, 23, 42, 0.95);
}

/* Swiper accents */
.swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.4) !important;
    opacity: 1 !important;
}
.swiper-pagination-bullet-active {
    background: #D4AF37 !important;
}
.swiper-button-next,
.swiper-button-prev {
    color: #D4AF37 !important;
}
.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 18px !important;
}

/* Custom scrollbar (subtle) */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #F8F8F8;
}
::-webkit-scrollbar-thumb {
    background: #cbd0da;
    border-radius: 999px;
}

/* Reveal-on-scroll base state, toggled by GSAP/AOS */
.reveal-up {
    opacity: 0;
    transform: translateY(40px);
}