/* Shared styling for template-based themes */
body[data-theme^="template"] {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    min-height: 100vh;
    position: relative;
    letter-spacing: .01em;
    isolation: isolate;
    --tpl-bg-overlay: var(--tpl-gradient, none);
    --tpl-bg-image: none;
    --tpl-bg-image-size: cover;
    --tpl-bg-image-position: center;
    --tpl-bg-image-repeat: no-repeat;
    --tpl-bg-image-attachment: fixed;
    --tpl-bg-image-filter: none;
    --tpl-bg-layer-opacity: 1;
    --nav-overlay-bg: rgba(0, 0, 0, 0.7);
}

body[data-theme^="template"]::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: var(--tpl-bg-overlay), var(--tpl-bg-image);
    background-size: cover, var(--tpl-bg-image-size, cover);
    background-position: center, var(--tpl-bg-image-position, center);
    background-repeat: no-repeat, var(--tpl-bg-image-repeat, no-repeat);
    background-attachment: fixed, var(--tpl-bg-image-attachment, fixed);
    opacity: var(--tpl-bg-layer-opacity);
    filter: var(--tpl-bg-image-filter);
    pointer-events: none;
    z-index: -2;
}

body[data-theme^="template"]::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,.02);
    mix-blend-mode: soft-light;
    pointer-events: none;
    z-index: -1;
}

body[data-theme^="template"] .logo {
    color: var(--color-text);
    letter-spacing: .08em;
    text-transform: uppercase;
}

body[data-theme^="template"] .site-header {
    background: var(--tpl-shell-bg, rgba(5,5,15,.92));
    border-bottom: 1px solid var(--tpl-shell-border, rgba(255,255,255,.12));
    box-shadow: var(--tpl-header-shadow, 0 20px 45px rgba(0,0,0,.45));
    backdrop-filter: blur(var(--tpl-shell-blur, 24px));
}

body[data-theme^="template"] .site-header__inner {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    gap: 2rem;
}

body[data-theme^="template"] .site-nav {
    --tpl-nav-padding: .65rem 1.75rem;
    --tpl-nav-gap: .9rem 1.25rem;
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    background: var(--tpl-nav-bg, var(--tpl-shell-card, rgba(10,12,24,.65)));
    border: var(--tpl-nav-border, 1px solid var(--tpl-card-border, rgba(255,255,255,.1)));
    border-top: var(--tpl-nav-border-top, var(--tpl-nav-border, 1px solid var(--tpl-card-border, rgba(255,255,255,.1))));
    border-bottom: var(--tpl-nav-border-bottom, var(--tpl-nav-border, 1px solid var(--tpl-card-border, rgba(255,255,255,.1))));
    border-left: var(--tpl-nav-border-left, var(--tpl-nav-border, 1px solid var(--tpl-card-border, rgba(255,255,255,.1))));
    border-right: var(--tpl-nav-border-right, var(--tpl-nav-border, 1px solid var(--tpl-card-border, rgba(255,255,255,.1))));
    border-radius: var(--radius-nav, var(--radius-card, 1.2rem));
    padding: var(--tpl-nav-padding);
    box-shadow: var(--tpl-nav-shadow, var(--tpl-card-shadow, 0 25px 60px rgba(0,0,0,.45)));
    gap: var(--tpl-nav-gap);
}

@media (min-width: 769px) {
    body[data-theme^="template"] .site-nav {
        position: relative;
    }
}

body[data-theme^="template"] .site-nav__list {
    gap: .65rem;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
}

body[data-theme^="template"] .site-nav__close {
    border-color: rgba(255,255,255,.22);
    background: rgba(255,255,255,.08);
    color: var(--color-text);
}

body[data-theme^="template"] .site-nav__close:hover {
    background: rgba(255,255,255,.15);
}

