/* __DESIGN_SITE__ */
/* ==================================================================
   sie-sucht-sex.de — direction : fuchsia + noir, registre "neon magazine"
   Gabarit Next (Tailwind). Ne cible que <header> et <footer>.
   - Header desktop : DEUX lignes (logo seul en ligne 1, nav + icones en ligne 2)
   - Barre mobile : hamburger a DROITE, logo a GAUCHE
   - Footer : 4 colonnes sur fond noir, liseret fuchsia anime en haut
   ================================================================== */

:root{
  --sn-fuchsia:#ff2fb0;      /* fuchsia neon vif, pour les accents/hover */
  --sn-fuchsia-deep:#c2185b; /* couleur de marque du site (secondaryColor) */
  --sn-noir:#0a0710;
  --sn-noir-2:#150a1c;
  --sn-gris-clair:#e7dbe9;
  --sn-gris-moyen:#b9a3c0;
}

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

header.sticky{
  background:linear-gradient(180deg,var(--sn-noir) 0%,var(--sn-noir-2) 100%);
  position:relative;
  animation:sn-entree .5s ease-out both;
}
@keyframes sn-entree{
  from{opacity:0;transform:translateY(-8px);}
  to{opacity:1;transform:translateY(0);}
}

/* liseret neon anime sous le header (remplace le trait fixe d'origine) */
header.sticky::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--sn-fuchsia),var(--sn-fuchsia-deep),var(--sn-fuchsia),transparent);
  background-size:200% 100%;
  animation:sn-liseret 6s linear infinite;
}
@keyframes sn-liseret{
  from{background-position:0% 0;}
  to{background-position:200% 0;}
}

/* --- Ligne 1 / Ligne 2 : le conteneur flex devient une grille de 2 rangees --- */
header.sticky .container > .flex.h-16{
  flex-wrap:wrap;
  height:auto;
  min-height:4rem;
  row-gap:.6rem;
  padding-block:.9rem;
}
/* enfant 1 = logo desktop -> ligne 1, seul, centre, pleine largeur */
header.sticky .container > .flex.h-16 > *:nth-child(1){
  order:1;
  width:100%;
  justify-content:center;
}
/* enfant 3 = nav (mega menus, "Top 10 Bundeslaender") -> ligne 2, a gauche */
header.sticky .container > .flex.h-16 > *:nth-child(3){
  order:2;
}
/* enfant 4 = icones profil/recherche -> ligne 2, a droite */
header.sticky .container > .flex.h-16 > *:nth-child(4){
  order:3;
  margin-left:auto;
}

/* logo : lettrage neon, soulignement qui s'allume au survol */
header.sticky a[href="/"]{
  letter-spacing:.04em;
  text-transform:uppercase;
  text-shadow:0 0 14px rgba(255,47,176,.55);
  position:relative;
  padding-bottom:2px;
}
header.sticky a[href="/"]::after{
  content:"";
  position:absolute;
  left:0;bottom:-2px;
  width:100%;height:2px;
  background:var(--sn-fuchsia);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s ease;
}
header.sticky a[href="/"]:hover::after{transform:scaleX(1);}

/* nav desktop ("Top 10 Bundeslaender" + villes proches) */
header.sticky .container > .flex.h-16 > *:nth-child(3) button{
  color:var(--sn-gris-clair);
  border-radius:999px;
  padding:.4rem .75rem;
  transition:color .2s ease,background-color .2s ease,box-shadow .2s ease;
}
header.sticky .container > .flex.h-16 > *:nth-child(3) button:hover{
  color:#fff;
  background:rgba(255,47,176,.14);
  box-shadow:0 0 0 1px rgba(255,47,176,.35) inset;
}

/* icones profil / recherche desktop */
header.sticky .container > .flex.h-16 > *:nth-child(4) button,
header.sticky .container > .flex.h-16 > *:nth-child(4) a{
  color:var(--sn-gris-clair);
  border-radius:999px;
  transition:color .2s ease,background-color .2s ease;
}
header.sticky .container > .flex.h-16 > *:nth-child(4) button:hover,
header.sticky .container > .flex.h-16 > *:nth-child(4) a:hover{
  color:#fff;
  background:rgba(255,47,176,.16);
}

/* bulle "Mach mit!" : ancree a DROITE (pas centree) pour ne jamais sortir de
   l'ecran maintenant que l'icone est poussee pres du bord droit du header */
header .absolute.top-full.right-1\/2.translate-x-1\/2{
  right:0;
  left:auto;
  transform:none;
}
header .absolute.top-full.right-1\/2.translate-x-1\/2 .rotate-45{
  left:auto;
  right:14px;
  transform:none;
}

