/**
 * lp-overrides.css
 * Hand-written overrides that ship as a standalone library (no build step), so
 * they can be deployed to ng identically to local.
 *
 * 1) Page-header standardisation — every content page uses the same centred
 *    "Vorstand" header treatment, including the previously unstyled Aktuell /
 *    Veranstaltungen pages.
 * 2) Nationalratskandidaten canton accordion + map styling.
 */

/* ============================================================
 * 1. Unified page headers
 * ============================================================ */
.aktuell__head,
.events__head,
.kontakt__head,
.leitbild__head,
.membership__head,
.signup__head,
.positionen__head,
.parolen__head,
.regional__head,
.ressourcen__head,
.spenden__head,
.vorstand__head,
.page-node__head {
  text-align: center;
  max-width: 46rem;
  margin: 0 auto 2.5rem;
}

.aktuell__title,
.events__title,
.kontakt__title,
.leitbild__title,
.membership__title,
.signup__title,
.positionen__title,
.parolen__title,
.regional__title,
.ressourcen__title,
.spenden__title,
.vorstand__title,
.page-node__title {
  font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem);
  font-weight: 900;
  line-height: 1.15;
  color: #2c3e50;
  margin: 0 0 0.6rem;
}

.aktuell__lead,
.events__lead,
.kontakt__lead,
.leitbild__lead,
.membership__lead,
.signup__lead,
.positionen__lead,
.parolen__lead,
.regional__lead,
.ressourcen__lead,
.spenden__lead,
.vorstand__lead,
.page-node__lead {
  font-size: 1.15rem;
  line-height: 1.6;
  color: rgba(44, 62, 80, 0.78);
  max-width: 42rem;
  margin: 0 auto;
}

/* Parolen intro paragraph uses a different class — keep it consistent too. */
.parolen__intro {
  text-align: center;
  font-size: 1.15rem;
  line-height: 1.6;
  color: rgba(44, 62, 80, 0.78);
  max-width: 42rem;
  margin: 0 auto;
}

/* ============================================================
 * 2. Nationalratskandidaten — canton map + accordion
 * ============================================================ */

/* Reuse the regional two-column map layout. The grid/sticky/map-path styling
 * already lives in the compiled bundle (.regional__layout/.regional__map/
 * .lp-canton). We only add accordion-specific pieces here. */
.kandidaten__count {
  display: inline-block;
  margin-left: 0.6rem;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  background: #c9a227;
  color: #2c3e50;
  font-size: 0.8rem;
  font-weight: 800;
  vertical-align: middle;
}

.kandidaten-accordion,
.regional-accordion {
  --bs-accordion-border-color: rgba(44, 62, 80, 0.12);
  --bs-accordion-active-bg: #2c3e50;
  --bs-accordion-active-color: #ffffff;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(201, 162, 39, 0.4);
  border-radius: 0.6rem;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(44, 62, 80, 0.1);
}

.kandidaten-accordion .accordion-button,
.regional-accordion .accordion-button {
  font-weight: 800;
  color: #2c3e50;
  font-size: 1.15rem;
}

.kandidaten-accordion .accordion-button:not(.collapsed),
.regional-accordion .accordion-button:not(.collapsed) {
  color: #ffffff;
  background: #2c3e50;
  box-shadow: none;
}

.kandidaten-accordion .accordion-button:not(.collapsed)::after,
.regional-accordion .accordion-button:not(.collapsed)::after {
  filter: brightness(0) invert(1);
}

.kandidaten-accordion .accordion-body,
.regional-accordion .accordion-body {
  padding: 1.5rem 1.25rem;
  background: #f7f9fb;
}

/* Card grid inside each canton panel — reuse the team-card look. */
.kandidaten-accordion .team-grid {
  margin: 0;
}

/* Flash highlight when jumped to from the map / dropdown. */
.kandidaten-accordion .accordion-item.rk-flash,
.regional-accordion .accordion-item.rk-flash {
  animation: kandidatenFlash 1.4s ease;
}

@keyframes kandidatenFlash {
  0%, 100% { box-shadow: 0 1px 3px rgba(44, 62, 80, 0.1); }
  30% { box-shadow: 0 0 0 4px rgba(201, 162, 39, 0.7); }
}

/* Give the accordion a comfortable scroll offset under the sticky navbar. */
.kandidaten-accordion .accordion-item,
.regional-accordion .accordion-item {
  scroll-margin-top: 96px;
}

/* ============================================================
 * 3. Parolen — "Vergangene Abstimmungen" section
 * ============================================================ */

/* Clear divider above the archive of past votes. */
.parolen-past {
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 2px solid rgba(44, 62, 80, 0.12);
}

