/* IKOKETSO mobile navigation fixes.
   Keep the established theme palette: this file changes layout/icon visibility only,
   except normalizing the Advertise item to the same states as its sibling links. */
@media (max-width: 767px) {
/* Hide desktop footer/copyright on mobile; fixed bottom navigation stays visible. */
  body.ikoketso-page footer.construct#contact,
  body.ikoketso-page #bottom-bar { display: none !important; }

  body.ikoketso-page { padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important; }
  .mobile-app-menu { z-index: 1000 !important; }
  .mobile-app-menu .mam-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .mobile-app-menu .mam-contacts { display: flex !important; }
  .ik-contact-page { display: block; }
  .ik-contact-page .ik-contact-card { margin: 16px 0; padding: 18px; border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; }

  /* Make the inline SVG icons visible despite legacy rules that hid all SVGs. */
  #mobileAppMenu .mam-grid > a svg.mam-icon,
  #mobileAppMenu .mam-grid > a .mam-icon {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    flex: 0 0 17px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }
  #mobileAppMenu .mam-grid > a .mam-label { order: 1 !important; }
  #mobileAppMenu .mam-grid > a .mam-icon { order: 2 !important; }

  /* Advertise follows the existing colour states used by the other menu links. */
  #mobileAppMenu .mam-grid > a.mam-advertise:not(.active):not(:active) {
    color: #637087 !important;
  }
  #mobileAppMenu .mam-grid > a.mam-advertise.active,
  #mobileAppMenu .mam-grid > a.mam-advertise:active {
    background: #EEF4FF !important;
    color: #245EC6 !important;
  }
}
@media (min-width: 768px) {
  .mobile-app-menu { display: none !important; }
}
.ik-contact-page { max-width: 900px; margin: 0 auto; }
.ik-contact-page .ik-contact-card h2 { margin-top: 0; }

/* 4.6.20 regression fix: persistent mobile navigation on every page.
   This stylesheet is enqueued last and versioned with IKOKETSO_THEME_VERSION,
   so older cached CSS cannot re-display the desktop footer or hide the app menu. */
@media screen and (max-width: 767px) {
  html body.ikoketso-page nav#mobileAppMenu.mobile-app-menu {
    display: block !important;
    position: fixed !important;
    inset: auto 0 0 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    z-index: 2147483000 !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }
  html body.ikoketso-page > footer.construct#contact,
  html body.ikoketso-page footer.construct#contact,
  html body.ikoketso-page > #bottom-bar.construct,
  html body.ikoketso-page #bottom-bar.construct {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }
  html body.ikoketso-page {
    padding-bottom: calc(68px + env(safe-area-inset-bottom)) !important;
  }
}
@media screen and (min-width: 768px) {
  html body.ikoketso-page nav#mobileAppMenu.mobile-app-menu {
    display: none !important;
  }
}

/* 4.6.21: breadcrumbs are not used anywhere in the IKOKETSO storefront. */
body.ikoketso-page .product-context-bar,
body.ikoketso-page .ik-breadcrumbs,
body.ikoketso-page .woocommerce-breadcrumb,
body.ikoketso-page nav[aria-label="Breadcrumb"],
body.ikoketso-page .breadcrumb {
  display: none !important;
}