@charset "UTF-8";

/* =========================================================
   FONTS
   ========================================================= */

@font-face {
	font-family: "Montserrat";
	font-display: swap;
	src:
		local(""),
		url("/wp-content/themes/slightlychilled-child/assets/fonts/Montserrat/Montserrat-VariableFont_wght.ttf");
}

/* =========================================================
   VARIABLES
   ========================================================= */

:root {
	--color-primary: #21355a;
	--color-accent: #d47846;
	--color-accent-dk: #b0603a;
	--color-text: #4d5769;

	--white: #fff;
	--white-rgba: rgba(255, 255, 255, 0.3);
	--white-rgba-1: rgba(255, 255, 255, 0.6);
	--white-rgba-2: rgba(255, 255, 255, 0.1);

	--colour-grey-1: #e6e7e9;
	--colour-grey-2: #f9fafc;
}

/* =========================================================
   BASE
   ========================================================= */

body {
	font-family: "Montserrat";
}

section {
	padding: 0;
	margin-bottom: 1.5rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 600;
	letter-spacing: -1px;
}

a {
	color: var(--color-accent);
	text-decoration: none;
}

a:hover {
	color: var(--color-accent-dk);
	text-decoration: underline;
}

iframe {
	border: 0;
	background: none;
}

/* =========================================================
   HERO
   ========================================================= */

section.hero {
	background: var(--color-primary);
	padding: 0 !important;
	margin-bottom: 45px !important;
}

section.hero h1 {
	color: var(--white);
	font-weight: 600;
}

.hero_kicker {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: left;
	flex-direction: row;
	gap: 12px;
	color: var(--color-accent);
}

.hero_kicker::before {
	content: "";
	display: inline-block;
	width: 30px;
	height: 2px;
	background: var(--color-accent);
}

.hero_text {
	color: var(--white-rgba-1);
}

/* =========================================================
   SERVICE BLOCKS
   ========================================================= */

section.service-blocks {
	background: var(--colour-grey-2);
	padding: 4rem 0;
	border-top: 1px solid #e4e9f0;
}

section.service-blocks h2 {
	text-transform: uppercase;
}

section.service-blocks .badge,
.cta-section .badge {
	background-color: var(--white);
	border: 1px solid var(--colour-grey-1);
}

section.service-blocks .badge {
	overflow-wrap: break-word;
}

/* =========================================================
   TESTIMONIALS
   ========================================================= */

section.testimonials {
	padding: 4rem 0;
}

/* =========================================================
   NAVIGATION
   ========================================================= */

.navbar-brand img {
	margin-top: 5px;
}

.navbar .dropdown-toggle:focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}

.navbar .dropdown-toggle.show,
.navbar .dropdown.show > .dropdown-toggle {
	outline: none;
	box-shadow: none;
	background-color: transparent;
}

.navbar-custom {
	font-size: 1rem;
	letter-spacing: 1px;
	border-bottom: none;
	background-color: var(--color-accent);
	padding: 0;
}

.navbar-custom li a {
	color: var(--white);
	padding-top: 15px;
	padding-bottom: 15px;
}

.navbar-custom li.active a,
.navbar-custom li a:hover,
.navbar-custom li a.focus {
	color: var(--white);
	text-decoration: none;
}

.navbar-toggler {
	border-color: var(--color-accent);
}

