/* Aplike navigation. One state machine; no hover-only CSS and no invisible hit zones. */
@media screen and (min-width:1121px) and (prefers-reduced-motion:no-preference){
  .apx-site .apx-header .apx-progress{will-change:transform}
}
/* Header reading-progress and sticky state: sole owner of these controls.
   A single DOM indicator is updated by js/experience.js; never re-create it. */
.apx-site .apx-header{position:sticky;top:var(--drupal-displace-offset-top,0px);z-index:300;isolation:isolate}
.apx-site .apx-header .apx-progress{
 position:absolute;top:auto;left:0;right:0;bottom:0;
 display:block;width:100%;height:3px;z-index:310;
 margin:0;padding:0;border:0;pointer-events:none;
 transform:scaleX(0);transform-origin:0 50%;
 background:linear-gradient(90deg,#ff0000 0%,#ff523c 34%,#FFD700 70%,#81ffe8 100%);
 box-shadow:0 0 12px #ffd700a6,0 1px 15px #ff000055;
}

.apx-header{
  background:#080c15;border-bottom:0;isolation:isolate;
}
/* The sticky header is optically opaque (#080c15; scrolled alpha .973).
   A backdrop blur sampled almost no visible background, but allocated a
   composited backdrop surface throughout scrolling. Keep the premium opaque
   glass-like paint, shadow and gold progress line without this redundant pass. */
.apx-header__inner{min-height:78px;display:flex;align-items:center;gap:clamp(12px,1.5vw,25px);padding-block:5px}
.apx-header.is-scrolled{background:#080c15f8;box-shadow:0 12px 38px #0007,inset 0 -1px #FFD70028}
.apx-logo{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;flex:none;width:clamp(145px,14vw,185px);color:#fff;text-decoration:none;line-height:1}
.apx-logo img{
  width:100%;height:auto;display:block;
  transform-origin:40% 55%;transition:transform .8s cubic-bezier(.17,.77,.2,1),filter .85s ease;
}
.apx-logo span{
  font-size:10px;font-weight:700;margin-top:0;letter-spacing:.025em;color:#d5e6ed;padding-right:3px;white-space:nowrap;
  transition:color .65s ease,letter-spacing .85s ease;
}

/* Logo: small optical response, never a new solid background panel. */


.apx-logo::before{content:"";position:absolute;z-index:-1;inset:12% -6%;border-radius:50%;pointer-events:none;background:radial-gradient(ellipse at 38% 50%,#ed42452c,transparent 65%);filter:blur(13px);opacity:0;transition:opacity .9s ease}
.apx-logo::after{content:"";position:absolute;z-index:2;left:0;top:45%;width:38%;height:2px;pointer-events:none;opacity:0;transform:translateX(-110%) rotate(-21deg);background:linear-gradient(90deg,transparent,#ffe4ad,transparent);filter:drop-shadow(0 0 5px #fbd27b)}
@media(hover:hover) and (pointer:fine){
 .apx-logo:is(:hover,:focus-visible) img{transform:perspective(520px) rotateY(-5deg) rotateZ(-1.5deg) translateY(-2px) scale(1.035);filter:drop-shadow(0 0 11px #ef4c5760)}
 .apx-logo:is(:hover,:focus-visible) span{color:#9af7e6;letter-spacing:.04em}
 .apx-logo:is(:hover,:focus-visible)::before{opacity:1}
 .apx-logo:is(:hover,:focus-visible)::after{animation:apxLogoGlint 1.25s cubic-bezier(.13,.76,.32,1) both}
}
@keyframes apxLogoGlint{0%{opacity:0;transform:translateX(-110%) rotate(-21deg)}20%{opacity:.8}85%{opacity:.75}100%{opacity:0;transform:translateX(255%) rotate(-21deg)}}
.apx-logo:focus-visible{outline:2px solid #ffdf8a;outline-offset:5px;border-radius:5px}
@media(prefers-reduced-motion:reduce){.apx-logo img,.apx-logo span,.apx-logo::before{transition:none}.apx-logo::after{animation:none;display:none}}

.apx-nav{min-width:0;flex:1;display:flex;justify-content:flex-end;align-items:center}
.apx-nav nav{width:100%}
.apx-nav nav>ul{list-style:none;margin:0;padding:0;display:flex;justify-content:flex-end;align-items:center;gap:clamp(9px,1.05vw,20px)}
.apx-nav nav li{list-style:none;margin:0;padding:0}
.apx-nav nav>ul>li{position:static;display:flex;align-items:center;min-width:0;gap:5px}
.apx-nav nav>ul>li>a{font-size:clamp(12px,.95vw,14px);font-weight:750;white-space:nowrap;line-height:1.3;padding:15px 0;text-decoration:none;color:#e9f0f9;transition:color .25s}
.apx-nav nav>ul>li>a:hover,.apx-nav nav>ul>li>a.is-active,.apx-nav nav>ul>li.apx-menu-open>a{color:#7ef4dc}
.apx-nav nav>ul>li>a:focus-visible{outline:2px solid #ffe184;outline-offset:4px;border-radius:3px}
.apx-nav-expand{display:grid;place-items:center;flex:none;width:25px;height:30px;border:0;border-radius:7px;background:transparent;cursor:pointer;color:#d8e4f1;transition:color .25s,background .25s}
.apx-nav-expand:hover{color:#73f1d7;background:#ffffff14}
.apx-chevron{display:block;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.apx-menu-open>.apx-nav-expand .apx-chevron,.apx-menu-selected>.apx-nav-expand .apx-chevron,.apx-nav-expand[aria-expanded="true"] .apx-chevron{transform:translateY(2px) rotate(225deg)}
/* All submenu layers are truly not hit-testable when closed. */
.apx-nav nav li>ul{display:none;pointer-events:none;list-style:none;margin:0;padding:0}
.apx-nav nav>ul>li.apx-menu-open>ul{display:grid;pointer-events:auto;position:absolute;top:calc(100% - 1px);left:50%;width:min(1100px,calc(100vw - 44px));max-height:min(76vh,760px);overflow:auto;overscroll-behavior-y:auto;transform:translateX(-50%);z-index:110;border:1px solid #72b7cb69;border-top:2px solid #6ef4db;border-radius:0 0 24px 24px;background:linear-gradient(135deg,#14283a 0%,#18223a 62%,#241e3f 100%);box-shadow:0 35px 75px #02040bc9,inset 0 1px #ffffff14;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:22px;animation:apxMenuSoftOpen .94s cubic-bezier(.2,.8,.22,1) both}


.apx-nav nav>ul>li:not(.apx-nav-mega).apx-menu-open>ul{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));max-width:820px;gap:9px}
.apx-nav nav li>ul>li{min-width:0;display:flex;align-items:center;gap:8px;border:1px solid #d3e6ff1b;border-radius:11px;background:#ffffff08;transition:background .3s,border-color .3s}
.apx-nav nav li>ul>li:hover,.apx-nav nav li>ul>li.apx-menu-selected{background:#4af3ce1b;border-color:#7cf3dc80}
.apx-nav nav li>ul>li>a{color:#e3ecf7;line-height:1.4;font-size:14px;font-weight:650;padding:14px 14px;min-width:0;flex:1;text-decoration:none;overflow-wrap:normal;white-space:nowrap}
.apx-nav nav li>ul>li>a:hover{color:#fff}
.apx-nav nav li>ul>li>.apx-nav-expand{margin-right:8px;flex:none}
/* Mega: the category list and active third-level panel form a single bounded surface. */

.apx-nav-mega>ul>li>ul{
  display:none;position:absolute;pointer-events:none;padding:2px;grid-template-columns:minmax(0,1fr);align-content:start;gap:9px;border:0;background:transparent;overflow:visible;
  top:calc(22px + var(--apx-menu-scroll,0px));left:calc(40% + 30px);right:22px;width:auto;max-width:none;min-height:0;bottom:auto;
}
.apx-nav-mega>ul>li.apx-menu-selected>ul{display:grid;pointer-events:auto}
.apx-nav-mega>ul>li>ul>li{
  background:#ffffff08;border-color:#daeaf42c;
  min-height:56px;
}
.apx-nav-mega>ul>li>ul>li>a{font-size:13px;padding:13px;line-height:1.42}
/* Grid inside mega stays positioned by outer submenu, never leaks below it. */
.apx-nav nav>ul>li.apx-nav-mega.apx-menu-open>ul{display:grid;grid-template-columns:minmax(300px,40%) minmax(0,1fr);grid-template-rows:repeat(10,auto);align-content:start;column-gap:24px;min-height:0;padding:22px}
.apx-nav-mega>ul>li{grid-column:1;margin:0}


.apx-nav nav>ul>li:last-child>a{border:1px solid #ffdd56;border-radius:999px;padding:12px 19px;color:#ffe17c;background:#ffdb4613;font-weight:800;transition:background .3s,box-shadow .3s}
.apx-nav nav>ul>li:last-child>a:hover{background:#ffdc58;color:#121722;box-shadow:0 0 22px #ffdf585c}
.apx-header__cta{flex:none;border:1px solid #ff2735;border-radius:999px;padding:12px 18px;text-decoration:none;white-space:nowrap;font-size:13px;font-weight:800;color:#ff6771;transition:background .3s,color .3s,box-shadow .3s}
.apx-header__cta:hover{color:#fff;background:#e80019;box-shadow:0 0 24px #ff334d66}
.apx-header__cta span{margin-left:7px;font-size:13px;display:inline-block;transition:transform .3s}
.apx-header__cta:hover span{transform:translate(3px,-3px)}
.apx-menu-button{display:none;border:1px solid #a0bdd663;border-radius:12px;width:44px;height:44px;background:#15283b;align-items:center;justify-content:center;flex-direction:column;gap:5px;margin-left:auto}
.apx-menu-button>span{height:2px;width:21px;border-radius:2px;background:#eef9ff}





/* Precisely defined focus and hover borders on both submenu levels. */
.apx-nav nav li>ul>li:is(:hover,:focus-within),
.apx-nav-mega>ul>li>ul>li:is(:hover,:focus-within){border-color:#FFD700;box-shadow:inset 0 0 0 1px #FFD70055,0 0 17px #FFD70024;background:#FFD70016}
.apx-nav nav li>ul>li:is(:hover,:focus-within)>a{color:#FFF3BA}