/*
Theme Name: Stredná pre teba
Theme URI: https://www.strednapreteba.sk/
Author: Oliver / custom theme
Description: Custom WordPress theme for Stredná pre teba.
Version: 1.0.0
Text Domain: strednapreteba
*/

:root {
    --spt-navy: #28243d;
    --spt-blue: #347fdc;
    --spt-cyan: #32b8e8;
    --spt-light: #f2f4f6;
    --spt-border: #c7d4e5;
    --spt-text: #28243d;
    --spt-orange: #f3a144;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: 'Public Sans', sans-serif;
    color: var(--spt-text);
    background: #fff;
}

.font-bebas {
    font-family: 'Bebas Neue', cursive;
}

.spt-menu-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    transition: color .2s ease, background-color .2s ease;
}

.spt-menu-link:hover,
.current-menu-item > .spt-menu-link,
.current_page_item > .spt-menu-link {
    color: #ffd31f;
}

.spt-menu-link--ib {
    min-height: 36px;
    padding: 0 15px;
    border-radius: 3px;
    background: var(--spt-cyan);
    color: #fff !important;
}

.spt-menu-link--ib:hover {
    background: #22aada;
}

.spt-mobile-link {
    display: block;
    padding: 12px 14px;
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.spt-mobile-link:hover {
    background: rgba(255,255,255,.08);
}

.spt-mobile-link.spt-menu-link--ib {
    display: inline-flex;
    margin: 8px 0;
}

select {
    background-image: none;
}

@media (max-width: 1023px) {
    #wpadminbar {
        position: fixed;
    }
}


/* ============================================================
   School archive / filtering / detail
   ============================================================ */

.spt-filter-select {
    position: relative;
}

