/* ============================================================
   SITE.CSS: shared rules for every page.
   Loaded AFTER each page's inline <style>, so these rules win by
   source order. Interaction polish follows Emil Kowalski's
   design-engineering principles: spring curves, layered shadows,
   press feedback, specific-property transitions.
   ============================================================ */

:root {
    /* Strong custom easing curves — the built-in CSS ones lack punch */
    --ease-spring: cubic-bezier(0.34, 1.2, 0.64, 1);   /* subtle overshoot for hovers */
    --ease-out-strong: cubic-bezier(0.16, 1, 0.3, 1);  /* decelerate — reveals */
    --ease-out-quick: cubic-bezier(0.23, 1, 0.32, 1);  /* UI responses */
}

/* ---- BUTTONS: specific-prop transitions + layered shadows + press feedback ---- */
.btn {
    transition:
        transform 0.4s var(--ease-spring),
        box-shadow 0.3s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        color 0.2s ease;
}

.btn-primary:hover {
    box-shadow:
        0 4px 8px rgba(196, 30, 36, 0.15),
        0 12px 32px rgba(196, 30, 36, 0.25);
}
.btn-primary:active {
    transform: translateY(0) scale(0.97);
    box-shadow: 0 2px 4px rgba(196, 30, 36, 0.15);
    transition-duration: 0.1s;
}

.btn-whatsapp:hover {
    box-shadow:
        0 4px 8px rgba(37, 211, 102, 0.15),
        0 12px 32px rgba(37, 211, 102, 0.25);
}
.btn-whatsapp:active {
    transform: translateY(0) scale(0.97);
    box-shadow: 0 2px 4px rgba(37, 211, 102, 0.15);
    transition-duration: 0.1s;
}

.btn-outline:active {
    transform: translateY(0) scale(0.97);
    transition-duration: 0.1s;
}

.btn-dark:hover {
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.1),
        0 12px 28px rgba(0, 0, 0, 0.15);
}
.btn-dark:active {
    transform: translateY(0) scale(0.97);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition-duration: 0.1s;
}

/* ---- CARDS: spring hover + layered shadows ---- */
.value-card,
.team-card,
.fleet-card,
.contact-card,
.checklist-card,
.equipment-card,
.aircraft-card,
.who-uses-card,
.why-card,
.inclusion-card,
.route-card {
    transition:
        transform 0.5s var(--ease-spring),
        box-shadow 0.4s ease,
        border-color 0.3s ease,
        background 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
    .value-card:hover,
    .team-card:hover,
    .fleet-card:hover,
    .contact-card:hover,
    .checklist-card:hover,
    .who-uses-card:hover,
    .why-card:hover,
    .route-card:hover {
        box-shadow:
            0 4px 6px rgba(26, 26, 46, 0.03),
            0 12px 20px rgba(26, 26, 46, 0.06),
            0 24px 48px rgba(26, 26, 46, 0.08);
    }

    /* Dark-background cards — subtle lifted glow instead of shadow */
    .equipment-card:hover,
    .inclusion-card:hover {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.14);
        box-shadow: 0 20px 48px rgba(0, 0, 0, 0.25);
    }

    .aircraft-card:hover {
        box-shadow:
            0 4px 6px rgba(26, 26, 46, 0.03),
            0 16px 32px rgba(26, 26, 46, 0.08),
            0 32px 64px rgba(26, 26, 46, 0.1);
    }
}

/* ---- IMAGES: spring scale + subtle brightness lift ---- */
.story-media img,
.fleet-card-img,
.aircraft-card img {
    transition:
        transform 0.6s var(--ease-out-strong),
        filter 0.4s ease;
}

@media (hover: hover) and (pointer: fine) {
    .story-media:hover img,
    .fleet-card:hover .fleet-card-img,
    .aircraft-card:hover img {
        filter: brightness(1.04);
    }
}

/* ---- SCROLL REVEAL: fade and rise, no blur (blur repaints every frame) ---- */
@media (prefers-reduced-motion: no-preference) {
    .fade-up {
        opacity: 0;
        transform: translateY(24px);
        transition:
            opacity 0.8s var(--ease-out-strong),
            transform 0.8s var(--ease-out-strong);
    }
    .fade-up.visible {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---- CTA PHONE LINK: smoother color transition ---- */
.cta-phone {
    transition: color 0.25s var(--ease-out-quick);
}

/* ---- REDUCED MOTION: strip movement, keep opacity ---- */
@media (prefers-reduced-motion: reduce) {
    .btn,
    .btn:hover,
    .btn:active,
    .value-card,
    .team-card,
    .fleet-card,
    .contact-card,
    .checklist-card,
    .equipment-card,
    .aircraft-card,
    .who-uses-card,
    .why-card,
    .inclusion-card,
    .route-card {
        transform: none !important;
    }
}

/* ---- EYEBROW ON DARK SECTIONS: lighter red that passes AA on charcoal ---- */
.eyebrow.eyebrow--on-dark { color: #FF6B70; }

/* ---- SMALL BUTTON ---- */
.btn.btn-sm { font-size: 16px; padding: 12px 24px; }

/* ---- SKIP LINK ---- */
.skip-link {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 2000;
    padding: 10px 16px;
    border-radius: 6px;
    background: #fff;
    color: #1A1A2E;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    transition: top 0.2s ease;
}
.skip-link:focus { top: 12px; outline: 2px solid #1A1A2E; outline-offset: 2px; }
main:focus { outline: none; }

/* ---- FOCUS: a visible ring for keyboard users everywhere ---- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #C41E24;
    outline-offset: 3px;
    border-radius: 4px;
}
.form-input:focus-visible,
.form-select:focus-visible,
.form-textarea:focus-visible {
    outline: 2px solid #1A1A2E;
    outline-offset: 1px;
}

/* ---- PRINT: case managers print fleet, credentials and terms ---- */
@media print {
    #site-nav, .nav, .sticky-wa, #stickyWa, .qd-backdrop, .hero-video, .hero-video-toggle,
    .skip-link, .instagram-section, .cta-section, #site-overlay, .mobile-overlay { display: none !important; }
    body { background: #fff !important; color: #000 !important; padding-bottom: 0 !important; font-size: 12pt; }
    .hero { min-height: auto !important; background: #fff !important; color: #000 !important; padding: 0 !important; }
    .hero-bg, .hero-bg::after { display: none !important; }
    .hero h1, .hero-sub, .hero .eyebrow { color: #000 !important; }
    .fade-up { opacity: 1 !important; transform: none !important; }
    a[href^="http"]:not([href*="reddotjet"])::after { content: " (" attr(href) ")"; font-size: 0.85em; }
    section { break-inside: avoid-page; padding: 16pt 0 !important; }
    img { max-width: 100% !important; }
}

/* ---- FAQ ACCORDION: a real button inside the question heading ---- */
.faq-heading { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }
button.faq-question {
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    font: inherit;
    color: inherit;
}
.faq-question .faq-q { color: var(--text-primary, #1A1A2E); }

/* ---- NO-JS: reveal content that scroll animations would otherwise hide ---- */
.no-js .fade-up { opacity: 1 !important; transform: none !important; }