/* ==========================================================================
   La Famiglia Public Menu Styles
   Version: 2025-09-18 (Consolidated / Cleaned)
   Design Targets (Tailwind parity):
     Tabs (menu names): text-3xl (1.875rem / 2.25rem baseline height not needed here)
     Section Heading:   text-xl (1.25rem / 1.75rem) bold + border
     Item Title/Price:  text-lg (1.125rem / 1.75rem)
     Description:       text-sm (0.875rem / 1.25rem)
     Background: #efe8dd (light enforced even in dark mode)
   ========================================================================== */

/* THEME VARIABLES & BASE WRAPPER ----------------------------------------- */
.public-menu-page {
  --pm-accent:        #6f2a27;
  --pm-accent-hover:  #8a3b37;
  --pm-text:          #2a2927;
  --pm-muted:         #4b5563; /* gray-600 */
  --pm-border:        #d5cec7;
  --pm-bg:            #efe8dd;
  --pm-note:          #6c6864;
  --pm-link:          #0d47b8;
  --pm-link-hover:    #073b99;
  --pm-heading:       #2a2927;

  background: var(--pm-bg);
  color: var(--pm-text);
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  padding-bottom: 4rem;
}

@media (prefers-color-scheme: dark) {
  .public-menu-page {
    /* Force same light palette in dark user preference */
    background: var(--pm-bg);
    color: var(--pm-text);
  }
}

/* PAGE SHELL -------------------------------------------------------------- */
.menu-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 3rem 1.25rem 0 1.25rem;
  box-sizing: border-box;
}

/* TABS (Class-based approach – RECOMMENDED) -------------------------------

  Expected markup:
  <nav class="menu-tabs">
     <a class="menu-tab menu-tab--primary is-active" href="#">Dinner Menu</a>
     <a class="menu-tab menu-tab--primary" href="#">Nostalgia Menu</a>
     <a class="menu-tab menu-tab--pdf" href="...">Download PDF</a>
  </nav>

  If you CANNOT change markup, scroll down for the alternate nth-of-type block
  (commented out) and uncomment it instead of this section.
--------------------------------------------------------------------------- */

.menu-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0;
  margin: 0 0 2.25rem;
  padding: 0;
}

.menu-tab {
  position: relative;
  display: inline-block;
  font-weight: 600;
  text-decoration: none;
  font-family: inherit;
  color: var(--pm-text);
  line-height: 1.15;
  transition: color .18s ease;
  padding: 0;
}

.menu-tab--primary {
  font-size: 1.875rem;          /* text-3xl */
  letter-spacing: 0.03em;
  margin-right: 2.2rem;
}

.menu-tab--primary + .menu-tab--primary {
  /* add separator before second primary tab */
  padding-left: 2.0rem;
}

.menu-tab--primary + .menu-tab--primary::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12%;
  height: 76%;
  width: 1px;
  background: #bfb6ae;
  opacity: 0.9;
}

.menu-tab--pdf {
  margin-left: auto;
  font-size: 1.25rem;           /* text-xl */
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--pm-link);
  text-transform: none;
  padding-bottom: 0;
  white-space: nowrap;
}

.menu-tab--pdf:hover,
.menu-tab--pdf:focus {
  text-decoration: underline;
  color: var(--pm-link-hover);
}

.menu-tab:hover,
.menu-tab:focus { color: var(--pm-accent-hover); outline: none; }
.menu-tab.is-active { color: var(--pm-accent); }

@media (max-width: 520px) {
  .menu-tab--primary {
    font-size: 1.65rem;
    margin-right: 1.6rem;
  }
  .menu-tab--primary + .menu-tab--primary {
    padding-left: 1.5rem;
  }
  .menu-tab--primary + .menu-tab--primary::before {
    left: 0;
  }
  .menu-tab--pdf {
    font-size: 1.125rem;
  }
}

