/* ============================================
   THEME TOGGLE BUTTON
   Vanilla CSS port of the 21st.dev React component
   ============================================ */

/* Nav actions wrapper (toggle + location grouped on right) */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

/* ---- Toggle container ---- */
.theme-toggle {
    display: flex;
    width: 64px;
    height: 32px;
    padding: 4px;
    border-radius: 100px;
    cursor: pointer;
    background: #18181b;
    border: 1px solid #3f3f46;
    transition: background 0.3s ease, border-color 0.3s ease;
    flex-shrink: 0;
    position: relative;
    outline: none;
}

.theme-toggle:focus-visible {
    box-shadow: 0 0 0 2px rgba(196, 30, 58, 0.5);
}

/* ---- Inner flex row (justify-between) ---- */
.theme-toggle-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* ---- Thumb (the sliding circle) ---- */
.tt-thumb {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #3f3f46;
    flex-shrink: 0;
    position: relative;
    /* slides right on light mode */
    transform: translateX(0);
    transition:
        transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        background 0.3s ease;
    z-index: 1;
}

/* ---- Alt icon slot (the non-thumb icon) ---- */
.tt-alt {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    position: relative;
    /* slides left on light mode */
    transform: translateX(0);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---- Icon layers (stacked, opacity-toggled) ---- */
.tt-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

/* Dark mode defaults: moon in thumb, sun (dim) in alt */
.tt-thumb .tt-moon  { opacity: 1; color: #ffffff; }
.tt-thumb .tt-sun   { opacity: 0; color: #374151; }
.tt-alt  .tt-sun    { opacity: 1; color: #71717a; }
.tt-alt  .tt-moon   { opacity: 0; color: #000000; }

/* ============================================
   LIGHT MODE — TOGGLE APPEARANCE
   ============================================ */

html[data-theme="light"] .theme-toggle {
    background: #ffffff;
    border-color: #e4e4e7;
}

/* Thumb slides right (+32px = width of alt slot) */
html[data-theme="light"] .tt-thumb {
    transform: translateX(32px);
    background: #e4e4e7;
}

/* Alt slot slides left (−32px) */
html[data-theme="light"] .tt-alt {
    transform: translateX(-32px);
}

/* Swap visible icons */
html[data-theme="light"] .tt-thumb .tt-moon { opacity: 0; }
html[data-theme="light"] .tt-thumb .tt-sun  { opacity: 1; }
html[data-theme="light"] .tt-alt  .tt-sun   { opacity: 0; }
html[data-theme="light"] .tt-alt  .tt-moon  { opacity: 1; }

/* ============================================
   LIGHT MODE — NAVIGATION
   Nav is always over a dark hero image when unscrolled,
   so keep text white. Switch to dark when scrolled.
   ============================================ */

html[data-theme="light"] .navigation:not(.scrolled) .menu-btn,
html[data-theme="light"] .navigation:not(.scrolled) .logo,
html[data-theme="light"] .navigation:not(.scrolled) .logo h1,
html[data-theme="light"] .navigation:not(.scrolled) .location {
    color: #ffffff;
}

html[data-theme="light"] .navigation:not(.scrolled) .menu-btn::after {
    background: #ffffff;
}

/* ============================================
   LIGHT MODE — HARDCODED COLOR OVERRIDES
   (colors that can't use CSS variables because
    they're hardcoded in component CSS files)
   ============================================ */

/* ---- Stats bar ---- */
html[data-theme="light"] .stats-bar {
    border-top-color: rgba(0, 0, 0, 0.06);
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .stat-item {
    border-right-color: rgba(0, 0, 0, 0.06);
}

/* Tablet stacked border-bottom */
html[data-theme="light"] .stat-item:nth-child(1),
html[data-theme="light"] .stat-item:nth-child(2) {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

/* ---- Manifesto ---- */
html[data-theme="light"] .manifesto-headline em {
    color: rgba(0, 0, 0, 0.4);
}

/* ---- Pillars section ---- */
html[data-theme="light"] .pillars-section {
    background: #ebebed;
    border-top-color: rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .pillars-grid {
    border-color: rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] .pillar {
    border-right-color: rgba(0, 0, 0, 0.08);
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] .pillar:hover {
    background: rgba(0, 0, 0, 0.03);
}

html[data-theme="light"] .pillar-icon {
    color: rgba(0, 0, 0, 0.4);
}

html[data-theme="light"] .pillar:hover .pillar-icon {
    color: rgba(0, 0, 0, 0.75);
}

html[data-theme="light"] .pillar-number {
    color: rgba(0, 0, 0, 0.25);
}

/* ---- Dealer section ---- */
html[data-theme="light"] .dealer-text {
    background: #e2e2e5;
}

/* Primary button — stays dark in light mode (inverts nicely) */
html[data-theme="light"] .btn-primary {
    background: #0a0a0b;
    color: #ffffff;
}

html[data-theme="light"] .btn-primary:hover {
    background: #1c1c1e;
}

/* ---- Discover section ---- */
/* Discover is intentionally white in dark mode — keep white in light too */
html[data-theme="light"] .discover-section {
    background: #ffffff;
}

html[data-theme="light"] .discover-card:hover .card-arrow {
    background: #0a0a0b;
    color: #ffffff;
}

/* ---- Featured cards ---- */
html[data-theme="light"] .featured-card:hover .card-arrow {
    background: #0a0a0b;
    color: #ffffff;
}

/* ---- Models ---- */
html[data-theme="light"] .brand-label {
    color: rgba(0, 0, 0, 0.45);
}

/* ---- Footer ---- */
html[data-theme="light"] .footer-label {
    color: rgba(10, 10, 11, 0.5);
}

html[data-theme="light"] .disclaimer {
    color: rgba(10, 10, 11, 0.5);
}

html[data-theme="light"] .footer-links a::after {
    background: #0a0a0b;
}

html[data-theme="light"] .social-link:hover,
html[data-theme="light"] .btn-outline:hover {
    background: #0a0a0b;
    color: #ffffff;
}

/* ---- Scroll top button ---- */
html[data-theme="light"] .scroll-top-btn {
    background: rgba(10, 10, 11, 0.06);
    border-color: rgba(10, 10, 11, 0.12);
    color: #0a0a0b;
}

html[data-theme="light"] .scroll-top-btn:hover {
    background: rgba(10, 10, 11, 0.12);
    border-color: rgba(10, 10, 11, 0.25);
}

/* ---- Scroll indicator (hero) ---- */
html[data-theme="light"] .scroll-indicator {
    color: rgba(255, 255, 255, 0.6); /* always over dark hero */
}

/* ---- Color flip initial word color (JS overrides immediately) ---- */
html[data-theme="light"] .cf-word {
    color: rgba(255, 255, 255, 0.1);
}

/* ---- Menu overlay backdrop ---- */
html[data-theme="light"] .menu-backdrop {
    background: rgba(0, 0, 0, 0.45);
}

/* ---- Model card text panel (light mode) ---- */
html[data-theme="light"] .model-arrow {
    color: rgba(0, 0, 0, 0.45);
}

html[data-theme="light"] .model-arrow:hover {
    color: rgba(0, 0, 0, 0.85);
}