/**
 * Fichier : assets/css/header.css
 * Emplacement : sous-dossier assets/css/ du thème AB-Story Reader-Thème
 *
 * Responsabilités :
 *   - Définir les styles statiques de base du header et de ses six zones.
 *   - Exposer un système de variables CSS surchargeables pour chaque option
 *     du Customizer (largeur, padding, couleurs, image de fond, alignements).
 *   - Garantir un rendu sobre, lisible et accessible en l'absence de tout
 *     CSS inline généré dynamiquement.
 *
 * Système de variables :
 *   Les variables globales du header sont déclarées sur .abs-reader-theme-header
 *   avec le préfixe --abs-reader-theme-header-*. Les variables locales aux zones
 *   sont déclarées sur chaque .abs-reader-theme-header-zone-{N} avec le préfixe
 *   --abs-reader-theme-zone-*. Le fichier assets/css/header-css.php génèrera le CSS
 *   inline qui redéfinit ces variables au cas par cas, sans toucher au CSS de
 *   base et sans utiliser !important.
 *
 * Accessibilité WCAG 2.1 niveau AA :
 *   - Skip links visuellement masqués mais focusables au clavier
 *   - Focus visible sur tous les éléments interactifs
 *   - Contraste assuré par les variables de couleur du thème
 *   - Respect de prefers-reduced-motion
 *
 * Compatibilité :
 *   Variables CSS, custom properties, :focus-visible, position sticky,
 *   prefers-reduced-motion. Aucune dépendance externe.
 *
 * Surcharge :
 *   Ce fichier ne contient aucune couleur en dur ni aucune valeur destinée
 *   à être personnalisée par l'administrateur. Toute personnalisation se
 *   fait par redéfinition de variables CSS via assets/css/header-css.php ou
 *   via une feuille de style enfant.
 */


/* =============================================================
   Variables globales du header
   ============================================================= */

.abs-reader-theme-header {

    /* Variables globales */
    --abs-reader-theme-header-max-width: 1280px;
    --abs-reader-theme-header-padding-y: 1rem;
    --abs-reader-theme-header-sticky-height: 80px;
    --abs-reader-theme-header-sticky-z-index: 100;
    --abs-reader-theme-header-sticky-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    --abs-reader-theme-header-zone-gap: 1rem;

    /* Variables génériques de zone, redéfinissables par zone */
    --abs-reader-theme-zone-bg: transparent;
    --abs-reader-theme-zone-text: currentColor;
    --abs-reader-theme-zone-link: currentColor;
    --abs-reader-theme-zone-link-hover: currentColor;
    --abs-reader-theme-zone-bg-image: none;
    --abs-reader-theme-zone-bg-position: center;
    --abs-reader-theme-zone-bg-repeat: no-repeat;
    --abs-reader-theme-zone-bg-size: cover;
    --abs-reader-theme-zone-overlay-color: transparent;
    --abs-reader-theme-zone-overlay-opacity: 0;
    --abs-reader-theme-zone-padding-y: 0.75rem;
    --abs-reader-theme-zone-padding-x: 1rem;
    --abs-reader-theme-zone-radius: 0;
    --abs-reader-theme-zone-gap: 1rem;

    /* Alignement du contenu de la zone. */
    /* content-align cible le text-align des contenus textuels. */
    --abs-reader-theme-zone-content-align: inherit;

    /* Variables spécifiques zone 2 */
    --abs-reader-theme-zone-2-logo-max-height: 64px;
    --abs-reader-theme-zone-2-logo-justify: flex-start;
    --abs-reader-theme-zone-2-menu-justify: flex-end;

    /* Variables spécifiques zone 3 */
    --abs-reader-theme-zone-3-nav-align: center;
    --abs-reader-theme-zone-3-nav-align-items: center;

    /* Variables spécifiques zone 1 - skip links */
    --abs-reader-theme-zone-1-skip-link-font-weight: 600;

    /* Variables spécifiques zone 2 - logo en fallback texte */
    --abs-reader-theme-zone-2-site-title-font-weight: 700;
    --abs-reader-theme-zone-2-site-title-line-height: 1.2;

    /* Variables spécifiques zone 4 - annonces */
    --abs-reader-theme-zone-4-text-line-height: 1.4;

    /* Variables spécifiques zone 5 - panier WooCommerce */
    --abs-reader-theme-zone-5-justify: flex-end;

    /* Variables spécifiques zone 6 */
    --abs-reader-theme-zone-6-icon-size: 1.5rem;
    --abs-reader-theme-zone-6-button-gap: 0.75rem;
    --abs-reader-theme-zone-6-button-padding-y: 0.5rem;
    --abs-reader-theme-zone-6-button-padding-x: 0.875rem;
    --abs-reader-theme-zone-6-button-radius: 0.375rem;
    --abs-reader-theme-zone-6-list-justify: center;
    --abs-reader-theme-zone-6-title-font-weight: 600;
    --abs-reader-theme-zone-6-title-line-height: 1.3;
    --abs-reader-theme-zone-6-label-font-weight: 500;
    --abs-reader-theme-zone-6-link-border: 1px solid currentColor;
    --abs-reader-theme-zone-6-link-bg-hover: rgba(127, 127, 127, 0.12);
    --abs-reader-theme-zone-6-link-line-height: 1.2;
    --abs-reader-theme-zone-6-link-transition-duration: 150ms;
    --abs-reader-theme-zone-6-link-hover-translate-y: -1px;
}


