/*
Theme Name: QwickFix
Theme URI: https://qwickfix.test
Author: Dom Abbott
Description: One-page rapid repairs site for QwickFix. Classic theme — header and footer are PHP templates with menus from Appearance → Menus; page sections are provided as Gutenberg block patterns. Contact Form 7 for enquiries.
Version: 1.1.0
Requires at least: 6.5
Requires PHP: 8.1
License: GNU General Public License v2 or later
Text Domain: qwickfix
*/

:root {
	--qf-orange: #F04F22;
	--qf-orange-dark: #D23E14;
	--qf-ink: #191B1F;
	--qf-charcoal: #23262C;
	--qf-stone: #F5F3EF;
	--qf-line: #E4E1DB;
	--qf-muted: #5D636D;
	--qf-tint: #FDEBE5;
	--qf-gold: #F6B31B;
	--qf-green: #1E9E5A;
	--qf-text-on-dark: #B9BCC2;
	--qf-text-on-dark-dim: #9DA0A6;
	--qf-radius: 10px;
	--qf-content: 1200px;
	--qf-gutter: clamp(20px, 4vw, 32px);
}

/* ---------------------------------- Chrome layout

   header.php and footer.php are plain PHP templates, so the flex and max-width
   that core's block layout used to generate for these wrappers is declared here.
   The same goes for the horizontal gutter on full-width sections, which came
   from theme.json root padding on .wp-site-blocks — an element only block
   themes output.
*/

.qf-topbar-inner,
.qf-header-inner,
.qf-footer-inner,
.qf-page-inner {
	max-width: var(--qf-content);
	margin-inline: auto;
	padding-inline: var(--qf-gutter);
}

.qf-topbar-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.qf-header-inner {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

/* Full-bleed sections constrain their own inner content, so the gutter has to
   sit on the section itself rather than on a wrapper around the content. */
.qf-section,
.qf-hero,
.qf-usp {
	padding-inline: var(--qf-gutter);
}

.qf-topbar-inner p,
.qf-footer-bottom p {
	margin: 0;
}

body {
	-webkit-font-smoothing: antialiased;
}

h1 mark, h2 mark {
	background: none;
	color: var(--qf-orange);
}

/* ---------------------------------- Generic section rhythm */

/* Sections butt up against each other and the header/footer — no root block gaps. */
.qf-main > * + * { margin-block-start: 0; }

.qf-section {
	padding-top: 76px;
	padding-bottom: 76px;
}

.qf-bg-stone { background: var(--qf-stone); }
.qf-bg-ink { background: var(--qf-ink); color: #fff; }

/* Headings inherit the section's white; only the intro copy needs softening. */
.qf-bg-ink .qf-section-intro { color: var(--qf-text-on-dark); }

.qf-kicker {
	color: var(--qf-orange);
	font-family: var(--wp--preset--font-family--barlow-condensed);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	margin-bottom: 0.75rem;
}

/* Tighten the gap between the orange kicker and the heading. */
.qf-section-header h2 { margin-top: 0; }

.qf-section-intro {
	color: var(--qf-muted);
	max-width: 640px;
	font-size: 1.125rem;
}

.qf-center .qf-section-intro { margin-left: auto; margin-right: auto; }

/* Star ratings (topbar, review cards) */
.qf-stars { color: var(--qf-gold); letter-spacing: 2px; }

/* ---------------------------------- Buttons */

.wp-block-button__link {
	padding: 15px 28px;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.wp-block-button__link:hover {
	background-color: var(--qf-orange-dark);
	color: #fff;
}

/* Call CTA: keep the phone icon and label aligned with a consistent gap */
.qf-call-btn .wp-block-button__link {
	display: flex;
	align-items: center;
	gap: 10px;
}

.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: #191B1F;
	border: 2px solid rgba(255, 255, 255, 0.35);
	color: #fff;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: #fff;
}

/* ---------------------------------- Top bar */

.qf-topbar {
	background: var(--qf-ink);
	color: #C6C8CC;
	font-size: 14.5px;
	padding-top: 8px;
	padding-bottom: 8px;
}

.qf-topbar a { color: #fff; text-decoration: none; font-weight: 700; }

/* Phone number and social icons ride together on the right of the bar. */
.qf-topbar-right {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 18px;
}

.qf-open {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	color: #fff;
}

.qf-open-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--qf-green);
	box-shadow: 0 0 0 3px rgba(30, 158, 90, 0.25);
	flex: none;
}

/* ---------------------------------- Header */

.qf-header {
	background: #fff;
	border-bottom: 1px solid var(--qf-line);
	padding-top: 16px;
	padding-bottom: 16px;
	position: sticky;
	top: 0;
	z-index: 50;
}

.qf-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }

