/*
Theme Name: BTZ Möckern
Template: twentytwentyfour
Description: Kind-Theme basierend auf Twenty Twenty-Four für BTZ Möckern
Author: BTZ Möckern
Version: 3.9.1
Text Domain: btz-moeckern
*/

:root {
  --btz-blue-dark:     #1a3a6b;
  --btz-blue-mid:      #1e4fa3;
  --btz-blue-light:    #2e6fd4;
  --btz-white:         #ffffff;
  --btz-header-height: 126px;
  --btz-font:          'Segoe UI', Arial, sans-serif;
}

/* ── BARRIEREFREIHEIT ────────────────────────────────────── */

.btz-skip-link {
  position:   absolute;
  top:        -100px;
  left:       16px;
  z-index:    9999;
  background: var(--btz-blue-dark);
  color:      #ffffff !important;
  font-family: var(--btz-font);
  font-size:  1rem;
  font-weight: 600;
  padding:    12px 20px;
  border-radius: 0 0 6px 6px;
  text-decoration: none;
  transition: top 0.2s;
}
.btz-skip-link:focus {
  top: 0;
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--btz-blue-light) !important;
  outline-offset: 3px !important;
  border-radius: 2px;
}

.btz-nav-link:focus-visible,
.btz-sub-link:focus-visible {
  outline: 3px solid var(--btz-blue-light) !important;
  outline-offset: 2px !important;
  border-radius: 2px;
}

#btz-hamburger:focus-visible {
  outline: 3px solid var(--btz-blue-dark) !important;
  outline-offset: 4px !important;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:   0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  0.01ms !important;
  }
}


/* ── HEADER ─────────────────────────────────────────────── */
.wp-site-blocks > header,
.wp-block-template-part[data-slug="header"] {
  background:  var(--btz-white) !important;
  min-height:  var(--btz-header-height) !important;
  box-shadow:  0 2px 8px rgba(26,58,107,0.10) !important;
  position:    sticky !important;
  top:         0 !important;
  z-index:     1000 !important;
}

/* ── LOGO ────────────────────────────────────────────────── */
.wp-block-site-logo img {
  max-height: 90px !important;
  width: auto !important;
}

/* ── FIRMENNAME ──────────────────────────────────────────── */
.btz-site-title {
  font-family:  var(--btz-font);
  font-size:    1.08rem;
  font-weight:  600;
  color:        var(--btz-blue-dark);
  line-height:  1.45;
  margin-left:  16px;
  min-width:    300px;
  max-width:    360px;
  flex-shrink:  0;
}

/* ── HAMBURGER-BUTTON ────────────────────────────────────── */
.wp-block-navigation__responsive-container-open,
button.wp-block-navigation__responsive-container-open {
  background:       transparent !important;
  border:           none !important;
  padding:          0px !important;
  cursor:           pointer !important;
  display:          flex !important;
  align-items:      center !important;
  justify-content:  center !important;
  line-height:      0 !important;
  position:         relative !important;
  z-index:          1001 !important;
}

.btz-site-header.wp-block-group > div:last-child {
  padding-right: 24px;
}

.wp-block-navigation__responsive-container,
.wp-block-navigation__responsive-container.is-menu-open {
  display:    none !important;
  visibility: hidden !important;
}

/* ── EIGENES BTZ-MENÜ-OVERLAY ────────────────────────────── */
#btz-menu-overlay {
  display:    none;
  position:   fixed;
  left:       0;
  right:      0;
  width:      100vw;
  z-index:    999;
  background: #ffffff;
  border-top: 3px solid #1a3a6b;
  box-shadow: 0 8px 24px rgba(26,58,107,0.18);
  overflow-y: auto;
  overflow-x: hidden;
  animation:  btzSlideDown 0.22s ease;
}

#btz-menu-overlay.btz-open { display: block; }

