/* =============================================================
   Front page (homepage) — visual & responsive refinements.
   Enqueued only on the front page (see customtheme_enqueue_
   front_page_assets in functions.php), so selectors here are
   free to be specific without touching any other template.
============================================================= */

/* -----------------------------------------------------------
   Section rhythm — every homepage section now shares the same
   vertical spacing scale instead of the previous mix of 60px /
   70px / 120px paddings.
----------------------------------------------------------- */
.home-restaurant-info,
#menu,
#food,
.reservation-section,
.gallery.portfolio-three,
.home-cta-banner {
    padding-top: 100px;
    padding-bottom: 100px;
}

/* Gallery keeps sitting flush against the booking banner below it. */
.gallery.portfolio-three {
    padding-bottom: 0;
}

@media screen and (max-width: 991px) {
    .home-restaurant-info,
    #menu,
    #food,
    .reservation-section,
    .gallery.portfolio-three,
    .home-cta-banner {
        padding-top: 72px;
        padding-bottom: 72px;
    }

    .gallery.portfolio-three {
        padding-bottom: 0;
    }
}

@media screen and (max-width: 767px) {
    .home-restaurant-info,
    #menu,
    #food,
    .reservation-section,
    .gallery.portfolio-three,
    .home-cta-banner {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .gallery.portfolio-three {
        padding-bottom: 0;
    }
}

@media screen and (max-width: 480px) {
    .home-restaurant-info,
    #menu,
    #food,
    .reservation-section,
    .gallery.portfolio-three,
    .home-cta-banner {
        padding-top: 44px;
        padding-bottom: 44px;
    }

    .gallery.portfolio-three {
        padding-bottom: 0;
    }
}

/* -----------------------------------------------------------
   Background rhythm — alternate cream / white so each section
   reads as a distinct step down the page. Section classes are
   used instead of the generic .bg-light utility so this stays
   scoped to the homepage and actually reacts to the surface
   color chosen in the theme settings.
----------------------------------------------------------- */
.home-restaurant-info,
#food,
.gallery.portfolio-three {
    background: var(--theme-surface-color);
}

#menu,
.reservation-section,
.home-cta-banner {
    background: var(--theme-light-color);
}

/* -----------------------------------------------------------
   Hero — plain, responsive markup instead of the Revolution
   Slider layer system it replaced (dozens of per-breakpoint
   pixel offsets that made the CTA buttons misbehave on desktop
   and tablet, and hid every decorative image below 992px).
----------------------------------------------------------- */
.front-page-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    margin-top: 0;
    padding: 190px 20px 130px;
    background: var(--theme-light-color);
    text-align: center;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 640px;
    margin: 0 auto;
}

.hero-kicker {
    margin: 0 0 8px;
    font-family: var(--theme-heading-font);
    font-size: 32px;
    font-weight: 400;
    color: var(--theme-heading-color);
}

.hero-title {
    margin: 0 0 24px;
    font-size: 76px;
    font-weight: 700;
    line-height: 1.05;
}

.hero-text {
    max-width: 460px;
    margin: 0 auto 34px;
    font-size: 17px;
    line-height: 1.6;
    color: var(--theme-text-color);
}

/* Decorative food photos, one cluster per side. Scaled down as
   a whole (rather than repositioning every image) to stay clear
   of the centered text as the viewport narrows. */
.hero-decor {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 380px;
    pointer-events: none;
    z-index: 1;
}

.hero-decor--left {
    left: 0;
    transform-origin: bottom left;
}

.hero-decor--right {
    right: 0;
    transform-origin: bottom right;
}

/* Round photo badges — replacing the theme's stock die-cut food
   PNGs (pizza/basil/fries/spices demo art) with actual dishes from
   the restaurant's own photography. Real photos are plain rectangles,
   not pre-cut transparent art, so each is cropped into a circle with
   a white ring and a soft shadow instead of trying to fake a cutout. */
.hero-decor-img {
    position: absolute;
    max-width: none;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    border: 6px solid var(--theme-light-color);
    box-shadow: 0 18px 34px rgba(0, 0, 0, .16);
}

.hero-decor-pizza {
    left: -30px;
    bottom: 10px;
    width: 250px;
}

.hero-decor-basil {
    left: 235px;
    bottom: 260px;
    width: 78px;
}

