@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: #2d2d2d; }
.missteak-menu .section-title { font-family: "Crimson Pro", serif; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }
.missteak-menu .section-description { font-family: "Inter", sans-serif; font-size: 1.125rem; font-weight: 500; color: #777; 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: #4a4a4a; 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: #2d2d2d; font-size: 1.25rem; }
.missteak-menu .dish-price { font-family: "Inter", sans-serif; font-weight: 700; color: #2d2d2d; font-size: 1.125rem; }
.missteak-menu .dish-description { font-family: "Inter", sans-serif; color: #777; font-size: 1rem; 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(0,0,0,.65) 0 2px, rgba(0,0,0,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:1100px; 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 #2d2d2d; background-color:transparent; color:#2d2d2d; 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; }
.missteak-menu .menu-tab + .menu-tab { box-shadow:none; }
.missteak-menu .menu-tab:hover { background-color:#f0f0f0; }
.missteak-menu .menu-tab.active { background-color:#8b4513; color:#fff; border-color:#8b4513; }
.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 { position:absolute; height:4px; background:linear-gradient(90deg, rgba(139,69,19,1), rgba(160,82,45,.9)); bottom:-6px; left:0; width:0; border-radius:4px; transition:transform 240ms cubic-bezier(0.2,0.8,0.2,1), width 240ms cubic-bezier(0.2,0.8,0.2,1); pointer-events:none; z-index:30; }

/* Grid responsive similar to style.css */
.missteak-menu .items-grid { display:grid; grid-template-columns:1fr; gap:18px 18px; }
@media (min-width: 641px) and (max-width: 1024px) { .missteak-menu .items-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px) { .missteak-menu .items-grid { grid-template-columns: repeat(3, 1fr); gap: 28px 40px; } }

/* 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; }
.missteak-menu .pdf-btn { padding: 10px 18px; font-family: "Crimson Pro", serif; }
/* 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:#2d2d2d; }
.section-description { font-family: "Inter", sans-serif; font-size: 1.125rem; font-weight: 500; color: #777; line-height: 1.5; }
.dish-name { font-family: "Cormorant", serif; font-weight: 600; color: #2d2d2d; font-size: 1.25rem; }
.dish-price { font-family: "Inter", sans-serif; font-weight: 700; color: #2d2d2d; font-size: 1.125rem; }
.dish-description { font-family: "Inter", sans-serif; color: #777; 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(0,0,0,.65) 0 2px, rgba(0,0,0,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 #2d2d2d; background-color:transparent; color:#2d2d2d; 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:#f0f0f0; }
.menu-tab.active { background-color:#8b4513; color:#fff; border-color:#8b4513; }
.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; }
.tab-indicator { position:absolute; height:4px; background:linear-gradient(90deg, rgba(139,69,19,1), rgba(160,82,45,.9)); bottom:-6px; left:0; width:0; border-radius:4px; transition:transform 240ms cubic-bezier(0.2,0.8,0.2,1), width 240ms cubic-bezier(0.2,0.8,0.2,1); pointer-events:none; z-index:30; }
.items-grid { display:grid; grid-template-columns:1fr; gap:18px 18px; }
@media (min-width: 641px) and (max-width: 1024px) { .items-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px) { .items-grid { grid-template-columns: repeat(3, 1fr); gap: 28px 40px; } }