/* ==========================================================================
   KAGERER ANHÄNGER — HEADER & FOOTER (Phase 3)
   ==========================================================================
   S'appuie exclusivement sur les tokens de design-system.css et les
   composants de components.css (.container, .accordion-*). Aucune
   nouvelle couleur, aucun nouveau système de design parallèle.

   Breakpoints utilisés en dur (les custom properties ne s'interpolent pas
   dans une media query) : 480 / 768 / 1024, cohérents avec
   --bp-mobile/--bp-tablet/--bp-desktop documentés dans design-system.css.

   Chargé après theme.css (voir inc/enqueue.php).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Skip link (accessibilité clavier)
   -------------------------------------------------------------------------- */

/* Phase 16E — footer corporate dense, quatre colonnes. */
.site-footer__grid { gap:var(--space-10); }
.footer-col__facts { margin:var(--space-4) 0 0; }
.footer-col__facts dt { margin-top:var(--space-3); color:var(--color-text-muted); font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.06em; }
.footer-col__facts dd { margin:2px 0 0; }
.footer-col__list--compact { columns:2; column-gap:var(--space-4); }
.footer-col__list--compact li { break-inside:avoid; }
.site-footer__bottom { justify-content:center; text-align:center; }

.site > .screen-reader-text {
  z-index: 100001;
}

/* --------------------------------------------------------------------------
   Header — conteneur général
   -------------------------------------------------------------------------- */

.site-header {
  background-color: var(--color-bg);
  border-bottom: var(--border-width) solid var(--color-secondary-light);
}

/* --------------------------------------------------------------------------
   Topbar de réassurance (1 item, Phase 16D — Vorkasse retiré) — non
   sticky, disparaît au scroll car seule .site-header__main est en
   position sticky. Item unique centré à tous les breakpoints.
   -------------------------------------------------------------------------- */

.site-header__topbar {
  background-color: var(--color-secondary-dark);
  color: var(--color-text-inverse);
}

.site-header__topbar-inner {
  padding-block: var(--space-2);
}

.site-header__topbar-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  text-align: center;
}

.site-header__topbar-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.site-header__topbar-icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.site-header__topbar-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

@media (min-width: 768px) {
  .site-header__topbar-inner {
    padding-block: var(--space-2);
  }

  .site-header__topbar-list {
    justify-content: center;
    font-size: var(--text-sm);
  }

  .site-header__topbar-icon {
    width: 18px;
    height: 18px;
  }
}

/* --------------------------------------------------------------------------
   Ligne principale (logo / recherche / compte / panier) — sticky au scroll
   -------------------------------------------------------------------------- */

.site-header__main {
  position: sticky;
  top: 0;
  z-index: 500;
  background-color: var(--color-bg);
  box-shadow: var(--shadow-sm);
}

.site-header__main-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-3);
}

/* Burger — mobile uniquement */
.site-header__burger {
  order: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.site-header__burger-icon {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 20px;
}

.site-header__burger-icon span {
  display: block;
  height: 2px;
  border-radius: 1px;
  background-color: var(--color-secondary-dark);
}

.site-header__logo {
  order: 2;
  flex: 1 1 auto;
  text-align: center;
}

.site-header__logo-text {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  color: var(--color-secondary-dark);
  text-decoration: none;
}

/* TEMPORARY_WORDMARK — fallback HTML/CSS, sans prétendre être le logo officiel. */
.site-header__wordmark-primary,
.site-header__wordmark-secondary { display: block; line-height: 1; }
.site-header__wordmark-primary { font-size: 1.08em; letter-spacing: 0.105em; }
.site-header__wordmark-secondary {
  color: var(--color-primary);
  font-size: 0.58em;
  letter-spacing: 0.27em;
}

.site-header__logo-text:hover {
  color: var(--color-primary);
}

.site-header__logo img {
  /* Phase 16G — logo réel (logohang.png, ratio ~3:1) : 48px donnait un
     wordmark trop réduit pour rester lisible ("ANHÄNGER" en particulier).
     Ajusté par palier selon l'espace disponible, header toujours compact. */
  max-height: 44px;
  width: auto;
}

@media (min-width: 768px) {
  .site-header__logo img {
    max-height: 52px;
  }
}

@media (min-width: 1024px) {
  .site-header__logo img {
    max-height: 56px;
  }
}

.site-header__actions {
  order: 3;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.site-header__action-link {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--color-secondary-dark);
  text-decoration: none;
}

.site-header__action-link:hover {
  color: var(--color-primary);
}

.site-header__action-icon {
  display: inline-flex;
}

.site-header__action-label {
  display: none;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
}

.site-header__cart-link {
  position: relative;
}

.site-header__cart-count {
  position: absolute;
  top: -6px;
  right: -6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background-color: var(--color-accent);
  color: var(--color-secondary-dark);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  white-space: nowrap;
}

/* Recherche produit — 2e ligne compacte en mobile */
.site-header__search {
  order: 4;
  flex: 1 1 100%;
}

.site-header__search form {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.site-header__search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--color-text);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.site-header__search input[type="search"]:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-tint);
}

