/* __DESIGN_SITE__ */
/* ==========================================================================
   sex-niedersachsen.de — habillage unique (gabarit Next)
   Direction : vert menthe + graphite, registre « minimal tech »
   - coins 4px, typo monospace pour les petits libellés
   - header desktop : logo à gauche, bloc [nav | icônes] regroupé à droite,
     séparateurs en trait vertical fin (façon « | »)
   - mobile : même barre, fond graphite, logo menthe
   - footer : grille dense 4 colonnes, très petite typo monospace, fond
     graphite, liens menthe
   Zones ciblées : header.sticky (jamais le <header> du hero) + footer.border-t
   ========================================================================== */

:root{
  --tn-mint:#2FE6B8;
  --tn-mint-line:rgba(47,230,184,.35);
  --tn-graphite:#14171A;
  --tn-graphite-2:#1B1F23;
  --tn-ink:#E9EDEE;
  --tn-ink-dim:#9BA6AA;
  --tn-mono: ui-monospace, Menlo, Consolas, monospace;
}

/* --------------------------------------------------------------------
   HEADER — barre sticky (desktop + mobile, même <header>)
   -------------------------------------------------------------------- */

header.sticky{
  background:linear-gradient(180deg,var(--tn-graphite) 0%,var(--tn-graphite-2) 100%);
  backdrop-filter:none; /* flou retiré : rendu plat, plus "tech" */
  border-bottom:1px solid var(--tn-mint-line);
  border-bottom-color:var(--tn-mint-line) !important; /* écrase le style inline du gabarit */
  position:relative;
  overflow:hidden;
}

/* liseré animé au ras du bord bas, unique effet "loop" du header */
header.sticky::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--tn-mint) 45%,transparent 90%);
  background-size:220% 100%;
  animation:tn-sweep 7s linear infinite;
  pointer-events:none;
}

/* disposition : logo à gauche, [nav + icônes] regroupés à droite (au lieu de
   space-between qui les dispersait sur toute la largeur) */
header.sticky .flex.h-16.items-center.justify-between.gap-4{
  justify-content:flex-start;
}

/* logo desktop : mono, gras, petite pastille menthe façon indicateur */
header.sticky div.hidden.md\:flex.items-center.flex-shrink-0:not(.gap-4) > a{
  color:var(--tn-mint) !important; /* écrase color:#E35D8F posé en inline */
  font-family:var(--tn-mono);
  font-weight:700;
  font-size:1.02rem;
  letter-spacing:-.01em;
  position:relative;
  padding-left:1rem;
  display:inline-flex;
  align-items:center;
}
header.sticky div.hidden.md\:flex.items-center.flex-shrink-0:not(.gap-4) > a::before{
  content:"";
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:.5rem; height:.5rem; border-radius:1px;
  background:var(--tn-mint);
  box-shadow:0 0 8px var(--tn-mint-line);
}

/* nav desktop : regroupée à droite, lien en mono séparé par un trait fin */
header.sticky nav.hidden.md\:flex{
  margin-left:auto;
  gap:0;
}
header.sticky nav.hidden.md\:flex > div{
  padding:0 1rem;
  border-left:1px solid var(--tn-mint-line);
}
header.sticky nav.hidden.md\:flex button{
  font-family:var(--tn-mono);
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--tn-ink);
  transition:color .18s ease;
}
header.sticky nav.hidden.md\:flex button:hover{ color:var(--tn-mint); }

/* bloc icônes (login, recherche) : accroché au groupe nav par un trait fin */
header.sticky div.hidden.md\:flex.items-center.gap-4.flex-shrink-0{
  padding-left:1rem;
  border-left:1px solid var(--tn-mint-line);
  gap:.6rem;
}
header.sticky div.hidden.md\:flex.items-center.gap-4.flex-shrink-0 button{
  color:var(--tn-ink-dim);
  border-radius:4px;
  transition:color .18s ease, background-color .18s ease, transform .18s ease;
}
header.sticky div.hidden.md\:flex.items-center.gap-4.flex-shrink-0 button:hover{
  color:var(--tn-mint);
  background:rgba(47,230,184,.1);
  transform:translateY(-1px);
}

