/* SS Computers shared header/navigation — click-only dropdowns.
   Loaded after existing page CSS so one file controls desktop + mobile navigation. */

.header .nav,
.blog-main-header .blog-main-nav{position:relative}

.ss-nav-menu{isolation:isolate}
.ss-nav-menu .dropdown{position:relative}
.ss-nav-menu .dropbtn{display:inline-flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap}
.ss-nav-menu .nav-arrow{display:inline-block;font-size:9px;line-height:1;transition:transform .2s ease}
.ss-nav-menu .dropdown.is-open>.dropbtn .nav-arrow{transform:rotate(180deg)}

/* The menu is never opened by :hover or :focus-within. JS toggles .is-open only. */
.ss-nav-menu .dropdown>.menu,
.ss-nav-menu .dropdown:hover>.menu,
.ss-nav-menu .dropdown:focus-within>.menu{
  display:block!important;
  position:absolute;
  top:calc(100% + 12px);
  left:0;
  min-width:292px;
  padding:9px;
  margin:0;
  background:#fff;
  border:1px solid #dce4ee;
  border-radius:14px;
  box-shadow:0 18px 45px rgba(15,23,42,.17);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-7px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s ease;
  z-index:2500;
}
.ss-nav-menu .dropdown>.menu::before{
  content:"";
  position:absolute;
  top:-7px;
  left:28px;
  width:13px;
  height:13px;
  background:#fff;
  border-left:1px solid #dce4ee;
  border-top:1px solid #dce4ee;
  transform:rotate(45deg);
}
.ss-nav-menu .dropdown.is-open>.menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}

.ss-nav-menu .menu a{
  position:relative;
  display:flex!important;
  align-items:center;
  gap:11px;
  min-height:48px;
  padding:7px 10px!important;
  border-radius:10px;
  color:#26384d;
  font-size:14px;
  font-weight:650;
  line-height:1.25;
  text-decoration:none;
  transition:background .16s ease,color .16s ease,transform .16s ease;
}
.ss-nav-menu .menu a:hover,
.ss-nav-menu .menu a:focus-visible,
.ss-nav-menu .menu a[aria-current="page"]{
  background:#eef6ff!important;
  color:#173f7a!important;
  transform:translateX(2px);
  outline:none;
}
.ss-nav-menu .nav-menu-icon{
  width:34px;
  height:34px;
  flex:0 0 34px;
  padding:6px;
  border-radius:9px;
  color:#546579;
  background:#f2f5f8;
  stroke:currentColor;
  fill:none;
  transition:color .16s ease,background .16s ease;
}
.ss-nav-menu .menu a:hover .nav-menu-icon,
.ss-nav-menu .menu a:focus-visible .nav-menu-icon,
.ss-nav-menu .menu a[aria-current="page"] .nav-menu-icon{
  color:#1769b2;
  background:#dfeeff;
}