/* ---------------------------- BARRE MOBILE ---------------------------- */
/* logo a GAUCHE (sorti du centrage absolu d'origine), profil + hamburger
   regroupes a DROITE, hamburger en dernier */
header .md\:hidden.flex.items-center.justify-between.w-full{
  justify-content:flex-start;
  gap:.5rem;
}
header .md\:hidden a[href="/"]{
  position:static;
  left:auto;
  transform:none;
  order:1;
  letter-spacing:.02em;
  text-shadow:0 0 10px rgba(255,47,176,.5);
}
header div.md\:hidden.flex.items-center.justify-between.w-full > button:first-child{
  order:3; /* hamburger : tout a droite */
}
header div.md\:hidden.flex.items-center.justify-between.w-full > *:last-child{
  order:2;
  margin-left:auto; /* regroupe profil + hamburger a droite, logo reste seul a gauche */
}
/* zone de clic confortable (>=44px) sur mobile */
header .md\:hidden button{
  color:var(--sn-gris-clair);
  min-width:44px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
}
header .md\:hidden > *:last-child{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  padding-inline:.35rem;
}
header .md\:hidden button:hover,
header .md\:hidden > *:last-child:hover{
  color:#fff;
  background:rgba(255,47,176,.16);
}

/* menu deroulant mobile (liens + carte) : fond assorti */
header .md\:hidden.border-t.border-zinc-200{
  border-top-color:rgba(255,47,176,.25) !important;
}

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

footer.border-t{
  position:relative;
  overflow:hidden;
  background-color:var(--sn-noir) !important;
}

/* liseret fuchsia anime en haut du footer */
footer.border-t::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg,transparent,var(--sn-fuchsia),var(--sn-fuchsia-deep),var(--sn-fuchsia),transparent);
  background-size:220% 100%;
  animation:sn-liseret 7s linear infinite;
}

/* la grille 4 colonnes existe deja dans le gabarit (grid-cols-1 md:2 lg:4) :
   on n'y touche pas, on relit seulement les couleurs pour le fond noir */
footer.border-t h3.text-zinc-900{
  color:#fff;
  letter-spacing:.08em;
}
footer.border-t p.text-zinc-600,
footer.border-t li a.text-zinc-600{
  color:var(--sn-gris-moyen);
}
footer.border-t p.text-zinc-500,
footer.border-t li.text-zinc-500{
  color:var(--sn-gris-moyen);
}
footer.border-t .border-zinc-200{
  border-top-color:rgba(255,47,176,.18) !important;
}
footer.border-t a.underline{
  color:var(--sn-gris-clair);
  text-decoration-color:rgba(255,47,176,.6);
}
footer.border-t a.hover\:text-zinc-700:hover{
  color:var(--sn-fuchsia) !important;
}
footer.border-t a:hover{
  color:var(--sn-fuchsia);
}

/* ------------------------------ mode sombre ---------------------------- */
@media (prefers-color-scheme:dark){
  header.sticky{background:linear-gradient(180deg,#050308,var(--sn-noir-2));}
  footer.border-t{background-color:var(--sn-noir) !important;}
  footer.border-t h3.text-zinc-900{color:#fff;}
  footer.border-t p.text-zinc-600,
  footer.border-t li a.text-zinc-600,
  footer.border-t p.text-zinc-500{color:var(--sn-gris-moyen);}
}

/* --------------------------- confort de lecture ------------------------ */
@media (prefers-reduced-motion:reduce){
  header.sticky,
  header.sticky::after,
  footer.border-t::before{animation:none;}
  header.sticky a[href="/"]::after{transition:none;}
}

/* logo mobile : le gabarit le centre par translate(-50%) ; passé en statique à gauche, il gardait la translation et sortait de l'écran (capture du 17/09) */
@media (max-width: 767px) { header .md\:hidden a[href="/"] { transform: none !important; left: auto !important; position: static !important; } }

/* garde-fou design_site.py (Next, 17/09) : le logo mobile est un <a> absolu centré ; un nom de site
   allemand long (« Kostenlose Sexdates in Deutschland ») débordait ou s'empilait sur 3 lignes
   par-dessus les icônes (capture du 17/09). Une ligne, ellipse, place réservée aux boutons. */
@media (max-width: 767px) {
  header .md\:hidden a[href="/"] {
    max-width: 56% !important; white-space: nowrap !important; overflow: hidden !important;
    text-overflow: ellipsis !important; font-size: clamp(.95rem, 4.4vw, 1.25rem) !important; line-height: 1.2 !important;
  }
}
/* __END_DESIGN_SITE__ */