.qf-logo img {
    max-width: 170px;
}

.qf-logo-mark {
	width: 38px;
	height: 38px;
	border-radius: 8px;
	background: var(--qf-orange);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

.qf-logo-text { line-height: 1.05; }

.qf-logo-name {
	font-family: var(--wp--preset--font-family--barlow-condensed);
	font-weight: 800;
	font-size: 1.35rem;
	letter-spacing: 0.02em;
	color: var(--qf-ink);
	text-transform: uppercase;
	display: block;
}

.qf-logo-name em { color: var(--qf-orange); font-style: normal; }

.qf-logo-tag {
	display: block;
	font-size: 0.55rem;
	font-weight: 700;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--qf-muted);
}

.qf-nav { display: flex; align-items: center; }

ul.qf-menu {
	display: flex;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.qf-menu a {
	font-size: 0.96875rem;
	font-weight: 600;
	color: var(--qf-ink);
	text-decoration: none;
}

.qf-menu a:hover { color: var(--qf-orange); }

/* The call CTA and close button only exist for the mobile overlay */
.qf-nav-cta,
.qf-nav-close { display: none; }

.qf-header-actions { display: flex; align-items: center; gap: 12px; }

.qf-btn-call {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--qf-orange);
	color: #fff;
	border-radius: var(--qf-radius);
	padding: 11px 20px;
	font-family: var(--wp--preset--font-family--barlow-condensed);
	font-size: 1.0625rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.qf-btn-call:hover { background: var(--qf-orange-dark); }

/* ---------------------------------- Mobile nav (burger + overlay) */

/* Burger button, styled with the same weight as the CALL NOW CTA it replaces */
.qf-burger {
	display: none;
	background: var(--qf-orange);
	color: #fff;
	border: 0;
	border-radius: 6px;
	padding: 11px;
	cursor: pointer;
	line-height: 0;
}

@media (max-width: 781px) {
	.qf-btn-call { display: none; }
	.qf-burger { display: flex; }

	.qf-nav { display: none; }

	.qf-nav.is-open {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		position: fixed;
		inset: 0;
		z-index: 100;
		background: var(--qf-ink);
		padding: 56px 24px calc(40px + env(safe-area-inset-bottom, 0px));
		overflow-y: auto;
	}

	.qf-nav.is-open ul.qf-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 6px;
		flex: 1;
	}

	.qf-nav.is-open .qf-menu a {
		display: block;
		color: #fff;
		font-family: var(--wp--preset--font-family--barlow-condensed);
		font-size: 1.4rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.03em;
		padding: 12px 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	}

	/* Call now CTA sits just below the last menu item */
	.qf-nav.is-open .qf-nav-cta {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		margin-top: 28px;
		background: var(--qf-orange);
		color: #fff;
		text-align: center;
		border-radius: var(--qf-radius);
		padding: 16px;
		font-family: var(--wp--preset--font-family--barlow-condensed);
		font-size: 1.0625rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 1px;
		text-decoration: none;
	}

	.qf-nav.is-open .qf-nav-close {
		display: flex;
		position: absolute;
		top: 16px;
		right: 20px;
		background: none;
		border: 0;
		color: #fff;
		padding: 8px;
		cursor: pointer;
		line-height: 0;
	}

	body.qf-nav-locked { overflow: hidden; }
}

/* ---------------------------------- Hero */

.qf-hero {
	background: linear-gradient(180deg, var(--qf-ink) 0%, var(--qf-charcoal) 100%);
	color: #fff;
	padding-top: 64px;
	padding-bottom: 72px;
	position: relative;
	overflow: hidden;
}