.navbar-toggler-icon {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.navbar-custom li.active a,
.navbar-custom li a:hover,
a,
.btn:focus {
	outline: none;
	box-shadow: none;
}
/* 
   When a dropdown child menu item is active (e.g., has `.current-menu-item` or `.active`), 
   and its parent `<li>` has `.current-menu-ancestor` or `.current-menu-parent`, 
   highlight the parent nav link more prominently.
*/

/* Enhance parent nav colour if any child in dropdown is selected */
.navbar-nav > li.menu-item-has-children.current-menu-ancestor > .nav-link,
.navbar-nav > li.menu-item-has-children.current-menu-parent > .nav-link,
.navbar-nav > li.menu-item-has-children.active > .nav-link {
	background-color: var(
		--color-accent-dk,
		#473b2e
	); /* Use dark accent if defined, fallback color */
	color: var(--white) !important;
}

/* Optionally: Increase highlight for just `.current-menu-parent.active` (when nav is both ancestor and active) */
.navbar-nav > li.menu-item-has-children.current-menu-parent.active > .nav-link {
	background-color: var(--color-accent-dk, #473b2e);
	color: var(--white) !important;
}

/* Keep dropdown menu items active as before */
.dropdown-menu li.current-menu-item > a,
.dropdown-menu li.active > a,
.dropdown-menu li.current_page_item > a {
	background: var(--color-accent-dk, #473b2e);
	color: var(--white) !important;
}

/* Accessibility: optional hover for parent when child hovered */
.navbar-nav > li.menu-item-has-children:hover > .nav-link {
	background-color: var(--color-accent-dk, #473b2e);
	color: var(--white) !important;
}

/* =========================================================
   DROPDOWNS
   ========================================================= */

.dropdown-menu {
	margin-top: 0 !important;
	background: var(--color-accent);
	border-top: none;
	border-color: rgba(109, 90, 65, 0.2);
}

.dropdown-menu li a {
	padding: 5px 20px !important;
	background: var(--color-accent);
}

.dropdown-menu li a:hover,
.dropdown-menu li.active a {
	background: var(--color-accent-dk);
	color: var(--white);
}

.dropdown-menu[data-bs-popper] {
	margin-top: 0;
	border-radius: 0 0 5px 5px;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.btn-site,
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_page_footer input[type="button"],
.gform_wrapper .gform_page_footer input[type="submit"],
.gform_wrapper .gform_page_footer button,
.gform_wrapper .gform_footer button {
	background: var(--color-accent) !important;
	color: var(--white) !important;
	padding: 10px 20px !important;
	font-size: 0.9rem !important;
	font-weight: 400 !important;
	text-transform: uppercase !important;
	letter-spacing: 1px !important;
	border: none !important;
	border-radius: 5px !important;
	transition: all 0.3s ease !important;
}

.btn-site:hover,
.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper .gform_page_footer input[type="button"]:hover,
.gform_wrapper .gform_page_footer input[type="submit"]:hover,
.gform_wrapper .gform_page_footer button:hover,
.gform_wrapper .gform_footer button:hover {
	background: var(--color-accent-dk) !important;
	color: var(--white) !important;
	text-decoration: none !important;
}

.btn-site:focus,
.gform_wrapper .gform_footer input[type="submit"]:focus,
.gform_wrapper .gform_page_footer input[type="button"]:focus,
.gform_wrapper .gform_page_footer input[type="submit"]:focus,
.gform_wrapper .gform_page_footer button:focus,
.gform_wrapper .gform_footer button:focus {
	outline: none !important;
	box-shadow: none !important;
}

.btn-site::after,
.gform_wrapper .gform_footer input[type="submit"]::after,
.gform_wrapper .gform_page_footer input[type="button"]::after,
.gform_wrapper .gform_page_footer input[type="submit"]::after,
.gform_wrapper .gform_page_footer button::after,
.gform_wrapper .gform_footer button::after {
	content: " →" !important;
	display: inline-block !important;
	margin-left: 0.5em !important;
	transition: margin-left 0.3s !important;
}

.btn-site:hover::after,
.gform_wrapper .gform_footer input[type="submit"]:hover::after,
.gform_wrapper .gform_page_footer input[type="button"]:hover::after,
.gform_wrapper .gform_page_footer input[type="submit"]:hover::after,
.gform_wrapper .gform_page_footer button:hover::after,
.gform_wrapper .gform_footer button:hover::after {
	margin-left: 1em !important;
}

/* =========================================================
   TEXT LINKS
   ========================================================= */

.btn-text-link {
	color: var(--color-accent);
	text-decoration: none;
}

.btn-text-link::after {
	content: " →";
	display: inline-block;
	margin-left: 0.5em;
	transition: margin-left 0.3s;
}

.btn-text-link:hover {
	color: var(--color-accent-dk);
	text-decoration: none;
}

.btn-text-link:hover::after {
	margin-left: 1em;
}

/* =========================================================
   UTILITIES
   ========================================================= */

.flex {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* =========================================================
   RESPONSIVE IFRAMES
   ========================================================= */

.myIframe {
	position: relative;
	padding-bottom: 20%;
	padding-top: 30px;
	height: 0;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	border: none;
}

.myIframe iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* =========================================================
   FOOTER
   ========================================================= */

#footer.footer {
	padding-top: 60px;
	background-color: var(--color-primary);
	color: var(--white-rgba);
}

#footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#footer ul li {
	list-style: none;
	font-size: 0.9rem;
	margin-bottom: 10px;
	color: var(--white-rgba);
}

#footer ul li a {
	color: var(--white-rgba);
}

#footer ul.connect-links li {
	margin-bottom: 30px;
}

#footer ul.connect-links li a,
#footer ul.connect-links li p {
	color: var(--white);
}

#footer ul li a:hover {
	color: var(--white);
	text-decoration: none;
}