.hero-decor-salad {
    left: 20px;
    bottom: -30px;
    width: 210px;
}

.hero-decor-fries-left {
    left: 250px;
    top: 110px;
    width: 108px;
}

.hero-decor-fries-right {
    right: 30px;
    top: 60px;
    width: 190px;
}

.hero-decor-spices {
    right: 10px;
    bottom: 20px;
    width: 250px;
}

@media screen and (max-width: 1399px) {
    .hero-decor {
        transform: scale(.78);
    }
}

@media screen and (max-width: 991px) {
    .front-page-hero {
        padding: 150px 20px 100px;
    }

    .hero-title {
        font-size: 56px;
    }

    .hero-decor {
        transform: scale(.5);
    }
}

@media screen and (max-width: 767px) {
    .front-page-hero {
        padding: 130px 16px 80px;
    }

    .hero-kicker {
        font-size: 22px;
    }

    .hero-title {
        font-size: 42px;
    }

    .hero-text {
        font-size: 15px;
    }

    /* Small corner accents rather than the full cluster, so the
       photos stay visible on phones without crowding the text. */
    .hero-decor {
        top: -10px;
        bottom: auto;
        height: 260px;
        transform: scale(.34);
    }

    .hero-decor--left {
        left: -110px;
        transform-origin: top left;
    }

    .hero-decor--right {
        right: -110px;
        transform-origin: top right;
    }

    .hero-decor-basil,
    .hero-decor-fries-left {
        display: none;
    }
}

@media screen and (max-width: 480px) {
    .hero-title {
        font-size: 34px;
    }
}

/* -----------------------------------------------------------
   Eyebrow / kicker labels ("Ihre Gastgeber", "Unsere Speise-
   karten", ...). The .response class ships with the theme but
   was never actually styled, so every kicker rendered as a
   plain heading — this gives it real identity.
----------------------------------------------------------- */
.response {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px !important;
    color: var(--theme-primary-color);
    font-size: 13px !important;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.response::before {
    content: '';
    width: 30px;
    height: 2px;
    flex: none;
    background: linear-gradient(to right, var(--theme-gradient-start-color), var(--theme-primary-color));
}

.text-center .response {
    justify-content: center;
}

.zic-img {
    margin-bottom: 46px;
}

/* Some section headings already carry a Bootstrap mb-50 on the
   wrapping column — .zic-img now owns that spacing everywhere,
   so the extra utility margin is neutralised to keep the gap
   identical section to section. */
#food .col-lg-12.mb-50,
.gallery.portfolio-three .col-lg-12.mb-50 {
    margin-bottom: 0;
}

/* -----------------------------------------------------------
   Homepage info cards (hours / phone / email / address) — add
   a resting shadow so they read as cards even before hover.
----------------------------------------------------------- */
.home-info-hours,
.home-info-contact-card {
    box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
}

/* Solid circular badges for the phone/email/address icons
   instead of a plain coloured glyph, and a short accent
   underline below "Öffnungszeiten" instead of colouring the
   whole heading red. */
.home-info-contact-card .home-info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    background: var(--theme-primary-color);
    border-radius: 50%;
    color: var(--theme-light-color);
    font-size: 24px;
    transition: background .3s ease-in-out;
}

.home-info-contact-card:hover .home-info-icon {
    background: var(--theme-secondary-color);
}

@media screen and (max-width: 767px) {
    .home-info-contact-card .home-info-icon {
        width: 48px;
        height: 48px;
        margin: 0 auto 16px;
        font-size: 19px;
    }
}

.home-info-title {
    position: relative;
    margin: 0 0 28px;
    padding-bottom: 14px;
    color: var(--theme-heading-color);
}

.home-info-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 36px;
    height: 3px;
    background: var(--theme-primary-color);
}

/* -----------------------------------------------------------
   Square corners everywhere except buttons. The shared
   stylesheet rounds several cards, icon badges and form fields
   (home-info cards, the menu CTA banner, the gallery hover
   icon, the reservation inputs); overridden here, scoped to the
   homepage only, so only .btn elements keep any border-radius.
----------------------------------------------------------- */
.home-info-hours,
.home-info-contact-card,
.menu-main-cta,
.menu-main-cta-icon,
.dinner-hover,
.reservation-form .form-control,
.reservation-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.reservation-form select,
.reservation-form textarea {
    border-radius: 0;
}

