/* PURE Mega Menu v1.3.2
   No dependencies. All selectors are prefixed with .pmm to avoid theme conflicts.
   Desktop: min-width 1151px (matches The7 tablet breakpoint). Below that: off-canvas drawer. */

:root {
  --pmm-primary: #541f5c;   /* PURE purple: panel headings, active states */
  --pmm-accent: #e91e8c;    /* PURE pink: hover underline, promo button */
  --pmm-ink: #1d1d1f;       /* link text */
  --pmm-muted: #6e6e73;     /* column labels, subtitles */
  --pmm-line: #e9e6ec;      /* hairlines */
  --pmm-bg: #ffffff;
  --pmm-soft: #f7f4f8;      /* tab hover and promo fallback */
  --pmm-font: "Open Sans", Arial, sans-serif;      /* links and body text */
  --pmm-font-head: Roboto, Arial, sans-serif;       /* column and promo headings */
  --pmm-badge-gradient: linear-gradient(95deg, #ee3a6a 0%, #b62c96 55%, #7e2b9e 100%); /* "New" pills */
  --pmm-radius: 14px;
  --pmm-ease: 180ms cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Reset inside the component ----------
   Everything is scoped to #pmm so theme rules (The7 header colours, uppercase,
   letter-spacing, font sizes) cannot leak in. */
#pmm a, #pmm button, #pmm p, #pmm li, #pmm span {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-family: inherit;
  text-shadow: none;
}
#pmm { font-family: var(--pmm-font); }
#pmm .pmm-col-title, #pmm .pmm-lead-link, #pmm .pmm-tab-btn, #pmm .pmm-tab-all,
#pmm .pmm-promo-title, #pmm .pmm-toggle { font-family: var(--pmm-font-head); }
#pmm ul li { margin: 0; padding: 0; }
#pmm a, #pmm a:hover, #pmm a:focus { text-decoration: none; }
#pmm .pmm-link, #pmm .pmm-sublink, #pmm .pmm-simple-link, #pmm .pmm-lead-link,
#pmm .pmm-tab-btn, #pmm .pmm-col-title { line-height: 1.35; }
#pmm, #pmm * { box-sizing: border-box; }
#pmm :where(ul) { list-style: none; margin: 0; padding: 0; }
#pmm :where(p) { margin: 0; }
#pmm :where(a) { text-decoration: none; color: inherit; }
#pmm :where(button) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
#pmm svg { display: inline-block; vertical-align: middle; }
#pmm .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

#pmm {
  position: relative;
  font-size: 15px;
  line-height: 1.35;
  color: var(--pmm-ink);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Shared pieces ---------- */
#pmm .pmm-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--pmm-badge-gradient);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.4;
  vertical-align: middle;
}
#pmm .pmm-sub {
  display: block;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--pmm-muted);
  margin-top: 2px;
}
#pmm .pmm-col-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--pmm-primary);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #efe9f1;
}
#pmm .pmm-col-title a { color: var(--pmm-primary); }
#pmm .pmm-col-title a:hover { color: var(--pmm-accent); }
#pmm .pmm-col-lead .pmm-col-title { color: var(--pmm-muted); font-weight: 500; font-size: 13px; border-bottom: 0; padding-bottom: 0; font-family: var(--pmm-font); }
#pmm .pmm-col-note { font-size: 12.5px; color: var(--pmm-muted); margin: -8px 0 12px; }
#pmm .pmm-links li + li, #pmm .pmm-lead li + li, #pmm .pmm-simple li + li { margin-top: 0; }
#pmm .pmm-sublink, #pmm .pmm-simple-link, #pmm .pmm-lead-link, #pmm .pmm-tab-all {
  display: block;
  padding: 7px 0;
  font-size: 15px;
  font-weight: 400;
  color: var(--pmm-ink);
  transition: color var(--pmm-ease);
}
#pmm .pmm-lead-link { font-size: 21px; font-weight: 500; padding: 8px 0; color: var(--pmm-primary); }
#pmm .pmm-sublink:hover, #pmm .pmm-simple-link:hover, #pmm .pmm-lead-link:hover, #pmm .pmm-tab-all:hover { color: var(--pmm-accent); }
#pmm a[aria-disabled="true"] { cursor: default; }
#pmm a[aria-current="page"] .pmm-label { color: var(--pmm-primary); font-weight: 600; }
#pmm .pmm-col-wide .pmm-links li { break-inside: avoid; }
#pmm .pmm-tab-all { font-weight: 600; color: var(--pmm-primary); margin-bottom: 8px; }

