/*
 * Drainova overrides on top of the Plumby template.
 * Only what the WordPress context or the removed demo blocks actually need.
 */

/* Plumby sizes and colours headings by class (.hero-title, .choose-title, ...)
   rather than by tag, and its responsive rules are .vs-hero .hero-title, so the
   template's semantic h2/h3 swaps need no size overrides here. */

/* Plumby capitalises every word of the hero paragraph, which mangles real
   sentences ("Fast, Professional Drainage Engineers Available Across..."). */
.hero-text {
	text-transform: none;
}

/* Two CTAs in the hero instead of Plumby's single button. */
.hero-btn {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}

.hero-btn .vs-btn i {
	margin-right: 8px;
	margin-left: 0;
}

/* The logo is a vector lockup now, with a white-wordmark twin for the dark
   footer, so the white plate the old dark WebP needed is gone. */
.header-logo .logo,
.mobile-logo .logo {
	height: 48px;
	width: auto;
	max-width: 100%;
}

.footer-logo a {
	display: inline-block;
	line-height: 0;
}

.footer-logo img {
	height: 50px;
	width: auto;
	max-width: 100%;
}

@media (max-width: 575px) {
	.header-logo .logo,
	.mobile-logo .logo {
		height: 40px;
	}
}

/* Footer widget 1 swaps Plumby's newsletter form for a call CTA. */
.footer-search .vs-btn {
	margin-top: 6px;
}

/* Plumby parks this card absolutely off the FAQ column as decoration and hides
   it under 1200px. Here it carries the real coverage list, so it sits in the
   flow and has to survive every breakpoint. */
.faq-layout1 .award {
	position: static;
	max-width: 100%;
	border-radius: 20px;
	margin-top: 30px;
}

@media (max-width: 1199px) {
	.faq-layout1 .award {
		display: flex;
	}
}

.faq-layout1 .award .award-content,
.faq-layout1 .award .list-style1 ul {
	width: 100%;
}

/* Plumby colours the card's headings and list items white but has no rule for
   a plain paragraph, which this card adds. */
.faq-layout1 .award p {
	color: var(--white-color);
}

/* "Need a drainage engineer today?" runs straight into the phone link. */
.service-notice a {
	margin-left: 6px;
}

/* Plumby's blog thumbnails are landscape crops; WordPress post images are any
   shape, and a portrait one stretched the card to ~900px tall. */
.blog-style1 .blog-img__img {
	width: 100%;
	height: 260px;
	object-fit: cover;
}

/* This copy of the Plumby package ships without its bg/*.jpg photographs, so
   the panels that relied on them get flat brand colours instead. The footer one
   matters most: its text is white and was landing on a near-white panel. */
.dn-footer-dark {
	background-color: var(--title-color);
}

.dn-panel-soft {
	background-color: var(--smoke-color);
}

/* Plumby only colours the linked contact rows white; the plain-text ones
   (address, opening hours) stayed near-black on the dark footer. */
.dn-footer-dark .contact-box2 ul li {
	color: var(--white-color);
}

/* Plumby pads the <a>, which is an inline box, so only the first line of a
   wrapped link gets the 18px indent — lines 2 and 3 run back to the li's left
   edge, straight under the vertically centred chevron. Plumby's demo labels
   are one word; real service titles wrap to two or three lines. Indent the li
   instead and pin the chevron to the first line. */
.footer-wrapper .footer-links li {
	padding-left: 18px;
}

.footer-wrapper .footer-links li a {
	padding-left: 0;
}

.footer-wrapper .footer-links li::after {
	top: 0;
	transform: none;
	line-height: 24px; /* = the li's own 150% of 16px */
}

/* 80px of dead space sat between the last widget row and the copyright band. */
.footer-layout1 .widget-area {
	padding-bottom: 40px;
}

/* The copyright band lives in a .container-style2 (1440px) inside a
   .container-style3 panel (1820px), so the blue bar floated with a gap down
   both sides instead of closing off the panel. Let it span the panel and
   round its bottom corners to match .custom-reduce. */
.footer-layout1 .container-style2 {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

@media (min-width: 1441px) {
	/* Above this width .container-style3 keeps 15px of side padding, which left
	   a dark sliver down each edge of the band. */
	.footer-layout1 .container-style2 {
		margin-left: calc(var(--container-gutters) / -2);
		margin-right: calc(var(--container-gutters) / -2);
	}
}

.footer-layout1 .copyright-wrap {
	border-radius: 0 0 20px 20px;
}

@media (max-width: 1350px) {
	/* .custom-reduce drops to radius 0 here, so the band has to as well. */
	.footer-layout1 .copyright-wrap {
		border-radius: 0;
	}
}

/* The footer accordion (~1160 area links) is a real feature, but the plugin's
   own styling is white cards for a light background. The template now renders
   it inside the dark panel, so recolour the cards to match. */
.dn-footer-accordion {
	padding-bottom: 50px;
}

.dn-footer-accordion .fsa-accordion {
	--fsa-card-bg: rgba(255, 255, 255, 0.04);
	/* Grid items stretch by default, so opening one card blew the other two up
	   to match its height — hundreds of pixels of empty box. */
	align-items: start;
}

.dn-footer-accordion .fsa-summary {
	gap: 12px;
}

.dn-footer-accordion .fsa-service {
	border-color: rgba(255, 255, 255, 0.14);
	box-shadow: none;
	color: var(--white-color);
}

.dn-footer-accordion .fsa-count {
	color: var(--secondary-color);
	font-weight: 400;
}

.dn-footer-accordion .fsa-link {
	color: rgba(255, 255, 255, 0.72);
	font-size: 14px;
	line-height: 1.5;
}

.dn-footer-accordion .fsa-link:hover {
	color: var(--secondary-color);
}

/* back-to-top no longer has to clear the chat bubble on the homepage. */
.back-to-top {
	bottom: 40px;
}