body[data-theme^="template"] .nav-link {
    color: var(--color-text);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .35rem .9rem;
    border-radius: var(--radius-button, .75rem);
    background: transparent;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

body[data-theme^="template"] .site-nav__item--home > .nav-link,
body[data-theme^="template"] .site-nav__item--home > .site-nav__parent-controls > .nav-link {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    color: inherit;
    letter-spacing: 0;
    text-transform: none;
}

body[data-theme^="template"] .site-nav__item--home > .nav-link:hover,
body[data-theme^="template"] .site-nav__item--home > .nav-link.is-active,
body[data-theme^="template"] .site-nav__item--home > .site-nav__parent-controls > .nav-link:hover,
body[data-theme^="template"] .site-nav__item--home > .site-nav__parent-controls > .nav-link.is-active {
    background: transparent !important;
    color: inherit;
    transform: none;
}

body[data-theme^="template"] .site-nav a.nav-link::after {
    display: none;
}

body[data-theme^="template"] .nav-link:hover,
body[data-theme^="template"] .nav-link.is-active {
    background: var(--tpl-menu-hover, var(--tpl-menu-bg, rgba(255,255,255,.14)));
    color: var(--color-accent);
    transform: translateY(-1px);
}

body[data-theme^="template"] .site-nav__submenu {
    background: var(--tpl-submenu-bg, rgba(6,8,18,.95));
    box-shadow: 0 30px 60px rgba(0,0,0,.5);
}

body[data-theme^="template"] .language-switch,
body[data-theme^="template"] .theme-switch {
    flex-wrap: wrap;
    justify-content: center;
}

body[data-theme^="template"] .language-switch a {
    border: 1px solid transparent;
    background: var(--tpl-menu-bg, rgba(255,255,255,.05));
    color: var(--color-text);
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

body[data-theme^="template"] .language-switch a:hover {
    border-color: var(--tpl-card-border, transparent);
}

body[data-theme^="template"] .language-switch a.is-active {
    background: var(--color-accent);
    color: var(--color-accent-contrast);
}

body[data-theme^="template"] .theme-switch__hint {
    color: var(--color-muted);
    text-align: center;
}

body[data-theme^="template"] .theme-switch__label {
    color: var(--color-muted);
}

body[data-theme^="template"] .theme-select {
    border-color: var(--tpl-card-border, rgba(255,255,255,.2));
    background: var(--tpl-shell-card, rgba(10,12,24,.65));
    color: var(--color-text);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

body[data-theme^="template"] .theme-select:focus-visible {
    border-color: var(--color-accent);
}

body[data-theme^="template"] .theme-switch__chevron {
    border-top-color: var(--color-text);
}

body[data-theme^="template"] .theme-switch--select {
    width: auto;
    min-width: clamp(160px, 25vw, 260px);
}

body[data-theme^="template"] .menu-toggle {
    border: 1px solid var(--tpl-card-border, rgba(255,255,255,.2));
    background: rgba(255,255,255,.05);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}

body[data-theme^="template"] .menu-toggle span {
    background: var(--color-text);
}

body[data-theme^="template"] .nav-subtoggle {
    border-color: rgba(255,255,255,.25);
    background: rgba(255,255,255,.08);
    color: var(--color-text);
}

body[data-theme^="template"] .nav-subtoggle[aria-expanded="true"] {
    background: rgba(255,255,255,.18);
    border-color: var(--color-accent);
}

body[data-theme^="template"] .content-area {
    max-width: 1200px;
}

body[data-theme^="template"] .folder-intro {
    background: var(--tpl-shell-card, rgba(10,12,24,.65));
    border: 1px solid var(--tpl-card-border, rgba(255,255,255,.12));
    color: var(--color-text);
}

body[data-theme^="template"] .content-block,
body[data-theme^="template"] .content-card {
    border: 1px solid var(--tpl-card-border, rgba(255,255,255,.12));
    background: var(--color-surface);
    box-shadow: var(--tpl-card-shadow, 0 30px 70px rgba(0,0,0,.45));
    position: relative;
    overflow: hidden;
}

body[data-theme^="template"] .content-block--hero {
    background: var(--tpl-hero-card, var(--color-surface));
}

body[data-theme^="template"] .content-block--hero::after {
    content: '';
    position: absolute;
    inset: -10% -10% auto;
    height: 140%;
    background: var(--tpl-hero-orb, none);
    opacity: .85;
    pointer-events: none;
    z-index: 0;
}

body[data-theme^="template"] .content-block--hero > * {
    position: relative;
    z-index: 1;
}

body[data-theme^="template"] .content-card header h3,
body[data-theme^="template"] .content-block header h1 {
    font-family: var(--font-heading);
}

body[data-theme^="template"] .ai-suggestion {
    border-left: 4px solid var(--color-accent);
    border: 1px solid var(--tpl-ai-border, rgba(255,255,255,.12));
    background: var(--tpl-ai-bg, rgba(255,255,255,.04));
    border-radius: var(--radius-callout, .9rem);
}

body[data-theme^="template"] .content-body a:not(.affiliate-zoom__action) {
    color: var(--tpl-link-color, var(--color-accent));
    text-decoration: underline;
}

body[data-theme^="template"] .content-body a:not(.affiliate-zoom__action):hover {
    color: var(--tpl-link-hover, #fff);
}

body[data-theme^="template"] .site-footer {
    background: var(--tpl-footer-bg, var(--tpl-shell-bg, var(--color-surface)));
    border-top: 1px solid var(--tpl-footer-border, var(--tpl-card-border));
    color: var(--color-muted);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

body[data-theme^="template"] .site-footer a {
    color: var(--color-accent);
}

body[data-theme^="template"] .site-footer a:hover {
    color: var(--tpl-link-hover, #fff);
}

@media (max-width: 768px) {
    body[data-theme^="template"] .site-nav {
        --tpl-nav-padding: 4.25rem clamp(1.2rem, 6vw, 2rem) 2rem;
        --tpl-nav-gap: 1.35rem;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: stretch;
        border: var(--tpl-nav-border, 1px solid rgba(255,255,255,.12));
        border-top: var(--tpl-nav-border-top, var(--tpl-nav-border, 1px solid rgba(255,255,255,.12)));
        border-bottom: var(--tpl-nav-border-bottom, var(--tpl-nav-border, 1px solid rgba(255,255,255,.12)));
        border-left: var(--tpl-nav-border-left, var(--tpl-nav-border, 1px solid rgba(255,255,255,.12)));
        border-right: var(--tpl-nav-border-right, var(--tpl-nav-border, 1px solid rgba(255,255,255,.12)));
        border-radius: var(--radius-nav, var(--radius-panel, 1.35rem));
        box-shadow: var(--tpl-nav-shadow, 0 30px 65px rgba(0,0,0,.6));
        background: var(--tpl-nav-bg, var(--tpl-overlay, rgba(5,6,12,.96)));
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        transform: translate3d(112%, 0, 0);
        transition: transform .32s ease, opacity .24s ease, visibility 0s linear .24s;
    }
    body[data-theme^="template"] .site-nav__list {
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: stretch;
        gap: .2rem;
    }
    body[data-theme^="template"] .site-nav.is-open {
        pointer-events: auto;
        opacity: 1;
        visibility: visible;
        transform: translate3d(0, 0, 0);
        transition: transform .32s ease, opacity .24s ease;
    }
    body[data-theme^="template"] .nav-link {
        width: 100%;
        text-align: left;
    }
    body[data-theme^="template"] .site-nav__mobile-home {
        color: var(--color-accent);
    }
    body[data-theme^="template"] .site-nav__overlay {
        background: color-mix(in srgb, var(--tpl-overlay, rgba(0,0,0,.85)) 80%, rgba(0,0,0,.65));
    }
}