/**
 * Header Component - Thibierge Notaires
 */

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

.site-header {
    position: relative;
    width: 100%;
    padding: var(--space-6) 0;
    z-index: var(--z-sticky);
}

.site-header__container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0;
}

.site-header__left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-8);
}

.site-header__right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.site-header__right .site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.site-header__right .lang-switcher {
    margin-left: var(--space-8);
}

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

.site-header__logo {
    margin-bottom: -20px;
}

.site-logo {
    display: block;
    flex-shrink: 0;
    text-decoration: none;
    border: none;
}

.site-logo:hover,
.site-logo:focus {
    text-decoration: none;
}

.site-logo__image {
    height: 39px;
    width: auto;
}

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

.site-nav {
    display: flex;
    align-items: center;
}

.site-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}


.site-nav__item {
    position: relative;
}

.site-nav__link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-geometos);
    font-size: var(--text-xs);
    font-weight: 400;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--color-text-dark);
    padding: var(--space-3) 0;
    transition: color var(--transition-fast);
}

.site-nav__link:hover,
.site-nav__link:focus,
.site-nav__link--active {
    color: var(--color-primary);
}

/* Pas de margin-left sur le lien actif : le dot est en absolute "à côté" du
   lien (left négatif) → n'agrandit pas la largeur du nav et ne décale pas
   le logo / les traits décoratifs du header. */
.site-nav__link--active {
    position: relative;
}

.site-nav__link--active::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    background-color: #0199A4;
    border-radius: 50%;
}

.site-nav__dropdown-icon {
    width: 16px;
    height: 16px;
    color: #FFB601;
    transition: transform var(--transition-fast);
}

.site-nav__item--has-dropdown:hover .site-nav__dropdown-icon {
    transform: rotate(180deg);
}

/* =============================================
   DROPDOWN SUBMENU
============================================= */

.site-nav__submenu {
    position: absolute;
    top: 109%;
    left: 0;
    min-width: 200px;
    background-color: var(--color-bg-white);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all var(--transition-fast);
    z-index: var(--z-dropdown);
}

.site-nav__item--has-dropdown:hover .site-nav__submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.site-nav__submenu .site-nav__item {
    display: block;
}

.site-nav__submenu .site-nav__link {
    padding: var(--space-4) var(--space-5);
    white-space: nowrap;
}

.site-nav__submenu .site-nav__link:hover {
    background-color: var(--color-bg-light);
}

/* Active state in submenu — le dot reste à gauche dans le padding existant */
.site-nav__submenu .site-nav__link--active::before {
    left: calc(var(--space-5) - 12px);
}

/* =============================================
   LANGUAGE SWITCHER
============================================= */

.lang-switcher {
    font-family: var(--font-geometos);
    font-size: var(--text-xs);
    letter-spacing: 1.2px;
    color: var(--color-text-dark);
}

.lang-switcher__link {
    color: var(--color-text-dark);
}

.lang-switcher__link--inactive {
    opacity: 0.4;
}

.lang-switcher__separator {
    margin: 0 var(--space-1);
}

/* =============================================
   HEADER LINES (decorative)
   Alignées avec le mot "NOTAIRES" du logo
============================================= */

.site-header__lines {
    position: absolute;
    left: 0;
    right: 0;
    top: 70px;
    height: 1px;
    pointer-events: none;
}

.site-header__line {
    position: absolute;
    top: 0;
    height: 1px;
    background-color: var(--color-text-dark);
}

/* Ligne gauche - étendue de 12px à gauche pour inclure le dot du lien actif "Accueil"
   (qui est positionné à -12px du début du menu via ::before). */
.site-header__line--left {
    left: calc((100% - 1588px) / 2 - 12px);
    right: calc(50% + 62.5px);
}

/* Ligne droite - alignée avec le conteneur 1588px */
.site-header__line--right {
    left: calc(50% + 62.5px);
    right: calc((100% - 1588px) / 2);
}

/* Mobile menu toggle styles are in mobile-menu.css */

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

@media (max-width: 1700px) {
    .site-header__container {
        padding: 0 var(--gutter-desktop);
    }

    /* Adjust decorative lines to align with padded container (-12px à gauche pour le dot Accueil) */
    .site-header__line--left {
        left: calc(var(--gutter-desktop) - 12px);
    }

    .site-header__line--right {
        right: var(--gutter-desktop);
    }
}

@media (max-width: 1279px) {
    .site-header__container {
        padding: 0 var(--gutter-tablet);
    }

    .site-nav__list {
        gap: var(--space-6);
    }
}

@media (max-width: 1023px) {
    .site-header__left,
    .site-header__right .site-nav,
    .site-header__right .lang-switcher,
    .site-header__lines {
        display: none;
    }

    .site-header__container {
        display: flex;
        grid-template-columns: none;
        padding: 0 var(--gutter-tablet);
        justify-content: space-between;
    }

    .site-header__logo {
        margin-bottom: 0;
    }

    .site-header .site-logo__image {
        height: 23px;
        width: auto;
    }

    /* Mobile menu toggle display is handled in mobile-menu.css */
}

@media (max-width: 767px) {
    .site-header__container {
        padding: 0 var(--gutter-mobile);
    }

    .site-header .site-logo__image {
        height: 23px;
        width: auto;
    }
}

/* =============================================
   LIGHT HEADER VARIANT (for dark backgrounds)
============================================= */

.has-light-header .site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-sticky);
}

.has-light-header .site-nav__link {
    color: #fff;
}

.has-light-header .site-nav__link:hover,
.has-light-header .site-nav__link:focus {
    color: rgba(255, 255, 255, 0.7);
}

.has-light-header .site-nav__link--active {
    color: #fff;
}

.has-light-header .site-nav__link--active::before {
    background-color: #0199A4;
}

.has-light-header .site-nav__dropdown-icon {
    color: #FFB601;
}

.has-light-header .lang-switcher,
.has-light-header .lang-switcher__link {
    color: #fff;
}

.has-light-header .lang-switcher__link--inactive {
    opacity: 0.4;
}

.has-light-header .site-header__line {
    background-color: #fff;
}

.has-light-header .site-logo__image {
    filter: brightness(0) invert(1);
}

/* Mobile menu toggle light styles are in mobile-menu.css */

/* Submenu in light header - reset to dark colors */
.has-light-header .site-nav__submenu .site-nav__link {
    color: var(--color-text-dark);
}

.has-light-header .site-nav__submenu .site-nav__link:hover,
.has-light-header .site-nav__submenu .site-nav__link:focus {
    color: var(--color-primary);
}

.has-light-header .site-nav__submenu .site-nav__link--active {
    color: var(--color-primary);
}

.has-light-header .site-nav__submenu .site-nav__link--active::before {
    background-color: #0199A4;
}