/*
 * Ajustări ICE Felix Academy peste tema EduFit.
 * Se încarcă ultima, ca să nu edităm fișierele temei — la o actualizare a
 * template-ului, aici e tot ce am schimbat noi.
 */

/* ------------------------------------------------------------------
 * Paleta
 *
 * Tema venea cu mov (#6255FA) și verde (#14CF93) — culorile din pachetul
 * EduFit, nu ale noastre. Le înlocuim cu paleta de pe flyer, pliant și
 * roll-up, ca să fie aceeași identitate pe hârtie și pe ecran.
 * Sursa: ICE-Felix/flyer/macheta/construieste.py (roll-up-ul o importă de acolo).
 *
 *   #1F4E9C  albastrul mainframe — accentul, și blocul plin (cuponul de pe flyer)
 *   #16386F  același albastru, mai închis — doar pentru hover/activ
 *   #E7EEFA  hârtia — fundalul secțiunilor alternante
 *   #D3DEF1  filigranul — chenare și linii
 *   #1A1A1A  cerneala — titluri
 *   #414141  cerneala slabă — text curent
 * ------------------------------------------------------------------ */

:root {
    --primary-color: #1F4E9C;
    --secondary-color: #16386F;
    --primary-black-color: #1F4E9C;
    --heading-color: #1A1A1A;
    --text-color: #414141;
    --gray-color: #E7EEFA;
    --border-color: #D3DEF1;
}

/* Subsolul venea negru pur (#010101), culoare care nu e în paleta noastră și
   care rupea pagina la final. Îl aducem pe albastrul plin — exact blocul cu
   cupon de pe flyer, text deschis pe albastru (7,8:1, trece WCAG AA). */
.footer-default {
    background-color: var(--primary-black-color);
}

/* Umbrele și fundalurile fine ale temei au movul scris direct în rgba(), deci
   nu se schimbă din variabile. Le trecem pe albastru la aceleași opacități. */
.edufit-image-box.style-one .edufit-img.image_two,
.ef-iconic-box.style-one,
.hero-wrapper .hero-image-box .image_one img {
    -webkit-box-shadow: -3px 0px 50px 0px rgba(31, 78, 156, 0.1);
            box-shadow: -3px 0px 50px 0px rgba(31, 78, 156, 0.1);
}

.ef-iconic-box.style-one .icon,
.ef-iconic-box.style-two .icon,
.ef-iconic-box.style-three .icon,
.ef-course-grid-item.style-one .course-info .course-categories-wrap .categories-button a,
.ef-course-grid-item.style-three .course-info .course-categories-wrap .categories-button a,
.ef-course-list-item.style-one .course-info .course-categories-wrap .categories-button a,
.ef-blog-grid-item.style-one .post-content .post-meta span a {
    background-color: rgba(31, 78, 156, 0.1);
}

.blog-details-wrapper .blog-post-main .ef-blog-post .post-content .blockquote {
    background: rgba(31, 78, 156, 0.05);
}

/* Panoul de cont e adăugat de noi în pages/css/style.css, dar cu movul temei. */
.panel-nav a.active,
.panel-nav a:hover,
.panel-nav button:hover {
    background: rgba(31, 78, 156, 0.08);
    color: var(--primary-color);
}

/* Cardurile de categorii de pe prima pagină veneau în trei tente din tema
   EduFit — lila, verde-gri și piersică — plus o iconiță mov. Le trecem pe cele
   două tonuri de hârtie din tipar, alternate, cu iconița pe albastru. */
.ef-category-item.style-one.bg_one,
.ef-category-item.style-one.bg_three {
    background-color: #E7EEFA;
}

.ef-category-item.style-one.bg_two {
    background-color: #D3DEF1;
}

.ef-category-item.style-one.bg_three .icon {
    color: var(--primary-color);
}

/* Bara de sus a antetului avea bleumarinul temei scris direct (#06193A). O
   punem pe albastrul plin, ca subsolul — pagina începe și se termină cu
   blocul de brand. */
.header-one .header-top {
    background-color: var(--primary-color);
}

/* Subsolul e acum albastru, iar tema punea tot albastrul de accent pe câteva
   texte dinăuntru — albastru pe albastru, adică invizibil. Le trecem pe alb.
   (Se vedea cel mai clar la „ICE Felix Academy" din rândul de copyright.) */
.footer-copyright .copyright-text p span,
.footer-widget .footer-content .widget-nav li a:hover,
.footer-contact-widget .footer-content .info-box h5 a:hover {
    color: var(--white-color);
}

