@import url("/food-base.css");

.skip-link-food {
  position: fixed;
  z-index: 2000;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  color: #fff;
  background: #0b3f53;
  border-radius: 10px;
  transform: translateY(-150%);
}

.skip-link-food:focus { transform: translateY(0); }

.ecosystem-link-food {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 16px;
  color: #fff;
  background: #0b3f53ed;
  border: 1px solid #e2be6a99;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 750;
  box-shadow: 0 15px 34px #082f4030;
}

.food-language-switcher {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 3px;
  border: 1px solid #1a627e35;
  border-radius: 999px;
  background: #fff9;
}

.food-language-switcher a {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0 8px;
  color: #1a627e;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .06em;
}

.food-language-separator {
  color: #1a627e99;
  font-size: 12px;
  font-weight: 750;
  line-height: 1;
}

.food-unified-policy a {
  color: #0b3f53;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 1024px) {
  .food-unified-policy a,
  .footer-contact .button--gold {
    box-sizing: border-box;
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
  }
}

.food-language-switcher a.is-active,
.food-language-switcher a[aria-current="page"] {
  color: #fff;
  background: #0b3f53;
}

.food-language-switcher--fallback {
  position: fixed;
  z-index: 90;
  top: 16px;
  right: 18px;
}

.field-error { min-height: 1em; color: #9e3d2f; font-size: 11px; font-weight: 600; }
.empty-menu { margin: 28px 0; text-align: center; color: #496771; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.not-found { min-height: 65vh; display: grid; align-content: center; justify-items: start; }
.not-found h1 { max-width: 760px; color: #0b3f53; font-size: clamp(48px, 8vw, 88px); }
.not-found p:not(.eyebrow) { color: #496771; font-size: 18px; }

.dish-body { padding: 20px; }
.dish-body > span, .journal-grid article span { color: #1a627e; text-transform: uppercase; letter-spacing: .11em; font-size: 10px; font-weight: 800; }
.dish-body h3 { margin: 9px 0 11px; color: #0b3f53; font-size: 22px; }
.dish-body p { min-height: 62px; color: #496771; font-size: 12px; }
.dish-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 15px; border-top: 1px solid #13384717; }
.dish-meta b { color: #0b3f53; font-size: 11px; }
.dish-meta div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.dish-meta em { padding: 4px 7px; color: #1a627e; background: #eaf4f6; border-radius: 20px; font-size: 9px; font-style: normal; text-transform: uppercase; }

.weekly-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.weekly-grid article { min-height: 240px; padding: 25px; background: #fff; border: 1px solid #13384714; border-radius: 22px; }
.weekly-grid article > span { color: #1a627e; font-family: Georgia, serif; font-size: 34px; }
.weekly-grid h3 { margin: 18px 0 14px; color: #0b3f53; font-size: 24px; }
.weekly-grid p { color: #496771; font-size: 13px; }

.journal-grid article > a { display: block; height: 100%; }
.journal-grid article > a > div { padding: 24px; }
.journal-grid article strong { color: #1a627e; font-size: 12px; }
.video-card h3 { padding: 18px 4px; color: #0b3f53; font-size: 20px; }
.live-full { max-width: 1440px; }
.health-note { border-left: 3px solid #e2be6a; background: #fffaf0; }
.week-section { overflow: hidden; }
.rating-card > span { color: #946600; }
.brand,
.phone-link,
.text-link,
.article-source a,
.article-cta > a,
.footer-bottom a {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
}
.nav a { min-width: 44px; text-align: center; }
.button--small,
.chip,
.dish-order,
.search input,
.book-view button,
.modal-close { min-width: 44px; min-height: 44px; }
footer a,
footer button {
  display: flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
}
.stack-dots {
  gap: 0;
  justify-content: flex-start;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}
.stack-dots::-webkit-scrollbar { display: none; }
.stack-dots button,
.stack-dots button.active {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  background: transparent;
}
.stack-arrow { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
.stack-dots button::before {
  width: 7px;
  height: 7px;
  content: "";
  background: #b8cace;
  border-radius: 999px;
}
.stack-dots button.active::before { width: 24px; background: #1a627e; }

@media (max-width: 1150px) {
  .phone-link { display: none; }
  .weekly-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .food-language-switcher a { min-width: 44px; min-height: 44px; padding: 0 6px; }
  .menu-toggle { min-width: 44px; min-height: 44px; cursor: pointer; }
  .header-actions { gap: 8px; }
  .ecosystem-link-food {
    position: absolute;
    top: 80px;
    right: 12px;
    bottom: auto;
    width: 60px;
    height: 60px;
    min-height: 60px;
    padding: 0;
    overflow: hidden;
    color: transparent;
    background: transparent url("/_next/image?url=%2Fnarayana-sattva-planet-triton.webp&w=128&q=75") center / contain no-repeat;
    border: 0;
    border-radius: 50%;
    font-size: 0;
    box-shadow: none;
    filter: drop-shadow(0 9px 13px #0b3f5340);
  }
  .ecosystem-link-food span { display: none; }
  .ecosystem-link-food:focus-visible { outline: 2px solid #0b8f99; outline-offset: 4px; }
  body:has(> main > .hero) .ecosystem-link-food { top: 820px; }
}

@media (max-width: 620px) {
  .header-shell { gap: 8px; }
  .brand span { display: none; }
  .food-language-switcher { order: 1; }
  .food-language-switcher--fallback { top: 12px; right: 10px; }
  .menu-toggle { order: 2; }
  .ecosystem-link-food { right: 10px; bottom: 10px; }
  .weekly-grid { grid-template-columns: 1fr; }
  .dish-body p { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .skip-link-food, .ecosystem-link-food { transition: none; }
}