#footer svg {
	display: inline-block;
	float: left;
	width: 42px;
	height: 42px;
	margin-right: 10px;
	padding: 10px;
	border-radius: 5px;
	background-color: var(--white-rgba-2);
	color: var(--color-accent);
	fill: var(--color-accent);
}

#copyright {
	font-size: 0.6rem;
	padding-top: 30px;
	padding-bottom: 30px;
	margin-top: 60px;
	border-top: 1px solid var(--white-rgba-2);
}

/* =========================================================
   BADGES
   ========================================================= */

.badge {
	position: relative;
	display: block;
	padding: 20px 20px 20px 60px;
	border-radius: 5px;
	background-color: var(--colour-grey-2);
	color: var(--color-primary);
	text-align: left;
	font-weight: 600;
	white-space: normal;
}

.badge span {
	display: block;
	margin-top: 5px;
	font-weight: 400;
}

.badge svg,
.badge i {
	position: absolute;
	left: 20px;
	top: 20px;
	width: 30px;
	height: 30px;
	margin-right: 8px;
	background: transparent;
	color: var(--color-accent);
	fill: var(--color-accent);
	pointer-events: none;
}

.badge i {
	font-size: 30px;
}

p.badge {
	display: block;
	gap: 10px;
	padding: 10px;
	border: 1px solid var(--white-rgba);
	border-radius: 5px;
	background-color: var(--white-rgba-2);
}

.footer-badge {
	display: block;
	padding: 10px;
	border: 1px solid var(--white-rgba);
	border-radius: 5px;
	background-color: var(--white-rgba-2);
}

/* =========================================================
   REASONS TO CHOOSE
   ========================================================= */

.reasons-to-choose {
	background-color: var(--color-primary);
	color: var(--white);
	border-radius: 5px;
	margin-top: 40px;
}

.reasons-to-choose h3 {
	font-size: 1.25rem;
	border-bottom: 1px solid var(--white-rgba-2);
	padding-bottom: 20px;
	margin-bottom: 20px;
}

.reasons-to-choose ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.reasons-to-choose ul li {
	position: relative;
	display: flex;
	align-items: flex-start;
	padding-left: 32px;
	margin-bottom: 15px;
	list-style: none;
	font-size: 0.8rem;
	color: var(--white-rgba-1);
}

.reasons-to-choose ul li svg {
	position: absolute;
	left: 0;
	top: 2px;
	width: 20px;
	height: 20px;
	margin-right: 8px;
	background: transparent;
	color: var(--color-accent);
	fill: var(--color-accent);
	pointer-events: none;
}

/* =========================================================
   SIDEBAR CONTACT FORM
   ========================================================= */

.sidebar-contact-form {
	background-color: var(--colour-grey-2);
	border-radius: 5px;
	border: 1px solid var(--colour-grey-1);
}

.sidebar-contact-form h2.gform_title {
	font-size: 1.25rem;
	color: var(--color-primary);
}

/* =========================================================
   CARDS
   ========================================================= */

.card,
.card-image,
.card-header,
.card-body,
.card-footer {
	background: none;
	border: none;
}

.card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: var(--white) !important;
	border-radius: 5px;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

.card .card-header h3 {
	color: var(--color-primary);
	font-size: 1rem;
	justify-content: left;
	margin-bottom: 0 !important;
}

.card .card-body {
	flex: 1 1 auto;
	font-size: 0.8rem;
}