.qf-hero::after {
	content: "";
	position: absolute;
	top: -140px;
	right: -140px;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(240, 79, 34, 0.22), transparent 65%);
	pointer-events: none;
}

/* Weight and the orange mark come from the heading element styles and the
   global h1/h2 mark rule; colour is inherited from the section. */
.qf-hero h1 { margin-bottom: 1.25rem; }

.qf-hero-sub {
	color: #fff;
	max-width: 520px;
	font-size: 1.25rem;
	margin-bottom: 1.75rem;
}

.qf-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 1.75rem;
	padding: 0;
	list-style: none;
}

.qf-badges li {
	background: #E8EAEE;
	border: 1px solid #191B1F;
	border-radius: 100px;
	padding: 7px 14px;
	font-size: 0.84375rem;
	font-weight: 600;
	color: #191B1F;
}

.qf-badges li::before {
	content: "\2713\0020";
	color: var(--qf-orange);
	font-weight: 800;
}

/* Hero "What's gone wrong?" card */

.qf-hero-card {
	background: #fff;
	color: var(--qf-ink);
	border-radius: 16px;
	padding: 28px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
	position: relative;
	z-index: 1;
}

.qf-hero-card h3 {
	font-size: 1.5rem;
	margin-bottom: 0.25rem;
}

.qf-hero-card .qf-card-sub {
	color: var(--qf-muted);
	font-size: 0.9375rem;
	margin-bottom: 1rem;
}

