:root {
    --bg-primary: #0C764A;      /* logotipo žalia – pagrindinė žalia spalva */
    --bg-primary-dark: #075236; /* tamsesnė žalios versija hover'iams, šešėliams ir pan. */
    --accent: #f1e610;          /* akcento spalva (geltona) mygtukams, linijoms ir t.t. */
    --text-dark: #1F2933;       /* tamsi teksto spalva pagrindiniam tekstui */
    --text-muted: #6B7280;      /* prislopintas tekstas (aprašymai, pagalbinis tekstas) */
    --light-bg: #F3F4F6;        /* šviesus fonas sekcijoms, kortelėms */
}

/* Visoms elementų dėžutėms naudojam border-box,
   kad padding neplėstų bendro elemento pločio/aukščio */
* {
    box-sizing: border-box;
}

/* Bendri nustatymai body elementui */
body {
    /* Šriftų prioritetų sąrašas – Poppins, Roboto ir sisteminiai */
    font-family: "Poppins", "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    /* Pagrindinė teksto spalva – tamsi */
    color: var(--text-dark);
    /* Fono spalva – balta */
    background-color: #ffffff;
    /* Sklandus „scrollinimas“ iki anchor'ų (#id) */
    scroll-behavior: smooth;
    /* Viršutinis padding – kad turinys neužlįstų po fixed header'iu */
    padding-top: 100px;
}

/* =================== BENDRAS HEADERIS =================== */

/* Pagrindinis <header> blokas viršuje */
.site-header {
    /* Švelnus šešėlis apačioje – sukuria „pakelto“ headerio efektą */
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.12);
    /* Fono spalva – mūsų pagrindinė žalia */
    background-color: var(--bg-primary);
}

/* =================== KONTAKTŲ JUOSTA VIRŠUJE =================== */

/* Viršutinė kontaktinė juosta ant žalio fono */
.contact-bar {
    background-color: var(--bg-primary);
    color: #ffffff;
    font-size: 0.9rem;  /* truputį mažesnis šriftas negu default */
}

/* Kontaktų juostoje esantis .container turi bent 60px aukštį,
   kad viskas gražiai tilptų per vieną eilutę didesniuose ekranuose */
.contact-bar .container {
    min-height: 60px;
}

/* Logotipo paveikslėlis header'yje */
.header-logo {
    height: 56px;  /* fiksuotas aukštis */
    width: auto;   /* plotis proporcingai prisitaiko */
}

/* Mokyklos pavadinimo stilius šalia logotipo */
.school-title {
    font-family: "Playfair Display", "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 1.4rem;
    letter-spacing: 0.03em; /* šiek tiek praskirtos raidės */
    text-transform: uppercase; /* visos raidės didžiosios */
}

/* =================== KONTAKTŲ INFO BLOKAS (DEŠINĖJE) =================== */

/* .contact-info yra flex konteineris, ištempiamas į dešinę */
.contact-info {
    flex: 1;                     /* užima likusį plotį tarp logotipo ir dešinės krašto */
    justify-content: flex-end;   /* „stumia“ turinį į dešinę pusę */
    gap: 2.5rem;                 /* tarpai tarp kontaktų elementų */
}

/* Kiekvienas kontaktinis <span> – horizontalus blokas su ikonėle ir tekstu */
.contact-info span {
    white-space: nowrap;     /* neleidžia tekstui laužytis į kitą eilutę */
    color: #ffffff;          /* balta teksto spalva */
    display: inline-flex;    /* naudojam flex viduje, kad ikonėlė ir tekstas lygiuotųsi vertikaliai */
    align-items: center;     /* centravimas vertikaliai */
}

/* Ikonų stilius kontaktų juostoje */
.contact-info i {
    opacity: 0.9;           /* truputį permatoma, kad neatrodytų per ryškiai */
}

/* =================== SOCIALINĖS IKONĖLĖS =================== */

/* Nuoroda-ikonėlė socialiniams tinklams */
.contact-social-link {
    display: inline-flex;            /* flex, kad ikonėlė centruotųsi */
    align-items: center;
    justify-content: center;
    color: #ffffff;                  /* balta ikonų spalva */
    font-size: 1.1rem;               /* truputį didesnė nei tekstas */
    text-decoration: none;           /* be pabraukimo */
    transition: color 0.15s ease,    /* sklandus perėjimas spalvai */
                transform 0.15s ease;/* ir transformacijai */
}

