/*
 Theme Name:   Twenty Seventeen Child
 Theme URI:    https://wordpress.org/themes/twentyseventeen/
 Description:  Child Theme for Twenty Seventeen
 Author:       Jürg
 Template:     twentyseventeen
 Version:      2026.01.23_1711
*/

/* =====================================================
   0) Variablen / Layout  (LANGFRISTIG SAUBER)
   Prinzip:
   - Branding-Höhe & Nav-Höhe werden gemessen
   - Abstand (Gap) ist ein Regler
   - Masthead-Höhe wird berechnet (Branding + Gap + Nav)
   ===================================================== */

:root{
  /* Container */
  --container-width: 900px;

  /* Paddings */
  --pad-mobile: 30px;
  --pad-desktop: 48px;
  --container-pad-left: var(--pad-desktop);
  --container-pad-right: var(--pad-desktop);

  /* Adminbar */
  --adminbar-offset: 0px;

  /* -----------------------------
     A) Branding-Höhe (nur Logo-Bereich)
     = gemessene Höhe des Branding-Containers
     (Logo + Padding oben/unten etc.)
     ----------------------------- */
  --branding-height-mobile: 101.562px;  /* <=480 */
  --branding-height-tablet: 181px;  /* 481–767 */
  --branding-height-desktop: 167px; /* >=768 */

  /* -----------------------------
     B) Nav-Zeile – gemessen
     ----------------------------- */
  --nav-height-mobile: 48px;
  --nav-height-tablet: 48px;
  --nav-height-desktop: 70px;

  /* -----------------------------
     C) Abstand unter Branding (Regler)
     Wichtig: Theme setzt teils inline (site-branding oder custom-header)
     -> wir überschreiben per CSS unten.
     ----------------------------- */
  --header-gap-mobile: 0px;
  --header-gap-tablet: 0px;
  --header-gap-desktop: 0px; /* 0–70px nach Geschmack */

  /* -----------------------------
     D) Masthead gesamt (BERECHNET)
     Branding + Gap + Navigation
     ----------------------------- */
  --masthead-height-mobile:  calc(var(--branding-height-mobile)  + var(--header-gap-mobile)  + var(--nav-height-mobile));
  --masthead-height-tablet:  calc(var(--branding-height-tablet)  + var(--header-gap-tablet)  + var(--nav-height-tablet));
  --masthead-height-desktop: calc(var(--branding-height-desktop) + var(--header-gap-desktop) + var(--nav-height-desktop));

  /* Titel-Luft (für H1/Archiv-Titel) */
  --title-gap-mobile: 2.25rem; /* ~36px */
  --title-gap-desktop: 4rem;   /* ~64px */
}

/* Adminbar Offset (wenn eingeloggt) */
body.admin-bar{ --adminbar-offset: 32px; }
@media (max-width: 782px){
  body.admin-bar{ --adminbar-offset: 46px; }
}

/* =====================================================
   1) Fixed Header: Logo + Navigation
   ===================================================== */

.site-header{
  position: fixed !important;
  top: var(--adminbar-offset);
  left: 0;
  right: 0;
  z-index: 9999 !important;

  background: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Twenty Seventeen Nav-Fixierung neutralisieren */
.site-navigation-fixed .navigation-top{
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
}

.navigation-top{
  position: static !important;
  background: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
}

/* Linien/Trenner entfernen */
.site-header::after,
.navigation-top::after{
  border: none !important;
  box-shadow: none !important;
  background: none !important;
}

/* Branding links */
.site-branding{
  text-align: left !important;
  background: #ffffff !important;
}

.custom-logo-link img.custom-logo,
.custom-logo-link img{
  height: 64px;
  width: auto;
  max-height: none;
  max-width: none;
}

/* =====================================================
   1b) Header-Gap: Theme-Logik vereinheitlichen (alle Seiten)
   - Theme setzt den Abstand teils inline auf .site-branding
   - teils auf .custom-header
   -> Wir überschreiben beides mit unseren Variablen
   ===================================================== */

/* Mobile <=480 */
@media (max-width: 480px){
  .site-branding,
  .custom-header{
    margin-bottom: var(--header-gap-mobile) !important;
  }
}

/* Tablet 481–767 */
@media (min-width: 481px) and (max-width: 767px){
  .site-branding,
  .custom-header{
    margin-bottom: var(--header-gap-tablet) !important;
  }
}

/* Desktop >=768 */
@media (min-width: 768px){
  .site-branding,
  .custom-header{
    margin-bottom: var(--header-gap-desktop) !important;
  }
}

/* =====================================================
   2) Content-Offset: Alles startet unter dem fixed Header
   ===================================================== */

#page{
  padding-top: calc(var(--masthead-height-desktop) + var(--adminbar-offset));
}

