/* Tomball.pro global responsive header */
:root{
  --tomball-header-bg:#ffffff;
  --tomball-header-line:#d8e3eb;
  --tomball-header-text:#1f2e3a;
  --tomball-header-accent:#0f4f87;
}

header.top{
  width:100%;
  background:var(--tomball-header-bg);
  border-bottom:1px solid var(--tomball-header-line);
  position:sticky;
  top:0;
  z-index:1000;
}

header.top .wrap.nav{
  max-width:1480px;
  margin:0 auto;
  padding:12px 24px;
  min-height:92px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  flex-wrap:nowrap;
}

header.top .brand{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  flex:0 0 auto !important;
  gap:0 !important;
  text-decoration:none !important;
  min-width:0;
}

/* Strong override for older .brand img {width:38px;height:38px} rules */
header.top .brand img,
header.top .brand img.brand-logo,
header.top img.tomball-site-logo{
  display:block !important;
  width:320px !important;
  height:auto !important;
  max-width:32vw !important;
  max-height:74px !important;
  object-fit:contain !important;
  object-position:left center !important;
  flex:none !important;
}

header.top .brand > span{
  display:none !important;
}

header.top .navlinks{
  margin-left:auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  flex:1 1 auto !important;
  flex-wrap:nowrap !important;
  white-space:nowrap !important;
  gap:24px !important;
  font-size:1rem !important;
  font-weight:700 !important;
  line-height:1.15 !important;
  min-width:0;
}

header.top .navlinks a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:44px !important;
  padding:0 !important;
  text-decoration:none !important;
  color:var(--tomball-header-text) !important;
}

header.top .navlinks a:hover,
header.top .navlinks a:focus{
  color:var(--tomball-header-accent) !important;
  text-decoration:underline !important;
}

/* Large laptop */
@media (max-width:1320px){
  header.top .wrap.nav{
    gap:22px;
    padding-left:18px;
    padding-right:18px;
  }
  header.top .brand img,
  header.top .brand img.brand-logo,
  header.top img.tomball-site-logo{
    width:270px !important;
    max-width:28vw !important;
  }
  header.top .navlinks{
    gap:18px !important;
    font-size:.94rem !important;
  }
}

/* Compact laptop */
@media (max-width:1120px){
  header.top .brand img,
  header.top .brand img.brand-logo,
  header.top img.tomball-site-logo{
    width:235px !important;
    max-width:27vw !important;
  }
  header.top .navlinks{
    gap:13px !important;
    font-size:.88rem !important;
  }
}

/* Tablet: intentional two-row header */
@media (max-width:940px){
  header.top{
    position:relative;
  }
  header.top .wrap.nav{
    min-height:auto;
    flex-wrap:wrap !important;
    justify-content:flex-start !important;
    gap:10px 18px !important;
    padding:12px 18px 10px !important;
  }
  header.top .brand{
    width:100%;
  }
  header.top .brand img,
  header.top .brand img.brand-logo,
  header.top img.tomball-site-logo{
    width:240px !important;
    max-width:72vw !important;
    max-height:70px !important;
  }
  header.top .navlinks{
    margin-left:0 !important;
    width:100% !important;
    flex:1 0 100% !important;
    justify-content:flex-start !important;
    flex-wrap:wrap !important;
    white-space:normal !important;
    gap:4px 18px !important;
    font-size:.92rem !important;
  }
  header.top .navlinks a{
    min-height:38px !important;
  }
}

/* Phone */
@media (max-width:620px){
  header.top .wrap.nav{
    padding:10px 14px !important;
    gap:8px !important;
  }
  header.top .brand{
    justify-content:center !important;
  }
  header.top .brand img,
  header.top .brand img.brand-logo,
  header.top img.tomball-site-logo{
    width:210px !important;
    max-width:84vw !important;
    max-height:64px !important;
    object-position:center center !important;
  }
  header.top .navlinks{
    justify-content:center !important;
    gap:2px 14px !important;
    font-size:.88rem !important;
    text-align:center;
  }
  header.top .navlinks a{
    min-height:36px !important;
  }
}

/* Very small phone */
@media (max-width:420px){
  header.top .brand img,
  header.top .brand img.brand-logo,
  header.top img.tomball-site-logo{
    width:188px !important;
  }
  header.top .navlinks{
    gap:0 12px !important;
    font-size:.84rem !important;
  }
}