/* =========================================================================
   Warranty registration: template-warranty.php (/warranty-registration/).
   Scoped to .wr, mobile first, min-width queries at 640 / 768 / 900 / 1200.
   The house recipe from docs/superpowers/specs/2026-09-18-support-and-
   content-pages-design.md, renamed, plus the aside panels and the parts of
   Gravity Form 7 that css/product.css does not cover: section headings,
   the progress bar and the Next / Previous buttons of a two-page form.
   ========================================================================= */

.wr {
	--wr-navy: #181d46;      /* Billi Blue */
	--wr-lightblue: #90cdeb; /* primary button on dark, accents */
	--wr-grey: #eaeaea;      /* borders, rules */
	--wr-band-grey: #f5f5f5;
	--wr-band-tint: #f1f5f5; /* Green Grey */
	--wr-text: #000;
	--wr-muted: #75757b;
	--wr-gutter: 20px;

	font-family: var(--font-din);
	color: var(--wr-text);
	line-height: 1.5;
}

@media (min-width: 900px) {
	.wr { --wr-gutter: 40px; }
}

.wr *,
.wr *::before,
.wr *::after { box-sizing: border-box; }

/* framework.css sets a global img { width: 100% }: width must be reset. */
.wr img { max-width: 100%; width: auto; height: auto; display: block; }

.wr-container {
	width: 100%;
	max-width: 1436px;
	margin: 0 auto;
	padding-left: var(--wr-gutter);
	padding-right: var(--wr-gutter);
}


/* ---- Sections ------------------------------------------------------------ */

.wr-section { padding: 48px 0; }

@media (min-width: 900px) {
	.wr-section { padding: 80px 0; }
}

.wr-section--grey { background: var(--wr-band-grey); }
.wr-section--tint { background: var(--wr-band-tint); }

.wr :is(h2, h3) {
	margin-top: 0;
	text-transform: none;
	letter-spacing: normal;
}

.wr .wr-section-heading {
	margin: 0 0 12px;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.18;
	color: var(--wr-navy);
}

.wr-section-intro {
	margin: 0;
	max-width: 66ch;
	font-size: 17px;
	line-height: 1.55;
	color: var(--wr-muted);
}