/* Banda lată de pe „Despre noi" e acum blocul albastru de brand, iar butonul
   temei e tot albastru — s-ar pierde în ea. Îl întoarcem: alb cu scris
   albastru, ca blocul alb de pe flyer. */
.ef-intro-sec .theme-btn.style-one {
    background-color: var(--white-color);
    color: var(--primary-color);
}

.ef-intro-sec .theme-btn.style-one:hover {
    background-color: var(--gray-color);
    color: var(--primary-color);
}

/* ------------------------------------------------------------------
 * Antetul primei pagini
 *
 * Tema avea două poze suprapuse: una mare în fundal și un cartonaș plutind
 * peste ea, plus o etichetă și o spălătură colorată dedesubt. A rămas doar
 * cartonașul cu LED-ul, deci nu mai are peste ce să plutească: îl scoatem din
 * poziționarea absolută și îl lăsăm să umple coloana.
 * ------------------------------------------------------------------ */
.hero-wrapper .hero-image-box {
    margin-right: 0;
    text-align: center;
}

.hero-wrapper .hero-image-box .image_one {
    position: static;
    display: block;
}

.hero-wrapper .hero-image-box .image_one img {
    width: 100%;
    max-width: 632px;
    height: auto;
}

/* Antetul nu mai are fundal propriu — LED-ul își aduce singur traseele de
   circuit imprimat, iar spălătura temei aducea verde și roz în pagină. */
.hero-wrapper {
    background-color: var(--white-color);
}

@media screen and (max-width: 991px) {
    .hero-wrapper .hero-image-box .image_one {
        display: block;
    }
}

/* Casetele cu poze („Cine suntem" pe prima pagină, blocul de sus de pe /despre)
   au în temă înălțime fixă — 585 px și 570 px — potrivită pentru pozele care
   veneau cu template-ul. Ale noastre ies cu 100–200 px sub ea și intră peste
   secțiunea următoare. Le lăsăm să-și ia înălțimea din conținut; eticheta
   „Hands-on" e poziționată față de casetă, deci rămâne unde trebuie. */
.edufit-image-box.style-one,
.edufit-image-box.style-four {
    height: auto;
}

.edufit-image-box.style-one {
    padding-bottom: 60px;
}

/* Arcul de sub cuvântul colorat din titluri e singura poză a temei chemată din
   CSS, nu din Blade — deci `@asset` nu-i poate pune versiune la coadă, iar
   `immutable` o ține pe cea veche o lună în browser. I-am dat nume propriu:
   adresă nouă, cache curat, și `line.png` al temei rămâne neatins. */
.section-title.style-one h2 span:after {
    background-image: url(../images/gallery/line-albastru.png);
}

/* ------------------------------------------------------------------
 * Titlul din antet
 *
 * Semnul decorativ de lângă „construiește" (trei linii oblice) a ieșit de tot.
 * Oriunde îl puneai, ori cădea peste litere, ori plutea nelegat de nimic — trei
 * dungi care nu spun nimic. Steluța de după „început." rămâne: aia se citește
 * ca semn de tipar, nu ca resturi.
 * ------------------------------------------------------------------ */

/* Sub 768px tema ascundea tot `span.c1`. În template span-ul ținea doar o
   decorație; la noi ține chiar cuvântul „construiește", așa că pe telefon
   titlul se citea „Aici se de la început." Cuvântul rămâne. */
@media (max-width: 767px) {
    .hero-wrapper .hero-content h1 span.c1 {
        display: inline;
    }
}

/* ------------------------------------------------------------------
 * Echipa (pe „Despre noi")
 *
 * Tema n-are stil pentru rândul de sub nume în cardul de instructor, așa că
 * îl scriem noi: rolul, mic și pe albastru, între nume și descriere.
 * ------------------------------------------------------------------ */
.ef-instructor-item.style-one .instructor-info {
    text-align: center;
}

.ef-instructor-item.style-one .instructor-info h5 {
    margin-bottom: 2px;
}

.ef-instructor-item.style-one .instructor-info span.position {
    display: block;
    color: var(--primary-color);
    font-size: 14px;
    letter-spacing: 0.04em;
    margin-bottom: 12px;
}

/* Cardul are fundal alb, iar secțiunea e pe hârtie — o linie subțire îl
   desprinde fără să adauge umbră. */
.ef-instructor-item.style-one {
    border: 1px solid var(--border-color);
    height: 100%;
}

