/*
Theme Name: ITZ Minimal
Author: ITZ
Version: 1.0.0
Text Domain: itz-minimal
*/

/* =========================================
   1) Buttons – seriös, outline, keine Pills
   ========================================= */
.wp-block-button .wp-block-button__link {
  border-radius: 0 !important;
  background: transparent !important;
  color: #111 !important;
  border: 1px solid #111 !important;
}

/* Optional: Hover (wenn du es minimal “klickiger” willst) */
.wp-block-button .wp-block-button__link:hover {
  opacity: 0.85;
}

/* =========================================
   2) Sticky Footer – minimal & robust
   ========================================= */
html,
body {
  height: 100%;
}

.wp-site-blocks {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.wp-site-blocks > main {
  flex: 1 0 auto;
}

/* =========================================
   3) Global-Styles-Override nur für Header/Footer
   (WP setzt .wp-block-group global mit margin/padding)
   ========================================= */
.wp-site-blocks > .wp-block-template-part header.wp-block-group,
.wp-site-blocks > .wp-block-template-part footer.wp-block-group {
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* =========================================
   4) Header – wie gewünscht:
      Logo+Titel oben, Navigation darunter rechts
   ========================================= */

/* Header auf Inhaltsbreite (wie Content/Wide) begrenzen */
.wp-site-blocks > .wp-block-template-part header.wp-block-group {
  max-width: var(--wp--style--global--wide-size, 1000px);
  margin-left: auto !important;
  margin-right: auto !important;

  padding-top: 24px !important;
  padding-bottom: 18px !important;
  padding-left: clamp(16px, 4vw, 38px);
  padding-right: clamp(16px, 4vw, 38px);

  /* Wichtig: Header-Kinder untereinander */
  display: block !important;
}

/* Linker Block (Logo+Titel) nicht durch WP-Abstände “aufblasen” */
.wp-site-blocks > .wp-block-template-part header.wp-block-group > .wp-block-group {
  margin-top: 0 !important;
}

/* Navigation: zweite Zeile, volle Breite, rechtsbündig */
.wp-site-blocks > .wp-block-template-part header.wp-block-group > nav.wp-block-navigation {
  width: 100% !important;
  margin-top: 10px;
  justify-content: flex-end !important;
}

/* UL/Container in der Navigation ebenfalls rechtsbündig */
.wp-site-blocks > .wp-block-template-part header.wp-block-group
  > nav.wp-block-navigation .wp-block-navigation__container {
  width: 100% !important;
  display: flex !important;
  justify-content: flex-end !important;
}

/* Abstand unter dem Header (zum Content) */
.wp-site-blocks > .wp-block-template-part header.wp-block-group {
  margin-bottom: 40px;
}

/* =========================================
   5) Footer – clean, ohne Trennbalken
   ========================================= */
.wp-site-blocks > .wp-block-template-part footer.wp-block-group {
  max-width: var(--wp--style--global--wide-size, 1000px);
  margin-left: auto !important;
  margin-right: auto !important;

  padding-top: 28px !important;
  padding-bottom: 28px !important;
  padding-left: clamp(16px, 4vw, 38px);
  padding-right: clamp(16px, 4vw, 38px);

  border-top: 0 !important; /* entfernt den Balken */
  font-size: 14px;
}

/* Weniger Abstand direkt unter dem Header (Main-Wrapper) */
.wp-site-blocks > main.wp-block-group {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Falls auf der Startseite oben ein Spacer steckt: kleiner machen */
.home .entry-content > .wp-block-spacer:first-child {
  height: 20px !important; /* hier nach Geschmack: 0 / 12 / 20 / 28 */
}

/* =========================
   MOBILE OPTIMIERUNG (global)
   ========================= */

/* 1) Einheitliche Seitenränder auf mobilen Geräten */
:root{
  --itz-pad: clamp(16px, 4vw, 28px);
}

.wp-site-blocks > main.wp-block-group,
.wp-site-blocks > .wp-block-template-part header.wp-block-group,
.wp-site-blocks > .wp-block-template-part footer.wp-block-group{
  padding-left: var(--itz-pad) !important;
  padding-right: var(--itz-pad) !important;
}

/* 2) Content nie "an den Rand kleben" – auch wenn max-width greift */
.wp-site-blocks > main.wp-block-group > :where(.entry-content){
  margin-left: auto;
  margin-right: auto;
}

/* 3) Header: mobile sauber stapeln (Logo+Titel oben, Nav darunter) */
@media (max-width: 781px){

  /* Header generell: untereinander */
  .wp-site-blocks > .wp-block-template-part header.wp-block-group{
    display: block !important;
    padding-top: 16px !important;
    padding-bottom: 12px !important;
  }

  /* Logo+Titel-Gruppe: etwas Luft */
  .wp-site-blocks > .wp-block-template-part header.wp-block-group
    > .wp-block-group:first-child{
    margin: 0 !important;
    gap: 12px;
  }

  /* Titel: kleiner, besserer Umbruch, weniger "Zerfaserung" */
  .wp-block-site-title{
    font-size: 20px !important;     /* testweise 18–22 */
    line-height: 1.15 !important;
    max-width: 22ch;                /* verhindert endlos breite Zeile */
  }

  /* Navigation: volle Breite, rechtsbündig, bricht sauber um */
  .wp-block-template-part header.wp-block-group > nav.wp-block-navigation{
    width: 100% !important;
    margin-top: 10px !important;
    justify-content: flex-end !important;
  }
  .wp-block-template-part header.wp-block-group > nav.wp-block-navigation
    .wp-block-navigation__container{
    width: 100% !important;
    display: flex !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 10px 14px;                 /* Zeilen-/Spaltenabstand */
  }

  /* 4) Content: angenehmere Lesbarkeit */
  .wp-site-blocks{
    font-size: 16px;
  }
  h1{ font-size: 28px; }
  h2{ font-size: 24px; }
  h3{ font-size: 20px; }

  /* 5) Spalten auf Mobil untereinander + weniger Abstand */
  .wp-block-columns{
    gap: 20px !important;
  }

  /* 6) Buttons: volle Breite möglich / bessere Tap-Fläche */
  .wp-block-button .wp-block-button__link{
    padding: 12px 16px !important;
  }
}

/* 7) iOS/Safari: verhindert horizontales "Wackeln" durch lange Wörter */
html, body{
  overflow-x: hidden;
}

/* =========================
   MOBILE NAV: alles sichtbar (Wrap)
   ========================= */
@media (max-width: 600px) {

  /* Nav darf NICHT scrollen/abschneiden */
  .wp-block-template-part header.wp-block-group > nav.wp-block-navigation{
    overflow: visible !important;
  }

  /* UL darf umbrechen und bleibt sauber linksbündig */
  .wp-block-template-part header.wp-block-group > nav.wp-block-navigation .wp-block-navigation__container{
    flex-wrap: wrap !important;
    white-space: normal !important;
    justify-content: flex-start !important; /* wichtig gegen "Kontakt allein rechts" */
    row-gap: 10px;
    column-gap: 18px;
  }

  /* Optional: etwas kompakter auf sehr kleinen Screens */
  .wp-block-template-part header.wp-block-group > nav.wp-block-navigation .wp-block-navigation-item__content{
    padding: 6px 0;
    font-size: 14px;
  }
}