.ss-nav-menu>a[aria-current="page"],
.ss-nav-menu>.dropdown.current>.dropbtn{
  color:#173f7a!important;
  background:#eef6ff!important;
}
.ss-nav-menu>a[aria-current="page"]{box-shadow:inset 0 -2px 0 #2563eb}
.ss-nav-menu .dropbtn:focus-visible,
.ss-nav-menu>a:focus-visible{outline:3px solid rgba(37,99,235,.24);outline-offset:2px}
.ss-nav-menu .ss-ticket-link{white-space:nowrap}

/* Make blog header use the same dropdown interaction while retaining its branding. */
.blog-main-header .ss-nav-menu>.dropdown>.dropbtn{font:inherit}
.blog-main-header .ss-nav-menu .menu a{font-family:inherit}

@media (max-width:1120px) and (min-width:901px){
  .ss-nav-menu{gap:2px!important}
  .ss-nav-menu>a,.ss-nav-menu>.dropdown>.dropbtn{font-size:13px!important;padding:9px 6px!important}
  .ss-nav-menu .dropdown>.menu{min-width:276px}
}

@media (max-width:900px){
  .header .nav,.blog-main-header .blog-main-nav{min-height:68px}
  .hamb,.blog-hamb{display:block!important}
  .ss-nav-menu{
    display:none!important;
    position:absolute!important;
    top:100%!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    max-height:calc(100vh - 76px)!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    padding:10px max(4%,16px) 16px!important;
    background:#fff!important;
    border-bottom:1px solid #dce4ee!important;
    box-shadow:0 16px 35px rgba(15,23,42,.14)!important;
    z-index:2400!important;
  }
  .ss-nav-menu.open{display:block!important}
  .ss-nav-menu>a,
  .ss-nav-menu>.dropdown>.dropbtn{
    width:100%!important;
    min-height:45px;
    justify-content:space-between!important;
    text-align:left!important;
    padding:10px 12px!important;
    margin:1px 0!important;
    border-radius:10px!important;
    font-size:15px!important;
  }
  .ss-nav-menu>.dropdown{width:100%}
  .ss-nav-menu .dropdown>.menu,
  .ss-nav-menu .dropdown:hover>.menu,
  .ss-nav-menu .dropdown:focus-within>.menu{
    position:static!important;
    min-width:0!important;
    width:100%!important;
    max-height:0;
    overflow:hidden;
    padding:0!important;
    border:0!important;
    border-radius:10px!important;
    box-shadow:none!important;
    background:#f7faff!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:none!important;
    transform:none!important;
    transition:max-height .22s ease,padding .22s ease,margin .22s ease!important;
  }
  .ss-nav-menu .dropdown>.menu::before{display:none}
  .ss-nav-menu .dropdown.is-open>.menu{
    max-height:650px;
    margin:4px 0 8px!important;
    padding:6px!important;
    pointer-events:auto!important;
  }
  .ss-nav-menu .menu a{min-height:46px;padding:6px 9px!important;font-size:14px!important}
  .ss-nav-menu .nav-menu-icon{width:32px;height:32px;flex-basis:32px;padding:6px}
  .ss-nav-menu .ss-ticket-link{justify-content:center!important;text-align:center!important;margin-top:5px!important}
}

@media (prefers-reduced-motion:reduce){
  .ss-nav-menu .menu,.ss-nav-menu .nav-arrow,.ss-nav-menu .menu a{transition:none!important}
}


/* ============================================================
   SS COMPUTERS — PERMANENT BLOG HEADER SHELL
   These unique classes isolate the Blog header from Blog page
   CSS (.container / .nav / other generic layout selectors).
   Do not add page-specific Blog spacing overrides again.
   ============================================================ */

.ss-site-shell{
  width:min(1180px,92%)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Top contact bar */
.ss-site-topbar .ss-site-topbar-inner{
  min-height:38px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
  align-items:center!important;
  column-gap:16px!important;
  padding:0!important;
}
.ss-site-topbar .ss-site-address{justify-self:start!important;white-space:nowrap}
.ss-site-topbar .ss-site-eco{justify-self:center!important;text-align:center!important;white-space:nowrap;font-weight:800}
.ss-site-topbar .ss-site-call{justify-self:end!important;white-space:nowrap}

/* Main navigation geometry — independent of Blog layout CSS */
.ss-site-header .ss-site-nav{
  position:relative!important;
  min-height:78px!important;
  display:flex!important;
  align-items:center!important;
  gap:20px!important;
  padding:0!important;
}
.ss-site-header .ss-site-nav>.brand{
  flex:0 0 auto!important;
  margin:0 auto 0 0!important;
  min-width:max-content!important;
}
.ss-site-header .ss-site-nav>.nav-links{
  flex:0 0 auto!important;
  width:auto!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:4px!important;
}

/* Medium desktop: shrink typography, never stretch item gaps. */
@media (min-width:901px) and (max-width:1200px){
  .ss-site-shell{width:96%!important}
  .ss-site-header .ss-site-nav{gap:10px!important}
  .ss-site-header .ss-site-nav>.nav-links{gap:2px!important}
  .ss-site-header .ss-site-nav>.nav-links>a,
  .ss-site-header .ss-site-nav>.nav-links>.dropdown>.dropbtn{
    font-size:13px!important;
    padding:9px 6px!important;
  }
}

/* Mobile/tablet */
@media (max-width:900px){
  .ss-site-topbar .ss-site-topbar-inner{
    min-height:38px!important;
    display:flex!important;
    justify-content:center!important;
    gap:10px!important;
  }
  .ss-site-topbar .ss-site-address{display:none!important}
  .ss-site-topbar .ss-site-eco{display:none!important}
  .ss-site-topbar .ss-site-call{margin:0 auto!important}

  .ss-site-header .ss-site-nav{
    min-height:68px!important;
    gap:10px!important;
  }
  .ss-site-header .ss-site-nav>.brand{
    margin-right:auto!important;
  }
  .ss-site-header .ss-site-nav>.nav-links{
    position:absolute!important;
    top:100%!important;
    left:0!important;
    right:0!important;
    width:100%!important;
  }
}

/* Never use these old experimental Blog spacing classes again. */
.blog-header-tight{all:unset}