/* Theme/Altlasten neutralisieren (damit nichts doppelt offsettet) */
#content.site-content{
  padding-top: 0 !important;
  scroll-margin-top: 0 !important;
}

/* Anker: EIN Mechanismus (scroll-padding-top) */
[id]{ scroll-margin-top: 0 !important; }
html{
  scroll-padding-top: calc(var(--adminbar-offset) + var(--masthead-height-desktop));
}

/* =====================================================
   3) Einheitlicher Container: Logo, Nav, Content, Footer
   ===================================================== */

.site-branding .wrap,
.navigation-top .wrap,
#content > .wrap,
.site-footer .wrap{
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;

  padding-left: var(--container-pad-left);
  padding-right: var(--container-pad-right);

  box-sizing: border-box;
}

/* =====================================================
   4) Breakpoints: Paddings + Header-Offsets + Anker
   ===================================================== */

/* Small Mobile <=480 */
@media (max-width: 480px){
  :root{
    --container-pad-left: var(--pad-mobile);
    --container-pad-right: var(--pad-mobile);
  }

  #page{
    padding-top: calc(var(--masthead-height-mobile) + var(--adminbar-offset));
  }

  html{
    scroll-padding-top: calc(var(--adminbar-offset) + var(--masthead-height-mobile));
  }
}

/* Tablet 481–767 */
@media (min-width: 481px) and (max-width: 767px){
  :root{
    --container-pad-left: var(--pad-mobile);
    --container-pad-right: var(--pad-mobile);
  }

  #page{
    padding-top: calc(var(--masthead-height-tablet) + var(--adminbar-offset));
  }

  html{
    scroll-padding-top: calc(var(--adminbar-offset) + var(--masthead-height-tablet));
  }
}

/* Desktop >=768 */
@media (min-width: 768px){
  :root{
    --container-pad-left: var(--pad-desktop);
    --container-pad-right: var(--pad-desktop);
  }
}

/* =====================================================
   5) Desktop: Navigation-Versatz (-17.5px) sauber fixen
   ===================================================== */

@media (min-width: 768px){

  #site-navigation.main-navigation,
  .navigation-top #site-navigation.main-navigation,
  .navigation-top .main-navigation{
    margin-left: 0 !important;
    left: auto !important;
    right: auto !important;
  }

  .navigation-top #top-menu,
  .navigation-top .main-navigation ul{
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  /* Theme-Abstand beibehalten, aber erster Punkt bündig */
  .navigation-top .main-navigation > div > ul > li > a{
    padding-left: 17.5px !important;
    padding-right: 17.5px !important;
  }
  .navigation-top .main-navigation > div > ul > li:first-child > a{
    padding-left: 0 !important;
  }

  /* Submenus Theme-ähnlich */
  .main-navigation ul ul{ display: none; }
  .main-navigation li:hover > ul,
  .main-navigation li:focus-within > ul{
    display: block;
  }
}

/* =====================================================
   6) Content links bündig (Pages + Home)
   ===================================================== */

@media (min-width: 768px){

  /* Pages */
  body.page #primary.content-area{
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
  }
  body.page .content-area,
  body.page .site-content{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Home / Frontpage */
  body.home #primary.content-area,
  body.twentyseventeen-front-page #primary.content-area{
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
  }
  body.home .content-area,
  body.twentyseventeen-front-page .content-area{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* =====================================================
   7) Titelabstand (Desktop + Mobile/Tablet) inkl. Blog/Archive
   ===================================================== */

/* Desktop */
@media (min-width: 768px){
  body.page .entry-header,
  body.single .entry-header{
    margin-top: var(--title-gap-desktop);
  }

  body.blog .page-header,
  body.archive .page-header{
    margin-top: var(--title-gap-desktop);
  }
}

/* Mobile + Tablet */
@media (max-width: 767px){
  body.page .entry-header,
  body.single .entry-header{
    margin-top: var(--title-gap-mobile);
  }

  body.blog .page-header,
  body.archive .page-header{
    margin-top: var(--title-gap-mobile);
  }
}

/* =====================================================
   8) Mobile/Tablet Menü – Option B (Overlay) + Nav verschwindet (kein Loch)
   ===================================================== */

@media (max-width: 767px){

  /* Button: Text weg, Icon sauber */
  .menu-toggle{
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;

    font-size: 0 !important;
    line-height: 1 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
  .menu-toggle::before{ content: none !important; }

  .menu-toggle .icon{ display: none !important; }
  .menu-toggle[aria-expanded="false"] .icon-bars{ display: inline-block !important; }
  .menu-toggle[aria-expanded="true"]  .icon-close{ display: inline-block !important; }

  .menu-toggle svg{
    width: 24px !important;
    height: 24px !important;
    position: static !important;
    transform: none !important;
  }

  /* Offenes Menü als Overlay (scrollbar) */
  #site-navigation.main-navigation.toggled-on{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    z-index: 99999 !important;
    background: #fff !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;

    padding-left: var(--container-pad-left) !important;
    padding-right: var(--container-pad-right) !important;
    box-sizing: border-box !important;
  }

  /* Innencontainer NICHT scrollen lassen */
  #site-navigation.main-navigation.toggled-on .menu-home-container{
    max-height: none !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* UL folgt dem Overlay */
  #site-navigation.main-navigation.toggled-on ul,
  #site-navigation.main-navigation.toggled-on ul#top-menu{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    left: auto !important;
    right: auto !important;
  }

  /* Etwas Luft unten */
  #site-navigation.main-navigation.toggled-on ul#top-menu{
    padding-bottom: 32px !important;
  }

  /* Nav-Zeile verschwindet bei offenem Menü (kein Loch) */
  .navigation-top:has(#site-navigation.toggled-on){
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }
}

