@import url("https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;600;700;800;900&family=Inter:wght@400;500;600&display=swap");

/* Base typography/colors to match index.html */
.missteak-menu { color: #fff; }
.missteak-menu .section-title { font-family: "Crimson Pro", serif; font-size: 2rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color:#fff; margin-top: 20px; }
.missteak-menu .section-description { font-family: "Inter", sans-serif; font-size: 1.125rem; font-weight: 500; color: #fff; line-height: 1.5; }
.restaurant-quote { position: relative; display: inline-block; padding: 1.5rem 2rem; border-radius: 10px; background-color: transparent; box-shadow: none; margin: 0 auto; }
.quote-text { font-family: "Crimson Pro", serif; font-size: 1.8rem; line-height: 1.6; color: #fff; font-style: italic; position: relative; text-align: center; padding: 0 0.9rem; max-width: 900px; margin: 0 auto; display: block; }
.missteak-menu .dish-name { font-family: "Cormorant", serif; font-weight: 600; color: #fff; font-size: 1.75rem; }
.missteak-menu .dish-price { font-family: "Inter", sans-serif; font-weight: 700; color: #fff; font-size: 1.2rem; }
.missteak-menu .dish-description { font-family: "Inter", sans-serif; color: #fff; font-size: 1.3rem; font-weight: 500; line-height: 1.6; margin-top: 4px; }
.missteak-menu .dotted-line { display:block !important; flex:1; align-self:baseline; height:1px; margin:0 12px; background-image:repeating-linear-gradient(to right, rgba(255,255,255,.85) 0 2px, rgba(255,255,255,0) 2px 8px); background-position:center; background-repeat:repeat-x; background-size:8px 1px; min-width:20px; }

/* Tabs styling (ported from style.css) */
.missteak-menu .tab-row { display:flex; gap:0; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; justify-content:center; padding:0; align-items:center; max-width:1200px; margin:0 auto; scroll-snap-type:x proximity; }
.missteak-menu .tab-row::-webkit-scrollbar { display:none; }
.missteak-menu .menu-tab { font-family:"Crimson Pro", serif; border:1px solid #fff; background-color:transparent; color:#fff; font-weight:700; text-transform:uppercase; font-size: 1.8rem; letter-spacing:.5px; padding:10px 18px; display:inline-flex; align-items:center; background-clip:padding-box; transition:all .2s; scroll-snap-align:center; }
.missteak-menu .menu-tab + .menu-tab { box-shadow:none; }
.missteak-menu .menu-tab:hover { background-color:rgba(255,255,255,0.2); }
.missteak-menu .menu-tab.active { background-color:#fff; color:#000; border-color:#fff; }
.missteak-menu .menu-tab:first-child { border-top-left-radius:6px; border-bottom-left-radius:6px; }
.missteak-menu .menu-tab:last-child { border-top-right-radius:6px; border-bottom-right-radius:6px; }
.missteak-menu .tab-indicator { display: none; }
button.tab-toggle{
  display: none;
}
/* Grid responsive similar to style.css */
.missteak-menu .items-grid { display:grid; grid-template-columns:1fr; gap:32px 18px; padding: 30px 0; }
@media (min-width: 641px) and (max-width: 1024px) { .missteak-menu .items-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; } }
@media (min-width: 1025px) { .missteak-menu .items-grid { grid-template-columns: repeat(3, 1fr); gap: 40px 50px; } }

/* Make overall font sizing consistent with page */
.missteak-menu { font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1rem; line-height: 1.5; color:#fff; }
.missteak-menu .pdf-btn { padding: 10px 18px; font-family: "Crimson Pro", serif; color:#fff; border:1px solid #fff; }
/* override WP constrained layout within shortcode */
.missteak-menu:where(.is-layout-constrained) > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
:where(.is-layout-constrained) > .missteak-menu {
  max-width: none !important;
}

/* Unscoped duplicates so existing class names from index.html/style.css apply 1:1 */
.section-title { font-family: "Crimson Pro", serif; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color:#fff; }
.section-description { font-family: "Inter", sans-serif; font-size: 1.125rem; font-weight: 500; color: #fff; line-height: 1.5; }
.dish-name { font-family: "Cormorant", serif; font-weight: 600; color: #fff; font-size: 1.25rem; }
.dish-price { font-family: "Inter", sans-serif; font-weight: 700; color: #fff; font-size: 1.125rem; }
.dish-description { font-family: "Inter", sans-serif; color: #fff; font-size: 1rem; font-weight: 500; line-height: 1.6; margin-top: 4px; }
.dotted-line { display:block !important; flex:1; align-self:baseline; height:1px; margin:0 12px; background-image:repeating-linear-gradient(to right, rgba(255,255,255,.85) 0 2px, rgba(255,255,255,0) 2px 8px); background-position:center; background-repeat:repeat-x; background-size:8px 1px; min-width:20px; }
.tab-row { display:flex; gap:0; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; justify-content:center; padding:0; align-items:center; max-width:1100px; margin:0 auto; scroll-snap-type:x proximity; }
.tab-row::-webkit-scrollbar { display:none; }
.menu-tab { font-family:"Crimson Pro", serif; border:1px solid #fff; background-color:transparent; color:#fff; font-weight:700; text-transform:uppercase; font-size:1.4rem; letter-spacing:.5px; padding:10px 18px; display:inline-flex; align-items:center; background-clip:padding-box; transition:all .2s; scroll-snap-align:center; }
.menu-tab + .menu-tab { box-shadow:none; }
.menu-tab:hover { background-color:rgba(255,255,255,0.2); }
.menu-tab.active { background-color:#fff; color:#000; border-color:#fff; }
.menu-tab:first-child { border-top-left-radius:6px; border-bottom-left-radius:6px; }
.menu-tab:last-child { border-top-right-radius:6px; border-bottom-right-radius:6px; }
.items-grid { display:grid; grid-template-columns:1fr; gap:32px 18px; }
@media (min-width: 641px) and (max-width: 1024px) { .items-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; } }
@media (min-width: 1025px) { .items-grid { grid-template-columns: repeat(3, 1fr); gap: 40px 50px; } }

/* ===== FINAL OVERRIDE: ALWAYS SHOW ALL TABS (NO HORIZONTAL SCROLL REQUIRED) =====
   This override forces wrapping at all viewport widths so every section label is
   visible simultaneously. Remove if you prefer the previous responsive behavior.
*/
.missteak-menu .tab-row, .tab-row {
  flex-wrap: wrap !important;       /* allow multiple lines */
  white-space: normal !important;   /* permit wrapping */
  overflow-x: visible !important;   /* disable horizontal scroll */
  max-width: 100% !important;       /* ensure full container width */
  row-gap: 10px;
}
.missteak-menu .menu-tab, .menu-tab { flex: 0 0 auto; }
@media (max-width:480px) { .missteak-menu .menu-tab, .menu-tab { font-size:1.05rem; padding:8px 14px; } }