.site-header__search button[type="submit"] {
  flex: 0 0 auto;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-inverse);
  background-color: var(--color-primary);
  border: var(--border-width) solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  cursor: pointer;
}

.site-header__search button[type="submit"]:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

/* À 375 px, verrouille la première rangée burger / logo / actions et place
   la recherche sur une seconde rangée complète. Le breakpoint tablette
   et le layout desktop existants restent inchangés. */
@media (max-width: 479px) {
  .site-header__main-inner {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: var(--space-2);
  }

  .site-header__burger,
  .site-header__logo,
  .site-header__actions {
    min-width: 0;
  }

  .site-header__logo-text {
    max-width: 100%;
    font-size: var(--text-base);
    letter-spacing: 0.02em;
    overflow-wrap: anywhere;
  }

  .site-header__actions {
    gap: var(--space-2);
    padding-right: var(--space-1);
  }

  .site-header__search {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (min-width: 1024px) {
  .site-header__burger {
    display: none;
  }

  /* Phase 16G — grille 3 colonnes (1fr auto 1fr) au lieu d'un flex nowrap :
     avec flex, la recherche grandissait puis plafonnait à 480px sans que
     l'espace restant soit redistribué, donc les actions (Konto/Warenkorb)
     ne touchaient jamais réellement le bord droit et la recherche n'était
     pas centrée symétriquement dans le header. La grille garantit un vrai
     centrage de la colonne du milieu quels que soient les poids des
     colonnes de bord. */
  .site-header__main-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    flex-wrap: unset;
  }

  .site-header__logo {
    order: unset;
    flex: unset;
    justify-self: start;
    text-align: left;
  }

  .site-header__search {
    order: unset;
    flex: unset;
    justify-self: center;
    width: 100%;
    max-width: 480px;
    margin-inline: 0;
  }

  .site-header__actions {
    order: unset;
    flex: unset;
    justify-self: end;
  }

  .site-header__action-label {
    display: block;
  }
}

/* --------------------------------------------------------------------------
   Navigation principale — panneau déroulant mobile / barre desktop
   -------------------------------------------------------------------------- */

.site-header__nav-wrap {
  background-color: var(--color-secondary-dark);
  border-top: var(--border-width) solid var(--color-secondary-dark);
}

.site-header__nav[hidden] {
  display: none;
}

.site-header__nav-list {
  margin: 0;
  padding: var(--space-3) 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.site-header__nav-list .menu-item > a,
.site-header__nav-list li > a {
  display: block;
  padding: var(--space-3) var(--space-2);
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  border-bottom: var(--border-width) solid var(--color-secondary-light);
}

.site-header__nav-list .menu-item > a:hover,
.site-header__nav-list li > a:hover {
  color: var(--color-text-inverse);
  background-color: var(--color-primary);
}

.site-header__nav-secondary {
  padding: var(--space-3) var(--space-2);
}

.site-header__nav-secondary-link {
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-semibold);
}

/* --------------------------------------------------------------------------
   Dropdown "Kategorien" (Phase 16G) — markup posé par
   kagerer_render_categories_nav_item() (inc/navigation.php), comportement
   JS dans initCategoriesDropdown() (assets/js/main.js). Mobile : sous-liste
   dépliable dans le flux normal du panneau nav. Desktop (≥1024px) : bascule
   en dropdown flottant sous l'item, voir media query plus bas.
   -------------------------------------------------------------------------- */

.menu-item--categories {
  position: relative;
}

.site-header__nav-categories {
  display: flex;
  align-items: stretch;
}

.site-header__nav-categories-link {
  display: block;
  flex: 1 1 auto;
  padding: var(--space-3) var(--space-2);
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  border-bottom: var(--border-width) solid var(--color-secondary-light);
}

.site-header__nav-categories-link:hover {
  color: var(--color-text-inverse);
  background-color: var(--color-primary);
}

.site-header__nav-categories-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  padding: 0;
  background: transparent;
  border: none;
  border-bottom: var(--border-width) solid var(--color-secondary-light);
  color: var(--color-text-inverse);
  cursor: pointer;
}

.site-header__nav-categories-icon {
  width: 16px;
  height: 16px;
  transition: transform 0.15s ease;
}

.site-header__nav-categories-toggle[aria-expanded="true"] .site-header__nav-categories-icon {
  transform: rotate(180deg);
}

.site-header__nav-categories-panel {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--space-2) var(--space-4);
  background-color: var(--color-secondary);
}

.site-header__nav-categories-panel[hidden] {
  display: none;
}

/* Spécificité `li a` volontaire : bat .site-header__nav-list li > a
   (0,1,2) qui, sans cela, imposait sa couleur blanche (texte invisible
   sur le panneau clair desktop — bug constaté et corrigé Phase 16G). */
.site-header__nav-categories-panel li a {
  display: block;
  padding: var(--space-2);
  color: var(--color-text-inverse-muted);
  text-decoration: none;
}

.site-header__nav-categories-panel li a:hover {
  color: var(--color-text-inverse);
}

