/*
 * Site tidy-up, October 2026.
 * Plain CSS loaded after css/main.min.css (see functions.php). It is not part of the
 * gulp/Tailwind build, so edit it directly; the compiled main.min.css is left untouched.
 * Colours match tailwind.config.js: primary #0c2e5a, secondary #195cb5, tertiary #2191fb.
 */

/* ---------------------------------------------------------------------------
   Home hero: shorter, so the services start near the top of the screen.
   The background video is added by the "Roof Contractors Video" WPCode snippet
   and fills whatever height the hero has.
   --------------------------------------------------------------------------- */
.hero.hero--home {
	padding-bottom: 2.5rem;
}

.hero--home .hero__accreditations {
	margin-top: 2.5rem;
}

@media (min-width: 768px) {
	.hero.hero--home {
		/* clears the fixed 9rem header, then a little breathing room */
		padding-top: 12rem;
		padding-bottom: 2.75rem;
	}

	.hero--home .hero__accreditations {
		margin-top: 2.25rem;
	}
}

/* ---------------------------------------------------------------------------
   Home page cards: Repair, Restoration, Replacement, New Build (roof-options.twig),
   on the dark blue band after the US site's layout. The link's ::before covers the
   card, so the whole card is clickable. Phones get a photo-left row per card.
   --------------------------------------------------------------------------- */
.roof-options {
	background: #0c2e5a;
}

.roof-options > .container {
	padding-top: 3rem;
	padding-bottom: 3.5rem;
}

.roof-options__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
	width: 100%;
	margin-top: 1.75rem;
}

.roof-option {
	position: relative;
	display: flex;
	overflow: hidden;
	background: #fff;
	border-top: 4px solid #2191fb;
}

.roof-option__image {
	display: block;
	flex: 0 0 36%;
	width: 36%;
	min-height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.roof-option__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 0.9rem 1rem 1rem;
}

.roof-option__eyebrow {
	margin: 0 0 0.3rem;
	color: #195cb5;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
}

.roof-option__title {
	margin: 0 0 0.4rem;
	color: #0c2e5a;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
}

.roof-option__text {
	margin: 0 0 0.75rem;
	color: #585858;
	font-size: 14px;
	line-height: 1.5;
}

.roof-option__link {
	margin-top: auto;
	color: #195cb5;
	font-size: 14px;
	font-weight: 700;
}

.roof-option__link::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.roof-option__link::after {
	content: "\00a0\203A"; /* non-breaking space and a chevron */
}

.roof-option:hover .roof-option__image {
	transform: scale(1.04);
}

.roof-option:hover .roof-option__link {
	color: #2191fb;
	text-decoration: underline;
}

.roof-option:focus-within {
	outline: 3px solid #2191fb;
	outline-offset: 3px;
}

@media (min-width: 640px) {
	.roof-options__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem;
	}

	.roof-option {
		flex-direction: column;
	}

	.roof-option__image {
		flex: none;
		width: 100%;
		min-height: 0;
		aspect-ratio: 4 / 3;
	}

	.roof-option__body {
		padding: 1.25rem 1.5rem 1.5rem;
	}

	.roof-option__title {
		font-size: 24px;
	}

	.roof-option__text {
		font-size: 15px;
	}

	.roof-option__link {
		font-size: 16px;
	}
}

@media (min-width: 1024px) {
	.roof-options__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1.5rem;
		margin-top: 2.5rem;
	}

	.roof-option__image {
		aspect-ratio: 1 / 1;
	}
}

@media (min-width: 1280px) {
	.roof-options__grid {
		gap: 2rem;
	}

	.roof-option__title {
		font-size: 28px;
	}

	.roof-option__text {
		font-size: 16px;
	}
}

/* The UK map behind "We offer our services throughout the UK" starts 25% above its
   section (core.scss), which a solid band hides. On the home page, start it just below
   the card band; its bottom edge stays where it was. */
.roof-options + .usps .map {
	top: 1.5rem;
	height: 112%;
}

/* ---------------------------------------------------------------------------
   Service tiles ("buckets")
   --------------------------------------------------------------------------- */

/* The whole tile is clickable, not just the button that appears on hover. */
.bucket__link {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 5;
}

/* Home page: the eight service tiles, below the cards. */
.home-services__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	width: 100%;
}

.home-services .bucket {
	height: 11rem;
	padding: 1rem;
}

.home-services .bucket .overlay {
	height: calc(100% + 3rem);
}

.home-services .bucket .content h4 {
	font-size: 16px;
}

