/*
Theme Name: TAFELWIT (Kadence Child)
Theme URI: https://tafelwit.org
Description: Thème enfant Kadence pour TAFELWIT, association algérienne de protection de l'environnement.
Author: TAFELWIT
Template: kadence
Version: 1.12.0
Text Domain: tafelwit-kadence-child
*/

/* Configuration RTL pour l'arabe — scopé à la racine du document (html[lang="ar"],
   posé par language_attributes() quand Polylang bascule la locale courante sur
   l'arabe) et non à tout élément portant un attribut lang="ar" : un simple lien
   du sélecteur de langue annoté lang="ar" ne doit pas basculer en RTL lui-même
   (voir .tafelwit-lang-switcher plus bas). */
html[lang="ar"] {
  direction: rtl;
  font-family: 'Amiri', serif;
}

/* Lien "Gérer mes préférences cookies" du footer (voir functions.php,
   tafelwit_render_legal_links) : un <button> pour porter la classe
   cmplz-manage-consent que Complianz ecoute globalement, mais remis a plat
   pour se fondre visuellement parmi les liens texte adjacents du footer
   (memes couleur/soulignement que les liens Mentions legales / Politique de
   confidentialite, mesures via inspect_design). */
.tafelwit-footer-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: rgb(49, 130, 206);
  text-decoration: underline;
  cursor: pointer;
}

html[lang="ar"] .nav-menu {
  flex-direction: row-reverse;
}

html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 {
  font-family: 'Amiri', serif;
  font-weight: 700;
}

/* Signature visuelle TAFELWIT : trait horizontal dore sous les titres de section */
.tafelwit-section-title {
  position: relative;
  padding-bottom: 0.75rem;
}

.tafelwit-section-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 2px;
  background-color: var(--wp--preset--color--sable-or, #C8A45A);
}

html[lang="ar"] .tafelwit-section-title::after {
  left: auto;
  right: 0;
}

/* Header collant au scroll (voir les theme mods header_sticky /
   header_sticky_background, réglés sur toutes les pages) : Kadence bascule
   les classes item-is-fixed/item-is-stuck instantanément au scroll, ce qui
   changerait le fond (et les couleurs de texte transparentes -> sombres, sur
   la page d'accueil) d'un coup sec. On anime nous-mêmes ces propriétés pour
   une transition fluide, sur toutes les pages (le header est commun). */
#masthead .site-header-row-container-inner,
#masthead .kadence-sticky-header {
  transition: background-color 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
#masthead .site-branding .site-title,
#masthead .site-branding .site-description,
#masthead .header-navigation .header-menu-container > ul > li > a,
#masthead .mobile-toggle-open-container .menu-toggle-open,
#masthead .search-toggle-open-container .search-toggle-open {
  transition: color 0.35s ease;
}

/* Sélecteur de langue Polylang — élément autonome du header (voir
   inc/language-switcher.php, rendu sur le hook kadence_after_header),
   volontairement détaché du menu de navigation/du drawer mobile pour ne plus
   hériter de leur balisage et de leur JS (voir l'historique en tête de ce
   fichier PHP). Il flotte donc en position fixe au-dessus du header
   (z-index > #masthead qui est à 11, voir kadence/assets/css/header.min.css),
   quel que soit l'état ouvert/fermé du menu hamburger.
   Menu déroulant : seule la langue active est visible, la liste des autres
   langues se révèle au clic (voir assets/lang-switcher.js). Le survol seul
   n'est plus utilisé pour ouvrir/fermer : l'espace entre le déclencheur et
   le <ul> (position absolute + marge) sort de la boîte de :hover, ce qui
   refermait le menu avant que le clic n'atteigne un item. La gestion est
   entièrement au clic (et au focus clavier), qui n'a pas ce problème.
   Le sélecteur est toujours forcé en LTR (voir plus bas) : c'est un
   contrôle d'interface, pas du contenu, et son ordre visuel (drapeau puis
   code) doit rester identique quelle que soit la langue affichée — y
   compris pour l'entrée arabe. */
