/*
 * PT Liftology — Global Enhancements
 * enhancements.css
 *
 * Injected on every page. Contains:
 * 1. Scroll-triggered entrance animations
 * 2. Animated FAQ accordion
 * 3. Unified review card hover states
 * 4. Stronger hover shadows
 * 5. Grain texture on dark backgrounds
 * 6. Sticky mobile CTA bar
 * 7. Button micro-interactions
 * 8. Smooth section transitions
 * 9. Unified chip/tag hover
 * 10. Timeline hover states
 */

/* ── 1. SCROLL ANIMATIONS ─────────────────────────────────────────────────── */

.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* Stagger children of a reveal container */
.reveal-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-stagger.visible > *:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0s; }
.reveal-stagger.visible > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.1s; }
.reveal-stagger.visible > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.2s; }
.reveal-stagger.visible > *:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.3s; }
.reveal-stagger.visible > *:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 0.4s; }
.reveal-stagger.visible > *:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: 0.5s; }

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal-stagger > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ── 2. FAQ ACCORDION — smooth max-height animation ──────────────────────── */

/* Override the snap-open behavior on all FAQ implementations */
.faq-answer,
[class*="faq-answer"],
.faq-body {
    max-height: 0;
    overflow: hidden;
    padding-bottom: 0;
    transition: max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                padding-bottom 0.35s ease,
                opacity 0.3s ease,
                visibility 0s linear 0.35s;
    opacity: 0;
    visibility: hidden; /* Removes closed panels from tab order (WCAG 2.4.3) */
    display: block !important; /* Override display:none */
}

.faq-item.active .faq-answer,
.faq-item.open .faq-answer,
.faq-item.active .faq-body {
    max-height: 600px;
    padding-bottom: 24px;
    opacity: 1;
    visibility: visible; /* Restore to tab order when open */
    transition-delay: 0s; /* Become visible immediately on open */
}

/* ── 3. REVIEW CARDS — hover lift ────────────────────────────────────────── */

.review-card {
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.25s ease,
                border-color 0.25s ease !important;
}
.review-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 32px rgba(22, 76, 5, 0.12) !important;
    border-color: var(--green, #164C05) !important;
}

/* ── 4. STRONGER HOVER SHADOWS ────────────────────────────────────────────── */

/* Service cards — lift on hover */
.service-card,
[class*="service-card"],
.card {
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.25s ease,
                border-color 0.25s ease !important;
}
.service-card:hover,
[class*="service-card"]:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 40px rgba(22, 76, 5, 0.15) !important;
}

/* Condition cards */
.condition-card:hover,
.sport-card:hover,
.related-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 32px rgba(22, 76, 5, 0.14) !important;
}

/* Article cards */
.article-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(22, 76, 5, 0.12) !important;
}

/* ── 5. GRAIN TEXTURE ON DARK BACKGROUNDS ────────────────────────────────── */

/* Subtle noise texture makes dark backgrounds feel premium, not cheap */
.hero,
.hero-bg,
header,
.cta-band,
.about-snippet,
section[style*="background:var(--dark)"],
section[style*="background: var(--dark)"],
.site-header,
footer {
    position: relative;
}

.hero::after,
.cta-band::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
    background-size: 200px 200px;
}

/* Make sure hero content sits above grain */
.hero-content,
.hero .container,
.cta-band .container {
    position: relative;
    z-index: 2;
}

/* ── 6. STICKY MOBILE CTA BAR ────────────────────────────────────────────── */

.mobile-cta-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: var(--dark, #0e0e0e);
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 12px 16px;
    gap: 10px;
    align-items: center;
    justify-content: center;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.3);
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.mobile-cta-bar.visible {
    transform: translateY(0);
}

.mobile-cta-bar .mcb-call {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    color: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
}

.mobile-cta-bar .mcb-call:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.4);
}

