/*
 |--------------------------------------------------------------------------
 | Site public styles
 |--------------------------------------------------------------------------
 |
 | Keep site branding mode-compatible by using shipped WebBlocks UI tokens.
 | Avoid hardcoded light-only colors so public pages stay readable in
 | light, dark, and auto mode.
 |
 */

:root {
    --header-shadow: 0 10px 30px color-mix(in srgb, var(--wb-text) 8%, transparent);
    --panel-shadow: 0 18px 40px color-mix(in srgb, var(--wb-text) 10%, transparent);
    --panel-shadow-sm: 0 16px 32px color-mix(in srgb, var(--wb-text) 9%, transparent);
}

.wb-public-body {
    color: var(--wb-text);
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--wb-accent) 8%, transparent), transparent 24%),
        linear-gradient(180deg, color-mix(in srgb, var(--wb-bg) 92%, var(--wb-accent-softer) 8%) 0%, var(--wb-bg) 100%);
}

.wb-public-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--wb-surface) 88%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--wb-border) 82%, var(--wb-accent-border) 18%);
    box-shadow: var(--header-shadow);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.wb-public-header-bar {
    display: flex;
    align-items: center;
    min-height: 3.25rem;
    gap: 0.85rem;
}

.wb-public-header-brand {
    display: block;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.82rem;
    color: var(--wb-text);
}

.wb-public-header-context {
    display: block;
    color: var(--wb-muted);
    font-size: 0.74rem;
    line-height: 1.2;
}

.wb-public-header-brand-image {
    max-height: 2.5rem;
    width: auto;
}

.wb-public-header-identity {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
}

.wb-public-header-spacer {
    flex: 1 1 auto;
}

.wb-public-header-actions {
    display: flex;
    align-items: center;
}

.wb-public-header-nav {
    display: none;
}

.wb-public-nav-list {
    display: flex;
    align-items: center;
    gap: 0.95rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wb-public-nav-item {
    display: flex;
    align-items: center;
}

.wb-public-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--wb-muted);
    font-weight: 700;
    font-size: 0.73rem;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.2rem 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    transition: color var(--wb-t);
}

.wb-public-nav-link:hover,
.wb-public-nav-link.is-active,
.wb-public-nav-item.is-active > .wb-public-nav-link {
    color: var(--wb-text);
}

.wb-public-nav-link.is-active,
.wb-public-nav-item.is-active > .wb-public-nav-link {
    text-decoration: none;
    text-underline-offset: 0.35rem;
    box-shadow: inset 0 -2px 0 var(--wb-accent);
}

.wb-public-nav-link-trigger {
    font: inherit;
}

.wb-public-header-mobile {
    margin-left: auto;
}

.wb-public-header-menu-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border: 1px solid color-mix(in srgb, var(--wb-border) 78%, var(--wb-accent-border) 22%);
    border-radius: 0.65rem;
    background: color-mix(in srgb, var(--wb-surface) 92%, var(--wb-accent-softer) 8%);
    color: var(--wb-text);
    cursor: pointer;
}

.wb-public-banner {
    position: relative;
    overflow: hidden;
    color: var(--wb-text);
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--wb-accent-softer) 86%, var(--wb-surface) 14%) 0%,
            color-mix(in srgb, var(--wb-accent-soft) 68%, var(--wb-surface) 32%) 52%,
            var(--wb-surface) 100%);
    border-top: 1px solid color-mix(in srgb, var(--wb-border) 72%, var(--wb-accent-border) 28%);
    border-bottom: 1px solid color-mix(in srgb, var(--wb-border) 82%, var(--wb-accent-border) 18%);
}

.wb-public-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--wb-accent) 14%, transparent), transparent 22%),
        linear-gradient(90deg, color-mix(in srgb, var(--wb-accent-soft) 32%, transparent), transparent 30% 70%, color-mix(in srgb, var(--wb-accent-border) 16%, transparent));
    pointer-events: none;
}

.wb-public-banner-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 4rem;
    padding-block: 0.7rem;
}

.wb-public-banner-copy {
    min-width: 0;
}

.wb-public-banner-title {
    margin: 0;
    font-size: 1.15rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wb-text);
}

.wb-public-banner-text {
    margin: 0.2rem 0 0;
    color: var(--wb-muted);
    font-size: 0.92rem;
    line-height: 1.35;
}

