/* style.css — Modern, mobile-first, responsive styles for Pizza-n-smash */
:root{
  --bg:#0f1214; /* very dark */
  --card:#111417;
  --muted:#9aa5a6;
  --accent:#e4572e; /* warm tomato/orange */
  --accent-2:#f29f05; /* warm yellow */
  --glass: rgba(255,255,255,0.03);
  --radius:12px;
  --max-width:1100px;
  --font-sans: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  --font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
}

/* Basic reset */
*{box-sizing:border-box}
html,body{height:100%;overflow-x:hidden}
body{
  margin:0;
  font-family:var(--font-sans), sans-serif;
  background:linear-gradient(180deg,var(--bg),#0b0d0e);
  color:#e9ecef;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  padding-bottom:32px; /* reduced default space; large gap restored on small screens */
}
/* ensure container always has comfortable padding */
.container{max-width:var(--max-width);width:100%;padding-left:1rem;padding-right:1rem;margin:0 auto}

/* Ensure direct children of container don't overflow and are centered */
.container > *{max-width:var(--max-width);margin-left:auto;margin-right:auto}

/* Safety: force sections and hero-inner to obey container padding on very small screens */
@media (max-width:640px){
  /* add guaranteed safe gutter on the viewport and avoid double-padding */
  body{padding-left:1rem;padding-right:1rem}
  .container{padding-left:0;padding-right:0}

  /* ensure inner children don't overflow the reduced width */
  .container > *{max-width:100%;padding-left:0;padding-right:0}
  img, iframe, .grid, .map-wrap{max-width:100%;width:100%;box-sizing:border-box}

  /* Ensure grid figures have inner spacing and don't touch the viewport edges */
  .grid{padding-left:0; padding-right:0; gap:.5rem}
  .grid figure{padding:0;background:var(--glass)}
}

/* Strong mobile gutter enforcement */
@media (max-width:640px){
  /* Ensure container always has a visible gutter */
  .container{padding-left:1rem !important;padding-right:1rem !important}

  /* Also enforce gutters on direct sections to be safe */
  section{padding-left:0.5rem !important;padding-right:0.5rem !important;box-sizing:border-box}

  /* Prevent any element from overflowing viewport */
  img, iframe, .grid, .grid figure, .map-wrap{max-width:100% !important;box-sizing:border-box}

  /* Ensure the main content has left/right safe area (use env(safe-area-inset) for iOS) */
  body{padding-left:env(safe-area-inset-left,1rem);padding-right:env(safe-area-inset-right,1rem)}
}

/* End strong mobile gutter enforcement */

/* Strong global mobile gutter (final) */
@media (max-width:900px){
  body{padding-left:1rem !important;padding-right:1rem !important}
  .container{padding-left:0 !important;padding-right:0 !important}
  .hero-inner{padding-left:0 !important;padding-right:0 !important}
  section{padding-left:0 !important;padding-right:0 !important}
  .mobile-cta-bar{left:1rem !important;right:1rem !important}
}
@media (min-width:901px){
  body{padding-left:0 !important;padding-right:0 !important}
}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:0;top:0;width:auto;height:auto;padding:.5rem;background:#fff;color:#000;z-index:9999}

/* Header */
.site-header{position:sticky;top:0;background:linear-gradient(180deg,rgba(15,18,20,0.9),rgba(15,18,20,0.6));backdrop-filter:blur(4px);z-index:50}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:0.75rem 1rem}
.brand .logo{font-family:var(--font-display), sans-serif;font-weight:700;margin:0;font-size:1.1rem;letter-spacing:0.5px}
.brand .tag{margin:0;color:var(--muted);font-size:0.85rem}
.top-ctas{display:flex;gap:.5rem}

/* Button visual refinement */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .8rem;border-radius:12px;background:transparent;border:1px solid rgba(255,255,255,0.04);color:#fff;font-weight:700;font-size:.95rem;transition:transform .13s ease,box-shadow .13s ease,filter .13s ease}
.btn:focus{outline:none}

