/*
 * John B Smith: make Consulting 6.x look like the site did on Consulting 4.1.3 (layout 3).
 * Loaded after the theme and child styles (consulting-child/functions.php). October 2026.
 */

/* ---------- Header: desktop (blue band with logo + info, dark teal menu bar) ---------- */
@media (min-width: 1111px) {
	#header .header-box { background: #0078d7; padding: 0; }
	#header .header-box > .container { display: flex; flex-wrap: wrap; align-items: center; position: relative; padding-top: 0; padding-bottom: 0; }
	#header .header-box .logo-box { order: 1; flex: 0 0 auto; padding: 42px 0 36px; margin: 0; }
	#header .header-box .logo-box .logo-mobile,
	#header .header-box .logo-box .menu-toggle { display: none; }
	#header .header-box .contact-info-box { order: 2; margin: 0 0 0 auto; display: flex; gap: 0 130px; align-items: flex-start; float: none; }
	#header .header-box .logo-desktop img { width: 200px !important; height: auto !important; }
	#header .header-box .contact-info { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 0; float: none; }
	#header .header-box .contact-info .icon i { color: #fde953 !important; font-size: 21px !important; line-height: 30px; }
	#header .header-box .contact-info .text,
	#header .header-box .contact-info .text strong,
	#header .header-box .contact-info .text a { color: #fff; font-family: Poppins, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 30px; }
	/* the band shows address + hours; the phone sits at the right-hand end of the menu bar, as before */
	#header .header-box .contact-info-box .contact-info:nth-child(3) { display: none; }
	#header .header-box .nav-box > .contact-info { position: relative; z-index: 1; margin-left: auto; align-items: center; height: 65px; }
	#header .header-box .nav-box > .contact-info .text { line-height: 1.1; }
	#header .header-box .nav-box > .contact-info .text strong { font-size: 18px; font-weight: 700; display: block; }
	#header .header-box .nav-box > .contact-info .text span { display: block; font-size: 13px; color: #fff; }

	#header .header-box .nav-box { order: 3; flex: 0 0 100%; position: relative; height: 65px; display: flex; align-items: center; margin: 0; padding: 0; float: none; }
	#header .header-box .nav-box::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: #153e4d; z-index: 0; }
	#header .header-box .nav-box > ul { position: relative; z-index: 1; margin: 0 0 0 -19px; padding: 0; display: flex; text-align: left; }
	#header .header-box .nav-box > ul > li { margin: 0; padding: 0; }
	#header .header-box .nav-box > ul > li > a { display: block; padding: 0 19px; line-height: 65px; color: #fff; font-family: "Open Sans", Arial, sans-serif; font-size: 18px; font-weight: 600; text-transform: none; }
	#header .header-box .nav-box > ul > li.current-menu-item > a,
	#header .header-box .nav-box > ul > li.current-menu-ancestor > a,
	#header .header-box .nav-box > ul > li > a:hover { color: #fde953; }
	#header .header-box .nav-box > ul > li > a::after,
	#header .header-box .nav-box > ul > li > a::before { display: none !important; }
}

/* ---------- Header: phones/tablets (white bar with dark logo + menu button, teal info block) ---------- */
@media (max-width: 1110px) {
	/* 6.x positions the header absolutely on mobile, so the page slid underneath it */
	#header { position: relative !important; }
	#header .header-box { background: #fff; }
	#header .header-box > .container { padding: 0 !important; max-width: none; }
	/* logo 41px in and the menu button 30px from the edge, as before (it was jammed against the edge) */
	#header .header-box .logo-box { padding: 22px 30px 30px 41px; width: 100%; box-sizing: border-box; align-items: center; height: 140px; margin: 0 !important; }
	#header .header-box .logo-box .logo-mobile img { width: 168px !important; height: auto !important; }
	#header .header-box .menu-toggle { width: 26px; height: 20px; margin-left: auto; }
	#header .header-box .nav-box > .contact-info { display: none !important; }
	#header .header-box .contact-info-box { display: flex !important; flex-direction: column; gap: 17px; background: #153e4d; margin: 0 !important; padding: 40px 40px 40px 40px !important; width: 100%; box-sizing: border-box; flex: 0 0 100%; }
	#header .header-box .contact-info { display: flex; justify-content: flex-start; align-items: flex-start; gap: 11px; margin: 0 !important; padding: 0 !important; width: 100%; text-align: left; min-height: 0; }
	/* address: icon above the text, as before */
	#header .header-box .contact-info:nth-child(1) { flex-direction: column; gap: 0; }
	#header .header-box .contact-info .icon { flex: 0 0 21px; margin: 0 !important; padding: 0 !important; width: 21px; height: 25px; }
	#header .header-box .contact-info .icon i { color: #fde953 !important; font-size: 21px !important; line-height: 25px !important; width: 21px; text-align: center; }
	#header .header-box .contact-info .text { margin: 0 !important; padding: 0 !important; text-align: left; flex: 1 1 auto; }
	#header .header-box .contact-info .text,
	#header .header-box .contact-info .text strong,
	#header .header-box .contact-info .text a { color: #fff; font-family: Poppins, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px; }
	#header .header-box .contact-info .text span { color: #fff; font-size: 13px; margin-left: 4px; }
	/* old order on phones: phone, hours, address */
	#header .header-box .contact-info:nth-child(3) { order: 1; display: flex !important; }
	#header .header-box .contact-info:nth-child(2) { order: 2; }
	#header .header-box .contact-info:nth-child(1) { order: 3; }

	/* layout 3 kept the big section headings full size on phones (6.x shrinks h1 to 32px) */
	h1, .h1 { font-size: 45px; line-height: 60px; }
	.page_title h1, .page_title .h1 { font-size: 36px; line-height: 38px; }
}

