/* ==========================================================================
   Header allineato al sito kairosricerche.it (Next.js / Tailwind)
   Token: ink-950 #121214, ink-300 #c6c6c6, kairos-red #cd1719, font "Source Sans 3"
   ========================================================================== */
:root {
    --kairos-ink: #121214;
    --kairos-red: #cd1719;
    --kairos-ink-300: #c6c6c6;
    --kairos-font: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
    /* altezza della navbar dopo lo scroll (top bar chiusa): e' questa
       l'altezza che copre la pagina quando si atterra su una sezione,
       quindi la usano sia le ancore che lo script dei link del menu */
    --kairos-nav-h-scrolled: 64px;
}
@media (min-width: 1024px) {
    :root {
        --kairos-nav-h-scrolled: 80px;
    }
}

.kairos-header,
.kairos-header .navbar-nav .nav-link,
.kairos-header .kairos-btn,
.kairos-header .kairos-topbar__contacts a {
    font-family: var(--kairos-font);
}

/* --- top bar ------------------------------------------------------------ */
.kairos-header .kairos-topbar {
    background-color: var(--kairos-ink) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.kairos-header .kairos-topbar .row {
    height: 40px;
}

/* contenitore: 100% sotto i 1024px, 87% della viewport da 1024px (come --shell del sito) */
.kairos-header .kairos-topbar .container-fluid,
.kairos-header .kairos-nav .container-fluid {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}
.kairos-header .kairos-topbar__social {
    display: inline-flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.3s;
}
.kairos-header .kairos-topbar__social:hover {
    color: var(--kairos-red);
}
.kairos-header .kairos-topbar__contacts {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 24px;
}
.kairos-header .kairos-topbar__contacts a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.8px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.3s;
}
.kairos-header .kairos-topbar__contacts a:hover {
    color: #fff;
}
.kairos-header .kairos-topbar__icon {
    color: var(--kairos-red);
    flex-shrink: 0;
}

/* --- navbar ------------------------------------------------------------- */
.kairos-header .kairos-nav {
    background-color: var(--kairos-ink) !important;
}
/* dopo lo scroll: 95% + blur come sul sito */
header.kairos-header.sticky .kairos-nav,
header.kairos-header.sticky .kairos-topbar,
header.kairos-header.sticky.sticky-active .kairos-nav[data-header-hover=dark] {
    background-color: rgba(18, 18, 20, 0.95) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
header.kairos-header.sticky.sticky-active .kairos-nav .navbar-nav .nav-item:hover .nav-link {
    color: #fff;
}
/* il logo parte dal bordo del contenitore, come sul sito */
.kairos-header .kairos-nav .container-fluid > .col-auto:first-child {
    padding-left: 0;
}
.kairos-header .kairos-nav .container-fluid > .kairos-nav__actions {
    padding-right: 0;
}
/* il menu occupa lo spazio tra logo e bottoni e si centra, come sul sito */
@media (min-width: 992px) {
    .kairos-header .kairos-nav .container-fluid > .menu-order {
        flex: 1 1 auto;
        display: flex;
        justify-content: center;
    }
}

/* frecce del carosello hero allineate ai margini del contenitore dell'header */
#home .slider-one-slide-prev-1,
#home .slider-one-slide-next-1 {
    top: 50%;
    margin-top: 0;
    transform: translateY(-50%);
}
#home .slider-one-slide-prev-1 {
    left: 24px;
}
#home .slider-one-slide-next-1 {
    right: 24px;
}
@media (min-width: 1700px) {
    #home .slider-one-slide-prev-1 {
        left: calc(6.5% + 40px);
    }
    #home .slider-one-slide-next-1 {
        right: calc(6.5% + 40px);
    }
}
.kairos-header .kairos-nav .container-fluid {
    height: 96px;
    align-items: center;
}
/* linea separatrice del tema prima della prima voce: rimossa */
.kairos-header .left-nav .navbar-nav:before {
    display: none;
}
.kairos-header .navbar-brand,
.kairos-header.sticky .navbar-brand {
    padding: 0;
    display: flex;
    align-items: center;
}
.kairos-header .navbar-brand img {
    max-height: 64px;
    height: 64px;
    transition: height 0.5s, max-height 0.5s;
}
/* le copie alt/mobile del logo restano a larghezza zero finché il tema non le mostra */
.kairos-header .navbar-brand .alt-logo,
.kairos-header .navbar-brand .mobile-logo {
    width: 0;
}

