/**
 * mega-menu.css  —  PDFFlow Premium Mega Menu
 * Prefix: mm-  (no conflicts with existing styles)
 *
 * ─── Behaviour ────────────────────────────────────────────────
 * Desktop  (≥ 1024px): hover-triggered full-width panel
 * Tablet   (768–1023px): click-triggered 2-column panel
 * Mobile   (< 768px): accordion inside hamburger drawer
 * ──────────────────────────────────────────────────────────────
 */

/* ══════════════════════════════════════════════════════════════
   SHOW/HIDE THE TWO TRIGGER VARIANTS
   JS sets display inline/none, but CSS provides the defaults
   so there's no flash before JS runs.
══════════════════════════════════════════════════════════════ */

/* On desktop: show desktop trigger, hide mobile trigger */
@media (min-width: 768px) {
  #mmMobileTrigger,
  .mm-mobile-panel { display: none !important; }
}

/* On mobile: hide desktop trigger (JS will show mobile one) */
@media (max-width: 767px) {
  #mmTrigger { display: none !important; }
  /* Mobile panel starts collapsed */
  .mm-mobile-panel {
    display: block;
    overflow: hidden;
    max-height: 0;
    transition: max-height .34s cubic-bezier(.4,0,.2,1);
    background: #f8f9fc;
    border-radius: 0 0 10px 10px;
    margin: 0 0 4px;
  }
  .mm-mobile-panel.mm-mob-open {
    max-height: 2400px;
  }
  /* Mobile trigger always shows in the nav drawer */
  #mmMobileTrigger {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   TRIGGER BUTTON  (sits inside .nav-links)
══════════════════════════════════════════════════════════════ */
.mm-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: .95rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: var(--transition);
  white-space: nowrap;
  position: relative;
  z-index: 1001;
}
.mm-trigger:hover,
.mm-trigger.mm-open {
  background: var(--primary-light);
  color: var(--primary);
}
.mm-trigger-caret {
  color: currentColor;
  transition: transform .22s cubic-bezier(.4,0,.2,1);
  flex-shrink: 0;
}
.mm-trigger.mm-open .mm-trigger-caret {
  transform: rotate(180deg);
}

/* ══════════════════════════════════════════════════════════════
   BACKDROP OVERLAY  (dims page when menu is open)
══════════════════════════════════════════════════════════════ */
.mm-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  top: var(--nav-h);
  background: rgba(10, 20, 40, .42);
  backdrop-filter: blur(2px);
  z-index: 998;
  animation: mmBackdropIn .2s ease both;
}
.mm-backdrop.mm-visible {
  display: block;
}
@keyframes mmBackdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════
   MEGA PANEL  (full-width dropdown below navbar)
══════════════════════════════════════════════════════════════ */
.mm-panel {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  z-index: 999;
  background: #fff;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 16px 48px rgba(21, 101, 192, .14),
              0 4px 16px rgba(0, 0, 0, .08);

  /* Hidden state */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transform-origin: top center;
  transition: opacity .24s cubic-bezier(.4,0,.2,1),
              transform .24s cubic-bezier(.4,0,.2,1),
              visibility .24s;
  pointer-events: none;
}
.mm-panel.mm-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Inner content wrapper */
.mm-panel-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 24px 32px;
}

/* ── Top row: heading + "View All" link ── */
.mm-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1.5px solid #f0f4f8;
}
.mm-panel-heading {
  font-family: 'Sora', sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.mm-view-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  padding: 5px 12px;
  border-radius: 6px;
  background: var(--primary-light);
  border: 1.5px solid transparent;
  transition: var(--transition);
}
.mm-view-all:hover {
  border-color: var(--primary);
  background: #dbeeff;
}

/* ══════════════════════════════════════════════════════════════
   CATEGORY GRID  (6 columns on desktop)
══════════════════════════════════════════════════════════════ */
.mm-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0 8px;
}

/* ── Category column ── */
.mm-cat {
  padding: 0 8px;
  border-right: 1px solid #f0f4f8;
}
.mm-cat:last-child {
  border-right: none;
}

/* Category heading */
.mm-cat-heading {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: 'Sora', sans-serif;
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid;
  white-space: nowrap;
}

