/* Marketing/public header styles — extracted from includes/new_header_public.cfm */
/* ── Desktop mega menu (pubnav- prefix) — click to open, full-bleed panel ── */
/* Header sits flush with the top edge so no page background peeks above it */
.new-header-public { margin-top: 0; }
.pubnav-item { display: flex; }
.pubnav-btn { background: none; border: none; cursor: pointer; font-family: var(--font-sans); display: inline-flex; align-items: center; gap: 5px; padding-top: 22px; padding-bottom: 22px; }
.pubnav-btn .pubnav-car { transition: transform .15s; opacity: .55; }
.pubnav-item.open .pubnav-car { transform: rotate(180deg); }
/* Header gets a solid background while a panel is open so it stays crisp over the blur */
.new-header.pubnav-solid { background: #F3ECF7; }
.pubnav-mega { position: absolute; top: 100%; left: 0; right: 0; display: none; background: #F3ECF7; border-bottom: 1px solid rgba(35,30,65,.08); z-index: 300; }
.pubnav-item.open .pubnav-mega { display: block; animation: pubnavDrop .22s ease; }
@keyframes pubnavDrop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pubnavFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pubnav-item.open .pubnav-mega, .pubnav-overlay.open, .pubm-acc.open .pubm-panel { animation: none !important; } }
/* Content left-aligns with the logo (same 40px gutter as the header),
   cards are wide with the full illustration visible, FEATURES sits right
   after the last card with the same gap as between cards. */
.pubnav-mega-in { display: flex; align-items: flex-start; gap: 22px; padding: 28px 40px 36px; }
.pubnav-card { flex: 0 1 268px; min-width: 208px; background: #fff; border-radius: 6px; text-decoration: none; color: #231E41; display: flex; flex-direction: column; overflow: hidden; transition: transform .12s; }
.pubnav-card:hover { transform: translateY(-2px); }
.pubnav-card-txt { padding: 16px 16px 14px; flex: 1; }
.pubnav-card h4 { font-family: var(--font-sans); font-size: 15.5px; font-weight: 600; margin: 0 0 5px; }
.pubnav-card p { font-family: var(--font-sans); font-size: 12.5px; line-height: 1.45; color: #6F6F87; margin: 0; }
.pubnav-img { display: block; width: 100%; height: auto; }
.pubnav-side { flex-shrink: 0; min-width: 200px; }
/* Page blur behind the open panel — same treatment as .drawer-overlay */
.pubnav-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(17, 24, 39, 0.4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 99; display: none; }
.pubnav-overlay.open { display: block; animation: pubnavFade .2s ease; }
@media (max-width: 959px) { .pubnav-overlay { display: none !important; } }
.pubnav-side h5 { font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8A84A6; margin: 0 0 13px; }
.pubnav-side a { display: block; text-decoration: none; color: #231E41; margin-bottom: 13px; }
.pubnav-side a b { display: block; font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; }
.pubnav-side a span { font-family: var(--font-sans); font-size: 12px; color: #6F6F87; }
.pubnav-side a:hover b { color: #7458CC; }

[data-theme="dark"] .new-header.pubnav-solid { background: #0F1629; }
[data-theme="dark"] .pubnav-mega { background: #0F1629; border-bottom-color: rgba(255,255,255,.08); }
[data-theme="dark"] .pubnav-card { background: #1A2240; color: #E8E4F0; }
[data-theme="dark"] .pubnav-card h4 { color: #fff; }
[data-theme="dark"] .pubnav-card p, [data-theme="dark"] .pubnav-side a span { color: rgba(232,228,240,.55); }
[data-theme="dark"] .pubnav-side a b { color: #E8E4F0; }
[data-theme="dark"] .pubnav-side a:hover b { color: #B9A8F5; }
[data-theme="dark"] .pubnav-side h5 { color: rgba(232,228,240,.45); }

/* ── Mobile menu drawer — IDENTICAL shell to the app header (new_header.cfm):
   a right-side panel that slides in with a blur overlay on desktop, and drops
   from under the fixed header on mobile. The body is the shared
   includes/menu_drawer_body.cfm (mnu- classes); the mega-menu's own
   pubnav-solid stays separate from the drawer's appm-solid. ── */
.mobile-menu-overlay { position: fixed; inset: 0; background: rgba(17,24,39,.4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 95; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s; }
.mobile-menu-overlay.open { opacity: 1; visibility: visible; transition: opacity .25s ease; }
.mobile-menu-drawer.appm { position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: 100%; height: 100%; background: #F3ECF7; z-index: 98; display: flex; flex-direction: column; overflow: hidden; box-shadow: none; transform: translateX(100%); visibility: hidden; transition: transform .28s ease, visibility 0s linear .28s; }
.mobile-menu-drawer.appm.open { transform: translateX(0); visibility: visible; transition: transform .28s ease; }
@media (min-width: 960px) { .mobile-menu-drawer.appm { width: 420px; max-width: 420px; box-shadow: -16px 0 48px rgba(35,30,65,.16); } }
[data-theme="dark"] .mobile-menu-drawer.appm { background: #0F1629; }

/* Mobile / base: opaque header sits on top of the drop-down drawer. */
.new-header.appm-solid { background: #F3ECF7; }
[data-theme="dark"] .new-header.appm-solid { background: #0F1629; }
/* Hide the header's Go to App while the drawer is open; only toggle + X stay. */
.new-header.appm-solid .new-create-btn { display: none; }
@media (min-width: 960px) {
  /* Header-left (logo + nav) dims under the overlay; right-side icons lift:
     left (z90) < overlay (z95) < drawer (z98) < right icons (z104). */
  .new-header.appm-solid { background: transparent; z-index: auto; }
  .new-header.appm-solid .new-header-left { position: relative; z-index: 90; }
  .new-header.appm-solid .new-header-right { position: relative; z-index: 104; }
}

/* Clean logo inside the drawer (desktop); the real header logo stays dimmed
   under the overlay. Hidden on mobile, where the fixed header shows the logo. */
.appm-brand { display: none; flex-shrink: 0; align-items: center; padding: 0 20px; }
.appm-brand img { height: 30px; display: block; }
@media (min-width: 960px) { .appm-brand { display: flex; } }

/* Mobile (<960px): drop down from under the fixed header, no side slide and no
   blur overlay. JS sets `top` to the header's bottom on open. */
@media (max-width: 959px) {
  .mobile-menu-overlay { display: none !important; }
  .mobile-menu-drawer.appm { top: 76px; bottom: 0; height: auto; box-shadow: none; transform: translateY(-14px); opacity: 0; transition: transform .25s ease, opacity .22s ease, visibility 0s linear .25s; }
  .mobile-menu-drawer.appm.open { transform: translateY(0); opacity: 1; transition: transform .25s ease, opacity .2s ease; }
}
.mobile-menu-drawer.appm .mobile-menu-content { flex: 1; overflow-y: auto; padding: 4px 20px 16px; }

/* Pin the hamburger colors across tap / press / open states (iOS gray
   tap-highlight + sticky :hover otherwise read as the old dark colors). */
.hamburger-menu-btn { -webkit-tap-highlight-color: transparent; color: #7F69CE; }
.hamburger-menu-btn:hover, .hamburger-menu-btn:focus, .hamburger-menu-btn:active, .hamburger-menu-btn.menu-open { color: #7F69CE; }
@media (hover: none) { .hamburger-menu-btn:hover { background: #ECE2F7; } }
[data-theme="dark"] .hamburger-menu-btn, [data-theme="dark"] .hamburger-menu-btn:hover, [data-theme="dark"] .hamburger-menu-btn:focus, [data-theme="dark"] .hamburger-menu-btn:active, [data-theme="dark"] .hamburger-menu-btn.menu-open { color: rgba(255,255,255,0.75); }
@media (hover: none) { [data-theme="dark"] .hamburger-menu-btn:hover { background: rgba(141,117,230,0.15); } }
.hamburger-menu-btn .hamb-lines { position: relative; width: 20px; height: 20px; display: block; }
.hamburger-menu-btn .hamb-lines span { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s ease, top .3s ease, opacity .2s ease; }
.hamburger-menu-btn .hamb-lines span:nth-child(1) { top: 3px; }
.hamburger-menu-btn .hamb-lines span:nth-child(2) { top: 9px; }
.hamburger-menu-btn .hamb-lines span:nth-child(3) { top: 15px; }
.hamburger-menu-btn.menu-open .hamb-lines span:nth-child(1) { top: 9px; transform: rotate(45deg); }
.hamburger-menu-btn.menu-open .hamb-lines span:nth-child(2) { opacity: 0; }
.hamburger-menu-btn.menu-open .hamb-lines span:nth-child(3) { top: 9px; transform: rotate(-45deg); }
/* Logged in: the hamburger shows at every width, next to the theme toggle. */
.hamburger-menu-btn.pub-hamb-always { display: flex; }
@media (prefers-reduced-motion: reduce) { .mobile-menu-drawer.appm, .mobile-menu-drawer.appm.open, .hamburger-menu-btn .hamb-lines span { transition: none !important; } }