/* barre mobile : même fond graphite (hérité du header), logo menthe centré */
header.sticky div.md\:hidden > a{
  color:var(--tn-mint) !important; /* écrase color:#E35D8F posé en inline */
  font-family:var(--tn-mono);
  font-weight:700;
}
header.sticky div.md\:hidden button[aria-label="Menü"]{
  color:var(--tn-mint);
  border-radius:4px;
  min-width:44px; min-height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background-color .18s ease;
}
header.sticky div.md\:hidden button[aria-label="Menü"]:hover{
  background:rgba(47,230,184,.12);
}
header.sticky div.md\:hidden button:last-child{
  color:var(--tn-ink);
  font-family:var(--tn-mono);
  font-size:.66rem;
  letter-spacing:.04em;
  border:1px solid var(--tn-mint-line);
  border-radius:4px;
  padding:.35rem .6rem;
  min-height:44px;
  display:inline-flex; align-items:center;
  transition:border-color .18s ease, color .18s ease;
}
header.sticky div.md\:hidden button:last-child:hover{
  border-color:var(--tn-mint);
  color:var(--tn-mint);
}

/* --------------------------------------------------------------------
   FOOTER — grille dense, mono, fond graphite, liens menthe
   -------------------------------------------------------------------- */

footer.border-t{
  background:linear-gradient(180deg,var(--tn-graphite-2) 0%,var(--tn-graphite) 100%);
  border-top-color:var(--tn-mint-line) !important; /* écrase le style inline du gabarit */
  color:var(--tn-ink-dim);
  position:relative;
  overflow:hidden;
}

/* motif de fond quadrillé qui dérive lentement : 2e et dernier effet animé */
footer.border-t::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--tn-mint-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--tn-mint-line) 1px, transparent 1px);
  background-size:28px 28px;
  opacity:.05;
  animation:tn-drift 42s linear infinite;
  pointer-events:none;
}

footer.border-t .container{ position:relative; padding-top:2rem; padding-bottom:1.5rem; }

/* grille plus dense : moins d'air entre les 4 colonnes */
footer.border-t .grid.grid-cols-1{ gap:1.2rem !important; margin-bottom:1.4rem !important; }

footer.border-t h3{
  font-family:var(--tn-mono);
  font-size:.62rem;
  letter-spacing:.12em;
  color:var(--tn-mint) !important; /* écrase color:#E35D8F du h3 marque + text-zinc-900 des autres */
  margin-bottom:.6rem;
}
/* pastille menthe devant le nom de marque, écho de la pastille du logo header */
footer.border-t .lg\:col-span-1 h3{ display:inline-flex; align-items:center; gap:.45rem; }
footer.border-t .lg\:col-span-1 h3::before{
  content:""; width:.4rem; height:.4rem; border-radius:1px;
  background:var(--tn-mint); flex:none;
}

footer.border-t p,
footer.border-t li,
footer.border-t a{
  font-family:var(--tn-mono);
  font-size:.72rem;
  line-height:1.5;
}
footer.border-t .space-y-2\.5 > * + *{ margin-top:.35rem !important; }

footer.border-t a{ color:var(--tn-ink-dim); transition:color .18s ease; }
footer.border-t a:hover{ color:var(--tn-mint); }

footer.border-t .border-t.border-zinc-200{
  border-top-color:var(--tn-mint-line);
  padding-top:.9rem;
}

/* --------------------------------------------------------------------
   Animations + garde-fous
   -------------------------------------------------------------------- */

@keyframes tn-sweep{
  0%{ background-position:220% 0; }
  100%{ background-position:-220% 0; }
}
@keyframes tn-drift{
  0%{ background-position:0 0, 0 0; }
  100%{ background-position:56px 56px, 56px 56px; }
}

@media (prefers-reduced-motion: reduce){
  header.sticky::after,
  footer.border-t::before{ animation:none; }
  header.sticky div.hidden.md\:flex.items-center.gap-4.flex-shrink-0 button:hover{
    transform:none;
  }
}

/* mode sombre système : couleurs déjà pensées pour un fond graphite, on les
   réaffirme pour ne jamais laisser une classe dark: du gabarit reprendre la
   main sur les libellés du header/footer */
@media (prefers-color-scheme: dark){
  header.sticky nav.hidden.md\:flex button,
  header.sticky div.md\:hidden button:last-child{ color:var(--tn-ink); }
  footer.border-t a{ color:var(--tn-ink-dim); }
}

/* 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__ */