/* ==========================================================================
   Storxie Nexus — shared header, services dropdown, mobile drawer
   Prefix sxh-. Self-contained so it works on every page type.
   ========================================================================== */

:root{
  --sxh-blue:#4570B7;
  --sxh-blue-dark:#33578F;
  --sxh-ink:#0E1726;
  --sxh-muted:#5F6B7C;
  --sxh-line:#E3E9F2;
  --sxh-soft:#F5F8FC;
  --sxh-radius:12px;
  --sxh-h:74px;
}

/* ---------------------------------------------------------------- shell */
.sxh{
  position:sticky;top:0;z-index:80;
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--sxh-line);
}
@supports not (backdrop-filter:blur(2px)){ .sxh{background:#fff} }

.sxh-in{
  max-width:1160px;margin:0 auto;padding:0 24px;
  height:var(--sxh-h);
  display:flex;align-items:center;gap:24px;
}

/* ---------------------------------------------------------------- brand */
.sxh-brand{display:flex;align-items:center;flex:none;margin-right:auto}
.sxh-brand img{height:34px;width:auto;display:block}

/* ------------------------------------------------------------ desktop nav */
.sxh-nav{display:flex;align-items:center;gap:2px}

.sxh-link{
  display:inline-flex;align-items:center;gap:5px;
  font-size:14.5px;font-weight:600;color:var(--sxh-ink);
  padding:9px 12px;border-radius:9px;text-decoration:none;
  background:none;border:0;cursor:pointer;font-family:inherit;
  white-space:nowrap;
  transition:background .15s ease,color .15s ease;
}
.sxh-link:hover{background:var(--sxh-soft);color:var(--sxh-blue-dark);text-decoration:none}
.sxh-link[aria-current="page"]{color:var(--sxh-blue);background:#EDF3FC}
.sxh-link:focus-visible{outline:2px solid var(--sxh-blue);outline-offset:2px}

.sxh-chev{width:13px;height:13px;flex:none;transition:transform .2s ease}
.sxh-dd[data-open="true"] .sxh-chev{transform:rotate(180deg)}

/* ---------------------------------------------------------- CTA button */
.sxh-cta{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  height:42px;padding:0 18px;border-radius:10px;
  background:var(--sxh-blue);color:#fff !important;
  font-size:14px;font-weight:650;text-decoration:none;white-space:nowrap;
  transition:background .16s ease,box-shadow .16s ease,transform .16s ease;
}
.sxh-cta:hover{background:var(--sxh-blue-dark);text-decoration:none;box-shadow:0 6px 16px rgba(69,112,183,.28)}
.sxh-cta:focus-visible{outline:3px solid rgba(69,112,183,.45);outline-offset:2px}

/* ------------------------------------------------------------- dropdown */
.sxh-dd{position:relative}

.sxh-menu{
  position:absolute;top:calc(100% + 10px);left:50%;
  transform:translate(-50%,-6px);
  width:470px;padding:10px;
  background:#fff;border:1px solid var(--sxh-line);border-radius:16px;
  box-shadow:0 18px 44px rgba(14,23,38,.13),0 2px 6px rgba(14,23,38,.05);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
/* invisible bridge so the pointer can travel from trigger to menu */
.sxh-menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.sxh-dd[data-open="true"] .sxh-menu{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translate(-50%,0);
}

.sxh-mi{
  display:flex;gap:12px;align-items:flex-start;
  padding:11px 12px;border-radius:11px;text-decoration:none;
  transition:background .14s ease;
}
.sxh-mi:hover,.sxh-mi:focus-visible{background:var(--sxh-soft);text-decoration:none;outline:none}
.sxh-mi:focus-visible{box-shadow:inset 0 0 0 2px var(--sxh-blue)}
.sxh-mi[aria-current="page"]{background:#EDF3FC}

.sxh-mi-ic{
  width:34px;height:34px;flex:none;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#EDF3FC,#F7FAFE);
  border:1px solid #E1EAF7;
}
.sxh-mi-ic svg{width:17px;height:17px;stroke:var(--sxh-blue);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sxh-mi[aria-current="page"] .sxh-mi-ic{background:linear-gradient(160deg,#DCE9FA,#EDF3FC);border-color:#CBDBF2}

.sxh-mi-t{display:block;font-size:14px;font-weight:650;color:var(--sxh-ink);line-height:1.3}
.sxh-mi[aria-current="page"] .sxh-mi-t{color:var(--sxh-blue-dark)}
.sxh-mi-d{display:block;font-size:12.5px;color:var(--sxh-muted);line-height:1.45;margin-top:2px}

.sxh-all{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:6px;padding:11px 13px;border-radius:11px;
  border-top:1px solid var(--sxh-line);
  background:linear-gradient(180deg,#F8FAFE,#F2F6FC);
  font-size:13.5px;font-weight:650;color:var(--sxh-blue);text-decoration:none;
}
.sxh-all:hover{background:#EDF3FC;text-decoration:none;color:var(--sxh-blue-dark)}
.sxh-all svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}

/* --------------------------------------------------------------- burger */
.sxh-burger{
  display:none;flex:none;width:46px;height:46px;
  align-items:center;justify-content:center;
  background:none;border:1px solid var(--sxh-line);border-radius:11px;
  cursor:pointer;margin-left:8px;
}
.sxh-burger span{display:block;width:19px;height:2px;background:var(--sxh-ink);border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.sxh-burger span+span{margin-top:4px}
.sxh-burger:focus-visible{outline:2px solid var(--sxh-blue);outline-offset:2px}

/* ---------------------------------------------------------------- scrim */
.sxh-scrim{
  position:fixed;inset:0;z-index:90;
  background:rgba(11,18,32,.46);
  opacity:0;transition:opacity .22s ease;
}
.sxh-scrim[data-show="true"]{opacity:1}

/* --------------------------------------------------------------- drawer */
.sxh-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:100;
  width:min(360px,88vw);
  background:#fff;
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .26s cubic-bezier(.32,.72,0,1);
  box-shadow:-12px 0 40px rgba(14,23,38,.16);
  overflow:hidden;
}
.sxh-drawer[data-open="true"]{transform:none}

.sxh-d-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid var(--sxh-line);flex:none;
}
.sxh-d-top img{height:30px;width:auto}
.sxh-d-close{
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  background:none;border:0;border-radius:9px;cursor:pointer;color:var(--sxh-muted);
}
.sxh-d-close:hover{background:var(--sxh-soft)}
.sxh-d-close:focus-visible{outline:2px solid var(--sxh-blue);outline-offset:2px}
.sxh-d-close svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2}

.sxh-d-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:8px 18px 18px;-webkit-overflow-scrolling:touch}

.sxh-d-link{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:15px 2px;border-bottom:1px solid var(--sxh-line);
  font-size:15.5px;font-weight:600;color:var(--sxh-ink);text-decoration:none;
}
.sxh-d-link:hover,.sxh-d-link:focus-visible{color:var(--sxh-blue);text-decoration:none}
.sxh-d-link[aria-current="page"]{color:var(--sxh-blue)}
.sxh-d-link[aria-current="page"]::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--sxh-blue);flex:none}

/* services accordion */
.sxh-d-sub-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:15px 2px;border:0;border-bottom:1px solid var(--sxh-line);
  background:none;font-family:inherit;font-size:15.5px;font-weight:600;
  color:var(--sxh-ink);cursor:pointer;text-align:left;
}
.sxh-d-sub-btn:focus-visible{outline:2px solid var(--sxh-blue);outline-offset:-2px;border-radius:6px}
.sxh-d-sub-btn .sxh-chev{width:16px;height:16px;color:var(--sxh-muted)}
.sxh-d-sub[data-open="true"] .sxh-d-sub-btn{color:var(--sxh-blue)}
.sxh-d-sub[data-open="true"] .sxh-chev{transform:rotate(180deg)}

.sxh-d-panel{overflow:hidden;height:0;transition:height .24s ease}
.sxh-d-sub-list{padding:6px 0 10px;border-bottom:1px solid var(--sxh-line)}
.sxh-d-svc{
  display:block;padding:10px 12px;border-radius:9px;
  font-size:14.5px;font-weight:550;color:var(--sxh-ink);text-decoration:none;
}
.sxh-d-svc:hover,.sxh-d-svc:focus-visible{background:var(--sxh-soft);color:var(--sxh-blue);text-decoration:none}
.sxh-d-svc[aria-current="page"]{color:var(--sxh-blue);background:#EDF3FC;font-weight:650}
.sxh-d-svc small{display:block;font-size:12px;color:var(--sxh-muted);font-weight:400;margin-top:1px;line-height:1.4}

/* drawer actions */
.sxh-d-foot{
  flex:none;padding:14px 18px calc(14px + env(safe-area-inset-bottom));
  border-top:1px solid var(--sxh-line);background:#FBFCFE;
  display:flex;flex-direction:column;gap:9px;
}
.sxh-d-cta{
  display:flex;align-items:center;justify-content:center;
  min-height:46px;border-radius:10px;
  background:var(--sxh-blue);color:#fff !important;
  font-size:14.5px;font-weight:650;text-decoration:none;
}
.sxh-d-cta:hover{background:var(--sxh-blue-dark);text-decoration:none}
.sxh-d-wa{
  display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;border-radius:10px;
  background:#fff;border:2px solid var(--sxh-blue);color:var(--sxh-blue) !important;
  font-size:14.5px;font-weight:650;text-decoration:none;
}
.sxh-d-wa:hover{background:#EDF3FC;text-decoration:none}
.sxh-d-wa svg{width:17px;height:17px;flex:none;fill:#25D366;stroke:none}

/* --------------------------------------------------------- body lock */
body.sxh-locked{overflow:hidden}

/* ----------------------------------------------------------- breadcrumbs */
.sxh-crumbs{padding:14px 0 0}
.sxh-crumbs ol{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  font-size:13px;color:var(--sxh-muted);
}
.sxh-crumbs li{display:flex;align-items:center;gap:6px}
.sxh-crumbs a{color:var(--sxh-muted);text-decoration:none}
.sxh-crumbs a:hover{color:var(--sxh-blue);text-decoration:underline}
.sxh-crumbs [aria-current="page"]{color:var(--sxh-ink);font-weight:600}
.sxh-crumbs .sep{color:#B9C4D4;font-size:11px}

/* ------------------------------------------------------------ responsive */
@media (max-width:1080px){
  .sxh-nav .sxh-link{font-size:14px;padding:8px 10px}
  .sxh-cta{padding:0 15px;font-size:13.5px}
  .sxh-in{gap:16px}
}
@media (max-width:940px){
  .sxh-nav{display:none}
  .sxh-burger{display:flex}
  .sxh-cta{display:none}
  .sxh-in{gap:0;padding:0 18px}
}
@media (max-width:430px){
  .sxh-drawer{width:min(340px,90vw)}
  .sxh-d-body{padding:6px 16px 16px}
  .sxh-d-foot{padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
}
@media (max-width:360px){
  .sxh-brand img{height:30px}
  .sxh-in{height:66px}
  .sxh-d-link,.sxh-d-sub-btn{font-size:14.5px;padding:13px 2px}
  .sxh-d-svc{font-size:13.5px;padding:9px 10px}
}

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){
  .sxh-menu,.sxh-drawer,.sxh-scrim,.sxh-d-panel,.sxh-chev{transition:none !important}
}