/* ════════════════════════════════════════════════════════════
   MOBILE-ONLY HEADER OVERRIDES for course landing & course pages
   - Brand text only (hide circle SVG mark)
   - Right-side text button: "Home" (landing) or "Courses" (course)
   - No burger menu, no mobile menu drawer
   - Tablet/desktop unchanged
   ════════════════════════════════════════════════════════════ */

/* Site-wide brand mark color: black ring + black centre dot.
   Duplicated from assets/styles.css so pages that don't load styles.css
   (e.g. self-contained course apps) still get the recolor. */
.mf-logo-mark circle { stroke: #000 !important; fill: #000 !important; }
.mf-logo-mark circle:first-of-type { fill: none !important; stroke: #000 !important; }

/* ─── Stacking scale + global layering (mirrors assets/styles.css) ───
   Pages that do not include assets/styles.css (e.g. the conscious-parenting
   course app, the self-love course SPA) still need consistent layering so
   their nav, drawers, and modals never collide with the fixed header. */
:root {
  --mf-z-nav: 1000;
  --mf-z-drawer: 1100;
  --mf-z-overlay: 1200;
  --mf-z-toast: 1250;
  --mf-z-safe-mask: 1300;
}
.mf-nav {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: var(--mf-z-nav) !important;
  isolation: isolate;
}
/* — Drawers / mobile menus / side sheets — */
.mf-mobile-menu,
.mm,
.mobile-menu,
.so-page .mobile-menu,
.drawer,
.side-sheet,
[data-mf-drawer] {
  z-index: var(--mf-z-drawer) !important;
}
/* — Modals / dialogs / lightboxes — */
#mf-legal-overlay,
.mf-legal-overlay,
.mf-soon-overlay,
[role="dialog"][aria-modal="true"],
.modal,
.modal-overlay,
.modal-backdrop,
.dialog,
.dialog-overlay,
.lightbox,
.lr-modal,
[data-mf-overlay],
[data-mf-modal] {
  z-index: var(--mf-z-overlay) !important;
}
/* — Floating popovers / dropdowns / tooltips — */
.popover,
.tweaks-popover,
.dropdown-menu,
.menu-popover,
.tooltip,
[role="menu"][data-mf-floating],
[role="listbox"][data-mf-floating],
[data-mf-popover] {
  z-index: var(--mf-z-overlay) !important;
}
/* — Transient / floating UI on top of overlays — */
.mf-toast,
.toast,
.mf-back-top,
.snap-dots,
[data-mf-toast] {
  z-index: var(--mf-z-toast) !important;
}
.mf-safe-top {
  z-index: var(--mf-z-safe-mask) !important;
}

@media (max-width: 767px) {
  /* (Header layering is now handled globally in assets/styles.css —
     position: fixed, z-index: 10000, isolated stacking context.) */

  /* Move the entire mobile header up by ~0.5cm (19px) so it sits
     closer to the top of the screen. Mobile-only; tablet/desktop unchanged. */
  .mf-nav { transform: translateY(-19px); }
  .mf-nav-spacer { height: calc(var(--mf-nav-h) - 19px) !important; }


  /* Show the full brand mark (ring + dot), sized down for mobile.
     Site-wide color is set in styles.css (black ring + black dot). */
  .mf-nav .mf-logo .mf-logo-mark {
    display: inline-block !important;
    width: 18px; height: 18px;
    flex: 0 0 18px;
    margin-right: 8px;
    overflow: visible;
  }

  /* Remove burger button and the mobile menu drawer entirely */
  .mf-nav .mf-ham,
  .mf-mobile-menu { display: none !important; }

  /* Hide desktop links list on mobile (in case any page leaves it visible) */
  .mf-nav .mf-nav-links { display: none !important; }

  /* Hide existing right-side CTAs so we render exactly one custom one */
  .mf-nav .mf-nav-home-mobile,
  .mf-nav .mf-nav-cta { display: none !important; }

  /* Brand alignment — dot sits cleanly before the wordmark */
  .mf-nav .mf-logo {
    gap: 0 !important;
    display: inline-flex;
    align-items: center;
  }

  /* Our injected mobile button — TEXT ONLY (no circle/border) */
  .mf-nav .mf-nav-mobile-btn {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: #3a2e1a;
    font: inherit;
    font-size: 15px;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
  }
  .mf-nav .mf-nav-mobile-btn:hover { opacity: 0.7; }
}

/* Tablet & desktop: never show the injected mobile-only right-side button.
   The standard nav links (Home / Courses / etc.) handle navigation there. */
@media (min-width: 768px) {
  .mf-nav .mf-nav-mobile-btn { display: none !important; }
}

/* ════════════════════════════════════════════════════════════
   MOBILE-ONLY HORIZONTAL PADDING NORMALIZATION
   Standardize page-edge gutters across course landing & content
   pages to match the Conscious Parenting reference (~20px).
   Vertical rhythm and internal component padding are untouched.
   Tablet (≥768px) and desktop are unchanged.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  :root {
    /* Pages that drive padding via the --px token (e.g. conscious-parenting,
       finding-yourself) snap to the 20px reference on mobile. */
    --px: 20px !important;
  }

  /* Common page-edge containers used across course landing pages.
     Only horizontal padding is normalized — vertical padding is preserved
     by re-using the inherited padding-top/bottom via padding-inline. */
  .wrap,
  .ni,
  .mf-nav-inner,
  .mf-container,
  .mf-section-inner,
  .cta-inner,
  .ctai {
    padding-inline: 20px !important;
  }
}