/* __DESIGN_SITE__ */
/* ============================================================
   sexkontakte-brandenburg.de — habillage unique (gabarit Next)
   Direction imposée : "pancarte" du Brandebourg — rouge #c62828
   → #b71c1c, blanc, gris. Bordures épaisses, ombres nettes NON
   floutées (box-shadow décalé, sans blur), registre panneau
   officiel/signalétique.
   Disposition : header desktop encadré d'un liseré rouge 6px sur
   tout son pourtour, logo à gauche, nav centrée, actions à
   droite. Mobile : même cadre rouge, bandeau intérieur blanc
   opaque (pas de flou). Footer : fond gris clair, 3 colonnes
   (bandeau marque en pleine largeur au-dessus), titres en
   capitales, liens rouges.
   Ne touche qu'au <header> et au <footer> : grille de profils,
   fiches, age gate, pop-up d'inscription intouchés.
   ============================================================ */

:root {
  --bb-rouge: #c62828;
  --bb-rouge-fonce: #b71c1c;
  --bb-gris-clair: #f0f0f0;
  --bb-gris: #6b6b6b;
  --bb-gris-fonce: #3a3a3a;
}

/* ------------------------------------------------------------
   HEADER — cadre "pancarte" rouge sur tout le pourtour, plat,
   blanc opaque (on retire le flou d'origine). Identique en
   desktop et en mobile : c'est le même <header> qui les contient.
   ------------------------------------------------------------ */
header.sticky {
  top: 10px !important;
  width: auto !important;
  margin: 10px 10px 18px !important;
  background: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 6px solid var(--bb-rouge) !important;
  border-radius: 0 !important;
  box-shadow: 6px 6px 0 var(--bb-rouge-fonce);
  animation: bb-entree .5s ease both;
}

@keyframes bb-entree {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Ligne desktop : logo | nav | actions — nav vraiment centrée */
header.sticky .flex.h-16 { gap: .5rem; }
header.sticky nav { flex: 1 1 auto; justify-content: center; }

/* Le logo devient une plaque : cadre rouge, fond blanc, ombre
   nette. Sert pour la version desktop (à gauche) ET la version
   mobile centrée (l'ancre garde son centrage via `translate`,
   propriété Tailwind v4 distincte de `transform` : on ne la
   touche pas). */
header.sticky a[href="/"] {
  display: inline-flex;
  align-items: center;
  padding: .35rem .8rem;
  border: 3px solid var(--bb-rouge);
  background: #fff;
  box-shadow: 4px 4px 0 var(--bb-rouge-fonce);
  color: var(--bb-rouge-fonce) !important;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  transition: transform .15s ease;
}
header.sticky a[href="/"]:hover { transform: translate(-2px, -2px); }

/* Bouton de navigation "Top 10 Bundesländer" : pastille cadrée */
header.sticky nav button {
  border: 2px solid var(--bb-rouge);
  background: #fff;
  color: var(--bb-gris-fonce);
  padding: .4rem .9rem;
  font-weight: 700;
  box-shadow: 3px 3px 0 var(--bb-rouge);
  transition: transform .15s ease;
}
header.sticky nav button:hover { color: var(--bb-rouge); transform: translate(-2px, -2px); }

/* Actions desktop (login, recherche) : icônes rouges, cible tactile nette */
header.sticky button[aria-label="Login"],
header.sticky button[aria-label="Suche"] {
  color: var(--bb-rouge) !important;
  padding: .55rem !important;
}
header.sticky button[aria-label="Login"]:hover,
header.sticky button[aria-label="Suche"]:hover { transform: translate(-1px, -1px); }

/* Barre mobile : bandeau blanc opaque déjà garanti par le fond du
   header ci-dessus. Hamburger + bouton "Mitgliederbereich" en rouge,
   cible tactile ≥ 44 px. */
header.sticky div.md\:hidden > button {
  color: var(--bb-rouge) !important;
  padding: .6rem !important;
  min-height: 44px;
}

@media (prefers-reduced-motion: reduce) {
  header.sticky,
  header.sticky a[href="/"],
  header.sticky nav button,
  header.sticky button[aria-label="Login"],
  header.sticky button[aria-label="Suche"] {
    animation: none !important;
    transition: none !important;
  }
}

/* ------------------------------------------------------------
   FOOTER — plaque "pancarte" : liseré rouge en tête, fond gris
   clair, titres en capitales, liens rouges. Disposition changée :
   la colonne marque passe en bandeau plein-large au-dessus, les
   trois autres colonnes (Navigation / Mentions légales /
   Bundesländer) se répartissent ensuite sur 3 colonnes égales.
   ------------------------------------------------------------ */
footer {
  background: var(--bb-gris-clair) !important;
  border-top: 6px solid var(--bb-rouge) !important;
}

footer .grid {
  gap: 2rem !important;
}
@media (min-width: 768px) {
  footer .grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  footer .grid > div:first-child {
    grid-column: 1 / -1 !important;
    display: flex;
    align-items: baseline;
    gap: 1rem;
    border-bottom: 3px solid var(--bb-rouge);
    padding-bottom: 1rem;
  }
}
@media (max-width: 767px) {
  footer .grid { grid-template-columns: 1fr !important; }
}

footer h3 {
  color: var(--bb-rouge) !important;
  text-transform: uppercase !important;
  letter-spacing: .08em;
}

footer a {
  color: var(--bb-rouge-fonce) !important;
  text-decoration: none;
}
footer a:hover { text-decoration: underline; color: var(--bb-rouge) !important; }

/* Petite puce carrée rouge devant chaque lien de colonne — un
   repère de type panneau, pas du texte ajouté. */
footer ul li { position: relative; padding-left: 14px; }
footer ul li::before {
  content: '';
  position: absolute;
  left: 0; top: .45em;
  width: 8px; height: 8px;
  background: var(--bb-rouge);
  transition: transform .15s ease;
}
footer ul li:hover::before { transform: scale(1.5); }

/* Barre du bas (avertissement + sitemap) : séparateur rouge fin */
footer .border-t.border-zinc-200 {
  border-top-color: var(--bb-rouge) !important;
  border-top-width: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
  footer ul li::before { transition: 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;
  }
}
/* __END_DESIGN_SITE__ */