/* =========================================
   WORDPRESS-SPEZIFISCHE ANPASSUNGEN
   Kompatibilität zwischen FSE-Markup und originalem styles.css.
   ========================================= */

/* ---------------------------------------------------------------
   Fix 1: Header-Overlay bis ganz nach oben
   WordPress' globale Layout-Regel
       :where(.is-layout-flow) > * + * {
           margin-block-start: var(--wp--style--block-gap, 24px);
       }
   schiebt das <main>-Element (mit dem Hero darin) ca. 24px nach
   unten, weil es als Sibling nach dem Header-Template-Part kommt.
   Wir entfernen das Margin gezielt NUR an dieser einen Stelle
   (zwischen Header und erstem Inhalts-Element), damit die Block-Gaps
   im restlichen Seitenfluss unberührt bleiben.

   `margin-top: 0` allein reicht nicht: WP setzt `margin-block-start`
   (logical property) – diese liegt in einer separaten Kaskade und
   muss eigens überschrieben werden.
   --------------------------------------------------------------- */
html { margin: 0; padding: 0; }
body { margin: 0; padding: 0; }

/* Erstes Element direkt nach dem Header-Template-Part (i. d. R. <main>
   mit dem Hero) klebt am oberen Viewport-Rand. */
.wp-site-blocks > .wp-block-template-part:first-of-type + * {
    margin-top: 0 !important;
    margin-block-start: 0 !important;
}
/* Header-Template-Part-Wrapper selbst darf keine eigene Spacing-Höhe
   beisteuern (Inhalt ist position:fixed, also flow-leer). */
.wp-site-blocks > .wp-block-template-part:first-of-type {
    margin: 0 !important;
    padding: 0 !important;
}

/* Block-Editor: visuelle Stile auch im Editor. */
.editor-styles-wrapper {
    background: var(--color-bg) !important;
    font-family: var(--font-sans) !important;
}
.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4 {
    font-family: var(--font-serif) !important;
}

/* Sicherstellen, dass WP-Group-Blöcke unsere container-Klasse nicht überschreiben. */
.container > .wp-block-group {
    margin: 0;
    padding: 0;
}

/* Buttons: WP-Block-Button → unsere btn-Klasse anwenden. */
.wp-block-button__link.btn,
.wp-block-button__link.btn-primary,
.wp-block-button__link.btn-ghost,
.wp-block-button__link.btn-dark {
    /* Keine zusätzlichen Styles – wir vererben aus site.css */
}

.is-layout-flow > :first-child {
	margin-block-start: 24px;
}

.is-layout-constrained > :first-child {
    margin-block-start: 24px;
}

.wp-block-group.hero.is-layout-flow.wp-block-group-is-layout-flow {
    margin-block-start: auto;
}

.wp-block-group.page-hero.ueber-hero.is-layout-flow.wp-block-group-is-layout-flow {
    margin-block-start: auto;
}

.wp-block-group.page-hero.is-layout-flow.wp-block-group-is-layout-flow {
    margin-block-start: auto;
}

/* Standard WP-Block-Margin am ersten/letzten Element entfernen. */
.kt-section > *:first-child,
.menu-section > *:first-child,
.section > *:first-child {
    margin-top: 0;
}

/* Image-Block in Galerie-Tiles: kein Caption-Margin. */
.gal-tile .wp-block-image,
.gal-tile .wp-block-image img {
    margin: 0;
}

/* =========================================
   Core-Block-Kompatibilität
   Damit wp:group, wp:image, wp:list das Original-Layout nicht brechen.
   ========================================= */

/* ---------------------------------------------------------------
   Fix 2: Inhalte zentriert (nicht linksbündig)
   .container hat margin: 0 auto. WP-Layout-Defaults sollen das
   nicht überschreiben. KEIN globales margin:0 auf .wp-block-group.
   --------------------------------------------------------------- */
.wp-block-group.container,
.wp-block-group.menu-section-head {
    /* Original-Regeln aus site.css übernehmen Vorrang. */
}
/* WordPress' Layout-System setzt margin-block-end:0 auf flow-children
   und killt damit unsere margin-bottom-Werte. Wir restaurieren die
   wichtigsten Spacing-Werte explizit. */
