/*
 * Iva Cleaning - UI/UX layer (19 Oct 2026).
 * Item IDs refer to 02 - Audit/UX Audit 2026-10-19/UX-PLAN.md (U*) and UI Audit 2026-10-19/UI-PLAN.md (V*).
 * Loaded by mu-plugins/iva-site-tweaks.php (1.1.0+). Breakdance prints its stylesheets after this one, so every
 * rule that overrides a Breakdance class starts with `body` to win on specificity, not order.
 * Switch the whole layer off with the option iva_ui_layer_off.
 * Global tokens (button presets, H2/H3 scale, section padding) live in Breakdance > Global Settings, not here.
 */

:root {
	--iva-gold: #c08329;        /* heading gold, 3.2:1 on white: headings 24 px+ and button fills only */
	--iva-gold-dark: #b07520;   /* button gradient end and hover */
	--iva-gold-text: #a06a1c;   /* U2-3 / V1-3: gold text under 24 px on white, the lightest gold at 4.5:1 (4.59);
	                               on cream or tints only for large text (headings 24 px+, or 19 px+ bold) */
	--iva-gold-deep: #8a5a14;   /* small gold text on cream (5.49:1); #a06a1c is 4.26 there */
	--iva-gold-light: #e5ae5e;  /* on black and dark photos only */
	--iva-gold-lead: var(--iva-gold-text); /* V1-3 lead paragraphs (Val, 19 Oct: #8a5a14 too dark) */
}

/* U1-1: floating cluster hidden while the hero is in view (iva-ui.js) or a form field has focus. */
.bde-section-117-137 {
	transition: opacity .2s ease, visibility .2s ease;
}
body.iva-hero-in-view .bde-section-117-137,
body:has(input:focus, select:focus, textarea:focus) .bde-section-117-137 {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* U1-2: room under the last form control so the cluster never sits on it at the end of a form. */
@media (max-width: 767px) {
	.iclp-quote-main,
	.bde-section:has(.bde-div-2023-100, .bde-div-2264-100) > .section-container {
		padding-bottom: 96px;
	}
}

/* U1-3: the /bookings/ hero button jumps to the Amelia widget below the sticky header. */
#book {
	scroll-margin-top: 90px;
}

/* U1-7: the postcode cards carry one field, so the required asterisk adds nothing to the title. */
.bde-form-builder-2023-101 .breakdance-form-field__required,
.bde-form-builder-2264-101 .breakdance-form-field__required {
	display: none;
}

/* U2-4: one visible focus ring for keyboard users; two-tone on buttons so it shows on gold, white and black. */
:focus-visible {
	outline: 2px solid var(--iva-gold);
	outline-offset: 3px;
}
.button-atom:focus-visible,
.iva-fab:focus-visible {
	outline: 2px solid #000;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px #fff;
}

/* U2-2: stats strip labels and figures in black on the gold strip (white on #e5ae5e was 1.99:1). */
body :is(.bde-section-72-247, .bde-section-1012-179, .bde-section-1273-179, .bde-section-15-124) :is(.ee-iconbox-title, .ee-iconbox-text) {
	color: #1a1a1a;
}

/* U2-3: links in running text on light backgrounds: #a06a1c, underlined (4.59:1 on white; Val, 19 Oct).
   Excluded and left as built: dark sections and the photo cards on the service pages (light gold), and the
   end-of-tenancy links (black). Small links on cream and light-grey sections get #8a5a14 below. */
