/* CSS for custom (Overrides) */

/* IM NORMALEN LAYOUT AUSBLENDEN */
body.single-post .wp-block-post-featured-image {
    display: none !important;
}


.category-rezepte .wp-block-post-title,
.category-gartenjahr .wp-block-post-title,
.category-berichte .wp-block-post-title {
    min-height: 3.2em;
    display: flex;
    align-items: flex-end;
}

.category-rezepte .wp-block-post-title a,
.category-gartenjahr .wp-block-post-title a,
.category-berichte .wp-block-post-title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ------------------ */
/* Einzelbeitrag:Gartenjahr */
/* ------------------ */
/* Pfeile nur in diesem Template, innerhalb des main-Blocks */
main .custom-nav-prev a::before {
    content: "« ";
    color: black;
}

main .custom-nav-next a::after {
    content: " »";
    color: black;
}

/* ------------------ */
/* ----Sticky Notes------ */
/* ------------------ */
/* Desktop: Sticky Note bleibt fixed */
.sticky-note-fixed {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 9999;
}

/* Mobile: Sticky Note direkt im Content anzeigen */
@media (max-width: 768px) {
  .sticky-note-fixed {
    position: static !important;
    width: auto;
    max-width: 100%;
    margin: 20px auto;
    z-index: auto;
  }
}

/* Seite mit Slug "home" 15 */
.page-id-15 .sticky-note-fixed.weihnachten-oster {
    background-color: #b1d696 !important;
}

.page-id-15 
.wp-block-create-block-animated-sticky-note-block:not(.weihnachten-oster) a {
    color: #69a243;
}


/* ------------------ */
/* -Info Details----- */
/* ------------------ */
    details summary {
        position: relative;
        padding: 12px 20px;
        font-size: 1.5rem;
        font-weight: 600;
        color: #69a243;
        cursor: pointer;
        transition: color 0.3s ease, background-color 0.3s ease;
    }

    /* Hover: gleicher Hintergrund wie Menü */
    details summary:hover {
        background-color: rgba(0, 0, 0, 0.05);
        border-radius: 4px;
    }

    /* Grüner Balken unten (wie im Menü) */
    details summary::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 20%;
        width: 60%;
        height: 2px;
        background-color: transparent;
        transition: background-color 0.3s ease;
    }

    details summary:hover::after {
        background-color: #2e7d32;
    }


.teambild img {
    border: 5px solid #69a243;
    box-shadow: none;
    border-radius: 28px;
    display: block;
    width: 100%;
    height: auto;
}

/* Untertitel mittig */
.teambild figcaption {
    text-align: center !important;
    margin-top: 10px;
    font-size: 16px;
    color: #333;
}


/* ------------------ */
/* ----KREISBILD------ */
/* ------------------ */
/* 1. Quadratische Fläche erzwingen */
.kreisbild .wp-block-media-text__media {
    width: 150px;
    height: 150px;
}

/* 2. Bild exakt rund darstellen */
.kreisbild .wp-block-media-text__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    
    /* 3. Grüner Rahmen, kein Schatten */
    border: 5px solid #69a243;
    box-shadow: none;
}