/* Primary CTA (used in header .btn-cta and hero primary buttons) */
.btn-cta, .button.large{
  background: linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#0c0c0c;
  padding: .9rem 1.3rem; /* slightly larger tap target */
  font-size: 1.02rem;
  border-radius: 16px;
  border: none;
  box-shadow: 0 12px 30px rgba(228,87,46,0.20);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn-cta:hover, .button.large:hover{transform:translateY(-4px);filter:brightness(1.02)}
.btn-cta:focus, .button.large:focus{outline:3px solid rgba(242,159,5,0.28);outline-offset:3px}

/* Secondary / ghost CTA */
.btn-ghost, .button.alt{
  background:transparent;border:1px solid rgba(255,255,255,0.09);color:var(--accent-2);padding:.6rem .95rem;border-radius:12px;font-weight:700
}
.btn-ghost:hover, .button.alt:hover{background:rgba(255,255,255,0.02);transform:translateY(-2px)}

/* Ensure hero buttons are centered and visually consistent */
.hero-ctas{display:flex;flex-direction:column;gap:.75rem;align-items:center;margin:1rem 0;justify-content:center}
@media (min-width:640px){
  .hero-ctas{flex-direction:row}
}

/* Hero */
.hero{padding:3.5rem 0;background:linear-gradient(180deg,rgba(20,22,23,0.3),transparent)}
.hero-inner{text-align:center;padding:2rem 1rem}
.hero-title{font-family:var(--font-display), sans-serif;font-size:2.2rem;margin:.2rem 0}
.hero-sub{color:var(--muted);margin:0 0 1rem}
.hero-ctas{display:flex;flex-direction:column;gap:.75rem;align-items:center;margin:1rem 0;justify-content:center}
.button{display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 1.1rem;border-radius:999px;background:var(--card);color:#fff;border:1px solid rgba(255,255,255,0.04);font-weight:700}
.button.large{font-size:1rem;padding:1rem 1.2rem}
.button.alt{background:transparent;border:2px solid rgba(255,255,255,0.06);color:var(--accent-2)}
.hero-note{color:var(--muted);font-size:.95rem;margin-top:1rem}

/* About */
.about{padding:1.5rem 0}
.about h3{font-size:1.25rem;margin-bottom:.5rem}
.features{list-style:none;padding:0;margin:.5rem 0 0;display:flex;flex-direction:column;gap:.3rem;color:var(--muted)}

/* Gallery */
.gallery{padding:1.5rem 0}
.gallery h3{margin-bottom:.75rem}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.grid figure{margin:0;background:var(--glass);padding:.25rem;border-radius:10px;overflow:hidden}
.grid img{width:100%;height:180px;object-fit:cover;display:block}
.grid figcaption{padding:.5rem;color:var(--muted);font-size:.9rem}

/* Location & Map */
.location{padding:1.5rem 0}
.address{font-weight:600;color:#fff;margin-bottom:.5rem}
.map-wrap{background:#000;border-radius:10px;overflow:hidden;height:220px}
.map-wrap iframe{border:0;width:100%;height:100%}
.route-cta{margin-top:.6rem}

/* Opening hours styling: centered, compact and readable */
.opening-hours{
  max-width:520px;
  width:100%;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding:0.9rem 1rem;
  border-radius:12px;
  margin:0.75rem auto;
  text-align:center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.03);
}
.opening-hours h4{margin:0 0 .5rem;font-size:1.05rem}
.opening-hours dl{margin:0}
.opening-hours dt{font-weight:700;margin-top:0.4rem;color:#ffffff}
.opening-hours dd{margin:0;color:var(--muted);line-height:1.4}
.opening-hours time{font-weight:600;color:var(--accent-2)}

@media (max-width:640px){
  .opening-hours{padding:.75rem .9rem;border-radius:10px}
  .opening-hours h4{font-size:1rem}
}

/* Footer */
.site-footer{border-top:1px solid rgba(255,255,255,0.03);padding:0.75rem 0;margin-top:1rem;background:transparent}
.footer-inner{display:flex;flex-direction:column;gap:.75rem}
.site-footer .attribution{text-align:center;color:var(--muted);font-size:.85rem;margin-top:.25rem;margin-bottom:0}

/* Reduce large bottom safe area used for mobile sticky bar on wider screens */
/* removed previous min-width:960px rule; instead restore large padding only on small screens */
@media (max-width:700px){
  body{padding-bottom:80px !important}
}

/* Mobile sticky CTA bar */
.mobile-cta-bar{display:none;gap:0;border-radius:12px;position:fixed;left:1rem;right:1rem;bottom:1rem;background:transparent;padding:.35rem;justify-content:space-between;z-index:60;box-shadow:0 6px 18px rgba(0,0,0,0.12)}
/* Keep a neutral helper class for layout only; visual styles come from .btn-cta / .btn-ghost */
.mobile-cta{display:inline-flex;align-items:center;justify-content:center;gap:.5rem}
.mobile-cta:hover{filter:brightness(.98);transform:translateY(-2px)}

/* Ensure mobile-ghost CTA matches desktop .btn-ghost styles exactly */
/* Replaced with a stronger dark background so the ghost button is less transparent but still pops */
.mobile-cta.btn-ghost,
.mobile-cta-bar .btn-ghost{
  /* darker, nearly solid background to improve legibility on varied backdrops */
  background: linear-gradient(180deg,#0b0b0b,#141414);
  color: #ffffff;
  /* subtle light border to help the button 'sit' on dark backgrounds */
  border: 1px solid rgba(255,255,255,0.06);
  padding: .7rem .95rem;
  border-radius: 12px;
  font-weight: 700;
  /* give it a stronger lift so it visually stands out from the page */
  box-shadow: 0 10px 28px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.02) inset;
  /* keep a touch of backdrop blur for depth on devices that support it */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform .13s ease, box-shadow .13s ease, filter .13s ease, background .13s ease;
}
.mobile-cta.btn-ghost:hover,
.mobile-cta-bar .btn-ghost:hover{
  background: linear-gradient(180deg,#1b1b1b,#0f0f0f);
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 14px 36px rgba(0,0,0,0.65), 0 1px 0 rgba(255,255,255,0.03) inset;
}
.mobile-cta.btn-ghost:focus,
.mobile-cta-bar .btn-ghost:focus{
  outline: 3px solid rgba(228,87,46,0.18);
  outline-offset: 3px;
}

/* When both mobile-cta present, give spacing */
.mobile-cta + .mobile-cta{margin-left:.5rem}

/* Remove any leftover SVG size rules that may add spacing before text */
.btn svg, .button svg{display:none !important}
.btn img{display:none !important}

/* Responsive adjustments */
@media (min-width:640px){
  .hero-title{font-size:3rem}
  .hero-ctas{flex-direction:row}
  .grid img{height:220px}
  .header-inner{padding:1rem}
  .footer-inner{flex-direction:row;justify-content:space-between;align-items:center}
}
@media (min-width:960px){
  .grid{grid-template-columns:repeat(4,1fr);gap:1rem}
  .map-wrap{height:320px}
  .hero{padding:4.5rem 0}
  .mobile-cta-bar{display:none}
}

/* Section centering for consistent, readable layout */
/* Handle both variants: section carries .container or contains a .container child */
section.container,
section > .container,
section.container .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center; /* ensure paragraph text is centered */
}

/* Constrain gallery grid and center it */
.gallery .grid, .grid{
  max-width: 900px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Ensure map and other wide elements are centered and constrained */
.map-wrap{max-width:720px;width:100%;margin-left:auto;margin-right:auto}

/* Ensure text blocks in sections don't span full width on large screens */
section.container p, .about p, .features li{
  max-width: 820px;
}

/* Keep lists and footer centered */
.features{align-items:center}
.footer-inner{align-items:center}

/* Small adjustments for very narrow screens */
@media (max-width:420px){
  section.container, section > .container{padding-left:.75rem;padding-right:.75rem}
  .features li{max-width:100%}
}

/* Accessibility focus styles */
:focus{outline:3px solid rgba(226,87,46,0.8);outline-offset:2px}

/* Small header variant for impressum */
.site-header.small .logo{font-size:1rem}
.site-footer.small{padding-top:.5rem}
@media (max-width:700px){
  /* strict safe gutter: container occupies viewport minus 2rem (1rem each side) */
  .container{width:calc(100% - 2rem) !important;max-width:none !important;padding-left:0 !important;padding-right:0 !important;margin-left:1rem !important;margin-right:1rem !important}

  /* force safe margins for main sections and inner wrappers */
  main, section, .hero-inner, .gallery, .about, .location, .menu, .footer-inner{
    margin-left:0 !important;margin-right:0 !important;padding-left:0 !important;padding-right:0 !important;box-sizing:border-box
  }

  /* ensure media and grid elements do not overflow the enforced container */
  img, iframe, .grid, .grid figure, .map-wrap{max-width:100% !important;width:100% !important;box-sizing:border-box !important}

  /* Keep gallery single column to avoid edge contact */
  .grid{grid-template-columns:1fr !important;gap:.6rem}

  /* Hide header nav CTAs on narrow screens to avoid crowded header */
  .top-ctas{display:none !important}

  /* Show mobile sticky CTA bar on narrow screens */
  .mobile-cta-bar{display:flex !important;gap:.5rem;justify-content:space-between}
  .mobile-cta-bar .btn{flex:1;min-width:0;display:inline-flex;justify-content:center}
  .mobile-cta-bar .btn + .btn{margin-left:.5rem}
}

/* Final enforcement: ensure every section's inner container is centered and constrained */
section.container,
section > .container,
section.container .container,
.hero-inner,
.container.section-inner {
  max-width: 900px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

/* Center media and grids inside centered sections */
section .grid, section .map-wrap, section img, section iframe {
  margin-left: auto !important;
  margin-right: auto !important;
}
section .grid{justify-items:center}
section .grid figure{margin-left:auto;margin-right:auto}

/* Ensure hero-inner constrained */
.hero-inner{max-width:900px;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem}

/* Safety: force gallery to one column below 520px to avoid edge bleed */
@media (max-width:520px){
  .grid{grid-template-columns:1fr !important}
  section{padding-left:1rem !important;padding-right:1rem !important}
}

/* Final center enforcement for inner wrappers to guarantee visual centering */
.header-inner, .hero-inner, main, .footer-inner, .container {
  max-width: var(--max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  box-sizing: border-box !important;
}

/* Also ensure sections don't change the centering by negative margins */
section, header, footer {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Footer social icons */
.footer-inner .social{
  display:flex;
  gap:.6rem;
  align-items:center;
  justify-content:center;
  margin-top:0.5rem;
}
.footer-inner .social-link{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;padding:.25rem;transition:transform .12s ease,box-shadow .12s ease}
.footer-inner .social-link img{width:28px;height:28px;display:block}
.footer-inner .social-link:hover{transform:translateY(-3px);box-shadow:0 6px 18px rgba(0,0,0,0.45)}
.footer-inner .social-link:focus{outline:3px solid rgba(242,159,5,0.18);outline-offset:3px}

@media (max-width:420px){
  .footer-inner .social img{width:24px;height:24px}
  .footer-inner .social{gap:.45rem}
}

/* Subtile, kontinuierliche Seiteffekte & Animationen */
@media (prefers-reduced-motion: no-preference){
  /* Gentle floating motion for gallery / figures */
  @keyframes floatY {
    0% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
    100% { transform: translateY(0); }
  }

  /* Slow pulsing scale for CTAs */
  @keyframes subtlePulse {
    0% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-3px) scale(1.02); }
    100% { transform: translateY(0) scale(1); }
  }

  /* Slow background gradient shift for hero overlay */
  @keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  /* Subtle image parallax (float/tilt) for gallery items */
  .grid figure{
    will-change: transform;
    animation: floatY 6s ease-in-out infinite;
  }

  /* Make CTA gently pulse and shift gradient slowly */
  .btn-cta{
    animation: subtlePulse 6s ease-in-out infinite;
    background-size: 200% 200%;
    /* keep existing gradient but allow shifting */
  }

  /* Hero overlay that animates a soft gradient shimmer */
  .hero{position:relative;overflow:hidden}
  /* Hero overlay intentionally disabled per user request */
  .hero::before{display:none !important}

  /* Ensure hero content is above the overlay */
  .hero-inner{position:relative;z-index:2}

  /* Subtle hover/active micro-interaction for images: slight scale on hover */
  .grid figure img{transition:transform .45s cubic-bezier(.2,.8,.2,1)}
  .grid figure:hover img{transform:scale(1.03)}
}

/* Respect reduced motion preferences by disabling animations */
@media (prefers-reduced-motion: reduce){
  .grid figure, .btn-cta, .hero::before, .grid figure img{animation: none !important; transition: none !important}
}