/* __DESIGN_SITE__ */
/* ============================================================
   sextreffen-saarland.de — direction artistique « tricolore sport »
   Bleu marine (#1a237e / #283593) + rouge (#d32f2f) + blanc.
   Bandes, italique léger sur le logo, boutons à angle coupé.
   Disposition : header desktop = nav à gauche / actions au centre
   / logo à droite, bande rouge fine en bas du header ; mobile =
   bandeau marine, hamburger à droite ; footer rayé, fond marine,
   2 colonnes larges.
   Sélecteurs par attribut (évite l'échappement des classes
   Tailwind du type md:flex) — header.sticky / footer.border-t
   servent de préfixe pour battre la spécificité des classes
   utilitaires sans abuser de !important.
   ============================================================ */

/* ---------- HEADER DESKTOP ---------- */

/* Fond marine (le blanc/flou d'origine disparaît) + bande rouge
   fine en bas (la couleur de bordure du gabarit est posée en
   inline, donc !important) + liseré tricolore tout en haut du
   header, qui dérive lentement (motif, pas une grande surface). */
header.sticky {
  background: linear-gradient(180deg, #1a237e 0%, #283593 100%) !important;
  border-bottom-width: 4px !important;
  border-bottom-style: solid !important;
  border-bottom-color: #d32f2f !important;
  box-shadow: none !important;
}
header.sticky::before {
  content: "";
  display: block;
  height: 3px;
  width: 100%;
  background: repeating-linear-gradient(
    90deg,
    #1a237e 0 16px,
    #ffffff 16px 20px,
    #d32f2f 20px 36px
  );
  background-size: 200% 100%;
  animation: sxs-drift 14s linear infinite;
}
@keyframes sxs-drift {
  from { background-position: 0 0; }
  to   { background-position: -72px 0; }
}

/* Rangée principale : le HTML sert logo -> (bloc mobile) -> nav ->
   actions ; on réordonne pour lire nav (gauche) / actions (centre,
   entre deux marges auto) / logo (droite). */
header.sticky .flex.h-16 {
  justify-content: flex-start;
  gap: 1.25rem;
}
header.sticky nav {
  order: 1;
  margin-right: auto;
}
header.sticky div[class*="flex-shrink-0"][class*="gap-4"] {
  order: 2;
}
header.sticky div[class*="flex-shrink-0"]:not([class*="gap-4"]) {
  order: 3;
  margin-left: auto;
}

/* Logo : italique léger, blanc, petit soulignement rouge animé au
   survol (dessous logo desktop ET logo mobile, tous deux href="/"). */
header.sticky a[href="/"] {
  color: #ffffff !important;
  font-style: italic;
  font-weight: 800;
  letter-spacing: 0.01em;
  position: relative;
  padding-bottom: 2px;
}
header.sticky a[href="/"]::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 3px;
  background: #d32f2f;
  transform: scaleX(0.35);
  transform-origin: left;
  transition: transform 0.35s ease;
}
header.sticky a[href="/"]:hover::after {
  transform: scaleX(1);
}

/* Lien de navigation "Top 10 Bundesländer" : blanc, soulignement
   rouge qui se déploie au survol. */
header.sticky nav button {
  color: #ffffff;
  position: relative;
}
header.sticky nav button:hover {
  color: #ffcdd2;
}
header.sticky nav button::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 2px;
  background: #d32f2f;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
header.sticky nav button:hover::after {
  transform: scaleX(1);
}

/* Actions (login, recherche) : chips rouges à angle coupé */
header.sticky div[class*="flex-shrink-0"][class*="gap-4"] > div > button,
header.sticky div[class*="flex-shrink-0"][class*="gap-4"] > button {
  background: #d32f2f;
  color: #ffffff !important;
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
header.sticky div[class*="flex-shrink-0"][class*="gap-4"] > div > button:hover,
header.sticky div[class*="flex-shrink-0"][class*="gap-4"] > button:hover {
  background: #283593;
  transform: translateY(-2px);
}

/* ---------- BARRE MOBILE (bandeau marine, hamburger à droite) ---------- */

/* Le bloc mobile hérite déjà du fond marine du header. On échange
   la position du bouton "Mitgliederbereich" (passe à gauche) et du
   hamburger (passe à droite) ; le logo centré (absolute + translate
   Tailwind v4) n'est pas touché, il reste au milieu, inchangé. */
header.sticky div[class*="md:hidden"][class*="justify-between"] > button:not([aria-label]) {
  order: 1;
  color: #ffffff;
  background: #d32f2f;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  min-height: 44px;
  padding: 0 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: background-color 0.2s ease;
}
header.sticky div[class*="md:hidden"][class*="justify-between"] > button:not([aria-label]) span {
  color: #ffffff !important;
}
header.sticky div[class*="md:hidden"][class*="justify-between"] > button:not([aria-label]):hover {
  background: #283593;
}
header.sticky div[class*="md:hidden"][class*="justify-between"] > button[aria-label="Menü"] {
  order: 3;
  color: #ffffff;
  background: #283593;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
header.sticky div[class*="md:hidden"][class*="justify-between"] > button[aria-label="Menü"]:hover {
  background: #d32f2f;
  transform: translateY(-1px);
}

/* ---------- FOOTER : rayures marine/rouge, fond marine, 2 colonnes larges ---------- */

footer.border-t {
  background: #1a237e !important;
  border-top-color: #1a237e !important;
}
footer.border-t::before {
  content: "";
  display: block;
  height: 4px;
  width: 100%;
  background: repeating-linear-gradient(
    90deg,
    #1a237e 0 14px,
    #ffffff 14px 18px,
    #d32f2f 18px 24px
  );
}

/* 4 colonnes d'origine (grid-cols-1 -> md:2 -> lg:4) réduites à
   2 colonnes larges, à toutes les tailles d'écran. */
footer.border-t div[class*="grid-cols-1"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem 3rem;
}

footer.border-t h3 {
  color: #ffffff !important;
}
footer.border-t p,
footer.border-t a {
  color: rgba(255, 255, 255, 0.82);
}
footer.border-t a:hover {
  color: #ff8a80;
}
footer.border-t p[class*="text-zinc-500"] {
  color: rgba(255, 255, 255, 0.62);
}
footer.border-t div[class*="border-zinc-200"] {
  border-top-color: rgba(211, 47, 47, 0.45) !important;
}

/* ---------- Confort visuel : coupe toute animation/transition ---------- */
@media (prefers-reduced-motion: reduce) {
  header.sticky::before {
    animation: none;
  }
  header.sticky a[href="/"]::after,
  header.sticky nav button::after,
  header.sticky div[class*="flex-shrink-0"][class*="gap-4"] > div > button,
  header.sticky div[class*="flex-shrink-0"][class*="gap-4"] > button,
  header.sticky div[class*="md:hidden"][class*="justify-between"] > button[aria-label="Menü"],
  header.sticky div[class*="md:hidden"][class*="justify-between"] > button:not([aria-label]) {
    transition: none !important;
    animation: none !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;
    position: absolute !important; /* lot 21 : un `position: relative` posé pour un ::after l'avait mis dans le flux → bouton par-dessus */
  }
  header nav.hidden { display: none !important; } /* lot 21 : `display:flex` posé sur nav.hidden.md:flex la faisait sortir sur mobile, par-dessus le logo */
}
/* __END_DESIGN_SITE__ */