/* ==========================================================================
   B&B Inspections — brand re-skin override
   Loaded AFTER style.css. Maps the old palette (navy #10207a + red #dc2925/
   #d83725) to the shared logo palette (navy #022348 + slate-blue #6a8d9f).
   Also fixes text that would otherwise become unreadable on recoloured
   backgrounds. Presentation only — no markup, forms or data touched.
   To revert the re-skin, simply remove the <link> to this file.
   ========================================================================== */

:root {
  --bnb-navy: #022348;
  --bnb-navy-dark: #01182f;
  --bnb-accent: #6a8d9f;
  --bnb-accent-dark: #557887;
  --bnb-accent-light: #9fb8c1;
}

/* ---- Navy (#10207a) → brand navy (#022348) ------------------------------- */
header { background-color: var(--bnb-navy) !important; }
nav { box-shadow: rgba(2, 35, 72, 0.12) 0px 8px 24px !important; }
.bread_cumbs li a { color: var(--bnb-navy) !important; }
.service_box i { background-color: var(--bnb-navy) !important; color: var(--bnb-accent-light) !important; }
.service_img:after { background-color: rgba(2, 35, 72, 0.62) !important; }
.service_box:hover .service_info { background-color: var(--bnb-navy) !important; color: #fff !important; }
.side_box ul li a:hover,
.side_box ul li.active a { color: var(--bnb-navy) !important; }
.testmon_img:before { background-color: rgba(2, 35, 72, 0.83) !important; }
.testimonial_box h5 + p { color: var(--bnb-accent-dark) !important; }
.form_input input:focus,
.form_input textarea:focus,
.form_input select:focus { border-color: var(--bnb-navy) !important; }
.social_ul li a:hover { background-color: var(--bnb-navy) !important; }
.new_modal .modal_head { background-color: var(--bnb-navy) !important; }
.bg_3 { background-color: var(--bnb-navy) !important; }

/* Footer — navy to match the engineering site (was a grey/black gradient) */
footer { background-color: var(--bnb-navy-dark) !important; background-image: none !important; }
@media (max-width: 991px) {
  .bg_blu_xs:after { background-color: var(--bnb-navy) !important; }
}

/* ---- Red (#dc2925 / #d83725) → slate-blue accent (#6a8d9f) ---------------- */
/* As a filled background: keep good contrast by using DARK navy text         */
.button_1 { background-color: var(--bnb-accent) !important; color: var(--bnb-navy) !important; }
.button_1:after { background-color: var(--bnb-accent) !important; }
.button_1:hover { background-color: var(--bnb-navy) !important; color: #fff !important; }
nav ul.nav_ul li:last-child a { background-color: var(--bnb-accent) !important; color: var(--bnb-navy) !important; }
.service_info { background-color: var(--bnb-accent) !important; color: var(--bnb-navy) !important; }
.quotation { background-color: var(--bnb-accent) !important; }
.faq_box.active .faq_q { background-color: var(--bnb-navy) !important; }
.faq_box.active .faq_q p,
.faq_box.active .faq_q i { color: #fff !important; }
.form_box { border-top-color: var(--bnb-accent) !important; }
.form_input input,
.form_input textarea,
.form_input select { border-color: rgba(106, 141, 159, 0.55) !important; }

/* contact panel was red with dark text — make navy with light text */
.contact_sec .contact_info { background-color: var(--bnb-navy) !important; }
.contact_sec .contact_info,
.contact_sec .contact_info h2,
.contact_sec .contact_info h3,
.contact_sec .contact_info p,
.contact_sec .contact_info ul li a,
.contact_sec .contact_info ul li a i { color: #fff !important; }

/* As accent text on light backgrounds */
.text_red { color: var(--bnb-accent-dark) !important; }
nav ul.nav_ul li a:hover { color: var(--bnb-accent-dark) !important; }
/* As accent text/hover on the dark header */
header ul li a:hover { color: var(--bnb-accent-light) !important; }
/* footer contact icons used .text_red on the dark footer — keep them light */
footer .text_red { color: var(--bnb-accent-light) !important; }

/* ==========================================================================
   Logo lockup (icon + name + sub-text), mirrors the engineering site
   ========================================================================== */
.bnb-lockup { display: inline-flex; align-items: center; gap: 12px; }
.bnb-lockup img { height: 60px; width: auto; }
.bnb-lockup .bnb-lockup-text { line-height: 1.15; }
.bnb-lockup .bnb-name { font-weight: 800; font-size: 18px; color: var(--bnb-navy); white-space: nowrap; }
.bnb-lockup .bnb-name { text-transform: none !important; }
.bnb-lockup .bnb-tag {
  display: block; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em; white-space: nowrap;
  color: var(--bnb-accent); margin-top: 2px;
}
.bnb-lockup .bnb-tag-sep { margin: 0 1px; }
.bnb-lockup .bnb-tag-sep { color: var(--bnb-steel-300, #c3ccd6); }
.bnb-lockup .bnb-sub {
  display: block; font-size: 11px; font-weight: 600; white-space: nowrap;
  text-transform: none !important; letter-spacing: 0;
  color: var(--bnb-accent-dark); margin-top: 1px;
}

/* Keep the logo lockup tidy within its column */
.logo.bnb-lockup { max-width: 100%; }

/* Tighten the desktop nav so all 10 items fit their column (no overlap) */
@media (min-width: 992px) {
  nav ul.nav_ul { grid-gap: 13px !important; }
  nav ul.nav_ul li a { font-size: 14px !important; }
  nav ul.nav_ul li:last-child a { padding: 11px 15px !important; }
}
/* Light variant for the dark footer — logo sits on a white chip (matches the
   engineering site) so it stays visible on the dark background. */
.bnb-lockup--light img {
  background: #fff; border-radius: 8px; padding: 6px;
  height: 56px; box-sizing: border-box;
}
.bnb-lockup--light .bnb-name { color: #fff; }
.bnb-lockup--light .bnb-sub { color: var(--bnb-accent-light); }

/* ==========================================================================
   Top site-tab strip (Pre-purchase active here, links across to /engineering/)
   ========================================================================== */
.bnb-tabs { background: var(--bnb-navy-dark); }
.bnb-tabs__row {
  max-width: 1200px; margin: 0 auto; padding: .625rem 1.5rem 0;
  display: flex; align-items: flex-end; gap: .5rem;
}
.bnb-tab {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem 1.25rem; border-radius: .5rem .5rem 0 0;
  font: 600 .875rem/1 "Mulish", system-ui, sans-serif;
  text-decoration: none !important; transition: background .15s, color .15s;
  border: 2px solid transparent; border-bottom: 0;
}
.bnb-tab__dot { width: .625rem; height: .625rem; border-radius: 50%; }
/* Engineering tab (the cross-site link) — WHITE, slate outline */
.bnb-tab--link {
  position: relative; margin-bottom: -2px;
  background: #fff; color: var(--bnb-navy); border-color: #6a8d9f;
}
.bnb-tab--link .bnb-tab__dot { background: #6a8d9f; }
.bnb-tab--link:hover { background: #f3f6f8; }
/* Inspections tab (current page) — blue outline, dark fill */
.bnb-tab--active { background: rgba(2, 35, 72, .5); color: #d4e0ec; border-color: #7099b8; }
.bnb-tab--active .bnb-tab__dot { background: #7099b8; }
@media (max-width: 575px) {
  .bnb-tab { padding: .5rem .7rem; font-size: .75rem; }
  .bnb-lockup .bnb-sub { font-size: 10px; max-width: 170px; }
}