body :is(.bde-rich-text, .bde-text, .bde-f-text, .ee-iconbox-text) a:not(.button-atom):not([class*="-btn"]):not(.iva-eot-link):not(:is(.bde-section-618-100, .bde-section-15-100, .iclp-area-cta, .iclp-hub-cta, .iclp-bk-cta, .iclp-contact-card, .bde-section-117-100, .bde-section-117-179, .iclp-area-alt, .icsl-bk-brief, .bde-text-206-247, .bde-text-210-165, .bde-text-213-112, .bde-text-230-109, .bde-text-230-155, .bde-text-235-109, .bde-text-235-117, .bde-text-187-248, .bde-text-187-254, .bde-text-683-117, .bde-text-877-112, .bde-text-877-117) a) {
	color: var(--iva-gold-text);
	text-decoration: underline;
	text-underline-offset: 2px;
}
body :is(.bde-rich-text, .bde-text, .bde-f-text, .ee-iconbox-text) a:not(.button-atom):not([class*="-btn"]):not(.iva-eot-link):not(:is(.bde-section-618-100, .bde-section-15-100, .iclp-area-cta, .iclp-hub-cta, .iclp-bk-cta, .iclp-contact-card, .bde-section-117-100, .bde-section-117-179, .iclp-area-alt, .icsl-bk-brief, .bde-text-206-247, .bde-text-210-165, .bde-text-213-112, .bde-text-230-109, .bde-text-230-155, .bde-text-235-109, .bde-text-235-117, .bde-text-187-248, .bde-text-187-254, .bde-text-683-117, .bde-text-877-112, .bde-text-877-117) a):hover {
	color: #000;
}
body :is(.iclp-area-alt, .icsl-bk-brief) :is(.bde-rich-text, .bde-text, .bde-f-text) a:not(.button-atom):not([class*="-btn"]) {
	color: var(--iva-gold-deep);
	text-decoration: underline;
	text-underline-offset: 2px;
}
body :is(.iclp-area-alt, .icsl-bk-brief) :is(.bde-rich-text, .bde-text, .bde-f-text) a:not(.button-atom):not([class*="-btn"]):hover {
	color: #000;
}
/* The same on the light-grey sections of the linen and hair & beauty pages (#a06a1c is 4.10 on #f2f2f2). */
body :is(.bde-text-210-165, .bde-text-230-155) a:not(.button-atom) {
	color: var(--iva-gold-deep);
	text-decoration: underline;
	text-underline-offset: 2px;
}
body :is(.bde-text-210-165, .bde-text-230-155) a:not(.button-atom):hover {
	color: #000;
}

/* U2-5: tap targets at phone width. */
@media (max-width: 767px) {
	body .bde-social-icons__icon-wrapper {
		min-width: 48px;
		min-height: 48px;
	}
	body .breakdance-dropdown-toggle {
		min-width: 44px;
		min-height: 44px;
	}
	body :is(.iclp-area-rich, .iclp-bk-notes, .iva-eot) li > a,
	body .iclp-bk-notes-link {
		display: inline-block;
		padding: 8px 0;
	}
	body .bde-section-117-100 .bde-text-link,
	body :is(.iclp-contact-link, .iclp-contact-email, .iva-areas-all, .bde-text-link-618-160) {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
	body .bde-advanced-tabs-15-673 .bde-tabs__tab {
		min-height: 44px;
	}
	body #amelia-container .am-button,
	body .amelia-v2-booking .am-button {
		min-height: 48px;
	}
	body #amelia-container .el-input__wrapper,
	body .amelia-v2-booking .el-input__wrapper,
	body .amelia-v2-booking .el-select__wrapper {
		min-height: 44px;
	}
}

/* U2-6: icon-trio captions in the hero no smaller than 14 px. */
@media (max-width: 767px) {
	body .bde-div-618-106 .ee-iconbox-title {
		font-size: 14px;
	}
}

/* V1-1: one heading scale (global H2 30/24, H3 22/20, Cinzel 700) applied to the page-family classes
   that override it; colour by background: heading gold on white, #a06a1c on cream, light gold on black. */
body :is(.iclp-area-h2, .iclp-hub-h2, .iclp-bk-h2, .iva-eot-h2, .iva-prices-title, .iva-areas-title, .iclp-form-title, .iclp-tc-h2, .iclp-tc-title) {
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--iva-gold);
}
body :is(.iclp-area-cta-h2, .iclp-hub-cta-h2, .iclp-bk-cta-h2) {
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--iva-gold-light);
}
body .iclp-contact-title {
	color: var(--iva-gold-light);
}
body :is(.iclp-area-alt, .iva-eot-alt, .iva-areas, .iclp-side-card) :is(h2, h3, .iclp-area-h2, .iva-eot-h2, .iva-areas-title, .iclp-side-title),
body .bde-heading-20-165 {
	color: var(--iva-gold-text);
}
body .bde-heading-218-125 {
	color: var(--iva-gold);
}
body .bde-heading-15-345 {
	color: var(--iva-gold-light);
}
body :is(.bde-heading-15-492, .bde-heading-206-288) {
	font-weight: 700;
}
body :is(.iva-eot-h3, .iclp-tc-h3) {
	font-size: 22px;
	font-weight: 700;
}
@media (max-width: 767px) {
	body :is(.iclp-area-h2, .iclp-hub-h2, .iclp-bk-h2, .iva-eot-h2, .iva-prices-title, .iva-areas-title, .iclp-form-title, .iclp-tc-h2, .iclp-tc-title, .iclp-area-cta-h2, .iclp-hub-cta-h2, .iclp-bk-cta-h2) {
		font-size: 24px;
	}
	body :is(.iva-eot-h3, .iclp-tc-h3) {
		font-size: 20px;
	}
	/* Builder headings with their own desktop size keep it on a phone; bring them onto the 24 / 20 scale. */
	body :is(h2.bde-heading, h2.bde-f-text) {
		font-size: 24px;
	}
	body :is(h3.bde-heading, h3.bde-f-text) {
		font-size: 20px;
	}
}

