/* ============================================================
   HireJuno — mega menu + v3 footer services band (SEO v3, F-MEGAMENU)
   Loaded on every page immediately after /css/redesign.css.
   Brand tokens only (css/brand.css custom properties). No imports,
   no external anything. Breakpoint = 880px to match the existing
   .nav-links drawer in brand.css (js/main.js owns .nav-toggle).
   ============================================================ */

/* ---------- triggers ---------- */
.mm-item { position: static; }
.mm-trigger { display: inline-flex; align-items: center; gap: 4px; }
.mm-trigger[aria-current="true"] { color: var(--juno-green); }
.mm-caret { width: 14px; height: 14px; flex: none; transition: transform .15s ease; }
.mm-item.is-open .mm-caret { transform: rotate(180deg); }

/* ---------- panels (desktop: full-width dropdown under the sticky navbar) ---------- */
.mm-panel {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 18px 34px -18px rgba(15, 27, 45, .25);
  z-index: 60;
  max-height: calc(100vh - 72px);
  overflow-y: auto;
}
.mm-item.is-open .mm-panel { display: block; }

.mm-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px 28px;
  padding: 26px 0 30px;
}

/* ---------- columns + lists ---------- */
.mm-col { min-width: 0; }
.mm-col__head {
  font-family: var(--font-display); font-weight: 700; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-faint); margin: 0 0 8px; display: block;
}
.mm-list { list-style: none; margin: 0; padding: 0; }
.mm-list--2col { columns: 2; column-gap: 24px; }
.mm-list--2col li { break-inside: avoid; }
.mm-list a {
  display: block; padding: 5px 0;
  color: var(--ink-soft); text-decoration: none !important;
  font-family: var(--font-body); font-weight: 400; font-size: .92rem;
}
.mm-list a:hover, .mm-list a:focus-visible { color: var(--juno-green); }
.mm-price { color: var(--ink-faint); font-size: .8rem; margin-left: 6px; white-space: nowrap; }

.mm-soon { color: var(--ink-faint); white-space: nowrap; }
.mm-soon-note { margin: 14px 0 0; font-size: .78rem; color: var(--ink-faint); line-height: 1.7; }

.mm-col--cta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.mm-col--cta .mm-list { width: 100%; }
.mm-col--cta .mm-col__head { margin-bottom: 0; }
.mm-all {
  font-family: var(--font-display); font-weight: 600; font-size: .92rem;
  color: var(--juno-green); text-decoration: none !important;
}
.mm-all:hover { color: var(--juno-green-dark); }

/* ---------- suburb search (Locations panel) ---------- */
.mm-col--search { min-width: 0; }
.mm-search {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: .95rem;
}
.mm-search:focus-visible { outline: 2px solid var(--juno-green); outline-offset: 1px; }
.mm-results { list-style: none; margin: 8px 0 0; padding: 0; max-height: 280px; overflow-y: auto; }
.mm-results a {
  display: block; padding: 7px 10px; border-radius: var(--r-sm);
  color: var(--ink-soft); text-decoration: none !important; font-size: .92rem;
}
.mm-results a strong { color: var(--ink); font-weight: 600; }
.mm-results a span { color: var(--ink-faint); font-size: .8rem; margin-left: 6px; }
.mm-results [aria-selected="true"] a, .mm-results a:hover { background: var(--juno-green-tint); }
.mm-hint { margin: 10px 0 0; font-size: .8rem; color: var(--ink-faint); }

/* ---------- keyboard focus ---------- */
.mm-trigger:focus-visible, .mm-list a:focus-visible, .mm-all:focus-visible, .mm-results a:focus-visible {
  outline: 2px solid var(--juno-green); outline-offset: 2px; border-radius: 4px;
}

/* ---------- mobile: accordion inside the existing slide-down drawer ---------- */
@media (max-width: 880px) {
  .nav-links.is-open { max-height: calc(100vh - 72px); overflow-y: auto; }
  .mm-item { width: 100%; }
  .mm-trigger { display: flex; justify-content: space-between; width: 100%; }
  .mm-panel {
    position: static; border: 0; box-shadow: none; max-height: none; overflow: visible;
    background: transparent;
  }
  .mm-grid { grid-template-columns: 1fr; gap: 14px; padding: 8px 0 14px; }
  .mm-list--2col { columns: 1; }
  .mm-col--cta { padding-bottom: 6px; }
  .mm-soon-note { margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .mm-caret { transition: none; }
}

/* ============================================================
   v3 footer — compact 35-service band grouped by family
   (markup from scripts/lib/footer.mjs)
   ============================================================ */
.footer-svc { border-top: 1px solid var(--navy-soft); padding-top: var(--s-6); margin-bottom: var(--s-7); }
.footer-svc h4 { color: var(--ink-on-dark); margin-bottom: var(--s-4); font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; }
.footer-svc__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px 24px;
}
.footer-svc__group { min-width: 0; }
.footer-svc__head {
  color: var(--ink-on-dark); font-family: var(--font-display); font-weight: 600;
  font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 6px;
}
.footer-svc__group a { font-size: .85rem; padding: 3px 0; }
@media (max-width: 880px) { .footer-svc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .footer-svc__grid { grid-template-columns: 1fr; } }