/* -----------------------------------------------------------
   "Ihre Gastgeber" photo + feature list. The original layout
   relied on fixed pixel offsets (rare-box left:125px, a -145px
   negative margin, a 280px margin-top hack on mobile, ...) that
   only lined up at one exact viewport width. Replaced with a
   fluid, self-contained layout that works at any width.
----------------------------------------------------------- */
.rare-box {
    position: relative;
    left: auto;
    height: auto;
    max-width: 460px;
    margin: 0 auto;
}

.rare-box::before {
    content: '';
    position: absolute;
    top: 22px;
    left: -22px;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, var(--theme-gradient-start-color), var(--theme-primary-color));
    z-index: 0;
}

.image-about {
    position: relative;
    z-index: 1;
    top: 0;
    margin: 0 !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, .18);
}

.features {
    max-width: 480px;
    margin: 0 !important;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    max-width: none;
    margin:  50px 0 32px 0;
    text-align: left;
}

.feature-item:last-child {
    margin-bottom: 0;
}

.food-features-icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0;
    background: color-mix(in srgb, var(--theme-secondary-color) 12%, transparent);
    border-radius: 50%;
}

.feature-item:hover .food-features-icon {
    background: linear-gradient(to right, var(--theme-gradient-start-color), var(--theme-primary-color));
    transform: none;
}

.feature-item:hover .food-features-icon .icon {
    color: var(--theme-light-color);
}

.feature-item .icon {
    font-size: 24px;
    line-height: 1;
}

.features-content {
    padding-left: 0;
}

.feature-para {
    margin: 0 0 6px;
    font-size: 19px;
    font-weight: 600;
    color: var(--theme-heading-color);
}

.max {
    max-width: none;
}

/* Below tablet the image and feature list stack full-width
   (col-md-12); centering the icon badge and copy under it reads
   better than the desktop's left-aligned icon-beside-text row. */
@media screen and (max-width: 991px) {
    .features {
        margin: 0 auto !important;
    }

    .feature-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .max {
        margin: 0 auto;
    }
}

/* -----------------------------------------------------------
   Menu tabs — give the three tab icons a real badge so the
   active/hover state is obvious, and stop the divider under
   each price row from forcing a fixed 530px width.
----------------------------------------------------------- */
.food-menu .hr-line {
    width: 100%;
}

.tabset-list .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 14px;
    background: color-mix(in srgb, var(--theme-secondary-color) 10%, transparent);
    border-radius: 50%;
    font-size: 26px;
    transition: background .3s ease, transform .3s ease;
}

.tabset-list li:hover .icon,
.tabset-list .active .icon {
    background: linear-gradient(to right, var(--theme-gradient-start-color), var(--theme-primary-color));
    transform: translateY(-4px);
}

.tabset-list li:hover .icon i,
.tabset-list .active .icon i {
    color: var(--theme-light-color) !important;
}

.tabset-list .menu-tab-title {
    font-size: 18px;
}

.tabset-list li:hover .menu-tab-title,
.tabset-list .active .menu-tab-title {
    color: var(--theme-primary-color) !important;
}

/* When fewer than all 3 menus are active (e.g. no daily menu today,
   leaving only Monatskarte + Sommerkarte), justify-content-sm-between
   spreads the remaining icons to opposite edges of the row. Cluster
   them together instead — the extra class selector outweighs
   Bootstrap's single-class !important utility. */
@media screen and (min-width: 576px) {
    .tabset-list.tabset-list--compact {
        justify-content: center !important;
        gap: clamp(40px, 8vw, 120px);
    }
}

/* Below Bootstrap's sm breakpoint the tabs ship with flex-column
   (theme markup), stacking the three tabs one per row. Put them
   back in a single row on phones too, just smaller so all three
   fit without wrapping. */
@media screen and (max-width: 575px) {
    .tabset-list {
        flex-direction: row !important;
    }

    .tabset-list > li {
        flex: 1 1 0;
        min-width: 0;
        margin-bottom: 0 !important;
    }

    .tabset-list .icon {
        width: 42px;
        height: 42px;
        margin: 0 auto 8px;
        font-size: 17px;
    }

    .tabset-list .menu-tab-title {
        font-size: 12px !important;
        line-height: 1.25;
    }
}