.wb-public-banner-accent {
    width: 5.5rem;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--wb-accent) 20%, var(--wb-surface) 80%), var(--wb-accent), color-mix(in srgb, var(--wb-accent-border) 72%, var(--wb-accent) 28%));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--wb-accent-border) 48%, transparent);
    flex: 0 0 auto;
}

.wb-public-header-mobile-menu {
    min-width: 16rem;
}

.wb-public-main {
    min-width: 0;
}

.wb-public-main-column {
    grid-column: span 3;
}

.wb-public-main > .wb-container,
.wb-public-sidebar > .wb-container {
    padding-inline: 0;
}

.wb-public-block[data-wb-public-block-type="page-title"] + .wb-public-block[data-wb-public-block-type="rich-text"] {
    margin-top: -0.5rem;
}

.wb-public-contact-columns {
    align-items: start;
}

.wb-public-contact-columns > div {
    min-width: 0;
}

.wb-public-contact-card,
.wb-public-contact-form-card {
    border-color: color-mix(in srgb, var(--wb-border) 78%, var(--wb-accent-border) 22%);
    box-shadow: var(--panel-shadow);
}

.wb-public-contact-card {
    background: linear-gradient(180deg, color-mix(in srgb, var(--wb-accent-soft) 38%, var(--wb-surface-2) 62%) 0%, var(--wb-surface) 100%);
}

.wb-public-contact-form-card {
    background: var(--wb-surface);
}

.wb-public-contact-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.wb-public-contact-meta strong {
    color: var(--wb-text);
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.wb-public-main a,
.wb-public-footer a {
    color: var(--wb-accent-text);
}

.wb-public-main a:hover,
.wb-public-footer a:hover {
    color: var(--wb-text);
}

.wb-public-hero,
.wb-public-card-grid article,
.wb-public-showcase-item,
.wb-gallery-item {
    border-color: color-mix(in srgb, var(--wb-border) 78%, var(--wb-accent-border) 22%);
    box-shadow: var(--panel-shadow-sm);
}

.wb-public-hero {
    background:
        linear-gradient(145deg,
            color-mix(in srgb, var(--wb-accent-softer) 78%, var(--wb-surface) 22%) 0%,
            var(--wb-surface) 36%,
            color-mix(in srgb, var(--wb-accent-soft) 42%, var(--wb-surface) 58%) 100%);
    border: 1px solid color-mix(in srgb, var(--wb-border) 72%, var(--wb-accent-border) 28%);
}

.wb-public-hero h1,
.wb-public-main h2,
.wb-public-main h3 {
    color: var(--wb-text);
}

.wb-public-main h2,
.wb-public-main h3 {
    letter-spacing: 0.01em;
}

.wb-public-card-grid article img,
.wb-public-showcase-item img,
.wb-gallery-media {
    border-radius: 0.6rem;
}

.wb-public-footer {
    border-top: 1px solid color-mix(in srgb, var(--wb-border) 82%, var(--wb-accent-border) 18%);
    background: color-mix(in srgb, var(--wb-surface) 78%, transparent);
}

.wb-public-footer .wb-prose {
    max-width: none;
}

.wb-slider {
    position: relative;
    overflow: hidden;
}

.wb-slider-track {
    display: flex;
    transition: transform 0.3s ease-in-out;
    will-change: transform;
    transform: translateX(0%);
}

.wb-slider-slide {
    min-width: 100%;
    flex: 0 0 100%;
}

.wb-slider-controls {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: center;
}

.wb-slider-dots {
    display: flex;
    gap: 0.5rem;
}

.wb-slider-dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 999px;
    border: none;
    background: color-mix(in srgb, var(--wb-muted) 28%, transparent);
    cursor: pointer;
}

.wb-slider-dot.is-active {
    background: currentColor;
}

.wb-sidebar-brand-subtitle {
    display: block;
    font-size: 0.68rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--wb-muted);
}

.wb-dashboard-shell > .wb-sidebar {
    --wb-sidebar-w: 320px;
}

@media (min-width: 960px) {
    .wb-public-header-nav {
        display: block;
    }

    .wb-public-header-mobile {
        display: none;
    }
}

@media (max-width: 959px) {
    .wb-public-banner-inner {
        min-height: auto;
        padding-block: 0.8rem;
    }

    .wb-public-banner-accent {
        display: none;
    }
}

@media (max-width: 639px) {
    .wb-public-header-bar {
        min-height: 3rem;
    }

    .wb-public-header-context {
        display: none;
    }

    .wb-public-banner-title {
        font-size: 0.98rem;
    }

    .wb-public-banner-text {
        font-size: 0.82rem;
    }
}