.card .card-body p {
	margin-bottom: 0 !important;
}

.card .card-footer {
	flex: 0 0 60px;
	display: flex;
	align-items: center;
	height: 60px !important;
	border-top: 1px solid var(--colour-grey-1);
}

/* =========================================================
   SECTION LISTS
   ========================================================= */

section ul {
	list-style: none;
	padding: 0 15px;
	margin: 0 0 10px;
	font-size: 0.8rem;
}

section ul li::before {
	content: "•";
	display: inline-block;
	margin-right: 5px;
	color: var(--color-accent);
	font-size: 1.4rem;
}

ul.horizontal-list {
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

ul.horizontal-list li {
	display: inline-block;
	margin-right: 10px;
	font-size: 0.8rem;
}

/* =========================================================
   HEADER PHONE
   ========================================================= */

.phone-icon-header {
	font-size: 0.8rem;
	font-weight: 400;
	color: var(--color-primary) !important;
	text-decoration: none;
	text-align: left;
}

.phone-icon-header span,
.phone-icon-header strong {
	display: block;
	width: 100%;
}

.phone-icon-header a {
	color: var(--color-primary) !important;
	text-decoration: none !important;
}

.phone-icon-header svg {
	width: 45px;
	height: 45px;
	padding: 10px;
	border: 1px solid var(--color-accent);
	border-radius: 5px;
	color: var(--white) !important;
	fill: var(--white) !important;
	background: var(--color-accent) !important;
}

/* =========================================================
   PAGE 245 LIST OVERRIDES
   ========================================================= */

.page-id-245 .wp-block-list,
.page-id-245 .wp-block-list li,
.page-id-245 .wp-block-list li::before,
.page-id-245 .wp-block-list li::after {
	all: unset !important;
}

.page-id-245 .wp-block-list ul {
	list-style: disc !important;
}

.page-id-245 .wp-block-list li {
	display: list-item !important;
	list-style: disc !important;
	margin-left: 30px !important;
}

/* =========================================================
   Logos
   ========================================================= */

section.logo_images {
}

section.logo_images img {
}

/* =========================================================
   HORIZONTAL CTA
   ========================================================= */

section.cta-horizontal {
	background-color: #f8f9fa;
	padding: 4rem 0 !important;
	border-radius: 10px;
	margin-top: 20px;
	margin-bottom: 0 !important;
}

.cta-horizontal strong {
	font-size: 1.5rem;
	font-weight: 600;
	color: #000;
}

/* =========================================================
   HORIZONTAL CTA: GRAVITY FORMS WRAPPER
   ========================================================= */

.cta-horizontal #gform_wrapper_2 {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 20px;
	width: 100%;
	margin: 0;
}

.cta-horizontal #gform_wrapper_2 > style,
.cta-horizontal #gform_wrapper_2 .gform_description:empty {
	display: none;
}

.cta-horizontal #gform_fields_2 > .gform_validation_container,
.cta-horizontal #gform_fields_2 > .gfield_visibility_hidden {
	display: none !important;
}

/* =========================================================
   HORIZONTAL CTA: HEADING
   ========================================================= */

.cta-horizontal #gform_wrapper_2 > .gform_heading {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	min-height: var(--gf-ctrl-size, 46px);
	margin: 0 !important;
	padding: 0 !important;
}

.cta-horizontal #gform_wrapper_2 .gform_title {
	margin: 0 !important;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}

/* =========================================================
   HORIZONTAL CTA: FORM

   Layout:
   [ BODY / FIELDS ] [ SUBMIT ]
   ========================================================= */

.cta-horizontal #gform_2 {
	flex: 1 1 auto;
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto;
	column-gap: 20px;
	align-items: start;
	width: auto;
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
}

.cta-horizontal #gform_2 > .gform_body,
.cta-horizontal #gform_2 > .gform-body {
	grid-column: 1;
	grid-row: 1;
	width: 100%;
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
}

/* =========================================================
   HORIZONTAL CTA: FIELDS
   ========================================================= */

.cta-horizontal #gform_fields_2 {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: stretch !important;
	column-gap: 20px !important;
	row-gap: 20px !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	grid-template-columns: none !important;
}

