/*
Theme Name: Sirtaki
Theme URI: https://restaurant-sirtakigl.de/
Author: Restaurant Sirtaki
Description: Mobile-first Theme für das griechische Restaurant Sirtaki in Glauchau. Warme Bordeaux/Kupfer/Gold-Palette, Fraunces/Karla-Typografie, Speisekarte über einen eigenen Beitragstyp (ACF), Öffnungszeiten & Kontakt über den Customizer.
Version: 1.4.1
Requires PHP: 7.4
Text Domain: sirtaki
*/

/* ==========================================================================
   Design-Tokens
   ========================================================================== */
@font-face{
  font-family:'Fraunces';
  font-style:italic;
  font-weight:500;
  font-display:swap;
  src:url('assets/fonts/fraunces-italic500.woff2') format('woff2');
}
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('assets/fonts/fraunces-600.woff2') format('woff2');
}
@font-face{
  font-family:'Karla';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('assets/fonts/karla-400.woff2') format('woff2');
}
@font-face{
  font-family:'Karla';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('assets/fonts/karla-700.woff2') format('woff2');
}
@font-face{
  font-family:'Park Lane NF';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('assets/fonts/park-lane-nf.woff2') format('woff2');
}

:root{
  --bg:#FBF1DF;
  --bg-alt:#F1E2C2;
  --text:#2E2119;
  --text-muted:#6B5B4C;
  --primary:#6E1F2A;
  --primary-600:#8C2F3D;
  --copper-700:#9C4A1F;
  --copper-800:#7C3B18;
  --copper-500:#B85C2B;
  --gold:#C99A3C;
  --olive:#6E7B4E;
  --olive-700:#5C6841;
  --border:#DDC9A3;
  --white:#FFFFFF;
  --error:#9C2B1F;

  --font-display:'Fraunces', Georgia, 'Iowan Old Style', serif;
  --font-body:'Karla', -apple-system, 'Segoe UI', sans-serif;

  --shadow-sm:0 1px 3px rgba(110,31,42,0.14);
  --shadow-md:0 6px 20px rgba(110,31,42,0.18);
  --shadow-lg:0 16px 40px rgba(60,15,20,0.28);

  --space-2:0.5rem;
  --space-3:0.75rem;
  --space-4:1rem;
  --space-6:1.5rem;
  --space-8:2rem;
  --space-12:3rem;
  --space-16:4rem;

  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:22px;
  --radius-full:999px;

  --container-max:1200px;
  --nav-height:64px;
}

/* ==========================================================================
   Reset & Basics
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding-top:var(--nav-height);
}
img{ max-width:100%; display:block; height:auto; }
::selection{ background:var(--copper-700); color:var(--white); }

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.12;
  text-wrap:balance;
  margin:0;
  color:var(--primary);
}
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

a{ color:var(--copper-700); text-decoration-color:rgba(156,74,31,0.4); }
a:hover{ text-decoration-color:currentColor; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--copper-700);
  outline-offset:3px;
  border-radius:3px;
}
.screen-reader-text{
  position:absolute !important;
  width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px);
  white-space:nowrap;
  border:0; padding:0; margin:-1px;
}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:1000;
  background:var(--primary); color:var(--white); padding:0.75rem 1.25rem; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

.wrap{ max-width:var(--container-max); margin:0 auto; padding:0 1.25rem; }

.eyebrow{
  display:block;
  font:700 0.72rem/1.2 var(--font-body);
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:var(--copper-700);
  margin:0 0 0.75rem;
}
.lede{ font-size:1.1rem; color:var(--text-muted); max-width:62ch; }

section{ padding:3.25rem 0; }
section + section{ border-top:1px solid var(--border); }
.section-head{ margin-bottom:1.75rem; }
.section-head h2{ font-size:1.55rem; }
.section-head .lede{ margin-top:0.5rem; }

@media (min-width:56.25em){
  section{ padding:4.5rem 0; }
  .section-head h2{ font-size:1.9rem; }
}

/* ==========================================================================
   Griechische Mäander-Trennlinie (dezent, max. 1-2x pro Seite)
   ========================================================================== */