/* Promo card */
#pmm .pmm-promo {
  position: relative;
  overflow: hidden;
  border-radius: var(--pmm-radius);
  background: var(--pmm-soft);
  color: #fff;
  min-height: 320px;
}
#pmm .pmm-promo img { display: block; width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
#pmm .pmm-promo-body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  min-height: 320px;
  padding: 22px;
  background: linear-gradient(to top, rgba(20, 8, 24, .82) 0%, rgba(20, 8, 24, .35) 45%, rgba(20, 8, 24, 0) 70%);
}
#pmm .pmm-promo-eyebrow { font-size: 13px; opacity: .9; margin-bottom: 6px; }
#pmm .pmm-promo-title { font-size: 22px; font-weight: 700; line-height: 1.15; margin-bottom: 6px; }
#pmm .pmm-promo-text { font-size: 12px; opacity: .85; margin-bottom: 14px; }
#pmm .pmm-promo-btn {
  align-self: flex-start;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--pmm-accent);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  transition: transform var(--pmm-ease), background var(--pmm-ease);
}
#pmm .pmm-promo-btn:hover { background: var(--pmm-primary); transform: translateY(-1px); }

/* Backdrop that dims the page while a panel is open (desktop only) */
.pmm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 8, 24, .35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
  /* Low on purpose: it must sit under the theme header (which has its own stacking context)
     and only dim page content. Raise it if page sections poke through. */
  z-index: 5;
}
body.pmm-panel-open .pmm-backdrop { opacity: 1; }

/* Focus ring, keyboard only */
#pmm :focus-visible { outline: 2px solid var(--pmm-accent); outline-offset: 3px; border-radius: 4px; }

/* =====================================================================
   DESKTOP
   ===================================================================== */
