/* ==========================================================
   COMPONENTS
   Nejc Vobovnik
========================================================== */



/* ==========================================================
   HEADER
========================================================== */

.header{

    position: sticky;

    top: 0;

    left: 0;

    width: 100%;

    height: var(--header-height);

    background: rgba(255,255,255,.96);

    backdrop-filter: blur(12px);

    border-bottom: 1px solid transparent;

    transition: all .35s ease;

    z-index: 1000;

}

.header.scrolled{

    border-color: var(--color-border);

    box-shadow: 0 12px 35px rgba(0,0,0,.08);

}



.header__container{

    height:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

}



/* ==========================================================
   LOGO
========================================================== */

.logo{

    display:flex;

    align-items:center;

}



.logo img{

    height:62px;

    width:auto;

    transition:.3s ease;

}



.logo:hover img{

    transform:scale(1.03);

}



/* ==========================================================
   NAVIGATION
========================================================== */

.nav{

    display:flex;

    align-items:center;

}



.nav__list{

    display:flex;

    align-items:center;

    gap:38px;

}



.nav__list li{

    list-style:none;

}



.nav__list a{

    position:relative;

    display:inline-flex;

    align-items:center;

    height:84px;

    font-size:15px;

    font-weight:600;

    color:var(--color-text);

    transition:var(--transition);

}



.nav__list a:hover{

    color:var(--color-primary);

}



/* rumena črta */

.nav__list a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:18px;

    width:0;

    height:3px;

    border-radius:20px;

    background:var(--color-secondary);

    transition:.3s ease;

}



.nav__list a:hover::after,

.nav__list a.active::after{

    width:100%;

}



.nav__list a.active{

    color:var(--color-primary);

}



/* ==========================================================
   HEADER BUTTON
========================================================== */

.header__button{

    margin-left:40px;

}



/* ==========================================================
   BUTTONS
========================================================== */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:15px 30px;

    border:none;

    border-radius:999px;

    cursor:pointer;

    font-size:15px;

    font-weight:700;

    transition:var(--transition);

}



.btn--primary{

    background:var(--color-primary);

    color:#fff;

}



.btn--primary:hover{

    background:var(--color-primary-dark);

    transform:translateY(-3px);

}



.btn--secondary{

    background:transparent;

    color:var(--color-primary);

    border:2px solid var(--color-primary);

}



.btn--secondary:hover{

    background:var(--color-primary);

    color:#fff;

}



/* ==========================================================
   MOBILE BUTTON
========================================================== */

.menu-toggle{

    display:none;

    width:48px;

    height:48px;

    border:none;

    background:none;

    cursor:pointer;

    color:var(--color-primary);

}



.menu-toggle svg{

    width:28px;

    height:28px;

}



/* ==========================================================
   SECTION
========================================================== */

.section-header{

    text-align:center;

    max-width:850px;

    margin:0 auto 70px;

}



.section-subtitle{

    display:inline-block;

    margin-bottom:16px;

    color:var(--color-primary);

    font-size:15px;

    font-weight:700;

    letter-spacing:.12em;

    text-transform:uppercase;

}



.section-title{

    margin-bottom:20px;

}



.section-description{

    max-width:720px;

    margin:auto;

    color:var(--color-text-light);

    font-size:19px;

    line-height:1.8;

}
/* ==========================================================
   PROGRAM CARDS
========================================================== */

.program-card{

    position:relative;

    display:flex;

    flex-direction:column;

    padding:36px;

    background:var(--color-white);

    border:1px solid var(--color-border);

    border-radius:20px;

    overflow:hidden;

    transition:all .35s ease;

    box-shadow:var(--shadow);

}

.program-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:var(--color-secondary);

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s ease;

}

.program-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(35,64,137,.15);

}

.program-card:hover::before{

    transform:scaleX(1);

}



/* ==========================================================
   PROGRAM ICON
========================================================== */

.program-card__icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:72px;

    height:72px;

    border-radius:18px;

    background:rgba(35,64,137,.08);

    font-size:34px;

    margin-bottom:24px;

    transition:.3s;

}

