/*
Theme Name: L&R Renewables
Theme URI: https://lr-renewables.co.uk/
Author: L&R Renewables Ltd
Author URI: https://lr-renewables.co.uk/
Description: Child theme of Twenty Twenty-Five for lr-renewables.co.uk. Brand palette, self-hosted Poppins, L&R header and footer, and section patterns for repair and service pages.
Template: twentytwentyfive
Version: 1.0.7
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lr-renewables
*/

/* ---------------------------------------------------------------------------
 * Carried over from the parent style.css (the parent stylesheet is dequeued).
 * ------------------------------------------------------------------------- */
a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .15em;
}

:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
}

.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

/* ---------------------------------------------------------------------------
 * Layout: sections sit flush against each other and the header/footer.
 * ------------------------------------------------------------------------- */
html {
	scroll-padding-top: 96px;
}

.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

.wp-block-post-content > .alignfull {
	margin-block-start: 0;
	margin-block-end: 0;
}

.lr-page-content:has(> .alignfull:first-child) {
	padding-top: 0 !important;
}

.lr-page-content:has(> .alignfull:last-child) {
	padding-bottom: 0 !important;
}

/* ---------------------------------------------------------------------------
 * Header: sticky, full logo on desktop, compact logo on mobile.
 * ------------------------------------------------------------------------- */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #FFFFFF;
	box-shadow: 0 1px 0 #DCE5EE;
}

.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: 46px;
	}
}

@media (max-width: 600px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}
}

.lr-logo .wp-block-image {
	margin: 0;
}

.lr-logo-compact {
	display: none;
}

/* Logo images only set a height, so give them their shape too: browsers can then reserve the width before the files load. */
.lr-logo-full img,
.lr-site-footer .wp-block-image img[src$="lr-renewables-logo-white.svg"] {
	width: auto;
	aspect-ratio: 620 / 400;
}

.lr-logo-compact img {
	width: auto;
	aspect-ratio: 400 / 188;
}

@media (max-width: 781px) {
	.lr-logo-full {
		display: none;
	}

	.lr-logo-compact {
		display: block;
	}

	.lr-header-phone .wp-block-button__link {
		padding: .6rem .9rem;
		font-size: .9375rem;
	}
}

/* ---------------------------------------------------------------------------
 * Block styles registered in functions.php.
 * ------------------------------------------------------------------------- */
.is-style-lr-card,
.is-style-lr-tick-card {
	background: #FFFFFF;
	color: #3A3F45;
	border: 1px solid #DCE5EE;
	border-radius: 12px;
	padding: 1.5rem;
	box-shadow: var(--wp--preset--shadow--card);
}

.is-style-lr-card > :first-child,
.is-style-lr-tick-card > :first-child {
	margin-block-start: 0;
}

.is-style-lr-card h3 a {
	color: inherit;
	text-decoration: none;
}

.is-style-lr-card h3 a:hover,
.is-style-lr-card h3 a:focus {
	color: #0C6BB8;
	text-decoration: underline;
}

.is-style-lr-tick-card {
	position: relative;
	padding: 1rem 1.25rem 1rem 3.25rem;
}

.is-style-lr-tick-card::before {
	content: "";
	position: absolute;
	left: 1.1rem;
	top: 1.2rem;
	width: 1.35rem;
	height: 1.35rem;
	border-radius: 50%;
	background: #0C6BB8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / .8rem no-repeat;
}

.is-style-lr-step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: #0C6BB8;
	color: #FFFFFF;
	font-weight: 700;
	line-height: 1;
}

.lr-card-icon img {
	width: 48px;
	height: 48px;
}

/* Links inside the gradient bands stay white. */
.has-brand-gradient-background a:not(.wp-element-button) {
	color: #FFFFFF;
}

/* ---------------------------------------------------------------------------
 * FAQ: native details/summary accordion.
 * ------------------------------------------------------------------------- */
.wp-block-details {
	border-bottom: 1px solid #DCE5EE;
	padding-block: 1rem;
}

.wp-block-details summary {
	position: relative;
	padding-right: 2.25rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "+";
	position: absolute;
	right: .25rem;
	top: -.1rem;
	font-size: 1.5rem;
	line-height: 1.2;
	color: #0C6BB8;
}

.wp-block-details[open] summary::after {
	content: "\2212";
}

.wp-block-details > summary + * {
	margin-block-start: .75rem;
}

/* ---------------------------------------------------------------------------
 * Manufacturer logo strip.
 * ------------------------------------------------------------------------- */
.lr-logo-strip {
	align-items: center;
}

.lr-logo-strip .wp-block-image {
	margin: 0;
}

.lr-logo-strip .wp-block-image img {
	display: block;
	width: 100%;
	max-width: 180px;
	height: 96px;
	margin-inline: auto;
	object-fit: contain;
}

/* ---------------------------------------------------------------------------
 * Footer.
 * ------------------------------------------------------------------------- */
