/* SS Computers blog post top header only */
.blog-topbar{background:#071a35;color:#eaf3ff;font-size:13px;line-height:1.45}
.blog-topbar-inner{min-height:36px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:7px;padding-bottom:7px}
.blog-topbar a{color:#fff;text-decoration:none;font-weight:800;white-space:nowrap}
.blog-main-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-bottom:1px solid #e5edf7;box-shadow:0 8px 24px rgba(15,23,42,.06)}
.blog-main-nav{min-height:78px;display:flex;align-items:center;gap:26px}
.blog-brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;min-width:245px}
.blog-brand img{width:54px;height:54px;object-fit:contain;flex:none}
.blog-brand span{display:grid;gap:2px}
.blog-brand strong{font-size:18px;line-height:1.1;letter-spacing:.01em;color:#0b2345}
.blog-brand small{font-size:10px;line-height:1.2;letter-spacing:.12em;color:#64748b;font-weight:800}
.blog-navlinks{margin-left:auto;display:flex;align-items:center;gap:4px}
.blog-navlinks a{display:inline-flex;align-items:center;min-height:42px;padding:0 10px;border-radius:9px;text-decoration:none;color:#26384d;font-weight:700;font-size:16px;transition:.2s ease}
.blog-navlinks a:hover,.blog-navlinks a.active{background:#eef5ff;color:#075dd8}
.blog-navlinks .blog-ticket{margin-left:5px;background:linear-gradient(135deg,#0d6efd,#1454d1);color:#fff;box-shadow:0 8px 18px rgba(13,110,253,.18)}
.blog-navlinks .blog-ticket:hover{background:linear-gradient(135deg,#0b63e6,#0f49bd);color:#fff;transform:translateY(-1px)}
.blog-hamb{display:none;margin-left:auto;width:44px;height:44px;border:1px solid #d8e3f1;border-radius:12px;background:#f8fbff;color:#0b2345;font-size:21px;cursor:pointer}
@media (max-width:1100px){.blog-navlinks a{padding:0 9px;font-size:13px}.blog-brand{min-width:220px}}
@media (max-width:900px){.blog-topbar-inner{justify-content:center;text-align:center}.blog-topbar-inner span{display:none}.blog-main-nav{min-height:70px;position:relative}.blog-brand{min-width:0}.blog-brand img{width:48px;height:48px}.blog-brand strong{font-size:17px}.blog-hamb{display:inline-grid;place-items:center}.blog-navlinks{display:none;position:absolute;left:16px;right:16px;top:calc(100% + 8px);margin:0;padding:12px;background:#fff;border:1px solid #e2e8f0;border-radius:16px;box-shadow:0 22px 50px rgba(15,23,42,.18)}.blog-navlinks.open{display:grid}.blog-navlinks a{width:100%;justify-content:flex-start;padding:11px 13px;min-height:44px;font-size:16px}.blog-navlinks .blog-ticket{margin-left:0;justify-content:center;margin-top:4px}}
@media (max-width:520px){.blog-topbar{display:none}.blog-main-header{top:0}.blog-main-nav{padding-top:7px;padding-bottom:7px}.blog-brand small{font-size:8.5px;letter-spacing:.08em}.blog-brand strong{font-size:15.5px}.blog-brand img{width:44px;height:44px}.blog-hamb{width:42px;height:42px}}


/* BLOG HEADER RESPONSIVE FIX — 2026-09-27
   Keeps desktop navigation on one line, fixes dropdown item layout,
   and switches to the hamburger before the header can overflow. */
.blog-topbar > .container,
.blog-main-header > .container{
  width:min(1500px,calc(100% - 32px));
}
.blog-main-nav{min-width:0}
.blog-navlinks{min-width:0}
.blog-navlinks > a,
.blog-navlinks > .dropdown > .dropbtn{
  white-space:nowrap;
}
.blog-navlinks .dropdown > .menu{
  min-width:240px;
}
.blog-navlinks .dropdown > .menu a{
  display:flex;
  width:100%;
  min-height:0;
  padding:9px 11px;
  border-radius:8px;
  font-size:14px;
  line-height:1.35;
  white-space:nowrap;
}

@media (max-width:1320px){
  .blog-main-nav{min-height:70px;position:relative;gap:14px}
  .blog-brand{min-width:0;flex:1 1 auto}
  .blog-hamb{display:inline-grid;place-items:center;flex:0 0 auto}
  .blog-navlinks{
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:calc(100% + 8px);
    margin:0;
    padding:12px;
    background:#fff;
    border:1px solid #e2e8f0;
    border-radius:16px;
    box-shadow:0 22px 50px rgba(15,23,42,.18);
    max-height:calc(100vh - 125px);
    overflow:auto;
  }
  .blog-navlinks.open{display:grid;gap:2px}
  .blog-navlinks > a,
  .blog-navlinks > .dropdown > .dropbtn{
    width:100%;
    justify-content:flex-start;
    min-height:44px;
    padding:11px 13px!important;
    font-size:16px!important;
    font-weight:700!important;
    text-align:left;
  }
  .blog-navlinks .blog-ticket{
    margin-left:0;
    margin-top:4px;
    justify-content:center;
  }
  .blog-navlinks .dropdown{width:100%}
  .blog-navlinks .dropdown > .menu{
    position:static;
    width:100%;
    min-width:0;
    margin:2px 0 6px;
    padding:6px;
    border-radius:10px;
    box-shadow:none;
    background:#f8fbff;
  }
  .blog-navlinks .dropdown > .menu a{
    width:100%;
    padding:10px 12px;
    font-size:14px!important;
  }
}

@media (max-width:700px){
  .blog-topbar > .container,
  .blog-main-header > .container{width:calc(100% - 24px)}
  .blog-brand strong{font-size:16px}
  .blog-brand small{font-size:8.5px;letter-spacing:.08em}
}