.program-card:hover .program-card__icon{

    transform:scale(1.08);

    background:rgba(255,209,0,.15);

}



/* ==========================================================
   PROGRAM TEXT
========================================================== */

.program-card h3{

    margin-bottom:18px;

    color:var(--color-primary);

    font-size:28px;

}

.program-card p{

    color:var(--color-text-light);

    line-height:1.8;

    flex:1;

}



/* ==========================================================
   PROGRAM LINK
========================================================== */

.program-card__more{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:28px;

    font-weight:700;

    color:var(--color-primary);

    transition:.3s;

}

.program-card__more::after{

    content:"→";

    transition:.3s;

}

.program-card:hover .program-card__more{

    gap:14px;

}
/* ==========================================================
   FOOTER
========================================================== */

.site-footer{

    background:var(--color-primary);

    color:#fff;

    padding:80px 0 30px;

}

.footer__container{

    display:grid;

    grid-template-columns:1.8fr 1fr 1fr 1.4fr;

    gap:60px;

    align-items:start;

}

.footer__title{

    font-size:22px;

    margin-bottom:24px;

}

.footer__text{

    color:rgba(255,255,255,.85);

    line-height:1.8;
    
    max-width:340px;

}

.footer__links{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.footer__links a{

    color:rgba(255,255,255,.85);

    transition:.3s;

}

.footer__links a:hover{

    color:var(--color-secondary);

}

.footer__bottom{

    margin-top:60px;

    padding-top:30px;

    border-top:1px solid rgba(255,255,255,.15);

    text-align:center;

    color:rgba(255,255,255,.7);

}
/* ==========================================================
   FOOTER PARTY
========================================================== */

.footer__party{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}

.footer__party-text{

    margin-bottom:18px;

    color:rgba(255,255,255,.7);

    font-size:14px;

    line-height:1.5;

}

.footer__party-logo{

    width:220px;

    max-width:100%;

    height:auto;

}
.social-links a{

    width:52px;
    height:52px;

    display:flex;
    justify-content:center;
    align-items:center;

    border-radius:50%;

    background:rgba(255,255,255,.12);
    color:#ffffff;

    transition:var(--transition);

}

.social-links a:hover{

    background:var(--color-secondary);
    color:var(--color-primary);

    transform:translateY(-4px);

}
.social-links i{

    font-size:20px;

}
.footer__email {
    display: inline-block;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.95rem;
    text-decoration: none;
    transition: color 0.25s ease;
}

.footer__email:hover {
    color: #ffffff;
}

/* ==========================================================
   MODAL
========================================================== */

.program-modal{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.65);

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:9999;

}

.program-modal.show{

    opacity:1;

    visibility:visible;

}

.program-modal-box{

    width:min(900px,92%);

    max-height:85vh;

    overflow:auto;

    background:#fff;

    border-radius:20px;

    padding:50px;

    position:relative;

}

.close-modal{

    position:absolute;

    top:18px;

    right:22px;

    width:42px;

    height:42px;

    border:none;

    background:none;

    cursor:pointer;

    font-size:36px;

    color:#999;

}

.close-modal:hover{

    color:#000;

}



/* ==========================================================
   FORMS
========================================================== */

.form-group{

    margin-bottom:24px;

}

.form-label{

    display:block;

    margin-bottom:10px;

    font-weight:600;

}

.form-control{

    width:100%;

    padding:16px 20px;

    border:1px solid var(--color-border);

    border-radius:14px;

    outline:none;

    transition:.3s;

    font-family:inherit;

    font-size:16px;

}

.form-control:focus{

    border-color:var(--color-primary);

    box-shadow:0 0 0 4px rgba(35,64,137,.08);

}

textarea.form-control{

    min-height:180px;

    resize:vertical;

}


/* ==========================================================
   BADGE
========================================================== */

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 16px;

    border-radius:999px;

    background:#EEF3FF;

    color:var(--color-primary);

    font-size:13px;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

}



/* ==========================================================
   SCROLL TO TOP
========================================================== */