/* Mobile: Overlay startet direkt unter Logo (ersetzt Nav-Zeile) */
@media (max-width: 480px){
  #site-navigation.main-navigation.toggled-on{
    top: calc(var(--adminbar-offset) + var(--branding-height-mobile) - 2px) !important;
  }
}

/* Tablet: Overlay startet direkt unter Logo (ersetzt Nav-Zeile) */
@media (min-width: 481px) and (max-width: 767px){
  #site-navigation.main-navigation.toggled-on{
    top: calc(var(--adminbar-offset) + var(--branding-height-tablet) - 2px) !important;
  }
}

/* =====================================================
   9) Home Panels: bündig + Panel-Spacing
   ===================================================== */

body.home .panel-content .wrap,
body.home .panel-image .wrap{
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;

  padding-left: var(--container-pad-left);
  padding-right: var(--container-pad-right);

  box-sizing: border-box;
}

/* Abstand Panel-Image -> Panel-Content reduzieren */
body.home .panel-content{
  padding-top: 0 !important;
}
body.home .panel-content .wrap{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* =====================================================
   10) Footer: Trennlinie/Schatten entfernen
   ===================================================== */

.site-footer{
  box-shadow: none !important;
  border-top: 0 !important;
}
.site-footer::before,
.site-footer::after{
  box-shadow: none !important;
  border: 0 !important;
  background: none !important;
  content: none !important;
}
.site-content{
  box-shadow: none !important;
  border-bottom: 0 !important;
}

/* =====================================================
    Desktop-Navi darf nicht umbrechen
   ===================================================== */

@media (min-width: 768px){
  .navigation-top .main-navigation > div > ul{
    display: flex !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }
}

/* =====================================================
   FIX: Hamburger / X – keine Ränder, kein Schatten, kein Focus-Ring
   ===================================================== */

/* Grundzustand */
.menu-toggle{
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  background: none !important;
}

/* Hover / Focus / Active – alle Zustände */
.menu-toggle:hover,
.menu-toggle:focus,
.menu-toggle:active,
.menu-toggle:focus-visible{
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  background: none !important;
}

/* Safari / iOS Spezialfall */
.menu-toggle::-moz-focus-inner{
  border: 0 !important;
}

/* =====================================================
   Hamburger-Menü (Mobile/Tablet): Untermenüs einrücken
   ===================================================== */
@media (max-width: 767px){

  /* 2. Ebene (Untermenü) */
  #site-navigation.main-navigation.toggled-on ul.sub-menu > li > a{
    padding-left: 22px !important;
  }

  /* 3. Ebene (Unter-Untermenü) */
  #site-navigation.main-navigation.toggled-on ul.sub-menu ul.sub-menu > li > a{
    padding-left: 34px !important;
  }
}

/* =========================================================
   POLAAR – Desktop Dropdown (Twenty Seventeen)
   Logik:
   - Hover ODER .polaar-open -> sichtbar
   - Klick schliesst mit .polaar-click-closed
   - .focus vom Theme darf NICHT allein öffnen
   ========================================================= */