/* ALTERNATE TABS (nth-of-type) --------------------------------------------
   If you cannot modify HTML to add menu-tab--primary / menu-tab--pdf classes,
   comment OUT the entire block above and UNCOMMENT this one.

   ! DO NOT LEAVE BOTH ACTIVE !
---------------------------------------------------------------------------
/*
.menu-tabs > a {
  text-transform: none !important;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  color: #000;
  line-height: 1.15;
  text-decoration: none;
  padding: 0;
  font-family: inherit;
  transition: color .18s ease;
}
.menu-tabs > a:nth-of-type(1),
.menu-tabs > a:nth-of-type(2) {
  font-size: 1.875rem !important;
  margin-right: 2rem;
  letter-spacing: 0.03em;
}
.menu-tabs > a:nth-of-type(2) {
  position: relative;
  padding-left: 2rem;
}
.menu-tabs > a:nth-of-type(2)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12%;
  height: 76%;
  width: 1px;
  background: #bfb6ae;
  opacity: 0.9;
}
.menu-tabs > a:last-of-type {
  margin-left: auto;
  font-size: 1.25rem !important;
  color: #1d4ed8 !important;
  line-height: 1.2;
}
.menu-tabs > a:last-of-type:hover { text-decoration: underline; }
.menu-tabs > a.active,
.menu-tabs > a.is-active { color: #8B3A3A !important; }
@media (max-width: 520px) {
  .menu-tabs > a:nth-of-type(1),
  .menu-tabs > a:nth-of-type(2) { font-size: 1.65rem !important; margin-right: 1.4rem; }
  .menu-tabs > a:nth-of-type(2) { padding-left: 1.4rem; }
  .menu-tabs > a:last-of-type { font-size: 1.125rem !important; }
}
*/

/* SECTION WRAPPERS ------------------------------------------------------- */
.menu-section {
  margin: 0;
  padding: 0;
}
.menu-section.first {
  border-top: none;
  padding-top: 0;
}

/* SECTION HEADING (text-xl / bold / border) ------------------------------- */
.menu-section-title {
  margin: 0 0 1rem 0;
  padding-bottom: .25rem;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
  letter-spacing: normal;
  color: var(--pm-heading);
  border-bottom: 1px solid var(--pm-border);
  text-transform: none;
}
.menu-section-title + * {
  /* slight breathing space after heading if needed */
}

/* GRID / COLUMNS --------------------------------------------------------- */
.menu-two-col {
  display: flex;
  align-items: flex-start;
  gap: 2.5rem; /* Tailwind gap-x-10 approximation */
}
.menu-col { flex: 1 1 0; min-width: 0; }

@media (max-width: 980px) {
  .menu-two-col {
    flex-direction: column;
    gap: 2rem;
  }
}

/* MENU ITEMS ------------------------------------------------------------- */
.menu-item {
  margin-bottom: 1rem;
}
.menu-item:last-child { margin-bottom: 0; }

.menu-item-head {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;           /* gap-6 */
  font-size: 1.125rem;   /* text-lg */
  line-height: 1.75rem;
  font-weight: 700;
}

.menu-item-title {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 700;
  color: var(--pm-text);
}

.menu-item-price {
  flex: 0 0 auto;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  color: var(--pm-text);
  white-space: nowrap;
  text-align: right;
  min-width: 42px;
}

.menu-item-desc {
  font-size: 0.875rem;
  line-height: 1.25rem;
  margin-top: .25rem;
  max-width: 46ch;
  color: var(--pm-muted);
  font-weight: 400;
}

@media (max-width: 640px) {
  .menu-item-head {
    font-size: 1.05rem;
    line-height: 1.5rem;
  }
  .menu-item-desc {
    font-size: 0.82rem;
    line-height: 1.2rem;
  }
}

/* FOOTNOTE / NOTES ------------------------------------------------------- */
.menu-section-note {
  margin-top: 1.25rem;
  font-size: 0.75rem;
  line-height: 1.1rem;
  color: var(--pm-note);
  max-width: 80ch;
}

.menu-empty-note {
  opacity: .7;
  font-size: 0.9rem;
  margin-top: 1rem;
}

/* SECTION SPACING REINFORCEMENT ------------------------------------------ */
.menu-section + .menu-section {
  margin-top: 3rem !important;
}
.menu-section-title {
  margin-bottom: 1.25rem;
}

/* PDF LINK LEGACY SELECTOR (if used outside tab nav) --------------------- */
.menu-download-link {
  margin-left: auto;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--pm-link);
  white-space: nowrap;
}
.menu-download-link:hover,
.menu-download-link:focus {
  text-decoration: underline;
  color: var(--pm-link-hover);
}

/* NAV / GLOBAL HEADER NORMALIZATION (Consolidated) -----------------------
   If these affect unrelated pages and you only want them on menu pages,
   scope them under .public-menu-page.
--------------------------------------------------------------------------- */
#main-nav {
  display: flex;
  column-gap: 2.5rem;
  row-gap: 0;
  margin: 0 auto;
  max-width: 1374px;
  width: 100%;
}
#main-nav a {
  letter-spacing: 0;
  margin: 0;
  padding: 0;
  font-feature-settings: "kern","liga","clig","calt";
  text-rendering: optimizeLegibility;
}

