/* ==========================================================================
   CMCO Mobile Menu — fullscreen staggered nav (kitocrosby.com / CMCO)
   Mobile only (<=1200px). Desktop nav untouched.
   Brand: midnight #00344f, primary #0066ba, bright gradient #009ade->#0066ba,
          orange accent #ff9900->#dd0000.
   ========================================================================== */

/* ---- default: hide everything on desktop; only appears <=1200px ---- */
.cmco-mm-trigger,
.cmco-mm-overlay { display: none; }

@media screen and (max-width: 1200px) {

  /* Neutralize theme's global button{} styling on our controls */
  .cmco-mm-trigger, .cmco-mm-close, .cmco-mm-expand {
    -webkit-appearance: none !important;
    appearance: none !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font: inherit;
    margin: 0;
  }

  /* ---------- Trigger (hamburger) ---------- */
  .cmco-mm-trigger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    position: fixed;
    top: 14px;
    right: 16px;
    z-index: 100000;
    width: 46px;
    height: 46px;
    padding: 0 10px;
    background: rgba(0, 52, 79, 0.9) !important;   /* midnight */
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    cursor: pointer;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background .25s ease, transform .25s ease;
  }
  .cmco-mm-trigger:active { transform: scale(.94); }
  .cmco-mm-trigger .cmco-mm-bar {
    display: block;
    height: 2px;
    width: 100%;
    border-radius: 2px;
    background: #fff;
    transition: transform .3s ease, opacity .3s ease;
  }
  /* hide trigger while overlay open (close button takes over) */
  body.cmco-mm-open .cmco-mm-trigger { opacity: 0; pointer-events: none; }

  /* ---------- Overlay ---------- */
  .cmco-mm-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 99999;
    width: 100%;
    height: 100dvh;
    background:
      radial-gradient(120% 80% at 100% 0%, rgba(0,154,222,.28) 0%, rgba(0,52,79,0) 55%),
      linear-gradient(160deg, #00263b 0%, #00344f 45%, #001c2e 100%);
    color: #fff;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* closed state */
    opacity: 0;
    visibility: hidden;
    clip-path: circle(0% at calc(100% - 38px) 38px);
    transition: clip-path .55s cubic-bezier(.66,0,.24,1),
                opacity .35s ease,
                visibility 0s linear .55s;
  }
  body.cmco-mm-open .cmco-mm-overlay {
    opacity: 1;
    visibility: visible;
    clip-path: circle(150% at calc(100% - 38px) 38px);
    transition: clip-path .6s cubic-bezier(.22,1,.36,1),
                opacity .3s ease;
  }

  /* ---------- Top bar (logo + close) ---------- */
  .cmco-mm-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 8px;
  }
  .cmco-mm-logo img {
    height: 30px;
    width: auto;
    max-width: 62vw;
    object-fit: contain;
    /* headerlogo.svg is dark; force it white for the dark overlay */
    filter: brightness(0) invert(1);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .4s ease .15s, transform .4s ease .15s;
  }
  body.cmco-mm-open .cmco-mm-logo img { opacity: 1; transform: none; }

  .cmco-mm-close {
    position: relative;
    width: 42px;
    height: 42px;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 1px solid rgba(255,255,255,.35) !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    color: #fff !important;
    cursor: pointer;
    flex: 0 0 auto;
    padding: 0 !important;
    transition: border-color .25s ease, background-color .25s ease, transform .25s ease;
  }
  .cmco-mm-close:hover { background-color: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.6) !important; }
  .cmco-mm-close:active { transform: scale(.9); }
  .cmco-mm-close span {
    position: absolute;
    top: 50%; left: 50%;
    width: 18px; height: 2px;
    background: #fff;
    border-radius: 2px;
  }
  .cmco-mm-close span:first-child { transform: translate(-50%,-50%) rotate(45deg); }
  .cmco-mm-close span:last-child  { transform: translate(-50%,-50%) rotate(-45deg); }

  /* ---------- Nav list ---------- */
  .cmco-mm-nav { padding: 8px 0 40px; }
  .cmco-mm-list { list-style: none; margin: 0; padding: 0; }
  .cmco-mm-depth-0 { padding: 6px 20px 0; }

  .cmco-mm-item { border-bottom: 1px solid rgba(255,255,255,.08); }
  .cmco-mm-depth-0 > .cmco-mm-item:last-child { border-bottom: none; }

  .cmco-mm-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .cmco-mm-link {
    display: block;
    flex: 1 1 auto;
    padding: 16px 4px;
    color: #fff !important;
    text-decoration: none !important;
    font-family: var(--cmco-font-primary, "Archivo", system-ui, sans-serif);
    font-weight: 700;
    font-size: 26px;
    line-height: 1.1;
    letter-spacing: -0.01em;
    transition: color .2s ease, transform .2s ease;
  }
  .cmco-mm-link:active { transform: translateX(3px); }

  /* staggered entrance for top-level rows */
  .cmco-mm-depth-0 > .cmco-mm-item {
    opacity: 0;
    transform: translateX(26px);
  }
  body.cmco-mm-open .cmco-mm-depth-0 > .cmco-mm-item {
    animation: cmcoMMIn .5s cubic-bezier(.22,1,.36,1) forwards;
    animation-delay: calc(.18s + var(--cmco-mm-i, 1) * .055s);
  }
  @keyframes cmcoMMIn {
    to { opacity: 1; transform: translateX(0); }
  }

  /* gradient underline sweep on the top-level number/marker */
  .cmco-mm-depth-0 > .cmco-mm-item > .cmco-mm-row .cmco-mm-link {
    position: relative;
  }
  .cmco-mm-depth-0 > .cmco-mm-item > .cmco-mm-row .cmco-mm-link::after {
    content: "";
    position: absolute;
    left: 4px; bottom: 10px;
    height: 2px; width: 0;
    background: linear-gradient(90deg, #009ade, #0066ba);
    transition: width .3s ease;
  }
  .cmco-mm-depth-0 > .cmco-mm-item.is-open > .cmco-mm-row .cmco-mm-link::after {
    width: 34px;
  }

  /* ---------- Expand chevron ---------- */
  .cmco-mm-expand {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    background: rgba(255,255,255,.06) !important;
    background-image: none !important;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s ease, transform .3s cubic-bezier(.22,1,.36,1);
  }
  .cmco-mm-expand:active { background: rgba(255,255,255,.14); }
  /* Kill the lingering tap-focus halo (theme button:focus glow persists after
     a touch tap). Remove outline + box-shadow on plain :focus, but keep an
     accessible ring for keyboard-only navigation via :focus-visible. */
  .cmco-mm-trigger:focus, .cmco-mm-close:focus, .cmco-mm-expand:focus {
    outline: none !important;
    box-shadow: none !important;
  }
  .cmco-mm-trigger:focus-visible, .cmco-mm-close:focus-visible, .cmco-mm-expand:focus-visible {
    outline: 2px solid rgba(255,255,255,.7) !important;
    outline-offset: 2px;
  }
  /* Unambiguous down-chevron via SVG mask. The old rotated border-corner
     trick (border-right + border-bottom rotate(45deg)) reads as a CHECKMARK
     at ~9px, not a caret. A masked SVG chevron path is a literal "v" and is
     self-contained (no FontAwesome dependency, CSP-safe: it's a CSS asset,
     not an inline <script>). White fill via background-color on the masked box. */
  .cmco-mm-chev {
    display: block;
    flex: 0 0 auto;
    width: 16px; height: 16px;
    min-width: 16px; min-height: 16px;
    background-color: #fff;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
    transition: transform .3s ease;
  }
  .cmco-mm-item.is-open > .cmco-mm-row .cmco-mm-expand {
    background: linear-gradient(135deg, #009ade, #0066ba) !important;
    border-color: transparent;
  }
  .cmco-mm-item.is-open > .cmco-mm-row .cmco-mm-expand .cmco-mm-chev {
    transform: rotate(180deg);
  }

  /* ---------- Sub-panel (accordion) ---------- */
  .cmco-mm-sub {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .35s cubic-bezier(.22,1,.36,1);
  }
  .cmco-mm-item.is-open > .cmco-mm-sub { grid-template-rows: 1fr; }
  /* overflow:hidden drives the accordion height animation, but it also clips
     the right edge at the list box; nested carets right-align there and get
     shaved on real-device DPR. Bleed the clip box 18px right of the caret
     (padding-right) and pull it back with an equal negative margin so the
     caret x-position and layout are unchanged. Border-box right = 388 < 390,
     so no horizontal scroll. Top-level lists are overflow:visible and are not
     children of .cmco-mm-sub, so they are unaffected. */
  .cmco-mm-sub > .cmco-mm-list {
    overflow: hidden;
    padding-right: 18px;
    margin-right: -18px;
  }

  /* nested styling: smaller, indented, lighter */
  .cmco-mm-depth-1 { padding: 2px 0 10px 6px; }
  .cmco-mm-depth-1 .cmco-mm-link { font-size: 18px; font-weight: 600; padding: 11px 4px; color: #cfe3f2 !important; }
  .cmco-mm-depth-1 .cmco-mm-item { border-bottom: 1px solid rgba(255,255,255,.05); }
  .cmco-mm-depth-1 .cmco-mm-item:last-child { border-bottom: none; }

  .cmco-mm-depth-2 { padding-left: 14px; }
  .cmco-mm-depth-2 .cmco-mm-link { font-size: 15.5px; font-weight: 500; color: #a7c6dc !important; padding: 9px 4px; }
  .cmco-mm-depth-2 .cmco-mm-expand { width: 38px; height: 38px; }

  /* nested chevrons smaller */
  .cmco-mm-depth-1 .cmco-mm-expand,
  .cmco-mm-depth-2 .cmco-mm-expand { width: 38px; height: 38px; }

  /* ---------- ambient glow at bottom ---------- */
  .cmco-mm-glow {
    position: fixed;
    left: 50%; bottom: -120px;
    width: 280px; height: 280px;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(0,154,222,.35) 0%, rgba(0,154,222,0) 70%);
    pointer-events: none;
    z-index: -1;
  }

  /* lock body scroll behind overlay */
  body.cmco-mm-open { overflow: hidden; }

  /* Hide Max Mega Menu's own mobile toggle + wrap on mobile so ours is the
     only menu. Desktop (>1200px) is completely untouched. */
  #mega-menu-wrap-menu-1 .mega-menu-toggle { display: none !important; }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .cmco-mm-overlay, .cmco-mm-depth-0 > .cmco-mm-item,
  .cmco-mm-logo img, .cmco-mm-sub { transition: none !important; animation: none !important; }
  body.cmco-mm-open .cmco-mm-depth-0 > .cmco-mm-item { opacity: 1; transform: none; }
}