/* ------------------------------------------------------------------
 * Banda de titlu a paginilor interioare
 *
 * Tema o făcea de ~400 px, cu titlul plutind centrat într-un câmp gol și o
 * spălătură colorată dedesubt. Arăta a loc nefinisat, nu a antet. Acum e joasă,
 * pe hârtia noastră, cu textul aliniat la stânga ca tot restul paginii, iar
 * firicelul de sub ea o desparte de conținut fără umbre.
 * ------------------------------------------------------------------ */
.ef-page-hero {
    padding: 45px 0 45px;
    background-color: var(--gray-color);
    border-bottom: 1px solid var(--border-color);
}

.ef-page-hero .page-content .breadcrumb-link {
    margin-bottom: 6px;
}

.ef-page-hero .page-content .page-title {
    margin-bottom: 0;
}

@media screen and (max-width: 767px) {
    .ef-page-hero {
        padding: 32px 0 32px;
    }
}

/* Pozele echipei erau cât tot cardul și trăgeau ochiul mai mult decât textul.
   Le facem medalion rotund, centrat — cât iconița pe care o înlocuiesc, doar
   ceva mai mare ca să se vadă fața. */
.ef-instructor-item.style-one .instructor-thumbnail {
    width: 140px;
    height: 140px;
    margin: 0 auto;
    border-radius: 50%;
}

.ef-instructor-item.style-one .instructor-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* ==================================================================
 * Ritmul vertical — cât aer între secțiuni
 *
 * Tema pune 100–130 px de padding sus ȘI jos la fiecare secțiune, iar peste
 * ele mai vin marginile blocurilor dinăuntru (`mb-40`, `mb-50`). Se adunau
 * găuri de 190–250 px între blocuri, adică ecrane întregi de nimic.
 * Le aducem pe toate în jurul a 100 px: nu spațiu puțin, ci spațiu egal —
 * asta citește ochiul ca „așezat".
 *
 * Măsurat în Chromium la 1440×900. Toate regulile sunt prefixate cu secțiunea
 * lor, ca să nu scape pe alte pagini; unde contează, sub `min-width: 1200px`,
 * fiindcă mai jos coloanele se stivuiesc și marginile chiar sunt necesare.
 * ================================================================== */

/* --- Prima pagină: 250 px între „Cine suntem" și „Metoda" --- */
@media screen and (min-width: 1200px) {
    .ef-about-sec.pt-130 {
        padding-top: 90px;
        padding-bottom: 20px;
    }

    .ef-about-sec.pt-130 .edufit-image-box.style-one.mb-50,
    .ef-about-sec.pt-130 .edufit-content-box.style-one.mb-50 {
        margin-bottom: 0;
    }

    .ef-why-choose-sec.pt-120 {
        padding-top: 80px;
    }
}

/* --- Prima pagină: antetul se deschidea cu 195 px de aer deasupra titlului,
       iar imaginea lăsa 120 px goi sub ea. Centrăm coloanele una față de alta. --- */
@media screen and (min-width: 1200px) {
    .hero-wrapper .hero-content {
        padding-top: 70px;
    }

    .hero-wrapper .container > .row {
        align-items: center;
    }
}

/* --- Prima pagină: 210 px între cardurile „Metoda" și formularul de înscriere.
       Fratele adiacent, ca regula să nu prindă și /lista-de-asteptare. --- */
.ef-why-choose-sec.pb-90 {
    padding-bottom: 50px;
}

.ef-why-choose-sec + .ef-contact-sec.pt-120 {
    padding-top: 80px;
}

/* --- Prima pagină: caseta cu poza „Cine suntem" avea 90 px de padding sus,
       loc rezervat pentru a doua poză, pe care am scos-o. Și poza pornea cu
       58 px sub textul pe care îl însoțește. --- */
@media screen and (min-width: 1200px) {
    .ef-about-sec.pt-130 > .container > .row {
        align-items: flex-start;
    }

    .edufit-image-box.style-one {
        padding-top: 30px;
    }
}

/* Notă: rândurile din cele două blocuri „despre" aveau `align-items-center` din
   Bootstrap, care vine cu `!important` — nicio regulă de-a noastră n-avea cum
   să-l bată. Clasa a ieșit din șabloane, alinierea se face de aici. */

/* --- Despre: poza începea cu 117 px sub text, fiindcă rândul le centra pe
       amândouă. Le punem să plece de pe aceeași linie. --- */
@media screen and (min-width: 1200px) {
    .ef-about-sec.pt-120.pb-120 > .container > .row {
        align-items: flex-start;
    }
}