@media (min-width: 1024px) {
  .site-header__nav-categories-link,
  .site-header__nav-categories-toggle {
    border-bottom: none;
  }

  .site-header__nav-categories-panel {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 600;
    min-width: 240px;
    padding: var(--space-2) 0;
    background-color: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
  }

  .site-header__nav-categories-panel li a {
    padding: var(--space-2) var(--space-4);
    color: var(--color-text);
  }

  .site-header__nav-categories-panel li a:hover {
    background-color: var(--color-bg-alt);
    color: var(--color-primary);
  }
}

@media (min-width: 1024px) {
  .site-header__nav-wrap {
    border-top: none;
  }

  /* La nav reste toujours visible en desktop, quel que soit l'état de
     l'attribut [hidden] laissé par le JS du burger (utile si la fenêtre
     est agrandie après une interaction mobile). */
  .site-header__nav[hidden] {
    display: block;
  }

  .site-header__nav-list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-6);
    padding-block: var(--space-2);
  }

  .site-header__nav-list .menu-item > a,
  .site-header__nav-list li > a {
    padding: var(--space-3) var(--space-2);
    border-bottom: none;
  }

  /* Compte déjà affiché dans .site-header__actions en desktop. */
  .site-header__nav-secondary {
    display: none;
  }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
  background-color: var(--color-secondary-dark);
  color: var(--color-text-inverse);
  border-top: 3px solid var(--color-accent);
  padding-block: var(--space-10);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
  }
}

@media (min-width: 1024px) {
  .site-footer__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Colonnes : accordéon en mobile (< 768px), blocs statiques au-delà. */
.footer-col {
  background-color: transparent;
  border: none;
  margin-bottom: 0;
}

.footer-col + .footer-col {
  border-top: var(--border-width) solid var(--color-secondary-light);
}

.footer-col__heading {
  margin: 0;
  font-size: var(--text-base);
}

.footer-col .accordion-trigger {
  width: 100%;
  padding: var(--space-4) 0;
  background: transparent;
  font-size: var(--text-base);
  color: var(--color-text-inverse);
}

.footer-col .accordion-trigger:hover { background-color: var(--color-secondary); }
.site-footer .accordion-icon { color: var(--color-text-inverse); }
.site-footer a:focus-visible,
.site-footer button:focus-visible { outline-color: var(--color-text-inverse); }

.footer-col .accordion-panel {
  padding: 0;
}

.footer-col .accordion-panel[data-open="true"] {
  padding: 0 0 var(--space-4);
}

.footer-col__company-name {
  margin: 0 0 var(--space-2);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-inverse);
}

.footer-col__address {
  margin: 0 0 var(--space-3);
  font-style: normal;
  color: var(--color-text-inverse-muted);
}

.footer-col__email a {
  color: var(--color-text-inverse);
}

.footer-col__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-col__list a {
  color: var(--color-text-inverse-muted);
  text-decoration: none;
}

.footer-col__list a:hover {
  color: var(--color-text-inverse);
  text-decoration: underline;
}

.footer-col__list--plain li {
  color: var(--color-text-inverse-muted);
}

@media (min-width: 768px) {
  .footer-col + .footer-col {
    border-top: none;
  }

  /* Neutralise l'interactivité accordéon : les colonnes redeviennent des
     blocs statiques classiques une fois qu'il y a assez de place pour la
     grille. pointer-events:none empêche toute activation à la souris ;
     max-height:none !important garantit un rendu ouvert même si le
     bouton est malgré tout activé au clavier (aria-expanded reste
     togglable mais sans impact visuel). */
  .footer-col .accordion-trigger {
    pointer-events: none;
    padding: 0 0 var(--space-3);
  }

  .footer-col .accordion-icon {
    display: none;
  }

  .footer-col .accordion-panel,
  .footer-col .accordion-panel[data-open="false"],
  .footer-col .accordion-panel[data-open="true"] {
    max-height: none !important;
    padding: 0 !important;
    overflow: visible;
  }
}

/* Blocs futurs réservés (réassurance sectorielle, avis clients) : pas de
   règles nécessaires tant qu'ils ne sont pas implémentés — voir
   commentaires HTML dans footer.php. */

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: var(--border-width) solid var(--color-secondary-light);
  font-size: var(--text-xs);
  color: var(--color-text-inverse-subtle);
}

.site-footer__copyright {
  margin: 0;
}

.site-footer__bottom-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__bottom-links a {
  color: var(--color-text-inverse-muted);
  text-decoration: none;
}

.site-footer__bottom-links a:hover {
  color: var(--color-text-inverse);
  text-decoration: underline;
}

@media (min-width: 768px) {
  .site-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.footer-col__facts{margin:var(--space-4) 0 0}.footer-col__facts dt{margin-top:var(--space-3);color:var(--color-text-inverse-muted);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.06em}.footer-col__facts dd{margin:2px 0 0}.footer-col__list--compact{columns:2;column-gap:var(--space-4)}.footer-col__list--compact li{break-inside:avoid}.site-footer__bottom{justify-content:center;text-align:center}
@media(min-width:768px){.site-footer__bottom{justify-content:center}}