@media (min-width: 1151px) {
  #pmm .pmm-toggle { display: none; }

  #pmm { width: 100%; }
  #pmm .pmm-bar {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;   /* never push the header wider than the viewport */
    max-width: 100%;
  }
  #pmm .pmm-item { position: relative; display: flex; align-items: center; }

  /* Top-level link with a pink underline that grows on hover/open */
  #pmm .pmm-link {
    position: relative;
    display: block;
    padding: 16px 9px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    color: var(--pmm-ink);
    transition: color var(--pmm-ease);
  }
  #pmm .pmm-link::after {
    content: "";
    position: absolute;
    left: 9px; right: 9px; bottom: 0;
    height: 2px;
    background: var(--pmm-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--pmm-ease);
  }
  #pmm .pmm-item:hover > .pmm-link::after,
  #pmm .pmm-item.is-open > .pmm-link::after,
  #pmm .pmm-item.is-current > .pmm-link::after { transform: scaleX(1); }
  #pmm .pmm-item.is-current > .pmm-link { color: var(--pmm-primary); }

  /* Dark band: white labels, panels stay white */
  #pmm.pmm-dark .pmm-link, #pmm.pmm-dark .pmm-caret { color: #fff; }
  #pmm.pmm-dark .pmm-sub { color: rgba(255, 255, 255, .72); }
  #pmm.pmm-dark .pmm-item.is-current > .pmm-link,
  #pmm.pmm-dark .pmm-item.is-current > .pmm-link .pmm-label,
  #pmm.pmm-dark .pmm-item.is-open > .pmm-link,
  #pmm.pmm-dark .pmm-item.is-open > .pmm-caret { color: #fff; }

  /* Compact bar so all ten items fit on one row on 13-15 inch screens */
  @media (max-width: 1500px) {
    #pmm .pmm-link { font-size: 13.5px; padding: 15px 7px; }
    #pmm .pmm-link::after { left: 7px; right: 7px; }
    #pmm .pmm-sub { display: none; }
    #pmm .pmm-badge { font-size: 10px; padding: 1px 6px; margin-left: 4px; }
    #pmm .pmm-caret { margin-left: -7px; padding: 3px; }
  }

  /* Caret is a real button for keyboard users, visually tucked into the link */
  #pmm .pmm-caret {
    margin-left: -9px;
    padding: 4px;
    color: var(--pmm-muted);
    transition: transform var(--pmm-ease), color var(--pmm-ease);
  }
  #pmm .pmm-item.is-open > .pmm-caret { transform: rotate(180deg); color: var(--pmm-primary); }

  /* Panels */
  #pmm .pmm-panel {
    position: absolute;
    top: 100%;
    z-index: 999;
    background: var(--pmm-bg);
    box-shadow: 0 24px 48px -16px rgba(20, 8, 24, .28), 0 1px 0 var(--pmm-line);
    border-radius: 0 0 var(--pmm-radius) var(--pmm-radius);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity var(--pmm-ease), transform var(--pmm-ease), visibility 0s linear 180ms;
  }
  #pmm .pmm-item.is-open > .pmm-panel,
  #pmm:not(.pmm-js) .pmm-item:hover > .pmm-panel,
  #pmm:not(.pmm-js) .pmm-item:focus-within > .pmm-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
  }

  /* Narrow dropdown for simple lists */
  #pmm .pmm-layout-simple > .pmm-panel { left: 0; min-width: 260px; padding: 14px 22px; }
  #pmm .pmm-layout-simple > .pmm-panel .pmm-simple-link { padding: 9px 0; }
  #pmm .pmm-layout-simple > .pmm-panel .pmm-simple li + li { border-top: 1px solid var(--pmm-line); }

  /* Full-width panel for columns and tabs: spans the whole nav bar */
  #pmm .pmm-layout-columns > .pmm-panel,
  #pmm .pmm-layout-tabs > .pmm-panel { left: 0; right: 0; }
  #pmm .pmm-layout-columns, #pmm .pmm-layout-tabs { position: static; }

  #pmm .pmm-panel-in {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 36px 40px 40px;
  }
  #pmm .pmm-panel-in.has-promo { grid-template-columns: 1fr 300px; }
  #pmm .pmm-layout-simple .pmm-panel-in { display: block; padding: 0; }

  /* Column grid */
  #pmm .pmm-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 28px 44px;
  }
  #pmm .pmm-col { flex: 1 1 200px; min-width: 0; max-width: 320px; }
  #pmm .pmm-col-lead { flex: 0 0 230px; max-width: none; }
  #pmm .pmm-col-wide { flex: 2 1 420px; max-width: none; }
  #pmm .pmm-col-wide .pmm-links { column-count: 2; column-gap: 32px; }

  /* Tabs: buttons in column 1, panels in column 2 spanning every row */
  #pmm .pmm-tabs {
    display: grid;
    grid-template-columns: 240px 1fr;
    /* trailing 1fr row absorbs the panel height so tab buttons keep their natural size */
    grid-template-rows: repeat(var(--pmm-tab-count, 4), max-content) 1fr;
    column-gap: 40px;
    row-gap: 4px;
  }
  #pmm .pmm-tab { display: contents; }
  #pmm .pmm-tab-btn {
    grid-column: 1;
    align-self: start;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    border-radius: 10px;
    font-weight: 500;
    color: var(--pmm-ink);
    transition: background var(--pmm-ease), color var(--pmm-ease);
  }
  #pmm .pmm-tab-btn:hover { background: var(--pmm-soft); }
  #pmm .pmm-tab.is-active .pmm-tab-btn { background: var(--pmm-primary); color: #fff; }
  #pmm .pmm-tab.is-active .pmm-tab-btn .pmm-badge { background: rgba(255,255,255,.22); }
  #pmm .pmm-tab-arrow { opacity: .55; }
  #pmm .pmm-tab-panel {
    grid-column: 2;
    grid-row: 1 / -1;
    display: none;
    border-left: 1px solid var(--pmm-line);
    padding-left: 40px;
  }
  #pmm .pmm-tab.is-active .pmm-tab-panel { display: block; }
  #pmm .pmm-links-flow { column-count: 3; column-gap: 40px; }
  #pmm .pmm-links-flow li { break-inside: avoid; }
  .has-promo .pmm-links-flow { column-count: 2; }
}

/* =====================================================================
   MOBILE and TABLET: hamburger + right-side drawer, accordions
   ===================================================================== */