.scroll-top{

    position:fixed;

    right:30px;

    bottom:30px;

    width:52px;

    height:52px;

    display:flex;

    justify-content:center;

    align-items:center;

    border:none;

    border-radius:50%;

    background:var(--color-primary);

    color:#fff;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transition:var(--transition);

    z-index:999;

}

.scroll-top.show{

    opacity:1;

    visibility:visible;

}

.scroll-top:hover{

    background:var(--color-primary-dark);

    transform:translateY(-5px);

}



/* ==========================================================
   FADE ANIMATIONS
========================================================== */

.fade-up{

    opacity:0;

    transform:translateY(40px);

    transition:.7s ease;

}

.fade-up.show{

    opacity:1;

    transform:none;

}



.fade{

    opacity:0;

    transition:.7s ease;

}

.fade.show{

    opacity:1;

}



.zoom{

    opacity:0;

    transform:scale(.92);

    transition:.6s ease;

}

.zoom.show{

    opacity:1;

    transform:scale(1);

}



/* ==========================================================
   UTILITIES
========================================================== */

.text-center{

    text-align:center;

}

.mb-0{

    margin-bottom:0;

}

.mt-40{

    margin-top:40px;

}

.hidden{

    display:none;

}



/* ==========================================================
   COMPONENT RESPONSIVE
========================================================== */

@media (max-width:992px){

    .nav{

        display:none;

    }

    .header__button{

        display:none;

    }

    .menu-toggle{

        display:flex;

        align-items:center;

        justify-content:center;

    }

    .footer__container{

        grid-template-columns:1fr;

        gap:40px;

    }

}



@media (max-width:768px){

    .section-title{

        font-size:34px;

    }

    .section-description{

        font-size:17px;

    }

    .program-modal-box{

        padding:30px;

    }

}



@media (max-width:576px){

    .logo img{

        height:52px;

    }

    .btn{

        width:100%;

    }

    .section-title{

        font-size:30px;

    }

}
/* ==========================================
   COMMUNITY MAP LABELS
========================================== */

#municipality-map .community-label {
    fill: var(--color-primary);

    font-family: inherit;
    font-size: 15px;
    font-weight: 800;

    text-anchor: middle;
    dominant-baseline: middle;

    pointer-events: none;

    paint-order: stroke;

    stroke: rgba(255, 255, 255, .96);
    stroke-width: 4px;
    stroke-linejoin: round;

    transition:
        fill .25s ease,
        transform .25s ease;
}


#municipality-map .community-label.active {
    fill: #fff;
}


@media (max-width: 700px) {

    #municipality-map .community-label {
        font-size: 12px;

        stroke-width: 3px;
    }

}
/* ==========================================================
   404 ERROR PAGE
========================================================== */

.error-page {
    min-height: 72vh;

    display: flex;

    align-items: center;

    padding: 110px 0 120px;

    background: #fff;
}


.error-page__content {
    max-width: 760px;

    margin: 0 auto;

    text-align: center;
}


.error-page__number {
    display: block;

    margin-bottom: 10px;

    font-size: clamp(110px, 15vw, 210px);
    line-height: .8;

    font-weight: 800;

    letter-spacing: -.07em;

    color: rgba(35, 64, 137, .07);
}


.error-page h1 {
    margin: 20px 0 24px;

    font-size: clamp(40px, 5vw, 68px);
    line-height: 1.05;

    font-weight: 800;

    letter-spacing: -.04em;

    color: var(--color-primary);
}


.error-page p {
    max-width: 650px;

    margin: 0 auto 35px;

    font-size: 18px;
    line-height: 1.75;

    color: var(--color-text-light);
}


@media (max-width: 576px) {

    .error-page {
        min-height: auto;

        padding: 80px 0 90px;
    }


    .error-page__number {
        font-size: 105px;
    }


    .error-page h1 {
        font-size: 39px;
    }


    .error-page p {
        font-size: 16px;
        line-height: 1.7;
    }


    .error-page .btn {
        width: 100%;
    }

}