.parolen-past__heading {
  text-align: center;
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  font-weight: 900;
  color: rgba(44, 62, 80, 0.72);
  margin: 0 0 2rem;
}

/* Past recommendations stay legible but visually recede behind current ones. */
.parolen-group--past {
  opacity: 0.82;
}

.parolen-group--past .parolen-group__date {
  color: rgba(44, 62, 80, 0.6);
}

/* ---------------------------------------------------------------------------
   Mitmachen — drei Stufen (Follower / Supporter / Driver)
   Ergaenzt die in main.style.css kompilierten .tier-card-Regeln um Rechte,
   Pflichten, Hinweisbox und die Vergleichstabelle. Liegt hier, weil das SCSS
   einen Build-Schritt braucht, diese Datei aber direkt ausgeliefert wird.
--------------------------------------------------------------------------- */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}
.tier-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.tier-card__meta {
  margin: 0 0 1.4rem;
  font-size: .9rem;
  font-weight: 600;
  color: #6b7680;
}
.tier-card__heading {
  margin: 0 0 .65rem;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #cc9a26;
}
.tier-list {
  list-style: none;
  padding-left: 0;
  margin: 0 0 1.4rem;
}
.tier-list li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: .55rem;
  line-height: 1.45;
}
.tier-list li:last-child { margin-bottom: 0; }
.tier-list--rights li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: #2e9e5b;
  font-weight: 700;
}
.tier-list--duties li::before {
  content: "\2022";
  position: absolute;
  left: .35rem;
  color: #29333c;
}
.tier-list--none li { color: #6b7680; }
.tier-list--none li::before {
  content: "\2013";
  position: absolute;
  left: 0;
  color: #9aa3ab;
}
/* CTA und Hinweis buendig am unteren Kartenrand. */
.tier-card__cta,
.tier-card__note { margin-top: auto; padding-top: .4rem; }
.tier-card__cta .btn { display: block; width: 100%; text-align: center; }
.tier-card__note p {
  margin: 0;
  padding-left: .85rem;
  border-left: 3px solid #cc9a26;
  font-size: .92rem;
  line-height: 1.5;
  color: #4a5560;
}
.tier-socials {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  list-style: none;
  padding-left: 0;
  margin: 0 0 .8rem;
}
.tier-socials li::before { content: none; }
.tier-socials a {
  display: inline-block;
  padding: .25rem .65rem;
  border: 1px solid #d7dade;
  border-radius: 999px;
  background: #fff;
  font-size: .8rem;
  font-weight: 600;
  color: #29333c;
  text-decoration: none;
}
.tier-socials a:hover,
.tier-socials a:focus { border-color: #cc9a26; color: #cc9a26; }

.membership__matrix-title { margin: 3rem 0 1rem; }
.membership__matrix-scroll { overflow-x: auto; }
.membership-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}
.membership-matrix th,
.membership-matrix td {
  padding: .6rem .75rem;
  border-bottom: 1px solid #e4e6e9;
  text-align: center;
}
.membership-matrix thead th {
  background: #f5f5f5;
  font-weight: 700;
}
.membership-matrix th[scope="row"] {
  text-align: left;
  font-weight: 400;
}
.matrix-yes { color: #2e9e5b; font-weight: 700; }
.matrix-no  { color: #9aa3ab; }

/* ---------------------------------------------------------------------------
   Feinschliff 2026-09-12
--------------------------------------------------------------------------- */

/* Weniger Luft zwischen Menue und Seitentitel.

   Zwischen beiden stapeln sich drei Abstaende: das Theme umschliesst den
   Inhalt mit <main class="py-5"> (3rem), darunter liegt ein Meldungsbereich
   mit mb-3 (1rem), der ausser dem versteckten Platzhalter auf keiner Seite
   etwas enthaelt, und erst dann folgt der Abstand der Seite selbst.

   Das !important ist hier nicht Bequemlichkeit, sondern noetig: Bootstraps
   Abstandsklassen sind selbst mit !important gesetzt (.py-5 { padding-top:
   3rem !important }), und dagegen hilft keine Spezifitaet. Eine fruehere
   Fassung dieser Regel stand ohne !important hier und hat nie gewirkt.

   Unten bleibt der Abstand unangetastet. */
main.py-5 { padding-top: 0 !important; }
.page__header > .container.mb-3 { margin-bottom: 0 !important; }

.events.py-5,
.aktuell.py-5,
.leitbild.py-5,
.regional.py-5,
.parolen.py-5,
.positionen.py-5,
.kontakt.py-5,
.ressourcen.py-5,
.signup.py-5,
.spenden.py-5,
.vorstand.py-5,
/* Knotenseiten (Vernehmlassungen, Medienspiegel, Shop) tragen py-5 nicht
   am selben Element, sondern auf einem schlichten .container darin. */
.page-node > .container.py-5 { padding-top: 1.5rem !important; }

/* Dort kommt oben noch der eigene Abstand der Knotenseite hinzu
   (clamp(1.5rem, 4vw, 3rem)) - zusammen waren das 72px statt der 24px, die
   alle anderen Seiten haben. Unten bleibt er erhalten. */
.page-node { padding-top: 0; }
.membership { padding-top: 1.5rem; }

.events__head,
.aktuell__head,
.leitbild__head,
.regional__head { margin-bottom: 2rem; }

/* Blaetter-Navigation braucht Luft zu den Beitraegen darueber. */
.aktuell__pager { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid #e4e6e9; }
.aktuell__pager .pager__items { justify-content: center; }

/* Leitbild: Inhalt mittig, Statuten-Box gleich breit wie die Grundsaetze. */
.leitbild__list,
.leitbild__statuten { max-width: 48rem; margin-left: auto; margin-right: auto; }
.leitbild__statuten { margin-top: 3rem; box-sizing: border-box; }
.leitbild__head { text-align: center; }

/* Einzelne Veranstaltung: Link als Schaltflaeche, mit Abstand nach oben. */
.event-single__cta { margin-top: 2rem; }

/* Regionale Kontakte: Akkordeon je Kanton (Konzept wie Nationalratskandidaten). */
.regional-accordion .rk-card + .rk-card { margin-top: 1rem; }
.regional__count {
  margin-left: .6rem;
  padding: .1rem .5rem;
  border-radius: 999px;
  background: #f5f5f5;
  font-size: .8rem;
  font-weight: 600;
  color: #6b7680;
}

/* ---------------------------------------------------------------------------
   Sprachumschalter: Aufklappmenü mit Kürzeln (DE / FR / EN)
--------------------------------------------------------------------------- */
.lp-lang { display: inline-block; margin-left: .75rem; }
.lp-lang__toggle {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .35rem .7rem;
  border: 1px solid rgba(44, 62, 80, 0.18);
  border-radius: 999px;
  background: #fff;
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: #2c3e50;
  cursor: pointer;
}
.lp-lang__toggle::after {
  content: "";
  width: 0; height: 0;
  border-left: .3rem solid transparent;
  border-right: .3rem solid transparent;
  border-top: .35rem solid currentColor;
  opacity: .6;
}
.lp-lang__toggle:hover,
.lp-lang__toggle:focus { border-color: #cc9a26; color: #cc9a26; }
.lp-lang__menu { min-width: 9rem; padding: .35rem; border-radius: .6rem; }
.lp-lang__item {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .4rem .6rem;
  border-radius: .4rem;
  font-size: .9rem;
}
.lp-lang__code { font-weight: 800; min-width: 1.8rem; color: var(--lp-lang-code, #2c3e50); }
.lp-lang__name { color: var(--lp-lang-name, #6b7680); font-size: .85rem; }
.lp-lang__item.is-current { background: var(--lp-lang-aktiv-bg, #f5f5f5); }
.lp-lang__item.is-current .lp-lang__code { color: #cc9a26; }

/* --- Sprachumschalter in der Schublade (Burger-Menue) ---------------------

   Das Theme klappt dort jedes Untermenue fest auf und stellt es auf dunklen
   Grund um (.dropdown-menu { position: static; background: transparent }).
   Das trifft auch den Sprachumschalter: die Schaltflaeche daneben ist dann
   ueberfluessig, und die hellen Farben von oben ergaben einen weissen Kasten
   mitten im dunklen Menue, mit kaum lesbarer zweiter Zeile.

   Die Farben laufen deshalb ueber Variablen - hier genuegt es, sie
   umzusetzen, statt die Regeln zu wiederholen. Der Zustand tritt in zwei
   Faellen ein: auf schmalen Schirmen und am Schreibtisch nach dem Scrollen. */
@media (max-width: 991.98px) {
  .site-header__nav .lp-lang { --lp-lang-code: rgba(255, 255, 255, .92); --lp-lang-name: rgba(255, 255, 255, .55); --lp-lang-aktiv-bg: transparent; }
}
.site-header.is-scrolled .site-header__nav .lp-lang { --lp-lang-code: rgba(255, 255, 255, .92); --lp-lang-name: rgba(255, 255, 255, .55); --lp-lang-aktiv-bg: transparent; }

@media (max-width: 991.98px) {
  .site-header__nav .lp-lang { display: block; width: 100%; margin: .5rem 0 0; padding-top: .5rem; border-top: 1px solid rgba(255, 255, 255, .08); }
  .site-header__nav .lp-lang__toggle { display: none; }
  .site-header__nav .lp-lang__menu { min-width: 0; padding: 0 0 0 .75rem; border-radius: 0; }
  .site-header__nav .lp-lang__item { padding: .5rem .4rem; border-radius: 0; }
  .site-header__nav .lp-lang__item.is-current .lp-lang__code { color: #f7d337; }
}
.site-header.is-scrolled .site-header__nav .lp-lang { display: block; width: 100%; margin: .5rem 0 0; padding-top: .5rem; border-top: 1px solid rgba(255, 255, 255, .08); }
.site-header.is-scrolled .site-header__nav .lp-lang__toggle { display: none; }
.site-header.is-scrolled .site-header__nav .lp-lang__menu { min-width: 0; padding: 0 0 0 .75rem; border-radius: 0; }
.site-header.is-scrolled .site-header__nav .lp-lang__item { padding: .5rem .4rem; border-radius: 0; }
.site-header.is-scrolled .site-header__nav .lp-lang__item.is-current .lp-lang__code { color: #f7d337; }

/* ---------------------------------------------------------------------------
   "Mitmachen" als Schaltflaeche auch in der franzoesischen Fassung

   Das Theme erkennt die Schaltflaeche an a[href="/mitmachen"]. Unter /fr heisst
   der Link aber /fr/mitmachen, und die goldene Pille fiel dort weg - der
   wichtigste Verweis der Seite sah aus wie gewoehnlicher Text. Die Endung
   genuegt zur Erkennung und traegt jede weitere Sprache mit.
--------------------------------------------------------------------------- */
.site-header__nav a[href$="/mitmachen"] {
  background: #f7d337;
  color: #2c3e50 !important;
  font-weight: 800;
  padding: .5rem 1.2rem;
  border-radius: 50rem;
  transition: background .15s ease, transform .15s ease;
}
.site-header__nav a[href$="/mitmachen"]:hover {
  background: #e3bd1f;
  color: #2c3e50 !important;
  transform: translateY(-1px);
}
@media (max-width: 991.98px) {
  .site-header__nav a[href$="/mitmachen"] {
    display: inline-block;
    margin-top: .75rem;
    text-align: center;
  }
}

/* ---------------------------------------------------------------------------
   Kein Zusammenfalten in der Schublade (Burger-Menue)

   Dort stehen die Untermenues ohnehin dauerhaft offen - eine Faltfunktion hat
   also keinen Zweck, richtete aber Schaden an (siehe unten). Sie wird hier
   still gelegt, statt sie zu reparieren.

   Der Zustand tritt in zwei Faellen ein: auf schmalen Schirmen und am
   Schreibtisch, sobald die Kopfzeile in den gescrollten Zustand wechselt.
--------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  /* Bootstrap positioniert aufgeklappte Untermenues per Popper und schreibt
     dabei "position: absolute" samt transform direkt ins style-Attribut. Das
     schlaegt das "position: static" des Themes, und das Untermenue springt aus
     dem Fluss - es legt sich ueber die Eintraege darunter. Nur !important
     kommt gegen ein style-Attribut an. */
  .site-header__nav .dropdown-menu {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    margin: 0 !important;
  }
  /* Ohne Faltfunktion braucht es auch kein Pfeilchen, das eine verspricht. */
  .site-header__nav .dropdown-toggle::after { display: none !important; }
  /* Beim Antippen blitzte der Bootstrap-Grundton auf; in der Schublade bleibt
     der Grund ruhig, nur die Schrift wechselt. */
  .site-header__nav .dropdown-item:active,
  .site-header__nav .dropdown-item.active {
    background: transparent !important;
    color: #f7d337 !important;
  }
}

.site-header.is-scrolled {
  /* Bootstrap positioniert aufgeklappte Untermenues per Popper und schreibt
     dabei "position: absolute" samt transform direkt ins style-Attribut. Das
     schlaegt das "position: static" des Themes, und das Untermenue springt aus
     dem Fluss - es legt sich ueber die Eintraege darunter. Nur !important
     kommt gegen ein style-Attribut an. */
  .site-header__nav .dropdown-menu {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    margin: 0 !important;
  }
  /* Ohne Faltfunktion braucht es auch kein Pfeilchen, das eine verspricht. */
  .site-header__nav .dropdown-toggle::after { display: none !important; }
  /* Beim Antippen blitzte der Bootstrap-Grundton auf; in der Schublade bleibt
     der Grund ruhig, nur die Schrift wechselt. */
  .site-header__nav .dropdown-item:active,
  .site-header__nav .dropdown-item.active {
    background: transparent !important;
    color: #f7d337 !important;
  }
}

/* Ressourcen: mehr Luft zwischen Vorspann und dem Knopf fuer alle
   Dateien - der Knopf klebte direkt am Text. */
.ressourcen__head .ressourcen__all { margin-top: 1.75rem; }