:where(.is-layout-flow) > .section-head,
.wp-block-group.section-head {
    margin-bottom: 4rem;
}
:where(.is-layout-flow) > .menu-section-head,
.wp-block-group.menu-section-head {
    margin: 0 auto 3.5rem;
}
/* Abstand zwischen Section-Head und Grid-Containern. */
.wp-block-group.section-head + .wp-block-group,
.wp-block-group.menu-section-head + .wp-block-group {
    margin-top: 0;
}

/* wp:image erzeugt <figure class="wp-block-image"><img ...></figure>.
   In allen Layout-Containern soll die figure transparent agieren. */
.about-image .wp-block-image,
.ueber-image .wp-block-image,
.kegelbahn-image .wp-block-image,
.menu-feature > .wp-block-image,
.gallery-grid .wp-block-image,
.suppliers-grid .wp-block-image {
    margin: 0;
    padding: 0;
    line-height: 0;
}
.about-image .wp-block-image img,
.ueber-image .wp-block-image img,
.kegelbahn-image .wp-block-image img,
.menu-feature > .wp-block-image img {
    display: block;
    width: 100%;
    height: auto;
}

/* wp:list bekommt eine wp-block-list Klasse – Listen-Reset für unsere
   custom Listen wie .about-features, .feature-list.
   Check-Icon wird über CSS-Pseudo-Element gesetzt, damit die Listenitems
   im WP-Editor als reine Text-Items editierbar bleiben. */
.about-features.wp-block-list,
.feature-list.wp-block-list,
.pkg-features.wp-block-list {
    list-style: none;
    margin: 0 0 1.5rem 0;
    padding: 0;
}
.about-features.wp-block-list li,
.feature-list.wp-block-list li {
    position: relative;
    padding-left: 2.2rem;
    margin-bottom: 0.65rem;
    color: var(--color-text);
}
.about-features.wp-block-list li::before,
.feature-list.wp-block-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.15rem;
    width: 1.4rem;
    height: 1.4rem;
    background: var(--color-accent-soft);
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23737454' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.85rem 0.85rem;
}

/* hero-meta: Original-Regeln aus site.css gelten weiter (.hero-meta
   { flex; padding; border-top } und .hero-meta div { column; center }).
   Wir stylen nur die neuen .hm-time/.hm-label-Klassen wie die
   ursprünglichen <strong>/<span>. */
.hero-meta .hm-item.wp-block-group {
    margin: 0;
}
.hero-meta .hm-time {
    font-family: var(--font-serif);
    font-size: 1.7rem;
    color: var(--color-warm);
    font-weight: 600;
    margin: 0;
    text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.hero-meta .hm-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.05em;
    margin: 0.25rem 0 0;
    text-shadow: 0 1px 6px rgba(0,0,0,0.3);
}

/* image-badge & ueber-image-badge: Original-CSS deckt .big bereits ab.
   Wir replizieren nur die :not(.big)-Regel für unser <p> statt <span>
   und resetten Default-<p>-Margins. */