.qf-fault-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.qf-fault-btn {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1.5px solid var(--qf-line);
	border-radius: var(--qf-radius);
	padding: 13px 14px;
	font-size: 0.96875rem;
	font-weight: 600;
	color: var(--qf-ink);
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.qf-fault-btn:hover {
	border-color: var(--qf-orange);
	background: var(--qf-tint);
}

/* On hover the button fills with tint, so flip the icon box to white to keep it distinct */
.qf-fault-btn:hover svg { background: #fff; }

.qf-fault-btn svg {
	box-sizing: border-box;
	width: 34px;
	height: 34px;
	padding: 8px;
	flex: none;
	background: var(--qf-tint);
	border-radius: 8px;
	color: var(--qf-orange);
	transition: background-color 0.15s ease;
}

.qf-hero-card-foot {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px dashed var(--qf-line);
	font-size: 0.875rem;
	color: var(--qf-muted);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.qf-hero-card-foot a {
	color: var(--qf-orange);
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
}

/* ---------------------------------- USP strip */

.qf-usp {
	background: var(--qf-stone);
	border-bottom: 1px solid var(--qf-line);
	padding-top: 22px;
	padding-bottom: 22px;
}

.qf-usp-item {
	display: flex;
	gap: 12px;
	align-items: center;
}

/* The bare <svg> becomes its own boxed icon: border-box + padding renders the
   glyph inside the padded content area while the background fills the square. */
.qf-usp-item svg {
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	padding: 11px;
	flex: none;
	background: #fff;
	border: 1px solid var(--qf-line);
	border-radius: 10px;
	color: var(--qf-orange);
}

.qf-usp-item strong { display: block; font-size: 0.96875rem; }

.qf-usp-item span { font-size: 0.8125rem; color: var(--qf-muted); }

/* ---------------------------------- Cards (services / servicing) */

.qf-card {
	position: relative;
	background: #fff;
	border: 1.5px solid var(--qf-line);
	border-radius: 14px;
	padding: 24px 22px;
	height: 100%;
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

/* Link cards only — qf-card-static (how it works) has no hover state */
.qf-card:not(.qf-card-static):hover {
	border-color: var(--qf-orange);
	box-shadow: 0 14px 30px rgba(25, 27, 31, 0.08);
	transform: translateY(-2px);
}

.qf-card-icon {
	width: 46px;
	height: 46px;
	border-radius: 11px;
	background: var(--qf-tint);
	color: var(--qf-orange);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}

/* Full-bleed image at the top of a card (services grid). The card drops its
   top padding instead of the image using a negative top margin — core's
   layout styles zero out the first child's margin-block-start. */
.qf-card-has-img { padding-top: 0; }

.qf-card-img {
	margin: 0 -22px 18px;
	aspect-ratio: 470 / 360;
	overflow: hidden;
	border-radius: 13px 13px 0 0;
	background: var(--qf-stone);
}

.qf-card-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.qf-card h3 {
	font-size: 1.375rem;
	letter-spacing: 0.02em;
	margin-bottom: 0.5rem;
}

.qf-card p {
	font-size: 0.90625rem;
	color: var(--qf-muted);
	margin-bottom: 0.9rem;
}

.qf-card-link {
	font-size: 0.90625rem;
	font-weight: 700;
	color: var(--qf-orange);
	text-decoration: none;
	text-transform: none;
}

.qf-card-link:hover { text-decoration: underline; }

/* Whole-card click target. The link stretches an invisible overlay across its
   positioned .qf-card ancestor, so the markup stays semantic (one anchor, its
   text still the accessible label) and no JS is needed. Cards must not contain
   any other interactive element or the overlay would sit on top of it. */
.qf-card-link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 14px;
}

/* Keyboard focus lands on the anchor — ring the whole card to match the mouse
   affordance. */
.qf-card:focus-within {
	border-color: var(--qf-orange);
	box-shadow: 0 14px 30px rgba(25, 27, 31, 0.08);
}

.qf-tag {
	display: inline-block;
	background: var(--qf-tint);
	color: var(--qf-orange);
	font-size: 0.71875rem;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	border-radius: 100px;
	padding: 4px 11px;
	margin-bottom: 10px;
}

/* ---------------------------------- Check lists */

ul.qf-check-list {
	list-style: none;
	padding: 0;
	margin: 1.25rem 0 0;
}

ul.qf-check-list li {
	position: relative;
	padding-left: 30px;
	margin-bottom: 0.8rem;
	font-size: 1rem;
	line-height: 1.6;
}

ul.qf-check-list li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0;
	width: 20px;
	height: 1.6em;
	color: var(--qf-orange);
	font-size: 16px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Two-column check list (planned maintenance) */
ul.qf-check-list.qf-check-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px 24px;
}

/* Check list on dark sections (landlord services) */
.qf-bg-ink ul.qf-check-list li::before {
	background: none;
}

/* ---------------------------------- Planned works CTA card */

.qf-project-card {
	background: #fff;
	border: 1.5px solid var(--qf-line);
	border-radius: 16px;
	padding: 32px;
	box-shadow: 0 18px 40px rgba(25, 27, 31, 0.07);
}

.qf-project-card h3 { font-size: 1.625rem; margin-bottom: 0.6rem; }

.qf-project-card p { color: var(--qf-muted); font-size: 0.96875rem; }

/* ---------------------------------- Landlord services (dark section) */

.qf-portfolio-card {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 16px;
	padding: 32px;
}

.qf-portfolio-card h3 { font-size: 1.5625rem; margin-bottom: 0.6rem; }

.qf-portfolio-card p { color: var(--qf-text-on-dark); font-size: 0.96875rem; }

.qf-portfolio-card p.qf-portfolio-fine {
	margin-top: 14px;
	margin-bottom: 0;
	font-size: 0.875rem;
	text-align: center;
}

.qf-portfolio-fine a {
	color: var(--qf-orange);
	font-weight: 700;
	text-decoration: none;
}

/* ---------------------------------- About us facts */

.qf-facts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.qf-fact {
	border: 1px solid var(--qf-line);
	border-radius: var(--qf-radius);
	padding: 22px 20px;
	background: #fff;
}

.qf-fact b {
	font-family: var(--wp--preset--font-family--barlow-condensed);
	font-weight: 800;
	font-size: 1.6875rem;
	text-transform: uppercase;
	color: var(--qf-orange);
	display: block;
	line-height: 1.1;
	margin-bottom: 6px;
}

.qf-fact span { font-size: 0.875rem; color: var(--qf-muted); }

/* ---------------------------------- How it works */

.qf-step-num {
	position: absolute;
	top: 14px;
	right: 22px;
	font-family: var(--wp--preset--font-family--barlow-condensed);
	font-weight: 800;
	font-size: 3.25rem;
	line-height: 1;
	color: var(--qf-orange);
	opacity: 0.22;
}

/* ---------------------------------- Pricing */

.qf-price-card {
	background: var(--qf-ink);
	color: #fff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 24px 50px rgba(25, 27, 31, 0.25);
}

.qf-hazard {
	height: 10px;
	background: repeating-linear-gradient(
		-45deg,
		var(--qf-orange) 0 16px,
		var(--qf-ink) 16px 32px
	);
}

.qf-price-card-inner { padding: 34px 32px; }

.qf-price-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 16px 0;
}

.qf-price-row + .qf-price-row { border-top: 1px solid rgba(255, 255, 255, 0.1); }

.qf-price-row strong {
	display: block;
	font-family: var(--wp--preset--font-family--barlow-condensed);
	text-transform: uppercase;
	font-size: 20px;
	letter-spacing: 0.03em;
}

.qf-price-row small { color: var(--qf-text-on-dark-dim); font-size: 16px; }

.qf-price-value {
	font-family: var(--wp--preset--font-family--barlow-condensed);
	font-weight: 800;
	font-size: 2.125rem;
	color: var(--qf-orange);
	white-space: nowrap;
}

.qf-price-note {
	font-size: 14px;
	color: var(--qf-text-on-dark-dim);
	margin: 14px 0 20px;
}

.qf-price-card .wp-block-button { width: 100%; }
.qf-price-card .wp-block-button__link { width: 100%; }

/* ---------------------------------- Reviews */

.qf-review-card {
	background: var(--qf-stone);
	border: 1px solid var(--qf-line);
	border-radius: 14px;
	padding: 26px;
	height: 100%;
}

.qf-review-card .qf-stars { font-size: 1.0625rem; margin-bottom: 0.75rem; }

.qf-review-quote { font-size: 0.96875rem; margin-bottom: 1rem; }

.qf-review-meta { font-size: 0.875rem; }
.qf-review-meta strong { display: block; font-size: 0.9375rem; color: var(--qf-ink); }
.qf-review-meta span { color: var(--qf-muted); }

.qf-devnote {
	background: #FCF7E8;
	border: 1px dashed #E8C892;
	border-radius: 10px;
	padding: 12px 16px;
	font-size: 0.84375rem;
	color: #8A6D1A;
}

/* ---------------------------------- Areas */

.qf-area-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	padding: 0;
	margin: 1.5rem 0;
}