.lr-site-footer a {
	color: #FFFFFF;
}

.lr-site-footer a:hover,
.lr-site-footer a:focus {
	color: #BFE3F8;
}

.lr-site-footer .wp-block-separator {
	color: rgba(255, 255, 255, .2);
	border-color: rgba(255, 255, 255, .2);
}

.lr-plain-list {
	list-style: none;
	padding-left: 0;
}

/* ---------------------------------------------------------------------------
 * Fault Finder ([lr_fault_finder]): align its colour variables to the brand.
 * ------------------------------------------------------------------------- */
.wp-site-blocks .lrff-finder {
	--lrff-blue: #1B9BE3;
	--lrff-blue-deep: #0C6BB8;
	--lrff-blue-ink: #0A5A9C;
	--lrff-page: #F5F8FB;
	--lrff-ink: #3A3F45;
	--lrff-line: #DCE5EE;
}

/* ---------------------------------------------------------------------------
 * Card grids (1.0.1). WordPress 6.8 ignores the minimum column width when a
 * column count is also set, so the grids set only a minimum width and these
 * classes cap the column count: at most N columns, fewer as space runs out,
 * one column on phones. The class beats the generated layout rule on specificity.
 * ------------------------------------------------------------------------- */
.wp-block-group.lr-grid-2 { --lr-grid-max: 2; --lr-grid-min: 20rem; }
.wp-block-group.lr-grid-3 { --lr-grid-max: 3; --lr-grid-min: 16rem; }
.wp-block-group.lr-grid-4 { --lr-grid-max: 4; --lr-grid-min: 14rem; }
.wp-block-group.lr-grid-5 { --lr-grid-max: 5; --lr-grid-min: 12rem; }
.wp-block-group.lr-grid-6 { --lr-grid-max: 6; --lr-grid-min: 8rem; }

.wp-block-group.lr-grid-2,
.wp-block-group.lr-grid-3,
.wp-block-group.lr-grid-4,
.wp-block-group.lr-grid-5,
.wp-block-group.lr-grid-6 {
	--lr-grid-gap: var(--wp--style--block-gap, 1.25rem);
	grid-template-columns: repeat(
		auto-fit,
		minmax(min(100%, max(var(--lr-grid-min), calc((100% - (var(--lr-grid-max) - 1) * var(--lr-grid-gap)) / var(--lr-grid-max)))), 1fr)
	);
}

.lr-site-footer a {
	overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
 * 1.0.2 — fixes from the Phase 4 staging review (UI UX Pro Max).
 * ------------------------------------------------------------------------- */

/* Links inside the white hero trust card keep the normal link colour
   (the gradient-band link rule above made them white on white). */
.has-brand-gradient-background .is-style-lr-card a:not(.wp-element-button) {
	color: #0C6BB8;
}

.has-brand-gradient-background .is-style-lr-card a:not(.wp-element-button):hover,
.has-brand-gradient-background .is-style-lr-card a:not(.wp-element-button):focus {
	color: #0A5A9C;
}

/* Body text on the brand gradient is set as large text (24px), so white text
   meets WCAG AA contrast across the whole gradient, including its lighter top. */
.has-brand-gradient-background p.has-large-font-size {
	font-size: 1.5rem !important;
	line-height: 1.45;
}

.has-brand-gradient-background .is-style-lr-card p.has-large-font-size {
	font-size: var(--wp--preset--font-size--large) !important;
	line-height: 1.3;
}

/* Outline buttons on the gradient get a translucent deep-blue fill so the
   white label reaches at least 4.5:1 wherever the button sits. */
.has-brand-gradient-background .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
	background-color: rgba(10, 90, 156, 0.55);
}

.has-brand-gradient-background .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover,
.has-brand-gradient-background .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):focus-visible {
	background-color: rgba(10, 90, 156, 0.8);
}

/* Fault Finder: when its section already has a heading, hide the finder's own
   "Solar fault finder" heading so the page doesn't show two in a row. */
.wp-block-group:has(> h2.wp-block-heading) > .lrff-finder .lrff-finder-head > h2 {
	display: none;
}

.wp-block-group:has(> h2.wp-block-heading) > .lrff-finder .lrff-finder-head {
	justify-content: flex-end;
}

/* Narrow text sections (default 760px content width) line up with the left edge
   of the wide sections instead of sitting centred. Centred sections are left alone. */
.wp-block-post-content > .alignfull.is-layout-constrained:not([class*="wp-container-core-group-is-layout-"]):not(:has(> .has-text-align-center)) > :not(.alignfull):not(.alignwide) {
	margin-left: max(0px, calc((100% - var(--wp--style--global--wide-size)) / 2)) !important;
	margin-right: auto !important;
}

/* WhatsApp chat button: hide its text bubble on phones so it doesn't cover page content. */
@media (max-width: 781px) {
	#wa .wa__btn_popup_txt {
		display: none !important;
	}
}