/* The theme also ships a script that swaps the tab bar for an
   accordion whenever it measures the three tabs as too wide to
   fit their row — which is exactly the "stacked" look this is
   meant to replace, and its own math (comparing rendered tab
   widths to the container) never accounts for the sizing above.
   The tab bar should never collapse into that accordion on the
   homepage, so its effect is turned off outright here: the tab
   bar stays visible and the accordion clones stay hidden no
   matter what the script decides. */
.tab-to-accordion.accordion-mod .tabset-list {
    height: auto;
    visibility: visible;
    overflow: visible;
}

.tab-to-accordion.accordion-mod .accordion-item {
    height: 0;
    visibility: hidden;
    overflow: hidden;
}

/* -----------------------------------------------------------
   Reservation section — photo and form now render as a single
   rounded, floating card (flush seam between them, one shadow
   around the whole thing) instead of two plain rectangles.
   Neutralising the Bootstrap column gutter is what lets the
   photo and the form panel sit flush against each other and
   against the card's own edges.
----------------------------------------------------------- */
.reservation-section .row.align-items-stretch {
    margin: 0;
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .14);
}

.reservation-section .row.align-items-stretch > [class*="col-"] {
    margin: 0;
    padding: 0;
}

.reservation-photo-wrap,
.reservation-form-wrap {
    border-radius: 0;
    box-shadow: none;
}

/* Round photo badges flanking the "Delicious Food" heading — same
   treatment as .hero-decor-img above, for a consistent look between
   the two sections. */
.food-img-before,
.food-img-after {
    width: 220px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    border: 6px solid var(--theme-light-color);
    box-shadow: 0 20px 45px rgba(0, 0, 0, .18);
}

/* Same round photo badge treatment for the two decorative photos in
   the reservation CTA banner (.food-img2-before/-after). Their
   positioning wrapper (.book-img-width/-width2) is left untouched. */
.food-img2-before,
.food-img2-after {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    border: 6px solid var(--theme-light-color);
    box-shadow: 0 20px 45px rgba(0, 0, 0, .18);
}

/* -----------------------------------------------------------
   Decorative artwork (food-img-before/after in #food, the two
   book-img-width layers in the CTA banner) is pinned with
   large fixed offsets tuned for one desktop width; it overflows
   and clutters the layout below that. It is purely decorative,
   so it is simplest and safest to hide it below tablet width.
----------------------------------------------------------- */
@media screen and (max-width: 991px) {
    .food-img-before,
    .food-img-after,
    .book-img-width,
    .book-img-width2 {
        display: none;
    }
}

/* -----------------------------------------------------------
   Gallery — the dark tint / icon / title overlay markup was
   removed from front-page.php, so no CSS is needed to hide it.
   Desktop/tablet keep the existing mosaic grid. Below 768px,
   front-page.js turns the row into an Owl Carousel slider
   (adding the "owl-carousel"/"owl-loaded" classes); this only
   styles that slider state.

   Every tile — mosaic grid and slider alike — crops to the same
   fixed height via object-fit: cover, so uploaded photos of any
   size/aspect ratio still line up evenly instead of each tile's
   height following its own image's natural proportions. */
@media screen and (min-width: 768px) {
    .gallery.portfolio-three .item-img img {
        height: 320px;
        object-fit: cover;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .gallery.portfolio-three .item-img img {
        height: 240px;
    }
}

@media screen and (max-width: 767px) {
    .gallery-slider.owl-loaded .items {
        padding: 0 6px;
    }

    .gallery-slider.owl-loaded .item-img img {
        height: 280px;
        object-fit: cover;
    }

    .gallery-slider .owl-dots {
        margin-top: 18px;
        text-align: center;
    }

    .gallery-slider .owl-dots .owl-dot span {
        background: var(--theme-border-color);
    }

    .gallery-slider .owl-dots .owl-dot.active span {
        background: linear-gradient(to right, var(--theme-gradient-start-color), var(--theme-primary-color));
    }
}

/* -----------------------------------------------------------
   Map — the fixed 500px height is too tall relative to the
   viewport on phones.
----------------------------------------------------------- */