/* voci menu */
.kairos-header .navbar-nav .nav-link {
    position: relative;
    font-size: 13.8px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 8px 12px;
    color: rgba(255, 255, 255, 0.85);
    transition: color 0.3s;
}
.kairos-header .navbar-nav .nav-link:hover,
.kairos-header .navbar-nav .nav-item.active .nav-link {
    color: #fff;
}
/* il tema (style.css) porta a opacity 0.6 la voce attiva e quella in hover,
   e anche i link con .active che il suo scrollspy in main.js aggiunge con un
   offset diverso dal nostro: la voce cliccata diventava grigia e a volte
   si spegneva anche quella della sezione precedente. Qui lo stato attivo e'
   solo bianco pieno + filetto rosso, come su kairosricerche.it.
   !important perche' il tema ripete la stessa regola con selettori sempre piu'
   specifici (sticky-active, header-dark, menu mobile sotto i 991px): una sola
   regola qui le copre tutte */
.kairos-header .navbar-nav .nav-link {
    opacity: 1 !important;
}
.kairos-header .navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 2px;
    height: 1px;
    background-color: var(--kairos-red);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s;
}
.kairos-header .navbar-nav .nav-link:hover::after,
.kairos-header .navbar-nav .nav-item.active .nav-link::after {
    transform: scaleX(1);
}

/* bottoni rossi squadrati */
.kairos-header .kairos-nav__actions {
    align-items: center;
    gap: 12px;
}
.kairos-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    background-color: var(--kairos-red);
    color: #fff;
    padding: 10px 16px;
    font-size: 13.8px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border-radius: 0;
    transition: background-color 0.3s, color 0.3s;
}
/* variante ink-300: bottone Company profile */
.kairos-btn--ink {
    background-color: var(--kairos-ink-300);
    color: var(--kairos-ink);
}
.kairos-btn:hover,
.kairos-btn:focus-visible {
    background-color: #fff;
    color: var(--kairos-ink);
}
.kairos-btn__icon {
    transition: transform 0.3s;
}
.kairos-btn:hover .kairos-btn__icon--down {
    transform: translateY(2px);
}
.kairos-btn:hover .kairos-btn__icon--arrow {
    transform: translate(2px, -2px);
}

/* --- responsive --------------------------------------------------------- */
@media (min-width: 992px) {
    .kairos-header .navbar-brand img {
        max-height: 80px;
        height: 80px;
    }
}
@media (min-width: 1024px) {
    .kairos-header .kairos-nav .container-fluid {
        height: 112px;
    }
}
/* tra 992 e 1279px logo, menu e bottoni stanno su una riga solo con misure compatte */
@media (min-width: 992px) and (max-width: 1279px) {
    .kairos-header .navbar-brand img {
        max-height: 56px;
        height: 56px;
    }
    .kairos-header .navbar-nav .nav-link {
        font-size: 13px;
        padding: 8px 10px;
    }
    .kairos-header .navbar-nav .nav-link::after {
        left: 10px;
        right: 10px;
    }
    .kairos-header .kairos-nav__actions {
        gap: 8px;
    }
    .kairos-header .kairos-btn {
        padding: 10px 12px;
        font-size: 13px;
    }
}
@media (min-width: 1280px) {
    .kairos-header .kairos-topbar .container-fluid,
    .kairos-header .kairos-nav .container-fluid {
        max-width: 87%;
        padding-left: 40px;
        padding-right: 40px;
    }
}
@media (min-width: 1280px) {
    .kairos-header .navbar-brand img {
        max-height: 56px;
        height: 56px;
    }
}
@media (min-width: 1536px) {
    .kairos-header .navbar-brand img {
        max-height: 80px;
        height: 80px;
    }
}
@media (min-width: 1200px) {
    .kairos-header .navbar-nav .nav-link {
        padding: 8px 16px;
    }
    .kairos-header .navbar-nav .nav-link::after {
        left: 16px;
        right: 16px;
    }
}
/* hamburger: tre righe uguali come l'icona Menu del sito principale.
   Il tema le fa corta-lunga-corta (prima e quarta a 14px); qui stessa
   specificità ma file caricato dopo, quindi vince. La X da aperto resta:
   le regole .navbar-collapse-show sono più specifiche e azzerano 1 e 4. */