.spt-filter-button {
    display: flex;
    width: 100%;
    min-height: 58px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 20px;
    border: 1px solid #aebfd4;
    border-radius: 4px;
    background: #fff;
    color: #28243d;
    font-family: 'Public Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.spt-filter-button:hover,
.spt-filter-button:focus-visible,
.spt-filter-select.is-open .spt-filter-button {
    border-color: #347fdc;
    outline: 0;
    box-shadow: 0 0 0 2px rgba(52, 127, 220, .08);
}

.spt-filter-chevron {
    flex: 0 0 auto;
    transition: transform .2s ease;
}

.spt-filter-select.is-open .spt-filter-chevron {
    transform: rotate(180deg);
}

.spt-filter-menu {
    position: absolute;
    z-index: 70;
    top: calc(100% + 14px);
    left: 0;
    width: 100%;
    max-height: 440px;
    overflow-y: auto;
    border: 1px solid #d9dee5;
    background: #fff;
    box-shadow: 0 12px 30px rgba(40, 36, 61, .08);
}

.spt-filter-menu[hidden] {
    display: none !important;
}

.spt-filter-option {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 46px;
    align-items: center;
    padding: 10px 20px;
    border: 0;
    background: #fff;
    color: #28243d;
    font-family: 'Public Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
}

.spt-filter-option:hover,
.spt-filter-option:focus-visible {
    background: #f6f6f6;
    outline: 0;
}

.spt-filter-option.is-selected {
    background: #f3f3f3;
    font-weight: 700;
}

.spt-filter-option.is-selected::before {
    content: '';
    position: absolute;
    left: -1px;
    top: 50%;
    width: 2px;
    height: 18px;
    background: #f3a144;
    transform: translateY(-50%);
}

.spt-program-filter-panel {
    display: none;
    margin-top: 14px;
    border: 1px solid #d9dee5;
    background: #fff;
    box-shadow: 0 12px 30px rgba(40, 36, 61, .05);
}

.spt-program-filter-panel.is-open {
    display: block;
}

.spt-school-card {
    position: relative;
    display: flex;
    min-height: 100%;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    color: #28243d;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

.spt-school-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgba(40, 36, 61, .10);
}

.spt-school-card::after {
    content: '';
    position: absolute;
    left: 40px;
    bottom: 0;
    width: 42px;
    height: 4px;
    background: var(--spt-school-accent, #347fdc);
    transition:
        left .38s cubic-bezier(.2, .7, .2, 1),
        width .38s cubic-bezier(.2, .7, .2, 1);
}

.spt-school-card:hover::after,
.spt-school-card:focus-visible::after {
    left: 0;
    width: 100%;
}

.spt-program-item {
    border-top: 1px solid #e5e9ee;
    background: #fff;
}

.spt-program-item:last-child {
    border-bottom: 1px solid #e5e9ee;
}

.spt-program-body[hidden] {
    display: none !important;
}

.spt-program-toggle[aria-expanded="true"] .spt-program-arrow {
    transform: rotate(180deg);
}

.spt-program-arrow {
    transition: transform .2s ease;
}

.spt-detail-content a {
    color: #347fdc;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.spt-detail-content p + p {
    margin-top: .75rem;
}

.spt-detail-content ul {
    margin: .75rem 0 0 1.2rem;
    list-style: disc;
}

.spt-gallery-image {
    aspect-ratio: 1 / .78;
    width: 100%;
    object-fit: cover;
}

.spt-contact-row + .spt-contact-row {
    border-top: 1px solid #edf0f3;
}


/* ========================================
   GALÉRIA / LIGHTBOX
   ======================================== */

.spt-lightbox-item { cursor: zoom-in; }
.spt-lightbox-item img { transition: transform .25s ease, opacity .25s ease; }
.spt-lightbox-item:hover img { transform: scale(1.025); }

.spt-lightbox {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 28px 72px;
    background: rgba(15, 17, 27, .94);
    opacity: 0;
    transition: opacity .2s ease;
}

.spt-lightbox.is-open { display: flex; opacity: 1; }

.spt-lightbox__dialog {
    position: relative;
    display: flex;
    width: min(1440px, 100%);
    height: min(90vh, 980px);
    align-items: center;
    justify-content: center;
}

.spt-lightbox__image {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 88vh;
    object-fit: contain;
    box-shadow: 0 20px 70px rgba(0, 0, 0, .35);
}

.spt-lightbox__close,
.spt-lightbox__prev,
.spt-lightbox__next {
    position: fixed;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    background: rgba(255, 255, 255, .10);
    color: #fff;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease, border-color .2s ease;
    backdrop-filter: blur(6px);
}

.spt-lightbox__close:hover,
.spt-lightbox__prev:hover,
.spt-lightbox__next:hover,
.spt-lightbox__close:focus-visible,
.spt-lightbox__prev:focus-visible,
.spt-lightbox__next:focus-visible {
    border-color: rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .18);
    outline: 0;
}

.spt-lightbox__close { top: 24px; right: 24px; }
.spt-lightbox__close:hover { transform: rotate(90deg); }
.spt-lightbox__prev { left: 20px; top: 50%; transform: translateY(-50%); }
.spt-lightbox__next { right: 20px; top: 50%; transform: translateY(-50%); }
.spt-lightbox__prev:hover,
.spt-lightbox__prev:focus-visible,
.spt-lightbox__next:hover,
.spt-lightbox__next:focus-visible { transform: translateY(-50%) scale(1.05); }

.spt-lightbox__counter {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .35);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .03em;
}

.maplibregl-ctrl-bottom-left { 
display:none !important;
}

body.spt-lightbox-open { overflow: hidden; }

@media (max-width: 767px) {
    .spt-filter-menu {
        max-height: 330px;
    }

    .spt-school-card::after {
        left: 24px;
    }
}


@media (max-width: 640px) {
    .spt-lightbox { padding: 64px 16px 54px; }
    .spt-lightbox__close,
    .spt-lightbox__prev,
    .spt-lightbox__next { width: 42px; height: 42px; }
    .spt-lightbox__close { top: 14px; right: 14px; }
    .spt-lightbox__prev { left: 10px; }
    .spt-lightbox__next { right: 10px; }
    .spt-lightbox__counter { bottom: 14px; }
}