/* =========================
   TXFPC — FINAL OVERRIDES
   ========================= */

/* ---------- Global ---------- */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body{
  margin:0;
  background:#fff;
  color:#000;
  font:13px/1.2 Arial, Helvetica, sans-serif;
}

/* Keep page width stable when a vertical scrollbar appears */
:root { scrollbar-gutter: stable both-edges; }
@supports not (scrollbar-gutter: stable){ html{ overflow-y: scroll; } }

/* ---------- Header (logo + brand line) ---------- */
#logoimage{
  display:block;
  margin:30px auto 0;
  max-width:220px;
  height:auto;
}
#logotext{
  display:inline-block;
  font-size:12px;
  font-weight:bold;
}

/* Smaller logo on small screens */
@media (max-width:768px){
  #logoimage{ max-width:180px; margin-top:22px; }
  #logotext{ font-size:12px; }
}

/* Wrap the logo area to same width as content */
.wrapper > center{
  display:block;              /* turn <center> into a block container */
  max-width:1100px;
  width:min(1100px, 100%);
  padding:0 24px;
  margin:0 auto;
}

/* ---------- Navigation ---------- */
/* Container */
ul.navigation{
  display:flex;
  justify-content:center;
  align-items:center;
  list-style:none;
  gap:28px;
  padding:0 24px;             /* same side padding as content */
  margin:14px auto 6px;
  max-width:1100px;
  width:min(1100px, 100%);
}
/* Phone tweaks: allow wrap and reduce padding/thumbprint */
@media (max-width:768px){
  ul.navigation{ gap:14px; flex-wrap:wrap; }
  ul.navigation li a{
    height:56px;
    padding:28px 16px 8px 16px;
    background-size:32px auto;
    white-space:normal;       /* permit wrapping if needed */
  }
  /* optional: remove hover image on touch for more room */
  ul.navigation li a:hover{ background-image:none; }
}

/* ---------- Gray content envelope ---------- */
#maincontent{
  background:#e6e6e6;
  padding:25px 0;              /* tight top/bottom */
  margin:0;
}
#maincontent::after,
#contentbox::after{ content:""; display:block; clear:both; }

#contentbox{
  background:transparent !important; /* let #maincontent show */
  margin:0 auto;
  padding:22px 24px;
  max-width:1100px;
  width:min(1100px, 100%);
  border:0 !important;
  box-shadow:none !important;
}

/* Remove any template rules that draw stray lines */
#maincontent > hr,
#contentbox > hr,
hr{
  display:none !important;
  height:0 !important;
  border:0 !important;
  margin:0 !important;
}

/* Preferred page-title spacing (you liked this) */
#contentbox h1{
  margin:-30px 0 16px 0;      /* negative top to tighten the gap */
}
#contentbox h2{ margin:16px 0 8px; }

/* ---------- Kill legacy TinyScrollbar boxes (let content flow) ---------- */
#scrollbar1,
#scrollbar1 .viewport,
#scrollbar1 .overview{
  width:100% !important;
  height:auto !important;
  overflow:visible !important;
  position:static !important;
  display:block !important;
}
#scrollbar1 .scrollbar,
#scrollbar1 .track,
#scrollbar1 .thumb,
#scrollbar1 .end{ display:none !important; }

/* ---------- Services page columns ---------- */
/* Two columns on desktop; stack on phones */
#scrollbar1 .overview{
  display:flex !important;
  flex-wrap:wrap;
  gap:18px 2%;
  align-items:flex-start;
}
#scrollbar1 .overview > div{
  flex:1 1 49%;
  min-width:300px;            /* stops awkward squish at mid widths */
}
@media (max-width:768px){
  #scrollbar1 .overview{ display:block !important; }
  #scrollbar1 .overview > div{
    flex:none;
    width:100%;
    min-width:0;
    margin:0 0 18px 0;
  }
}

/* ---------- Media / images / embeds ---------- */
img{ max-width:100%; height:auto; }
iframe{ max-width:100%; }

/* ---------- Footer ---------- */
.footer{
  text-align:center;
  margin:40px auto 24px;
  font-size:14px;
  clear:both;
}
.footer a{ color:#000; text-decoration:none; }
.footer a:hover{ text-decoration:underline; }
/* --- Lock nav size on normal + hover to stop the jump (override legacy style.css) --- */
ul.navigation li a,
ul.navigation li a:hover{
  height: 70px !important;
  padding: 30px 20px 10px 25px !important;
  line-height: 1 !important;
  background-position: right center;
  background-size: 48px auto;
}

/* Mobile: same lock, but with the mobile sizes you want */
@media (max-width: 768px){
  ul.navigation li a,
  ul.navigation li a:hover{
    height: 56px !important;
    padding: 28px 16px 8px 16px !important;
    background-size: 32px auto;
  }
/* Social icon wrapper: black rounded square, centers the inner SVG */
.icon-box{
  display:inline-flex;
  width:32px; height:32px;
  background:#000; border-radius:6px;
  align-items:center; justify-content:center;
  line-height:0; /* avoid inline gaps */
}
.icon-box img{
  width:18px; height:18px; /* tweak to match your LinkedIn/FB/YT balance */
  display:block;
}