/*
   Active Hydraulics — shared site chrome
   The homepage is the visual reference for the header, footer and content width.
   Keep this file loaded after page-specific CSS.
*/

:root{
  --ah-navy:#061b2b;
  --ah-navy-footer:#041825;
  --ah-blue:#139be5;
  --ah-blue2:#36b5ff;
  --ah-line:rgba(255,255,255,.12);
  --ah-muted:#c6d8e3;
}

/* Shared content width — matches the locked homepage */
.wrap{
  width:min(1500px,calc(100% - 64px));
  max-width:none;
  margin-left:auto;
  margin-right:auto;
}

/* Shared header */
header.site-header{
  position:sticky !important;
  top:0 !important;
  z-index:50 !important;
  background:rgba(6,27,43,.97) !important;
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.12) !important;
  box-shadow:none !important;
}

header.site-header .nav{
  height:78px !important;
  min-height:0 !important;
  display:flex !important;
  align-items:center !important;
  gap:30px !important;
  justify-content:flex-start !important;
}

header.site-header .brand{
  display:flex !important;
  align-items:center !important;
  flex:0 0 auto !important;
}

header.site-header .logo{
  width:225px !important;
  height:auto !important;
}

header.site-header .navlinks{
  display:flex !important;
  gap:23px !important;
  align-items:center !important;
  justify-content:center !important;
  margin-left:auto !important;
  position:static !important;
  padding:0 !important;
  border:0 !important;
  box-shadow:none !important;
  flex-direction:row !important;
}

header.site-header .navlinks a,
header.site-header .navlinks a:visited{
  color:#e9f3f8 !important;
  font-size:13px !important;
  font-weight:800 !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
  text-decoration:none !important;
  opacity:1 !important;
  padding:0 !important;
}

header.site-header .navlinks a:hover,
header.site-header .navlinks a.active,
header.site-header .navlinks a:focus-visible{
  color:var(--ah-blue2) !important;
}

header.site-header .navcta{
  display:flex !important;
  gap:9px !important;
  align-items:center !important;
  margin-left:0 !important;
  flex:0 0 auto !important;
}

header.site-header .navcta .btn{
  padding:12px 16px !important;
  font-size:13px !important;
}

header.site-header .mobile-toggle{
  display:none !important;
  color:#fff !important;
  font-size:28px !important;
  line-height:1 !important;
  background:none !important;
  border:0 !important;
  padding:4px !important;
  margin-left:auto !important;
  cursor:pointer;
}

/* Shared footer — exact content structure used by the locked homepage */
footer.site-footer{
  background:var(--ah-navy-footer) !important;
  color:var(--ah-muted) !important;
  padding:65px 0 20px !important;
}

footer.site-footer .footer-grid{
  display:grid !important;
  grid-template-columns:1.25fr .75fr .9fr .95fr !important;
  gap:45px !important;
}

footer.site-footer .footer-logo{
  width:225px !important;
  height:auto !important;
  margin:0 0 18px !important;
}

footer.site-footer .footer-grid p{
  max-width:310px !important;
  font-size:inherit;
  line-height:1.55;
}

footer.site-footer .footer-grid h4{
  color:#fff !important;
  font-size:16px !important;
  margin:0 0 14px !important;
}

footer.site-footer .footer-grid a{
  display:block !important;
  margin:8px 0 !important;
  color:inherit;
  text-decoration:none;
}

footer.site-footer .footer-grid a:hover,
footer.site-footer .footer-grid a:focus-visible{
  color:#64c7ff !important;
}

footer.site-footer .footer-bottom{
  border-top:1px solid rgba(255,255,255,.12) !important;
  margin-top:45px !important;
  padding-top:18px !important;
  display:flex !important;
  justify-content:space-between !important;
  gap:20px;
  font-size:13px !important;
  color:#8eabbc !important;
}

@media(max-width:1000px){
  .wrap{width:calc(100% - 40px) !important;}

  header.site-header .nav{height:68px !important;}
  header.site-header .navlinks{
    display:none !important;
    position:absolute !important;
    left:14px !important;
    right:14px !important;
    top:68px !important;
    background:var(--ah-navy) !important;
    padding:18px !important;
    border:1px solid rgba(255,255,255,.12) !important;
    border-radius:0 0 10px 10px !important;
    box-shadow:0 12px 30px rgba(6,27,43,.12) !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:0 !important;
    margin:0 !important;
  }

  header.site-header .navlinks.open{display:flex !important;}
  header.site-header .navlinks a{
    width:100% !important;
    padding:11px 4px !important;
  }
  header.site-header .mobile-toggle{display:block !important;}
  header.site-header .navcta{margin-left:auto !important;}
  header.site-header .navcta .btn:first-child{display:none !important;}

  footer.site-footer .footer-grid{grid-template-columns:1fr 1fr !important;}
}

@media(max-width:650px){
  .wrap{width:calc(100% - 28px) !important;}
  header.site-header .logo{width:190px !important;}
  header.site-header .navcta{display:none !important;}
  header.site-header .nav{height:68px !important;}
  footer.site-footer .footer-grid{grid-template-columns:1fr !important;}
  footer.site-footer .footer-bottom{
    display:block !important;
  }
  footer.site-footer .footer-bottom span{
    display:block;
    margin:5px 0;
  }
}

/* Services directory previously used a separate 80px gutter. Bring it back onto
   the locked homepage grid so all major pages share the same left/right edge. */
.services-page .wrap{
  width:min(1500px,calc(100% - 64px)) !important;
  max-width:none !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
@media(max-width:1000px){
  .services-page .wrap{width:calc(100% - 40px) !important;}
}
@media(max-width:650px){
  .services-page .wrap{width:calc(100% - 28px) !important;}
}