/*
Theme Name: Twenty Twenty-Five Child
Theme URI: https://neu.iwwit.de/
Description: Child Theme fuer Twenty Twenty-Five
Author: IWWIT
Author URI: https://neu.iwwit.de/
Template: twentytwentyfive
Version: 1.0.0
Text Domain: twentytwentyfive-child
*/

/*
  ========================================
  Lokale Schrift: Barlow Semi Condensed
  ========================================

  Quelle:
  /wp-content/themes/twentytwentyfive-child/assets/fonts/

  Wichtig:
  Diese Schrift wird direkt aus dem Child-Theme geladen.
  Wenn WordPress dieselbe Schrift zusätzlich aus /uploads/fonts/ lädt,
  sollte diese doppelte Einbindung später entfernt werden.
*/

@font-face {
  font-family: 'Barlow Semi Condensed';
  src: url('/wp-content/themes/twentytwentyfive-child/assets/fonts/barlow-semi-condensed-v16-latin-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Barlow Semi Condensed';
  src: url('/wp-content/themes/twentytwentyfive-child/assets/fonts/barlow-semi-condensed-v16-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Barlow Semi Condensed';
  src: url('/wp-content/themes/twentytwentyfive-child/assets/fonts/barlow-semi-condensed-v16-latin-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/*
  ========================================
  Globale Schrift
  ========================================

  Die Website nutzt jetzt direkt die lokal eingebundene Schrift.
*/

:root {
  --font-family: 'Barlow Semi Condensed', Arial, sans-serif;
}

/* Grundschrift der Website */
html,
body,
.wp-site-blocks {
  font-family: var(--font-family) !important;
}

/*
  ========================================
  Header Basis
  ========================================

  Ziel:
  - Header im Standardmodus weiss halten
  - Sticky beim Scrollen
  - Keine unerwuenschten WP-Rahmen oder Boxen
*/

header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: #ffffff !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

header.wp-block-template-part .wp-block-group,
header.wp-block-template-part .wp-block-navigation {
  background: #ffffff !important;
}

/*
  ========================================
  Logo
  ========================================

  Ziel:
  - Logo kleiner und sauber im Header ausrichten
*/

header.wp-block-template-part .wp-block-site-logo {
  margin: 0 !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

header.wp-block-template-part .wp-block-site-logo img,
header.wp-block-template-part .custom-logo,
header.wp-block-template-part img.custom-logo {
  max-height: 44px !important;
  width: auto !important;
  display: block;
}

/*
  ========================================
  Navigation Links
  ========================================

  Ziel:
  - Menuetext dunkel
  - Keine dicken WP-Rahmen
  - Unterstrich als dezenter Hover-Effekt
*/

header.wp-block-template-part .wp-block-navigation-item__content,
header.wp-block-template-part .wp-block-navigation-item__content:link,
header.wp-block-template-part .wp-block-navigation-item__content:visited {
  position: relative;
  color: #222222 !important;
  text-decoration: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

header.wp-block-template-part .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.2s ease;
}

header.wp-block-template-part .wp-block-navigation-item__content:hover::after,
header.wp-block-template-part .wp-block-navigation-item__content:focus::after,
header.wp-block-template-part .wp-block-navigation-item__content:focus-visible::after {
  transform: scaleX(1);
}

header.wp-block-template-part .wp-block-navigation-item__content:hover,
header.wp-block-template-part .wp-block-navigation-item__content:focus,
header.wp-block-template-part .wp-block-navigation-item__content:active,
header.wp-block-template-part .wp-block-navigation-item__content:focus-visible {
  color: #222222 !important;
  text-decoration: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/*
  Aktive Menuepunkte koennen dauerhaft unterstrichen bleiben.
*/

header.wp-block-template-part .current-menu-item > a,
header.wp-block-template-part .current_page_item > a,
header.wp-block-template-part .current-menu-ancestor > a {
  color: #222222 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

header.wp-block-template-part .current-menu-item > a::after,
header.wp-block-template-part .current_page_item > a::after,
header.wp-block-template-part .current-menu-ancestor > a::after {
  transform: scaleX(1);
}

/*
  ========================================
  Desktop-Untermenues
  ========================================

  Ziel:
  - Dropdowns kompakter machen
  - Innenabstaende reduzieren
  - Hover im Dropdown feiner halten

  Hinweis:
  Diese Regeln betreffen nur die normale Navigation.
  Mobile Untermenue-Logik greifen wir hier bewusst nicht an.
*/

header.wp-block-template-part .wp-block-navigation__submenu-container {
  min-width: 220px !important;
  padding: 8px 0 !important;
}

header.wp-block-template-part .wp-block-navigation__submenu-container .wp-block-navigation-item {
  margin: 0 !important;
  padding: 0 !important;
}

header.wp-block-template-part .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: block;
  padding: 7px 18px !important;
  font-size: 0.95rem !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
}

header.wp-block-template-part .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
  bottom: -2px !important;
  height: 1px !important;
}

/*
  ========================================
  Mobile Menue-Buttons
  ========================================

  Ziel:
  - Burger / Schliessen ohne Fokusrahmen
  - Keine stoerenden Boxen oder Hover-Flaechen

  Wichtig:
  Die eigentliche mobile Navigation und Untermenue-Logik
  wird jetzt wieder WordPress ueberlassen.
*/

header.wp-block-template-part .wp-block-navigation__responsive-container-open,
header.wp-block-template-part .wp-block-navigation__responsive-container-close,
header.wp-block-template-part .wp-block-navigation__responsive-container-open:hover,
header.wp-block-template-part .wp-block-navigation__responsive-container-close:hover,
header.wp-block-template-part .wp-block-navigation__responsive-container-open:focus,
header.wp-block-template-part .wp-block-navigation__responsive-container-close:focus,
header.wp-block-template-part .wp-block-navigation__responsive-container-open:focus-visible,
header.wp-block-template-part .wp-block-navigation__responsive-container-close:focus-visible {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/*
  ========================================
  Darkmode Toggle im Header
  ========================================

  Ziel:
  - kompakter Toggle
  - kein Hover-Effekt
  - kein Klick-/Focus-Rahmen
*/

header.wp-block-template-part .pcdark-mode-toggle {
  width: 50px !important;
  height: 30px !important;
  min-width: 50px !important;
  margin-right: 12px !important;
}

header.wp-block-template-part .pcdark-mode-toggle__track {
  width: 40px !important;
  height: 22px !important;
}

header.wp-block-template-part .pcdark-mode-toggle__thumb {
  top: 2px !important;
  left: 2px !important;
  width: 18px !important;
  height: 18px !important;
  box-shadow: none !important;
}

header.wp-block-template-part .pcdark-mode-toggle__thumb::before {
  inset: 4px !important;
}

header.wp-block-template-part .pcdark-mode-toggle,
header.wp-block-template-part .pcdark-mode-toggle:hover,
header.wp-block-template-part .pcdark-mode-toggle:focus,
header.wp-block-template-part .pcdark-mode-toggle:active,
header.wp-block-template-part .pcdark-mode-toggle:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  border-color: #222222 !important;
  transform: none !important;
}

header.wp-block-template-part .pcdark-mode-toggle::-moz-focus-inner {
  border: 0;
}

header.wp-block-template-part .pcdark-mode-toggle__track,
header.wp-block-template-part .pcdark-mode-toggle__thumb {
  box-shadow: none !important;
}

/*
  ========================================
  Header-Rechte Seite enger machen
  ========================================

  Ziel:
  - Abstand zwischen Navigation, Burger und Toggle reduzieren
  - unnoetiges Innenpadding der rechten Wrapper entfernen
*/

header.wp-block-template-part .wp-block-columns {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
  gap: 10px !important;
}

header.wp-block-template-part .wp-block-column {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
}

/*
  Falls der rechte Header-Wrapper vom Block-Theme
  ueber globale Spacing-Variablen aufgeblasen wird.
*/

header.wp-block-template-part .is-content-justification-right {
  padding-left: 0 !important;
  padding-right: 0 !important;
  gap: 10px !important;
}

/*
  ========================================
  Untermenue-Klickflaeche kleiner machen
  ========================================

  Ziel:
  - die grosse pinke Flaeche verkleinern
  - Unterseiten enger und kompakter machen
*/

header.wp-block-template-part .wp-block-navigation__submenu-container {
  min-width: 180px !important;
  padding: 4px 0 !important;
}

header.wp-block-template-part .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: 4px 10px !important;
  font-size: 0.92rem !important;
  line-height: 1.1 !important;
}

/*
  ========================================
  Font-Fix: Barlow global erzwingen
  ========================================

  Wichtig:
  Dieser Block steht bewusst ganz am Ende.
  Er überschreibt Theme-/WordPress-Regeln, die sonst Times oder Arial setzen.
*/

:root {
  --font-family: 'Barlow Semi Condensed', Arial, sans-serif !important;
}

/* Grundschrift */
html,
body,
.wp-site-blocks {
  font-family: var(--font-family) !important;
}

/* Normale Texte, Links, Listen, Buttons und Formulare */
body,
body p,
body a,
body li,
body span,
body strong,
body em,
body small,
body label,
body figcaption,
body blockquote,
body cite,
body button,
body input,
body textarea,
body select {
  font-family: var(--font-family) !important;
}

/* WordPress-Blöcke */
body .wp-block,
body .wp-block-group,
body .wp-block-column,
body .wp-block-columns,
body .wp-block-heading,
body .wp-block-paragraph,
body .wp-block-navigation,
body .wp-block-navigation-item__content,
body .wp-block-button__link {
  font-family: var(--font-family) !important;
}

/* Überschriften extra stark überschreiben */
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body .has-heading-font-family,
body .has-body-font-family {
  font-family: var(--font-family) !important;
}

/* Beiträge, Karten und Query-Loop */
body .wp-block-post,
body .wp-block-post *,
body .wp-block-query,
body .wp-block-query *,
body article,
body article * {
  font-family: var(--font-family) !important;
}


/*
  ========================================
  Globaler Hintergrund-Fix
  ========================================

  Ziel:
  - Normalmodus wirklich weiss
  - Dark Mode weiterhin dunkel
  - leicht grauer Hintergrund verschwindet
*/

:root {
  --bg-color: #ffffff !important;
}

body {
  background: var(--bg-color) !important;
}

body:not(.pcdark-mode),
html:not(.pcdark-mode) body:not(.pcdark-mode),
body:not(.pcdark-mode) .wp-site-blocks,
body:not(.pcdark-mode) main,
body:not(.pcdark-mode) .wp-block-post-content {
  background-color: #ffffff !important;
}

body.pcdark-mode,
html.pcdark-mode body {
  --bg-color: #000000 !important;
  background-color: #000000 !important;
}

body.pcdark-mode .wp-site-blocks,
html.pcdark-mode body .wp-site-blocks,
body.pcdark-mode main,
html.pcdark-mode body main,
body.pcdark-mode .wp-block-post-content,
html.pcdark-mode body .wp-block-post-content {
  background-color: #000000 !important;
}