.cta-horizontal #gform_fields_2 > .gfield {
	flex: 0 0 calc((100% - 40px) / 3) !important;
	width: calc((100% - 40px) / 3) !important;
	max-width: calc((100% - 40px) / 3) !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	grid-column: auto !important;
	grid-row: auto !important;
}

.cta-horizontal #gform_fields_2 > .gfield--type-textarea {
	flex: 0 0 100% !important;
	width: 100% !important;
	max-width: 100% !important;
}

/* =========================================================
   HORIZONTAL CTA: INPUT CONTAINERS
   ========================================================= */

.cta-horizontal #gform_2 .ginput_container {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* =========================================================
   HORIZONTAL CTA: NAME FIELD RESET
   ========================================================= */

.cta-horizontal .gfield--type-name .ginput_complex,
.cta-horizontal .gfield--type-name .ginput_container_name {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	column-gap: 0 !important;
	row-gap: 0 !important;
	--gf-field-gap-x: 0px;
	--gf-field-gap-y: 0px;
}

.cta-horizontal .gfield--type-name .gform-grid-row {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	gap: 0 !important;
}

.cta-horizontal .gfield--type-name .gform-grid-col,
.cta-horizontal .gfield--type-name .gform-grid-col--size-auto,
.cta-horizontal .gfield--type-name .name_first {
	display: block !important;
	flex: none !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	margin-inline: 0 !important;
	padding-inline: 0 !important;
}

/* =========================================================
   HORIZONTAL CTA: INPUTS
   ========================================================= */

.cta-horizontal #gform_fields_2 input[type="text"],
.cta-horizontal #gform_fields_2 input[type="email"],
.cta-horizontal #gform_fields_2 input[type="tel"] {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	inline-size: 100% !important;
	max-inline-size: 100% !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}

/* =========================================================
   HORIZONTAL CTA: TEXTAREA
   ========================================================= */

.cta-horizontal #gform_fields_2 .ginput_container_textarea {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	inline-size: 100% !important;
	max-inline-size: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

.cta-horizontal #gform_fields_2 textarea {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 100% !important;
	inline-size: 100% !important;
	max-inline-size: 100% !important;
	min-inline-size: 100% !important;
	height: 74px !important;
	min-height: 74px !important;
	margin: 0 !important;
	padding-left: 12px;
	padding-right: 12px;
	box-sizing: border-box !important;
	resize: vertical;
}

/* =========================================================
   HORIZONTAL CTA: SUBMIT
   ========================================================= */

.cta-horizontal #gform_2 > .gform_footer,
.cta-horizontal #gform_2 > .gform-footer {
	grid-column: 2;
	grid-row: 1;
	display: flex !important;
	align-items: flex-start;
	justify-content: flex-start;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

.cta-horizontal #gform_submit_button_2 {
	width: auto !important;
	height: 46px;
	margin: 0 !important;
	padding-left: 32px !important;
	padding-right: 32px !important;
	font-size: 1.1rem;
	white-space: nowrap;
}

/* =========================================================
   PRIVACY TEXT
   ========================================================= */

.privacy-text {
	display: block;
	font-size: 0.7rem;
	margin-top: 10px;
}

.cta-horizontal .privacy-text {
	margin-left: auto;
}

/* =========================================================
   404 PAGE
   ========================================================= */

section.page-not-found-section {
	padding: 6rem 0;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 991px) {
	.cta-horizontal #gform_wrapper_2 {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.cta-horizontal #gform_wrapper_2 > .gform_heading {
		min-height: 0;
	}

	.cta-horizontal #gform_wrapper_2 .gform_title {
		white-space: normal;
	}

	.cta-horizontal #gform_2 {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 12px;
		width: 100% !important;
	}

	.cta-horizontal #gform_fields_2 {
		display: flex !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		gap: 12px !important;
		width: 100% !important;
	}

	.cta-horizontal #gform_fields_2 > .gfield {
		flex: 0 0 auto !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
	}

	.cta-horizontal #gform_fields_2 textarea {
		height: 130px !important;
		min-height: 130px !important;
	}

	.cta-horizontal #gform_2 > .gform_footer,
	.cta-horizontal #gform_2 > .gform-footer {
		display: flex !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.cta-horizontal #gform_submit_button_2 {
		width: auto !important;
	}
}