/* Hover efektas social ikonėlėms */
.contact-social-link:hover {
    color: var(--accent);            /* pakeičiam į akcento (geltoną) spalvą */
    transform: translateY(-1px);     /* šiek tiek pakeliame ikoną aukštyn */
}

/* =================== SEPARATORIUS TARP JUOSTŲ =================== */

/* Dekoratyvinis separatorius tarp tam tikrų header juostų */
.header-divider {
    height: 6px;
    /* Fonas: du radial gradientai kampuose ir linijinis viduryje – suteikia „švytėjimo“ efektą */
    background:
        radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.45), transparent 55%),
        radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.45), transparent 55%),
        linear-gradient(90deg,
            rgba(255, 255, 255, 0.08),
            rgba(255, 255, 255, 0.9),
            rgba(255, 255, 255, 0.08));
    opacity: 0.9;
}

/* Plona linija tarp kontaktų ir meniu */
.header-divider-contact-menu {
    height: 2px;
    background-color: #13503c;
}

/* =================== MENIU JUOSTA (NAVBAR) =================== */

/* Meniu juosta apačioje headerio */
.main-navbar {
    backdrop-filter: blur(10px); /* suteikia „stiklinį“ blur efektą, jei yra permatomumas */
    background: var(--bg-primary); /* pagrindinė žalia spalva */
    padding-top: 0.25rem;          /* vertikalus padding viršuje */
    padding-bottom: 0.25rem;       /* vertikalus padding apačioje */
    min-height: 60px;              /* minimalus meniu juostos aukštis */
}

/* =================== DROPDOWN MENIU (ADMIN, PASLAUGOS IR PAN.) =================== */

/* Bendra klasė dropdown elementams meniu juostoje */
.main-navbar .admin-dropdown {
    position: relative; /* reikalinga, kad dropdown menu būtų korektiškai pozicionuojamas */
}

/* Išskleidžiamas dropdown meniu, kuris atsidaro po nav-link */
.main-navbar .admin-dropdown .dropdown-menu {
    background-color: rgba(12, 118, 74, 0.85);      /* pusiau permatomas žalias fonas */
    border: 1px solid rgba(255, 255, 255, 0.2);     /* šviesus rėmelis aplink meniu */
    border-radius: 10px;                            /* suapvalinti kampai */
    padding: 0.25rem 0;                             /* vertikalūs tarpeliai meniu viduje */
    margin-top: 9px;                                /* atitraukimas nuo nav-link */
    min-width: max-content;                         /* plotis pagal turinį */
    width: auto;
    backdrop-filter: blur(6px);                     /* blur efektas dropdown fonui */
    inset: auto;                                    /* neutralizuoja kai kuriuos default bootstrap nustatymus */
}

/* Kiekvienas dropdown item'as */
.main-navbar .admin-dropdown .dropdown-item {
    color: #E5E7EB;           /* šviesi teksto spalva */
    font-size: 0.95rem;       /* šiek tiek sumažintas šriftas */
    padding: 0.35rem 0.9rem;  /* vertikalus ir horizontalus padding */
    white-space: nowrap;      /* neleidžia tekstui laužytis */
}

/* Hover/focus būsena dropdown item'ams */
.main-navbar .admin-dropdown .dropdown-item:hover,
.main-navbar .admin-dropdown .dropdown-item:focus {
    background-color: rgba(0, 0, 0, 0.12); /* švelnus patamsėjimas */
    color: var(--accent);                  /* tekstas tampa akcento spalvos */
}

/* Maža rodyklė (trikampis) prie dropdown nuorodos */
.main-navbar .admin-dropdown .dropdown-toggle::after {
    margin-left: 0.35rem;  /* tarpelis tarp teksto ir rodyklės */
    vertical-align: 0.1em; /* šiek tiek pakeliam */
    border-top-color: #E5E7EB; /* rodyklės spalva (border trišakis) – šviesi */
}

/* Kai dropdown yra atidarytas (klasė show) – nuoroda nusidažo akcento spalva */
.main-navbar .admin-dropdown.show > .nav-link,
.main-navbar .admin-dropdown .nav-link.show {
    color: var(--accent);
}

/* =================== PAPRASTI NAV NUORODŲ STILIAI =================== */