@media (max-width: 1150px) {
  #pmm { display: flex; justify-content: flex-end; }
  /* When the nav has been moved to <body> the built-in button is hidden unless
     no theme hamburger exists (.pmm-floating), in which case it floats top-right. */
  body > #pmm:not(.pmm-floating) > .pmm-toggle { display: none; }
  body > #pmm:not(.pmm-floating).is-drawer-open > .pmm-toggle { display: inline-flex; }
  body > #pmm.pmm-floating > .pmm-toggle {
    position: fixed; top: calc(12px + var(--wp-admin--admin-bar--height, 0px)); right: 12px; z-index: 2147482999;
    background: var(--pmm-bg); color: var(--pmm-ink);
    border-radius: 999px; padding: 10px 14px;
    box-shadow: 0 6px 20px -8px rgba(20, 8, 24, .45);
  }
  #pmm .pmm-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 6px;
    font-weight: 600;
    font-size: 14px;
    color: var(--pmm-ink);
  }
  #pmm.pmm-dark .pmm-toggle { color: #fff; }
  #pmm.pmm-dark.is-drawer-open .pmm-toggle { color: var(--pmm-ink); }
  #pmm .pmm-burger { display: inline-block; width: 22px; }
  #pmm .pmm-burger i { display: block; height: 2px; background: currentColor; border-radius: 2px; margin: 4px 0; transition: transform var(--pmm-ease), opacity var(--pmm-ease); }
  #pmm.is-drawer-open .pmm-burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  #pmm.is-drawer-open .pmm-burger i:nth-child(2) { opacity: 0; }
  #pmm.is-drawer-open .pmm-burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  #pmm .pmm-bar {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(400px, 92vw);
    z-index: 2147483000;   /* above sticky ribbons, admin bar and chat widgets */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--pmm-bg);
    padding: 64px 22px 40px;
    /* Second shadow is a viewport-sized shade that dims the page behind the drawer.
       It lives in the same stacking layer as the drawer, so it works inside any theme header. */
    box-shadow: -24px 0 48px -20px rgba(20, 8, 24, .35), 0 0 0 100vmax rgba(20, 8, 24, 0);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 260ms cubic-bezier(.2, .7, .2, 1), box-shadow 260ms ease, visibility 0s linear 260ms;
  }
  #pmm.is-drawer-open .pmm-bar { transform: translateX(0); visibility: visible; transition-delay: 0s; box-shadow: -24px 0 48px -20px rgba(20, 8, 24, .35), 0 0 0 100vmax rgba(20, 8, 24, .45); }
  #pmm.is-drawer-open .pmm-toggle { position: fixed; top: calc(12px + var(--wp-admin--admin-bar--height, 0px)); right: 16px; z-index: 2147483001; }
  #pmm.is-drawer-open .pmm-toggle-text { display: none; }
  body.pmm-drawer-open { overflow: hidden; }
  body.pmm-drawer-open [id*="podium"], body.pmm-drawer-open [class*="podium"],
  body.pmm-drawer-open #tawkchat-container, body.pmm-drawer-open [id*="tawk"],
  body.pmm-drawer-open [id*="smartbot"], body.pmm-drawer-open [class*="decoda"] { visibility: hidden !important; }
  .pmm-backdrop { display: none; }

  #pmm .pmm-item { border-bottom: 1px solid var(--pmm-line); }
  #pmm .pmm-item > .pmm-link,
  #pmm .pmm-item > .pmm-caret { min-height: 52px; }
  #pmm .pmm-item { display: flex; flex-wrap: wrap; align-items: center; }
  #pmm .pmm-item > .pmm-link { flex: 1; padding: 12px 0; font-size: 17px; font-weight: 600; }
  #pmm .pmm-item > .pmm-caret { width: 48px; display: flex; align-items: center; justify-content: center; color: var(--pmm-muted); transition: transform var(--pmm-ease); }
  #pmm .pmm-item.is-open > .pmm-caret { transform: rotate(180deg); color: var(--pmm-primary); }

  #pmm .pmm-panel { flex-basis: 100%; display: none; padding: 0 0 12px; }
  #pmm .pmm-item.is-open > .pmm-panel { display: block; }
  #pmm .pmm-panel-body { padding-left: 8px; }

  #pmm .pmm-col + .pmm-col { margin-top: 18px; }
  #pmm .pmm-col-title { margin-bottom: 6px; }
  #pmm .pmm-lead-link { font-size: 17px; }

  /* Tabs become nested accordions */
  #pmm .pmm-tab + .pmm-tab { border-top: 1px solid var(--pmm-line); }
  #pmm .pmm-tab-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    padding: 11px 0;
    font-weight: 600;
    color: var(--pmm-primary);
  }
  #pmm .pmm-tab-arrow { transition: transform var(--pmm-ease); }
  #pmm .pmm-tab.is-active .pmm-tab-arrow { transform: rotate(90deg); }
  #pmm .pmm-tab-panel { display: none; padding: 0 0 10px 12px; }
  #pmm .pmm-tab.is-active .pmm-tab-panel { display: block; }

  #pmm .pmm-promo { margin-top: 20px; min-height: 220px; }
  #pmm .pmm-promo-body { min-height: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  #pmm *, .pmm-backdrop { transition: none !important; }
}