/* ═══════════════════════════════════════════════════════════════
   theme.css — shared across all pages
   1. Nav theme toggle
   2. Dark mode (tokens + per-component surfaces)
   3. CTA slide-arrow motion
   4. Floating discovery-call button
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Nav right-side grouping + theme toggle ─────────────────── */
.nav-right {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--gray-warm);
    cursor: pointer;
    position: relative;
    transition: background 0.2s ease, color 0.2s ease;
}
.theme-toggle:hover { background: rgba(107, 143, 113, 0.08); color: var(--charcoal); }

.theme-toggle svg {
    width: 17px;
    height: 17px;
    position: absolute;
    transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.theme-toggle .icon-moon { opacity: 0; transform: rotate(90deg) scale(0.5); }

[data-theme="dark"] .theme-toggle .icon-sun  { opacity: 0; transform: rotate(-90deg) scale(0.5); }
[data-theme="dark"] .theme-toggle .icon-moon { opacity: 1; transform: none; }
[data-theme="dark"] .theme-toggle:hover { background: rgba(255, 255, 255, 0.07); }

/* ── 2. Dark mode ──────────────────────────────────────────────── */
[data-theme="dark"] { color-scheme: dark; }

[data-theme="dark"] {
    --cream:       #201D1A;
    --sand:        #322E28;
    --charcoal:    #ECE7E0;
    --gray-warm:   #B7B0A7;
    --gray-light:  #867F76;
    --sage:        #8FAA95;
    --sage-light:  #A5BEAB;
    --sage-faint:  rgba(143, 170, 149, 0.14);
    --peach:       #E8A886;
    --surface:     #2A2622;

    --shadow-soft:   0 2px 16px rgba(0, 0, 0, 0.35);
    --shadow-medium: 0 4px 24px rgba(0, 0, 0, 0.40);
    --shadow-hover:  0 8px 32px rgba(0, 0, 0, 0.50);
    --shadow-pill:   0 4px 24px rgba(0, 0, 0, 0.45);
}

/* page texture */
[data-theme="dark"] body::before {
    background-image: repeating-linear-gradient(
        0deg,
        transparent, transparent 2px,
        rgba(255, 255, 255, 0.008) 2px, rgba(255, 255, 255, 0.008) 4px
    );
}

/* nav + mobile menu */
[data-theme="dark"] .nav-pill {
    background: rgba(32, 29, 26, 0.60);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .nav-pill:hover {
    background: rgba(32, 29, 26, 0.72);
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .nav-links a:hover { background: rgba(143, 170, 149, 0.10); }
[data-theme="dark"] .mobile-menu {
    background: rgba(32, 29, 26, 0.85);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* card surfaces (all pages) */
[data-theme="dark"] .service-card,
[data-theme="dark"] .about-content,
[data-theme="dark"] .t-card,
[data-theme="dark"] .svc-body,
[data-theme="dark"] .content-block,
[data-theme="dark"] .booking-embed-wrap {
    background: var(--surface);
    border-color: rgba(255, 255, 255, 0.07);
}
[data-theme="dark"] .value-card {
    background-color: var(--surface);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .value-card:hover { box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); }
[data-theme="dark"] .t-card figcaption { border-top-color: rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .service-link { border-top-color: rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .service-card:hover { border-color: rgba(143, 170, 149, 0.35); }
[data-theme="dark"] .profile-image { border-color: rgba(255, 255, 255, 0.12); }

/* buttons: light sage reads better with dark text in dark mode */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .mobile-cta,
[data-theme="dark"] .floating-cta { color: #201D1A; }
[data-theme="dark"] .nav-cta { color: #201D1A !important; }
[data-theme="dark"] .btn-secondary { border-color: rgba(255, 255, 255, 0.22); }

/* CTA banner: deeper sage so white text keeps contrast */
[data-theme="dark"] .cta-banner,
[data-theme="dark"] .cta-section {
    background: #3F5944;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] .cta-banner h2,
[data-theme="dark"] .cta-section h2 { color: #FFFFFF; }
[data-theme="dark"] .btn-white { background: #ECE7E0; color: #3F5944; }

/* services: folder tabs + FAQ */
[data-theme="dark"] .svc-folder { --tab-fill: var(--surface); }
[data-theme="dark"] .svc-tab {
    background: #282520;
    color: var(--gray-warm);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.25);
}
[data-theme="dark"] .svc-tab:hover { background: #33302A; color: var(--charcoal); }
[data-theme="dark"] .svc-tab.active {
    background: var(--surface);
    color: var(--charcoal);
    box-shadow: 0 -5px 18px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] details.faq-item {
    background: rgba(42, 38, 34, 0.92);
    border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] details.faq-item summary::after { border-color: rgba(255, 255, 255, 0.08); }

/* testimonial coverflow controls */
[data-theme="dark"] .coverflow-controls {
    background: rgba(42, 38, 34, 0.75);
    border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .coverflow-dot { background: rgba(255, 255, 255, 0.18); }
[data-theme="dark"] .coverflow-dot:hover { background: rgba(255, 255, 255, 0.32); }
[data-theme="dark"] .coverflow-dot.is-active { background: var(--sage); }

/* contact: receipt */
[data-theme="dark"] .receipt { background: var(--surface); }
[data-theme="dark"] .receipt::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='14' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 10,14 20,3 30,14 40,3 50,14 60,3 70,14 80,3 90,14 100,3 110,14 120,3 130,14 140,3 150,14 160,3 170,14 180,3 190,14 200,3 210,14 220,3 230,14 240,3 250,14 260,3 270,14 280,3 290,14 300,3 300,0' fill='%232A2622'/%3E%3C/svg%3E");
}
[data-theme="dark"] .receipt-divider { border-top-color: rgba(255, 255, 255, 0.16); }
[data-theme="dark"] .receipt-slot { filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.5)); }

/* ── 3. CTA slide-arrow motion ─────────────────────────────────── */
.has-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}
.mobile-cta.has-arrow { display: flex; }
.service-link.has-arrow { width: 100%; justify-content: flex-start; gap: 0.35rem; }
.service-link.has-arrow:hover { gap: 0.35rem; } /* motion comes from the arrow itself */

.btn-arrow {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-arrow svg { width: 15px; height: 15px; display: block; }
.service-link .btn-arrow svg { width: 14px; height: 14px; }

.has-arrow:hover .btn-arrow,
.has-arrow:focus-visible .btn-arrow { transform: translateX(4px); }

.theme-toggle:focus-visible,
.floating-cta:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }
/* inset ring so it follows the tab shape and never crosses the folder seam */
.svc-tab:focus-visible { outline: 2px solid var(--sage); outline-offset: -4px; border-radius: 12px 12px 0 0; }

/* ── 4. Floating discovery-call button ─────────────────────────── */
.floating-cta {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 900;
    display: flex;
    align-items: center;
    border: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background: var(--sage);
    color: var(--white);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.85rem 1.4rem;
    border-radius: 9999px;
    box-shadow: 0 4px 20px rgba(107, 143, 113, 0.40);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.25s ease,
                background 0.2s ease,
                opacity 0.35s ease;
}
.floating-cta:hover {
    background: var(--sage-light);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 28px rgba(107, 143, 113, 0.45);
}
.floating-cta:active { transform: scale(0.96); }

.fc-icon,
.fc-arrow {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    flex-shrink: 0;
    transition: width 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                margin 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.25s ease,
                transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.fc-icon svg, .fc-arrow svg { width: 16px; height: 16px; flex-shrink: 0; }

.fc-icon  { width: 16px; margin-right: 0.55rem; }
.fc-arrow { width: 0; margin-left: 0; opacity: 0; transform: translateX(10px); }

.floating-cta:hover .fc-icon,
.floating-cta:focus-visible .fc-icon { width: 0; margin-right: 0; opacity: 0; transform: translateX(-10px); }
.floating-cta:hover .fc-arrow,
.floating-cta:focus-visible .fc-arrow { width: 16px; margin-left: 0.55rem; opacity: 1; transform: none; }

/* slides away when the footer comes into view */
.floating-cta.is-away {
    opacity: 0;
    transform: translateY(140%);
    pointer-events: none;
}

[data-theme="dark"] .floating-cta { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45); }

@media (max-width: 600px) {
    .floating-cta {
        right: 1rem;
        bottom: 1rem;
        padding: 0.8rem 1.15rem;
        font-size: 0.85rem;
    }
}

/* ── Reduced motion ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .btn-arrow,
    .fc-icon,
    .fc-arrow,
    .theme-toggle svg,
    .floating-cta { transition: opacity 0.2s ease; }
    .has-arrow:hover .btn-arrow { transform: none; }
    .floating-cta:hover { transform: none; }
}