/* ---------- Typography: layout 3 used Poppins for headings (6.x leaves it to theme settings) ---------- */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-family: Poppins, Arial, sans-serif; font-weight: 700; }
h5, .h5 { font-weight: 600; }
body { font-family: "Open Sans", Arial, sans-serif; }
/* the homepage service boxes used 22px line height (6.x: 26px) */
.info_box p { line-height: 22px !important; }
/* contact details box (Contact page) used Montserrat */
.stm_contacts_widget .text, .stm_contacts_widget li, .stm_contacts_widget a { font-family: Montserrat, Arial, sans-serif; line-height: 22px; }
/* bold text in content (e.g. staff job titles, the phone number on About Us) was Poppins in dark grey */
#main strong, #main b { font-family: Poppins, Arial, sans-serif; color: #333; }
#main a strong, #main a b { color: #333; font-family: Poppins, Arial, sans-serif !important; }
#main span[style*="Montserrat"] a, #main span[style*="Montserrat"] strong { font-family: Poppins, Arial, sans-serif !important; }
/* the quote box on About Us used Montserrat */
.quote_box .quote, .quote_box .author_name, .quote_box .author_position { font-family: Montserrat, Arial, sans-serif; }

/* ---------- Page title bar: same compact yellow bar as before ---------- */
.page_title { padding-top: 8px; padding-bottom: 8px; }

/* ---------- 6.x layout 3 adds a short bar under every heading; the old site had none ---------- */
body .h1::after, body .h2::after, body .h3::after, body .h4::after, body .h5::after, body .h6::after,
body h1::after, body h2::after, body h3::after, body h4::after, body h5::after, body h6::after { display: none !important; }

/* ---------- Buttons: WPBakery 9 dropped the theme's colour presets, so old "theme_style_2" buttons
   (the navy "Get A Quote" in the yellow call-to-action bars) render in WPBakery's default grey
   (inline #ebebeb). Restore layout 3's theme_style_2 flat style for those. ---------- */
body .vc_general.vc_btn3[style*="#ebebeb"] {
	background: #153e4d !important; border: 3px solid #153e4d !important; color: #fff !important;
	font-family: Poppins, Arial, sans-serif; font-weight: 700; display: inline-block; width: auto;
}
body .vc_general.vc_btn3[style*="#ebebeb"] .vc_btn3-icon { color: #fff !important; }
body .vc_general.vc_btn3[style*="#ebebeb"]:hover { background: transparent !important; border-color: #fff !important; color: #153e4d !important; }
body .vc_general.vc_btn3[style*="#ebebeb"]:hover .vc_btn3-icon { color: #153e4d !important; }

/* ---------- Call-to-action bars: heading in the dark teal used everywhere else ---------- */
.vc_cta3 .vc_cta3-content h2, .vc_cta3 .vc_cta3-content h3, .vc_cta3 .vc_cta3-content h4 { color: #153e4d !important; }

/* ---------- Small text details from the side-by-side comparison ---------- */
#header .header-box .contact-info .text span { font-family: "Open Sans", Arial, sans-serif !important; }
/* History timeline text was a lighter grey */
.cool-timeline-wrapper .ctl-description p, .cool-timeline-wrapper .ctl-description { color: #444 !important; }
/* bullet lists in content (e.g. the service pages) used Poppins */
#main .wpb_text_column li { font-family: Poppins, Arial, sans-serif; }
/* "read more" links under the services used Poppins */
#main .read_more, #main .read_more span, #main .stm_services a span { font-family: Poppins, Arial, sans-serif; }