.image-badge .big,
.ueber-image-badge .big {
    margin: 0;
}
.image-badge p:not(.big) {
    font-size: 0.78rem;
    color: var(--color-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0.25rem 0 0;
    display: block;
    font-weight: 600;
}
.ueber-image-badge p:not(.big) {
    font-size: 0.78rem;
    color: var(--color-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0.35rem 0 0;
    display: block;
    font-weight: 600;
}

/* dehoga-seal: <p class="seal-text"/.seal-sub"> statt <span>. */
.seal-circle .seal-text,
.seal-circle .seal-sub {
    margin: 0;
}

/* kt-owner-meta: <p class="kom-label"/.kom-value"> statt <strong>/<span>. */
.kt-owner-meta .kom-label {
    font-size: 0.78rem;
    color: var(--color-muted);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    margin: 0 0 0.3rem 0;
}
.kt-owner-meta .kom-value {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    color: var(--color-dark);
    font-weight: 600;
    margin: 0;
}

/* wp:heading mit className – wir wollen, dass nur unsere Klasse zählt. */
.wp-block-heading {
    /* Vererbung aus h2/h3-Defaults belassen */
}

/* wp:paragraph mit className "eyebrow" → wir wollen Inline-Block-Verhalten
   wie das Original-<span class="eyebrow">. */
p.eyebrow {
    margin-bottom: 1.25rem;
}

/* wp:paragraph mit className "lead" → großer Intro-Text. */
p.lead {
    /* Vererbung aus .lead { font-size: 1.15rem; } */
}

/* hero-actions als Paragraph-Wrapper mit Links: Flex-Layout. */
.hero-actions a,
.hero-actions .wp-block-button__link {
    display: inline-flex;
}

/* link-arrow als Paragraph: keine zusätzliche Margin. */
p > .link-arrow {
    /* Vererbt aus site.css */
}

/* WP-Default Block-Spacing zwischen Geschwistern entfernen, wo Sektion-Padding
   bereits Abstand erzeugt. */
.section > .wp-block-group:first-child,
.menu-section > .wp-block-group:first-child,
.kt-section > .wp-block-group:first-child,
.ueber-intro > .wp-block-group:first-child,
.ueber-values > .wp-block-group:first-child,
.ueber-regional > .wp-block-group:first-child,
.ueber-features > .wp-block-group:first-child,
.ueber-dehoga > .wp-block-group:first-child,
.ueber-impressum > .wp-block-group:first-child,
.res-section > .wp-block-group:first-child,
.res-switcher > .wp-block-group:first-child,
.res-info-strip > .wp-block-group:first-child {
    margin-top: 0;
}

/* Block-Editor (Site-Editor / Page-Editor): visualisiert Section-Backgrounds
   nicht 1:1 – wir blenden bestimmte Editor-Defaults aus. */
.editor-styles-wrapper .wp-block-group.is-style-section {
    /* Optional: vom Editor verwendete Styles */
}

/* Speisekarte: Shortcode-Output integriert sich nahtlos. */
.menu-section .gericht-liste-shortcode {
    margin: 0;
}

/* =========================================
   wp:navigation als Hauptmenü
   Wrapper-Markup: <nav class="nav-links">
                     <ul class="wp-block-navigation__container">
                       <li class="wp-block-navigation-item ...">
                         <a class="wp-block-navigation-item__content">…</a>
                       </li>
                     </ul>
                   </nav>
   ========================================= */

/* Flex-Layout auf <ul> verlagern (statt am <nav>) und WP-Defaults zurücksetzen. */
.nav-links.wp-block-navigation .wp-block-navigation__container {
    display: flex;
    align-items: center;
    gap: 2.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
}
.nav-links.wp-block-navigation .wp-block-navigation-item {
    margin: 0;
    padding: 0;
    position: relative;
}
.nav-links.wp-block-navigation .wp-block-navigation-item__content {
    color: white;
    font-size: 0.92rem;
    font-weight: 500;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
    text-decoration: none;
    padding: 0;
    position: relative;
}
.nav.scrolled .nav-links.wp-block-navigation .wp-block-navigation-item__content {
    color: var(--color-dark);
    text-shadow: none;
}

/* Underline-Hover für alle Items außer der CTA. */
.nav-links.wp-block-navigation .wp-block-navigation-item:not(.nav-cta) .wp-block-navigation-item__content::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-accent);
    border-radius: 2px;
    transition: width var(--transition);
}
.nav-links.wp-block-navigation .wp-block-navigation-item:not(.nav-cta) .wp-block-navigation-item__content:hover::after {
    width: 100%;
}

