/*
Theme Name: Movers Magnet Portal
Theme URI: https://www.moversmagnet.co.za/
Author: Nzima AI Solutions
Author URI: https://www.moversmagnet.co.za/
Description: A minimal, purpose-built theme for the Movers Magnet Portal site (portal.moversmagnet.co.za) — provides only a branded header and footer wrapping the movers-magnet-dashboard.php plugin's own client/provider/master dashboard pages when visited directly (not via the ?mm_iframe=1 embeds, which bypass theme templates entirely and render their own complete HTML document — this theme has zero effect on those). Deliberately does NOT include any of the movers-magnet marketing theme's features (WooCommerce, location pages, shortcodes, watermarks, GTM, the cross-site login modal) — none of that belongs on the Portal, and importing that theme's functions.php wholesale here would risk PHP fatal "cannot redeclare function" errors against the Portal plugin's own ~2600 functions if any name ever collided. Every function/hook in this theme is prefixed mmp_ (Movers Magnet Portal) specifically to make that collision impossible.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: movers-magnet-portal
*/

/* ══ FONT ═══════════════════════════════════════════════════
   Loaded from Google Fonts rather than self-hosted — this is a small, header/footer-only theme, not
   worth shipping duplicate font files for when the marketing theme already self-hosts them elsewhere.
   See functions.php's mmp_enqueue_assets() for the actual <link> enqueue. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --orange:      #ff5923;
  --orange-d:    #e04718;
  --orange-glow: rgba(255,89,35,0.18);
  --bg:          #f7f5f1;
  --white:       #ffffff;
  --text:        #17140f;
  --muted:       #6b675f;
  --border:      rgba(13,10,5,0.09);
}

body {
  font-family: 'Outfit', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* ══ HEADER ═════════════════════════════════════════════════
   Deliberately thin and quiet — this sits above the Portal plugin's own dashboard UI (which has its
   own full header/sidebar inside .mm-wrapper), so it only needs to establish "you're still on Movers
   Magnet" branding, not duplicate navigation the dashboard already provides. */
.mmp-header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.mmp-header-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.mmp-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.mmp-logo img {
  height: 42px;
  width: auto;
  display: block;
}
.mmp-header-back {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s ease;
}
.mmp-header-back:hover { color: var(--orange); }
.mmp-header-back svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Deliberately stays visible at every width, unlike .mmp-nav/.mmp-header-back (hidden below 768px in
   favor of the hamburger drawer) — this is what ends up sitting alone between the logo and hamburger
   on mobile once those two hide. Same filled, borderless pill treatment as the Portal dashboard's own
   .mm-icon-btn family (its sidebar's dark/light-mode + logout buttons), just wide enough to also carry
   the Log In/Log Out label rather than icon-only — a bare icon with no label reads ambiguously here in
   a way the dashboard's own icon-only buttons don't, since those sit in a context (a sidebar with
   nothing else it could mean) this header doesn't share. */
.mmp-auth-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 18px;
  border-radius: 100px;
  background: var(--bg);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease;
}
.mmp-auth-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.mmp-auth-btn:hover { color: var(--orange); background: var(--orange-glow); }

/* auto margins on the flex child (rather than relying on the parent's justify-content alone) center
   this between the logo and the "back to main site" link regardless of how many links it holds.
   wp_nav_menu() (see header.php) renders a real <ul class="mmp-nav-list"><li><a>...</a></li></ul>
   inside .mmp-nav — targeting the list itself for layout, not .mmp-nav, since .mmp-nav is just the
   <nav> wrapper wp_nav_menu()'s own container option adds around it. */
.mmp-nav { margin: 0 auto; }
.mmp-nav-list {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mmp-nav-list a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  transition: color 0.2s ease;
}
.mmp-nav-list a:hover { color: var(--orange); }
.mmp-nav-list .current-menu-item > a { color: var(--orange); }

/* mmp_menu_item_icon() (functions.php) prepends this — currentColor means it always matches its own
   link's color (default/hover/current-menu-item) automatically. Empty if a menu item's URL doesn't
   match one of the three known dashboards (e.g. a link an admin added by hand), so it never renders
   as a broken empty box. */