/* Category colour accents */
.mm-cat[data-cat="organize"] .mm-cat-heading { color: #1565C0; border-color: #1E88E5; }
.mm-cat[data-cat="optimize"] .mm-cat-heading { color: #2E7D32; border-color: #43A047; }
.mm-cat[data-cat="to-pdf"]   .mm-cat-heading { color: #E65100; border-color: #FF7043; }
.mm-cat[data-cat="from-pdf"] .mm-cat-heading { color: #6A1B9A; border-color: #AB47BC; }
.mm-cat[data-cat="edit"]     .mm-cat-heading { color: #00695C; border-color: #26A69A; }
.mm-cat[data-cat="security"] .mm-cat-heading { color: #B71C1C; border-color: #E53935; }

.mm-cat-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.mm-cat[data-cat="organize"] .mm-cat-icon { background: #E3F2FD; color: #1E88E5; }
.mm-cat[data-cat="optimize"] .mm-cat-icon { background: #E8F5E9; color: #43A047; }
.mm-cat[data-cat="to-pdf"]   .mm-cat-icon { background: #FFF3E0; color: #FF7043; }
.mm-cat[data-cat="from-pdf"] .mm-cat-icon { background: #F3E5F5; color: #AB47BC; }
.mm-cat[data-cat="edit"]     .mm-cat-icon { background: #E0F2F1; color: #26A69A; }
.mm-cat[data-cat="security"] .mm-cat-icon { background: #FFEBEE; color: #E53935; }

/* ── Tool links list ── */
.mm-tool-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* ── Individual tool link ── */
.mm-tool-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 9px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-secondary);
  font-size: .855rem;
  font-weight: 500;
  transition: background .15s, color .15s, transform .15s;
  white-space: nowrap;
}
.mm-tool-link:hover {
  background: var(--primary-light);
  color: var(--primary);
  transform: translateX(2px);
}
.mm-tool-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Tool icon chip */
.mm-tool-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: .75rem;
  font-weight: 800;
  font-family: 'Sora', sans-serif;
  transition: transform .15s;
}
.mm-tool-link:hover .mm-tool-icon {
  transform: scale(1.1);
}

/* Tool icon colours per category */
.mm-cat[data-cat="organize"] .mm-tool-icon { background: #E3F2FD; color: #1565C0; }
.mm-cat[data-cat="optimize"] .mm-tool-icon { background: #E8F5E9; color: #2E7D32; }
.mm-cat[data-cat="to-pdf"]   .mm-tool-icon { background: #FFF3E0; color: #E65100; }
.mm-cat[data-cat="from-pdf"] .mm-tool-icon { background: #F3E5F5; color: #6A1B9A; }
.mm-cat[data-cat="edit"]     .mm-tool-icon { background: #E0F2F1; color: #00695C; }
.mm-cat[data-cat="security"] .mm-tool-icon { background: #FFEBEE; color: #B71C1C; }

.mm-tool-link:hover .mm-tool-icon {
  /* Slightly deepen on hover */
  filter: brightness(.92);
}

/* ── "New" / "Hot" badge ── */
.mm-badge {
  margin-left: auto;
  font-size: .6rem;
  font-weight: 800;
  font-family: 'Sora', sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}
.mm-badge-new {
  background: #E8F5E9;
  color: #2E7D32;
}
.mm-badge-hot {
  background: #FFF3E0;
  color: #E65100;
}

/* ══════════════════════════════════════════════════════════════
   STAGGERED ENTRY ANIMATION for tool links
══════════════════════════════════════════════════════════════ */
.mm-panel.mm-open .mm-tool-link {
  animation: mmToolIn .22s cubic-bezier(.4,0,.2,1) both;
}
/* Each column gets a slightly later start */
.mm-panel.mm-open .mm-cat:nth-child(1) .mm-tool-link { animation-delay: calc(var(--i,0) * 30ms + 20ms); }
.mm-panel.mm-open .mm-cat:nth-child(2) .mm-tool-link { animation-delay: calc(var(--i,0) * 30ms + 50ms); }
.mm-panel.mm-open .mm-cat:nth-child(3) .mm-tool-link { animation-delay: calc(var(--i,0) * 30ms + 80ms); }
.mm-panel.mm-open .mm-cat:nth-child(4) .mm-tool-link { animation-delay: calc(var(--i,0) * 30ms + 110ms); }
.mm-panel.mm-open .mm-cat:nth-child(5) .mm-tool-link { animation-delay: calc(var(--i,0) * 30ms + 140ms); }
.mm-panel.mm-open .mm-cat:nth-child(6) .mm-tool-link { animation-delay: calc(var(--i,0) * 30ms + 170ms); }

@keyframes mmToolIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════════
   TABLET  (768px – 1023px)  — 3-column grid
══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023px) {
  .mm-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px 12px;
  }
  .mm-cat {
    border-right: none;
    border-bottom: 1px solid #f0f4f8;
    padding-bottom: 14px;
  }
  .mm-cat:nth-child(3n) { border-right: none; }
  .mm-panel-inner { padding: 22px 20px 28px; }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE  (< 768px)  — accordion inside nav drawer
══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Hide the full-width panel; accordion is in the nav drawer instead */
  .mm-panel,
  .mm-backdrop { display: none !important; }

  /* All Tools trigger — matches centered nav link style */
  .mm-trigger {
    width: 100%;
    justify-content: center;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-size: .95rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: none;
    text-align: center;
  }
  #mmMobileTrigger:hover {
    background: var(--primary-light);
    color: var(--primary);
  }
  /* Hide caret so it looks identical to other nav links */
  .mm-trigger .mm-trigger-caret { display: none; }

  /* Mobile accordion panel — hidden inside nav drawer */
  .mm-mobile-panel {
    overflow: hidden;
    max-height: 0;
    transition: max-height .34s cubic-bezier(.4,0,.2,1);
    background: #f8f9fc;
    border-radius: 0 0 10px 10px;
    margin: 0 0 4px;
  }
  .mm-mobile-panel.mm-mob-open {
    max-height: 2200px;  /* large enough for all tools */
  }

  /* Mobile category */
  .mm-mob-cat {
    border-bottom: 1px solid #e8edf5;
  }
  .mm-mob-cat:last-child { border-bottom: none; }

  .mm-mob-cat-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    font-size: .85rem;
    font-weight: 700;
    color: var(--text-primary);
    text-align: left;
  }
  .mm-mob-cat-btn:hover { background: var(--primary-light); }
  .mm-mob-cat-label {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .mm-mob-cat-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .mm-mob-cat[data-cat="organize"] .mm-mob-cat-dot { background: #1E88E5; }
  .mm-mob-cat[data-cat="optimize"] .mm-mob-cat-dot { background: #43A047; }
  .mm-mob-cat[data-cat="to-pdf"]   .mm-mob-cat-dot { background: #FF7043; }
  .mm-mob-cat[data-cat="from-pdf"] .mm-mob-cat-dot { background: #AB47BC; }
  .mm-mob-cat[data-cat="edit"]     .mm-mob-cat-dot { background: #26A69A; }
  .mm-mob-cat[data-cat="security"] .mm-mob-cat-dot { background: #E53935; }

  .mm-mob-caret {
    color: var(--text-muted);
    transition: transform .22s;
    flex-shrink: 0;
  }
  .mm-mob-cat.mm-mob-cat-open .mm-mob-caret {
    transform: rotate(180deg);
    color: var(--primary);
  }

  .mm-mob-tools {
    overflow: hidden;
    max-height: 0;
    transition: max-height .3s cubic-bezier(.4,0,.2,1);
    padding: 0 16px;
  }
  .mm-mob-cat.mm-mob-cat-open .mm-mob-tools {
    max-height: 600px;
    padding-bottom: 8px;
  }

  .mm-mob-tool-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    font-size: .875rem;
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 1px solid #f0f4f8;
    transition: color .15s;
  }
  .mm-mob-tool-link:last-child { border-bottom: none; }
  .mm-mob-tool-link:hover { color: var(--primary); }
  .mm-mob-tool-emoji { font-size: 1rem; flex-shrink: 0; }

  /* Hide desktop-only structures on mobile - but keep caret for mobile trigger */
  #mmTrigger .mm-trigger-caret { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   FOCUS / KEYBOARD ACCESSIBILITY
══════════════════════════════════════════════════════════════ */
.mm-trigger:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.mm-panel:focus-within {
  /* keep panel visible when a child is focused */
}