/* ============================================================
   css/menu.css — Bloomin' Acres
   Styles specific to menu.html
   ============================================================ */

/* ── Body / Page Base ───────────────────────────────────── */
body {
  font-family: var(--font-body);
  background-color: var(--earth-brown);
  background-image: url('../brand-assets/farm-background.webp');
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--earth-brown);
  line-height: 1.7;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page-wrap { flex: 1; }

/* ── Nav ─────────────────────────────────────────────────── */
.site-nav {
  background-color: #7A5540;
  padding: 1rem 2rem 1rem 4.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(237,163,57,.25);
}
.nav-logo { height: 96px; object-fit: contain; }

/* ── Nav toggle override for menu page ───────────────────── */
/* (global.css has a variant; menu page uses different positioning) */
.nav-toggle {
  position: fixed; top: 1.1rem; left: 1.25rem; z-index: 260;
  background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  padding: .4rem; border-radius: 4px;
  transition: background .2s;
}
.nav-toggle:hover { background: rgba(250,240,230,.1); }
.nav-toggle span {
  display: block; width: 22px; height: 2px;
  background: var(--cream-warm);
  border-radius: 2px;
  transition: transform .3s, opacity .3s;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Nav overlay override ────────────────────────────────── */
/* Menu page uses display:none/block instead of opacity approach */
.nav-overlay {
  display: none; position: fixed; inset: 0; z-index: 240;
  background: rgba(0,0,0,.45);
}
.nav-overlay.open { display: block; }

/* ── Sidebar hidden elements ─────────────────────────────── */
.menu-sidebar-hidden { display: none; }

/* ── Preview Bar ─────────────────────────────────────────── */
.preview-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  background: #2A1E14;
  color: rgba(250,240,230,.75);
  padding: .6rem 1.5rem;
  font-family: var(--font-body);
  font-size: .8rem;
  letter-spacing: .06em;
  position: sticky;
  top: 0;
  z-index: 200;
  border-bottom: 1px solid rgba(237,163,57,.2);
}
.preview-bar-label {
  color: rgba(237,163,57,.7);
  text-transform: uppercase;
  font-weight: 600;
}
.preview-bar-back {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: rgba(250,240,230,.85);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}
.preview-bar-back:hover { color: #EDA339; }
.preview-bar-draft {
  background: linear-gradient(135deg, #6B4C35, #4A3322);
  border-bottom-color: rgba(200,90,58,.4);
}
.preview-bar-draft .preview-bar-label {
  color: #C85A3A;
  letter-spacing: .04em;
}

/* ── Schedule Banner ─────────────────────────────────────── */
.schedule-banner {
  display: none;
  text-align: center;
  padding: .55rem 1.5rem;
  background: rgba(237,163,57,.07);
  border-bottom: 1px solid rgba(237,163,57,.1);
}
.schedule-banner-text {
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cream-warm);
  opacity: .8;
}

/* ── Page Wrapper ────────────────────────────────────────── */
.page-wrap {
  max-width: 780px;
  margin: 3rem auto 4rem;
  padding: 0 1.5rem;
}

/* ── Menu Card ───────────────────────────────────────────── */
.menu-card {
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    0 2px 4px rgba(74,51,34,.25),
    0 8px 24px rgba(74,51,34,.35),
    0 20px 60px rgba(74,51,34,.25),
    0 2px 0 rgba(237,163,57,.12) inset;
}

/* ── Template Frame ──────────────────────────────────────── */
.template-header,
.template-footer { width: 100%; height: auto; display: block; }
.template-body {
  background-image: url('../brand-assets/menu-template-middle.webp');
  background-size: 100% auto;
  background-repeat: repeat-y;
  padding: 3% 13%;
}

/* ── Section Divider ─────────────────────────────────────── */
.section-divider {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.85rem 0 0.4rem;
}
.section-divider:first-child { margin-top: 0; }
.section-divider::before {
  content: '';
  flex: 1;
  min-width: 16px;
  height: 7px;
  background-image: url('../brand-assets/brushstroke-left.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.section-divider::after {
  content: '';
  flex: 1;
  min-width: 16px;
  height: 7px;
  background-image: url('../brand-assets/brushstroke-right.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* ── Wheat Separator ─────────────────────────────────────── */
.wheat-sep-wrap { text-align: center; padding: 0.6rem 0; }
.wheat-sep { height: 28px; width: auto; }

/* ── Section Title ───────────────────────────────────────── */
.section-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--earth-brown);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Menu Item ───────────────────────────────────────────── */
.menu-item { padding: .35rem 0; }
.menu-item-row {
  display: flex;
  align-items: baseline;
  gap: .5rem;
}
.item-name {
  font-family: 'Lora', Georgia, serif;
  font-size: .88rem;
  color: var(--earth-brown);
  text-decoration: none;
  transition: color .15s;
}
.item-name:hover { color: var(--earth-mid); text-decoration: underline; text-underline-offset: 2px; }
.item-dots {
  flex: 1;
  border-bottom: 1.5px dotted rgba(74,51,34,.3);
  margin-bottom: 3px;
  min-width: 12px;
}
.item-price {
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 500;
  color: var(--earth-brown);
  white-space: nowrap;
}

/* ── Item Action Buttons ─────────────────────────────────── */
.menu-item-actions {
  display: flex; align-items: center; gap: .35rem;
  margin-top: .2rem;
  margin-left: .25rem;
}
.btn-fav {
  background: none; border: 1px solid rgba(74,51,34,.18);
  border-radius: 5px; cursor: pointer;
  padding: .18rem .45rem;
  color: rgba(74,51,34,.45);
  font-size: .72rem;
  display: flex; align-items: center; gap: .2rem;
  transition: color .2s, border-color .2s, background .2s;
}
.btn-fav:hover, .btn-fav.active {
  color: var(--berry-red);
  border-color: rgba(139,58,58,.35);
  background: rgba(139,58,58,.06);
}
.btn-fav.active svg { fill: var(--berry-red); }
.btn-view {
  background: none; border: 1px solid rgba(74,51,34,.18);
  border-radius: 5px;
  padding: .18rem .55rem;
  font-family: var(--font-body);
  font-size: .7rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--earth-mid);
  text-decoration: none;
  transition: color .2s, border-color .2s, background .2s;
}
.btn-view:hover {
  color: var(--earth-brown);
  border-color: rgba(74,51,34,.4);
  background: rgba(74,51,34,.06);
}
.btn-add-cart {
  background: none; border: 1px solid rgba(74,51,34,.18);
  border-radius: 5px; cursor: pointer;
  padding: .18rem .55rem;
  font-family: var(--font-body);
  font-size: .7rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--sage-dark);
  transition: color .2s, border-color .2s, background .2s;
}
.btn-add-cart:hover {
  color: var(--earth-brown);
  border-color: var(--sage-dark);
  background: rgba(78,110,100,.08);
}

/* ── Variations Button + Dropdown ────────────────────────── */
.btn-options {
  background: none; border: 1px solid rgba(74,51,34,.18);
  border-radius: 5px; cursor: pointer;
  padding: .18rem .55rem;
  font-family: var(--font-body);
  font-size: .7rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--earth-mid);
  transition: color .2s, border-color .2s, background .2s;
}
.btn-options:hover {
  color: var(--earth-brown);
  border-color: rgba(74,51,34,.4);
  background: rgba(74,51,34,.06);
}
.btn-options.open { border-color: rgba(74,51,34,.4); color: var(--earth-brown); }
.variation-dropdown {
  display: none;
  margin: .4rem .25rem 0;
  background: rgba(74,51,34,.05);
  border: 1px solid rgba(74,51,34,.12);
  border-radius: 5px;
  overflow: hidden;
}
.variation-dropdown.open { display: block; }
.variation-dropdown-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: .35rem .75rem;
  font-family: var(--font-body);
  font-size: .75rem;
  color: var(--earth-brown);
  border-bottom: 1px solid rgba(74,51,34,.07);
  transition: background .15s;
}
.variation-dropdown-row:last-child { border-bottom: none; }
.variation-dropdown-row:hover { background: rgba(74,51,34,.07); }
.variation-dropdown-name { font-weight: 500; }
.variation-dropdown-price { color: var(--earth-mid); margin-right: .4rem; }
.variation-dd-actions { display: flex; align-items: center; gap: .3rem; }
.variation-dd-cart {
  background: none; border: 1px solid rgba(74,51,34,.18); border-radius: 4px;
  padding: .15rem .45rem; cursor: pointer;
  font-family: var(--font-body); font-size: .68rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--sage-dark);
  transition: background .15s, border-color .15s;
}
.variation-dd-cart:hover { background: rgba(78,110,100,.1); border-color: var(--sage-dark); }
.variation-dd-fav {
  background: none; border: 1px solid rgba(74,51,34,.18); border-radius: 4px;
  padding: .15rem .4rem; cursor: pointer; color: rgba(74,51,34,.45);
  font-size: .82rem; line-height: 1;
  transition: color .15s, border-color .15s, background .15s;
}
.variation-dd-fav:hover, .variation-dd-fav.active {
  color: var(--berry-red); border-color: rgba(139,58,58,.35);
  background: rgba(139,58,58,.06);
}

