/* =====================================================================
   TechHaus Host — brand skin for the WHMCS Twenty-One theme
   Twenty-One is Bootstrap 4 and HARDCODES its primary blue as #336699
   (written as #369). It does not use the --primary CSS variable, so we
   override the real Bootstrap selectors below.
   Palette:  navy #0f3051 | navy-dark #0a2338 | gold #ffd200 | cyan #01a2d2
   Loaded automatically after theme.min.css (via head.tpl), so these win.
   ===================================================================== */

/* ---- Typography: Rubik, to match the Prohost marketing site ---- */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap');
body, .btn, .nav, .navbar, input, select, textarea, button,
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Rubik', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* ---- Product/Services cards: Prohost icons (branding continuity) ---- */
.card-columns.home .card .product-icon {
  display: block; width: auto; height: 72px; margin: 0 auto 1rem;
}

/* ---- Links ---- */
a { color: #0f3051; }
a:hover, a:focus { color: #01a2d2; }

/* ---- Headings ---- */
h1, h2, h3, .h1, .h2, .h3 { color: #0f3051; }

/* ---- Primary buttons -> GOLD with navy text (matches the Prohost "Sign Up Now" CTA) ---- */
.btn-primary {
  color: #0f3051 !important;
  background-color: #ffd200 !important;
  border-color: #e6bd00 !important;
  font-weight: 600;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  color: #0f3051 !important;
  background-color: #e6bd00 !important;
  border-color: #e6bd00 !important;
}
.btn-primary:focus, .btn-primary.focus { box-shadow: 0 0 0 .2rem rgba(255,210,0,.45) !important; }

.btn-outline-primary { color: #0f3051 !important; border-color: #0f3051 !important; }
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active {
  color: #fff !important; background-color: #0f3051 !important; border-color: #0f3051 !important;
}

/* ---- Bootstrap primary utilities / semantic ---- */
.bg-primary { background-color: #0f3051 !important; }
.text-primary { color: #0f3051 !important; }
.border-primary { border-color: #0f3051 !important; }
.badge-primary { background-color: #0f3051; color: #fff; }
.alert-primary { color: #0a2338; background-color: #dbe4ee; border-color: #c7d5e6; }

/* ---- Active states: lists, pagination, pills, dropdowns ---- */
.list-group-item.active { background-color: #0f3051; border-color: #0f3051; }
.page-link { color: #0f3051; }
.page-item.active .page-link { background-color: #0f3051; border-color: #0f3051; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: #0f3051; }
.dropdown-item.active, .dropdown-item:active { background-color: #0f3051; }
.progress-bar { background-color: #0f3051; }

/* ---- Forms: focus + checkboxes/radios in brand color ---- */
.form-control:focus,
.custom-select:focus {
  border-color: #4a6a8f !important;
  box-shadow: 0 0 0 .2rem rgba(1,162,210,.25) !important;
}
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: #0f3051 !important; border-color: #0f3051 !important;
}

/* ---- Header bar: NAVY GRADIENT to match the main techhaushost.com homepage header.
        The white bar comes from `header.header{background:#fff}`, so we override THAT
        element (not the inner .navbar, which is transparent). ---- */
header.header {
  background: #0f3862 !important;
  background: linear-gradient(180deg, #0d3862 0%, #164571 100%) !important;
}
header.header .topbar {
  background-color: transparent !important;   /* inherit the lighter navy header gradient */
}
/* always-visible phone/email top strip (matches the Prohost header top bar) — navy gradient band */
header.header .techhaus-topstrip {
  background: #0d3862;
  background: linear-gradient(180deg, #0d3862 0%, #164571 100%);
  padding: 7px 0; font-size: .85rem; border-bottom: 1px solid rgba(255,255,255,.12);
}
header.header .techhaus-topstrip a { color: #dfe7ef; margin-right: 22px; text-decoration: none; }
header.header .techhaus-topstrip .ths-right a { margin: 0 0 0 20px; }
header.header .techhaus-topstrip a:hover { color: #ffd200; }
header.header .techhaus-topstrip i { color: #ffd200; margin-right: 6px; }
.navbar.main-navbar-wrapper,
.navbar.navbar-light.main-navbar-wrapper {
  background: transparent !important;
}
.main-navbar-wrapper .navbar-brand,
.main-navbar-wrapper .navbar-brand:hover,
.main-navbar-wrapper .navbar-brand:focus { color: #fff !important; }
/* top-level menu links are <a class="pr-4"> inside .navbar-nav > li (NOT .nav-link) */
.main-navbar-wrapper .navbar-nav > li > a,
.main-navbar-wrapper .navbar-nav .nav-link { color: #ffffff !important; }
.main-navbar-wrapper .navbar-nav > li > a:hover,
.main-navbar-wrapper .navbar-nav > li > a:focus,
.main-navbar-wrapper .navbar-nav > li.active > a,
.main-navbar-wrapper .navbar-nav > li.show > a,
.main-navbar-wrapper .navbar-nav .nav-link:hover,
.main-navbar-wrapper .navbar-nav .active > .nav-link,
.main-navbar-wrapper .navbar-nav .nav-link.active,
.main-navbar-wrapper .navbar-nav .show > .nav-link { color: #ffd200 !important; }
/* dropdown submenus open on white — keep their items dark/readable */
.main-navbar-wrapper .dropdown-menu a { color: #212529 !important; }
.main-navbar-wrapper .dropdown-menu a:hover { color: #0f3051 !important; }
.main-navbar-wrapper .navbar-text { color: rgba(255,255,255,.85) !important; }
.main-navbar-wrapper .navbar-toggler { border-color: rgba(255,255,255,.35) !important; }
.main-navbar-wrapper .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3e%3cpath stroke='rgba(255,255,255,0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* ---- Gold accent underline on active tabs (echo of the old look) ---- */
.nav-tabs .nav-link.active { border-bottom: 2px solid #ffd200; }

/* ===== Unified footer (matches the Prohost site + techhaushost.com design) ===== */
footer.footer {
  background: #0b2338 !important;
  background: linear-gradient(180deg, #0c2439 0%, #08192b 100%) !important;
  color: #cdd8e5 !important;
  padding: 50px 0 0 !important;
}
/* partner logo strip on top */
footer.footer .footer-partners { padding-bottom: 1.75rem; margin-bottom: 2.25rem; border-bottom: 1px solid rgba(255,255,255,.12); }
footer.footer .footer-partners img { max-height: 68px; width: auto; }
/* column headings with gold underline */
footer.footer h5 {
  color: #fff; font-weight: 600; font-size: 1.05rem; margin-bottom: 1rem; padding-bottom: .5rem;
  position: relative;
}
footer.footer h5::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 46px; height: 3px; background: #ffd200;
}
/* link columns + gold arrow bullets (not the About column) */
footer.footer .footer-columns ul.list-unstyled { margin-bottom: 0; }
footer.footer .footer-columns ul.list-unstyled li { margin-bottom: .5rem; }
footer.footer .footer-columns > div:not(.footer-about) ul.list-unstyled li a { position: relative; padding-left: 18px; color: #cdd8e5; }
footer.footer .footer-columns > div:not(.footer-about) ul.list-unstyled li a::before {
  content: "\25B8"; color: #ffd200; position: absolute; left: 2px; top: 1px; font-size: .8em;
}
footer.footer .footer-columns a:hover { color: #ffd200 !important; }
/* column 1: logo, tagline, contact, social */
footer.footer .footer-about .footer-logo { max-height: 54px; width: auto; margin-bottom: 1rem; }
footer.footer .footer-about .footer-tagline { color: #aab9c9; font-size: .9rem; line-height: 1.7; margin-bottom: 1.25rem; }
footer.footer .footer-contact { margin: 0 0 1.25rem; }
footer.footer .footer-contact li { display: flex; align-items: flex-start; margin-bottom: .85rem; font-size: .9rem; color: #cdd8e5; }
footer.footer .footer-contact .fc-icon {
  flex: 0 0 auto; width: 32px; height: 32px; margin-right: 12px; border-radius: 6px;
  background: #ffd200; color: #0f3051; display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
}
footer.footer .footer-contact a { color: #ffd200; word-break: break-word; }
footer.footer .footer-social a { display: inline-block; margin-right: 8px; }
footer.footer .footer-social img { width: 34px; height: 34px; }
/* bottom bar */
footer.footer .footer-bottom { margin-top: 2.5rem; padding: 16px 0; background: #061019; }
footer.footer .footer-bottom .copyright { color: #8ea2b5; font-size: .85rem; }
footer.footer .footer-legal { }
footer.footer .footer-legal .nav-link { color: #cdd8e5; padding: 0 12px; font-size: .85rem; }
footer.footer .footer-legal .nav-item + .nav-item { border-left: 1px solid rgba(255,255,255,.2); }
footer.footer .footer-legal .nav-link:hover { color: #ffd200; }
footer.footer .btn-locale { background: rgba(255,255,255,.1); color: #fff; font-size: .8rem; padding: 4px 12px; border-radius: 4px; }