/* Home-page themes, loaded after the legacy light-only styles. Important
   declarations intentionally override that stylesheet's important colors. */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; background: #000; }

.cerebras-theme .theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #9ca3af;
    border-radius: 50%;
    background: #fff;
    color: #1d1c39;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.cerebras-theme .theme-toggle:hover { background: #fff3ec; border-color: #b85325; }
.theme-toggle svg { width: 21px; height: 21px; pointer-events: none; }
.theme-toggle .theme-icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .theme-icon-sun { display: block; }
html[data-theme="dark"] .theme-toggle .theme-icon-moon { display: none; }
.cerebras-theme .theme-toggle:focus-visible,
.cerebras-theme .mobile-toggle:focus-visible,
.cerebras-theme .drawer-close:focus-visible {
    outline: 2px solid var(--text-navy) !important;
    outline-offset: 4px !important;
}

/* Keep the desktop placement; offer a labeled theme control in the mobile menu. */
.cerebras-theme .drawer-theme-toggle { display: none; }
@media (min-width: 993px) {
    .cerebras-theme .header-inner { gap: 12px !important; }
    .cerebras-theme .desktop-nav { gap: 12px !important; margin-left: 0 !important; }
    .cerebras-theme .header-actions { gap: 8px !important; }
    .cerebras-theme .header-actions .btn { padding-inline: 12px !important; }
}
@media (min-width: 993px) and (max-width: 1250px) {
    .cerebras-theme .header-actions .desktop-only-btn { display: none !important; }
    .cerebras-theme .desktop-nav { gap: 8px !important; }
    .cerebras-theme .nav-link { font-size: 0.8rem !important; }
}
@media (min-width: 993px) and (max-width: 1100px) {
    .cerebras-theme .header-actions > .btn-primary { display: none !important; }
}
@media (max-width: 992px) {
    .cerebras-theme .header-inner > .theme-toggle { display: none; }
    .cerebras-theme .drawer-theme-toggle {
        display: flex;
        justify-content: flex-start;
        gap: 12px;
        width: 100%;
        min-height: 44px;
        margin: 12px 0 16px;
        padding: 8px 12px;
        border-radius: 6px;
        font: inherit;
        font-size: 0.88rem;
        font-weight: 500;
    }
    .cerebras-theme .header-inner .mobile-toggle {
        order: 3 !important;
        margin-left: auto !important;
        width: 44px !important;
        height: 44px !important;
    }
}

html[data-theme="dark"],
html[data-theme="dark"] body.cerebras-theme {
    --bg: #000000 !important;
    --hero-bg: #000000 !important;
    --surface: #101010 !important;
    --surface-2: #181818 !important;
    --surface-secondary: #202020 !important;
    --card-bg: #101010 !important;
    --header-bg: #000000 !important;
    --footer-bg: #000000 !important;
    --text-navy: #f5f5f5 !important;
    --text-body: #c9c9ce !important;
    --text-light: #ababB3 !important;
    --text-muted: #ababB3 !important;
    --color-text-primary: #f5f5f5 !important;
    --color-text-secondary: #c9c9ce !important;
    --color-text-muted: #ababB3 !important;
    --brand-accent: #f58b54 !important;
    --brand-accent-hover: #ffa574 !important;
    --brand-accent-active: #e77b44 !important;
    --brand-accent-rgb: 245, 139, 84 !important;
    --brand-on-accent: #140b06 !important;
    --color-background: #000000 !important;
    --color-surface: #101010 !important;
    --color-surface-secondary: #181818 !important;
    --color-secondary: #f5f5f5 !important;
    --accent-navy: #f5f5f5 !important;
    --line: #242424 !important;
    --border-color: #242424 !important;
    --card-border: #242424 !important;
    --color-border: #242424 !important;
    --control-border: #303030;
    --control-hover-border: #49433f;
    --card-hover-border: #44362f !important;
    --carousel-edge: #000;
    --scrollbar-track: #000 !important;
    --scrollbar-thumb: #555 !important;
    --scrollbar-hover: #777 !important;
    --color-success: #77dfae;
    --color-success-bg: #10271c;
    --color-danger: #ff9c9c;
    --color-danger-bg: #301617;
    --color-warning: #f4ca7a;
    --color-warning-bg: #2b2112;
    --color-info: #a5c6ff;
    --color-info-bg: #142139;
    background: var(--bg) !important;
    color: var(--text-body) !important;
}