/* V1-3: the 22 px gold "Did you know" lead paragraphs on the service pages, and the About tagline, in the
   lightest gold that reaches 4.5:1 on white (Val, 19 Oct: #8a5a14 was too dark). All sit on white sections. */
body :is(.bde-text-218-127, .bde-text-215-134, .bde-text-221-268, .bde-text-228-284, .bde-text-230-200, .bde-text-232-243, .bde-text-235-215, .bde-text-187-341, .bde-text-683-231, .bde-text-877-202, .bde-text-18-254) {
	color: var(--iva-gold-lead);
}

/* Contrast follow-up (Val, 19 Oct): older gold text that missed WCAG AA, moved onto the same two golds.
   Large headings on the light-grey bands (#c08329 was 2.88:1 on #f2f2f2; #a06a1c is 4.10, large text needs 3). */
body :is(.bde-heading-210-163, .bde-heading-218-181, .bde-heading-215-141, .bde-heading-221-215, .bde-heading-228-254, .bde-heading-230-153, .bde-heading-232-250, .bde-heading-235-141, .bde-heading-187-288, .bde-heading-683-146, .bde-heading-877-146, .bde-heading-975-107) {
	color: var(--iva-gold-text);
}
/* Small gold text on white (#c08329 was 3.22:1; 18 px bold and 22 px semi-bold are below the large-text size):
   FAQ question titles, image-box titles, postcode-card labels, area-card titles and links, post titles in
   the news and latest-posts lists, the two About lines, bold text in the terms. */
body :is(.section-container, .bde-f-container) :is(.bde-faq__title, .ee-imagebox-title, .bde-f-text-1882-101, .bde-loop-item__title-link, .bde-text-18-252, .bde-text-18-253),
body :is(.bde-form-builder-2023-101, .bde-form-builder-2264-101) .breakdance-form-field__label,
body .iclp-acard-link,
body .iclp-tc-sec strong {
	color: var(--iva-gold-text);
}
body :is(.section-container, .bde-f-container) :is(.iclp-acard-link, .bde-loop-item__title-link):hover {
	color: #000;
}
/* Small gold text on cream and light grey: the quote page's four trust titles and the active /news/ filter tab. */
body :is(.bde-f-text-1239-136, .bde-f-text-1239-139, .bde-f-text-1239-142, .bde-f-text-1239-145),
body .bde-tabs__tab.is-active .bde-tabs__tab-title {
	color: var(--iva-gold-deep);
}
/* The post lists on /news/ and under each post: post titles in #a06a1c, active filter tab in #8a5a14 (on grey).
   Breakdance styles these with four-class tab rules and a two-class title rule, hence the long selectors. */
body :is(.bde-post-list-300-122, .bde-post-list-975-109) .bde-tabs__tab.is-active .bde-tabs__tab-title {
	color: var(--iva-gold-deep);
}
body :is(.bde-post-list-300-122, .bde-post-list-975-109) .ee-post-title a {
	color: var(--iva-gold-text);
}
body :is(.bde-post-list-300-122, .bde-post-list-975-109) .ee-post-title a:hover {
	color: #000;
}
/* Cookie policy body links (light gold on white was 1.99:1). */
body .bde-code-block-13-101 a {
	color: var(--iva-gold-text);
	text-decoration: underline;
	text-underline-offset: 2px;
}
body .bde-code-block-13-101 a:hover {
	color: #000;
}

