/* =====================================================================
   INFROP — stile frontend (header + footer)
   CSS statico in public/: nessuna build Vite richiesta.
   Palette ricavata dal sito originale: blu #0065AE, navy #171F32.
   ===================================================================== */

:root {
    --infrop-blue:      #0065AE;
    --infrop-blue-dark: #004f87;
    --infrop-dark:      #171F32;
    --infrop-orange:    #FF5421;
}

/* ---------------------------- HEADER ---------------------------- */
#site-header { position: relative; z-index: 1030; }

/* Topbar */
#site-header .topbar {
    background: var(--infrop-dark);
    color: #fff;
    font-size: .85rem;
}
#site-header .topbar a,
#site-header .topbar .topbar-link { color: rgba(255,255,255,.85); text-decoration: none; }
#site-header .topbar a:hover { color: #fff; }
#site-header .topbar .topbar-contacts i { color: var(--infrop-blue); }

.btn-accedi {
    background: var(--infrop-blue);
    border-color: var(--infrop-blue);
    color: #fff;
}
.btn-accedi:hover { background: var(--infrop-blue-dark); border-color: var(--infrop-blue-dark); color: #fff; }

/* Barra menu principale */
#site-header .main-nav { background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.06); }
#site-header .navbar-brand img { max-height: 55px; width: auto; }
#site-header .main-nav .nav-link {
    color: var(--infrop-dark);
    font-weight: 600;
    padding: .5rem 1rem;
    text-transform: uppercase;
    font-size: .9rem;
    letter-spacing: .02em;
}
#site-header .main-nav .nav-link:hover,
#site-header .main-nav .nav-link.active { color: var(--infrop-blue); }

#site-header .main-nav .dropdown-menu {
    border: none;
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
    border-radius: .5rem;
    padding: .4rem 0;
    margin-top: 0;
}
#site-header .main-nav .dropdown-item { font-weight: 500; padding: .5rem 1.25rem; }
#site-header .main-nav .dropdown-item:hover { background: rgba(0,101,174,.08); color: var(--infrop-blue); }

/* Dropdown in hover su desktop (oltre al click di Bootstrap) */
@media (min-width: 992px) {
    #site-header .main-nav .dropdown:hover > .dropdown-menu { display: block; }

    /* Ponte invisibile tra la voce e il menu: evita che il dropdown si chiuda
       mentre si sposta il mouse verso le voci (perdita di :hover sul gap). */
    #site-header .main-nav .nav-item.dropdown > .dropdown-menu::before {
        content: "";
        position: absolute;
        top: -0.5rem;
        left: 0;
        right: 0;
        height: 0.5rem;
    }
}

/* ---------------------------- FOOTER ---------------------------- */
#site-footer { background: var(--infrop-dark); color: rgba(255,255,255,.75); }
#site-footer .footer-top { padding: 3.5rem 0 2rem; }

#site-footer a { color: rgba(255,255,255,.75); text-decoration: none; }
#site-footer a:hover { color: #fff; }

#site-footer .footer-logo img { max-height: 50px; width: auto; }
#site-footer .footer-intro { font-size: .9rem; line-height: 1.6; color: rgba(255,255,255,.7); }

#site-footer .footer-title {
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 1.1rem;
    position: relative;
    padding-bottom: .6rem;
}
#site-footer .footer-title::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 36px; height: 2px;
    background: var(--infrop-blue);
}

/* Social */
#site-footer .footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: #fff;
    transition: background .2s ease;
}
#site-footer .footer-social a:hover { background: var(--infrop-blue); }

/* Contatti */
#site-footer .footer-contact li { display: flex; gap: .6rem; margin-bottom: .7rem; font-size: .9rem; }
#site-footer .footer-contact li i { color: var(--infrop-blue); margin-top: .2rem; }

/* Link utili */
#site-footer .footer-links li { margin-bottom: .55rem; font-size: .9rem; }
#site-footer .footer-links li a::before { content: "\203A"; margin-right: .5rem; color: var(--infrop-blue); }

/* Blog */
#site-footer .footer-post-thumb img { width: 56px; height: 56px; object-fit: cover; border-radius: .4rem; }
#site-footer .footer-post-title { font-size: .85rem; line-height: 1.4; font-weight: 500; }