.qf-area-pills li {
	background: #fff;
	border: 1.5px solid var(--qf-line);
	border-radius: 100px;
	padding: 8px 18px;
	font-size: 0.9375rem;
	font-weight: 600;
}

.qf-orange-link { color: var(--qf-orange); font-weight: 700; }

.qf-map {
	position: relative;
	z-index: 0; /* keep Leaflet's stacked panes below the sticky header */
	border-radius: var(--qf-radius);
	overflow: hidden;
	border: 1px solid var(--qf-line);
	background: #fff;
	height: 100%;
	min-height: 360px;
}

.qf-map #qf-coverage-map {
	width: 100%;
	height: 100%;
	min-height: 360px;
}

.qf-map .leaflet-tile-pane {
	filter: grayscale(0.35) contrast(1.02);
}

.qf-map .qf-map-tooltip {
	font-family: var(--wp--preset--font-family--barlow, inherit);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--qf-ink, #191B1F);
	border: 1px solid var(--qf-line);
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba(25, 27, 31, 0.12);
}

.qf-map .qf-map-tooltip--base {
	background: var(--qf-ink, #191B1F);
	color: #fff;
	border-color: transparent;
}

.qf-map .qf-map-tooltip--base::before {
	border-top-color: var(--qf-ink, #191B1F);
}

/* ---------------------------------- Contact / callback section */
/* The section's dark background and intro colour come from .qf-bg-ink. */

.qf-talk-card {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 14px;
	padding: 22px 24px;
	margin-top: 2rem;
}

.qf-talk-card strong {
	display: block;
	font-family: var(--wp--preset--font-family--barlow-condensed);
	font-size: 1.625rem;
	font-weight: 800;
	letter-spacing: 0.5px;
	margin-bottom: 4px;
}

.qf-talk-phone {
	font-family: var(--wp--preset--font-family--barlow-condensed);
	font-weight: 800;
	font-size: 2rem;
	color: var(--qf-orange);
	text-decoration: none;
	display: inline-block;
	line-height: 1.2;
}

.qf-talk-card small { display: block; color: var(--qf-text-on-dark); font-size: 0.875rem; margin-top: 6px; }

.qf-form-card {
	background: #fff;
	color: var(--qf-ink);
	border-radius: 16px;
	padding: 32px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.qf-form-card h3 { font-size: 1.5rem; margin-bottom: 0.25rem; }

.qf-form-card .qf-card-sub { color: var(--qf-muted); font-size: 0.90625rem; margin-bottom: 1.25rem; }

/* Contact Form 7 */

.qf-cf7-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 16px;
}

/* Let grid items shrink below their content's intrinsic width so the
   controls stay inside their track instead of blowing the cell out. */
.qf-cf7-grid .qf-field { min-width: 0; }

.qf-cf7-grid .qf-field-full { grid-column: 1 / -1; }

.qf-field label {
	display: block;
	font-size: 0.84375rem;
	font-weight: 700;
	margin-bottom: 6px;
}

.qf-field .wpcf7-form-control-wrap { display: block; width: 100%; }

.wpcf7 input[type="text"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="email"],
.wpcf7 select,
.wpcf7 textarea {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	border: 1.5px solid var(--qf-line);
	border-radius: 9px;
	padding: 12px 14px;
	font-size: 1rem;
	font-family: inherit;
	background: #fff;
	color: var(--qf-ink);
}

.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
	outline: 2px solid var(--qf-orange);
	outline-offset: -1px;
	border-color: var(--qf-orange);
}

/* Urgency radio pills */

.qf-urgency .wpcf7-radio {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.qf-urgency .wpcf7-list-item {
	margin: 0;
	flex: 1;
	min-width: 110px;
}

.qf-urgency .wpcf7-list-item label {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1.5px solid var(--qf-line);
	border-radius: 9px;
	padding: 11px 10px;
	font-size: 0.84375rem;
	font-weight: 700;
	text-align: center;
	cursor: pointer;
	margin: 0;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.qf-urgency .wpcf7-list-item input { position: absolute; opacity: 0; }

.qf-urgency .wpcf7-list-item label:has(input:checked) {
	border-color: var(--qf-orange);
	background: var(--qf-tint);
	color: var(--qf-orange);
}

.qf-cf7-submit .wpcf7-submit {
	width: 100%;
	background: var(--qf-orange);
	color: #fff;
	border: 0;
	border-radius: var(--qf-radius);
	padding: 15px 28px;
	font-family: var(--wp--preset--font-family--barlow-condensed);
	font-size: 1.1875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.qf-cf7-submit .wpcf7-submit:hover { background: var(--qf-orange-dark); }

.qf-form-smallprint {
	text-align: center;
	font-size: 0.78125rem;
	color: var(--qf-muted);
	margin-top: 12px;
}

.wpcf7-not-valid-tip { font-size: 0.6875rem; color: #C53015; margin-top: 4px; }

.wpcf7 form .wpcf7-response-output {
	margin: 16px 0 0;
	border-radius: 7px;
	font-size: 0.8125rem;
	padding: 10px 14px;
	border-width: 1px;
}

.wpcf7 form.sent .wpcf7-response-output { border-color: #2E7D32; color: #2E7D32; }

/* ---------------------------------- FAQ */

.qf-faq { max-width: 780px; margin-left: auto; margin-right: auto; }

.qf-faq .wp-block-details {
	border: 1px solid var(--qf-line);
	border-radius: 12px;
	padding: 0;
	margin-bottom: 12px;
	background: #fff;
}

.qf-faq summary {
	padding: 18px 22px;
	font-weight: 700;
	font-size: 1.0625rem;
	cursor: pointer;
	list-style: none;
	position: relative;
}

.qf-faq summary::-webkit-details-marker { display: none; }

.qf-faq summary::before,
.qf-faq summary::after {
	content: "";
	position: absolute;
	right: 22px;
	top: 50%;
	width: 16px;
	height: 2px;
	background: var(--qf-orange);
	transition: transform 0.25s ease;
}

/* horizontal bar */
.qf-faq summary::after { transform: translateY(-50%); }

/* vertical bar — rotates flat on open so + becomes - */
.qf-faq summary::before { transform: translateY(-50%) rotate(90deg); }

.qf-faq details[open] summary::before { transform: translateY(-50%) rotate(0deg); }

.qf-faq .wp-block-details > :not(summary) {
	padding: 0 22px;
	font-size: 0.96875rem;
	color: var(--qf-muted);
}

.qf-faq .wp-block-details > p:last-child { padding-bottom: 18px; }

/* ---------------------------------- Footer */

.qf-footer {
	background: var(--qf-ink);
	color: #A6A9AE;
	padding-top: 56px;
	padding-bottom: 0;
	font-size: 0.90625rem;
}

.qf-footer h4 {
	color: #fff;
	font-family: var(--wp--preset--font-family--barlow-condensed);
	text-transform: uppercase;
	font-size: 1.0625rem;
	letter-spacing: 1.5px;
	margin-top: 0;
	margin-bottom: 0.875rem;
}

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

.qf-footer ul li { margin-bottom: 0.6rem; }

/* Contact list: icon in a fixed gutter so wrapped text stays hung off the icon */
.qf-footer-contact li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

/* Nudge down to sit on the text's cap height rather than its line box */
.qf-footer-contact svg {
	flex: 0 0 auto;
	margin-top: 3px;
	color: var(--qf-orange);
}

.qf-footer-contact .qf-icon-whatsapp { color: #25D366; }

/* Iconless rows line up with the text column, not the icon gutter */
.qf-footer-contact li.qf-footer-contact--text { padding-left: 27px; }

.qf-footer a { color: #A6A9AE; text-decoration: none; }

.qf-footer a:hover { color: #fff; }

.qf-footer .qf-logo-name { color: #fff; }
.qf-footer .qf-logo-tag { color: #7A7D83; }

/* Replaces the core columns block the footer pattern used to render. */
.qf-footer-cols {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 2rem;
}

.qf-footer-col { flex: 1 1 0; min-width: 0; }

.qf-footer-col--brand { flex: 0 1 33.33%; }

/* Fixed width so space-between pushes it flush right; content stays left-aligned */
.qf-footer-col--contact { flex: 0 0 320px; }

.qf-footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	margin-top: 48px;
	padding: 20px 0;
	font-size: 0.8125rem;
	color: #7A7D83;
}

ul.qf-legal-menu {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.qf-legal-menu li { margin: 0; }

/* Dot separator between legal links */
.qf-legal-menu li + li::before {
	content: "·";
	margin: 0 10px;
}

/* ---------------------------------- Social links

   One rule set for both placements (template-parts/social-links.php). Declared
   after the top bar and footer so the plain `a` colours in those sections lose
   the specificity tie and the icons inherit their container's colour instead.
*/

ul.qf-social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 6px;
}

ul.qf-social li { margin: 0; }

.qf-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	color: inherit;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.qf-social a:hover,
.qf-social a:focus-visible {
	background: var(--qf-orange);
	color: #fff;
}

/* Pull the circles out to the edge of the bar so they optically align with the
   phone number rather than sitting inset by their own padding. */
.qf-social--topbar { margin-right: -7px; }

.qf-social--footer {
	margin-top: 1.25rem;
	margin-left: -7px;
}

/* ---------------------------------- Smooth anchors */

html { scroll-behavior: smooth; }

:target { scroll-margin-top: 90px; }

/* ---------------------------------- Responsive */

@media (max-width: 781px) {
	.qf-section { padding-top: 56px; padding-bottom: 56px; }
	.qf-hero { padding-top: 44px; padding-bottom: 56px; }
	.qf-topbar-inner { justify-content: center; }
	.qf-topbar .qf-rated { display: none; }
	/* Core's columns block stacked at this width; match it. */
	.qf-footer-col,
	.qf-footer-col--brand { flex-basis: 100%; }
	.qf-footer-col--contact { flex: 0 1 100%; }
	ul.qf-check-list.qf-check-cols { grid-template-columns: 1fr; }
	.qf-cf7-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
	.qf-fault-grid { grid-template-columns: 1fr; }
	.qf-facts { grid-template-columns: 1fr; }
}