/* =====================================================================
   Namaste India – „Apple-Feinschliff“ für die Website
   (Skills apple-design + mobile-native: sofortiges Feedback, keine klebenden
   Hover-Zustände, iOS-Bewegungskurven, Material-Kopfzeile, Bedienungshilfen)
   ===================================================================== */

/* ---------- Touch: kein grauer Blitz, kein 300-ms-Verzug, kein Markieren von Knöpfen ---------- */
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
a, button, .btn, .tab-link, .tab-menu a, .button-nav, .header__nav-button, [role="button"], label, summary {
  touch-action: manipulation;
}
.btn, .tab-link, .button-nav, .header__nav-button, .tab-menu a, .ni-order-fab {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}

/* Links reagierten mit 0,5 s Verzögerung auf alles – jetzt schnell und nur auf Farben */
a { transition: color .15s ease, background-color .15s ease, opacity .15s ease, box-shadow .15s ease; }
.btn { transition: transform .1s cubic-bezier(.2,.8,.2,1), box-shadow .1s cubic-bezier(.2,.8,.2,1), background-color .15s ease, color .15s ease; }

/* ---------- Sofortiges Feedback beim Drücken ---------- */
/* Die Knöpfe haben einen „Sockel“ (5-px-Schatten) – beim Drücken sinken sie physisch ein */
.btn.btn-primary:active, .btn-secondary:active { transform: translateY(3px); box-shadow: 0 2px 0 0 #957A43; }
.button-nav:active, .card:active, .play-button:active { transform: scale(.97); }
.play-button:active { transform: translate(-50%, -50%) scale(.94); }
.tab-link:active, .tab-menu ul li > a:active, .nav-links li a:active { opacity: .65; }

/* ---------- Hover nur mit echter Maus (auf dem Handy bleiben sonst Zustände „kleben“) ---------- */
@media (hover: none), (pointer: coarse) {
  .btn.btn-primary:hover { background: #BDA26B; box-shadow: 0 5px 0 0 #957A43; }
  .btn-secondary:hover { background: #fff; color: #BDA26B; box-shadow: 0 5px 0 0 #957A43; }
  .card:hover { transform: none; }
  .card:hover .card-title { color: #60694B; }
  .play-button:hover { transform: translate(-50%, -50%); }
  .nav-links li a:not(.active):hover { color: #fff; }
  .small-icon.slick-arrow:hover { opacity: .5; }
  .button-nav:hover { background: #FFFFFF26; }
  .tab-link:hover { color: #4a4032; }
  .tab-link.active:hover { color: #fff; }
}

/* ---------- Bildschirmhöhe & Notch ---------- */
.banner_wrapper { height: 100vh; height: 100svh; }            /* nie unter der Adressleiste abgeschnitten */
.page-overlay { height: 100vh; height: 100dvh; }
.footer_bottom { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }

/* ---------- Kopfzeile: wird beim Scrollen zur Glas-Leiste (wie Safari / iOS) ---------- */
.header_wrap { transition: background-color .3s ease, padding .3s cubic-bezier(.32,.72,0,1), box-shadow .3s ease; }
.header_row { transition: padding .3s cubic-bezier(.32,.72,0,1); }
.logo img, .logo { transition: max-width .3s cubic-bezier(.32,.72,0,1); }
body.ni-scrolled .header_wrap {
  position: fixed; top: 0;
  background: rgba(38, 42, 29, .72) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 .5px 0 rgba(255,255,255,.12), 0 8px 24px rgba(0,0,0,.12);
  padding-top: env(safe-area-inset-top, 0px);
  animation: niHeaderIn .35s cubic-bezier(.32,.72,0,1);
}
body.ni-scrolled .header_row { padding: 10px 0; }
body.ni-scrolled .logo { max-width: 180px; }
body.ni-scrolled .nav-links li a { padding-top: 14px; padding-bottom: 14px; }
@keyframes niHeaderIn { from { transform: translateY(-100%); } to { transform: none; } }
@media (max-width: 992px) { body.ni-scrolled .logo { max-width: 150px; } }
/* Mobil-Menü läuft über der Glas-Leiste */
body.open-menu.ni-scrolled .header_wrap { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---------- Mobil-Menü: iOS-Bewegungskurve, Notch, Ziehen zum Schließen ---------- */
@media (max-width: 992px) {
  .header_item.menu_mobile {
    height: 100vh; height: 100dvh;
    padding-top: calc(30px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px));
    transition: left .45s cubic-bezier(.32,.72,0,1);
    overscroll-behavior: contain; overflow-y: auto; touch-action: pan-y;
    will-change: transform;
  }
  .header_item.menu_mobile.ni-dragging { transition: none; }
  .page-overlay { transition: opacity .35s ease, visibility .35s; }
  .nav-links li a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---------- Speisekarte: Kategorien als wischbare Leiste statt umbrechender Zeilen ---------- */
@media (max-width: 900px) {
  .tab-nav {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; padding: 8px 10px 0; overscroll-behavior-x: contain;
  }
  .tab-nav::-webkit-scrollbar { display: none; }
  .tab-link { flex: none; min-height: 44px; scroll-snap-align: start; }
}
.tab-link { min-height: 44px; }

/* ---------- Typografie: große Überschriften enger (Apple: Tracking je nach Größe) ---------- */
.banner_content h2, .about_content h2, .interesting-facts-row h2, .booking-title h2, .philosophy_head h2,
.celebrate-content h2, .menu-title, .gift_content h2, .inner_banner h1, .press-content h2, .online_order h2 {
  letter-spacing: -0.015em;
}
.banner_content h2 { line-height: 1.15; }

/* ---------- Fokus sichtbar (Tastatur, Schalter-Steuerung, VoiceOver) ---------- */
a:focus-visible, .btn:focus-visible, button:focus-visible, .tab-link:focus-visible {
  outline: 2px solid #BDA26B; outline-offset: 3px;
}
.form-group input:focus-visible, .form-group select:focus-visible, .form-group textarea:focus-visible,
.newsletter_wrap .form-control:focus-visible {
  outline: 2px solid #BDA26B; outline-offset: 2px;
}

/* ---------- Eingabefelder: kein automatisches Hineinzoomen auf iPhone/iPad ---------- */
/* Seite ist auf Tablets auf 80 % / Handys 90 % skaliert – Felder bleiben dadurch ≥ 16 px */
@media (max-width: 992px) {
  main input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), main select, main textarea,
  .footer_wrap input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]) { font-size: 20px !important; }
}

/* ---------- Kontrast: weiße Schrift auf Gold war schwer lesbar (2,3 : 1) – jetzt dunkel (8 : 1), wie in der App ---------- */
.btn.btn-primary, .btn.btn-primary:hover, .btn.btn-primary:active { color: #1f1f1f; }

/* ---------- Bedienungshilfen ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .card:hover, .card:active, .btn:active, .button-nav:active { transform: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  body.ni-scrolled .header_wrap { background: #2f3524 !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .button-nav { background: #3b4130; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  .play-button { background: rgba(0,0,0,.55); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .btn.btn-primary { background: #7a5f2c; box-shadow: 0 5px 0 0 #4d3b18; }
  .form-group input, .form-group select, .form-group textarea { border-color: #6b5d46; }
  .tab-content .item-desc, .about_content p, .tab-content .card-intro { color: #2b2419; }
}