@media (min-width: 768px) {
	.home-services__grid {
		gap: 1.5rem;
	}

	.home-services .bucket {
		height: 15rem;
		padding: 1.75rem;
	}

	.home-services .bucket .content h4 {
		font-size: 20px;
	}
}

@media (min-width: 1024px) {
	.home-services__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 2rem;
	}
}

@media (min-width: 1280px) {
	.home-services .bucket {
		height: 17rem;
		padding: 2rem;
	}

	.home-services .bucket .content h4 {
		font-size: 22px;
	}
}

/* Touch screens have no hover: show the title in place and let the tile be the link. */
@media (hover: none), (max-width: 767px) {
	.home-services .bucket .content {
		transform: none;
	}

	.home-services .bucket .content .button {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
   Full-width logo strips (Our Clients, Approved Installers & Suppliers).
   The track holds the list twice and slides left by exactly one list, so the
   loop is seamless. It deliberately does not pause on hover.
   --------------------------------------------------------------------------- */
.logo-ribbon {
	width: 100%;
	overflow: hidden;
	padding-bottom: 3rem;
}

.logo-ribbon__header {
	padding-bottom: 1.75rem;
}

.logo-ribbon--clients {
	margin: 2rem 0;
	background: #f2f2f2;
	color: #333;
}

.logo-ribbon--materials {
	margin-top: 2rem;
	background: #195cb5;
	color: #fff;
}

.logo-marquee {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}

.logo-marquee__track {
	display: flex;
	width: max-content;
	animation: tcr-marquee var(--marquee-duration, 40s) linear infinite;
}

.logo-marquee__list {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Spacing is padding, not gap, so one list is exactly half the track. */
.logo-marquee__item {
	flex: 0 0 auto;
	margin: 0;
	padding: 0 1.25rem;
}

/* The templates set --logo-h per logo so wide wordmarks and square marks cover about
   the same area (9400 px², capped at 64 px tall); phones show them at 72%. */
.logo-marquee__item img {
	display: block;
	width: auto;
	height: calc(var(--logo-h, 56px) * 0.72);
	max-width: 280px;
	object-fit: contain;
}

@media (min-width: 768px) {
	.logo-marquee__item {
		padding: 0 2.25rem;
	}

	.logo-marquee__item img {
		height: var(--logo-h, 56px);
	}
}

@keyframes tcr-marquee {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(-50%, 0, 0);
	}
}

/* Visitors who ask their device for less motion get a still, wrapped row. */
@media (prefers-reduced-motion: reduce) {
	.logo-marquee {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.logo-marquee__track {
		width: auto;
		justify-content: center;
		animation: none;
	}

	.logo-marquee__list {
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 1.5rem;
	}

	.logo-marquee__list[aria-hidden="true"],
	.logo-marquee__item--repeat {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
   Contact page (page-contact.twig), laid out like the US site's contact page:
   a navy details band, a two-column intro, the CRM form, then Google Maps.
   --------------------------------------------------------------------------- */
.hero--contact .hero__accreditations {
	margin-top: 2rem;
}

.contact-details {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
	width: 100%;
	padding: 32px;
	background: #0c2e5a;
	color: #fff;
}

.contact-details h2 {
	margin: 0 0 12px;
	color: #bce7fd;
	font-size: 14px;
	font-weight: 400;
}

.contact-details p {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
}

.contact-details a {
	color: #fff;
	overflow-wrap: anywhere;
}

.contact-details a:hover {
	color: #bce7fd;
}

.contact-details .contact-details__phone {
	font-size: 26px;
}

.contact-intro {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: 48px;
	align-items: center;
	width: 100%;
	margin: 40px 0 16px;
}

.contact-intro h2 {
	margin: 0 0 16px;
}

.contact-intro p {
	margin: 0 0 8px;
}

.contact-intro__trust {
	padding: 24px 28px;
	background: #f5f5f5;
	border-left: 4px solid #2191fb;
}

.contact-intro__trust h3 {
	margin: 0 0 8px;
	color: #0c2e5a;
	font-size: 20px;
}

.contact-intro__trust a,
.contact-map a {
	color: #195cb5;
	font-weight: 700;
	text-decoration: underline;
}

.contact-form {
	width: 100%;
}

.contact-map {
	padding: 5rem 0;
}

.contact-map iframe {
	display: block;
	width: 100%;
	height: 450px;
	border: 0;
}

@media (max-width: 1024px) {
	.contact-intro {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}
}

@media (max-width: 767px) {
	.contact-details {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
		padding: 24px;
	}

	.contact-map {
		padding: 3rem 0;
	}

	.contact-map iframe {
		height: 320px;
	}
}

/* ---------------------------------------------------------------------------
   Header on tablets. Between 768 and 1023 px the two desktop menu rows and the
   phone button do not fit, and portrait tablets are touch screens, so they get
   the phone layout: logo, phone button and the slide-out Menu.
   From 1024 to 1279 px the top bar's links are tightened so the phone button
   stays on the same row instead of dropping over the main menu.
   --------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
	.site-header {
		position: absolute;
	}

	.site-header__backdrop,
	.site-header__desktop {
		display: none;
	}

	.site-header__logo {
		width: auto;
	}

	.site-header__mobile {
		display: flex;
	}

	/* Hug the number so the md-sized phone icon sits inside the button, as on desktop. */
	.site-header__mobile .phone-btn {
		width: auto;
	}
}

@media (min-width: 1024px) {
	.site-header__topbar {
		flex-wrap: nowrap;
	}
}

@media (min-width: 1024px) and (max-width: 1279px) {
	.site-nav.menu-secondary > li > a {
		padding-left: 0.75rem;
		padding-right: 0.75rem;
	}
}

/* ---------------------------------------------------------------------------
   Desktop dropdown menus: compact panels, two columns for long lists,
   open on hover or keyboard focus, with a short grace period on mouse-out.
   The doubled class (.site-nav.menu-primary) outranks the compiled hover rules.
   --------------------------------------------------------------------------- */
@media (min-width: 768px) {
	/* Short one-line labels, spread across the bar with each arrow beside its label. */
	.site-nav.menu-primary {
		width: 100%;
		justify-content: space-between;
	}

	.site-nav.menu-primary > li {
		flex: 0 0 auto;
	}

	.site-nav.menu-primary > li > .sub-menu,
	.site-nav.menu-secondary > li > .sub-menu {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		width: 300px;
		top: 100%;
		left: 0;
		right: auto;
		padding: 0.5rem 0;
		border-top: 3px solid #2191fb;
		opacity: 0;
		visibility: hidden;
		transform: translateY(8px);
		transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.2s;
	}

	/* Keep the right-hand dropdowns on screen. */
	.site-nav.menu-primary > li:nth-last-child(-n+2) > .sub-menu {
		left: auto;
		right: 0;
	}

	.site-nav.menu-primary > li:hover > .sub-menu,
	.site-nav.menu-primary > li:focus-within > .sub-menu,
	.site-nav.menu-secondary > li:hover > .sub-menu,
	.site-nav.menu-secondary > li:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition-delay: 0s;
	}

	.site-nav.menu-primary .sub-menu li,
	.site-nav.menu-secondary .sub-menu li,
	.site-nav.menu-primary .sub-menu li:nth-child(n) {
		width: auto;
		border-right-width: 0;
	}

	.site-nav.menu-primary .sub-menu li a,
	.site-nav.menu-secondary .sub-menu li a {
		padding: 0.7rem 1.25rem;
		border-top-width: 0;
		color: #0c2e5a;
		font-size: 14px;
		font-weight: 600;
		line-height: 1.35;
	}

	.site-nav.menu-primary .sub-menu li a:hover,
	.site-nav.menu-secondary .sub-menu li a:hover {
		color: #2191fb;
		background-color: #f5f5f5;
	}

	.site-nav .sub-menu > .menu-overview {
		grid-column: 1 / -1;
		margin-bottom: 0.35rem;
		border-bottom: 1px solid #e6e6e6;
	}

	.site-nav.menu-primary .sub-menu > .menu-overview a,
	.site-nav.menu-secondary .sub-menu > .menu-overview a {
		color: #195cb5;
		font-weight: 700;
	}

	.site-nav .sub-menu > .menu-overview a::after {
		content: "\00a0\2192"; /* non-breaking, so the arrow never wraps alone */
	}
}

/* Two columns for long lists once the bar is wide enough to keep them on screen. */
@media (min-width: 1024px) {
	.site-nav.menu-primary > li > .sub-menu--wide {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: 560px;
	}
}

/* Larger labels only where six of them fit on one line. */
@media (min-width: 1280px) {
	.site-nav.menu-primary > li > a {
		font-size: 15px;
	}
}

/* The mobile menu already shows the parent link above each sub-list. */
.mob-nav .menu-overview {
	display: none;
}