/* Bendras stilius visoms nav nuorodoms */
.main-navbar .nav-link {
    font-weight: 500;       /* pusiau paryškintas tekstas */
    color: #E5E7EB;         /* šviesi spalva ant žalio fono */
    position: relative;     /* reikalinga, kad pseudo-elementą ::after padėtume apačioje */
}

/* Hover/focus efektas – tekstas tampa akcento spalvos */
.main-navbar .nav-link:hover,
.main-navbar .nav-link:focus {
    color: var(--accent);
}

/* Aktyvi nuoroda – akcento spalva ir papildomas svoris */
.main-navbar .nav-link.active {
    color: var(--accent) !important; /* perrašome bet kokias kitas taisykles */
    font-weight: 500;
}

/* Po aktyvia nav nuoroda atsiranda maža „pabraukimo“ juostelė */
.main-navbar .nav-link.active::after {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: -0.25rem;          /* šiek tiek žemiau teksto */
    height: 4px;
    border-radius: 999px;      /* labai suapvalinti kampai – kaip kapsulė */
    background-color: var(--accent);
}

/* Dropdown nav nuorodoms nenaudojame tos pačios juostelės apačioje */
.main-navbar .admin-dropdown .nav-link::after {
    content: none !important;  /* atšaukiam pseudo-elementą aktyviai būsenai */
}

/* =================== PRISIJUNGIMO MYGTUKAS MENIU JUOSTOJE =================== */

/* Outline tipo mygtukas ant žalio header fono */
.main-navbar .btn-outline-success {
    border-color: #ffffff;   /* baltas rėmelis */
    color: #ffffff;          /* baltas tekstas */
}

/* Hover būsena – baltas fonas, žalias tekstas */
.main-navbar .btn-outline-success:hover {
    background-color: #ffffff;
    color: var(--bg-primary);
    border-color: #ffffff;
}

/* Išjungiam default Bootstrap navbar šešėlį (kad nekonkuruotų su mūsų) */
.navbar {
    box-shadow: none;
}

/* =================== NAUDINGOS UTILITARINĖS KLASĖS =================== */

/* Švelniai žalsvas fonas sekcijoms */
.bg-soft-primary {
    background-color: rgba(12, 118, 74, 0.06);
}

/* Teksto spalva – akcento geltona */
.text-accent {
    color: var(--accent);
}

/* =================== RESPONSIVE NUSTATYMAI HEADERIUI =================== */

@media (max-width: 767.98px) {
    /* Mažuose ekranuose kontaktų juostos container išdėstome stulpeliu */
    .contact-bar .container {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    /* Kontaktų info – dešinėj nebespaudžiam, lygiuojam nuo kairės, mažesni tarpai */
    .contact-info {
        justify-content: flex-start;
        gap: 0.75rem;
    }

    /* Mokyklos pavadinimas mažėja, kad tilptų */
    .school-title {
        font-size: 1.15rem;
    }
}

/* =================== PRISIJUNGIMO MODALO DIZAINAS =================== */

/* Visas prisijungimo modalo lango blokas */
.login-modal {
    border-radius: 1rem;                            /* suapvalinti kampai */
    overflow: hidden;                               /* kad vidus neperlipinėtų už kampų */
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25); /* stipresnis šešėlis – „iškeltas“ langas */
    background: linear-gradient(
        135deg,
        #e9f7f1 0%,   /* švelni žalsva */
        #f4fbf7 35%,  /* labai šviesi pastelė */
        #e3f2ea 100%  /* dar viena švelni žalsva */
    );
}

/* Modalo headeris – viršutinė juosta su pavadinimu */
.login-modal .modal-header {
    border-bottom: 1px solid rgba(209, 213, 219, 0.7); /* švelnus apatinis rėmelis */
    background: transparent;                           /* permatomas fonas (gradientą duoda pats .login-modal) */
}

/* Modalo pavadinimo tekstas */
.login-modal .modal-title {
    font-weight: 600;
    color: #075236; /* tamsesnė žalios versija, aiškiai matosi */
}

/* Modalo vidus (body) – permatomas, gradientą jau turi konteineris */
.login-modal .modal-body {
    background: transparent;
}

/* Label'ų stilius formos viduje */
.login-modal .form-label {
    font-weight: 500;
    color: #064e3b;
}

/* Įvesties laukų stilius – šviesūs su šiek tiek šešėlio */
.login-modal .form-control {
    background-color: rgba(255, 255, 255, 0.9);
    border-color: #cbd5e1;
    color: #111827;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
}

