/* Aid-One Shared Styles */
/* Language Selector - Include in all pages */

.lang-selector {
    display: flex;
    gap: 0.5rem;
    margin-left: 2rem;
    padding-left: 2rem;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
}

.lang-btn {
    background: none;
    border: none;
    font-size: 0.75rem;
    font-weight: 500;
    color: #999;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: all 0.2s ease;
    font-family: inherit;
}

.lang-btn:hover {
    color: #333;
}

.lang-btn.active {
    color: #111;
    background: rgba(0, 0, 0, 0.08);
    font-weight: 600;
}

/* Responsive */
@media (max-width: 768px) {
    .lang-selector {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        margin-top: 1rem;
        justify-content: center;
        width: 100%;
    }
}

/* ========================================
   Transitions & Animations (iOS Feel)
   ======================================== */

/* 1. Page Fade Transition */
body {
    opacity: 0;
    /* Start hidden */
    transition: opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    /* Smooth ease */
}

body.page-loaded {
    opacity: 1;
    /* Fade in */
}

body.page-exiting {
    opacity: 0;
    /* Fade out */
}

/* 2. Snappy Active States (iOS Touch Feedback) */
a,
button,
.cta-button,
.lang-btn,
.nav-link,
.phase-card,
.service-card,
.highlight-card {
    transition: transform 0.1s cubic-bezier(0.34, 1.56, 0.64, 1),
        background-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease;
    /* Snappy spring-like return */
}

/* Scale down slightly on click */
a:active,
button:active,
.cta-button:active,
.lang-btn:active,
.nav-link:active,
.service-card:active,
.highlight-card:active {
    transform: scale(0.96);
}

/* Exclude the logo/brand from scaling if desired, typically nice if it does too */

/* Smooth Scrolling globally */
html {
    scroll-behavior: smooth;
}

/* ========================================
   External Caption Box - Glassmorphism Style
   ======================================== */
.caption-box {
    margin-top: 1.5rem;
    padding: 1.25rem 1.75rem;
    border-radius: 16px;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.3s ease;
    /* Glassmorphism base */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.caption-text {
    font-size: 1.1rem;
    color: #2a2a2a;
    line-height: 1.6;
    font-weight: 500;
    transition: opacity 0.2s ease;
}

/* Decompression Theme (Teal Glassmorphism) */
.caption-box--decompression {
    background: linear-gradient(135deg,
            rgba(107, 155, 148, 0.15) 0%,
            rgba(107, 155, 148, 0.08) 50%,
            rgba(90, 138, 131, 0.12) 100%);
    border: 1px solid rgba(107, 155, 148, 0.25);
    box-shadow:
        0 8px 32px rgba(107, 155, 148, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.caption-box--decompression .caption-text {
    color: #1f3d38;
}

/* EMDR Theme (Purple Glassmorphism) */
.caption-box--emdr {
    background: linear-gradient(135deg,
            rgba(139, 123, 176, 0.15) 0%,
            rgba(139, 123, 176, 0.08) 50%,
            rgba(122, 106, 159, 0.12) 100%);
    border: 1px solid rgba(139, 123, 176, 0.25);
    box-shadow:
        0 8px 32px rgba(139, 123, 176, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.caption-box--emdr .caption-text {
    color: #2d2541;
}

/* Empty State */
.caption-box:empty,
.caption-text:empty {
    opacity: 0.6;
}

/* Responsive adjustment */
@media (max-width: 768px) {
    .caption-box {
        margin-top: 1rem;
        padding: 1rem 1.25rem;
        border-radius: 12px;
    }

    .caption-text {
        font-size: 1rem;
    }
}