.tafelwit-lang-switcher {
  position: fixed;
  top: 1.15rem;
  right: 4.5rem;
  /* Le header collant de Kadence (.item-is-fixed) passe en z-index:1200 une
     fois "stuck" (voir kadence/assets/css/header.min.css) : on reste
     au-dessus pour ne pas se faire recouvrir au scroll. */
  z-index: 1300;
  display: flex;
  align-items: center;
  direction: ltr;
  transition: color 0.35s ease;
}
html[lang="ar"] .tafelwit-lang-switcher {
  right: auto;
  left: 4.5rem;
}
.tafelwit-lang-switcher__toggle {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.6rem;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: #1A3A5C;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.tafelwit-lang-switcher.is-open .tafelwit-lang-switcher__toggle {
  background-color: #F5F1E8;
}
/* :hover isolé dans @media (hover:hover) : sur écran tactile il n'y a pas de
   vrai survol, seulement un événement de pointeur simulé au tap qui peut
   rester "collé" (l'état :hover ne se relâche jamais faute de mouseleave
   réel) — l'ouverture/fermeture reste entièrement pilotée par la classe
   .is-open (voir lang-switcher.js), ceci n'est qu'un effet cosmétique de
   surbrillance qu'on réserve donc aux dispositifs à pointeur précis. */
@media (hover: hover) and (pointer: fine) {
  .tafelwit-lang-switcher__toggle:hover {
    background-color: #F5F1E8;
  }
}
.tafelwit-lang-switcher__caret {
  font-size: 0.65rem;
  transition: transform 0.15s ease;
}
.tafelwit-lang-switcher.is-open .tafelwit-lang-switcher__caret {
  transform: rotate(180deg);
}
.tafelwit-lang-switcher__dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 100;
  margin: 0.25rem 0 0;
  padding: 4px;
  /* Ajusté au contenu (drapeau + 2 lettres) au lieu d'une largeur minimale
     fixe : aucune règle de menu Kadence/Polylang ne cible cette classe
     (nom propre au thème), le min-width imposait donc un cadre bien plus
     large que nécessaire. */
  width: fit-content;
  min-width: auto;
  list-style: none;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.tafelwit-lang-switcher.is-open .tafelwit-lang-switcher__dropdown,
.tafelwit-lang-switcher:focus-within .tafelwit-lang-switcher__dropdown {
  display: block;
}
.tafelwit-lang-switcher__link {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 4px;
  text-decoration: none;
  color: #1A3A5C;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: background-color 0.15s ease;
  /* Toujours LTR, même pour l'entrée arabe : ce sont des libellés d'UI
     (drapeau + code ISO), pas du contenu en arabe à mettre en page en RTL. */
  direction: ltr;
  text-align: left;
}
.tafelwit-lang-switcher__toggle img,
.tafelwit-lang-switcher__link img { width: 16px; height: 11px; }
@media (hover: hover) and (pointer: fine) {
  .tafelwit-lang-switcher__link:hover { background-color: #F5F1E8; }
}
.tafelwit-lang-switcher__code { line-height: 1; }

html[lang="ar"] .tafelwit-lang-switcher__dropdown { right: auto; left: 0; }

/* Le switcher est désormais un élément autonome (voir plus haut) : plus de
   #mobile-menu à cibler, le dropdown desktop ci-dessus (position: absolute,
   fond blanc) s'applique tel quel sur mobile comme sur desktop.
   Aligné sur la même ligne horizontale que l'icône hamburger
   (.mobile-toggle-open-container), a sa gauche avec un petit espace —
   valeurs mesurées via inspect_design a 390px : hamburger x:329 y:27 l:37
   h:31 (centre vertical ~42.5), switcher l:71 h:28. top = 42.5 - 28/2 ;
   right = 390 - (329 - 8px d'espace). */
@media (max-width: 480px) {
  .tafelwit-lang-switcher {
    top: 1.8rem;
    right: 4.3rem;
  }
  html[lang="ar"] .tafelwit-lang-switcher {
    right: auto;
    left: 4.3rem;
  }
}