/* =============================================================
   Conteneur principal du header
   ============================================================= */

.abs-reader-theme-header {
    box-sizing: border-box;
    width: 100%;
    margin-inline: auto;
    padding-block: var(--abs-reader-theme-header-padding-y);
    padding-inline: var(--abs-reader-theme-zone-padding-x);
    display: flex;
    flex-direction: column;
    gap: var(--abs-reader-theme-header-zone-gap);
}

.abs-reader-theme-header > * {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--abs-reader-theme-header-max-width);
    margin-inline: auto;
}


/* =============================================================
   Comportement sticky
   ============================================================= */

.abs-reader-theme-header.is-sticky {
    position: sticky;
    top: 0;
    z-index: var(--abs-reader-theme-header-sticky-z-index);
    min-height: var(--abs-reader-theme-header-sticky-height);
    background-color: var(--abs-reader-theme-color-background, #000);
    box-shadow: var(--abs-reader-theme-header-sticky-shadow);
    transition: padding 200ms ease, box-shadow 200ms ease, min-height 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
    .abs-reader-theme-header.is-sticky {
        transition: none;
    }
}


/* =============================================================
   Zones - base commune avec image de fond et overlay

   La liste explicite des six zones est utilisée plutôt qu'un sélecteur
   d'attribut [class*=...] pour éviter que les styles de fond, d'overlay
   et de positionnement ne s'appliquent aux sous-éléments dont la classe
   contient également la chaîne "abs-reader-theme-header-zone-".
   ============================================================= */

.abs-reader-theme-header-zone-1,
.abs-reader-theme-header-zone-2,
.abs-reader-theme-header-zone-3,
.abs-reader-theme-header-zone-4,
.abs-reader-theme-header-zone-5,
.abs-reader-theme-header-zone-6 {
    position: relative;
    isolation: isolate;
    background-color: var(--abs-reader-theme-zone-bg);
    color: var(--abs-reader-theme-zone-text);
    background-image: var(--abs-reader-theme-zone-bg-image);
    background-position: var(--abs-reader-theme-zone-bg-position);
    background-repeat: var(--abs-reader-theme-zone-bg-repeat);
    background-size: var(--abs-reader-theme-zone-bg-size);
    padding-block: var(--abs-reader-theme-zone-padding-y);
    padding-inline: var(--abs-reader-theme-zone-padding-x);
    border-radius: var(--abs-reader-theme-zone-radius);
    text-align: var(--abs-reader-theme-zone-content-align);
}

.abs-reader-theme-header-zone-1::before,
.abs-reader-theme-header-zone-2::before,
.abs-reader-theme-header-zone-3::before,
.abs-reader-theme-header-zone-4::before,
.abs-reader-theme-header-zone-5::before,
.abs-reader-theme-header-zone-6::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--abs-reader-theme-zone-overlay-color);
    opacity: var(--abs-reader-theme-zone-overlay-opacity);
    pointer-events: none;
    z-index: 0;
}

