/*
 * BBQ Raum – Modern Layout Overlay
 * Lädt NACH dem Theme. Verändert keinen Content, nur Präsentation.
 * Behutsame Selektoren – bevorzugt bestehende Theme-Klassen.
 */

/* ---------- Design-Tokens (überschreiben nicht, ergänzen) ---------- */
:root {
  --mo-radius: 14px;
  --mo-radius-lg: 22px;
  --mo-shadow-sm: 0 1px 2px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.18);
  --mo-shadow-md: 0 4px 12px rgba(0,0,0,.28), 0 16px 40px -12px rgba(0,0,0,.55);
  --mo-shadow-glow: 0 0 0 1px rgba(232,118,58,.35), 0 20px 60px -20px rgba(232,118,58,.35);
  --mo-ease: cubic-bezier(.2,.7,.2,1);
  --mo-dur: 260ms;
  --mo-glut: #E8763A;
  --mo-glut-soft: color-mix(in oklab, #E8763A 22%, transparent);
  --mo-ink-soft: color-mix(in oklab, currentColor 12%, transparent);
  --mo-container: min(1200px, 92vw);
}

/* ---------- Base modernisieren ---------- */
html { scroll-behavior: smooth; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
body { font-feature-settings: "ss01","cv11","kern"; }

::selection { background: var(--mo-glut); color: #0b0b0e; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--mo-glut);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Skip-link sichtbar bei Fokus */
.skip-link:focus { top: 12px !important; left: 12px !important; z-index: 10000 !important; background: var(--mo-glut) !important; color: #0b0b0e !important; padding: 10px 14px !important; border-radius: 10px !important; }

/* ---------- Typo-Rhythmus ---------- */
.site-main :is(h1,h2,h3) { text-wrap: balance; letter-spacing: -0.01em; }
.site-main p, .site-main li { text-wrap: pretty; }
.site-main h2 { margin-top: clamp(2rem, 4vw, 3.25rem); }
.site-main h3 { margin-top: clamp(1.25rem, 2.5vw, 2rem); }

/* Größere, ruhigere Zeilenlänge im Fließtext */
.site-main :is(p, ul, ol, blockquote) { max-width: 68ch; }
.site-main .alignwide :is(p, ul, ol, blockquote),
.site-main .alignfull :is(p, ul, ol, blockquote) { max-width: none; }

/* ---------- Container / Sektionsluft ---------- */
.container { width: var(--mo-container); margin-inline: auto; }
.site-main > * + * { margin-top: clamp(2rem, 5vw, 4.5rem); }

/* ---------- Header: shrink on scroll ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  background: color-mix(in oklab, var(--wp--preset--color--background, #0b0b0e) 78%, transparent);
  transition: box-shadow var(--mo-dur) var(--mo-ease), padding var(--mo-dur) var(--mo-ease), background var(--mo-dur) var(--mo-ease);
}
.site-header .header-inner { padding-block: clamp(.75rem, 1.4vw, 1.25rem); transition: padding-block var(--mo-dur) var(--mo-ease); }
html.mo-scrolled .site-header { box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 10px 30px -20px rgba(0,0,0,.6); }
html.mo-scrolled .site-header .header-inner { padding-block: .55rem; }

/* ---------- Nav modernisieren ---------- */
.primary-nav a { position: relative; transition: color var(--mo-dur) var(--mo-ease); }
.primary-nav a::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: -6px; height: 2px;
  background: var(--mo-glut); transform: scaleX(0); transform-origin: left center;
  transition: transform var(--mo-dur) var(--mo-ease);
  border-radius: 2px;
}
.primary-nav a:is(:hover, [aria-current="page"])::after { transform: scaleX(1); }

/* ---------- Buttons / CTAs ---------- */
.btn, .wp-block-button__link, button.btn {
  transition: transform var(--mo-dur) var(--mo-ease),
              box-shadow var(--mo-dur) var(--mo-ease),
              background-color var(--mo-dur) var(--mo-ease),
              filter var(--mo-dur) var(--mo-ease);
  border-radius: var(--mo-radius);
  will-change: transform;
}
.btn-primary, .wp-block-button.is-style-primary .wp-block-button__link {
  box-shadow: var(--mo-shadow-glow);
}
.btn:hover, .wp-block-button__link:hover { transform: translateY(-1px); filter: brightness(1.05); }
.btn:active { transform: translateY(0); }

/* ---------- Karten / Blöcke ---------- */
.card, .anlass-card, .region-card, .wp-block-group.is-style-card, .bbqr-card {
  border-radius: var(--mo-radius-lg);
  overflow: clip;
  box-shadow: var(--mo-shadow-sm);
  transition: transform var(--mo-dur) var(--mo-ease),
              box-shadow var(--mo-dur) var(--mo-ease),
              border-color var(--mo-dur) var(--mo-ease);
  border: 1px solid var(--mo-ink-soft);
  background-clip: padding-box;
}
.card:hover, .anlass-card:hover, .region-card:hover, .bbqr-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--mo-shadow-md);
  border-color: var(--mo-glut-soft);
}

/* Bilder in Cards ruhig zoomen */
.card img, .anlass-card img, .region-card img, .bbqr-card img {
  transition: transform 600ms var(--mo-ease);
}
.card:hover img, .anlass-card:hover img, .region-card:hover img, .bbqr-card:hover img {
  transform: scale(1.03);
}

/* ---------- Hero: aspect + text balance ---------- */
.hero, .site-hero, .front-hero { position: relative; isolation: isolate; }
.hero :is(h1, .hero-title) { text-wrap: balance; }
.hero img, .site-hero img, .front-hero img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ---------- Grid-Fluidität ---------- */
.grid-auto, .cards-grid, .anlass-grid, .region-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(1rem, 2.4vw, 1.75rem);
}

/* ---------- Tabellen lesbarer ---------- */
.site-main table {
  border-collapse: separate; border-spacing: 0;
  border-radius: var(--mo-radius);
  overflow: hidden;
  border: 1px solid var(--mo-ink-soft);
  width: 100%;
}
.site-main :is(th, td) { padding: .8rem 1rem; border-bottom: 1px solid var(--mo-ink-soft); }
.site-main tr:last-child :is(th, td) { border-bottom: 0; }

/* ---------- Bilder allgemein ---------- */
img { max-width: 100%; height: auto; }
figure.wp-block-image img, .site-main img { border-radius: var(--mo-radius); }

/* ---------- Reveal-Animation (opt-in via [data-mo-reveal]) ---------- */
[data-mo-reveal] {
  opacity: 0; transform: translateY(14px);
  transition: opacity 700ms var(--mo-ease), transform 700ms var(--mo-ease);
}
[data-mo-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Footer refinen ---------- */
.site-footer { border-top: 1px solid var(--mo-ink-soft); }
.site-footer a:hover { color: var(--mo-glut); }

/* ---------- Mobile Nav polishing ---------- */
@media (max-width: 900px) {
  .primary-nav { transition: transform var(--mo-dur) var(--mo-ease), opacity var(--mo-dur) var(--mo-ease); }
  .nav-toggle span { transition: transform var(--mo-dur) var(--mo-ease), opacity var(--mo-dur) var(--mo-ease); }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .site-footer, .nav-toggle, .btn { display: none !important; }
  a { color: #000 !important; text-decoration: underline; }
}

/* ---------- Motion-preference respektieren ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  [data-mo-reveal] { opacity: 1 !important; transform: none !important; }
}