/* =========================================================
   YQO Miami Landing — custom styles on top of Tailwind CDN
   Kept minimal; prefer Tailwind utilities in HTML where possible
   ========================================================= */

/* --- Base --- */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 72px; /* sticky header offset */
}

body {
    /* Bottom padding on mobile so sticky CTA doesn't overlap content */
    padding-bottom: 80px;
}

@media (min-width: 768px) {
    body {
        padding-bottom: 0;
    }
}

/* --- Selection color matches brand --- */
::selection {
    background: #10B981;
    color: #fff;
}

/* --- Focus ring consistency --- */
*:focus-visible {
    outline: 2px solid #10B981;
    outline-offset: 2px;
    border-radius: 4px;
}

/* --- Remove default summary marker for FAQ --- */
details > summary {
    list-style: none;
}
details > summary::-webkit-details-marker {
    display: none;
}

/* --- FAQ open animation --- */
details[open] > div {
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

#hero-video::-webkit-media-controls-panel {
    background: rgba(10, 37, 64, 0.9);
}

/* --- Hero form subtle emphasis --- */
#hero-form:focus-within {
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2), 0 25px 50px -12px rgba(0, 0, 0, 0.4);
}

/* --- Button active state --- */
button[type="submit"]:active,
a.bg-accent:active {
    transform: translateY(1px);
}

/* --- Skip to main content link (a11y) --- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: #0A2540;
    color: white;
    padding: 0.75rem 1rem;
    z-index: 100;
}

.skip-link:focus {
    left: 0;
}

/* --- Team card hover --- */
#team img {
    transition: transform 0.3s ease;
}

#team .text-center:hover img {
    transform: scale(1.03);
}

/* --- Prevent layout shift on images before load --- */
img {
    max-width: 100%;
    height: auto;
}

/* --- Form success / error state --- */
.form-success {
    background: #ECFDF5;
    border: 2px solid #10B981;
    color: #065F46;
    padding: 1rem;
    border-radius: 0.5rem;
    text-align: center;
    font-weight: 600;
}

.form-error {
    background: #FEF2F2;
    border: 2px solid #EF4444;
    color: #991B1B;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
}

.field-invalid {
    border-color: #EF4444 !important;
    background: #FEF2F2;
}

/* --- Reduce motion respect --- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* --- Print basics --- */
@media print {
    header, #sticky-cta, .bg-navy, video { display: none !important; }
    body { color: #000; background: #fff; }
}