.abs-reader-theme-header-zone-1 > *,
.abs-reader-theme-header-zone-2 > *,
.abs-reader-theme-header-zone-3 > *,
.abs-reader-theme-header-zone-4 > *,
.abs-reader-theme-header-zone-5 > *,
.abs-reader-theme-header-zone-6 > * {
    position: relative;
    z-index: 1;
}

.abs-reader-theme-header-zone-1 a,
.abs-reader-theme-header-zone-2 a,
.abs-reader-theme-header-zone-3 a,
.abs-reader-theme-header-zone-4 a,
.abs-reader-theme-header-zone-5 a,
.abs-reader-theme-header-zone-6 a {
    color: var(--abs-reader-theme-zone-link);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.abs-reader-theme-header-zone-1 a:hover,
.abs-reader-theme-header-zone-1 a:focus-visible,
.abs-reader-theme-header-zone-2 a:hover,
.abs-reader-theme-header-zone-2 a:focus-visible,
.abs-reader-theme-header-zone-3 a:hover,
.abs-reader-theme-header-zone-3 a:focus-visible,
.abs-reader-theme-header-zone-4 a:hover,
.abs-reader-theme-header-zone-4 a:focus-visible,
.abs-reader-theme-header-zone-5 a:hover,
.abs-reader-theme-header-zone-5 a:focus-visible,
.abs-reader-theme-header-zone-6 a:hover,
.abs-reader-theme-header-zone-6 a:focus-visible {
    color: var(--abs-reader-theme-zone-link-hover);
}


/* =============================================================
   Focus visible (accessibilité)
   ============================================================= */

.abs-reader-theme-header :focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 2px;
    border-radius: 2px;
}


/* =============================================================
   Zone 1 - Liens d'évitement (skip links)
   ============================================================= */

.abs-reader-theme-skip-links {
    padding: 0;
}

.abs-reader-theme-skip-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.abs-reader-theme-skip-link {
    position: absolute;
    top: -100vh;
    left: 0;
    padding: 0.75rem 1.25rem;
    background-color: var(--abs-reader-theme-color-text, #fff);
    color: var(--abs-reader-theme-color-background, #000);
    font-weight: var(--abs-reader-theme-zone-1-skip-link-font-weight);
    text-decoration: none;
    border-radius: 0 0 0.375rem 0;
    z-index: 9999;
}

.abs-reader-theme-skip-link:focus,
.abs-reader-theme-skip-link:focus-visible {
    top: 0;
    outline: 3px solid currentColor;
    outline-offset: -3px;
}


/* =============================================================
   Zone 2 - Identité et menu secondaire
   ============================================================= */

.abs-reader-theme-header-zone-2 {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--abs-reader-theme-zone-gap);
}

.abs-reader-theme-header-zone-2-identity {
    display: flex;
    align-items: center;
    justify-content: var(--abs-reader-theme-zone-2-logo-justify);
}

.abs-reader-theme-header-zone-2 .abs-reader-theme-nav-abs-menu-header {
    display: flex;
    align-items: center;
    justify-content: var(--abs-reader-theme-zone-2-menu-justify);
}

/* Logo image (si le custom logo WordPress est défini) */
.abs-reader-theme-header-zone-2-identity img,
.abs-reader-theme-header-zone-2-identity .custom-logo {
    display: block;
    max-height: var(--abs-reader-theme-zone-2-logo-max-height);
    width: auto;
    height: auto;
}

/* Logo en fallback texte */
.abs-reader-theme-header-zone-2-identity .abs-reader-theme-site-title {
    font-size: var(--abs-reader-theme-text-xl, 1.5rem);
    font-weight: var(--abs-reader-theme-zone-2-site-title-font-weight);
    line-height: var(--abs-reader-theme-zone-2-site-title-line-height);
    text-decoration: none;
}

@media (min-width: 48em) {
    .abs-reader-theme-header-zone-2 {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}


/* =============================================================
   Zone 3 - Barre de navigation principale (tablist)
   Le rendu intrinsèque des onglets est géré par navigation.css.
   Ici, seul le positionnement contextuel dans le header.
   ============================================================= */

.abs-reader-theme-header-zone-3 {
    display: flex;
    justify-content: var(--abs-reader-theme-zone-3-nav-align);
    align-items: var(--abs-reader-theme-zone-3-nav-align-items);
}


/* =============================================================
   Zone 4 - Annonces et bandeaux
   ============================================================= */

.abs-reader-theme-header-zone-4 {
    --abs-reader-theme-zone-content-align: center;
    font-size: var(--abs-reader-theme-text-sm, 0.95rem);
    line-height: var(--abs-reader-theme-zone-4-text-line-height);
}


/* =============================================================
   Zone 5 - Panier WooCommerce
   Le module fournit son propre rendu et son propre style.
   ============================================================= */

.abs-reader-theme-header-zone-5 {
    display: flex;
    align-items: center;
    justify-content: var(--abs-reader-theme-zone-5-justify);
}


/* =============================================================
   Zone 6 - Téléchargements et plateformes
   ============================================================= */

.abs-reader-theme-header-zone-6 {
    --abs-reader-theme-zone-content-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--abs-reader-theme-zone-gap);
}

.abs-reader-theme-header-zone-6-title {
    margin: 0;
    font-size: var(--abs-reader-theme-text-lg, 1.25rem);
    font-weight: var(--abs-reader-theme-zone-6-title-font-weight);
    line-height: var(--abs-reader-theme-zone-6-title-line-height);
}

.abs-reader-theme-header-zone-6-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: var(--abs-reader-theme-zone-6-list-justify);
    gap: var(--abs-reader-theme-zone-6-button-gap);
}