@media (max-width: 768px) {
	.navbar-custom {
		padding: 10px 0;
		border-radius: 0;
	}

	.navbar-custom li a {
		padding: 6px 10px;
		margin-bottom: 3px;
	}

	.navbar-custom li:first-child a {
		margin-top: 10px;
	}
}

@media (max-width: 576px) {
	.cta-horizontal #gform_wrapper_2 .gform_title {
		font-size: 1.2rem;
	}
}


/* ==========================================================
   BRIDGE HEATING - BRIGHTEN-UP STYLES (Rev 2, 16 Oct 2026)
   Colours, borders, shadows and spacing. No changes to page order,
   menus, modules or content. The panels and lists do change spacing,
   so pages get slightly longer.
   To remove: delete everything from here to the END line and Publish.
   ========================================================== */

/* 0. Colour palette. The brand colours used below come from here, so
      changing one here changes it throughout this block. White text,
      shadows and the theme's own menu bar keep their own settings. */
:root {
  --bhg-navy: #21355A;         /* core navy (existing) */
  --bhg-orange: #D47846;       /* core orange (existing): lines, icons, ticks only */
  --bhg-burnt: #B35A2A;        /* darker orange: buttons and orange text on white */
  --bhg-orange-light: #F4A06B; /* lighter orange: accents on navy backgrounds */
  --bhg-navy-tint: #EEF2F8;    /* pale blue-grey: alternate section panels */
  --bhg-warm-tint: #FBF3EC;    /* pale warm cream: testimonials band */
}

/* 1. Headings in navy, with a short orange bar underneath section headings */
main section:not([class]) h2,
main section:not([class]) h3,
.service-blocks h2,
.service-blocks h3,
.testimonials h2 {
  color: var(--bhg-navy);
}
main section:not([class]) h2::after,
.service-blocks h2.mb-5::after,
.testimonials h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  margin-top: 14px;
  background: var(--bhg-orange);
  border-radius: 2px;
}

/* 2. Every other text section sits on a pale blue-grey panel,
      so long pages read in clear chunks */
main section:not([class]) {
  margin-bottom: 28px;
}
main section:not([class]):nth-of-type(even) {
  background: var(--bhg-navy-tint);
  padding: 36px 32px 20px;
  border-radius: 10px;
}

/* 3. One navy panel every few sections (3rd, 7th, 11th, 15th)
      for rhythm, with white text. Picked by position, not by name:
      if sections are added or moved, a different one turns navy. */
main section:not([class]):nth-of-type(4n+3) {
  background: var(--bhg-navy);
  color: #ffffff;
  padding: 36px 32px 20px;
  border-radius: 10px;
}
main section:not([class]):nth-of-type(4n+3) h2,
main section:not([class]):nth-of-type(4n+3) h3,
main section:not([class]):nth-of-type(4n+3) p,
main section:not([class]):nth-of-type(4n+3) li,
main section:not([class]):nth-of-type(4n+3) strong {
  color: #ffffff;
}
main section:not([class]):nth-of-type(4n+3) h2::after {
  background: var(--bhg-orange-light);
}
main section:not([class]):nth-of-type(4n+3) a {
  color: var(--bhg-orange-light);
}

/* 4. Lists: orange ticks instead of small dots, one item per line,
      text up to paragraph size */
.horizontal-list {
  list-style: none;
  padding-left: 0;
}
main section ul.horizontal-list li {
  display: block;
  position: relative;
  padding-left: 30px;
  margin: 0 0 10px;
  font-size: 1rem;     /* list text up to the same size as the paragraphs */
  line-height: 1.5;
}
.horizontal-list li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0.2em;
  width: 7px;
  height: 13px;
  border: solid var(--bhg-orange);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  background: none;
}
main section:not([class]):nth-of-type(4n+3) .horizontal-list li::before {
  border-color: var(--bhg-orange-light);
}

/* 4b. OPTIONAL: lists in two columns on desktop, so one-per-line lists
       don't make pages much longer. Delete this part for one column. */