/* ------------------ */
/* ----BERICHTE------ */
/* ------------------ */
.latest-posts-square .wp-block-media-text__media {
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.latest-posts-square .wp-block-media-text__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ------------------ */
/* -LETZTE ÄNDERUNG-- */
/* ------------------ */
.last-modified-group {
    font-size: 0.8em;
    color: #555;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ------------------ */
/* -BILDUNTERSCHRIFT- */
/* ------------------ */
.wp-element-caption {
    text-align: right !important;
    font-style: italic;
    font-size: 0.9em;
    margin-top: 0.3em;
    color: #555;
}

/* ------------------ */
/* ----TABELLEN------ */
/* ------------------ */
/* Basis-Tabelle */
.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.4;
}
/* Kopfzeile */
.wp-block-table thead th {
  background-color: #69a243
; 
  color: #000000;
  padding: 12px 10px;
  text-align: center;
  font-weight: 600;
  border: 1px solid #000000;
}
/* Tabellenzellen */
.wp-block-table td {
  padding: 10px;
  vertical-align: top;
  border-bottom: 1px solid #e0e0e0;
}
/* Zebra-Streifen */
.wp-block-table tbody tr:nth-child(even) {
  background-color: #f6f8f7;
}
/* Hover-Effekt */
.wp-block-table tbody tr:hover {
  background-color: #e9f3ee;
}
/* Tabelle etwas Abstand nach unten */
.wp-block-table {
  margin-bottom: 2rem;
}
/* Unteren Rahmen auch für die letzte Tabellenzeile erzwingen */
.wp-block-table tbody tr:last-child td {
  border-bottom: 1px solid #000000;
}

/* ------------------ */
/* ----GALERIE------ */
/* ------------------ */
.rl-gallery:not(.special-gallery) .rl-gallery-item {
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    height: auto !important;
    max-height: none !important;
}

.rl-gallery:not(.special-gallery) .rl-gallery-item img {
    border: 3px solid #69a243 !important;
    border-radius: 8px!important;
    object-fit: cover!important;
    width: 100%!important;
    box-sizing: border-box!important;
}

.rl-gallery:not(.special-gallery) .rl-gallery-item {
    position: relative;
}

.rl-gallery:not(.special-gallery) .rl-gallery-item-title {
    position: absolute !important;
    bottom: 10px !important;
    left: 10px!important;
    background: rgba(255, 255, 255, 0.7) !important;
    color: #000 !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    text-align: left !important;
    line-height: 1.4 !important;
    max-width: 90%!important;
    box-sizing: border-box !important;
}

@media (max-width: 1024px) {
    /* Das Item ist das Quadrat */
    .rl-gallery:not(.special-gallery)  .rl-gallery-item {
        aspect-ratio: 1 / 1 !important;
        height: auto !important;
        position: relative;
    }

    /* Der Link füllt das Item vollständig */
    .rl-gallery:not(.special-gallery) .rl-gallery-item > a {
        display: block !important;
        width: 100% !important;
        height: 100% !important; /* <- entscheidend */
        overflow: hidden !important;
    }

    /* Bild muss das Quadrat ausfüllen */
    .rl-gallery:not(.special-gallery)  .rl-gallery-item img {
        width: 100% !important;
        height: 100% !important; /* <- entscheidend */
        object-fit: cover !important;
        border: 3px solid #69a243 !important;
        border-radius: 6px !important;
        box-sizing: border-box !important;
    }

.rl-gallery:not(.special-gallery)  .rl-gallery-item {
    position: relative;
}

.rl-gallery:not(.special-gallery)  .rl-gallery-item-title {
    position: absolute !important;
    bottom: 6px !important;
    left: 6px!important;
    background: rgba(255, 255, 255, 0.7) !important;
    color: #000 !important;
    padding: 4px 8px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    text-align: left !important;
    line-height: 1.4 !important;
    max-width: 90%!important;
    box-sizing: border-box !important;
}
}

/* ================================
   Desktop-Menü Styles (ab 768px)
   ================================ */
@media (min-width: 768px) {

    /* 1. Menüeinträge: sanfter Hover-Effekt */
    .wp-block-navigation-item__content {
        position: relative;
        padding: 12px 20px;
        transition: color 0.3s ease, background-color 0.3s ease;
    }

    /* Hover: leichter Hintergrund */
    .wp-block-navigation-item__content:hover {
        background-color: rgba(0, 0, 0, 0.05); /* sanftes Grau beim Hover */
        border-radius: 4px; /* abgerundete Ecken */
    }

    /* 2. Untermenüs Hover-Effekt */
    .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
        background-color: rgba(0, 0, 0, 0.05); /* leichter Effekt */
        border-radius: 4px;
    }

    /* Optional: Balken unter dem Menüpunkt beim Hover */
    .wp-block-navigation-item__content::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 20%;
        width: 60%;
        height: 2px;
        background-color: transparent;
        transition: background-color 0.3s ease;
    }

    .wp-block-navigation-item__content:hover::after {
        background-color: #2e7d32; /* grüner Balken beim Hover */
    }
}