/* ------------------------------------------------------------------
 * FCSG Vorkaufsrecht – minimale Overrides für fehlende Shopify-Regeln
 * die im gebundelten base.css nicht enthalten sind (das live-Theme
 * erbt sie aus global-ul-Resets). Nur so viel wie nötig, um die
 * Header- und Footer-Struktur sauber darzustellen.
 * ------------------------------------------------------------------ */

/* ==================================================================
 * SCHRIFTGRÖSSEN-SYSTEM (1:1 aus dem Live-Theme übernommen)
 * Das Live-Theme definiert --root-font-size pro Breakpoint und setzt
 * html { font-size: var(--root-font-size) } – alle rem-Werte im Theme
 * sind relativ dazu kalkuliert.
 * ================================================================== */
:root {
  /* Überschriften */
  --font-size-h1: 3rem;
  --font-size-h2: 2.5rem;
  --font-size-h3: 2rem;
  --font-size-h4: 1.75rem;
  --font-size-h5: 1.45rem;
  --font-size-h6: 1.2rem;

  /* Body / Buttons / Matches */
  --body-font-size: 1rem;
  --line-spacing-body: 1.353rem;
  --btn-font-size: 1.143rem;
  --line-spacing-btn: 1.524rem;
  --match-font-size: 1.143rem;
  --line-spacing-match: 1.524rem;

  /* Zeilenhöhen Überschriften */
  --line-spacing-h1: 2.6rem;
  --line-spacing-h2: 2.5rem;
  --line-spacing-h3: 2rem;
  --line-spacing-h4: 1.75rem;
  --line-spacing-h5: 1.45rem;
  --line-spacing-h6: 1.2rem;

  /* Basis-Schriftgrösse (html-Element) + weitere Font-Helpers */
  --root-font-size: 16px;        /* Mobile  ≤ 767px  */
  --footer-font-size: 1.3125rem;
  --font-size-24: 1.25rem;
  --base-font-size: 1rem;
  --base2-font-size: 1.5rem;

  @media (min-width: 768px) {
    --root-font-size: 18px;
    --footer-font-size: 1.166666rem;
    --font-size-24: 1.333333rem;
    --base-font-size: 0.889rem;
    --base2-font-size: 1.333rem;
  }

  @media (min-width: 1024px) {
    --root-font-size: 18px;
    --footer-font-size: 1.105265rem;
    --font-size-24: 1.26316rem;
    --base-font-size: 0.889rem;
    --base2-font-size: 1.333rem;
  }

  @media (min-width: 1536px) {
    --root-font-size: 21px;
    --footer-font-size: 1rem;
    --font-size-24: 1.142856rem;
    --base-font-size: 0.762rem;
    --base2-font-size: 1.143rem;
  }
}

/* html-Element bekommt den root-font-size als Basis (= 1rem-Referenz) */
html {
  font-size: var(--root-font-size);
}

/* Die Inline-Menu-UL muss horizontal gelayoutet sein (live ist sie flex
 * durch eine zusätzliche Regel, die in unserem CSS-Subset fehlt). */
.header__inline-menu > .list-menu,
.header__inline-menu > ul.list-menu,
.list-menu.list-menu--inline {
  display: flex !important;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;
  align-items: center;
}

/* Footer-Block-Listen zurücksetzen */
.footer-block__details-content,
.list-social,
.sub-navigation,
.footer_link_wrapper ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Footer-Akkordeon auf Mobile: Block-Inhalt ausgeblendet, solange das
 * zugehörige h2 nicht `.active` ist. Der Klick-Handler, der die Klasse
 * toggelt, steckt in components/FooterAccordion.tsx. */
@media screen and (max-width: 749px) {
  .footer-section .footer-block--menu .footer-block__heading {
    cursor: pointer;
    user-select: none;
  }
  .footer-section .footer-block--menu .footer-block__heading:not(.active) + .footer_link_wrapper {
    display: none;
  }
}

/* Auf dem Live-Theme wird <main> nicht von Shopify gestylt – unsere
 * Vorkaufsrecht-Form soll zwischen Header und Footer stehen bleiben. */
main.fcsg-main-content {
  display: block;
}

/* Sticky-Header-Component ohne JS – als normales Element rendern */
sticky-header {
  display: block;
}

/* Hauptnavi-Items vertikal zentrieren. Das Live-Theme nutzt dafür eine
 * Regel aus dem globalen Reset-Set, die in unserem CSS-Subset fehlt.
 * `.header__menu-item` hat im Theme `padding: 0 10px` (keine vertikale
 * Polsterung) und würde sonst oben am 78px-Kästchen kleben. */
.header--middle-left .header__inline-menu > .list-menu > li {
  display: flex;
  align-items: center;
}
.header--middle-left .header__inline-menu > .list-menu .header__menu-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* Nav-Horizontalposition: Das Live-Theme hat im header__icons-Div
 * zusätzlich den Warenkorb (width:50px). Da wir ihn entfernt haben,
 * ist das Div 50px schmaler → die Flex-Auto-Margins verteilen mehr
 * freien Raum → Nav rutscht ~25px zu weit nach rechts.
 * min-width kompensiert den fehlenden Platz, damit die Nav-Position
 * 1:1 mit dem Live-Theme übereinstimmt. */
.header--middle-left .header__icons {
  min-width: 150px;
}

/* Mobile: Logo horizontal zentrieren wie auf fcsg.ch.
 * Der Header ist auf Mobile ein FLEX-Container (`.header--middle-left`
 * hat `display:flex; flex-flow:wrap`) – grid-Properties (`grid-area`,
 * `justify-self`) bringen hier nichts. Das h1 hat standardmäßig nur
 * seine natürliche Content-Breite (≈ Logo-Grösse), wodurch das Logo
 * bloß links am Rand klebt.
 *
 * Fix: h1 nimmt auf Mobile eine volle Flex-Row ein (`flex-basis:100%`),
 * dann zentriert das bereits im Basis-Theme gesetzte
 * `justify-content:center` das Logo horizontal. */
@media screen and (max-width: 989px) {
  .header--middle-left .header__heading {
    flex: 1 0 100%;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}