.meander{ height:10px; background-repeat:repeat-x; background-position:left center; background-size:20px 10px; }
.meander-copper{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10' viewBox='0 0 20 10'%3E%3Cpath d='M0 8 H5 V2 H15 V8 H20' fill='none' stroke='%239C4A1F' stroke-width='1.6'/%3E%3C/svg%3E"); }
.meander-gold{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10' viewBox='0 0 20 10'%3E%3Cpath d='M0 8 H5 V2 H15 V8 H20' fill='none' stroke='%23C99A3C' stroke-width='1.6'/%3E%3C/svg%3E"); background-color:var(--primary); }

/* ==========================================================================
   Navigation
   ========================================================================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--nav-height);
  background:var(--bg);
  border-bottom:1px solid transparent;
  transition:background 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.site-header.is-transparent{ background:linear-gradient(180deg, rgba(20,6,8,0.8) 0%, rgba(20,6,8,0.55) 60%, rgba(20,6,8,0) 100%); border-color:transparent; }
.site-header.is-scrolled{ background:var(--bg); box-shadow:var(--shadow-sm); border-color:var(--border); }
.site-header .wrap{ height:100%; display:flex; align-items:center; justify-content:space-between; }

.brand{ display:flex; flex-direction:column; line-height:1.1; text-decoration:none; }
.brand .brand-name{ font-family:var(--font-display); font-weight:600; font-size:1.45rem; color:var(--primary); }
.site-header.is-transparent:not(.is-scrolled) .brand .brand-name{ color:var(--white); text-shadow:0 2px 10px rgba(0,0,0,0.75); }
.brand .brand-sub{ font:600 0.62rem var(--font-body); text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); }
.site-header.is-transparent:not(.is-scrolled) .brand .brand-sub{ color:rgba(255,255,255,0.9); text-shadow:0 1px 6px rgba(0,0,0,0.7); }

.nav-toggle{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:0; background:none; border:none; cursor:pointer;
}
.nav-toggle span{ display:block; width:22px; height:2px; background:var(--primary); margin:0 auto; transition:transform 200ms ease, opacity 200ms ease; }
.site-header.is-transparent:not(.is-scrolled) .nav-toggle span{ background:var(--white); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nav-mobile{
  position:fixed; inset:0; top:var(--nav-height); z-index:99;
  background:var(--primary); color:var(--white);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:var(--space-8) var(--space-6) var(--space-12);
  transform:translateY(-8px); opacity:0; pointer-events:none;
  transition:opacity 200ms ease, transform 200ms ease;
}
.nav-mobile.is-open{ transform:translateY(0); opacity:1; pointer-events:auto; }
.nav-mobile ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-6); }
.nav-mobile a{ color:var(--white); text-decoration:none; font:600 1.6rem var(--font-display); }
.nav-mobile a:hover, .nav-mobile a:focus-visible{ color:var(--gold); }
.nav-mobile .nav-mobile-footer{ display:flex; flex-direction:column; gap:var(--space-4); }
.nav-mobile .btn-primary{ align-self:flex-start; }

.nav-desktop{ display:none; }
@media (min-width:56.25em){
  .nav-desktop{ display:flex; align-items:center; gap:var(--space-8); }
  .nav-desktop ul{ display:flex; gap:var(--space-6); list-style:none; margin:0; padding:0; }
  .nav-desktop a{
    color:var(--text); text-decoration:none; font:600 0.94rem var(--font-body);
    padding-bottom:4px; border-bottom:2px solid transparent; transition:color 150ms ease, border-color 150ms ease;
  }
  .site-header.is-transparent:not(.is-scrolled) .nav-desktop a{ color:var(--white); text-shadow:0 1px 6px rgba(0,0,0,0.35); }
  .nav-desktop a:hover, .nav-desktop a.is-active{ color:var(--copper-700); border-color:var(--copper-700); }
  .site-header.is-transparent:not(.is-scrolled) .nav-desktop a:hover,
  .site-header.is-transparent:not(.is-scrolled) .nav-desktop a.is-active{ color:var(--white); border-color:var(--gold); }
  .nav-toggle, .nav-mobile{ display:none !important; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  font:700 0.95rem var(--font-body);
  border-radius:var(--radius-sm);
  padding:0.72rem 1.4rem;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:background 150ms ease, color 150ms ease, transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
  text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  min-height:44px;
}
.btn-primary{ background:var(--copper-700); color:var(--white); }
.btn-primary:hover{ background:var(--copper-800); color:var(--white); transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn-secondary{ background:transparent; color:var(--primary); border-color:var(--primary); }
.btn-secondary:hover{ background:var(--primary); color:var(--white); }
.btn-ghost{ background:rgba(255,255,255,0.1); color:var(--white); border-color:rgba(255,255,255,0.65); }
.btn-ghost:hover{ background:rgba(255,255,255,0.22); }
.btn:active{ transform:translateY(0); }
.btn[disabled]{ background:#D9CFC0; color:#8A8577; border-color:transparent; cursor:not-allowed; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;
  min-height:88svh;
  margin-top:calc(var(--nav-height) * -1);
  display:flex; align-items:flex-end;
  color:var(--white);
  overflow:hidden;
}
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media picture{ display:block; width:100%; height:100%; }
.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero__media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(46,11,16,0.30) 0%, rgba(46,11,16,0.30) 14%, rgba(46,11,16,0.85) 58%, rgba(46,11,16,0.96) 100%);
}
.hero__fallback{
  position:absolute; inset:0;
  background:linear-gradient(135deg, var(--copper-500) 0%, var(--primary) 55%, #2E0B10 100%);
}
.hero__fallback svg{ position:absolute; inset:0; width:100%; height:100%; opacity:0.12; }
.hero__content{ position:relative; z-index:1; padding:var(--space-8) 1.75rem var(--space-12); width:100%; }
.hero h1{
  font-family:'Park Lane NF', var(--font-display);
  font-weight:400;
  text-transform:uppercase;
  color:var(--white);
  font-size:3.4rem;
  line-height:1.05;
  letter-spacing:0.03em;
  margin:0 0 1rem;
  text-shadow:0 2px 14px rgba(0,0,0,0.6);
}
.hero .lede{ color:rgba(255,255,255,0.92); font-size:1.1rem; text-shadow:0 1px 8px rgba(0,0,0,0.45); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:0.75rem; margin-top:1.5rem; }
.hero__status{
  display:inline-flex; align-items:center; gap:0.4rem;
  margin-top:1.25rem; font-size:0.8rem; font-weight:600;
  color:var(--white);
  background:rgba(20,6,8,0.55); border:1px solid rgba(255,255,255,0.35);
  padding:0.4rem 0.85rem; border-radius:var(--radius-full);
  backdrop-filter:blur(4px);
}
.hero__status .dot{ width:7px; height:7px; border-radius:50%; background:#7FBF7F; }
.hero__status.is-closed .dot{ background:#E28B7A; }

@media (min-width:56.25em){
  .hero{ min-height:62vh; max-height:620px; }
  .hero__content{ max-width:60%; padding:var(--space-8) 1.75rem var(--space-16); }
  .hero h1{ font-size:5rem; }
}

/* ==========================================================================
   Speisekarte
   ========================================================================== */
.menu-filter{
  display:flex; gap:0.5rem; overflow-x:auto; padding:0.25rem 0 1.75rem;
  scrollbar-width:none; position:sticky; top:var(--nav-height); z-index:10; background:var(--bg);
}
.menu-filter::-webkit-scrollbar{ display:none; }
.pill{
  font:600 0.82rem var(--font-body); white-space:nowrap;
  padding:0.5rem 1rem; border-radius:var(--radius-full);
  border:1px solid var(--olive-700); color:var(--olive-700); background:transparent;
  text-decoration:none; cursor:pointer;
}
.pill.is-active, .pill:hover{ background:var(--olive-700); color:var(--white); }

.dish-grid{ display:grid; grid-template-columns:1fr; gap:var(--space-6); align-items:start; }
@media (min-width:37.5em){ .dish-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:56.25em){ .dish-grid{ grid-template-columns:1fr 1fr 1fr; } }

.dish-category{ margin-bottom:var(--space-12); scroll-margin-top:calc(var(--nav-height) + 60px); }
.dish-category h3{ font-size:1.4rem; margin-bottom:var(--space-6); }

.dish-card{
  background:var(--bg-alt); border-radius:var(--radius-md); overflow:hidden;
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
}
.dish-card__media{ aspect-ratio:4/3; background:var(--white); display:flex; align-items:center; justify-content:center; }
.dish-card__media img{ width:100%; height:100%; object-fit:cover; }
.dish-card__media svg{ width:44%; opacity:0.5; }
.dish-card__body{ padding:var(--space-4); }
.dish-card__row{ display:flex; justify-content:space-between; gap:0.5rem; flex-wrap:wrap; }
.dish-card__name{ font-family:var(--font-display); font-weight:600; font-size:1.1rem; }
.dish-card__price{ font-weight:700; color:var(--copper-700); white-space:nowrap; }
.dish-card__desc{ color:var(--text-muted); font-size:0.92rem; margin-top:0.4rem; }
.dish-card__tags{ display:flex; flex-wrap:wrap; gap:0.35rem; margin-top:0.6rem; }
.tag{ font:600 0.68rem var(--font-body); border:1px solid var(--olive-700); color:var(--olive-700); padding:0.15rem 0.55rem; border-radius:var(--radius-full); }

/* ==========================================================================
   Über uns
   ========================================================================== */
.about-grid{ display:grid; gap:var(--space-8); }
.about-grid img{ border-radius:var(--radius-lg); box-shadow:var(--shadow-md); }
.about-quote{
  font-family:var(--font-display); font-style:italic; font-weight:500;
  color:var(--copper-700); font-size:1.3rem; line-height:1.4;
  background:var(--bg-alt); border-radius:var(--radius-md);
  padding:var(--space-6); margin-top:var(--space-6);
}
@media (min-width:56.25em){
  .about-grid{ grid-template-columns:45% 1fr; align-items:center; }
}

/* ==========================================================================
   Öffnungszeiten & Standort
   ========================================================================== */
.info-grid{ display:grid; gap:var(--space-6); }
@media (min-width:56.25em){ .info-grid{ grid-template-columns:1fr 1fr; } }
.info-card{ background:var(--white); border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-6); box-shadow:var(--shadow-sm); }
.info-card h3{ font-size:1.15rem; margin-bottom:var(--space-4); }
.hours-row{ display:flex; justify-content:space-between; padding:0.4rem 0; font-size:0.95rem; }
.hours-row.is-today{ background:var(--bg-alt); margin:0 calc(var(--space-6) * -1); padding:0.4rem var(--space-6); border-left:3px solid var(--copper-700); font-weight:700; border-radius:0 4px 4px 0; }
.info-card .addr{ margin-top:0.25rem; color:var(--text-muted); }
.info-card .tel-link{ display:inline-block; margin-top:var(--space-3); font-weight:700; text-decoration:none; }

/* ==========================================================================
   Kontakt / Reservierung
   ========================================================================== */
.form-grid{ display:grid; gap:var(--space-4); max-width:640px; }
.form-row{ display:grid; gap:var(--space-4); }
@media (min-width:37.5em){ .form-row--3{ grid-template-columns:1fr 1fr 1fr; } }
.field{ display:flex; flex-direction:column; gap:0.4rem; }
.field label{ font:600 0.85rem var(--font-body); color:var(--text); }
.field input, .field select, .field textarea{
  height:48px; padding:0 var(--space-3);
  border:1px solid var(--border); border-radius:var(--radius-sm);
  font:400 1rem var(--font-body); background:var(--white); color:var(--text);
}
.field textarea{ height:auto; padding:var(--space-3); min-height:120px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--copper-700); box-shadow:0 0 0 3px rgba(156,74,31,0.18); outline:none;
}
.field .error-msg{ color:var(--error); font-size:0.82rem; }
.honeypot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-notice{ padding:var(--space-4); border-radius:var(--radius-sm); margin-bottom:var(--space-4); font-weight:600; }
.form-notice--success{ background:#E7EFE0; color:#3C5A2E; }
.form-notice--error{ background:#F5E1DC; color:var(--error); }
.contact-alt{ display:flex; flex-wrap:wrap; gap:0.75rem; margin-top:var(--space-6); }

/* ==========================================================================
   Galerie
   ========================================================================== */
.gallery-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-2); }
@media (min-width:37.5em){ .gallery-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:56.25em){ .gallery-grid{ grid-template-columns:repeat(4,1fr); gap:var(--space-3); } }
.gallery-grid button{ padding:0; border:none; background:none; cursor:zoom-in; aspect-ratio:1/1; overflow:hidden; border-radius:var(--radius-sm); }
.gallery-grid img{ width:100%; height:100%; object-fit:cover; transition:transform 300ms ease; }
.gallery-grid button:hover img{ transform:scale(1.05); }