/* ── Toast ───────────────────────────────────────────────── */
#menu-toast {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--earth-brown);
  color: var(--farm-cream);
  padding: .6rem 1.3rem; border-radius: 99px;
  font-size: .8rem; font-weight: 500;
  opacity: 0;
  transition: opacity .25s, transform .25s;
  pointer-events: none; z-index: 10000;
  white-space: nowrap;
}
#menu-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── SEO Fallback (static content for crawlers, removed by JS) ── */
#seo-fallback { padding: 1.5rem 0; }
#seo-fallback h1 { font-family: var(--font-display); font-size: 1.5rem; margin-bottom: .75rem; }
#seo-fallback h2 { font-family: var(--font-display); font-size: 1.15rem; margin: 1rem 0 .5rem; }
#seo-fallback ul { padding-left: 1.25rem; margin-bottom: 1rem; }
#seo-fallback li { margin-bottom: .4rem; }
#seo-fallback p { margin-bottom: .75rem; }
#seo-fallback a { color: var(--earth-brown); text-decoration: underline; }

/* ── Skeleton (hidden until JS swaps in) ────────────────── */
#skeleton { display: none; }

/* ── Loading Skeleton ────────────────────────────────────── */
.skeleton-line {
  height: 1rem;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(74,51,34,.08) 25%, rgba(74,51,34,.15) 50%, rgba(74,51,34,.08) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  margin-bottom: .75rem;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── Skeleton width variants ─────────────────────────────── */
.skeleton-line-w40 { width: 40%; margin-bottom: 1rem; }
.skeleton-line-w90 { width: 90%; }
.skeleton-line-w85 { width: 85%; }
.skeleton-line-w80 { width: 80%; margin-bottom: 1.25rem; }
.skeleton-line-w75 { width: 75%; }

/* ── Error State ─────────────────────────────────────────── */
.load-error {
  text-align: center;
  padding: 3rem 1rem;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--earth-mid);
  font-size: 1.1rem;
}
.load-error.menu-coming-soon { padding: 2rem 0; }

/* ── Footer ──────────────────────────────────────────────── */
.site-footer {
  text-align: center;
  padding: 2.5rem 1rem;
  background-color: var(--earth-brown);
  border-top: 1px solid rgba(237,163,57,.1);
}
.footer-copy {
  font-size: .75rem;
  color: rgba(250,240,230,.35);
  letter-spacing: .06em;
}