.abs-reader-theme-header-zone-6-item {
    margin: 0;
    padding: 0;
}

.abs-reader-theme-header-zone-6-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding-block: var(--abs-reader-theme-zone-6-button-padding-y);
    padding-inline: var(--abs-reader-theme-zone-6-button-padding-x);
    border: var(--abs-reader-theme-zone-6-link-border);
    border-radius: var(--abs-reader-theme-zone-6-button-radius);
    text-decoration: none;
    line-height: var(--abs-reader-theme-zone-6-link-line-height);
    transition:
        background-color var(--abs-reader-theme-zone-6-link-transition-duration) ease,
        transform var(--abs-reader-theme-zone-6-link-transition-duration) ease;
}

.abs-reader-theme-header-zone-6-link:hover,
.abs-reader-theme-header-zone-6-link:focus-visible {
    background-color: var(--abs-reader-theme-zone-6-link-bg-hover);
    transform: translateY(var(--abs-reader-theme-zone-6-link-hover-translate-y));
}

.abs-reader-theme-header-zone-6-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--abs-reader-theme-zone-6-icon-size);
    height: var(--abs-reader-theme-zone-6-icon-size);
    flex-shrink: 0;
}

.abs-reader-theme-header-zone-6-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: currentColor;
}

.abs-reader-theme-header-zone-6-label {
    font-size: var(--abs-reader-theme-text-sm, 0.95rem);
    font-weight: var(--abs-reader-theme-zone-6-label-font-weight);
}

@media (prefers-reduced-motion: reduce) {
    .abs-reader-theme-header-zone-6-link {
        transition: none;
    }
    .abs-reader-theme-header-zone-6-link:hover,
    .abs-reader-theme-header-zone-6-link:focus-visible {
        transform: none;
    }
}


/* =============================================================
   Adaptations tablette et desktop
   ============================================================= */

@media (min-width: 48em) {

    .abs-reader-theme-header {
        padding-inline: 1.5rem;
    }

    .abs-reader-theme-header-zone-6 {
        --abs-reader-theme-zone-content-align: left;
        --abs-reader-theme-zone-6-list-justify: flex-end;
        flex-direction: row;
        justify-content: space-between;
    }
}

@media (min-width: 64em) {

    .abs-reader-theme-header {
        padding-inline: 2rem;
    }
}