/**
 * Boho Custom Styles
 * Version: 1.0.0
 * 
 * Custom CSS für Boho WordPress Theme
 */

/* ===========================
   Topbar Styles
   =========================== */
.topbar a {
  text-decoration: none !important;
}

/* ===========================
   Footer Styles
   =========================== */
.zahlungsarten-footer {
  filter: brightness(0) invert(1);
}

.footer-list {
  padding-left: 0;
}

.footer-list li {
  list-style-type: none;
  margin-bottom: 5px;
}

.footer-list li a {
  text-decoration: none !important;
}

.footer-list li a:hover {
  color: #f19712;
}

.footer-column-content-inner a {
  margin-right: 10px;
}

.versandmethoden i {
  font-size: 60px;
  margin-right: 10px;
}

/* ===========================
   Blog Detail Styles
   =========================== */
.blog-detail-post-thumbnail {
  position: relative;
  top: -20px;
  max-height: 400px;
  overflow: hidden;
}

.blog-detail-post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.blog-single-content {
  position: relative;
  z-index: 10;
  top: -150px;
}

/* ===========================
   Mobile Navigation
   =========================== */
@media (max-width: 1400px) {
  .mobile-d-none {
    display: none !important;
  }

  /* Normales Menü ausblenden, Burger anzeigen */
  .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }

  .wp-block-navigation__responsive-container-open,
  .wp-block-navigation__responsive-container-close {
    display: block !important;
    margin-left: auto; /* Burger rechtsbündig */
  }

  /* Container-Styling beim geöffneten Menü */
  .wp-block-navigation__responsive-container {
    flex-direction: column;
    align-items: flex-end; /* Menü rechts ausrichten */
    text-align: right;
  }

  /* Menüelemente im geöffneten Menü rechtsbündig */
  .wp-block-navigation__container {
    align-items: flex-end;
  }

  /* Ganzen Navigation-Block nach rechts schieben */
  .wp-block-navigation {
    margin-left: auto;
  }

    /* Falls der Header Flex verwendet: Abstand ausgleichen */
    .wp-block-group.is-layout-flex {
        justify-content: space-between;
    }
}

/* ===========================
   Footer Grid Layout
   =========================== */
/* Nur für diesen Block: 4 → 2/2 → 1/1/1/1 */
.wp-block-columns.footer-four-rows {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4 Spalten */
  gap: var(--wp--style--block-gap, 1.5rem);
}

/* Grid-Items dürfen sich normal verhalten – Flex von WP überschreiben */
.wp-block-columns.footer-four-rows > .wp-block-column {
  /* Wichtig: Flex-Eigenschaften neutralisieren, sonst mischt sich WP ein */
  flex: initial !important;
  width: auto !important;
  min-width: 0;
  margin: 0; /* alte Columns-Margins aushebeln */
}

/* Früherer Umbruch: 2 / 2 */
@media (max-width: 1100px) {
  .wp-block-columns.footer-four-rows {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobiles Layout: 1 / 1 / 1 / 1 */
@media (max-width: 700px) {
  .wp-block-columns.footer-four-rows {
    grid-template-columns: 1fr;
  }
}

/* ===========================
   Post Template Grid (3 Columns)
   =========================== */
/* Basis: 3 Spalten */
ul.wp-block-post-template.columns-3.is-layout-grid {
  display: grid; /* falls das Theme hier flex nutzt */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wp--style--block-gap, 1.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* früherer Umbruch auf 2 Spalten */
@media (max-width: 1100px) {
  ul.wp-block-post-template.columns-3.is-layout-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* mobil: 1 Spalte */
@media (max-width: 700px) {
  ul.wp-block-post-template.columns-3.is-layout-grid {
    grid-template-columns: 1fr;
  }
}

/* Karten in gleicher Höhe & sauberes Innenlayout */
ul.wp-block-post-template.columns-3.is-layout-grid > li.wp-block-post {
  display: block; /* sicheres Default */
}

ul.wp-block-post-template.columns-3.is-layout-grid > li .wp-block-group.is-layout-flow {
  display: flex;
  flex-direction: column;
  height: 100%;
}

ul.wp-block-post-template.columns-3.is-layout-grid figure.wp-block-post-featured-image {
  margin: 0 0 .75rem 0; /* enger, je nach Geschmack */
}

ul.wp-block-post-template.columns-3.is-layout-grid .wp-block-post-excerpt {
  margin-top: .25rem;
}

ul.wp-block-post-template.columns-3.is-layout-grid .wp-block-post-date {
  margin-top: auto; /* Datum ans Kartenende drücken */
  opacity: .85;
  font-size: .95em;
}