/* Yalla Falafel - World Cup 2026 Germany Support Theme v1
   Drop this file into your project root as style-worldcup.css
   Include it AFTER existing style.css:
   <link rel="stylesheet" href="style-worldcup.css?v=wm2026-1">
*/

:root {
  --yf-green: #174a2b;
  --yf-green-2: #2f7a3b;
  --yf-gold: #c49a2d;
  --yf-cream: #fff8e5;
  --yf-paper: #fffaf0;
  --yf-red: #dd2b28;
  --yf-black: #171717;
  --yf-yellow: #f3c21b;
  --yf-soft-border: rgba(23, 74, 43, .14);
  --yf-shadow: 0 18px 50px rgba(23, 74, 43, .14);
}

html {
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(circle at 10% 7%, rgba(243, 194, 27, .20), transparent 28%),
    radial-gradient(circle at 92% 16%, rgba(221, 43, 40, .13), transparent 30%),
    radial-gradient(circle at 48% 0%, rgba(23, 23, 23, .07), transparent 28%),
    linear-gradient(180deg, #fffaf0 0%, #f6efd7 42%, #edf7e7 100%) !important;
  color: var(--yf-green);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    linear-gradient(25deg, transparent 0 92%, rgba(221,43,40,.16) 92% 96%, transparent 96%),
    linear-gradient(155deg, transparent 0 90%, rgba(243,194,27,.18) 90% 94%, transparent 94%),
    linear-gradient(105deg, transparent 0 93%, rgba(23,23,23,.11) 93% 96%, transparent 96%);
  background-size: 150px 150px, 190px 190px, 230px 230px;
  opacity: .48;
}

/* Navigation */
nav,
.nav,
.nav.shell,
.nav-shell,
header.site-header,
header {
  background: rgba(255, 250, 240, .84) !important;
  border-bottom: 1px solid rgba(23, 74, 43, .12) !important;
  box-shadow: 0 10px 30px rgba(23, 74, 43, .08);
  backdrop-filter: blur(14px);
}

.logo img,
.brand img,
.site-logo img,
.nav img,
header img {
  filter: drop-shadow(0 10px 18px rgba(23, 74, 43, .12));
}

/* Buttons */
button,
.btn,
.button,
a.btn,
.hero a,
.hero button,
.menu-link,
.lang-switch button,
.lang-switch a {
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background .18s ease;
}

.btn-primary,
.primary,
.hero .btn:first-of-type,
a[href*="menu"],
a[href="#menu"],
button.active,
.lang-switch .active,
.lang-switch button.active {
  background: linear-gradient(135deg, var(--yf-green), var(--yf-green-2)) !important;
  color: #fff !important;
  box-shadow: 0 14px 30px rgba(23, 74, 43, .22);
}

.btn-secondary,
.secondary,
.hero .btn:nth-of-type(2) {
  background: rgba(255, 255, 255, .78) !important;
  color: var(--yf-green) !important;
  border: 1px solid rgba(23, 74, 43, .16) !important;
}

.btn-primary:hover,
.primary:hover,
.btn-secondary:hover,
.secondary:hover,
.hero a:hover,
.hero button:hover,
.menu-link:hover,
.lang-switch button:hover {
  transform: translateY(-2px);
  filter: saturate(1.04);
}

/* Language switch */
.lang-switch,
.language-switch,
.lang {
  background: rgba(255, 255, 255, .82) !important;
  border: 1px solid rgba(23, 74, 43, .13) !important;
  box-shadow: 0 10px 26px rgba(23, 74, 43, .10);
  position: relative;
}

.lang-switch::after,
.language-switch::after {
  content: "";
  position: absolute;
  height: 3px;
  left: 16px;
  right: 16px;
  bottom: 5px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--yf-black) 0 33%, var(--yf-red) 33% 66%, var(--yf-yellow) 66% 100%);
  opacity: .55;
}

/* Hero */
.hero,
section.hero,
main > section:first-of-type {
  position: relative;
  overflow: hidden;
}

.hero::before,
section.hero::before,
main > section:first-of-type::before {
  content: "";
  position: absolute;
  inset: -40px -20px auto auto;
  width: min(46vw, 560px);
  height: min(46vw, 560px);
  background:
    radial-gradient(circle, rgba(255,255,255,.46) 0 38%, transparent 39%),
    conic-gradient(from 0deg, rgba(23,23,23,.10), rgba(221,43,40,.12), rgba(243,194,27,.15), rgba(23,23,23,.10));
  border-radius: 50%;
  opacity: .55;
  pointer-events: none;
}

.hero h1,
section.hero h1,
h1 {
  color: var(--yf-green) !important;
  letter-spacing: -.045em;
  text-shadow: 0 2px 0 rgba(255,255,255,.62);
}

.hero .eyebrow,
.eyebrow,
.kicker,
.subtitle-label {
  color: var(--yf-gold) !important;
  letter-spacing: .22em;
  font-weight: 900;
}

/* small seasonal badge after hero text */
.hero p:last-of-type::after,
section.hero p:last-of-type::after {
  content: "  ⚽ WM-Feeling bei Yalla Falafel";
  display: inline-block;
  margin-top: .55rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  color: var(--yf-green);
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(90deg, var(--yf-black), var(--yf-red), var(--yf-yellow)) border-box;
  border: 1px solid transparent;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(23, 74, 43, .08);
}

/* visual card with new World Cup design */
.hero-card,
.brand-card,
.hero .card,
.hero-visual,
.hero-image,
.visual-card {
  position: relative;
  background:
    linear-gradient(rgba(255,255,255,.70), rgba(255,255,255,.70)),
    url("assets/worldcup-yalla-hero.jpeg") center / cover no-repeat !important;
  border: 1px solid rgba(23, 74, 43, .14) !important;
  box-shadow: var(--yf-shadow);
}