.lightbox{ position:fixed; inset:0; z-index:200; background:rgba(20,6,8,0.92); display:none; align-items:center; justify-content:center; padding:var(--space-6); }
.lightbox.is-open{ display:flex; }
.lightbox img{ max-width:100%; max-height:80vh; border-radius:var(--radius-sm); margin:0 auto; }
.lightbox figcaption{ color:var(--white); text-align:center; margin-top:var(--space-3); font-size:0.9rem; }
.lightbox .lb-close, .lightbox .lb-prev, .lightbox .lb-next{
  position:absolute; background:rgba(255,255,255,0.12); color:var(--white); border:1px solid rgba(255,255,255,0.4);
  border-radius:var(--radius-full); width:44px; height:44px; cursor:pointer; font-size:1.2rem;
}
.lightbox .lb-close{ top:var(--space-4); right:var(--space-4); }
.lightbox .lb-prev{ left:var(--space-4); top:50%; transform:translateY(-50%); }
.lightbox .lb-next{ right:var(--space-4); top:50%; transform:translateY(-50%); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background:var(--primary); color:var(--white); }
.site-footer .wrap{ padding:var(--space-12) 1.25rem var(--space-8); display:grid; gap:var(--space-8); }
.site-footer h4{ font-family:var(--font-display); font-weight:600; font-size:1.1rem; color:var(--white); margin-bottom:0.6rem; }
.site-footer .addr{ font-size:0.9rem; opacity:0.85; line-height:1.7; }
.site-footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.5rem; }
.site-footer a{ color:rgba(255,255,255,0.9); text-decoration:none; }
.site-footer a:hover{ color:var(--gold); }
.social-links{ display:flex; flex-direction:row !important; gap:var(--space-3) !important; }
.social-links a{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,0.1); }
.footer-legal{ border-top:1px solid rgba(255,255,255,0.18); padding:var(--space-4) 1.25rem; font-size:0.8rem; opacity:0.7; display:flex; flex-wrap:wrap; gap:0.5rem 1.25rem; justify-content:space-between; }
.footer-legal ul{ flex-direction:row; gap:1.25rem; }
@media (min-width:56.25em){
  .site-footer .wrap{ grid-template-columns:1.4fr 1fr 1fr 1fr; }
}

/* ==========================================================================
   Front-page Teaser-Sektionen
   ========================================================================== */
.teaser-grid{ display:grid; gap:var(--space-6); }
@media (min-width:56.25em){ .teaser-grid{ grid-template-columns:repeat(3,1fr); } }
.teaser-card{ background:var(--white); border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-6); box-shadow:var(--shadow-sm); }
.teaser-card h3{ font-size:1.15rem; margin-bottom:0.5rem; }
.teaser-card p{ color:var(--text-muted); font-size:0.95rem; }
.teaser-card a{ display:inline-block; margin-top:var(--space-3); font-weight:700; text-decoration:none; }

.entry-content{ max-width:70ch; }
.entry-content > * + *{ margin-top:1em; }

.table-x{ overflow-x:auto; }