/* =============================================================
   Mixit7 Restaurant Menu Stylesheet (shared)
   =============================================================
   Generic, brand-agnostic stylesheet for restaurant menu pages.
   Used across all Mixit7 client sites.

   PER-SITE CUSTOMIZATION:
   Each site overrides brand tokens via menu-overrides.css (loaded
   after this file). Tokens to override:

   :root {
     --mxt-menu-primary: #7a1f2b;          // brand color
     --mxt-menu-primary-hover: #5e1620;    // darker for hover
     --mxt-menu-primary-soft: #faf3f4;     // tinted bg for highlights
     --mxt-menu-border: #e5d5d8;           // soft brand border
     --mxt-menu-text-dark: #222;
     --mxt-menu-text-mid: #666;
     --mxt-menu-text-light: #999;
     --mxt-menu-font-heading: 'Quicksand', sans-serif;
     --mxt-menu-font-body: 'Poppins', sans-serif;
   }

   HTML STRUCTURE:
   Content files use .mxt-menu wrapper with .mxt-menu-section blocks.
   See the restaurant-menu-builder skill for the authoritative template.

   LOADING:
   Loaded conditionally by menu-functions.php on pages tagged with
   'mxt-menu-page' body class.
   ============================================================= */

/* ======================== BRAND TOKEN DEFAULTS ========================
   These defaults ensure the stylesheet works even without a per-site
   override. Sites SHOULD override via menu-overrides.css but if they
   don't, these neutral defaults will apply.
   ===================================================================== */
:root {
  --mxt-menu-primary: #7a1f2b;
  --mxt-menu-primary-hover: #5e1620;
  --mxt-menu-primary-soft: #faf3f4;
  --mxt-menu-border: #e5d5d8;
  --mxt-menu-border-light: #f5f0f1;
  --mxt-menu-text-dark: #222;
  --mxt-menu-text-mid: #666;
  --mxt-menu-text-light: #999;
  --mxt-menu-text-muted: #888;
  --mxt-menu-font-heading: 'Quicksand', sans-serif;
  --mxt-menu-font-body: 'Poppins', sans-serif;
}

