/* =============================================================
   Aero Cafe Bar Restaurant - Menu pages stylesheet
   =============================================================
   Add this to: Elementor > Site Settings > Custom CSS
   (or child theme style.css)

   Fonts used: Quicksand (headings) and Poppins (body)
   Both are already loaded globally by Elementor - no @import needed.

   Scoped under .aero-carte - will not affect the rest of the site.
   ============================================================= */

.aero-carte{color:#333;font-family:'Poppins',sans-serif;line-height:1.5;position:relative;--site-header-h:0px}
.aero-carte *{box-sizing:border-box}

/* ---- Hero intro ----
   Note: unused if Elementor handles the page title/intro above this widget.
   The .aero-hero block is optional in the HTML - remove if Elementor has its own hero. */
.aero-hero{text-align:center;padding:2rem 1.5rem 1rem;max-width:780px;margin:0 auto}
.aero-hero h1{font-family:'Quicksand',sans-serif;color:#7a1f2b;font-size:2.2rem;margin:0 0 1rem;font-weight:600;letter-spacing:.03em}
.aero-hero p{margin:0;color:#666;font-size:1rem;font-weight:300}

/* ---- Mobile horizontal nav + hamburger (hidden on desktop) ---- */
.aero-mobile-nav{display:none;position:sticky;top:var(--site-header-h);z-index:50;background:#fff;border-bottom:1px solid #e5d5d8;align-items:center;gap:.5rem}
.aero-mobile-nav-burger{flex:none;background:none;border:none;padding:.75rem 1rem;cursor:pointer;color:#7a1f2b;font-size:1.3rem;line-height:1;border-right:1px solid #e5d5d8}
.aero-mobile-nav-scroll{flex:1;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.aero-mobile-nav-scroll::-webkit-scrollbar{display:none}
.aero-mobile-nav-scroll a{display:inline-block;padding:.85rem .8rem;color:#666;text-decoration:none;font-size:.92rem;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;font-family:'Poppins',sans-serif;font-weight:400}
.aero-mobile-nav-scroll a.active{color:#7a1f2b;border-bottom-color:#7a1f2b;font-weight:500}

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

/* ---- Desktop sidebar ---- */
.aero-sidebar{flex:0 0 240px;border-right:1px solid #e5d5d8;padding:1.5rem 0}
.aero-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}
.aero-sidebar-sticky::-webkit-scrollbar{width:6px}
.aero-sidebar-sticky::-webkit-scrollbar-thumb{background:#e5d5d8;border-radius:3px}
.aero-sidebar-group{margin-bottom:1.5rem}
.aero-sidebar-group:last-child{margin-bottom:0}
.aero-sidebar-group h3{font-family:'Quicksand',sans-serif;color:#7a1f2b;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin:0 0 .5rem;padding:0 .75rem}
.aero-sidebar-group ul{list-style:none;padding:0;margin:0}
.aero-sidebar-group li{margin:0}
.aero-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:'Poppins',sans-serif;font-weight:400}
.aero-sidebar-group a:hover{color:#7a1f2b;background:#faf3f4}
.aero-sidebar-group a.active{color:#7a1f2b;background:#faf3f4;border-left-color:#7a1f2b;font-weight:500}
.aero-sidebar-group a.featured::before{content:"★ ";color:#7a1f2b;margin-right:.1rem}

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

/* ---- Group divider (decorative, not H2) ---- */
.aero-group-divider{text-align:center;margin:3rem 0 1.5rem;color:#7a1f2b;position:relative}
.aero-group-divider-label{display:inline-block;padding:0 1.5rem;background:#fff;position:relative;font-family:'Quicksand',sans-serif;font-size:.85rem;letter-spacing:.22em;text-transform:uppercase;font-weight:500;z-index:1}
.aero-group-divider::before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:#e5d5d8;z-index:0}
.aero-group-divider .aero-group-divider-label{position:relative}

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

/* ---- Highlight sections (Frites, Kids) ---- */
.aero-section.aero-highlight{background:#faf3f4;border:1px solid #e5d5d8;border-radius:6px;padding:1.5rem;margin:2rem 0;text-align:center}
.aero-section.aero-highlight h2{margin-top:0;border:none;padding-bottom:0}
.aero-section.aero-highlight>.aero-note{margin-top:-.3rem;margin-bottom:1.5rem;padding-bottom:1.2rem;border-bottom:1px solid #e5d5d8}
.aero-section.aero-highlight dl{margin:0;padding:0;display:block}
.aero-section.aero-highlight dt{display:block;margin:1.2rem 0 0;text-align:center}
.aero-section.aero-highlight dt:first-of-type{margin-top:0}
.aero-section.aero-highlight dt .aero-name{display:block;color:#222;font-weight:500;font-size:1.05rem;margin-bottom:.2rem}
.aero-section.aero-highlight dt .aero-price{display:block;color:#7a1f2b;font-weight:600}

/* ---- Wine tables ---- */
.aero-wine-table{width:100%;border-collapse:collapse;margin-top:.5rem;font-size:.92rem}
.aero-wine-table th{text-align:right;padding:.5rem .4rem;color:#7a1f2b;font-weight:500;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;border-bottom:1px solid #e5d5d8;font-family:'Quicksand',sans-serif}
.aero-wine-table th:first-child{text-align:left}
.aero-wine-table td{padding:.6rem .4rem;border-bottom:1px solid #f5f0f1;vertical-align:top}
.aero-wine-table td:first-child{text-align:left}
.aero-wine-table td:not(:first-child){text-align:right;color:#7a1f2b;font-weight:600;white-space:nowrap}
.aero-wine-table .aero-wine-name{font-weight:500;color:#222}
.aero-wine-table .aero-wine-desc{display:block;font-style:italic;color:#999;font-weight:300;font-size:.85rem;margin-top:.1rem}

/* ---- Mobile flyout panel ---- */
.aero-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}
.aero-flyout.open{display:block}
.aero-flyout-inner{background:#fff;max-width:500px;margin:0 auto;min-height:100vh;padding:1.5rem 1.5rem 3rem}
.aero-flyout-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:1rem;border-bottom:1px solid #e5d5d8;margin-bottom:1.5rem}
.aero-flyout-head h2{margin:0;font-family:'Quicksand',sans-serif;color:#7a1f2b;font-size:1.5rem;font-weight:600;letter-spacing:.03em}
.aero-flyout-close{background:none;border:none;font-size:1.8rem;color:#7a1f2b;cursor:pointer;padding:0;line-height:1;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center}
.aero-flyout-group{margin-bottom:1.5rem}
.aero-flyout-group h3{font-family:'Quicksand',sans-serif;color:#7a1f2b;font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin:0 0 .6rem;padding-bottom:.4rem;border-bottom:1px solid #e5d5d8}
.aero-flyout-group ul{list-style:none;padding:0;margin:0}
.aero-flyout-group li{margin:0}
.aero-flyout-group a{display:block;padding:.7rem .25rem;color:#333;text-decoration:none;font-size:1rem;border-bottom:1px solid #f5f0f1;font-family:'Poppins',sans-serif;font-weight:400}
.aero-flyout-group a.featured::before{content:"★ ";color:#7a1f2b}
.aero-flyout-group a.featured{font-weight:500}

/* ---- Back to top ---- */
.aero-back-top{position:fixed;bottom:var(--aero-backtop-bottom,1.5rem);right:1.5rem;background:#7a1f2b;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}
.aero-back-top.visible{display:flex !important}
.aero-back-top:hover{background:#5e1620}

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

/* ============================================================
   HERO H1 COMPENSATION
   ============================================================
   Nudges the H1 down inside the hero to offset the fixed site
   header covering the top portion. Uses padding-top on the hero's
   direct children (not min-height override) so Elementor retains
   full control of the hero's overall size.

   Proportions tuned per breakpoint because hero size varies:
   - Desktop: full header height compensation
   - Tablet: 75% (header is taller, hero is taller - balance)
   - Mobile: 50% (small hero, avoid pushing H1 too low)
   ============================================================ */
.aero-page-carte div.e-con.e-parent:first-of-type > *{padding-top:var(--site-header-h,62px)}
@media(max-width:1024px){
  .aero-page-carte div.e-con.e-parent:first-of-type > *{padding-top:calc(var(--site-header-h,81px) * .75)}
}
@media(max-width:767px){
  .aero-page-carte 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){
  .aero-sidebar{display:none}
  .aero-mobile-nav{display:flex}
  .aero-content{padding:0 1rem 3rem}
  .aero-hero{padding:1.5rem 1rem .5rem}
  .aero-hero h1{font-size:1.8rem}
  .aero-section{scroll-margin-top:calc(var(--site-header-h) + 48px)}
  .aero-section h2{font-size:1.6rem}
  .aero-section dt{flex-wrap:wrap}
  .aero-section dt .aero-price{margin-left:auto}
  .aero-group-divider{margin:2rem 0 1rem}
  .aero-wine-table{font-size:.85rem}
  .aero-wine-table th,.aero-wine-table td{padding:.45rem .25rem}
  .aero-carte{--aero-backtop-bottom:6rem}
}