/* V1-4: running text no wider than about 68 characters on desktop (blog posts, FAQ answers, area and legal pages). */
body :is(.bde-rich-text-975-101, .iclp-area-rich, .iclp-tc-sec) :is(p, ul, ol, blockquote),
body :is(.bde-faq__answer, .iclp-area-lead, .iclp-hub-lead, .iclp-bk-lead, .iclp-tc-lead, .iclp-tc-p, .iva-eot-a, .bde-text-15-346) {
	max-width: min(68ch, 100%);
}
body :is(.bde-text-206-240, .bde-text-218-133) {
	max-width: min(68ch, 100%);
	margin-left: auto;
	margin-right: auto;
}

/* V2-1: three button variants, one shape. Primary (gradient, white), Secondary (2 px outline), Inverse (black).
   The global presets carry Primary and Secondary; these rules move the page-family buttons onto them. */
body :is(.iclp-area-btn, .iclp-hub-btn, .iclp-bk-btn, .iclp-area-btn-alt, .iclp-hub-btn-alt, .iclp-bk-btn-alt) {
	font-family: 'Cinzel', serif;
	font-weight: 600;
	font-size: 18px;
	letter-spacing: 1px;
	text-transform: uppercase;
	line-height: 1;
	min-height: 48px;
	padding: 0 24px;
	border-radius: 4px;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
body :is(.iclp-area-btn, .iclp-hub-btn, .iclp-bk-btn) {
	color: #fff;
	background: linear-gradient(90deg, var(--iva-gold) 0%, var(--iva-gold-dark) 100%);
	border: 0;
}
body :is(.iclp-area-btn, .iclp-hub-btn, .iclp-bk-btn):hover {
	color: #fff;
	background: var(--iva-gold-dark);
}
body :is(.iclp-area-btn-alt, .iclp-hub-btn-alt, .iclp-bk-btn-alt) {
	color: #fff;
	background: transparent;
	border: 2px solid #fff;
}
body :is(.iclp-area-btn-alt, .iclp-hub-btn-alt, .iclp-bk-btn-alt):hover {
	color: #fff;
	background: var(--iva-gold-dark);
	border-color: var(--iva-gold-dark);
}
/* Postcode-card submit buttons (U3-2) and the blog "Read more" link (small Secondary on light). */
body :is(.bde-form-builder-2023-101, .bde-form-builder-2264-101) .breakdance-form-button__submit {
	font-family: 'Cinzel', serif;
	font-weight: 600;
	font-size: 18px;
	letter-spacing: 1px;
	text-transform: uppercase;
	min-height: 48px;
	padding: 0 24px;
	border: 0;
	border-radius: 4px;
	color: #fff;
	background: linear-gradient(90deg, var(--iva-gold) 0%, var(--iva-gold-dark) 100%);
}
body :is(.bde-form-builder-2023-101, .bde-form-builder-2264-101) .breakdance-form-button__submit:hover {
	color: #fff;
	background: var(--iva-gold-dark);
}
body .bde-loop-item .button-atom,
body .bde-button-1932-106 .button-atom {
	font-family: 'Cinzel', serif;
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 1px;
	text-transform: uppercase;
	min-height: 44px;
	padding: 0 20px;
	display: inline-flex;
	align-items: center;
	border: 2px solid var(--iva-gold-text);
	border-radius: 4px;
	color: var(--iva-gold-text);
	background: transparent;
	transition: background-color .2s ease, color .2s ease;
}
body .bde-loop-item .button-atom:hover,
body .bde-button-1932-106 .button-atom:hover {
	color: #fff;
	background: var(--iva-gold-text);
}
@media (max-width: 479px) {
	body :is(.iclp-area-btn, .iclp-hub-btn, .iclp-bk-btn, .iclp-area-btn-alt, .iclp-hub-btn-alt, .iclp-bk-btn-alt),
	body :is(.bde-form-builder-2023-101, .bde-form-builder-2264-101) .breakdance-form-button__submit {
		font-size: 16px;
	}
}

/* V2-2: the closing gold band ("Ready to book a cleaner?" and its copies): Inverse + Secondary on gold,
   side by side and the same height, left edges on the paragraph; stacked full width on a phone. */
body [data-iva="band-cta"] {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: flex-start;
	align-items: stretch;
}
body [data-iva="band-cta"] > .bde-button {
	margin: 0;
}
body [data-iva="band-cta"] .button-atom {
	font-family: 'Cinzel', serif;
	font-weight: 600;
	font-size: 18px;
	letter-spacing: 1px;
	text-transform: uppercase;
	line-height: 1;
	min-height: 48px;
	padding: 0 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	border: 2px solid #000;
	transition: background-color .2s ease, color .2s ease;
}
body [data-iva="band-cta"] > .bde-button:first-child .button-atom {
	color: #fff;
	background: #000;
}
body [data-iva="band-cta"] > .bde-button:first-child .button-atom:hover {
	color: #fff;
	background: #222;
	border-color: #222;
}
body [data-iva="band-cta"] > .bde-button:not(:first-child) .button-atom {
	color: #000;
	background: transparent;
}
body [data-iva="band-cta"] > .bde-button:not(:first-child) .button-atom:hover {
	color: #fff;
	background: #000;
}
@media (max-width: 767px) {
	body [data-iva="band-cta"] {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}
	body [data-iva="band-cta"] > .bde-button,
	body [data-iva="band-cta"] .button-atom {
		width: 100%;
	}
	body [data-iva="band-cta"] .button-atom {
		font-size: 16px;
	}
}

/* V3-2: three radii (4 / 8 / 50 %) and two shadows. */
body :is(.iclp-acard, .bde-loop-item__wrap, .bde-div-2023-100, .bde-div-2264-100, .bde-fancy-testimonial, .iva-eot-card, .iclp-side-card, .iclp-contact-card, .iclp-form-panel) {
	border-radius: 8px;
}
body :is(.iclp-acard, .bde-loop-item__wrap) {
	box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
}
body :is(.bde-div-2023-100, .bde-div-2264-100, .bde-fancy-testimonial) {
	box-shadow: 0 12px 24px rgba(0, 0, 0, .12);
}

/* V3-3: the two five-line paragraphs on the home page read left-aligned. */
body :is(.bde-text-15-465, .bde-text-15-460) {
	text-align: left;
}

/* U4-7: before / after tabs show the selected one by fill and weight, not colour alone. */
body .bde-advanced-tabs-15-673 .bde-tabs__tab {
	font-weight: 400;
	color: #000;
}
body .bde-advanced-tabs-15-673 .bde-tabs__tab.is-active {
	font-weight: 700;
	color: #000;
	background: var(--iva-gold);
	box-shadow: inset 0 -3px 0 #000;
}

/* U3-5: the About page pull quote reads as a quote, not a six-line block of capitals. */
body .bde-f-text-18-256 {
	color: var(--iva-gold-text);
	font-family: 'Open Sans', sans-serif;
	font-style: italic;
	font-size: 20px;
	line-height: 1.6;
	letter-spacing: 0;
	text-transform: none;
}

/* U3-6: area-card excerpts end on a whole line instead of mid-word. */
body .bde-f-text-1882-102 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

/* U4-3: cookie banner on a phone: Accept and Deny side by side (identical), preferences as a text link,
   shorter message; about 220 px tall instead of 292. Complianz sets these with high specificity, hence !important. */
@media (max-width: 767px) {
	body .cmplz-cookiebanner {
		padding: 10px 16px !important;
		row-gap: 6px !important;
	}
	body .cmplz-cookiebanner .cmplz-message {
		font-size: 13px;
		line-height: 1.4;
	}
	body .cmplz-cookiebanner .cmplz-buttons {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 6px !important;
	}
	body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
		width: 100%;
		min-height: 44px;
	}
	body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn:is(.cmplz-view-preferences, .cmplz-save-preferences) {
		grid-column: 1 / -1;
		min-height: 32px;
		height: 32px;
		padding: 0;
		border: 0 !important;
		background: transparent !important;
		text-decoration: underline;
	}
	body .cmplz-cookiebanner .cmplz-documents {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 4px 16px;
		margin: 0;
	}
}

/* U4-4: on a phone the breadcrumb drops its last item, which repeats the H1 just below it.
   The BreadcrumbList JSON-LD is generated separately and keeps every item. */
@media (max-width: 767px) {
	body .rank-math-breadcrumb p > .last,
	body .rank-math-breadcrumb p > .separator:nth-last-child(2) {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bde-section-117-137 {
		transition: none;
	}
	/* U4-8: the twelve slow background-overlay animations on the home page stop for people who ask for less motion. */
	.section-background-overlay {
		animation: none !important;
	}
}