.mobile-cta-bar .mcb-book {
    flex: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: var(--green, #164C05);
    border: 1px solid var(--green, #164C05);
    border-radius: 6px;
    color: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    transition: background 0.2s;
}

.mobile-cta-bar .mcb-book:hover {
    background: var(--green-light, #1e6007);
}

.mobile-cta-bar svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    flex-shrink: 0;
}

/* Add bottom padding to body so content isn't hidden behind bar */
body.has-mobile-cta {
    padding-bottom: 72px;
}

@media (min-width: 769px) {
    .mobile-cta-bar { display: none !important; }
    body.has-mobile-cta { padding-bottom: 0; }
}

@media (max-width: 768px) {
    .mobile-cta-bar { display: flex; }
}

/* ── 7. BUTTON MICRO-INTERACTIONS ─────────────────────────────────────────── */

.btn,
[class*="btn-"],
button[type="submit"] {
    transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.25s ease,
                box-shadow 0.2s ease,
                border-color 0.25s ease !important;
}

.btn:hover,
[class*="btn-"]:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 6px 20px rgba(22, 76, 5, 0.25);
}

.btn:active,
[class*="btn-"]:active {
    transform: translateY(0) scale(0.99);
    box-shadow: none;
}

/* ── 8. SECTION LABEL ENHANCEMENT ────────────────────────────────────────── */

/* Add a subtle green line after section labels for visual rhythm */
.section-label {
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-label::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 2px;
    background: var(--green, #164C05);
    flex-shrink: 0;
}

/* ── 9. UNIFIED CHIP/TAG HOVER ────────────────────────────────────────────── */

/* Replace all inline JS hover handlers with CSS */
.chip,
.condition-chip,
.related-chip,
[class*="-chip"],
[class*="-tag"] {
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease !important;
    cursor: pointer;
}

.chip:hover,
.condition-chip:hover,
.related-chip:hover,
[class*="-chip"]:hover {
    background: var(--green, #164C05) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* ── 10. TIMELINE ITEM HOVER ──────────────────────────────────────────────── */

.timeline-item {
    transition: background 0.2s ease, padding-left 0.2s ease;
    border-radius: 6px;
    padding-left: 0;
}

.timeline-item:hover {
    background: var(--off-white, #f7f7f5);
    padding-left: 12px;
}

/* ── 11. HERO IMAGE — higher opacity ──────────────────────────────────────── */

/* Raise hero background image visibility globally */
.hero-bg {
    opacity: 0.45 !important;
}

/* ── 12. STAT NUMBERS — count-up effect support ───────────────────────────── */

.stat-number[data-target] {
    font-variant-numeric: tabular-nums;
}

/* ── 13. CREDENTIALS — differentiate fellowship ───────────────────────────── */

/* Make FAAOMPT credential stand out visually */
[class*="cred"] strong:first-child,
.cred-text strong {
    transition: color 0.2s;
}

/* ── 14. FORM FIELD FOCUS GLOW ────────────────────────────────────────────── */

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--green, #164C05) !important;
    box-shadow: 0 0 0 3px rgba(22, 76, 5, 0.12) !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* ── 15. MISSING BTN-OUTLINE CLASS FIX ───────────────────────────────────── */

.btn-outline {
    background: transparent;
    color: var(--green, #164C05);
    border: 2px solid var(--green, #164C05);
    padding: 14px 32px;
    border-radius: 4px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: inline-block;
    cursor: pointer;
    transition: background 0.25s, color 0.25s;
}
.btn-outline:hover {
    background: var(--green, #164C05);
    color: #fff;
}

/* ── 16. IMPROVED SECTION SPACING ────────────────────────────────────────── */

/* Slightly larger sections feel more premium */
.section {
    padding: 100px 0;
}

/* ── 17. COMPARISON TABLE — SVG check/cross ───────────────────────────────── */

/* Upgrade plain text ✓/✗ to styled SVG equivalents */
.comp-check { color: #164C05; font-size: 18px; font-weight: 700; }
.comp-x { color: #ccc; font-size: 18px; }

/* ── 18. SMOOTH SCROLL PROGRESS ───────────────────────────────────────────── */

/* Thin green progress bar at top of page showing scroll depth */
.scroll-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: var(--green, #164C05);
    width: 0%;
    z-index: 9999;
    transition: width 0.1s linear;
    pointer-events: none;
}

/* ── 19. ACCESSIBILITY — FOCUS VISIBLE STYLES (WCAG 2.4.7) ───────────────── */
/*
 * Provides a visible keyboard focus ring on all interactive elements.
 * Uses :focus-visible so mouse users are not affected — only keyboard/AT users.
 */

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible,
.faq-question:focus-visible,
.accordion-btn:focus-visible,
.body-map-link:focus-visible,
.body-zone:focus-visible,
.service-card:focus-visible,
.condition-card:focus-visible,
.article-card:focus-visible,
.chip:focus-visible,
.hamburger:focus-visible {
    outline: 3px solid #164C05;
    outline-offset: 3px;
    border-radius: 2px;
    text-decoration: none;
}

/* High-contrast mode support */
@media (forced-colors: active) {
    a:focus-visible,
    button:focus-visible,
    [role="button"]:focus-visible {
        outline: 3px solid ButtonText;
    }
}

/* Skip to main content link (hidden until focused) */
.skip-to-main {
    position: absolute;
    top: -100px;
    left: 16px;
    background: #164C05;
    color: #fff;
    padding: 10px 20px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    z-index: 10000;
    text-decoration: none;
    border-radius: 0 0 4px 4px;
    transition: top 0.2s;
}
.skip-to-main:focus {
    top: 0;
    outline: 3px solid #fff;
    outline-offset: 2px;
}