/* #75757b is under 4.5:1 on the grey and Green Grey bands. */
.wr-section--tint .wr-section-intro,
.wr-section--grey .wr-section-intro { color: #5f5f66; }

.wr-section-head { margin-bottom: 28px; }
.wr-section-head > :last-child { margin-bottom: 0; }

@media (min-width: 900px) {
	.wr .wr-section-heading { font-size: 34px; }
	.wr-section-head { margin-bottom: 40px; }
}


/* ---- Buttons --------------------------------------------------------------
   desktop.css has a global a:hover { opacity: .7 }: every button opts out. */

/* 16px on a 1.5 line with 12px padding: 48px tall, the size the homepage,
   Why Billi, Specify Billi and the sector pages use. */
.wr .wr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 12px 28px;
	border: 0;
	border-radius: 2px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.wr .wr-btn:hover,
.wr .wr-btn:focus-visible { opacity: 1; }

.wr .wr-btn svg {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
}

.wr .wr-btn--navy { background: var(--wr-navy); color: #fff; }

.wr .wr-btn--navy:hover,
.wr .wr-btn--navy:focus-visible {
	background: #fff;
	color: var(--wr-navy);
	box-shadow: inset 0 0 0 1px var(--wr-navy);
}

.wr .wr-btn--light { background: var(--wr-lightblue); color: var(--wr-navy); }

.wr .wr-btn--light:hover,
.wr .wr-btn--light:focus-visible { background: #fff; color: var(--wr-navy); }

.wr .wr-btn--ghost {
	background: transparent;
	color: #fff;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

.wr .wr-btn--ghost:hover,
.wr .wr-btn--ghost:focus-visible {
	background: #fff;
	color: var(--wr-navy);
	box-shadow: none;
}

.wr .wr-btn--outline {
	background: transparent;
	color: var(--wr-navy);
	box-shadow: inset 0 0 0 1px var(--wr-navy);
}

.wr .wr-btn--outline:hover,
.wr .wr-btn--outline:focus-visible { background: var(--wr-navy); color: #fff; }

/* framework.css removes focus outlines sitewide. */
.wr :is(a, button, summary, input, select, textarea):focus-visible {
	outline: 2px solid var(--wr-navy);
	outline-offset: 3px;
}

.wr .wr-hero :is(a, button, summary):focus-visible { outline-color: #fff; }


/* ---- Hero (compact) --------------------------------------------------------
   The title is an <h1>: typography.css gives it DM Serif Display at 400.
   Never set its font-weight or font-family. */

.wr-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-height: 340px;
	background: var(--wr-navy);
	color: #fff;
	overflow: hidden;
}

.wr-hero--compact { min-height: 0; }

.wr-hero__inner {
	width: 100%;
	padding-top: 48px;
	padding-bottom: 48px;
}

.wr-hero__content { max-width: 720px; }

.wr-hero__eyebrow {
	margin: 0 0 12px;
	color: var(--wr-lightblue);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.wr .wr-hero__title {
	margin: 0;
	color: #fff;
	font-size: 34px;
	line-height: 1.12;
}

.wr-hero__intro {
	margin: 16px 0 0;
	max-width: 62ch;
	color: rgba(255, 255, 255, 0.9);
	font-size: 17px;
	line-height: 1.5;
}

.wr-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

.wr-hero__actions:empty { display: none; }

@media (min-width: 900px) {
	.wr-hero__inner { padding-top: 72px; padding-bottom: 72px; }
	.wr-hero--compact .wr-hero__inner { padding-top: 56px; padding-bottom: 56px; }
	.wr .wr-hero__title { font-size: 52px; }
	.wr-hero--compact .wr-hero__title { font-size: 44px; }
	.wr-hero__intro { font-size: 18px; }
}


/* ---- Form aside --------------------------------------------------------------
   Layout, panel and controls come from product.css (.pd-enquiry). */

.wr h2.pd-section-heading { margin-top: 0; }

.wr-panel {
	margin-top: 20px;
	padding: 22px 24px;
	border-radius: 4px;
	background: #fff;
}

.pd-enquiry__lead + .wr-panel,
.pd-section-heading + .wr-panel { margin-top: 28px; }

.wr .wr-panel__title {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wr-navy);
}

.wr-panel__text {
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	color: #5f5f66;
}

.wr-panel__text > :first-child { margin-top: 0; }
.wr-panel__text > :last-child { margin-bottom: 0; }
.wr-panel__text p { margin: 0 0 0.6em; }

.wr-panel__text ul {
	margin: 0 0 0.6em;
	padding-left: 1.15em;
	list-style: disc;
}

.wr-panel__text li { margin: 0 0 0.4em; }

.wr-panel__text li::marker { color: var(--wr-navy); }

.wr .wr-panel__text strong { font-weight: 600; color: var(--wr-text); }

.wr .wr-panel__text a,
.wr .pd-enquiry__alt a {
	color: var(--wr-navy);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.wr .wr-panel__text a:hover,
.wr .pd-enquiry__alt a:hover { opacity: 1; }

.wr .pd-enquiry__fallback { margin: 0; font-size: 16px; }


/* ---- Gravity Form 7 -------------------------------------------------------------
   Two pages: customer details, then installer details. Everything below is
   scoped .wr .pd ... so it outranks product.css (.pd .pd-enquiry__form ...,
   four or five classes) without touching it. */

/* Section headings. product.css hides section fields (on form 33 they repeat
   "Enquire Now"); here they are the step headings, so they come back as h3s
   under the aside's h2. The first one is the "Warranty registration
   assistance" intro, which is the hero intro now, so it stays hidden: it is
   the only section on the form with a description. */
.wr .pd .pd-enquiry__form .gform_wrapper .gform_fields > .gfield--type-section {
	display: block;
	margin: 0;
	padding: 0 0 10px;
	border: 0;
	border-bottom: 1px solid var(--wr-grey);
}

.wr .pd .pd-enquiry__form .gform_wrapper .gform_fields > .gfield--type-section.gfield--has-description { display: none; }

.wr .pd .pd-enquiry__form .gform_wrapper .gsection_title {
	margin: 0;
	padding: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--wr-navy);
	text-transform: none;
	letter-spacing: normal;
}

/* Progress bar: "Step 1 of 2" plus a thin navy bar. The percentage printed
   inside the bar repeats the step count (and the bar is aria-hidden), so it
   is not shown. */
.wr .pd .pd-enquiry__form .gform_wrapper .gf_progressbar_wrapper {
	margin: 0 0 24px;
	padding: 0;
	border: 0;
}

.wr .pd .pd-enquiry__form .gform_wrapper .gf_progressbar_title {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wr-navy);
}

.wr .pd .pd-enquiry__form .gform_wrapper .gf_progressbar {
	height: 6px;
	margin: 0;
	padding: 0;
	border-radius: 3px;
	background: var(--wr-grey);
	overflow: hidden;
}

.wr .pd .pd-enquiry__form .gform_wrapper .gf_progressbar_percentage {
	height: 6px;
	border-radius: 3px;
	background: var(--wr-navy);
	transition: width 0.3s ease;
}

.wr .pd .pd-enquiry__form .gform_wrapper .gf_progressbar_percentage span { display: none; }

/* Field widths. Gravity Forms maps the form's old gf_left_half / gf_right_half
   classes to half width, which pairs the installer fields on page 2 but
   leaves three half-width fields alone on a row on page 1. A half-width field
   with no half-width neighbour takes the full row; browsers without :has()
   keep the half width. The two dates pair up from 640px. */
.wr .pd .pd-enquiry__form .gform_wrapper .gform_fields > .gfield--width-half:not(.gfield--width-half + .gfield--width-half):not(:has(+ .gfield--width-half)) {
	grid-column: 1 / -1;
}

@media (min-width: 640px) {
	.wr .pd .pd-enquiry__form .gform_wrapper .gform_fields > .gfield--type-date { grid-column: span 6; }
}

/* Page footers: Next on page 1; Previous and Submit on page 2. product.css
   styles type="submit" only, and Previous is one of those, so it is set back
   to a secondary outline button here. */
.wr .pd .pd-enquiry__form .gform_wrapper .gform_page_footer {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 28px 0 0;
	padding: 0;
	border: 0;
}

body .wr .pd .pd-enquiry__form .gform_wrapper .gform_page_footer :is(.gform_next_button, .gform_button, .gform_previous_button) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-height: 54px;
	margin: 0;
	padding: 12px 28px;
	border: 0;
	border-radius: 2px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

body .wr .pd .pd-enquiry__form .gform_wrapper .gform_page_footer :is(.gform_next_button, .gform_button) {
	flex: 1 1 auto;
	background: var(--wr-navy);
	color: #fff;
	box-shadow: none;
}

body .wr .pd .pd-enquiry__form .gform_wrapper .gform_page_footer :is(.gform_next_button, .gform_button):hover {
	background: #fff;
	color: var(--wr-navy);
	box-shadow: inset 0 0 0 1px var(--wr-navy);
	opacity: 1;
}

body .wr .pd .pd-enquiry__form .gform_wrapper .gform_page_footer .gform_previous_button {
	flex: 0 0 auto;
	background: #fff;
	color: var(--wr-navy);
	box-shadow: inset 0 0 0 1px var(--wr-navy);
}

body .wr .pd .pd-enquiry__form .gform_wrapper .gform_page_footer .gform_previous_button:hover {
	background: var(--wr-navy);
	color: #fff;
	opacity: 1;
}

body .wr .pd .pd-enquiry__form .gform_wrapper .gform_page_footer :is(.gform_next_button, .gform_button, .gform_previous_button):focus-visible {
	outline: 2px solid var(--wr-navy);
	outline-offset: 2px;
}


/* ---- Cards (closing band) -------------------------------------------------------
   Whole card clickable through ONE stretched link on the title. */

.wr-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
}

@media (min-width: 640px) {
	.wr-grid--2,
	.wr-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
	.wr-grid { gap: 28px; }
	.wr-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* On a phone the cards stack, so they are compact: icon beside the title
   and text, which roughly halves the scroll. From 640px, icon on top. */
.wr-card {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 16px;
	align-items: start;
	min-width: 0;
	padding: 20px;
	border: 1px solid var(--wr-grey);
	border-radius: 4px;
	background: #fff;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

@media (min-width: 640px) {
	.wr-card {
		display: flex;
		flex-direction: column;
		padding: 24px;
	}
}

.wr-card--link:hover {
	border-color: var(--wr-navy);
	box-shadow: 0 6px 24px rgba(24, 29, 70, 0.08);
}

.wr-card__icon {
	grid-row: 1 / span 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 4px;
	background: var(--wr-band-tint);
	color: var(--wr-navy);
}

@media (min-width: 640px) {
	.wr-card__icon { width: 48px; height: 48px; margin-bottom: 16px; }
}

.wr .wr-card__icon svg { width: 26px; height: 26px; }

.wr .wr-card__title {
	align-self: center;
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--wr-navy);
}

@media (min-width: 640px) {
	.wr .wr-card__title { align-self: auto; font-size: 19px; }
}

.wr .wr-card__link {
	color: inherit;
	font-weight: inherit;
	text-decoration: none;
}

.wr .wr-card__link::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 4px;
}

.wr .wr-card__link:hover { opacity: 1; }

.wr-card__text {
	grid-column: 2;
	margin: 4px 0 0;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--wr-muted);
}

@media (min-width: 640px) {
	.wr-card__text { margin-top: 8px; }
}

@supports selector(:has(a)) {
	.wr .wr-card__link:focus-visible { outline: none; }

	.wr .wr-card:has(.wr-card__link:focus-visible) {
		outline: 2px solid var(--wr-navy);
		outline-offset: 3px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wr .wr-btn,
	.wr-card,
	.wr .pd .pd-enquiry__form .gform_wrapper .gf_progressbar_percentage { transition: none; }
}