/* CTA-Item ("Reservieren") — Klasse "nav-cta" landet auf dem <li>. */
.nav-links.wp-block-navigation .wp-block-navigation-item.nav-cta .wp-block-navigation-item__content {
    background: var(--color-accent);
    color: white !important;
    padding: 0.65rem 1.5rem;
    border-radius: 999px;
    text-shadow: none !important;
    box-shadow: 0 4px 14px rgba(115, 116, 84, 0.4);
    transition: background var(--transition), transform var(--transition);
}
.nav-links.wp-block-navigation .wp-block-navigation-item.nav-cta .wp-block-navigation-item__content:hover {
    background: var(--color-accent-dark);
    transform: translateY(-2px);
}
.nav.scrolled .nav-links.wp-block-navigation .wp-block-navigation-item.nav-cta .wp-block-navigation-item__content {
    color: white !important;
}

/* Aktiver Menüpunkt – WP setzt 'current-menu-item' auf das <li>. */
.nav-links.wp-block-navigation .wp-block-navigation-item.current-menu-item:not(.nav-cta) .wp-block-navigation-item__content::after {
    width: 100%;
}
.nav-links.wp-block-navigation .wp-block-navigation-item.current-menu-item.nav-cta .wp-block-navigation-item__content {
    background: var(--color-accent-dark);
}

/* Mobile: Slide-In-Drawer von rechts. */
@media (max-width: 880px) {
    /* Der WP-Drawer ist ab 880px aktiv, der Hamburger-Button erscheint in
       site.css aber erst ab 720px. Im Bereich 720–880px wäre das Menü sonst
       als Off-Canvas-Panel versteckt, ohne Button zum Öffnen. Toggle daher
       auf denselben Breakpoint ziehen. */
    .nav-toggle { display: flex; }

    /* Bei offenem Drawer den Hamburger durch das X ersetzen. Steuerung über
       die body.menu-open-Klasse (von site.js gesetzt) – unabhängig davon, wo
       der Schließen-Button im DOM hängt. */
    body.menu-open .nav-toggle { display: none; }
    body.menu-open .nav-close { display: block; }

    .nav-links.wp-block-navigation {
        position: fixed;
        top: 0;
        right: -100%;
        width: 72%;
        max-width: 290px;
        height: 100vh;
        background: var(--color-bg);
        flex-direction: column;
        padding: 6rem 2rem 2rem;
        transition: right var(--transition);
        box-shadow: -20px 0 60px rgba(0, 0, 0, 0.15);
        z-index: 90;
    }
    .nav-links.wp-block-navigation.open {
        right: 0;
    }
    .nav-links.wp-block-navigation .wp-block-navigation__container {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
        width: 100%;
        /* Das <ul> trägt selbst die Klasse "nav-links" und würde sonst von
           der generischen Drawer-Regel (.nav-links { position: fixed;
           right: -100% }) ebenfalls als Off-Canvas-Panel aus dem Bild
           geschoben – das .open kommt aber nur aufs <nav>. Hier statisch im
           Drawer halten, damit die Menüpunkte sichtbar sind. */
        position: static;
        inset: auto;
        right: auto;
        left: auto;
        top: auto;
        height: auto;
        max-width: none;
        padding: 0;
        background: none;
        box-shadow: none;
    }
    .nav-links.wp-block-navigation .wp-block-navigation-item__content {
        color: var(--color-dark) !important;
        font-size: 1.05rem;
        text-shadow: none;
    }
    /* CTA "Reservieren" nicht über die volle Drawer-Breite ziehen – der
       Pill-Button soll nur seinen Text umschließen und links bündig stehen
       wie die übrigen Menüpunkte. */
    .nav-links.wp-block-navigation .wp-block-navigation-item.nav-cta {
        align-self: flex-start;
        text-align: left;
    }
    .nav-links.wp-block-navigation .wp-block-navigation-item.nav-cta .wp-block-navigation-item__content {
        display: inline-block;
    }
}

/* WP Navigation-Block: eigenes Toggle nicht anzeigen (overlayMenu:never). */
.nav-links.wp-block-navigation .wp-block-navigation__responsive-container-open,
.nav-links.wp-block-navigation .wp-block-navigation__responsive-container-close {
    display: none !important;
}

