/* =====================================================================
   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;
}

/* ---- 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: #0a2338 !important;   /* darker-navy top strip instead of gray */
}
.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; }
.main-navbar-wrapper .navbar-nav .nav-link { color: rgba(255,255,255,.9) !important; }
.main-navbar-wrapper .navbar-nav .nav-link:hover,
.main-navbar-wrapper .navbar-nav .nav-link:focus,
.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; }
.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; }

/* ---- Footer: navy gradient to match the header (Twenty-One default is gray #404040) ---- */
footer.footer {
  background: #0f3862 !important;
  background: linear-gradient(180deg, #0d3862 0%, #164571 100%) !important;
  color: #dfe7ef !important;
  border-top: 3px solid #ffd200 !important;
}
footer.footer .nav-link,
footer a, .footer a { color: #dfe7ef !important; }
footer.footer .nav-link:hover,
footer a:hover, .footer a:hover { color: #ffd200 !important; }
footer.footer .btn { background-color: rgba(255,255,255,.12) !important; color: #fff !important; }
/* footer link columns (matching the Prohost site footer) */
footer.footer h5 { color: #fff; font-weight: 600; font-size: 1rem; margin-bottom: .85rem; }
footer.footer .footer-columns ul { margin-bottom: 0; }
footer.footer .footer-columns ul li { margin-bottom: .4rem; }
footer.footer .footer-columns a { color: #dfe7ef; }
footer.footer .footer-columns a:hover { color: #ffd200; }
footer.footer .footer-contact { color: #cdd8e5; font-size: .88rem; line-height: 1.7; }
footer.footer .footer-contact a { color: #56c3ff; }
footer.footer .footer-divider { border-top: 1px solid rgba(255,255,255,.15); margin: 1.5rem 0; }
/* partner logo strip (matches techhaushost.com footer) */
footer.footer .footer-partners { padding-bottom: 2rem; margin-bottom: 2.25rem; border-bottom: 1px solid rgba(255,255,255,.12); }
footer.footer .footer-partners img { max-height: 70px; width: auto; }
/* gold arrow bullets on footer column links */
footer.footer .footer-columns ul.list-unstyled li a { position: relative; padding-left: 18px; }
footer.footer .footer-columns ul.list-unstyled li a::before {
  content: "\25B8"; color: #ffd200; position: absolute; left: 2px; top: 0;
}
/* Get Social icons */
footer.footer .footer-social a { display: inline-block; margin-right: 8px; }
footer.footer .footer-social img { width: 34px; height: 34px; }