/* --- Despre: 190 px între cardurile „Metoda" și „Echipa", fără schimbare de
       fundal între ele — golul nu se citea ca despărțire, ci ca lipsă. --- */
.ef-education-process.pb-90 {
    padding-bottom: 40px;
}

.ef-about-sec.gray-bg.pt-100 {
    padding-top: 70px;
}

/* --- Despre: 204 px între ultimul card de echipă și banda finală, iar banda
       avea 240 px de padding pentru un titlu, un paragraf și un buton. --- */
.ef-about-sec.gray-bg.pb-60 {
    padding-bottom: 30px;
}

.ef-intro-sec.pt-120.pb-120 {
    padding-top: 80px;
    padding-bottom: 80px;
}

/* --- Paginile interioare: banda de titlu era joasă, dar secțiunea de sub ea
       rămăsese pe pt-130. Se adunau 175 px de alb între titlul paginii și
       primul cuvânt — pe /contact, exact între „Contact" și „Contact". --- */
.ef-page-hero + section {
    padding-top: 64px;
}

/* Titlul benzii e h1, deci moștenea `line-height: 90px` al temei pentru un
   font de 60 px: 30 px de aer pe care nu-l explică nicio regulă de margine.
   Mărimea rămâne — 60 px față de 44 px la titlurile de secțiune e ierarhia
   corectă; se strânge doar cutia. */
.ef-page-hero .page-content .page-title {
    line-height: 1.15;
}

/* --- Ultima secțiune își punea padding-ul jos, iar subsolul încă 120 px
       deasupra: 210–260 px de gol. Pe paginile goale era mai înalt decât tot
       conținutul de deasupra. --- */
.ef-legal-sec,
.ef-blog-grid-sec,
.ef-error-sec,
.ef-faq-info-sec,
.ef-event-sec,
.ef-page-hero + .ef-contact-sec {
    padding-bottom: 64px;
}

/* --- Blog și Evenimente, cât timp sunt goale: mesajul e bun, dar stătea pe un
       singur rând de 139 de semne, lat cât pagina. --- */