@media (min-width: 992px) {
  .horizontal-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 36px;
  }
}

/* 5. Bold text in the body copy picks up the navy */
main section:not([class]) strong {
  color: var(--bhg-navy);
}

/* 6. Quote boxes: a sentence set as a "Blockquote" in the editor
      becomes an orange-edged callout */
main section:not([class]) blockquote {
  border-left: 5px solid var(--bhg-orange);
  background: #ffffff;
  padding: 16px 20px;
  margin: 8px 0 24px;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--bhg-navy);
  border-radius: 0 8px 8px 0;
  box-shadow: 0 4px 14px rgba(33, 53, 90, 0.08);
}
/* keeps the quote text navy even when it sits inside a navy panel */
main section:not([class]):nth-of-type(n) blockquote,
main section:not([class]):nth-of-type(n) blockquote p,
main section:not([class]):nth-of-type(n) blockquote strong {
  color: var(--bhg-navy);
}

/* 7. Buttons: slightly deeper orange so the white text is easy to read,
      turning navy on hover */
.btn-site {
  background-color: var(--bhg-burnt) !important;
  border-color: var(--bhg-burnt) !important;
  color: #ffffff !important;
  font-weight: 600;
}
body .gform_wrapper.gform-theme input.gform_button.button {
  background-color: var(--bhg-burnt) !important;  /* "Send request" on the forms */
  border-color: var(--bhg-burnt) !important;
  color: #ffffff !important;
}
.btn-site:hover,
.btn-site:focus,
body .gform_wrapper.gform-theme input.gform_button.button:hover {
  background-color: var(--bhg-navy) !important;
  border-color: var(--bhg-navy) !important;
}

/* 8. "More information" cards: orange top edge, deeper shadow,
      gentle lift on hover */
.service-blocks .card {
  border: 0;
  border-top: 4px solid var(--bhg-orange);
  box-shadow: 0 6px 20px rgba(33, 53, 90, 0.10);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.service-blocks .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(33, 53, 90, 0.18);
}
.service-blocks .btn-text-link {
  color: var(--bhg-burnt);
  font-weight: 600;
}

/* 9. Trust boxes (Insured, Breakdown Support etc.): orange left edge,
      soft shadow, navy title text */
.service-blocks .badge {
  border-left: 4px solid var(--bhg-orange);
  box-shadow: 0 4px 14px rgba(33, 53, 90, 0.08);
  color: var(--bhg-navy);
}

/* 10. Testimonials: warm cream band, cards with an orange edge */
.testimonials {
  background: var(--bhg-warm-tint);
  padding-top: 56px;
  padding-bottom: 56px;
}
.testimonials .testimonial-card {
  border: 0;
  border-left: 4px solid var(--bhg-orange);
  box-shadow: 0 6px 20px rgba(33, 53, 90, 0.08);
}
.testimonials .testimonial-author strong {
  color: var(--bhg-navy);
}

/* 11. "Request a quote" band: pale blue-grey with an orange top line */
.cta-horizontal {
  background: var(--bhg-navy-tint) !important;
  border-top: 4px solid var(--bhg-orange);
}

/* 12. Easier-to-read light text on navy: "Reasons to Call Us" list
       and the footer (currently very faint) */
.reasons-to-choose li {
  color: rgba(255, 255, 255, 0.88);
}
footer p {
  color: rgba(255, 255, 255, 0.75);
}
footer .menu li a {
  color: rgba(255, 255, 255, 0.8) !important;
}
footer .menu li a:hover {
  color: var(--bhg-orange-light) !important;
}

/* 13. Top banner: lighter orange location label (the current orange is
       below the contrast standard on navy) and brighter intro text */
.hero .hero_kicker {
  color: var(--bhg-orange-light);
}
.hero .hero_kicker::before {
  background-color: var(--bhg-orange-light);
}
.hero .hero_text {
  color: rgba(255, 255, 255, 0.88);
}

/* 14. Phones: slightly less padding inside the panels */
@media (max-width: 575px) {
  main section:not([class]):nth-of-type(even),
  main section:not([class]):nth-of-type(4n+3) {
    padding: 28px 20px 12px;
  }
}

/* ===================== END - Bridge Heating brighten-up ===================== */