.hero-card img,
.brand-card img,
.hero-visual img,
.hero-image img,
.visual-card img {
  border-radius: 28px;
  box-shadow: 0 18px 44px rgba(23, 74, 43, .15);
}

/* Cards and menu */
.card,
.menu-card,
.dish-card,
.contact-card,
.info-card,
.notice,
section .box {
  background: rgba(255, 255, 255, .78) !important;
  border: 1px solid var(--yf-soft-border) !important;
  box-shadow: 0 12px 36px rgba(23, 74, 43, .08);
  backdrop-filter: blur(10px);
}

.menu-card,
.dish-card {
  position: relative;
  overflow: hidden;
}

.menu-card::before,
.dish-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, var(--yf-black), var(--yf-red), var(--yf-yellow));
  opacity: .82;
}

.menu-card h3,
.dish-card h3,
.card h3 {
  color: var(--yf-green) !important;
}

/* Filters */
.category,
.filter,
.filters button,
.chip,
.tag {
  border-color: rgba(23, 74, 43, .15) !important;
  background: rgba(255,255,255,.72) !important;
  color: var(--yf-green) !important;
}

.category.active,
.filter.active,
.filters button.active,
.chip.active,
.tag.active {
  background: linear-gradient(135deg, var(--yf-green), var(--yf-green-2)) !important;
  color: #fff !important;
}

input[type="search"],
.search,
.search-box input,
.search input {
  background: rgba(255,255,255,.84) !important;
  border: 1px solid rgba(23, 74, 43, .14) !important;
  box-shadow: 0 12px 30px rgba(23, 74, 43, .08);
}

/* Contact */
#kontakt,
#contact,
.contact,
.hours {
  position: relative;
}

#kontakt::before,
#contact::before,
.contact::before {
  content: "🇩🇪 ⚽";
  position: absolute;
  right: 5%;
  top: 0;
  font-size: clamp(2.8rem, 7vw, 5rem);
  opacity: .12;
  pointer-events: none;
}

/* Gallery */
.original-menu img,
.menu-images img,
.gallery img,
img[src*="menu"] {
  border-radius: 26px;
  box-shadow: 0 18px 44px rgba(23, 74, 43, .13);
}

/* Floating top */
.back-to-top,
.to-top,
.scroll-top {
  background: linear-gradient(135deg, var(--yf-green), var(--yf-green-2)) !important;
  box-shadow: 0 16px 34px rgba(23, 74, 43, .25);
}

/* Footer */
footer,
.footer {
  background:
    linear-gradient(90deg, rgba(23,23,23,.06), rgba(221,43,40,.06), rgba(243,194,27,.10)),
    rgba(255, 250, 240, .76) !important;
  border-top: 1px solid rgba(23, 74, 43, .12);
}

/* Optional banner */
.wm-banner {
  margin: 1rem auto;
  max-width: 1120px;
  padding: .8rem 1rem;
  border-radius: 22px;
  background:
    linear-gradient(#fffaf0, #fffaf0) padding-box,
    linear-gradient(90deg, var(--yf-black), var(--yf-red), var(--yf-yellow)) border-box;
  border: 2px solid transparent;
  color: var(--yf-green);
  font-weight: 900;
  text-align: center;
  box-shadow: 0 12px 30px rgba(23, 74, 43, .10);
}

@media (max-width: 760px) {
  body::before {
    background-size: 110px 110px, 145px 145px, 170px 170px;
    opacity: .35;
  }

  .hero,
  section.hero,
  main > section:first-of-type {
    border-bottom: 1px solid rgba(23, 74, 43, .10);
  }

  .hero p:last-of-type::after,
  section.hero p:last-of-type::after {
    display: block;
    width: fit-content;
    margin-top: .75rem;
  }

  .hero-card,
  .brand-card,
  .hero .card,
  .hero-visual,
  .hero-image,
  .visual-card {
    border-radius: 30px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}
/* World Cup Theme v2 quick polish */

.hero,
section.hero,
main > section:first-of-type {
  background:
    linear-gradient(
      90deg,
      rgba(255, 250, 240, .92) 0%,
      rgba(255, 250, 240, .82) 48%,
      rgba(237, 247, 231, .72) 100%
    ) !important;
}

.hero::before,
section.hero::before,
main > section:first-of-type::before {
  opacity: .18 !important;
}

.hero p:last-of-type::after,
section.hero p:last-of-type::after {
  content: "⚽ WM-Feeling bei Yalla Falafel";
  display: block;
  width: fit-content;
  margin-top: 1rem;
  padding: .45rem .85rem;
  border-radius: 999px;
  font-size: .95rem;
  background:
    linear-gradient(#fffaf0, #fffaf0) padding-box,
    linear-gradient(90deg, #171717, #dd2b28, #f3c21b) border-box;
  border: 1px solid transparent;
  color: #174a2b;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(23, 74, 43, .12);
}

.hero-card,
.brand-card,
.hero-visual,
.hero-image,
.visual-card {
  background:
    linear-gradient(rgba(255,255,255,.16), rgba(255,255,255,.16)),
    url("assets/worldcup-yalla-hero.jpeg") center / cover no-repeat !important;
}

.hero-card img,
.brand-card img,
.hero-visual img,
.hero-image img,
.visual-card img {
  opacity: 0 !important;
}

.hero h1,
section.hero h1 {
  text-shadow: 0 2px 0 rgba(255,255,255,.75);
}

.notice,
.info-card,
.card {
  background: rgba(255,255,255,.88) !important;
}

/* Remove old WM-Feeling badge */
.hero p:last-of-type::after,
section.hero p:last-of-type::after {
  content: none !important;
  display: none !important;
}