@keyframes btzSlideDown {
  from { opacity:0; transform:translateY(-8px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── MENÜ-LISTE ──────────────────────────────────────────── */
.btz-nav-list {
  list-style:  none !important;
  margin:      0 !important;
  padding:     32px 48px 48px 48px !important;
  display:     block !important;
}

.btz-nav-item {
  display:      block !important;
  position:     relative !important;
  border-bottom: none !important;
}

/* Flex-Container: Richtet Link und Pfeil linksbündig aus */
.btz-link-row {
  display:         flex !important;
  align-items:     center !important;
  justify-content: flex-start !important;
  width:           100% !important;
}

.btz-nav-link {
  display:         inline-block !important;
  color:           #1a3a6b !important;
  font-family:     var(--btz-font) !important;
  font-size:       1.05rem !important;
  font-weight:     700 !important;
  text-transform:  uppercase !important;
  letter-spacing:  0.08em !important;
  padding:         14px 0 !important;
  text-decoration: none !important;
  transition:      color 0.18s;
}

.btz-nav-link:hover { color: #2e6fd4 !important; }

/* Pfeil-Button */
.btz-sub-toggle {
  background:  transparent !important;
  border:      none !important;
  cursor:      pointer !important;
  padding:     12px !important;
  line-height: 0 !important;
  transition:  transform 0.2s ease;
  margin-left: 25px !important;
  flex-shrink: 0;
}

.btz-nav-item.btz-sub-open > .btz-link-row .btz-sub-toggle {
  transform: rotate(180deg) !important;
}

/* Untermenü-Liste */
.btz-sub-list {
  list-style:     none !important;
  margin:         0 !important;
  padding:        0 0 8px 20px !important;
  display:        none !important;
}

.btz-nav-item.btz-sub-open > .btz-sub-list {
  display:        block !important;
}

.btz-sub-list li {
  display: block !important;
}

.btz-sub-list .btz-nav-link {
  display:         inline-block !important;
  color:           #1e4fa3 !important;
  font-family:     var(--btz-font) !important;
  font-size:       0.95rem !important;
  font-weight:     400 !important;
  text-transform:  none !important;
  letter-spacing:  0.02em !important;
  padding:         9px 0 !important;
  border-bottom:   none !important;
  text-decoration: none !important;
  transition:      color 0.18s;
}

.btz-sub-list .btz-nav-link:hover { color: #2e6fd4 !important; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 768px) {
  :root { 
    --btz-header-height: auto; /* Erlaubt dem Header, sich anzupassen */
  }

  /* Den Header-Container zwingen, ALLES in einer Zeile zu halten */
  .btz-site-header.wp-block-group {
    padding-left: 5px !important;
    padding-right: 5px !important;
    display: flex !important;
    flex-wrap: nowrap !important; /* Verhindert das Rutschen unter das Logo */
    align-items: center !important;
    justify-content: space-between !important;
  }

  /* Sicherstellen, dass die Gruppe mit Logo & Titel nicht umbricht */
  .btz-site-header > div:first-child {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    flex: 1 !important;
    overflow: hidden; /* Sicherheitshalber, damit nichts rausragt */
  }

  /* Logo-Größe optimieren */
  .wp-block-site-logo {
    margin-left: 0 !important;
    flex-shrink: 0 !important; /* Logo darf nicht gestaucht werden */
  }
  .wp-block-site-logo img { 
    max-height: 50px !important; 
    width: auto !important;
  }

  /* Firmenname: Das 'min-width' war das Problem */
  .btz-site-title {
    font-size: 0.75rem !important; /* Etwas kleiner für schmale Handys */
    margin-left: 10px !important;
    min-width: 0 !important; /* Wichtig: Verhindert das Wegschieben */
    max-width: none !important;
    line-height: 1.2 !important;
    flex-shrink: 1 !important; /* Text darf kleiner werden, wenn Platz fehlt */
  }

  /* Hamburger-Button ganz rechts halten */
  #btz-hamburger {
    margin-left: auto !important;
    flex-shrink: 0 !important;
  }

  /* Abstand im Menü-Overlay */
  .btz-nav-list {
    padding: 20px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   HERO-BEREICH
   ═══════════════════════════════════════════════════════════ */

.btz-hero.wp-block-cover {
  position:   relative !important;
  overflow:   hidden !important;
  margin-top: 0 !important;
  min-height: 520px;
}

.btz-hero .wp-block-cover__background {
  display: none !important;
}

.btz-hero .wp-block-cover__image-background {
  object-fit:      cover !important;
  object-position: center center !important;
  width:  100% !important;
  height: 100% !important;
}

.btz-hero-stripe {
  position:        absolute;
  inset:           0;
  z-index:         1;
  pointer-events:  none;
  overflow:        hidden;
  will-change:     transform;
  transform-origin: left center;
}


.btz-hero-stripe::before {
  content:  '';
  position: absolute;
  top:    -200%;
  bottom: -200%;
  left:   -6%;
  width:   340%;
  background: rgba(30, 79, 163, 0.85);
  transform:  skewX(-10deg);
  transform-origin: center center;
}

.btz-hero-stripe::after {
  content:  '';
  position: absolute;
  top:    -200%;
  bottom: -200%;
  left:   74%;
  width:   48%;
  background: rgba(26, 58, 107, 0.55);
  transform:  skewX( -1deg);
  transform-origin: center center;
}

.btz-hero-content {
  position: relative !important;
  z-index:  2 !important;
}

.btz-hero-btn .wp-block-button__link:hover {
  background-color: #d0dff2 !important;
  color: #1a3a6b !important;
  transition: background 0.2s, color 0.2s;
}

@media (max-width: 768px) {
  .btz-hero.wp-block-cover {
    min-height: 380px !important;
  }
  .btz-hero-content {
    padding: 48px 24px !important;
  }
  .btz-hero-headline {
    font-size: 1.8rem !important;
  }
}


/* ── FOOTER (TT4-Block) ──────────────────────────────────── */
.wp-block-template-part[data-slug="footer"] a {
  color:           #1a3a6b !important;
  text-decoration: none !important;
}

.wp-block-template-part[data-slug="footer"] a:hover {
  color:           #2e6fd4 !important;
  text-decoration: underline !important;
}


/* ── CONTENT-BEREICH ─────────────────────────────────────── */
.has-btz-gray-light-background-color {
  background-color: #ffffff !important;
}


/* ── RESPONSIVE IFRAMES (YouTube) ───────────────────────── */
.entry-content iframe {
  width:        100% !important;
  height:       auto !important;
  aspect-ratio: 16 / 9 !important;
  max-width:    100% !important;
  display:      block !important;
}

/* ── HERO-PFEIL ──────────────────────────────────────────── */
.btz-hero-arrow {
  position:         absolute;
  bottom:           -25px;
  left:             50%;
  transform:        translateX(-50%);
  z-index:          4;
  background:       transparent;
  border:           none;
  width:            96px;
  height:           96px;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  cursor:           pointer;
}

.btz-hero-arrow:hover svg {
  stroke:           rgba(255,255,255,0.7);
}

/* ── MENSA SPEISEPLAN (BTZ Lehrgangsverwaltung Plugin) ───── */
table.tabrand {
  width:           100% !important;
  border-collapse: collapse !important;
  font-family:     var(--btz-font) !important;
  margin-top:      16px !important;
}

td.tabrand {
  background-color: #dde6f0 !important;
  color:            var(--btz-blue-dark) !important;
  padding:          10px 16px !important;
  font-weight:      700 !important;
}

td.taborand {
  padding:          10px 16px !important;
  border-bottom:    1px solid #dde6f0 !important;
  color:            var(--btz-blue-dark) !important;
  line-height:      1.5 !important;
}

td.taborand:last-child {
  text-align:  right !important;
  white-space: nowrap !important;
  font-weight: 600 !important;
  width:       80px !important;
}