/*
Theme Name: Via Appia
Theme URI: https://trattoria-via-appia.de/
Author: Trattoria Via Appia
Description: Unabhängiges, schlankes Restaurant-Theme mit editierbarer Gutenberg-Startseite. Ohne Plugin- oder Wix-Abhängigkeit.
Version: 0.6.9
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: via-appia
*/
:root {
  --va-font: "Bai Jamjuree", Arial, Helvetica, sans-serif;
  --va-ink: #20251e;
  --va-green: #53644d;
  --va-green-dark: #3f513c;
  --va-muted: #6c7467;
  --va-cream: #f7f6f2;
  --va-line: #e5e6e1;
  --va-max: 1240px;
  --va-gutter: clamp(18px, 3vw, 36px);
  --va-header-height: 87px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--va-header-height) + 20px)}
body{margin:0;background:#fff;color:var(--va-ink);font-family:var(--va-font);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
body.va-menu-open{overflow:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
a:hover{color:var(--va-green)}
button,input,select{font:inherit}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #8c9c86;outline-offset:3px}
.va-site-width{width:min(calc(100% - var(--va-gutter) - var(--va-gutter)),var(--va-max));margin-inline:auto}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}
.screen-reader-text:focus{clip:auto;clip-path:none;height:auto;width:auto;background:#fff;top:8px;left:8px;padding:10px;z-index:1000}
/* The site header is owned by the theme; its text links come from a WP menu. */
.va-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.97);border-bottom:1px solid rgba(32,37,30,.07);box-shadow:0 3px 18px rgba(31,35,29,.045);backdrop-filter:blur(12px)}
body.admin-bar .va-header{top:32px}
.va-header__inner{min-height:var(--va-header-height);display:flex;align-items:center;justify-content:space-between;gap:32px}
.va-brand{flex:0 0 auto}.va-brand a{display:block}
.va-brand img,.va-brand .custom-logo{display:block;width:237px;height:auto;max-height:74px;object-fit:contain;object-position:left center}
.va-nav{margin-left:auto}
.va-menu{display:flex;gap:clamp(19px,2.45vw,43px);margin:0;padding:0;list-style:none;align-items:center}
.va-menu li{margin:0;padding:0}
.va-menu a{display:block;text-decoration:none;font-size:15px;font-weight:700;white-space:nowrap;line-height:1.4;transition:color .2s}
.va-menu a:hover,.va-menu .current-menu-item>a,.va-menu .current_page_item>a{color:var(--va-green)}
.va-menu-toggle{display:none}
.va-main{min-height:35vh}
/* Native Gutenberg front page; no sections are hardcoded in PHP. */
.va-home-content{overflow:clip}
.va-home-content>.wp-block-group,.va-home-content>.wp-block-cover,.va-home-content>.wp-block-columns{margin-block:0}
.va-home-content .wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;gap:18px;border-radius:0;text-decoration:none!important;min-height:52px;background:var(--va-green);color:#fff;font-family:var(--va-font);font-weight:700;font-size:12px;letter-spacing:.11em;text-transform:uppercase;padding:14px 26px;transition:background .15s}
.va-home-content .wp-block-button__link:hover{background:var(--va-green-dark);color:#fff}
.va-home-content .va-eyebrow{font-size:11px!important;color:var(--va-green);font-weight:700;letter-spacing:.32em;line-height:1.5;text-transform:uppercase;margin:0 0 13px}
.va-home-content .va-hero-eyebrow{color:#fff!important}
.va-home-hero{min-height:580px;display:flex;align-items:center;isolation:isolate}
.va-home-hero .wp-block-cover__background{opacity:1!important;background:linear-gradient(90deg,rgba(15,22,16,.80) 0%,rgba(15,22,16,.51) 37%,rgba(15,22,16,.04) 78%)!important}
.va-home-hero>.wp-block-cover__inner-container{width:min(calc(100% - 96px),var(--va-max))!important;max-width:var(--va-max);margin-inline:auto;position:relative;z-index:2}
.va-home-hero .wp-block-cover__image-background{object-position:center 58%}
.va-home-hero h1{max-width:680px;font-family:var(--va-font);font-weight:700;font-size:clamp(38px,5.1vw,74px);line-height:1.06;letter-spacing:-.045em;color:#fff;margin:0 0 18px;text-wrap:balance}
.va-home-hero .va-hero-description{max-width:410px;color:#fff;font-size:18px;line-height:1.55;margin:0 0 29px}
.va-home-hero .wp-block-buttons{margin-top:0}
.va-home-content .va-intro-section{padding:75px 28px 64px}
.va-intro-section>.wp-block-group__inner-container{max-width:var(--va-max);margin:auto}
.va-intro-section .va-intro-headline{max-width:920px;margin:0 0 19px;color:var(--va-green-dark);font-size:clamp(26px,3vw,41px);font-weight:500;line-height:1.24;letter-spacing:-.025em}
.va-intro-section p:not(.va-eyebrow){max-width:930px;margin:0 0 17px;color:#333832;font-size:17px;line-height:1.7}
.va-home-content .va-gallery-section{padding:0}
.va-gallery-section .va-gallery-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin:0;max-width:none!important}
.va-gallery-grid>.wp-block-column{min-width:0;max-width:100%;margin:0!important}
.va-gallery-grid figure{margin:0;overflow:hidden;width:100%;height:270px}
.va-gallery-grid img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.va-gallery-grid figure:hover img{transform:scale(1.045)}
.va-home-content .va-reservation-section{padding:77px 28px 85px;background:var(--va-cream);text-align:center}
.va-reservation-section>.wp-block-group__inner-container{max-width:960px;margin-inline:auto}
.va-reservation-section h2{color:var(--va-green);font-size:clamp(32px,3.4vw,45px);font-weight:700;line-height:1.1;margin:0 0 10px}
.va-reservation-section .va-eyebrow{margin:0 0 27px}
.va-reservation-section .va-booking-note{max-width:630px;margin:0 auto 29px;color:#51594f;font-size:16px}
.va-reservation-section .wp-block-buttons{justify-content:center}
.va-home-content .va-contact-section{padding:83px 28px 87px}
.va-contact-section>.wp-block-group__inner-container{max-width:var(--va-max);margin:auto}
.va-contact-section .va-contact-columns{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:7%;align-items:center;margin:0}
.va-contact-section .va-contact-columns>.wp-block-column{margin:0;min-width:0}
.va-contact-section h2{color:var(--va-ink);font-size:clamp(32px,3.4vw,48px);line-height:1.15;margin:0 0 13px}
.va-contact-section .va-contact-details{margin:25px 0 0;font-size:17px;line-height:1.8}
.va-contact-section .va-contact-details a{text-decoration-color:#a5aa9f;text-underline-offset:3px}
.va-contact-section .va-contact-image{margin:0}
.va-contact-section .va-contact-image img{width:100%;aspect-ratio:4/3;object-fit:cover}
.va-home-content .va-hours-section{background:#f1f2ed;padding:42px 28px;text-align:center}
.va-hours-section h2{font-size:24px;line-height:1.3;color:var(--va-green-dark);margin:0 0 8px}
.va-hours-section p{margin:2px 0;font-size:15px}
.va-empty-home{padding:90px 0}
/* WordPress generic pages, including freely inserted plugin shortcodes. */
.va-page{padding:50px 0 95px}
/* Shared, accessible title area for ordinary WordPress pages. */
.va-page-heading{text-align:center;margin:0 auto 42px;max-width:950px}
.va-page .entry-title{font-family:var(--va-font);font-weight:600;color:var(--va-ink);font-size:clamp(32px,3.15vw,42px);line-height:1.17;letter-spacing:-.025em;text-align:center;margin:0 0 17px;overflow-wrap:anywhere}
.va-page-heading__rule{display:block;width:48px;height:2px;background:var(--va-green);margin:0 auto}
.va-page-heading__subtitle{color:#586255;font-size:clamp(15px,1.15vw,17px);font-weight:400;line-height:1.55;margin:14px auto 0;max-width:760px}
.va-page.va-page--no-heading{padding-top:45px}
.va-page .entry-content{max-width:100%;margin:0 auto}
.entry-content>.wp-block-group,.entry-content>.wp-block-columns,.entry-content>p,.entry-content>h2,.entry-content>h3{max-width:980px;margin-left:auto;margin-right:auto}
.entry-content>.wp-block-cover.alignfull,.entry-content>.wp-block-group.alignfull{max-width:none}
.entry-content img{max-width:100%;height:auto}
/* Footer: one horizontal rule, one compact row, no repeated brand heading. */
.va-footer{background:#fff;border-top:1px solid var(--va-line);padding:23px 0}
.va-footer__inner{display:flex;align-items:center;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;min-height:25px}
.va-footer__copyright{color:var(--va-muted);font-size:13px;line-height:1.5}
.va-footer__links{display:flex;align-items:center;justify-content:flex-end;gap:14px 30px;flex-wrap:wrap}
.va-footer-menu,.va-footer__legal{display:flex;align-items:center;gap:16px 24px;flex-wrap:wrap;margin:0;padding:0}
.va-footer-menu{list-style:none}
.va-footer-menu a,.va-footer__legal a{font-size:13px;line-height:1.5;text-decoration:none;color:var(--va-muted)}
.va-footer-menu a:hover,.va-footer__legal a:hover{color:var(--va-green)}
@media(max-width:900px){
  :root{--va-header-height:76px}
  .va-site-width{width:min(calc(100% - 36px),var(--va-max))}
  .va-brand img,.va-brand .custom-logo{width:209px;max-height:66px}
  .va-menu-toggle{display:flex;align-items:center;gap:9px;cursor:pointer;border:0;background:transparent;font-size:15px;font-weight:700;padding:10px}
  .va-nav{position:relative}
  .va-menu{display:none;position:absolute;top:47px;right:0;z-index:110;background:#fff;min-width:min(310px,calc(100vw - 36px));flex-direction:column;align-items:stretch;gap:0;padding:12px 22px;box-shadow:0 16px 32px rgba(0,0,0,.13);border:1px solid var(--va-line)}
  .va-menu.is-open{display:flex}
  .va-menu a{padding:11px 0;white-space:normal}
  .va-home-hero{min-height:520px}
  .va-home-hero>.wp-block-cover__inner-container{width:calc(100% - 60px)!important}
  .va-gallery-grid figure{height:235px}
}
@media(max-width:620px){
  :root{--va-header-height:70px}
  body.admin-bar .va-header{top:46px}
  .va-site-width{width:calc(100% - 30px)}
  .va-brand img,.va-brand .custom-logo{width:179px;max-height:54px}
  .va-header__inner{gap:9px}
  .va-menu-toggle{font-size:14px}
  .va-home-hero{min-height:560px;align-items:flex-end;padding-bottom:48px!important}
  .va-home-hero .wp-block-cover__image-background{object-position:center 52%}
  .va-home-hero .wp-block-cover__background{background:linear-gradient(0deg,rgba(16,23,15,.89) 0%,rgba(16,23,15,.53) 43%,rgba(16,23,15,.03) 100%)!important}
  .va-home-hero>.wp-block-cover__inner-container{width:calc(100% - 36px)!important}
  .va-home-hero h1{font-size:clamp(35px,9vw,52px)}
  .va-home-hero .va-hero-description{font-size:16px}
  .va-home-content .va-intro-section{padding:52px 19px 44px}
  .va-intro-section .va-intro-headline{font-size:29px}
  .va-intro-section p:not(.va-eyebrow){font-size:16px}
  .va-gallery-section .va-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
  .va-gallery-grid figure{height:225px}
  .va-gallery-grid>.wp-block-column:last-child{grid-column:1/-1}
  .va-gallery-grid>.wp-block-column:last-child figure{height:270px}
  .va-home-content .va-reservation-section{padding:64px 18px}
  .va-home-content .va-contact-section{padding:63px 18px}
  .va-contact-section .va-contact-columns{grid-template-columns:1fr;gap:34px}
  .va-contact-section .va-contact-image img{aspect-ratio:16/10}
  .va-footer__inner{flex-direction:column;align-items:center;text-align:center;gap:12px}
  .va-footer__links{justify-content:center}
  .va-footer-menu,.va-footer__legal{justify-content:center}
  .va-page{padding:38px 0 60px}
  .va-page-heading{margin-bottom:32px}
  .va-page.va-page--no-heading{padding-top:34px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
/* Explicit cover containment also makes preview robust when block CSS is delayed. */
.va-home-hero{position:relative;overflow:hidden}
.va-home-hero .wp-block-cover__image-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.va-home-hero .wp-block-cover__background{position:absolute;inset:0;z-index:-1}
.va-home-hero>.wp-block-cover__inner-container{display:block}

/* Align sections consistently even without Gutenberg layout-style injection. */
.va-intro-section > :not(.alignfull){max-width:var(--va-max);margin-left:auto!important;margin-right:auto!important}
.va-contact-section .va-contact-columns{max-width:var(--va-max)!important;margin-left:auto!important;margin-right:auto!important}

/* ================================================================
   0.6.2 – Consistent visual grid across the entire homepage.
   Existing Gutenberg blocks are preserved. Sections can span the
   viewport with their BACKGROUND; content stays on one 1240px grid.
   ================================================================ */
:root { --wp--style--global--wide-size: 1240px; }

/* Header, footer and the hero copy now use exactly the same gutters. */
.va-header__inner,
.va-footer .va-site-width {max-width:var(--va-max)}
.va-home-content .va-home-hero > .wp-block-cover__inner-container {
    width:min(calc(100% - var(--va-gutter) - var(--va-gutter)), var(--va-max))!important;
    max-width:var(--va-max)!important;
    margin-inline:auto!important;
}

/* The wallpaper/background is full bleed, but the text starts at
   the same left edge as the header, gallery and contact block. */
.va-home-content > .va-intro-section,
.va-home-content > .va-gallery-section,
.va-home-content > .va-reservation-section,
.va-home-content > .va-contact-section,
.va-home-content > .va-hours-section {
    width:100%!important;
    max-width:none!important;
    padding-inline:var(--va-gutter)!important;
    box-sizing:border-box;
}

/* The original Gutenberg pattern has direct child blocks rather than
   a locked-down container. Keep the original blocks editable. */
.va-home-content .va-intro-section > :is(.va-eyebrow,.va-intro-headline,p),
.va-home-content .va-reservation-section > :is(h2,.va-eyebrow,.va-booking-note,.wp-block-buttons),
.va-home-content .va-hours-section > :is(h2,p) {
    width:100%!important;
    max-width:var(--va-max)!important;
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box;
}

/* Keep the intro paragraphs comfortably readable without shifting
   their LEFT edge relative to the headline. */
.va-home-content .va-intro-section > :is(.va-intro-headline,p:not(.va-eyebrow)) {
    padding-right:clamp(0px, 12vw, 260px);
}
.va-home-content .va-intro-section > .va-eyebrow {padding-right:0}
.va-home-content .va-intro-section > .va-intro-headline {margin-bottom:19px!important}
.va-home-content .va-intro-section > p:not(.va-eyebrow) {margin-bottom:17px!important}

/* Photo strip is deliberately NOT edge-to-edge. All five pictures
   sit within the shared content container. */
.va-home-content .va-gallery-section .va-gallery-grid,
.va-home-content .va-gallery-section .wp-block-columns.va-gallery-grid {
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:12px;
    width:100%!important;
    max-width:var(--va-max)!important;
    margin:0 auto!important;
}
.va-home-content .va-gallery-section .va-gallery-grid > .wp-block-column {
    min-width:0;
    margin:0!important;
}
.va-home-content .va-gallery-section .va-gallery-grid figure {
    height:auto;
    aspect-ratio:1 / 1.12;
}
.va-home-content .va-gallery-section .va-gallery-grid figure img {
    width:100%;height:100%;object-fit:cover;
}

/* Booking background may span the viewport, but its block has the
   same content grid as everything else (centered copy is intentional). */
.va-home-content .va-reservation-section > .wp-block-group__inner-container,
.va-home-content .va-contact-section > .wp-block-group__inner-container,
.va-home-content .va-intro-section > .wp-block-group__inner-container {
    width:100%!important;
    max-width:var(--va-max)!important;
    margin-inline:auto!important;
}
.va-home-content .va-contact-section .va-contact-columns {
    width:100%!important;
    max-width:var(--va-max)!important;
    margin-inline:auto!important;
}

@media(max-width:900px){
  .va-home-content .va-gallery-section .va-gallery-grid,
  .va-home-content .va-gallery-section .wp-block-columns.va-gallery-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
  }
  .va-home-content .va-gallery-section .va-gallery-grid figure {aspect-ratio:1 / 1.08}
  .va-home-content .va-intro-section > :is(.va-intro-headline,p:not(.va-eyebrow)) {padding-right:0}
}
@media(max-width:620px){
  .va-home-content .va-gallery-section .va-gallery-grid,
  .va-home-content .va-gallery-section .wp-block-columns.va-gallery-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .va-home-content .va-gallery-section .va-gallery-grid > .wp-block-column:last-child {
    grid-column:1/-1;
  }
  .va-home-content .va-gallery-section .va-gallery-grid > .wp-block-column:last-child figure {
    height:auto;aspect-ratio:2 / 1;
  }
  .va-home-content .va-gallery-section .va-gallery-grid figure {aspect-ratio:1 / 1.05}
}

/* 0.6.7: Mobile navigation uses Via Appia's olive palette instead of
   browser/plugin button blue. Limit overrides to this theme's header. */
@media (max-width: 900px) {
  .va-header .va-menu-toggle {
    color: var(--va-green) !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: rgba(83, 100, 77, .14);
  }
  .va-header .va-menu-toggle span {
    color: inherit !important;
    -webkit-text-fill-color: currentColor;
  }
  .va-header .va-menu-toggle:hover,
  .va-header .va-menu-toggle[aria-expanded="true"] {
    color: var(--va-green-dark) !important;
  }
  .va-header .va-menu-toggle:focus-visible {
    outline: 2px solid var(--va-green);
    outline-offset: 3px;
  }
}


/* 0.6.8 – Hero-Text je nach Bildschirmbreite neu ausrichten.
   Das Originalbild und die Gutenberg-Inhalte bleiben unverändert. */
@media (min-width: 901px) {
  /* Papa bleibt auf der linken Fotoseite sichtbar; der gesamte
     Textblock sitzt rechts innerhalb des bestehenden Seitenrasters. */
  .va-home-content .va-home-hero > .wp-block-cover__inner-container {
    text-align: right;
  }
  .va-home-content .va-home-hero > .wp-block-cover__inner-container > :is(.va-hero-eyebrow,h1,.va-hero-description,.wp-block-buttons) {
    margin-left: auto;
    margin-right: 0;
  }
  .va-home-content .va-home-hero h1 {
    width: min(60%, 670px);
  }
  .va-home-content .va-home-hero .va-hero-description {
    width: min(50%, 430px);
  }
  .va-home-content .va-home-hero .wp-block-buttons {
    justify-content: flex-end;
  }
  /* Helligkeit links bleibt erhalten, Lesekontrast rechts wird verstärkt. */
  .va-home-content .va-home-hero .wp-block-cover__background {
    background: linear-gradient(to left,
      rgba(15,22,16,.84) 0%,
      rgba(15,22,16,.66) 38%,
      rgba(15,22,16,.22) 72%,
      rgba(15,22,16,.06) 100%) !important;
  }
}

@media (max-width: 900px) {
  /* Unterhalb des Desktop-Breakpoints die gesamte Textgruppe an
     die obere Bildkante setzen, statt sie unten über die Person zu legen. */
  .va-home-content .va-home-hero {
    align-items: flex-start;
    padding-top: clamp(26px, 4vw, 38px) !important;
    padding-bottom: 30px !important;
  }
  .va-home-content .va-home-hero > .wp-block-cover__inner-container {
    text-align: left;
    align-self: flex-start;
  }
  .va-home-content .va-home-hero > .wp-block-cover__inner-container > :is(.va-hero-eyebrow,h1,.va-hero-description,.wp-block-buttons) {
    margin-left: 0;
    margin-right: auto;
  }
  .va-home-content .va-home-hero .wp-block-buttons {
    justify-content: flex-start;
  }
  /* Das Bild bleibt unangetastet; oben erhält die weiße Schrift
     ausreichend Kontrast, unten bleibt das Motiv deutlich sichtbar. */
  .va-home-content .va-home-hero .wp-block-cover__background {
    background: linear-gradient(to bottom,
      rgba(15,22,16,.84) 0%,
      rgba(15,22,16,.74) 41%,
      rgba(15,22,16,.40) 67%,
      rgba(15,22,16,.08) 100%) !important;
  }
}


/* 0.6.9 – Only move the mobile hero CTA to the bottom edge.
   Existing headline, intro, image crop and desktop layout stay unchanged.
   Flex layout avoids positioning over the portrait and allows extra text
   to increase the cover height naturally on narrow screens. */
@media (max-width: 900px) {
  .va-home-content .va-home-hero > .wp-block-cover__inner-container {
    display: flex;
    flex-direction: column;
    align-self: stretch;
  }
  .va-home-content .va-home-hero .wp-block-buttons {
    margin-top: auto !important;
  }
}