/* app/static/_themes/site-b/css/themes.css */
/* Site B tokens & layout vars */

:root {
    /* colors */
    --c-bg: #f0f0f0;
    --c-text: #0f0f10;
    --c-primary: #f0f0f0; /* nav label color (inactive) */
    --c-primary-contrast: #1e1e1e;
    --c-border: rgba(255, 255, 255, 0.7);

    /* surfaces */
    --c-surface: rgba(30, 30, 30, 0.55); /* nav-pill background */
    --c-surface-contrast: #1e1e1e;

    /* layout */
    --container: 1650px;
    --header-h: 90px; /* header bar height */
    --pill-top: var(--header-h); /* nav-pill vertical offset */

    /* theme palette overrides */
    --site-primary: #20306c;
    --site-primary-dark: #1b2a59;
    --site-primary-contrast: #f0f0f0;
    --site-primary-border: rgba(32, 48, 108, 0.4);
    --site-primary-muted: #6e78a8;
    --site-primary-soft: #dce3ff;
    --site-primary-soft-hover: #d8defc;
    --site-primary-pale: #e2e7ff;
    --site-primary-subtle: rgba(32, 48, 108, 0.12);
    --site-primary-overlay: rgba(32, 48, 108, 0.55);
    --site-primary-ring: rgba(32, 48, 108, 0.7);
    --site-primary-rgb: 32, 48, 108;
    --site-divider: rgba(32, 48, 108, 0.25);
    --site-muted-40: rgba(32, 48, 108, 0.4);
    --site-muted-45: rgba(32, 48, 108, 0.45);
    --site-muted-50: rgba(32, 48, 108, 0.5);
}

/* Tailwind class overrides mapped to palette tokens */
.text-\[\#20306C\] {
    color: var(--site-primary) !important;
}
.hover\:text-\[\#20306C\]:hover {
    color: var(--site-primary) !important;
}
.group:hover .group-hover\:text-\[\#20306C\] {
    color: var(--site-primary) !important;
}
.group:hover .group-hover\:bg-\[\#1B2A59\],
.group:hover .group-hover\:bg-\[\#1b2a59\] {
    background-color: var(--site-primary-dark) !important;
}
.text-\[\#6E78A8\] {
    color: var(--site-primary-muted) !important;
}
.hover\:text-\[\#6E78A8\]:hover {
    color: var(--site-primary-muted) !important;
}

.bg-\[\#20306C\] {
    background-color: var(--site-primary) !important;
}
.hover\:bg-\[\#20306C\]:hover {
    background-color: var(--site-primary) !important;
}
.bg-\[\#1B2A59\],
.bg-\[\#1b2a59\] {
    background-color: var(--site-primary-dark) !important;
}
.hover\:bg-\[\#1B2A59\]:hover,
.hover\:bg-\[\#1b2a59\]:hover {
    background-color: var(--site-primary-dark) !important;
}
.bg-\[\#B8D779\] {
    background-color: var(--site-primary) !important;
}
.hover\:bg-\[\#B8D779\]:hover {
    background-color: var(--site-primary-dark) !important;
}
.bg-\[\#DCE3FF\] {
    background-color: var(--site-primary-soft) !important;
}
.bg-\[\#E2E7FF\] {
    background-color: var(--site-primary-pale) !important;
}
.bg-\[\#E1E6FF\] {
    background-color: var(--site-primary-pale) !important;
}
.hover\:bg-\[\#d8defc\]:hover,
.hover\:bg-\[\#d8ddfb\]:hover {
    background-color: var(--site-primary-soft-hover) !important;
}

.border-\[\#20306C\] {
    border-color: var(--site-primary) !important;
}
.border-\[\#20306c\] {
    border-color: var(--site-primary) !important;
}

.focus\:ring-\[\#20306C\]:focus,
.focus\:ring-\[\#20306c\]:focus {
    --tw-ring-color: var(--site-primary);
}
.focus-visible\:ring-\[\#20306C\]\/70:focus-visible,
.focus-visible\:ring-\[\#20306c\]\/70:focus-visible {
    --tw-ring-color: var(--site-primary-ring);
}

.placeholder-\[\#6E78A8\]::-webkit-input-placeholder {
    color: var(--site-primary-muted) !important;
}
.placeholder-\[\#6E78A8\]::-moz-placeholder {
    color: var(--site-primary-muted) !important;
}
.placeholder-\[\#6E78A8\]::placeholder {
    color: var(--site-primary-muted) !important;
}
.placeholder-\[\#6E78A8\]:-ms-input-placeholder {
    color: var(--site-primary-muted) !important;
}
.placeholder-\[\#6E78A8\]:-moz-placeholder {
    color: var(--site-primary-muted) !important;
}

.from-\[\#B8D779\]\/60 {
    --tw-gradient-from: rgba(var(--site-primary-rgb), 0.6) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(var(--site-primary-rgb), 0));
}
.to-\[\#779F4E\]\/40 {
    --tw-gradient-to: rgba(var(--site-primary-rgb), 0.22) !important;
}
/* Site B hero background */
.sb-hero-bg {
    position: relative;
    min-height: 600px;
    background: #0f0f10 url("/static/_themes/site-b/img/index/index-hero-bg.jpg") center/cover no-repeat;
    overflow: hidden;
}

.sb-hero-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.sb-hero-bg > * {
    position: relative;
    z-index: 2;
}

@media (max-width: 1024px) {
    .sb-hero-bg {
        min-height: 460px;
    }
}

/* To Top button style */
#to-top.sb-top {
    position: fixed;
    right: clamp(12px, 4vw, 22px);
    bottom: clamp(12px, 4vw, 22px);
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: rgba(12, 24, 42, 0.94);
    color: #f0f0f0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32), 0 4px 12px rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(73, 189, 250, 0.35);
    opacity: 0;
    transform: translateY(10px) scale(0.96);
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease, box-shadow 160ms ease;
    z-index: 95;
}
#to-top.sb-top.to-top--show {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
#to-top.sb-top:hover {
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.34), 0 6px 14px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px) scale(1.02);
}
#to-top.sb-top:focus-visible {
    outline: 2px solid rgba(73, 189, 250, 0.9);
    outline-offset: 3px;
}
#to-top.sb-top .to-top__icon {
    display: block;
    width: 70%;
    height: 70%;
    background: url("/static/img/upward-arrow.svg") center/contain no-repeat;
    filter: invert(1);
}
#to-top.sb-top:focus-visible {
    outline: 2px solid rgba(73, 189, 250, 0.9);
    outline-offset: 3px;
}
@media (max-width: 1024px) {
    #to-top.sb-top {
        width: 52px;
        height: 52px;
    }
}
@media (max-width: 640px) {
    #to-top.sb-top {
        width: 42px;
        height: 42px;
    }
}

/* Site-B: consistent vertical rhythm for main sections */
.sb-section {
    margin-block: clamp(32px, 6vw, 90px);
}

/* Index Speakers */
#speakers .splide {
    visibility: visible !important;
}
#speakers .splide__list {
    display: flex;
    gap: 24px;
}
#speakers .splide__slide {
    flex: 0 0 auto;
}