.kairos-header .navbar-toggler {
    width: 20px;
}
.kairos-header .navbar-toggler-line,
.kairos-header .navbar-toggler-line:nth-child(1),
.kairos-header .navbar-toggler-line:nth-child(4) {
    width: 20px;
    height: 1.5px;
    border-radius: 1px;
}
body.navbar-collapse-show .kairos-header .navbar-toggler-line:nth-child(1),
body.navbar-collapse-show .kairos-header .navbar-toggler-line:nth-child(4) {
    width: 0;
}
@media (max-width: 991px) {
    .kairos-header .navbar-toggler-line {
        background-color: #fff;
    }
    .kairos-header .navbar-collapse {
        background-color: var(--kairos-ink);
    }
    .kairos-header .navbar-nav .nav-link {
        font-size: 14px;
        padding: 12px 15px;
    }
    .kairos-header .navbar-nav .nav-link::after {
        display: none;
    }
    .kairos-header .kairos-nav__mobile-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px 15px 20px;
    }
}

/* --- top bar visibile anche su mobile (il tema la nasconde sotto i 768px) -- */
@media (max-width: 767px) {
    header.kairos-header .kairos-topbar {
        display: block !important;
        height: auto;
    }
    header.kairos-header .kairos-topbar .row {
        height: 40px; /* h-10 come sul sito principale, anche su mobile */
        flex-wrap: nowrap;
    }
    header.kairos-header .kairos-topbar + .navbar {
        top: 41px; /* 40px + bordo 1px */
    }
    .kairos-header .kairos-topbar__contacts {
        gap: 12px;
    }
    .kairos-header .kairos-topbar__contacts a {
        font-size: 12px;
        gap: 6px;
        white-space: nowrap;
    }
    .kairos-header .kairos-topbar__icon {
        width: 12px;
        height: 12px;
    }
}
@media (max-width: 575px) {
    .kairos-header .kairos-topbar .container-fluid {
        padding-left: 12px;
        padding-right: 12px;
    }
    .kairos-header .kairos-topbar__contacts {
        gap: 10px;
    }
    .kairos-header .kairos-topbar__contacts a {
        font-size: 11.5px;
        letter-spacing: -0.01em;
    }
}

/* --- tutto il sito usa il font della nav ("Source Sans 3") ----------------
   sovrascrive le variabili del tema e forza la famiglia sugli elementi
   testuali; le icone (feather, bootstrap-icons, font awesome) hanno regole
   proprie a specificità/!important maggiore e non vengono toccate */
:root {
    --primary-font: var(--kairos-font);
    --alt-font: var(--kairos-font);
}
body,
h1, h2, h3, h4, h5, h6,
p, a, li, span, blockquote, small, strong, em,
.btn, .kairos-btn, button, input, textarea, select, label,
.navbar-nav, .alt-font, .primary-font {
    font-family: var(--kairos-font);
}

/* --- stato "scrollato" identico al sito principale ------------------------
   kairosricerche.it: oltre 24px di scroll la top bar si chiude (max-h-0),
   la riga dell'header passa da 96/112px a 64/80px e il logo a 44/48px.
   La classe .kairos-scrolled è gestita da uno script in index.html con la
   stessa soglia (window.scrollY > 24). Le altezze sono in px fissi, quindi
   identiche su ogni sistema operativo e con qualunque font di fallback. */
.kairos-header .kairos-topbar,
.kairos-header .kairos-nav,
.kairos-header .kairos-nav .container-fluid {
    transition: top 0.5s, height 0.5s, background-color 0.5s;
}
/* la nav non deve MAI uscire di scena: al primo scroll si chiude solo la top
   bar. Il tema (main.js + style.css) mette "header.sticky .navbar" a
   translateY(-100%) appena lo scroll supera l'altezza dell'header e la
   riporta a 0 solo con .sticky-active, cioe' 150px piu' in basso: in quella
   fascia la nav spariva del tutto. */
header.kairos-header .kairos-nav,
header.kairos-header.sticky .kairos-nav {
    -webkit-transform: none !important;
    transform: none !important;
}
.kairos-header.kairos-scrolled .kairos-topbar {
    top: -41px !important;
}
.kairos-header.kairos-scrolled .kairos-nav {
    top: 0 !important;
}
.kairos-header.kairos-scrolled .kairos-nav .container-fluid {
    height: var(--kairos-nav-h-scrolled);
}
.kairos-header.kairos-scrolled .navbar-brand img {
    max-height: 44px;
    height: 44px;
}
@media (min-width: 1024px) {
    .kairos-header.kairos-scrolled .navbar-brand img {
        max-height: 48px;
        height: 48px;
    }
}

/* --- niente angoli arrotondati su bottoni e campi di tutto il sito --------
   il tema usa .btn-round-edge (4px) sulle CTA. Le frecce dello slider e la
   "x" del modal video restano tonde: hanno una regola con classe propria,
   piu' specifica di questa. */
.btn,
.btn.btn-round-edge,
button,
input,
select,
textarea,
.form-control,
.form-select {
    border-radius: 0;
}