/* SITE WIDTH VARIABLES (retain if other pages rely on them) -------------- */
:root {
  --site-max: 1374px;
  --site-pad-inline: clamp(1rem, 3vw, 2.5rem);
}
.lf-site-container {
  max-width: var(--site-max);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--site-pad-inline);
  padding-right: var(--site-pad-inline);
  box-sizing: border-box;
}
.flex-header-nav,
header .flex-header-nav,
main:not(.full-bleed),
#app > main:not(.full-bleed),
footer .lf-site-container,
footer .lf-footer-inner {
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.full-bleed {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* END =================================================================== */



/* === MENU TABS UNIVERSAL PATCH START (20250918-UNIVERSAL) ==================
   Forces correct size regardless of markup variant:
   - Anchors inside .menu-tabs (nth-of-type)
   - Class-based (.menu-tab--primary / .menu-tab--pdf)
   - Buttons (.menu-toggle)
   ========================================================================== */
.public-menu-page .menu-tabs > a:nth-of-type(1),
.public-menu-page .menu-tabs > a:nth-of-type(2),
.public-menu-page .menu-tab--primary,
.public-menu-page .menu-toggle {
  font-size: 1.875rem !important;   /* text-3xl */
  line-height: 1.15 !important;
  font-weight: 600 !important;
  letter-spacing: .03em !important;
}

@media (max-width:520px){
  .public-menu-page .menu-tabs > a:nth-of-type(1),
  .public-menu-page .menu-tabs > a:nth-of-type(2),
  .public-menu-page .menu-tab--primary,
  .public-menu-page .menu-toggle {
    font-size: 1.65rem !important;
  }
}

/* Keep PDF link modest (anchor or class variant) */
.public-menu-page .menu-tabs > a:last-of-type,
.public-menu-page .menu-tab--pdf {
  font-size: 1.25rem !important;
  line-height: 1.2 !important;
  font-weight: 600;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Separator for second tab when using plain anchors */
.public-menu-page .menu-tabs > a:nth-of-type(2) {
  position: relative;
  padding-left: 2rem !important;
}
.public-menu-page .menu-tabs > a:nth-of-type(2)::before {
  content:"";
  position:absolute;
  left:0; top:12%; height:76%; width:1px;
  background:#bfb6ae; opacity:.9;
}

/* Header nav uppercase + semibold */
#main-nav a {
  text-transform: uppercase !important;
  font-weight: 600 !important;
  letter-spacing: .05em !important;
}
/* === MENU TABS UNIVERSAL PATCH END ======================================= */
/* === MENU TABS FINAL SPACING CAPS FIX START (20250918) =======================
   1. Ensures first two menu titles are large (text-3xl) and have proper gap.
   2. Restores separator offset so it is NOT jammed against first title.
   3. PDF link stays smaller.
   4. Forces header nav links uppercase + semi-bold + spaced.
   Covers anchors OR buttons (if buttons exist they inherit size from earlier patch).
============================================================================= */
.public-menu-page .menu-tabs > a:nth-of-type(1) {
  margin-right: 2.25rem !important;          /* gap after first title */
  font-size: 1.875rem !important;
  line-height: 1.15 !important;
  font-weight: 600 !important;
  letter-spacing: .03em !important;
}

.public-menu-page .menu-tabs > a:nth-of-type(2) {
  position: relative !important;
  padding-left: 2rem !important;             /* space before separator line */
  font-size: 1.875rem !important;
  line-height: 1.15 !important;
  font-weight: 600 !important;
  letter-spacing: .03em !important;
}

.public-menu-page .menu-tabs > a:nth-of-type(2)::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;                         /* aligns line inside that 2rem padding */
  top: 12% !important;
  height: 76% !important;
  width: 1px !important;
  background: #bfb6ae !important;
  opacity: .9 !important;
}

@media (max-width:520px){
  .public-menu-page .menu-tabs > a:nth-of-type(1),
  .public-menu-page .menu-tabs > a:nth-of-type(2){
    font-size:1.65rem !important;
    margin-right:1.6rem !important;
  }
  .public-menu-page .menu-tabs > a:nth-of-type(2){
    padding-left:1.5rem !important;
  }
}

/* Keep PDF link modest */
.public-menu-page .menu-tabs > a:last-of-type {
  font-size:1.25rem !important;
  line-height:1.2 !important;
  font-weight:600 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}

/* Header nav uppercase + semi-bold (stronger specificity fallback set) */
#main-nav a,
header #main-nav a,
nav#main-nav a {
  text-transform: uppercase !important;
  font-weight: 600 !important;
  letter-spacing: .05em !important;
}

/* === MENU TABS FINAL SPACING CAPS FIX END ================================== */