.mmp-menu-icon { display: inline-flex; flex-shrink: 0; }
.mmp-menu-icon svg { width: 18px; height: 18px; display: block; }
.mmp-nav-list .mmp-menu-icon svg { width: 16px; height: 16px; }

@media (max-width: 900px) {
  .mmp-nav-list { gap: 16px; }
  .mmp-nav-list a { font-size: 13px; }
}

/* ── Mobile nav toggle — same look/behavior as the marketing theme's own .nav-hamburger: three bars
   that morph into an X on open. Hidden above 768px, where the desktop nav/back-link (above) show
   instead — see the matching rules further down. */
.mmp-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 28px; height: 22px;
  background: none; border: none; padding: 0; cursor: pointer;
  flex-shrink: 0;
}
.mmp-hamburger span {
  display: block; height: 2px; background: var(--text); border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease, width 0.25s ease;
}
.mmp-hamburger span:nth-child(1) { width: 24px; }
.mmp-hamburger span:nth-child(2) { width: 18px; }
.mmp-hamburger span:nth-child(3) { width: 22px; }
.mmp-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); width: 24px; }
.mmp-hamburger.open span:nth-child(2) { opacity: 0; }
.mmp-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); width: 24px; }

/* ── Mobile menu drawer — display:none (not just opacity) by default so it's genuinely out of the
   render tree until opened, same reasoning as the marketing theme's own login modal fix earlier this
   project: a hidden-but-still-rendered full-screen element is worth avoiding on principle, and it
   costs nothing here since the JS already toggles a class either way (see assets/js/main.js). */
.mmp-mobile-menu {
  display: none;
  position: fixed; inset: 0; z-index: 1300;
  background: var(--white);
  flex-direction: column;
  padding: 100px 32px 40px;
  opacity: 0;
  transition: opacity 0.25s ease;
  overflow-y: auto;
}
.mmp-mobile-menu.open { display: flex; opacity: 1; }
.mmp-mobile-menu-close {
  position: absolute; top: 24px; right: 24px;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  border: none; border-radius: 50%;
  cursor: pointer;
  color: var(--text);
  transition: background 0.2s ease;
}
.mmp-mobile-menu-close:hover { background: var(--border); }
.mmp-mobile-menu-close svg { width: 20px; height: 20px; }
.mmp-mobile-nav-list {
  list-style: none; margin: 0 0 32px; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.mmp-mobile-nav-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 4px;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.mmp-mobile-nav-list .current-menu-item > a { color: var(--orange); }
.mmp-mobile-menu-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  margin-top: auto;
}
.mmp-mobile-menu-back svg { width: 15px; height: 15px; flex-shrink: 0; }

@media (max-width: 768px) {
  .mmp-header-inner { padding: 14px 20px; }
  .mmp-logo img { height: 34px; }
  .mmp-nav, .mmp-header-back { display: none; } /* replaced by the hamburger + drawer below */
  .mmp-hamburger { display: flex; }
}

/* ══ CONTENT WRAP ═══════════════════════════════════════════
   The Portal plugin's own .mm-wrapper CSS (margin:32px auto) is meant to give the dashboard breathing
   room on its own, but that clearly isn't landing in practice (the dashboard was rendering flush
   against the header and both viewport edges) — rather than chase why inside a huge, separately-
   maintained CSS blob this theme doesn't own, adding padding here guarantees real spacing regardless
   of whatever .mm-wrapper's margin does or doesn't end up doing. */
.mmp-content { min-height: 60vh; padding: 28px 24px 48px; }

/* ══ FOOTER ═════════════════════════════════════════════════ */
.mmp-footer {
  background: var(--white);
  border-top: 1px solid var(--border);
  padding: 28px 32px;
  margin-top: 40px;
}
.mmp-footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.mmp-footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mmp-footer-brand img { height: 24px; width: auto; opacity: 0.85; }
.mmp-footer-copy {
  font-size: 12.5px;
  color: var(--muted);
}
.mmp-footer-links {
  display: flex;
  gap: 18px;
}
.mmp-footer-links a {
  font-size: 12.5px;
  color: var(--muted);
  text-decoration: none;
}
.mmp-footer-links a:hover { color: var(--orange); }

@media (max-width: 640px) {
  .mmp-footer-inner { flex-direction: column; align-items: flex-start; }
}