/* =====================================================
   Mifta's V2 — Child Theme Design System
   Source: Figma "MIFTA'S Dine" node 99:41
   ===================================================== */

/* ---- Tokens ---- */
:root {
  --mf-bg:        #120E0D;
  --mf-surface:   #1C1614;
  --mf-surface2:  #261E1B;
  --mf-line:      #3A2F2B;
  --mf-cream:     #F5EFE6;
  --mf-muted:     #B9ADA2;
  --mf-red:       #C4252F;
  --mf-red-hover: #A61B26;
  --mf-red-text:  #F0525C;
  --mf-gold:      #F9C65B;
  --mf-white:     #FFFFFF;
  --mf-header-h:  96px;
}

/* ---- Reset ---- */
html { scroll-behavior: smooth; scroll-padding-top: var(--mf-header-h); }

body.mf-page {
  background: var(--mf-bg) !important;
  color: var(--mf-cream);
  font-family: 'Open Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  margin: 0 !important;
  overflow-x: hidden;
}
body.mf-page a { text-decoration: none; }
body.mf-page :focus-visible { outline: 2px solid var(--mf-gold); outline-offset: 3px; }
body.mf-page .e-con { box-sizing: border-box; }

/* =====================================================
   HEADER
   Figma: 1440×96px, padding 100px H, flex-row space-between
   ===================================================== */
.mf-header {
  position: sticky !important;
  top: 0;
  z-index: 100;
  width: 100% !important;
}
.mf-header.elementor-sticky--effects {
  box-shadow: 0 1px 0 var(--mf-line);
}

/* Force the header's inner flex to actually apply space-between.
   Elementor's .e-flex base rule resets align/justify to 'normal';
   we need to re-apply the CSS-var values on the inner div. */
.mf-header > .e-con-inner {
  display:         flex !important;
  flex-direction:  row  !important;
  align-items:     center          !important;
  justify-content: space-between   !important;
  width:           100%            !important;
  height:          100%            !important;
  gap:             24px            !important;
}

/* Logo: exact Figma size, no stretching */
.mf-header > .e-con-inner > .elementor-widget-image {
  flex:       0 0 auto !important;
  width:      71.333px !important;
  max-width:  71.333px !important;
}
.mf-header > .e-con-inner > .elementor-widget-image img {
  width:      71.333px !important;
  height:     72px     !important;
  object-fit: contain  !important;
  display:    block;
}

/* Nav block: takes up natural space, sits in the middle */
.mf-header > .e-con-inner > .elementor-element.mf-desk-nav {
  flex: 0 0 auto !important;
}

/* Actions block */
.mf-header > .e-con-inner > .elementor-element:last-child {
  flex: 0 0 auto !important;
}

/* Mobile logo size */
@media (max-width: 1024px) {
  .mf-header > .e-con-inner > .elementor-widget-image,
  .mf-header > .e-con-inner > .elementor-widget-image img {
    width:  51.5px !important;
    height: 52px   !important;
  }
}


/* Logo widget wrapper: constrain to exact Figma size */
.elementor-element-b74d0fb img {
  width:      71.333px !important;
  height:     72px     !important;
  object-fit: contain  !important;
  display:    block;
}
@media (max-width:1024px) {
  .elementor-element-b74d0fb img { width:51.5px !important; height:52px !important; }
}
/* =====================================================
   NAV LINKS
   ===================================================== */
.mf-nav .elementor-heading-title { transition: color .2s ease; }
.mf-nav .elementor-heading-title a { color: inherit; text-decoration: none; }
.mf-nav:hover .elementor-heading-title { color: var(--mf-cream) !important; }
.mf-nav.is-active .elementor-heading-title { color: var(--mf-cream) !important; }

/* =====================================================
   LINK HELPERS
   ===================================================== */
.mf-link { cursor: pointer; transition: opacity .2s ease; }
.mf-link:hover { opacity: .75; }
.mf-footer-links .elementor-heading-title { transition: color .2s ease; }
.mf-footer-links:hover .elementor-heading-title { color: var(--mf-cream) !important; }
body.mf-page .elementor-button { transition: background-color .2s ease, border-color .2s ease, color .2s ease; }

/* Heading links */
body.mf-page .elementor-heading-title a       { color: inherit; text-decoration: none; }
body.mf-page .elementor-heading-title a:hover { color: var(--mf-cream); }
.mf-booking .elementor-heading-title a:hover  { color: var(--mf-white); text-decoration: underline; }

/* =====================================================
   HERO SECTION
   Desktop: column, center/center, 1440×760px
   Tablet:  column, flex-start/flex-end (bottom-left)
   Mobile:  same as tablet
   ===================================================== */
.elementor-element-a65ed38 > .e-con-inner {
  display:         flex    !important;
  flex-direction:  column  !important;
  align-items:     center  !important;   /* desktop: centered */
  justify-content: center  !important;
  width:           100%    !important;
  height:          100%    !important;
  gap:             28px    !important;
  padding:         0 100px !important;   /* Figma: match section px 100 */
  box-sizing:      border-box;
}
@media (max-width: 1024px) {
  .elementor-element-a65ed38 > .e-con-inner {
    align-items:     flex-start !important;
    justify-content: flex-end   !important;
    padding:         0 32px 40px !important;
  }
}
@media (max-width: 767px) {
  .elementor-element-a65ed38 > .e-con-inner {
    padding: 0 20px 40px !important;
    gap:     20px !important;
  }
}