@media (min-width: 769px) {

  /* ---------- Grundzustand (Theme-kompatibel) ---------- */
  .navigation-top .main-navigation ul ul.sub-menu {
    background: #fff;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;

    max-height: calc(100vh - 320px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* ---------- Sichtbarkeit ---------- */
  .navigation-top .main-navigation li.menu-item-has-children:hover > ul.sub-menu,
  .navigation-top .main-navigation li.menu-item-has-children.polaar-open > ul.sub-menu {
    left: 0;
    right: auto;
  }

  /* ---------- Klick-geschlossen: NICHT wieder öffnen ---------- */
  .navigation-top .main-navigation
  li.menu-item-has-children.polaar-click-closed:hover > ul.sub-menu,
  .navigation-top .main-navigation
  li.menu-item-has-children.polaar-click-closed.focus > ul.sub-menu,
  .navigation-top .main-navigation
  li.menu-item-has-children.polaar-click-closed > ul.sub-menu:hover {
    left: -999em !important;
    right: auto !important;
  }

  /* ---------- Listenelemente ---------- */
  .navigation-top .main-navigation ul ul.sub-menu > li {
    margin: 0;
    padding: 0;
  }

  .navigation-top .main-navigation ul ul.sub-menu > li + li {
    border-top: 1px solid #ededed;
  }

  /* ---------- Links (wie <p>) ---------- */
  .navigation-top .main-navigation ul ul.sub-menu a {
    display: block;
    padding: 6px 16px;
    font-size: 0.875rem;
    line-height: 1.6;
    font-weight: 400;
    color: #111;
    text-decoration: none;
    background: transparent;
    box-shadow: none;
    white-space: normal;
  }

  .navigation-top .main-navigation ul ul.sub-menu a:hover,
  .navigation-top .main-navigation ul ul.sub-menu a:focus {
    background-color: #f2f2f2;
    color: #111;
  }

  /* ---------- Kein Dreieck / Pointer ---------- */
  .navigation-top .main-navigation li.menu-item-has-children > a::before,
  .navigation-top .main-navigation li.menu-item-has-children > a::after,
  .navigation-top .main-navigation li.menu-item-has-children::before,
  .navigation-top .main-navigation li.menu-item-has-children::after,
  .navigation-top .main-navigation ul ul.sub-menu::before,
  .navigation-top .main-navigation ul ul.sub-menu::after {
    content: none !important;
    display: none !important;
  }

  /* ---------- Kein Fokus-Rahmen am Top-Level ---------- */
  .navigation-top .main-navigation > div > ul > li > a:focus,
  .navigation-top .main-navigation > div > ul > li > a:focus-visible {
    outline: none;
    box-shadow: none;
  }

  /* ---------- Aktiver Zustand (wie Theme, dezent grau) ---------- */
  .navigation-top .main-navigation li.menu-item-has-children.polaar-active > a,
  .navigation-top .main-navigation li.current-menu-ancestor > a,
  .navigation-top .main-navigation li.current-menu-parent > a,
  .navigation-top .main-navigation li.current-menu-item > a {
    color: #666;
  }

  /* --- Anti-Theme-Flackern: Theme setzt teils Hintergrund auf LI statt A --- */
  .navigation-top .main-navigation ul ul.sub-menu,
  .navigation-top .main-navigation ul ul.sub-menu li {
    background: #fff !important;
    background-color: #fff !important;
  }

  /* LI soll nie dunkel werden (Theme-hover), nur der Link bekommt hellgrau */
  .navigation-top .main-navigation ul ul.sub-menu li:hover,
  .navigation-top .main-navigation ul ul.sub-menu li:focus,
  .navigation-top .main-navigation ul ul.sub-menu li.focus,
  .navigation-top .main-navigation ul ul.sub-menu li:focus-within {
    background: #fff !important;
    background-color: #fff !important;
  }

  /* Linkfarben hart setzen (auch visited) */
  .navigation-top .main-navigation ul ul.sub-menu a,
  .navigation-top .main-navigation ul ul.sub-menu a:visited {
    color: #111 !important;
    background: transparent !important;
    background-color: transparent !important;
  }

  .navigation-top .main-navigation ul ul.sub-menu a:hover,
  .navigation-top .main-navigation ul ul.sub-menu a:focus {
    background-color: #f2f2f2 !important;
    color: #111 !important;
  }
}