html[data-theme="dark"] .cerebras-theme :is(.site-header, .site-header.scrolled, .hero.hero-with-carousel, .section, .site-footer, .mobile-drawer) {
    background: #000 !important;
    border-color: var(--line) !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .cerebras-theme :is(.event-card, .philosophy-card, .proof-card, .album-card, .cookie-banner, .modal-card, .toast) {
    background: var(--surface) !important;
    border-color: var(--line) !important;
    color: var(--text-body) !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .cerebras-theme :is(.event-card, .album-card):hover {
    border-color: var(--card-hover-border) !important;
}
html[data-theme="dark"] .cerebras-theme :is(.section-title-wrap h2, .home-philosophy-title, .home-cta-title, .philosophy-title, .proof-number, .event-card-title, .event-card-title a, .album-info .card-title, .event-host strong, .event-author strong, .organization-identity-name, .modal-title) {
    color: var(--text-navy) !important;
}
html[data-theme="dark"] .cerebras-theme :is(.section-title-wrap p, .home-philosophy-sub, .home-cta-desc, .philosophy-desc, .event-card-desc, .cookie-text, .nav-link, .footer-link, .drawer-nav-link, .modal-body) {
    color: var(--text-body) !important;
}
html[data-theme="dark"] .cerebras-theme :is(.text-muted, .event-card-details, .event-host, .event-author, .footer-copy) {
    color: var(--text-muted) !important;
}
html[data-theme="dark"] .cerebras-theme :is(.event-card-foot, .footer-copy, .drawer-header, .drawer-actions) { border-color: var(--line) !important; }
html[data-theme="dark"] .cerebras-theme :is(.nav-link.active, .nav-link:hover, .footer-link:hover, .cookie-policy-link, .cookie-btn-decline, .event-card-title a:hover) { color: var(--brand-accent) !important; }
html[data-theme="dark"] .cerebras-theme .nav-link.active::after { background: var(--brand-accent) !important; }
html[data-theme="dark"] .cerebras-theme .hamburger-bar { background: var(--text-navy) !important; }

html[data-theme="dark"] .cerebras-theme :is(.btn-primary, .home-cta-section .btn, .cookie-btn-accept, .drawer-nav-link.active, .drawer-nav-link:hover) {
    background: var(--brand-accent) !important;
    color: var(--brand-on-accent) !important;
    border-color: var(--brand-accent) !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .cerebras-theme :is(.btn-primary:hover, .home-cta-section .btn:hover, .cookie-btn-accept:hover) {
    background: var(--brand-accent-hover) !important;
    border-color: var(--brand-accent-hover) !important;
}
html[data-theme="dark"] .cerebras-theme :is(.btn-secondary, .btn-navy, .theme-toggle, .drawer-close, .modal-close, .toast-close) {
    background: var(--surface) !important;
    border-color: var(--control-border) !important;
    color: var(--text-navy) !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .cerebras-theme :is(.btn-secondary:hover, .btn-navy:hover, .theme-toggle:hover, .drawer-close:hover, .modal-close:hover, .toast-close:hover) {
    background: var(--surface-secondary) !important;
    border-color: var(--control-hover-border) !important;
}
html[data-theme="dark"] .cerebras-theme .btn-ghost { color: var(--brand-accent) !important; }
html[data-theme="dark"] .cerebras-theme .btn-ghost:hover { background: #291a12 !important; border-color: #504037 !important; }
html[data-theme="dark"] .cerebras-theme :is(.philosophy-icon, .session-step-icon, .badge-in-person, .badge-online) {
    background: #291a12 !important;
    color: var(--brand-accent) !important;
    border-color: #533724 !important;
}
html[data-theme="dark"] .cerebras-theme :is(.tag, .event-author-mark, .organization-logo, .album-cover, .event-card-img-wrap) {
    background: var(--surface-secondary) !important;
    color: var(--text-body) !important;
    border-color: var(--line) !important;
}
html[data-theme="dark"] .cerebras-theme .badge-open { background: #10271c !important; color: #77dfae !important; border-color: #244333 !important; }
html[data-theme="dark"] .cerebras-theme .badge-completed { background: #142139 !important; color: #a5c6ff !important; border-color: #2c3c55 !important; }
html[data-theme="dark"] .cerebras-theme :is(.event-host-logo, .event-author-avatar) { border-color: var(--line) !important; }
html[data-theme="dark"] .cerebras-theme .album-cover-initials { color: var(--brand-accent) !important; }

/* The transparent wordmark needs a light silhouette against black. */
html[data-theme="dark"] .cerebras-theme .brand-logo { filter: brightness(0) invert(1); }
html[data-theme="dark"] .cerebras-theme :focus-visible { outline: 2px solid var(--brand-accent) !important; outline-offset: 4px !important; }
html[data-theme="dark"] ::selection { background: #f58b54; color: #140b06; }

/* Preserve the photography, dissolving its edges into true black. */
html[data-theme="dark"] .cerebras-theme .hero.hero-with-carousel { --hero-ink: #f5f5f5; }
html[data-theme="dark"] .cerebras-theme .hero .hero-copy .hero-badge-pill { background: #101010 !important; color: var(--text-body) !important; border-color: var(--control-border) !important; box-shadow: none !important; }
html[data-theme="dark"] .cerebras-theme .hero .hero-copy .hero-sub { color: var(--text-body) !important; }
html[data-theme="dark"] .cerebras-theme .hero .hero-copy .hero-footnote { color: var(--text-muted) !important; }
html[data-theme="dark"] .cerebras-theme .hero .hero-copy .hero-actions .btn-primary { background: var(--brand-accent) !important; border-color: var(--brand-accent) !important; color: var(--brand-on-accent) !important; box-shadow: none !important; }
html[data-theme="dark"] .cerebras-theme .hero .hero-copy .hero-actions .btn-primary:hover { background: var(--brand-accent-hover) !important; border-color: var(--brand-accent-hover) !important; }
html[data-theme="dark"] .hero-carousel-viewport { background: #000; }
html[data-theme="dark"] .hero-slide img { filter: saturate(0.8) brightness(0.72); }
html[data-theme="dark"] .hero-carousel-viewport::after {
    background: linear-gradient(90deg, #000 0%, rgba(0,0,0,.99) 13%, rgba(0,0,0,.94) 25%, rgba(0,0,0,.8) 37%, rgba(0,0,0,.42) 49%, rgba(0,0,0,.12) 59%, transparent 72%),
        linear-gradient(180deg, rgba(0,0,0,.12), transparent 18%, transparent 66%, rgba(0,0,0,.3) 78%, rgba(0,0,0,.78) 91%, #000);
}
@media (max-width: 820px) {
    html[data-theme="dark"] .hero-carousel-viewport::after {
        background: linear-gradient(90deg, #000, transparent 17%, transparent 86%, #000),
            linear-gradient(180deg, #000, rgba(0,0,0,.7) 11%, transparent 28%, transparent 65%, rgba(0,0,0,.42) 78%, rgba(0,0,0,.84) 91%, #000);
    }
    /* Fade the entire image layer to transparent at its edges. The transparent
       top band prevents subpixel compositing seams while the page is scrolling. */
    .hero-carousel-viewport {
        -webkit-mask-image: linear-gradient(to bottom, transparent 0 4px, #000 18%, #000 72%, transparent 100%);
        mask-image: linear-gradient(to bottom, transparent 0 4px, #000 18%, #000 72%, transparent 100%);
    }
    html[data-theme] .hero-carousel-viewport::after {
        background: linear-gradient(90deg, var(--carousel-edge, #fff), transparent 14%, transparent 88%, var(--carousel-edge, #fff));
    }
    .hero-slide, .hero-slide.is-active {
        transform: none;
        transition: opacity 800ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 800ms;
    }
    .hero-slide.is-active { transition-delay: 0s; }
}
@media (prefers-reduced-motion: reduce) {
    .cerebras-theme .theme-toggle { transition: none; }
}