/* ======================== MENU WRAPPER ======================== */
.mxt-menu{color:#333;font-family:var(--mxt-menu-font-body);line-height:1.5;position:relative;--site-header-h:0px}
.mxt-menu *{box-sizing:border-box}

/* ---- Hero intro (optional; most sites let Elementor handle the hero) ---- */
.mxt-menu-hero{text-align:center;padding:2rem 1.5rem 1rem;max-width:780px;margin:0 auto}
.mxt-menu-hero h1{font-family:var(--mxt-menu-font-heading);color:var(--mxt-menu-primary);font-size:2.2rem;margin:0 0 1rem;font-weight:600;letter-spacing:.03em}
.mxt-menu-hero p{margin:0;color:var(--mxt-menu-text-mid);font-size:1rem;font-weight:300}

/* ---- Mobile horizontal nav + hamburger (hidden on desktop) ---- */
.mxt-menu-mobile-nav{display:none;position:sticky;top:var(--site-header-h);z-index:10;background:#fff;border-bottom:1px solid var(--mxt-menu-border);align-items:center;gap:.5rem}
/* Hide carte sticky nav when Elementor off-canvas mobile menu is open */
body:has(.e-off-canvas[aria-hidden="false"]) .mxt-menu-mobile-nav{display:none !important}
.mxt-menu-mobile-nav-burger{flex:none;background:none;border:none;padding:.75rem 1rem;cursor:pointer;color:var(--mxt-menu-primary);font-size:1.3rem;line-height:1;border-right:1px solid var(--mxt-menu-border)}
.mxt-menu-mobile-nav-scroll{flex:1;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.mxt-menu-mobile-nav-scroll::-webkit-scrollbar{display:none}
.mxt-menu-mobile-nav-scroll a{display:inline-block;padding:.85rem .8rem;color:var(--mxt-menu-text-mid);text-decoration:none;font-size:.92rem;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;font-family:var(--mxt-menu-font-body);font-weight:400}
.mxt-menu-mobile-nav-scroll a.active{color:var(--mxt-menu-primary);border-bottom-color:var(--mxt-menu-primary);font-weight:500}

/* ---- Main layout: sidebar + content ---- */
.mxt-menu-main{display:flex;gap:0;max-width:1200px;margin:0 auto}

/* ---- Desktop sidebar ---- */
.mxt-menu-sidebar{flex:0 0 240px;border-right:1px solid var(--mxt-menu-border);padding:1.5rem 0}
.mxt-menu-sidebar-sticky{position:sticky;top:calc(var(--site-header-h) + 16px);max-height:calc(100vh - var(--site-header-h) - 32px);overflow-y:auto;padding:0 .5rem 0 1.5rem}
.mxt-menu-sidebar-sticky::-webkit-scrollbar{width:6px}
.mxt-menu-sidebar-sticky::-webkit-scrollbar-thumb{background:var(--mxt-menu-border);border-radius:3px}
.mxt-menu-sidebar-group{margin-bottom:1.5rem}
.mxt-menu-sidebar-group:last-child{margin-bottom:0}
.mxt-menu-sidebar-group p{font-family:var(--mxt-menu-font-heading);color:var(--mxt-menu-primary);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin:0 0 .5rem;padding:0 .75rem}
.mxt-menu-sidebar-group ul{list-style:none;padding:0;margin:0}
.mxt-menu-sidebar-group li{margin:0}
.mxt-menu-sidebar-group a{display:block;padding:.55rem .75rem;color:#555;text-decoration:none;font-size:.93rem;border-left:3px solid transparent;transition:color .15s,background .15s,border-color .15s;border-radius:0 3px 3px 0;font-family:var(--mxt-menu-font-body);font-weight:400}
.mxt-menu-sidebar-group a:hover{color:var(--mxt-menu-primary);background:var(--mxt-menu-primary-soft)}
.mxt-menu-sidebar-group a.active{color:var(--mxt-menu-primary);background:var(--mxt-menu-primary-soft);border-left-color:var(--mxt-menu-primary);font-weight:500}
.mxt-menu-sidebar-group a.featured::before{content:"★ ";color:var(--mxt-menu-primary);margin-right:.1rem}

/* ---- Content area ---- */
.mxt-menu-content{flex:1;min-width:0;padding:0 1.5rem 3rem}

/* ---- Group divider (decorative section header) ---- */
.mxt-menu-group-divider{text-align:center;margin:3rem 0 1.5rem;color:var(--mxt-menu-primary);position:relative}
.mxt-menu-group-divider-label{display:inline-block;padding:0 1.5rem;background:#fff;position:relative;font-family:var(--mxt-menu-font-heading);font-size:.85rem;letter-spacing:.22em;text-transform:uppercase;font-weight:500;z-index:1}
.mxt-menu-group-divider::before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:var(--mxt-menu-border);z-index:0}

/* ---- Sections ---- */
.mxt-menu-section{margin:0 0 2.5rem;scroll-margin-top:calc(var(--site-header-h) + 16px)}
.mxt-menu-section h2{font-family:var(--mxt-menu-font-heading);color:var(--mxt-menu-primary);text-align:center;font-size:1.9rem;margin:0 0 1.2rem;font-weight:600;letter-spacing:.04em;border-bottom:1px solid var(--mxt-menu-border);padding-bottom:.5rem}
.mxt-menu-section h3{font-family:var(--mxt-menu-font-heading);color:var(--mxt-menu-primary);font-size:1.1rem;margin:1.5rem 0 .8rem;font-weight:500;font-style:italic;letter-spacing:.05em;border-bottom:1px solid var(--mxt-menu-border);padding-bottom:.3rem}
.mxt-menu-section dl{margin:0;padding:0}
.mxt-menu-section dt{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-top:.9rem;font-weight:500;color:var(--mxt-menu-text-dark);font-size:.95rem}
.mxt-menu-section dt .mxt-menu-name{flex:1}
.mxt-menu-section dt .mxt-menu-price{white-space:nowrap;color:var(--mxt-menu-primary);font-weight:600}
.mxt-menu-section dd{margin:.2rem 0 0;font-size:.88rem;color:var(--mxt-menu-text-light);font-style:italic;font-weight:300}
.mxt-menu-section .mxt-menu-note{text-align:center;font-size:.85rem;color:var(--mxt-menu-text-muted);margin:1rem 0 0;font-style:italic;font-weight:300}

/* ---- Signature / mis-en-valeur block (criées, featured items) ---- */
.mxt-plat-signature{margin:1.4rem 0 .75rem;background:var(--mxt-menu-primary-soft);border:1px solid var(--mxt-menu-border);border-radius:3px;overflow:hidden}
.plat-signature-header{text-align:center;padding:.85rem 1.5rem .7rem}
.mxt-plat-signature dl{margin:0;padding:0 1.5rem .5rem}
.mxt-plat-signature dt{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.4rem 0;font-weight:500;color:var(--mxt-menu-text-dark);font-size:.93rem}
.mxt-plat-signature .mxt-menu-price{white-space:nowrap;color:var(--mxt-menu-primary);font-weight:600;font-size:.9rem}
.plat-signature-label{font-family:var(--mxt-menu-font-heading);font-size:1.2rem;font-weight:600;font-style:italic;color:var(--mxt-menu-primary);letter-spacing:.01em;display:block;line-height:1.35}
.plat-signature-sub{display:block;font-family:var(--mxt-menu-font-body);font-size:.67rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--mxt-menu-text-muted);margin-top:.3rem}

/* ---- Highlight sections (e.g. signature dish, kids menu) ---- */
.mxt-menu-section.mxt-menu-highlight{background:var(--mxt-menu-primary-soft);border:1px solid var(--mxt-menu-border);border-radius:6px;padding:1.5rem;margin:2rem 0;text-align:center}
.mxt-menu-section.mxt-menu-highlight h2{margin-top:0;border:none;padding-bottom:0}
.mxt-menu-section.mxt-menu-highlight>.mxt-menu-note{margin-top:-.3rem;margin-bottom:1.5rem;padding-bottom:1.2rem;border-bottom:1px solid var(--mxt-menu-border)}
.mxt-menu-section.mxt-menu-highlight dl{margin:0;padding:0;display:block}
.mxt-menu-section.mxt-menu-highlight dt{display:block;margin:1.2rem 0 0;text-align:center}
.mxt-menu-section.mxt-menu-highlight dt:first-of-type{margin-top:0}
.mxt-menu-section.mxt-menu-highlight dt .mxt-menu-name{display:block;color:var(--mxt-menu-text-dark);font-weight:500;font-size:1.05rem;margin-bottom:.2rem}
.mxt-menu-section.mxt-menu-highlight dt .mxt-menu-price{display:block;color:var(--mxt-menu-primary);font-weight:600}

/* ---- Wine tables ---- */
.mxt-menu-wine-table{width:100%;border-collapse:collapse;margin-top:.5rem;font-size:.92rem}
.mxt-menu-wine-table th{text-align:right;padding:.5rem .4rem;color:var(--mxt-menu-primary);font-weight:500;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;border-bottom:1px solid var(--mxt-menu-border);font-family:var(--mxt-menu-font-heading)}
.mxt-menu-wine-table th:first-child{text-align:left}
.mxt-menu-wine-table td{padding:.6rem .4rem;border-bottom:1px solid var(--mxt-menu-border-light);vertical-align:top}
.mxt-menu-wine-table td:first-child{text-align:left}
.mxt-menu-wine-table td:not(:first-child){text-align:right;color:var(--mxt-menu-primary);font-weight:600;white-space:nowrap}
.mxt-menu-wine-table .mxt-menu-wine-name{font-weight:500;color:var(--mxt-menu-text-dark)}
.mxt-menu-wine-table .mxt-menu-wine-desc{display:block;font-style:italic;color:var(--mxt-menu-text-light);font-weight:300;font-size:.85rem;margin-top:.1rem}

/* ---- Mobile flyout panel ---- */
.mxt-menu-flyout{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:100;overflow-y:auto}
.mxt-menu-flyout.open{display:block}
.mxt-menu-flyout-inner{background:#fff;max-width:500px;margin:0 auto;min-height:100vh;padding:1.5rem 1.5rem 3rem}
.mxt-menu-flyout-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:1rem;border-bottom:1px solid var(--mxt-menu-border);margin-bottom:1.5rem}
.mxt-menu-flyout-head h2{margin:0;font-family:var(--mxt-menu-font-heading);color:var(--mxt-menu-primary);font-size:1.5rem;font-weight:600;letter-spacing:.03em}
.mxt-menu-flyout-close{background:none;border:none;font-size:1.8rem;color:var(--mxt-menu-primary);cursor:pointer;padding:0;line-height:1;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center}
.mxt-menu-flyout-group{margin-bottom:1.5rem}
.mxt-menu-flyout-group p{font-family:var(--mxt-menu-font-heading);color:var(--mxt-menu-primary);font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin:0 0 .6rem;padding-bottom:.4rem;border-bottom:1px solid var(--mxt-menu-border)}
.mxt-menu-flyout-group ul{list-style:none;padding:0;margin:0}
.mxt-menu-flyout-group li{margin:0}
.mxt-menu-flyout-group a{display:block;padding:.7rem .25rem;color:#333;text-decoration:none;font-size:1rem;border-bottom:1px solid var(--mxt-menu-border-light);font-family:var(--mxt-menu-font-body);font-weight:400}
.mxt-menu-flyout-group a.featured::before{content:"★ ";color:var(--mxt-menu-primary)}
.mxt-menu-flyout-group a.featured{font-weight:500}

/* ---- Back to top ---- */
.mxt-menu-back-top{position:fixed;bottom:var(--mxt-menu-backtop-bottom,1.5rem);right:1.5rem;background:var(--mxt-menu-primary);color:#fff;width:2.75rem;height:2.75rem;border-radius:50%;border:none;cursor:pointer;font-size:1.2rem;display:none;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.2);z-index:9999}
.mxt-menu-back-top.visible{display:flex !important}
.mxt-menu-back-top:hover{background:var(--mxt-menu-primary-hover)}

/* ---- Footer ---- */
.mxt-menu-footer{text-align:center;font-size:.8rem;color:var(--mxt-menu-text-light);margin:3rem 0 0;padding-top:1.5rem;border-top:1px solid #eee;line-height:1.6;font-weight:300}

/* ============================================================
   HERO H1 COMPENSATION (optional)
   ============================================================
   Nudges the H1 down inside the hero section to offset the fixed
   site header. Only applied to pages with body class 'mxt-menu-page'.
   Tuned per breakpoint so small mobile heroes don't over-compensate.
   ============================================================ */
.mxt-menu-page div.e-con.e-parent:first-of-type > *{padding-top:var(--site-header-h,62px)}
@media(max-width:1024px){
  .mxt-menu-page div.e-con.e-parent:first-of-type > *{padding-top:calc(var(--site-header-h,81px) * .75)}
}
@media(max-width:767px){
  .mxt-menu-page div.e-con.e-parent:first-of-type > *{padding-top:calc(var(--site-header-h,53px) / 2)}
}

/* ============ RESPONSIVE ============ */
/* Tablet and below: hide sidebar, show mobile nav */
@media(max-width:900px){
  .mxt-menu-sidebar{display:none}
  .mxt-menu-mobile-nav{display:flex}
  .mxt-menu-content{padding:0 1rem 3rem}
  .mxt-menu-hero{padding:1.5rem 1rem .5rem}
  .mxt-menu-hero h1{font-size:1.8rem}
  .mxt-menu-section{scroll-margin-top:calc(var(--site-header-h) + 48px)}
  .mxt-menu-section h2{font-size:1.6rem}
  .mxt-menu-section dt{flex-wrap:wrap}
  .mxt-menu-section dt .mxt-menu-price{margin-left:auto}
  .mxt-menu-group-divider{margin:2rem 0 1rem}
  .mxt-menu-wine-table{font-size:.85rem}
  .mxt-menu-wine-table th,.mxt-menu-wine-table td{padding:.45rem .25rem}
  .mxt-menu{--mxt-menu-backtop-bottom:6rem}
}