/* Fokusacijos būsena įvesties laukams – žalia apvado spalva ir šviesus žalias glow */
.login-modal .form-control:focus {
    background-color: #ffffff;
    border-color: #0C764A;
    box-shadow: 0 0 0 0.15rem rgba(12, 118, 74, 0.25);
}

/* Checkbox label'ų spalva */
.login-modal .form-check-label {
    color: #4b5563;
}

/* Prisijungimo mygtukas viduje modalo – šiek tiek paryškintas */
.login-modal .btn-success {
    font-weight: 600;
}

/* =================== PRISIJUNGIMO IKONOS MYGTUKAS =================== */

/* Apvalus mažas mygtukas su ikona (pvz. maža „power“ piktograma header'io kampe) */
.login-icon-btn {
    width: 28px;              /* fiksuotas plotis (mažesnis) */
    height: 28px;             /* fiksuotas aukštis */
    padding: 0;               /* be vidaus padding, kad nebūtų per didelis */
    border-radius: 50%;       /* pilnai apvalus */
    display: inline-flex;     /* flex, kad ikona gražiai centruotųsi */
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 0.85rem;       /* šiek tiek sumažintas font-size */
}

/* Ikona esančia tame login-icon-btn mygtuke */
.login-icon-btn .power-icon {
    font-size: 1rem;               /* ikonėlė šiek tiek didesnė už teksto dydį */
    transform: translateY(1px);    /* švelniai nuleidžiam, kad optiškai centruotųsi */
}

/* Maži ekranai – jokio pakėlimo, modalas arčiau centro, su kraštiniais tarpais */
@media (max-width: 575.98px) {
    .modal-dialog-login-up {
        margin: 1.5rem auto;          /* kad nepriliptų prie kraštų */
        transform: none !important;   /* nebekeliam į viršų */
    }

    .login-modal {
        max-height: calc(100vh - 3rem); /* kad tilptų į ekraną */
        overflow-y: auto;               /* jei netelpa – galima scrollinti */
    }
}

/* Vidutiniai ekranai (planšetės) – lengvas pakėlimas, pvz. 30px */
@media (min-width: 576px) and (max-width: 991.98px) {
    .modal.show .modal-dialog-login-up {
        transform: translateY(-30px) !important;
    }
}

/* Dideli ekranai – kaip norėjai, ~70px aukštyn */
@media (min-width: 992px) {
    .modal.show .modal-dialog-login-up {
        transform: translateY(-140px) !important;
    }
}

/* ==== Page builder turinys viešame puslapyje (show.html) ==== */

/* Pagrindinis wrapperis – kad netilptų po meniu */
#cms-page-wrapper {
    padding-top: 3rem;  /* ~56px: iškelia headingą žemiau meniu */
}
/* Sekcijos be papildomo padding/margin */
#cms-page-wrapper section {
    margin: 0;
    padding: 0;
}

/* Minimalus tarpas tik tarp sekcijų */
#cms-page-wrapper section + section {
    margin-top: 8px;   /* jei nori visai sulipus – dėk 0 */
}

/* Heading'ų tarpai builderio turinyje */
#cms-page-wrapper h1,
#cms-page-wrapper h2,
#cms-page-wrapper h3,
#cms-page-wrapper h4,
#cms-page-wrapper h5,
#cms-page-wrapper h6 {
    margin-top: 0.4rem;
    margin-bottom: 0.4rem;
    line-height: 1.2;
}

/* Pirmas headingas puslapyje – visai be viršutinio tarpo */
#cms-page-wrapper h1:first-child,
#cms-page-wrapper h2:first-child,
#cms-page-wrapper h3:first-child {
    margin-top: 0;
}

/* Pastraipų tarpai builderio turinyje */
#cms-page-wrapper p {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

/* Paveikslėlių tarpai */
#cms-page-wrapper img {
    display: block;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

/* Kad d-flex wrapperio apačioj nebūtų papildomo tarpo */
#cms-page-wrapper section > .d-flex {
    margin-bottom: 0;
}

/* Lygiavimas iš Quill (Text editor modulio) */
#cms-page-wrapper .ql-align-center {
    text-align: center;
}
#cms-page-wrapper .ql-align-right {
    text-align: right;
}
#cms-page-wrapper .ql-align-justify {
    text-align: justify;
}