/* ============================================================
   HWR Mega Nav — pane + drawer styles
   The Elementor Mega Menu widget styles the header bar and
   dropdown shell; this sheet styles the shortcode output only.
   ============================================================ */
:root{
  --hwr-navy-950:#071A2E;
  --hwr-navy-900:#0A2239;
  --hwr-navy-800:#0E2A47;
  --hwr-navy-700:#14345A;
  --hwr-teal:#2CC5D6;
  --hwr-teal-ink:#062A31;
  --hwr-white:#FFFFFF;
  --hwr-text-dim:rgba(234,241,246,.72);
  --hwr-text-faint:rgba(234,241,246,.5);
  --hwr-line:rgba(234,241,246,.12);
  --hwr-line-strong:rgba(234,241,246,.2);
  --hwr-ease:cubic-bezier(.32,.72,.24,1);
  --hwr-font-display:"Poppins",sans-serif;   /* match Elementor Global Fonts */
  --hwr-font-body:"Figtree",sans-serif;
  --hwr-drawer-top:68px;                     /* overwritten by JS at runtime */
}

.hwr-mega__grid *,
.hwr-mnav *{box-sizing:border-box;margin:0;padding:0}
.hwr-mega__grid button,
.hwr-mnav button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.hwr-mega__grid :focus-visible,
.hwr-mnav :focus-visible{outline:2px solid var(--hwr-teal);outline-offset:3px;border-radius:4px}

/* ============================================================
   DESKTOP MEGA PANES  (inside Elementor dropdown container)
   ============================================================ */
.hwr-mega__grid{
  display:grid;
  grid-template-columns:280px 1fr;
  min-height:420px;
  font-family:var(--hwr-font-body);
  color:var(--hwr-white);
  text-align:left;
}

/* Left rail */
.hwr-mega__rail{
  border-right:1px solid var(--hwr-line);
  padding:32px 0;
  display:flex;flex-direction:column;gap:2px;
}
.hwr-mega__rail-label{
  font-family:var(--hwr-font-display);
  font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--hwr-text-faint);
  padding:0 32px 16px;
}
.hwr-mega__group{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;text-align:left;
  font-family:var(--hwr-font-display);
  font-size:15px;font-weight:500;line-height:1.35;
  color:var(--hwr-text-dim);
  padding:15px 32px;
  border-left:3px solid transparent;
  transition:color .18s,background .18s,border-color .18s;
}
.hwr-mega__group:hover{color:var(--hwr-white);background:rgba(234,241,246,.04)}
.hwr-mega__group[aria-selected="true"]{
  color:var(--hwr-white);
  background:rgba(44,197,214,.08);
  border-left-color:var(--hwr-teal);
}
.hwr-mega__group-count{
  font-family:var(--hwr-font-display);
  font-size:11px;font-weight:600;
  color:var(--hwr-text-faint);
  background:rgba(234,241,246,.07);
  border-radius:20px;padding:3px 9px;
  flex-shrink:0;
}
.hwr-mega__group[aria-selected="true"] .hwr-mega__group-count{
  color:var(--hwr-teal-ink);background:var(--hwr-teal);
}

/* Panes */
.hwr-mega__pane{display:none;flex-direction:column;padding:32px 44px}
.hwr-mega__pane.is-visible{display:flex;animation:hwr-pane-in .3s var(--hwr-ease)}
@keyframes hwr-pane-in{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}
.hwr-mega__pane-head{margin-bottom:26px}
.hwr-mega__pane-title{
  font-family:var(--hwr-font-display);
  font-size:21px;font-weight:600;color:var(--hwr-white);
  margin-bottom:6px;
}
.hwr-mega__pane-desc{font-size:14.5px;line-height:1.55;color:var(--hwr-text-dim);max-width:52ch}
.hwr-mega__links{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
  column-gap:28px;row-gap:2px;
}
.hwr-mega__link{
  display:block;text-decoration:none;
  font-size:14.5px;font-weight:500;
  color:var(--hwr-text-dim);
  padding:9px 10px;margin:0 -10px;border-radius:6px;
  transition:color .15s,background .15s;
}
.hwr-mega__link:hover{color:var(--hwr-teal);background:rgba(44,197,214,.07)}
.hwr-mega__link.is-current{
  color:var(--hwr-white);
  box-shadow:inset 3px 0 0 var(--hwr-teal);
  padding-left:14px;
}
.hwr-mega__pane-foot{margin-top:auto;padding-top:24px}
.hwr-mega__viewall{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-family:var(--hwr-font-display);
  font-size:13.5px;font-weight:600;letter-spacing:.03em;
  color:var(--hwr-teal);
}
.hwr-mega__viewall svg{width:14px;height:14px;transition:transform .2s var(--hwr-ease)}
.hwr-mega__viewall:hover svg{transform:translateX(4px)}

/* ============================================================
   MOBILE DRAWER
   ============================================================ */
.hwr-mnav{display:flex;align-items:center}

.hwr-burger{
  width:46px;height:46px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  position:relative;z-index:120;
}
.hwr-burger__lines,
.hwr-burger__lines::before,
.hwr-burger__lines::after{
  content:"";display:block;width:22px;height:2px;border-radius:2px;
  background:var(--hwr-white);
  transition:transform .3s var(--hwr-ease),background .2s;
  position:relative;
}
.hwr-burger__lines::before{position:absolute;top:-7px}
.hwr-burger__lines::after{position:absolute;top:7px}
.hwr-burger[aria-expanded="true"] .hwr-burger__lines{background:transparent}
.hwr-burger[aria-expanded="true"] .hwr-burger__lines::before{transform:translateY(7px) rotate(45deg)}
.hwr-burger[aria-expanded="true"] .hwr-burger__lines::after{transform:translateY(-7px) rotate(-45deg)}