/* =========================================
   Fix 3: Hero-Overlay/BG bis ganz nach oben
   WordPress' .is-layout-flow > * Regel setzt margin-block-start: 24px
   auf alle Nicht-Erstkinder. Bei .hero-overlay (absolut positioniert
   mit inset:0) verschiebt das den Top-Rand um 24px nach unten.
   Wir neutralisieren die Margin auf den absoluten Hero-Layern.
   ========================================= */
.hero > .hero-bg,
.hero > .hero-overlay,
.page-hero > .page-hero-bg,
.page-hero > .page-hero-overlay {
    margin: 0 !important;
}
/* Hero-Content selbst soll auch nicht runtergeschoben werden – flex-center
   übernimmt die Vertikal-Zentrierung. */
.hero > .hero-content,
.page-hero > .page-hero-content {
    margin-top: 0;
    margin-bottom: 0;
}

/* =========================================
   Fix 4: Sektion-Überschriften zentrieren
   WP's Block-Layout-Regeln können text-align verlieren. Wir
   erzwingen Zentrierung für .section-head.center und .menu-section-head
   auch wenn sie als wp-block-group gerendert werden.
   ========================================= */
.section-head.center,
.wp-block-group.section-head.center,
.menu-section-head,
.wp-block-group.menu-section-head {
    text-align: center;
    margin-left: auto !important;
    margin-right: auto !important;
}
.section-head.center > *,
.menu-section-head > * {
    text-align: center;
}
/* Eyebrow als inline-block bleiben zentrierbar via text-align: center
   am Elternelement. */
.section-head.center .eyebrow,
.menu-section-head .eyebrow {
    margin-left: auto;
    margin-right: auto;
}

/* =========================================
   Fix 5: Karten gleiche Höhe in Grid-Containern
   CSS-Grid hat standardmäßig align-items: stretch, aber WP fügt
   gelegentlich align-self hinzu. Wir erzwingen Stretch + height:100%
   damit zusammengehörende Karten immer gleich hoch sind.
   ========================================= */
.values-grid,
.menu-grid,
.hours-grid,
.suppliers-grid,
.kegelbahn-grid,
.impressum-grid,
.kt-cards,
.gal-cats,
.gal-features {
    align-items: stretch;
}
.values-grid > .value-card,
.menu-grid > .menu-card,
.hours-grid > .hours-card,
.suppliers-grid > .supplier-card,
.kegelbahn-grid > .kb-card,
.impressum-grid > .impressum-block,
.kt-cards > .kt-card,
.gal-cats > .gal-cat-card,
.gal-features > .gal-feature {
    height: 100%;
    align-self: stretch;
}

/* =========================================
   Fix 6: Einzel-CTA-Karten zentrieren + mehr Padding
   Auszeichnung (DEHOGA), Familie Pfefferle, Speisekarte-CTA,
   Galerie-CTA "Erlebt uns live" – alle vollflächigen Single-Card-
   Bereiche bekommen zentrierten Inhalt und großzügigeres Padding.
   ========================================= */

/* DEHOGA-Karte: vertikal stacken & zentrieren statt Seal-links/Text-rechts. */
.dehoga-card,
.wp-block-group.dehoga-card {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: clamp(3rem, 5vw, 5rem) clamp(2rem, 4vw, 4rem);
    gap: 2rem;
}
.dehoga-card .dehoga-text {
    max-width: 640px;
}
.dehoga-card .dehoga-text .eyebrow {
    padding-left: 0;
}
.dehoga-card .dehoga-text .eyebrow::before {
    display: none;
}

/* Familie-Pfefferle-Karte: mehr Padding. */
.kt-owner-card,
.wp-block-group.kt-owner-card {
    padding: clamp(3rem, 5vw, 5rem) clamp(2rem, 4vw, 4rem);
    text-align: center;
}

/* Speisekarte-CTA „Reserviert Euren Tisch". */
.menu-cta-card,
.wp-block-group.menu-cta-card {
    padding: clamp(3.5rem, 6vw, 5.5rem) clamp(2rem, 4vw, 4rem);
    text-align: center;
}

/* Galerie-CTA „Erlebt uns live" verwendet ebenfalls .menu-cta-card,
   wird also bereits durch die obige Regel abgedeckt. */