/* =====================================================================
   HEADER / NAVIGATION
   ===================================================================== */

.topbar{
  background:var(--blue-900);
  color:rgba(255,255,255,.72);
  font-size:13.5px;
}
.topbar .container{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:9px;padding-bottom:9px;
}
.topbar-info{display:flex;align-items:center;gap:26px;}
.topbar-info a{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.78);transition:color .25s;}
.topbar-info a:hover{color:var(--gold-400);}
.topbar-info i{color:var(--gold-500);font-size:13px;}
.topbar-social{display:flex;align-items:center;gap:14px;}
.topbar-social a{
  width:28px;height:28px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.18);
  color:#fff;font-size:12px;transition:.25s;
}
.topbar-social a:hover{background:var(--gradient-signal);border-color:transparent;color:var(--blue-900);}

.site-header{
  position:sticky;top:0;z-index:1000;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s var(--ease), padding .3s var(--ease);
}
.site-header.is-scrolled{box-shadow:0 8px 30px rgba(10,14,46,.08);}
.site-header .container{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;
  height:var(--header-h);
}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.brand img{width:auto;}
.brand .logo-full{height:40px;}
.brand .logo-mark{height:40px;display:none;}

.main-nav{display:flex;align-items:center;gap:6px;}
.main-nav > ul{display:flex;align-items:center;gap:4px;}
.main-nav a.nav-link{
  display:flex;align-items:center;gap:6px;
  padding:12px 16px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:14.5px;
  color:var(--ink);
  border-radius:var(--radius-pill);
  transition:color .25s,background .25s;
  position:relative;
}
.main-nav li.has-dropdown{position:relative;}
.main-nav a.nav-link:hover,
.main-nav li.active > a.nav-link{color:var(--gold-600);background:var(--bg-tint);}
.main-nav .nav-link .fa-chevron-down{font-size:9px;transition:transform .25s;}
.main-nav li.has-dropdown:hover .fa-chevron-down{transform:rotate(180deg);}

.dropdown-panel{
  position:absolute;top:calc(100% + 10px);left:0;
  min-width:250px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);
  padding:10px;
  opacity:0;visibility:hidden;
  transform:translateY(10px);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
  z-index:20;
}
.main-nav li.has-dropdown:hover .dropdown-panel{
  opacity:1;visibility:visible;transform:translateY(0);
}
.dropdown-panel a{
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;border-radius:10px;
  font-size:14px;font-weight:600;color:var(--ink);
  transition:background .2s,color .2s;
}
.dropdown-panel a:hover{background:var(--bg-tint);color:var(--gold-600);}
.dropdown-panel a i{color:var(--gold-500);width:16px;text-align:center;font-size:13px;}

.header-cta{display:flex;align-items:center;gap:14px;}
.header-phone{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;color:var(--ink);font-size:14.5px;}
.header-phone .icon-ring{
  width:38px;height:38px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--gradient-signal);color:var(--blue-900);flex-shrink:0;
}
.header-phone span{display:flex;flex-direction:column;line-height:1.25;}
.header-phone small{font-family:var(--font-body);font-weight:500;color:var(--body-soft);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;}

.nav-toggle{
  display:none;
  width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line);
  background:#fff;
  align-items:center;justify-content:center;
  cursor:pointer;
  flex-shrink:0;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:"";display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.nav-toggle span::before{transform:translateY(-6px);}
.nav-toggle span::after{transform:translateY(4px);}
.nav-toggle span{position:relative;}
body.nav-open .nav-toggle span{background:transparent;}
body.nav-open .nav-toggle span::before{transform:translateY(0) rotate(45deg);}
body.nav-open .nav-toggle span::after{transform:translateY(-2px) rotate(-45deg);}

@media (max-width: 991px){
  /* Was ".topbar-info span.only-lg" — only matched the hours <span>, not
     the phone <a>, so the phone number stayed visible on mobile despite
     the "only-lg" name and helped overflow the topbar row. */
  .topbar-info .only-lg{display:none;}
  .header-phone span small{display:none;}
  .main-nav{
    position:fixed;inset:0 0 0 auto;
    width:min(340px,86vw);height:100vh;
    background:#fff;
    flex-direction:column;align-items:stretch;
    padding:100px 22px 30px;
    transform:translateX(100%);
    transition:transform .4s var(--ease);
    overflow-y:auto;
    box-shadow:-20px 0 60px rgba(10,14,46,.18);
  }
  body.nav-open .main-nav{transform:translateX(0);}
  .main-nav > ul{flex-direction:column;align-items:stretch;width:100%;gap:2px;}
  .main-nav a.nav-link{padding:15px 16px;width:100%;justify-content:space-between;}
  .dropdown-panel{
    position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;padding:0 0 0 14px;
    max-height:0;overflow:hidden;transition:max-height .35s var(--ease);
  }
  li.has-dropdown.open .dropdown-panel{max-height:400px;}
  .main-nav li.has-dropdown:hover .dropdown-panel{max-height:0;}
  li.has-dropdown.open .dropdown-panel{max-height:400px;}
  .nav-toggle{display:inline-flex;}
  .header-cta .btn-gold-label{display:none;}
  .nav-backdrop{
    position:fixed;inset:0;background:rgba(5,6,26,.55);
    opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;z-index:999;
  }
  body.nav-open .nav-backdrop{opacity:1;visibility:visible;}
}
@media (min-width: 992px){
  .nav-backdrop{display:none;}
}
@media (max-width: 767px){
  /* The full wordmark (icon + "DIGITECHNOSYS" + tagline) is too wide to
     sit next to the phone button and hamburger on a phone-width header —
     swap to the icon-only mark, and drop the phone number text so the
     tap-to-call ring is the only thing competing for space. */
  .brand .logo-full{display:none;}
  .brand .logo-mark{display:block;}
  .header-phone span{display:none;}
  .header-phone .icon-ring{margin:0;}
  .header-cta{gap:10px;}
}
@media (max-width: 575px){
  .topbar .container{font-size:12.5px;}
  .topbar-info{gap:16px;}
  .topbar-social{display:none;}
  .brand .logo-mark{height:34px;}
}