.hwr-drawer{
  position:fixed;left:0;right:0;z-index:110;
  top:var(--hwr-drawer-top);
  height:calc(100dvh - var(--hwr-drawer-top));
  background:var(--hwr-navy-900);
  display:none;flex-direction:column;
  opacity:0;transform:translateY(-6px);
  transition:opacity .28s var(--hwr-ease),transform .28s var(--hwr-ease);
  overflow:hidden;
  font-family:var(--hwr-font-body);
  color:var(--hwr-white);
}
.hwr-drawer.is-open{display:flex}
.hwr-drawer.is-visible{opacity:1;transform:none}

.hwr-drawer__track{
  flex:1;display:flex;width:300%;
  transition:transform .35s var(--hwr-ease);
  min-height:0;
}
.hwr-drawer__track[data-level="0"]{transform:translateX(0)}
.hwr-drawer__track[data-level="1"]{transform:translateX(-33.3333%)}
.hwr-drawer__track[data-level="2"]{transform:translateX(-66.6666%)}
.hwr-drawer__panel{
  width:33.3333%;flex-shrink:0;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:14px 20px 24px;
  display:flex;flex-direction:column;
}

.hwr-drawer__row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  width:100%;text-align:left;text-decoration:none;
  min-height:56px;
  font-family:var(--hwr-font-display);
  font-size:17px;font-weight:500;line-height:1.35;
  color:var(--hwr-text-dim);
  padding:14px 6px;
  border-bottom:1px solid var(--hwr-line);
  transition:color .15s;
}
.hwr-drawer__row:hover,
.hwr-drawer__row:active{color:var(--hwr-white)}
.hwr-drawer__row.is-active{color:var(--hwr-white)}
.hwr-drawer__row.is-active .hwr-drawer__row-label{
  box-shadow:inset 0 -2px 0 var(--hwr-teal);
  padding-bottom:3px;
}
.hwr-drawer__row-chev{
  width:10px;height:10px;flex-shrink:0;
  border-right:2px solid var(--hwr-teal);border-bottom:2px solid var(--hwr-teal);
  transform:rotate(-45deg);
}
.hwr-drawer__row--sub{font-size:16px;font-weight:400;min-height:52px}

.hwr-drawer__back{
  display:flex;align-items:center;gap:10px;
  min-height:52px;width:100%;text-align:left;
  font-family:var(--hwr-font-display);
  font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--hwr-teal);
  padding:12px 6px 6px;
}
.hwr-drawer__back svg{width:15px;height:15px;flex-shrink:0}
.hwr-drawer__panel-title{
  font-family:var(--hwr-font-display);
  font-size:22px;font-weight:600;color:var(--hwr-white);
  padding:6px 6px 14px;
}
.hwr-drawer__viewall{
  display:flex;align-items:center;gap:8px;text-decoration:none;
  min-height:52px;
  font-family:var(--hwr-font-display);
  font-size:14.5px;font-weight:600;color:var(--hwr-teal);
  padding:16px 6px;
}
.hwr-drawer__viewall svg{width:14px;height:14px;flex-shrink:0}

.hwr-drawer__actions{
  flex-shrink:0;
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
  padding:16px 20px calc(16px + env(safe-area-inset-bottom));
  background:var(--hwr-navy-950);
  border-top:1px solid var(--hwr-line);
}
.hwr-drawer__actions > :only-child{grid-column:1 / -1}
.hwr-btn-outline{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;
  font-family:var(--hwr-font-display);
  font-size:14.5px;font-weight:600;
  color:var(--hwr-white);
  border:1.5px solid var(--hwr-line-strong);
  padding:14px 12px;border-radius:8px;
  min-height:50px;
  transition:border-color .2s;
}
.hwr-btn-outline:hover{border-color:var(--hwr-teal);color:var(--hwr-white)}
.hwr-btn-outline svg{width:15px;height:15px;flex-shrink:0}
.hwr-btn-solid{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;
  font-family:var(--hwr-font-display);
  font-size:14.5px;font-weight:600;
  color:var(--hwr-teal-ink);background:var(--hwr-teal);
  padding:14px 12px;border-radius:8px;
  min-height:50px;
  transition:background .2s;
}
.hwr-btn-solid:hover{background:#3FD4E4;color:var(--hwr-teal-ink)}

/* Body scroll lock while drawer is open */
body.hwr-drawer-open{overflow:hidden}

/* Optional scrim behind Elementor's open mega dropdown (toggled by JS) */
.hwr-scrim{
  position:fixed;inset:0;z-index:80;
  background:rgba(4,12,22,.55);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s var(--hwr-ease),visibility .3s;
}
.hwr-scrim.is-visible{opacity:1;visibility:visible}

/* ============================================================
   RESPONSIVE STACKING FOR MEGA GRID (safety net — the widget is
   hidden below 1025px in Elementor, but the editor still previews)
   ============================================================ */
@media (max-width:1024px){
  .hwr-mega__grid{grid-template-columns:1fr;min-height:0}
  .hwr-mega__rail{border-right:0;border-bottom:1px solid var(--hwr-line)}
}

@media (prefers-reduced-motion:reduce){
  .hwr-mega__pane.is-visible{animation:none}
  .hwr-drawer,.hwr-drawer__track,
  .hwr-burger__lines,.hwr-burger__lines::before,.hwr-burger__lines::after{
    transition-duration:.01ms}
}