.ef-blog-grid-sec .edufit-content-box.text-center,
.ef-event-sec .edufit-content-box.text-center {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

/* --- Titluri centrate pe toată lățimea containerului, pentru două-trei
       cuvinte. Le strângem la o măsură de citit; niciunul nu capătă rând în
       plus, se strânge doar câmpul gol din jur. --- */
.ef-why-choose-sec .section-title.text-center,
.ef-education-process .section-title.text-center,
.ef-about-sec.gray-bg .section-title.text-center,
.ef-faq-sec .section-title.text-center,
.ef-page-hero + .ef-contact-sec .section-title.text-center {
    max-width: 660px;
    margin-left: auto;
    margin-right: auto;
}

/* Rândul de echipă: două carduri într-o grilă de trei coloane lăsau 200 px de
   gol în stânga și-n dreapta, sub un titlu lat cât pagina — golul se citea ca
   un al treilea card lipsă. (Dacă apare al treilea om, scoate limita.) */
@media screen and (min-width: 992px) {
    .ef-about-sec.gray-bg .row.justify-content-center {
        max-width: 840px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* --- Nota de sub formular avea 94 de semne pe rând, la mărimea textului
       curent. E text de subsol: măsură de citit și un corp mai mic. --- */
.waitlist-form .form-note {
    max-width: 62ch;
    font-size: 15px;
    line-height: 26px;
}

/* Butonul moștenea `width: 100%` de la formularul de contact: „Trece-mă pe
   lista de așteptare" stătea într-un dreptunghi de 860 px. Pe telefon rămâne
   lat, acolo e corect. */
@media screen and (min-width: 768px) {
    .waitlist-form .theme-btn {
        width: auto;
        min-width: 300px;
    }
}

/* --- Pagina 404: ilustrația se întindea pe 1290×800 px, deci eroarea ocupa
       două ecrane. Și butoanele se atingeau. --- */
.ef-error-sec .edufit-content-box .edufit-img img {
    max-width: 420px;
}

.ef-error-sec .edufit-button {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* --- Paginile de cont: umplutura se aduna de două ori (100 px pe jumătatea
       dreaptă, încă 80–100 px pe cartonaș), iar peste 1451 px sărea de la 120
       la 200 px — formularul se strâmta când măreai fereastra. --- */
@media screen and (min-width: 1200px) {
    .ef-user-sec .user-right {
        padding: 64px 40px;
        display: flex;
        align-items: center;
    }

    .ef-user-sec .user-right .user-form-wrapper {
        width: 100%;
        max-width: 560px;
        margin: 0 auto;
        padding: 48px 56px;
    }
}

/* --- Contact: 140 px între cartonașul formularului și hartă. --- */
.contact-section .contact-wrapper {
    margin-bottom: 0;
}

.contact-section {
    padding-bottom: 56px;
}

/* Paginile de eroare nu mai au bandă de titlu — își spun singure povestea.
   Fără ea, secțiunea are nevoie de aer sus, cât să nu se lipească de antet. */
.ef-error-sec.pt-130 {
    padding-top: 90px;
}

/* Titlul cartonașului de cont era h3, deși e singurul titlu al paginii. L-am
   trecut pe h1 pentru structura documentului și îi păstrăm mărimea de dinainte
   — altfel ar sări de la 27 la 60 px. */
.ef-user-sec .auth-title {
    font-size: 27px;
    line-height: 40px;
    margin-bottom: 12px;
}

/* --- Cardurile de „metodă" ies de înălțimi diferite, după cât text are
       fiecare. Pe fundal colorat, cu chenar, bazele neregulate se văd. Le
       egalăm; `calc` scade marginea pe care o pune șablonul. --- */
.ef-why-choose-sec .ef-iconic-box.style-three {
    height: calc(100% - 40px);
}

.ef-education-process .ef-iconic-box.style-five {
    height: calc(100% - 40px);
    padding: 36px 28px 32px;
}

.ef-education-process .ef-iconic-box.style-five .icon {
    width: 76px;
    height: 76px;
    font-size: 40px;
    margin-bottom: 12px;
}

/* ------------------------------------------------------------------
 * Formularul de listă, când stă singur pe pagină
 *
 * Pe prima pagină și pe /lista-de-asteptare, formularul plutea direct pe alb,
 * sub un titlu centrat: nu se vedea unde începe și unde se termină, iar
 * marginile lui neregulate păreau greșeli. Îl punem pe un cartonaș de hârtie,
 * cu câmpurile albe înăuntru — aceeași croială ca pe /contact și /întrebări,
 * unde tema avea deja un cartonaș.
 * ------------------------------------------------------------------ */
.ef-contact-sec .waitlist-form {
    max-width: 720px;
    margin: 0 auto;
    padding: 36px 40px 40px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background-color: var(--gray-color);
}

.ef-contact-sec .waitlist-form .form_control {
    background-color: var(--white-color);
}

/* Textul de sub titlu se întindea cât toată coloana. */
.ef-contact-sec .section-title p {
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width: 575px) {
    .ef-contact-sec .waitlist-form {
        padding: 24px 20px 28px;
    }
}

/* ------------------------------------------------------------------
 * Câmpurile de formular, pe toate paginile
 *
 * Tema își ține stilul câmpurilor în `pages/css/style.css`, sub titlul
 * „Contact Page CSS". Dar macheta încarcă `assets/{secțiune}/css/style.css`,
 * iar prima pagină e pe secțiunea `home` — adică pe prima pagină fișierul ăla
 * nu se încarcă deloc, și formularul de listă rămânea cu chenarele implicite
 * ale browserului: 2px inset gri, fără colțuri rotunde, fără nicio umplutură,
 * cu textul lipit de margine.
 *
 * Mutăm stilul aici, unde se încarcă pe orice pagină. Valorile sunt exact cele
 * ale temei, ca /contact și /întrebări să arate la fel ca înainte.
 * ------------------------------------------------------------------ */
.waitlist-form .form_control,
.login-form .form_control {
    margin-bottom: 20px;
    padding: 13px 20px;
    border-radius: 10px;
    border: 1px solid rgba(33, 37, 41, 0.1);
    background-color: rgba(26, 26, 26, 0.01);
    transition: all 0.3s;
}

.waitlist-form .form_control:focus,
.login-form .form_control:focus {
    border-color: var(--primary-color);
}

.waitlist-form label,
.login-form label {
    color: var(--heading-color);
    margin-bottom: 7px;
}

.waitlist-form textarea {
    margin-bottom: 30px;
}

/* ------------------------------------------------------------------
 * Ecranul de încărcare
 *
 * Tema punea o rotiță generică. Punem cubul din logo, pe hârtia noastră —
 * primul lucru care se vede pe site e semnul casei, nu un accesoriu de temă.
 * Pulsul e cel al temei (zoomInOut), doar că acum are ce pulsa.
 * ------------------------------------------------------------------ */
.preloader {
    background-color: var(--gray-color);
}

.preloader .loader img {
    width: 104px;
    height: 104px;
}