/* Barra inferiore */
#site-footer .footer-bottom {
    border-top: 1px solid rgba(255,255,255,.1);
    padding: 1.2rem 0;
    font-size: .82rem;
    background: rgba(0,0,0,.15);
}
#site-footer .footer-bottom p { color: rgba(255,255,255,.6); }

/* ====================================================================
   HERO (home) — sezione statica con sfondo immagine e 3 box
   ==================================================================== */
.infrop-hero {
    position: relative;
    background: var(--infrop-dark) center center / cover no-repeat;
    background-image: url('/img/infrop/hero-bg.jpg');
    overflow: hidden;
}
.infrop-hero::before {            /* overlay per leggibilità del testo */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(23,31,50,.30) 0%, rgba(23,31,50,.42) 55%, rgba(23,31,50,.80) 100%);
}
.infrop-hero > .container { position: relative; z-index: 1; }

.infrop-hero__inner {
    text-align: center;
    color: #fff;
    padding: 6rem 0 5rem;
}
.infrop-hero__eyebrow {
    color: #4ea3e0;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-weight: 700;
    font-size: .95rem;
    margin-bottom: 1rem;
}
.infrop-hero__title {
    color: #fff;
    font-weight: 800;
    font-size: clamp(2rem, 5vw, 3.6rem);
    line-height: 1.12;
    margin: 0 auto 2rem;
    max-width: 16ch;
}
.infrop-hero__btn {
    display: inline-block;
    background: var(--infrop-blue);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
    font-size: .9rem;
    padding: .85rem 2.2rem;
    border-radius: .3rem;
    text-decoration: none;
    transition: background .2s ease;
}
.infrop-hero__btn:hover { background: var(--infrop-blue-dark); color: #fff; }

/* I 3 box */
.infrop-hero__boxes { padding-bottom: 3.5rem; }
.infrop-feature {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 100%;
    background: rgba(23,31,50,.72);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: .4rem;
    padding: 1.4rem 1.5rem;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.infrop-feature__icon { color: var(--infrop-orange); flex-shrink: 0; }
.infrop-feature__icon svg { width: 48px; height: 48px; display: block; }
.infrop-feature__title { color: #fff; font-weight: 700; font-size: 1.1rem; margin: 0 0 .25rem; }
.infrop-feature__desc { color: rgba(255,255,255,.75); font-size: .88rem; line-height: 1.45; margin: 0; }

@media (max-width: 767.98px) {
    .infrop-hero__inner { padding: 3.5rem 0 2.5rem; }
}

/* ====================================================================
   SEZIONE "CORSI" (home) — card dinamiche dalle categorie radice
   ==================================================================== */
.infrop-courses { padding: 4rem 0; }
.infrop-section-eyebrow {
    color: var(--infrop-blue);
    text-transform: uppercase;
    letter-spacing: .15em;
    font-weight: 700;
    font-size: .85rem;
    margin-bottom: .4rem;
}
.infrop-section-title {
    color: var(--infrop-dark);
    font-weight: 800;
    font-size: clamp(1.6rem, 3.2vw, 2.2rem);
    margin: 0;
}

.infrop-course-card {
    position: relative;
    display: block;
    height: 230px;
    border-radius: .5rem;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.infrop-course-card__img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform .4s ease;
}
.infrop-course-card:hover .infrop-course-card__img { transform: scale(1.06); }
.infrop-course-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(23,31,50,.10) 0%, rgba(0,101,174,.55) 100%);
}
.infrop-course-card__label {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: 1.1rem 1rem;
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    text-align: center;
}
.infrop-course-card__icon { color: var(--infrop-orange); display: inline-flex; }
.infrop-course-card__icon svg { width: 26px; height: 26px; display: block; }

/* ====================================================================
   FASCIA "CREARE VALORE" (home) — sinistra foto, destra pannello navy
   ==================================================================== */
.infrop-value__media {
    min-height: 440px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.infrop-value__panel {
    background: var(--infrop-dark);
    display: flex;
    align-items: center;
}
.infrop-value__inner {
    padding: 3.5rem;
    color: rgba(255,255,255,.85);
    max-width: 640px;
    margin: 0 auto;
}
.infrop-value__inner h2 {
    color: #fff;
    font-weight: 800;
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    line-height: 1.15;
    margin-bottom: 1.2rem;
}
.infrop-value__inner p {
    font-size: .98rem;
    line-height: 1.7;
    margin-bottom: 1.6rem;
}
.infrop-value__inner strong { color: #fff; font-weight: 700; }
.infrop-value__btn {
    display: inline-block;
    background: var(--infrop-blue);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
    font-size: .85rem;
    padding: .8rem 2rem;
    border-radius: .3rem;
    text-decoration: none;
    transition: background .2s ease;
}
.infrop-value__btn:hover { background: var(--infrop-blue-dark); color: #fff; }

@media (max-width: 991.98px) {
    .infrop-value__media { min-height: 280px; }
    .infrop-value__inner { padding: 2.5rem 1.5rem; }
}

/* ====================================================================
   SEZIONE "PARTNER" (home) — griglia statica di loghi
   ==================================================================== */
.infrop-partners { padding: 4rem 0; }
.infrop-partners__grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2.5rem 3.5rem;
}
.infrop-partners__item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 75px;
}
.infrop-partners__item img {
    max-height: 75px;
    max-width: 190px;
    width: auto;
    object-fit: contain;
    transition: transform .25s ease;
}
.infrop-partners__item img:hover { transform: scale(1.05); }

@media (max-width: 575.98px) {
    .infrop-partners__grid { gap: 2rem 2rem; }
    .infrop-partners__item { height: 60px; }
    .infrop-partners__item img { max-height: 60px; max-width: 150px; }
}

/* ====================================================================
   SEZIONE "APPROFONDIMENTI" (home) — ultimi articoli del blog
   ==================================================================== */
.infrop-blog { padding: 4rem 0; background: #f7f8fa; }

.infrop-blog-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: .6rem;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(23,31,50,.07);
    transition: transform .25s ease, box-shadow .25s ease;
}
.infrop-blog-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(23,31,50,.12); }

.infrop-blog-card__media {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #e9edf2;
}
.infrop-blog-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.infrop-blog-card:hover .infrop-blog-card__media img { transform: scale(1.05); }
.infrop-blog-card__noimg {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; color: #c2cad6;
}
.infrop-blog-card__noimg svg { width: 48px; height: 48px; }

.infrop-blog-card__body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.infrop-blog-card__date {
    font-size: .78rem;
    color: var(--infrop-blue);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: .5rem;
}
.infrop-blog-card__title { font-size: 1.1rem; font-weight: 700; line-height: 1.35; margin: 0 0 1rem; }
.infrop-blog-card__title a { color: var(--infrop-dark); text-decoration: none; }
.infrop-blog-card__title a:hover { color: var(--infrop-blue); }
.infrop-blog-card__more {
    margin-top: auto;
    align-self: flex-start;
    color: var(--infrop-blue);
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
}
.infrop-blog-card__more span { display: inline-block; transition: transform .2s ease; }
.infrop-blog-card__more:hover span { transform: translateX(3px); }

.infrop-blog__all {
    display: inline-block;
    background: var(--infrop-blue);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
    font-size: .85rem;
    padding: .8rem 2rem;
    border-radius: .3rem;
    text-decoration: none;
    transition: background .2s ease;
}
.infrop-blog__all:hover { background: var(--infrop-blue-dark); color: #fff; }

/* Pulsante "Registrati" nella topbar — leggibile anche in hover
   (batte la regola generica #site-header .topbar a:hover { color:#fff }) */
#site-header .topbar .btn-registrati {
    border: 1px solid rgba(255, 255, 255, .6);
    color: #fff;
    background: transparent;
}
#site-header .topbar .btn-registrati:hover {
    background: #fff;
    color: #171F32;
    border-color: #fff;
}

/* Link legali nel footer */
#site-footer .footer-legal-links a { color: rgba(255, 255, 255, .75); text-decoration: none; }
#site-footer .footer-legal-links a:hover { color: #fff; text-decoration: underline; }
#site-footer .footer-legal-links span { margin: 0 .4rem; opacity: .5; }