/* =====================================================
   MENU CARDS
   Desktop: 4-col flex-row, gap 24px
   Tablet:  2-col wrap
   Mobile:  horizontal scroll-snap
   ===================================================== */

/* Desktop cards: prevent overflow clipping */
.mf-cards {
  overflow: visible !important;  /* ← was hidden in some rule; cards must NOT clip */
}

/* Tablet: 2-col wrap */
@media (max-width: 1024px) and (min-width: 768px) {
  .mf-cards {
    flex-wrap: wrap    !important;
    overflow:  visible !important;
  }
  .mf-cards > .e-con {
    width:     calc(50% - 12px) !important;
    max-width: calc(50% - 12px) !important;
    min-width: 0 !important;
    flex:      0 0 calc(50% - 12px) !important;
  }
}

/* Mobile: horizontal scroll-snap strip */
@media (max-width: 767px) {
  /* The mf-cards container becomes a horizontal scroller */
  .mf-cards {
    overflow-x:            auto      !important;
    overflow-y:            visible   !important;
    scroll-snap-type:      x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width:       none;
    flex-wrap:             nowrap    !important;
    --flex-wrap:           nowrap    !important;
    padding-right:         20px      !important; /* peek gap */
    max-width:             calc(100vw - 20px);
  }
  .mf-cards::-webkit-scrollbar { display: none; }
  .mf-cards > .e-con {
    scroll-snap-align: start;
    min-width:  264px !important;
    max-width:  264px !important;
    flex:       0 0 264px !important;
    --width:    264px !important;
  }
}

/* =====================================================
   IMAGE FILL HELPER
   ===================================================== */
.mf-fill .elementor-widget-container { height: 100% !important; }
.mf-fill img { width:100% !important; height:100% !important; object-fit:cover !important; display:block; }

/* =====================================================
   MAP LINK
   ===================================================== */
.mf-map { display: flex !important; }

/* =====================================================
   BOOKING BAND — responsive
   ===================================================== */
@media (max-width: 1024px) {
  /* Inner row (copy + button) stacks on tablet */
  .mf-booking > .e-con-inner > .e-con {
    flex-direction: column !important;
    align-items:    flex-start !important;
  }
  .mf-booking .elementor-button-wrapper,
  .mf-booking .elementor-button {
    width:        100% !important;
    display:      block !important;
    text-align:   center !important;
  }
}

/* =====================================================
   FOOTER COLUMNS — responsive
   ===================================================== */
@media (max-width: 1024px) and (min-width: 768px) {
  /* Columns wrap on tablet */
  .elementor-element-c2b6d2c {
    flex-wrap:  wrap !important;
    gap:        40px 40px !important;
  }
  .elementor-element-eb2263d { width: 100% !important; }     /* Brand: full row */
  .elementor-element-7d15438,
  .elementor-element-e0f3eab  { width: calc(50% - 20px) !important; flex: 0 0 calc(50% - 20px) !important; }
  .elementor-element-fa5d310  { width: 100% !important; }
}

/* =====================================================
   MOBILE NAV OVERLAY
   ===================================================== */
.mf-mobile-nav {
  position:   fixed   !important;
  inset:      0;
  z-index:    999;
  overflow-y: auto;
  transform:  translateX(100%);
  visibility: hidden;
  transition: transform .3s ease, visibility .3s;
  display:    flex    !important;
  flex-direction: column !important;
}
.mf-mobile-nav.is-open { transform: translateX(0); visibility: visible; }
body.mf-nav-open { overflow: hidden; }
.mf-menu-toggle, .mf-nav-close { cursor: pointer; }

/* =====================================================
   STICKY ACTION BAR
   ===================================================== */
.mf-sticky-bar {
  position: fixed  !important;
  left:     0      !important;
  right:    0      !important;
  bottom:   0      !important;
  z-index:  60;
  width:    100%   !important;
}

/* =====================================================
   RESPONSIVE VISIBILITY
   ===================================================== */
@media (min-width: 1025px) {
  .mf-sticky-bar  { display: none !important; }
  .mf-mobile-nav  { display: none !important; visibility: hidden !important; }
}
@media (max-width: 1024px) {
  :root { --mf-header-h: 72px; }
  body.mf-page { padding-bottom: 76px; }
}

/* =====================================================
   ELEMENTOR EDITOR OVERRIDES
   ===================================================== */
.elementor-editor-active .mf-mobile-nav {
  position:   relative !important;
  transform:  none     !important;
  visibility: visible  !important;
  display:    flex     !important;
}
.elementor-editor-active .mf-sticky-bar  { position: relative !important; }
.elementor-editor-active body.mf-page     { padding-bottom: 0; }

/* =====================================================
   ACCESSIBILITY
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
  html           { scroll-behavior: auto; }
  .mf-mobile-nav { transition: none; }
  .elementor-button { transition: none; }
}