/*
 * SPDX-License-Identifier: GPL-3.0-or-later
 * SPDX-FileCopyrightText: 2026 Marcus Quinn
 * Additional terms (GPL-3.0 section 7(b)): ATTRIBUTION.txt
 * Provenance: wpas-2bec2bd6b77c93d7. Copies, even of part, keep these lines.
 */

/*
 * The site design: what the Kadence Customizer cannot reach (moved from the
 * site's psd-site-design.php mu-plugin, wpallstars/propertyservicesdirectory#70).
 *
 * Kadence's Customizer owns the buttons, images and scroll-to-top radius.
 * Fluent Forms, SEO Pro Directory, Ultimate Multisite, WooCommerce's account
 * pages and the Kadence Pro modal draw their own controls; these rules give
 * them the same radius and a 52px minimum control height, using Kadence's
 * palette variables so light and dark modes both follow the Customizer. Page
 * composition stays in Kadence blocks; nothing here lays out a page.
 *
 * Loaded after the theme's and plugins' styles on the page, and in the block
 * editor's canvas so block previews look as they do on the page
 * (PSDTHEME_Site_Design). Temporary rules name the upstream fix that
 * replaces them. File names in the comments (psd-site-forms.php,
 * scripts/build-regional-pages.py and so on) are the site repository's.
 */

:root {
	--psd-radius: 8px;
	--psd-control-height: 52px;
	--spd-radius: var(--psd-radius);
}

/* SEO Pro Directory archive bar: one height and radius for every control.
   Kadence's input[type=search] rule otherwise wins over the plugin's (3px,
   51px) while the selects grow to 56px and the button stays 48px with
   smaller text. Upstream: wpallstars/seoprodirectory directory.css. */
.spd-directory-filters .spd-directory-filter input,
.spd-directory-filters .spd-directory-filter select,
.spd-directory-filters .spd-directory-button {
	box-sizing: border-box;
	height: var(--psd-control-height);
	min-height: var(--psd-control-height);
	border-radius: var(--psd-radius);
}
.spd-directory-filters .spd-directory-filter input {
	padding: 0 0.8rem;
	border-color: var(--spd-border);
	background: var(--spd-surface);
	color: var(--spd-ink);
}
.spd-directory-filters .spd-directory-button {
	padding: 0 1.5rem;
	font-size: 18px;
	font-weight: 700;
}
.spd-directory-button,
.spd-directory-empty-reset .wp-block-button__link {
	border-radius: var(--psd-radius);
}
/* The filter panel has no outline: the plugin's 1px white (22%) border is
   lost on the light panel but draws a grey line round the dark one. The
   colour goes, the width stays, so nothing moves. */
.spd-directory-filters {
	border-color: transparent;
	border-radius: var(--psd-radius) var(--psd-radius) 0 0;
}

/* Button hover: the action hover fill only. Kadence Advanced Buttons keep
   their resting border (the indigo or heading colour) around the hover fill,
   which reads as a second colour ring; it takes the fill instead (a
   transparent border shows the button's own background). Kadence gives :focus
   the hover look, so it follows too. Core Search (the homepage hero) has no
   hover of its own: it takes the same fill as every other action. */
body .wp-block-kadence-advancedbtn .kb-button:hover,
body .wp-block-kadence-advancedbtn .kb-button:focus {
	border-color: transparent;
}
body .wp-block-search .wp-block-search__button {
	transition: background-color 0.2s ease, color 0.2s ease;
}
body .wp-block-search .wp-block-search__button:hover,
body .wp-block-search .wp-block-search__button:focus-visible {
	background-color: var(--global-palette2) !important;
	color: #fff !important;
}
body .wp-block-search .wp-block-search__button:focus-visible {
	outline: 3px solid var(--global-palette3);
	outline-offset: 2px;
}

/* Listing-card service tags inside page content: Kadence's .single-content ul
   indents them 40px. Upstream: wpallstars/seoprodirectory#107 (PR #108). */
.entry-content ul.spd-directory-tags {
	padding-left: 0;
	margin-left: 0;
}

/* A form on the page sits in a panel ([psd_form], psd-site-forms.php). */
.psd-form-panel {
	box-sizing: border-box;
	padding: clamp(24px, 4vw, 40px);
	border: 1px solid var(--global-palette7);
	border-radius: var(--psd-radius);
	background: var(--global-palette9);
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
}

/* Fluent Forms: theme colours (light and dark), radius, 48px controls and a
   readable consent checkbox. Fluent's own .ff-default rules use fixed white
   fields and a fixed blue button. */
body .fluentform .ff-el-input--label label {
	color: var(--global-palette3);
	font-weight: 600;
}
body .fluentform .ff-el-form-control {
	min-height: 48px;
	border: 1px solid var(--global-gray-400, #cbd5e0);
	border-radius: var(--psd-radius);
	background-color: var(--global-palette9);
	color: var(--global-palette3);
}
body .fluentform .ff-el-form-control:focus {
	border-color: var(--global-palette3);
	background-color: var(--global-palette9);
	color: var(--global-palette3);
	box-shadow: 0 0 0 1px var(--global-palette3);
}
body .fluentform textarea.ff-el-form-control {
	min-height: 120px;
}
/* A field's tip under it: at the site's smallest size (18px; Fluent's own is
   12px), in the theme's muted text colour (Fluent's fixed grey is 2.9:1 on
   white and does not follow dark mode). */
body .fluentform .ff-el-help-message {
	color: var(--global-palette5);
	font-size: 18px;
	line-height: 1.5;
}
body .fluentform .ff-el-form-check-input {
	width: 20px;
	height: 20px;
	margin-top: 0.15em;
	accent-color: var(--global-palette1);
}
/* Choices: 10px between the box and its words, and a long label wraps under
   its own words, not under the box. Fluent's label holds the input, a space
   (the only gap, 5px) and a span. The consent checkbox is a two-cell table
   whose first cell is exactly as wide as the 20px box, so its words touched
   the box. The box is centred on the first line (1lh), or 0.3em lower without
   lh support. */
body .fluentform .ff-el-form-check:not(.ff-el-tc) > .ff-el-form-check-label {
	display: inline-flex;
	align-items: flex-start;
	gap: 10px;
}
body .fluentform .ff-el-form-check:not(.ff-el-tc) > .ff-el-form-check-label > .ff-el-form-check-input {
	flex: none;
	line-height: inherit;
	margin-top: 0.3em;
	margin-top: calc((1lh - 20px) / 2);
}
body .fluentform .ff-el-tc label.ff_tc_label > span {
	width: 30px;
}
/* The block editor's canvas, so a form's preview matches the page. The
   canvas loads WordPress's admin forms stylesheet, which the page does not:
   14px fields, WordPress's own checkboxes and radio buttons, and labels
   aligned to the middle of the line. It also loads
   Fluent's stylesheet before this one, where the page loads it after, so the
   consent box's margin is Fluent's 0 there. Kadence spaces a form in the
   content only on the page. */
.editor-styles-wrapper .fluentform > form {
	margin-bottom: var(--global-md-spacing, 2rem);
}
.editor-styles-wrapper .fluentform .ff-el-form-control {
	font-size: inherit;
}
.editor-styles-wrapper .fluentform label {
	vertical-align: baseline;
}
.editor-styles-wrapper .fluentform .ff-el-form-check-input {
	appearance: auto;
	margin: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}
.editor-styles-wrapper .fluentform .ff-el-form-check-input:checked::before {
	content: none;
}
/* Long choice lists (six or more options) in two columns where there is room,
   so a step's question and its Next button fit one screen. The 6th child must
   itself be an option, so a shorter list plus its error message never matches.
   Fluent's "Other" text box spans both columns. */
@media (min-width: 600px) {
	body .fluentform .ff-el-input--content:has(> .ff-el-form-check:nth-child(6)) {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 24px;
	}
	body .fluentform .ff-el-input--content:has(> .ff-el-form-check:nth-child(6)) > :not(.ff-el-form-check) {
		grid-column: 1 / -1;
	}
}
/* A missing answer: the message below the options says so; the options keep
   their normal colour instead of all turning red (Fluent's default). */
body .fluentform .ff-el-is-error .ff-el-form-check-label,
body .fluentform .ff-el-is-error .ff-el-form-check-label span {
	color: var(--global-palette4);
}
/* Filled actions (Submit, Next): the action colours with an explicit white
   label in both palettes (DESIGN.md); Kadence's button-text token turns dark
   slate in dark mode. Previous is an outline action. */
body .fluentform .ff-btn-submit:not(.ff_btn_no_style),
body .fluentform .ff-btn-next:not(.ff_btn_no_style),
body .fluentform .ff-btn-prev:not(.ff_btn_no_style) {
	min-height: 48px;
	padding: 12px 28px;
	border: 1px solid var(--global-palette1);
	border-radius: var(--psd-radius);
	background-color: var(--global-palette1);
	color: #fff;
	font-size: 18px;
	font-weight: 600;
	opacity: 1;
}
body .fluentform .ff-btn-submit:not(.ff_btn_no_style):hover,
body .fluentform .ff-btn-submit:not(.ff_btn_no_style):focus-visible,
body .fluentform .ff-btn-next:not(.ff_btn_no_style):hover,
body .fluentform .ff-btn-next:not(.ff_btn_no_style):focus-visible {
	border-color: var(--global-palette2);
	background-color: var(--global-palette2);
	color: #fff;
	opacity: 1;
}
body .fluentform .ff-btn-prev:not(.ff_btn_no_style) {
	border-color: var(--global-palette3);
	background-color: transparent;
	color: var(--global-palette3);
}
body .fluentform .ff-btn-prev:not(.ff_btn_no_style):hover,
body .fluentform .ff-btn-prev:not(.ff_btn_no_style):focus-visible {
	border-color: var(--global-palette3);
	background-color: var(--global-palette8);
	color: var(--global-palette3);
	opacity: 1;
}
body .fluentform .ff-btn:focus-visible {
	outline: 3px solid var(--global-palette3);
	outline-offset: 2px;
}

/* Multi-step forms: numbered squares at the site radius, a quiet connector,
   the action colour for the current and completed steps. */
body .fluentform .ff-step-titles li {
	color: var(--global-palette5);
	font-size: 16px;
	line-height: 1.35;
}
body .fluentform .ff-step-titles li:before {
	width: 28px;
	margin-bottom: 6px;
	border: 1px solid var(--global-palette7);
	border-radius: var(--psd-radius);
	background: var(--global-palette9);
	color: var(--global-palette4);
	font-size: 16px;
	font-weight: 700;
	line-height: 26px;
}
body .fluentform .ff-step-titles li:after {
	top: 13px;
	background: var(--global-palette7);
}
body .fluentform .ff-step-titles li.ff_active,
body .fluentform .ff-step-titles li.ff_completed {
	color: var(--global-palette3);
}
body .fluentform .ff-step-titles li.ff_active {
	font-weight: 600;
}
body .fluentform .ff-step-titles li.ff_active:before,
body .fluentform .ff-step-titles li.ff_completed:before {
	border-color: var(--global-palette1);
	background: var(--global-palette1);
	color: #fff;
}
body .fluentform .ff-step-titles li.ff_active:after,
body .fluentform .ff-step-titles li.ff_completed:after {
	background: var(--global-palette1);
}

/* A form in a Kadence Pro modal ([psd_form_modal], psd-site-forms.php): the
   block's own markup, script and stylesheet; the panel look comes from here.
   A multi-step form's panel hangs from near the top rather than sitting
   centred, so it grows downwards: the step bar and the field in use stay put
   when a step or the open services list changes its height. A one-page form
   (the listing request, taller than the screen) stays centred with the most
   room. Without :has() every panel stays centred. */
.psd-form-modal {
	--psd-modal-gap: 20px;
	--psd-modal-top: var(--psd-modal-gap);
}
.psd-form-modal:has(.ff-step-container) {
	--psd-modal-top: max(var(--psd-modal-gap), 8vh);
}
.psd-form-modal .kt-modal-overlay {
	background: rgba(15, 23, 42, 0.62);
}
.psd-form-modal:has(.ff-step-container) .kt-modal-overlay {
	align-items: flex-start;
}
.psd-form-modal .kt-modal-container {
	max-width: 640px;
	margin: var(--psd-modal-top) var(--psd-modal-gap) var(--psd-modal-gap);
	max-height: calc(100vh - var(--psd-modal-top) - var(--psd-modal-gap));
	max-height: calc(100dvh - var(--psd-modal-top) - var(--psd-modal-gap));
	padding: 40px;
	border-radius: var(--psd-radius);
	background-color: var(--global-palette9);
	color: var(--global-palette4);
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
	overscroll-behavior: contain;
}
.psd-form-modal .kt-modal-overlay .kt-modal-close {
	top: 10px;
	right: 10px;
	width: 44px;
	height: 44px;
	border-radius: var(--psd-radius);
	color: var(--global-palette4);
}
.psd-form-modal .kt-modal-overlay .kt-modal-close:hover {
	background: var(--global-palette8);
	color: var(--global-palette3);
}
.psd-form-modal .kt-modal-overlay .kt-modal-close:focus-visible {
	outline: 3px solid var(--global-palette3);
	outline-offset: 0;
}
.psd-form-modal-title {
	margin: 0 48px 8px 0;
	color: var(--global-palette3);
	font-size: 26px;
	line-height: 1.25;
}
.psd-form-modal-intro {
	margin: 0 0 24px;
	color: var(--global-palette5);
}
@media (max-width: 767px) {
	.psd-form-modal {
		--psd-modal-gap: 12px;
	}
	.psd-form-modal .kt-modal-container {
		padding: 28px 20px 24px;
	}
	.psd-form-modal-title {
		font-size: 22px;
	}
}
/* The modal script closes only when its animation ends: keep an animation. */
@media (prefers-reduced-motion: reduce) {
	.psd-form-modal .kt-modal-container {
		animation-duration: 1ms !important;
	}
}

/* Login / Register (Kadence Pro's header account modal, #login-drawer;
   owner approval 21 October 2026): a centred panel like the form modals,
   with a title, fields that show their name inside (psd-site-design's login
   script), a full-width action button and the X close in the panel (moved
   there by the script; it keeps Kadence's toggle). Kadence draws the modal
   as a full-screen layer holding a 350px box: the layer dims the page, the
   box is the panel. */
#login-drawer.popup-drawer .drawer-inner {
	max-width: none;
	background: rgba(15, 23, 42, 0.6);
	box-shadow: none;
}
#login-drawer.popup-drawer .drawer-inner .drawer-content {
	padding: 12px;
}
#login-drawer.popup-drawer .drawer-content_inner.widget_login_form_inner {
	position: relative;
	box-sizing: border-box;
	max-width: 440px;
	max-height: calc(100vh - 24px);
	max-height: calc(100dvh - 24px);
	overflow-y: auto;
	padding: 40px;
	border-radius: var(--psd-radius);
	background: var(--global-palette9);
	color: var(--global-palette4);
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
	overscroll-behavior: contain;
}
#login-drawer.popup-drawer .widget_login_form_inner > .login-toggle-close {
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--psd-radius);
	background: transparent;
	color: var(--global-palette4);
	box-shadow: none;
}
#login-drawer.popup-drawer .widget_login_form_inner > .login-toggle-close:hover {
	background: var(--global-palette8);
	color: var(--global-palette3);
}
#login-drawer.popup-drawer .widget_login_form_inner > .login-toggle-close:focus-visible {
	outline: 3px solid var(--global-palette3);
	outline-offset: 0;
}
/* Sign up swaps into the same panel (SEO Pro Directory's email-confirmed
   sign-up, .spd-signup; GH#171, owner review 24 October 2026), so it takes
   the login form's title, spacing, field, tick box, button and switch link
   below: moving between Log in and Sign up does not change the panel. */
#login-drawer .psd-login-title,
#login-drawer .spd-signup__title {
	margin: 0 48px 8px 0;
	color: var(--global-palette3);
	font-size: 26px;
	line-height: 1.25;
}
/* Kadence spaces the box's paragraphs with #login-drawer
   .widget_login_form_inner p (1,2,1). */
#login-drawer.popup-drawer .widget_login_form_inner .psd-login-intro,
#login-drawer.popup-drawer .widget_login_form_inner .spd-signup__intro {
	margin: 0 0 24px;
	color: var(--global-palette5);
}
#login-drawer #loginform .login-remember label {
	font-size: 18px;
}
#login-drawer #loginform p,
#login-drawer.popup-drawer .widget_login_form_inner .spd-signup__form p {
	margin: 0 0 16px;
}
/* WooCommerce's privacy text: secondary, like the intro. */
#login-drawer.popup-drawer .widget_login_form_inner .spd-signup__form .woocommerce-privacy-policy-text p {
	color: var(--global-palette5);
	line-height: 1.5;
}
#login-drawer .spd-signup .spd-newsletter-optin .woocommerce-form__label-for-checkbox {
	display: inline-flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0;
	color: var(--global-palette4);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
}
#login-drawer .spd-signup .spd-newsletter-optin input[type="checkbox"] {
	flex: none;
	width: 20px;
	height: 20px;
	margin: calc((1.5em - 20px) / 2) 0 0;
	accent-color: var(--global-palette1);
}
#login-drawer.popup-drawer .widget_login_form_inner .spd-signup__switch {
	margin: 24px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--global-palette7);
	color: var(--global-palette4);
	font-size: 18px;
	text-align: center;
}
#login-drawer.popup-drawer .widget_login_form_inner .spd-signup__login {
	color: var(--global-palette-highlight);
	font-weight: 600;
	white-space: nowrap;
}
#login-drawer #loginform .psd-placeheld > label:not(:has(input)) {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
#login-drawer #loginform input.input,
#login-drawer .spd-signup__form input.input {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: 10px 15px;
	border: 1px solid var(--global-palette7);
	border-radius: var(--psd-radius);
	background: var(--global-palette9);
	color: var(--global-palette3);
	font-size: 18px;
}
#login-drawer #loginform input.input::placeholder,
#login-drawer .spd-signup__form input.input::placeholder {
	color: var(--global-palette5);
	opacity: 1;
}
#login-drawer #loginform input.input:focus,
#login-drawer .spd-signup__form input.input:focus {
	border-color: var(--global-palette1);
	outline: 2px solid var(--global-palette1);
	outline-offset: 0;
}
#login-drawer #loginform .login-remember label {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	color: var(--global-palette4);
}
/* The site's 20px tick box, like Sign up's newsletter box. */
#login-drawer #loginform .login-remember input[type="checkbox"] {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--global-palette1);
}
#login-drawer #loginform .login-submit .button,
#login-drawer .spd-signup__submit .button {
	width: 100%;
	min-height: 48px;
	border: 0;
	border-radius: var(--psd-radius);
	background: var(--global-palette1);
	color: #fff;
	font-size: 18px;
	font-weight: 600;
}
#login-drawer #loginform .login-submit .button:hover,
#login-drawer #loginform .login-submit .button:focus-visible,
#login-drawer .spd-signup__submit .button:hover,
#login-drawer .spd-signup__submit .button:focus-visible {
	background: var(--global-palette2);
	color: #fff;
}
#login-drawer .lost_password {
	margin: 0;
	text-align: center;
}
#login-drawer.popup-drawer .lost_password a {
	color: var(--global-palette-highlight);
}
#login-drawer .lost_password small {
	font-size: 18px;
}
#login-drawer .register-divider {
	margin: 24px 0 16px;
	border: 0;
	border-top: 1px solid var(--global-palette7);
}
#login-drawer .register-field {
	margin: 0;
	text-align: center;
	color: var(--global-palette4);
	font-size: 18px;
}
#login-drawer .register-link {
	font-weight: 600;
	white-space: nowrap;
}
@media (max-width: 767px) {
	#login-drawer.popup-drawer .drawer-inner {
		padding: 28px 20px 24px;
	}
	#login-drawer .psd-login-title,
	#login-drawer .spd-signup__title {
		font-size: 22px;
	}
}

/* Searchable multi-select (Fluent's Choices.js; the regional request's
   services): the field looks like the other controls, chosen services are
   chips in the action colour with a white label, and the open list uses the
   surface colours, so both palettes follow. 16px typing avoids iOS zoom. */
body .fluentform .frm-fluent-form .choices {
	margin-bottom: 0;
	font-size: inherit;
}
/* Fluent's own rule here is .frm-fluent-form .choices[data-type*=...] .choices__inner. */
body .fluentform .frm-fluent-form .choices[data-type] .choices__inner {
	box-sizing: border-box;
	min-height: 48px;
	padding: 5px 15px;
	border: 1px solid var(--global-palette7, #cbd5e0);
	border-radius: var(--psd-radius);
	background-color: var(--global-palette9);
	color: var(--global-palette3);
	font-size: inherit;
}
/* The placeholder lines up with the other fields' (padding 15px, the
   form's text size): the list and its typing box add no inset of their own. */
body .fluentform .frm-fluent-form .choices__inner > .choices__list--multiple {
	padding-left: 0;
}
body .fluentform .frm-fluent-form .choices[data-type*="select-multiple"] .choices__inner > .choices__input {
	margin-left: 0;
	padding-left: 0;
}
body .fluentform .frm-fluent-form .choices.is-focused .choices__inner,
body .fluentform .frm-fluent-form .choices.is-open .choices__inner {
	border-color: var(--global-palette3);
	box-shadow: 0 0 0 1px var(--global-palette3);
}
body .fluentform .frm-fluent-form .choices[data-type] .choices__input {
	background-color: transparent;
	color: var(--global-palette3);
	font-size: max(16px, 1em);
}
/* Name fields side by side (first/last) whose labels are hidden: Fluent
   bottom-aligns the cells for labels of different heights, so an error
   under one field pushed its neighbour down. Without labels, top-align. */
body .fluentform .ff-t-container:not(:has(.ff-el-group:not(.ff-el-form-hide_label))) > .ff-t-cell {
	justify-content: flex-start;
}
/* A dropdown still on its placeholder ("Your role") reads as a placeholder,
   in the same faded colour as the typed fields' (SEO Pro Stack's Fluent
   Forms colours), not as a chosen value. */
body .fluentform select.ff-el-form-control:has(> option[value=""]:checked) {
	color: color-mix(in srgb, var(--global-palette4) 75%, var(--global-palette9));
}
body .fluentform select.ff-el-form-control option {
	color: var(--global-palette3);
}
body .fluentform .frm-fluent-form .choices__list--multiple .choices__item {
	border: 1px solid var(--global-palette1);
	border-radius: var(--psd-radius);
	background-color: var(--global-palette1);
	color: #fff;
	font-size: 16px;
	font-weight: 600;
}
body .fluentform .frm-fluent-form .choices[data-type*="select-multiple"] .choices__button {
	border-left-color: rgba(255, 255, 255, 0.6);
}
body .fluentform .frm-fluent-form .choices__list--dropdown,
body .fluentform .frm-fluent-form .choices__list[aria-expanded] {
	z-index: 3;
	border-color: var(--global-palette3);
	border-radius: 0 0 var(--psd-radius) var(--psd-radius);
	background-color: var(--global-palette9);
	color: var(--global-palette3);
}
body .fluentform .frm-fluent-form .choices__list--dropdown .choices__item,
body .fluentform .frm-fluent-form .choices__list[aria-expanded] .choices__item {
	font-size: 18px;
}
body .fluentform .frm-fluent-form .choices__list--dropdown .choices__item--selectable.is-highlighted,
body .fluentform .frm-fluent-form .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
	background-color: var(--global-palette8);
}
/* In a form modal the open list takes room in the panel instead of floating
   over it. Fluent's step wrappers hide overflow (for the step slide), which
   cut a floating list to its first two services; in the flow the panel grows
   by the list's height and Next sits below it. Choices' flip-above-the-field
   placement does not apply in the flow, so the list always opens below. */
.psd-form-modal .fluentform .choices .choices__list--dropdown.is-active,
.psd-form-modal .fluentform .choices .choices__list[aria-expanded].is-active {
	position: relative;
	top: auto;
	bottom: auto;
	margin: -1px 0 0;
	border-radius: 0 0 var(--psd-radius) var(--psd-radius);
}
.psd-form-modal .fluentform .choices.is-open .choices__inner {
	border-radius: var(--psd-radius) var(--psd-radius) 0 0;
}

/* The request's last step (scripts/build-regional-pages.py request_review):
   the answers to check before sending, label beside value, stacked on
   phones. Empty answers to hidden questions take no room. */
body .fluentform .psd-request-review dl {
	display: grid;
	grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr);
	margin: 16px 0;
	border: 1px solid var(--global-palette7);
	border-radius: var(--psd-radius);
	background: var(--global-palette8);
}
body .fluentform .psd-request-review dt,
body .fluentform .psd-request-review dd {
	margin: 0;
	padding: 10px 16px;
	border-top: 1px solid var(--global-palette7);
}
body .fluentform .psd-request-review dt:first-of-type,
body .fluentform .psd-request-review dd:first-of-type {
	border-top: 0;
}
body .fluentform .psd-request-review dt {
	color: var(--global-palette5);
	font-weight: 600;
}
body .fluentform .psd-request-review dd {
	color: var(--global-palette3);
	overflow-wrap: anywhere;
}
body .fluentform .psd-request-review-other .ff_dynamic_value {
	display: block;
}
@media (max-width: 479px) {
	body .fluentform .psd-request-review dl {
		grid-template-columns: minmax(0, 1fr);
	}
	body .fluentform .psd-request-review dd {
		padding-top: 0;
		border-top: 0;
	}
	body .fluentform .psd-request-review dt {
		padding-bottom: 2px;
	}
}

/* The request offered after directory results and under a listing's
   contact details (psd-request-action.php): a soft panel with one filled
   action that opens the request modal. */
/* After the results (or a term page's editorial), whose own bottom padding
   is clamp(3.5rem, 7vw, 6rem): the panel moves up to a 32-48px gap, and its
   space below is padding, so it stays on the directory's surface instead of
   collapsing out under the footer (owner review, 2026-10-20, #196). */
.psd-request-results {
	margin-top: calc(clamp(2rem, 4vw, 3rem) - clamp(3.5rem, 7vw, 6rem));
	margin-bottom: 0;
	padding-bottom: clamp(3.5rem, 7vw, 6rem);
}
/* Kadence's page numbers keep a bottom margin (about 50px) that runs out
   through the results' padding, so the panel sat about 100px under them;
   only where the panel follows. */
.spd-directory-results:has(+ .psd-request-results) .wp-block-kadence-query-pagination .pagination {
	margin-bottom: 0;
}
.psd-request-offer {
	box-sizing: border-box;
	padding: clamp(24px, 4vw, 40px);
	border: 1px solid var(--global-palette7);
	border-radius: var(--psd-radius);
	background: var(--global-palette8);
}
/* Panel titles take the Customizer's h4 (Typography → Headings; SEO Pro
   Directory's --spd-h4-* variables), a card's title its h3 (owner review,
   23 October 2026: every heading styled from the Customizer). */
.psd-request-offer .psd-request-offer-title {
	margin: 0 0 8px;
	color: var(--global-palette3);
	font-size: var(--spd-h4-size, 26px);
	font-weight: var(--spd-h4-weight, normal);
	line-height: var(--spd-h4-line-height, 1.25);
}
.psd-request-offer .psd-request-offer-text {
	max-width: 46em;
	margin: 0 0 20px;
	color: var(--global-palette4);
}
.psd-request-offer .psd-request-offer-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 48px;
	padding: 12px 28px;
	border: 1px solid var(--global-palette1);
	border-radius: var(--psd-radius);
	background: var(--global-palette1);
	color: #fff;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
}
.psd-request-offer .psd-request-offer-button:hover,
.psd-request-offer .psd-request-offer-button:focus-visible {
	border-color: var(--global-palette2);
	background: var(--global-palette2);
	color: #fff;
}
.psd-request-offer .psd-request-offer-button:focus-visible {
	outline: 3px solid var(--global-palette3);
	outline-offset: 2px;
}
/* After results: a readable measure, centred (owner review, 21 October
   2026). */
.psd-request-results > .psd-request-offer {
	max-width: 760px;
	margin-inline: auto;
}
/* Under a listing's contact details: a 6px border in the action colour and
   the page colour inside (palette 9: white, or the dark page) so the
   shortlist offer stands out from the tinted panels round it (owner reviews,
   21 and 23 October 2026). */
.psd-request-offer-listing {
	margin-top: 24px;
	padding: 24px;
	border: 6px solid var(--global-palette1);
	background: var(--global-palette9);
}
.psd-request-offer-listing .psd-request-offer-title {
	font-size: var(--spd-h5-size, 20px);
	font-weight: var(--spd-h5-weight, normal);
	line-height: var(--spd-h5-line-height, 1.25);
}
.psd-request-offer-listing .psd-request-offer-text {
	font-size: 18px;
}
.psd-request-offer-listing .psd-request-offer-button {
	width: 100%;
}
/* Dark mode: the panel's border colour is close to the dark page, so a 3px
   line of the strong neutral, mixed into the panel (about 3.5:1), sets it
   apart (owner review, 2026-10-20, #196). */
html body.color-switch-dark .psd-request-offer {
	border: 3px solid color-mix(in srgb, var(--global-palette6) 55%, var(--global-palette8));
}
html body.color-switch-dark .psd-request-offer-listing {
	border: 6px solid var(--global-palette1);
}

/* SEO Pro Directory landing pages (/find/), unboxed (regional THEME_MODS):
   the title and text in the narrow column the information pages use, centred;
   the ranked list keeps the content width, in a panel of its own (owner
   review, 2026-10-20, #196). */
.single-directory-landing .entry-content-wrap > .entry-header,
.single-directory-landing .entry-content > :not(.spd-landing-results),
.single-directory-landing .spd-landing-results > :not(.spd-ranked-list):not(.spd-landing-more):not(.spd-landing-group-label) {
	max-width: var(--global-content-narrow-width, 842px);
	margin-inline: auto;
}
/* The ranked list and, above it, a Featured group (t38): each in its panel;
   their labels line up with the panels' content. */
.single-directory-landing .spd-landing-results :is(ol, ul).spd-ranked-list {
	padding: clamp(12px, 2.5vw, 28px);
	border-radius: var(--psd-radius);
	background: var(--global-palette9);
}
.single-directory-landing .spd-landing-results p.spd-landing-group-label {
	padding-inline: clamp(12px, 2.5vw, 28px);
}
.single-directory-landing .spd-landing-results p.spd-landing-more {
	text-align: center;
}

/* Questions and answers (core Details block, the FAQ page): one bordered row
   per question, a 56px question line with a chevron that turns when open, and
   hover and focus states from palette tokens, so both palettes follow. */
.entry-content .wp-block-details {
	margin: 0 0 12px;
	border: 1px solid var(--global-palette7);
	border-radius: var(--psd-radius);
	background: var(--global-palette9);
}
.entry-content .wp-block-details:hover,
.entry-content .wp-block-details[open] {
	border-color: var(--global-palette6);
}
.entry-content .wp-block-details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 56px;
	box-sizing: border-box;
	padding: 12px 20px;
	border-radius: var(--psd-radius);
	color: var(--global-palette3);
	font-weight: 600;
	line-height: 1.4;
	list-style: none;
	cursor: pointer;
}
.entry-content .wp-block-details > summary::-webkit-details-marker {
	display: none;
}
.entry-content .wp-block-details > summary::after {
	content: "";
	flex: none;
	width: 9px;
	height: 9px;
	margin-right: 4px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-25%) rotate(45deg);
	transition: transform 0.2s ease;
}
.entry-content .wp-block-details[open] > summary::after {
	transform: translateY(25%) rotate(-135deg);
}
.entry-content .wp-block-details > summary:hover {
	background: var(--global-palette8);
}
.entry-content .wp-block-details[open] > summary {
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}
.entry-content .wp-block-details > summary:focus-visible {
	outline: 3px solid var(--global-palette3);
	outline-offset: 2px;
}
.entry-content .wp-block-details > :not(summary) {
	margin: 0;
	padding: 0 20px 12px;
}
.entry-content .wp-block-details > :last-child:not(summary) {
	padding-bottom: 20px;
}

/* Cards with an action (scripts/build-regional-pages.py photo_cards and
   tiles, class psd-card): the action sits at the card's foot, so a row's
   buttons line up whatever the length of the copy above them. The button's
   own "full width" setting makes it as wide as the card. */
.psd-card > .kt-inside-inner-col {
	display: flex;
	flex-direction: column;
}
.psd-card > .kt-inside-inner-col > .wp-block-kadence-advancedbtn {
	margin-top: auto;
}
/* Flex items' margins do not collapse: the photograph's 32px bottom margin
   and the title's 16px top margin would add up to 48px. Keep the 32px gap. */
.psd-card > .kt-inside-inner-col > .wp-block-image {
	margin-bottom: 16px;
}

/* Photo cards (psd-card-link): the whole card opens its one action. The
   button's link is stretched over the card, so each card stays one link for
   keyboards and screen readers (Kadence's column link would add a second,
   empty one), and hovering anywhere on the card shows the button's hover.
   Border, shadow and their hover come from the column's settings. */
.psd-card-link .kb-button {
	position: static;
}
.psd-card-link .kb-button::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: var(--psd-radius);
}
.psd-card-link > .kt-inside-inner-col:has(.kb-button:focus-visible) {
	outline: 3px solid var(--global-palette3);
	outline-offset: 2px;
}
/* Two cards a row on phones: a label may take two lines, balanced, and every
   card's button is two lines tall, so the buttons in a row match. */
.psd-card-link .kb-button {
	text-wrap: balance;
}
@media (max-width: 767px) {
	.psd-card-link .kb-button {
		min-height: calc(2lh + 22px);
	}
}
/* Below 360px (small phones, larger display zoom) a button is under 130px wide
   and a label such as "Find concrete pros" takes three lines: every card's
   button is three lines tall there. */
@media (max-width: 359px) {
	.psd-card-link .kb-button {
		min-height: calc(3lh + 22px);
	}
}

/* No text under 18px (owner review, 23 October 2026): SEO Pro Cookie
   Consent's banner, its buttons and the map placeholder are 15px (its
   Cookie settings link 14px). Upstream: seoprocookieconsent spcc.css. */
.spcc-banner,
.spcc-banner :is(p, span, a, button),
.spcc-embed :is(p, button),
.spcc-btn {
	font-size: 18px;
}
/* Ultimate Multisite's Login page (its Login Form block): labels at 11px,
   links at 12-14px and a 15px button. Its utilities are
   `.wu-styling :is(.wu-text-sm)`: two classes to win. */
.wu-styling.wu-login-form :is(label, span, a, p, button, input) {
	font-size: 18px;
}
/* Its username and password names are spans, not labels, so the fields had
   no accessible name (axe "label", accessibility sweep 23 October 2026).
   psd_site_design_login_form_fields() names each field (aria-label) and
   shows the name as its placeholder, the owner's form convention; the span
   goes. A placeholder set in the block's settings stays. */
.wu-styling.wu-login-form :is(#wrapper-field-log, #wrapper-field-pwd) > div > span:first-child {
	display: none;
}
/* The regions hide Kadence's page vertical padding (their pages bring their
   own sections), so the Login page's title sat against the menu bar. Space
   it like Kadence's content area (5rem / 3rem / 2rem). */
.content-vertical-padding-hide .entry-content > .wu-styling.wu-login-form:first-child {
	padding-block: 5rem;
}
@media (max-width: 1024px) {
	.content-vertical-padding-hide .entry-content > .wu-styling.wu-login-form:first-child {
		padding-block: 3rem;
	}
}
@media (max-width: 767px) {
	.content-vertical-padding-hide .entry-content > .wu-styling.wu-login-form:first-child {
		padding-block: 2rem;
	}
}
/* The Login form in dark mode: Ultimate Multisite paints white fields with
   dark text, a near-white "Remember me" switch, and "Create an Account"
   takes Kadence's button text slot (dark in dark mode) on the green accent.
   Palette colours in both modes, as on the checkout; white button text. */
.wu-styling.wu-login-form .form-control {
	min-height: 48px;
	padding: 10px 14px;
	border: 1px solid var(--global-palette6);
	border-radius: var(--psd-radius);
	background-color: var(--global-palette9);
	color: var(--global-palette3);
}
.wu-styling.wu-login-form .form-control:focus {
	border-color: var(--global-palette1);
	outline: 2px solid color-mix(in srgb, var(--global-palette1) 35%, transparent);
	outline-offset: 0;
}
.wu-styling.wu-login-form .wu-pwd-toggle {
	color: var(--global-palette4);
}
.wu-styling.wu-login-form a.button,
.wu-styling.wu-login-form a.button:is(:hover, :focus) {
	color: #fff;
}
.wu-styling.wu-login-form .wu-tgl + .wu-tgl-btn {
	border-color: var(--global-palette6);
	background: var(--global-palette8);
}
.wu-styling.wu-login-form .wu-tgl:checked + .wu-tgl-btn {
	border-color: var(--global-palette1);
	background: var(--global-palette1);
}

/* Header menus in Kadence's "underline" style (regional THEME_MODS): the
   underline that shows on hover also shows on keyboard focus. */
.header-navigation[class*="header-navigation-style-underline"] .header-menu-container > ul > li > a:focus-visible::after {
	transform: scale(1, 1) translate(50%, 0);
}

/* The header's two buttons (Directory outline, Shortlist filled; regional
   THEME_MODS) are the same size (owner review, 21 October 2026): both carry
   a 2px border, so one minimum width and centred labels make them match. The
   minimum is wider than the longer label ("Directory", 164px at the header's
   type size), so neither label sets its own width. */
.site-header .header-button,
.site-header .header-button2,
.mobile-header-button,
.mobile-header-button2 {
	box-sizing: border-box;
	min-width: 11rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

/* A listing's service names on the light soft panel: SEO Pro Directory's
   accent text colour is about 4.4:1 there with this site's green, so it is
   taken a little darker to pass 4.5:1 (dark mode uses the page text colour). */
html body:not(.color-switch-dark) .spd-listing-expertise-list .spd-listing-expertise-name {
	color: color-mix(in srgb, var(--spd-accent-dark-text) 82%, #000);
}
/* Text links on the light soft panel (palette8). Kadence colours links with
   the Customizer's link colour (--global-palette-highlight), here the green
   action colour: 4.6:1 on white but 4.2:1 on the soft panel, under WCAG AA's
   4.5:1 (accessibility sweep, 23 October 2026: Sitemap, Expert advice's
   sign-in line, My Account's Log in and Register panels). On a soft panel in
   light mode the variable is the link colour taken a little darker (5.4:1
   with this green), so hover (the link hover colour) and any link with its
   own colour are unchanged. Soft panels: a Kadence row or column with the
   palette8 background (psd-soft-surface, psd_site_design_soft_surface()), a
   core block with it, and the plugins' soft panels. Dark mode's links use
   their own light tint (below). */
body {
	--psd-link-base: var(--global-palette-highlight);
}
html body:not(.color-switch-dark) :is(.psd-soft-surface, .has-theme-palette-8-background-color, .spd-advice-form, .psd-account .u-columns > .u-column1, .psd-account .u-columns > .u-column2, .psd-checkout .wu-styling .wu-bg-yellow-200) {
	--global-palette-highlight: color-mix(in srgb, var(--psd-link-base) 85%, #000);
}

/* Dark mode text links. The action colours are filled-button colours and fail
   as text on the dark surfaces (the red about 2.6:1 on the page). Links use a
   light tint of the action colour (about 6.8:1 on the page, 5:1 on the soft
   panel) and turn white on hover. Kadence's category pill keeps the filled
   action colour behind its white label. */
html body.color-switch-dark {
	--global-palette-highlight: color-mix(in srgb, var(--global-palette1) 45%, var(--global-palette3));
	--global-palette-highlight-alt: var(--global-palette3);
}
html body.color-switch-dark .entry-taxonomies .category-style-pill a {
	background: var(--global-palette1);
}
/* The top bar and main header's text links (For My Property, For
   Businesses, Login / Register or My Account, the search and mode icons, the
   main menu) turn the action colour on hover (regional THEME_MODS), dark
   green on the navy bar in dark mode, about 2.3:1 (owner review, 22 October
   2026). In dark mode they take the light tint the page's links use. */
html body.color-switch-dark .site-top-header-wrap .header-navigation .header-menu-container > ul > li > a:hover,
html body.color-switch-dark .site-top-header-wrap .header-navigation .header-menu-container > ul > li > a:focus-visible,
html body.color-switch-dark .site-main-header-wrap .header-navigation .header-menu-container > ul > li > a:hover,
html body.color-switch-dark .site-main-header-wrap .header-navigation .header-menu-container > ul > li > a:focus-visible,
html body.color-switch-dark .site-top-header-wrap .header-account-button:hover,
html body.color-switch-dark .site-top-header-wrap .header-account-button:focus-visible,
html body.color-switch-dark .site-top-header-wrap .header-account-wrap a:hover,
html body.color-switch-dark .site-top-header-wrap .search-toggle-open:hover,
html body.color-switch-dark .site-top-header-wrap .search-toggle-open:focus-visible,
html body.color-switch-dark .site-top-header-wrap .dark-mode-switch:hover,
html body.color-switch-dark .site-top-header-wrap .dark-mode-switch:focus-visible {
	color: var(--global-palette-highlight);
}
/* The current page's link (For Businesses on that page) kept Kadence's
   active colour on hover, so it gave no feedback in light mode (owner review,
   23 October 2026): the same hover colour as the other links. */
html body:not(.color-switch-dark) .site-top-header-wrap .header-navigation .header-menu-container > ul > li.current-menu-item > a:hover,
html body:not(.color-switch-dark) .site-top-header-wrap .header-navigation .header-menu-container > ul > li.current-menu-item > a:focus-visible,
html body:not(.color-switch-dark) .site-main-header-wrap .header-navigation .header-menu-container > ul > li.current-menu-item > a:hover,
html body:not(.color-switch-dark) .site-main-header-wrap .header-navigation .header-menu-container > ul > li.current-menu-item > a:focus-visible {
	color: var(--global-palette1);
}
/* The footer's links turn the action colour on hover (the child theme's
   footer_middle_link_colors), which is lost on the dark footer: the same
   light tint there (owner review, 2026-10-20, #196). */
html body.color-switch-dark .site-footer .site-middle-footer-wrap a:where(:not(.button):not(.wp-block-button__link):not(.wp-element-button)):hover,
html body.color-switch-dark .site-footer .site-middle-footer-wrap a:where(:not(.button):not(.wp-block-button__link):not(.wp-element-button)):focus-visible {
	color: var(--global-palette-highlight);
}
/* Kadence Icon List icons (the check lists) in dark mode: the list's own
   icon colour, as the links' light tint (above). A list given the blue
   (palette2, #002f92 in dark mode) showed about 1.3:1 on the page (owner
   review, 25 October 2026: "these tick colours need adapting for dark
   mode"); tinted it is about 6.4:1. The SVG's colour mixes the colour its
   wrapper inherits from the block's setting, so a colour chosen in the
   editor keeps its hue, light mode is untouched. */
html body.color-switch-dark .wp-block-kadence-iconlist .kb-svg-icon-wrap svg {
	color: color-mix(in srgb, currentColor 45%, var(--global-palette3));
}

/* My Account (WooCommerce's page under the regional heading, owner review
   21 October 2026). Signed out: Log in and Register as two soft panels at
   the site radius, side by side from tablets, field names as placeholders
   (psd_site_design_account_script) and 52px controls. Signed in: the
   account menu as a soft panel of full-width links beside the content. */
.psd-account .u-columns.col2-set {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
	width: 100%;
}
.psd-account .u-columns.col2-set::before,
.psd-account .u-columns.col2-set::after {
	display: none;
}
.psd-account .u-columns.col2-set > .u-column1,
.psd-account .u-columns.col2-set > .u-column2 {
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
	padding: clamp(24px, 4vw, 40px);
	border-radius: var(--psd-radius);
	background: var(--global-palette8);
}
.psd-account .col2-set h2 {
	margin: 0 0 20px;
	font-size: var(--spd-h3-size, clamp(1.5rem, 2.4vw, 1.9rem));
	font-weight: var(--spd-h3-weight, normal);
	line-height: var(--spd-h3-line-height, 1.25);
}
.psd-account form.woocommerce-form-login,
.psd-account form.woocommerce-form-register,
.psd-account form.woocommerce-ResetPassword {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}
.psd-account .woocommerce-form-row {
	position: relative;
	margin: 0 0 16px;
	padding: 0;
}
.psd-account .woocommerce-form-row input.input-text,
.psd-account .woocommerce-form-row textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: var(--psd-control-height);
	border-radius: var(--psd-radius);
	background: var(--global-palette9);
}
.psd-account .psd-placeheld > label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.psd-account .woocommerce-form-row input.input-text {
	padding-inline: 15px;
}
/* Remember me above a full-width Log in; Register's button full width too,
   so both panels end the same way. */
.psd-account .woocommerce-form-login .form-row:has(> .woocommerce-form-login__submit) {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 16px;
	margin: 4px 0 0;
}
.psd-account .woocommerce-form-login__submit,
.psd-account .woocommerce-form-register__submit,
.psd-account .woocommerce-Button.button {
	width: 100%;
	min-height: var(--psd-control-height);
	margin: 0;
	padding: 12px 32px;
	border-radius: var(--psd-radius);
	font-size: 1.1rem;
}
.psd-account .woocommerce-form-login__rememberme {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	margin: 0;
	padding: 0;
	font-size: 18px;
	font-weight: 500;
}
.psd-account .woocommerce-form-login__rememberme input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--global-palette1);
}
.psd-account .woocommerce-form-login__rememberme span {
	line-height: 20px;
}
/* Register's newsletter tick box (SEO Pro Directory's opt-in) at the site's
   20px, like Remember me beside it (it was the browser's 13px; accessibility
   sweep, 23 October 2026). Its words may wrap on phones, so the box sits on
   the first line. */
.psd-account .spd-newsletter-optin .woocommerce-form__label-for-checkbox {
	display: inline-flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
}
.psd-account .spd-newsletter-optin input[type="checkbox"] {
	flex: none;
	width: 20px;
	height: 20px;
	margin: calc((1.5em - 20px) / 2) 0 0;
	accent-color: var(--global-palette1);
}
.psd-account .woocommerce-LostPassword {
	margin: 16px 0 0;
	font-size: 18px;
}
.psd-account .woocommerce-privacy-policy-text {
	margin-bottom: 20px;
}
.psd-account .woocommerce-privacy-policy-text p,
.psd-account .woocommerce-form-register > p:not(.form-row) {
	font-size: 18px;
}
.psd-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 8px;
	list-style: none;
	border-radius: var(--psd-radius);
	background: var(--global-palette8);
}
.psd-account .woocommerce-MyAccount-navigation li {
	margin: 0;
	padding: 0;
	border: 0;
}
.psd-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 12px 16px;
	border-radius: var(--psd-radius);
	color: var(--global-palette3);
	font-weight: 500;
	text-decoration: none;
}
.psd-account .woocommerce-MyAccount-navigation li a:hover,
.psd-account .woocommerce-MyAccount-navigation li a:focus-visible,
.psd-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--global-palette9);
	color: var(--global-palette3);
}
.psd-account .woocommerce-MyAccount-navigation li.is-active a {
	font-weight: 700;
}
/* Signed in: the account's buttons (Save changes, Save address, a notice's
   action, Browse business services) as the site's solid buttons, sized to
   their label, with white text in both modes. Kadence's button text slot
   turns dark in dark mode, dark on the green (owner review, 23 October
   2026). */
.psd-account .woocommerce-MyAccount-content .button,
.psd-account .woocommerce-MyAccount-content .woocommerce-Button.button,
.psd-account .woocommerce-MyAccount-content button[type="submit"]:not(.sps-reactions__button) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-height: 48px;
	margin: 0;
	padding: 12px 28px;
	border: 1px solid var(--global-palette1);
	border-radius: var(--psd-radius);
	background: var(--global-palette1);
	color: #fff;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}
.psd-account .woocommerce-MyAccount-content .button:hover,
.psd-account .woocommerce-MyAccount-content .button:focus-visible,
.psd-account .woocommerce-MyAccount-content button[type="submit"]:not(.sps-reactions__button):hover,
.psd-account .woocommerce-MyAccount-content button[type="submit"]:not(.sps-reactions__button):focus-visible {
	border-color: var(--global-palette2);
	background: var(--global-palette2);
	color: #fff;
}
/* A notice with an action (Confirm email address): the text, then the
   button under it on the left, not floated beside the text. */
.psd-account .woocommerce-MyAccount-content .woocommerce-info,
.psd-account .woocommerce-MyAccount-content .woocommerce-message {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}
.psd-account .woocommerce-MyAccount-content :is(.woocommerce-info, .woocommerce-message) .button {
	float: none;
	order: 2;
}
.psd-account .woocommerce-MyAccount-content :is(.woocommerce-info, .woocommerce-message)::before,
.psd-account .woocommerce-MyAccount-content :is(.woocommerce-info, .woocommerce-message)::after {
	display: none;
}
/* My Addressbook: Edit and Add links on the left, under the panel title
   (WooCommerce floats them right). */
.psd-account .woocommerce-Address-title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}
.psd-account .woocommerce-Address-title .edit {
	float: none;
	margin: 0 0 8px;
	padding: 0;
	text-align: left;
}
@media (max-width: 767px) {
	.psd-account .u-columns.col2-set {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}
}

/* Ultimate Multisite's checkout in the narrow column of a checkout page
   (owner review, 22 October 2026): the site's corners, palette colours in
   both modes, product descriptions cut to three lines (the Business services
   page has the full list), and the site's fields and button. */
.psd-checkout .wu-styling label[id^="wu-product-"] {
	border-radius: var(--psd-radius);
	border-color: var(--global-palette7);
	background: var(--global-palette9);
	box-shadow: none;
}
.psd-checkout .wu-styling label[id^="wu-product-"]:hover {
	border-color: var(--global-palette1);
}
.psd-checkout .wu-styling label[id^="wu-product-"] > div:first-child {
	align-items: flex-start;
}
.psd-checkout .wu-styling label[id^="wu-product-"] input[type="radio"] {
	margin-top: 4px;
}
.psd-checkout .wu-styling [id$="-description-0"] p {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 4px 0 0;
	font-size: 18px;
	line-height: 1.5;
}
.psd-checkout .wu-styling .wu-text-sm {
	font-size: 18px;
}
.psd-checkout .wu-styling [id$="-label"] {
	font-size: 18px;
	line-height: 1.35;
}
.psd-checkout .wu-styling .wu-bg-white,
.psd-checkout .wu-styling .wu-bg-gray-100 {
	background: var(--global-palette9);
}
.psd-checkout .wu-styling .wu-text-gray-900,
.psd-checkout .wu-styling .wu-text-gray-700 {
	color: var(--global-palette3);
}
.psd-checkout .wu-styling .wu-text-gray-600,
.psd-checkout .wu-styling .wu-text-gray-500 {
	color: var(--global-palette5);
}
.psd-checkout .wu-styling .wu-border-gray-300 {
	border-color: var(--global-palette7);
}
.psd-checkout .wu-styling .form-control {
	min-height: 48px;
	padding: 10px 14px;
	border-radius: var(--psd-radius);
}
.psd-checkout .wu-styling .wu_submit_button,
.psd-checkout .wu-styling button[type="submit"] {
	width: 100%;
	min-height: 52px;
	border-radius: var(--psd-radius);
	font-size: 18px;
	font-weight: 600;
}
/* No text under 18px (owner review, 23 October 2026): the checkout's field
   labels are 14px and the password strength line 13px (an ID rule in
   Ultimate Multisite's checkout sheet). */
.psd-checkout .wu-styling label.wu-block,
.psd-checkout .wu-styling #pass-strength-result {
	font-size: 18px;
}
/* The Site URL preview's "Your URL will be" note is a <small> (14px on
   phones); the address after it is already 18px. */
.psd-checkout .wu-styling #wu-your-site-block small {
	font-size: 18px;
}

/* The checkout in dark mode (owner review, 22 October 2026): Ultimate
   Multisite paints its fields, the Site URL addresses and the "Not you?"
   notice in fixed light colours (white fields, a pale yellow notice under
   white text). They take the palette in both modes: fields on the page
   colour with the site's field border, the Site URL's https:// and domain
   as soft addons around its field, and the notice as a soft panel. */
.psd-checkout .wu-styling .form-control,
.psd-checkout .wu-styling select,
.psd-checkout .wu-styling textarea {
	background-color: var(--global-palette9);
	color: var(--global-palette3);
	border: 1px solid var(--global-palette6);
}
.psd-checkout .wu-styling .form-control::placeholder {
	color: var(--global-palette5);
	opacity: 1;
}
.psd-checkout .wu-styling .form-control:focus,
.psd-checkout .wu-styling select:focus {
	border-color: var(--global-palette1);
	outline: 2px solid color-mix(in srgb, var(--global-palette1) 35%, transparent);
	outline-offset: 0;
}
.psd-checkout .wu-styling .wu-bg-yellow-200 {
	margin: 0 0 16px;
	padding: 14px 16px;
	border-left: 4px solid var(--global-palette1);
	border-radius: var(--psd-radius);
	background: var(--global-palette8);
	color: var(--global-palette3);
}
.psd-checkout .wu-styling .wu-bg-yellow-200 a {
	color: var(--global-palette-highlight);
	font-weight: 600;
}
.psd-checkout .wu-styling div:has(> #field-site_url) {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0;
}
.psd-checkout .wu-styling div:has(> #field-site_url) > .wu-input-addon {
	display: flex;
	align-items: center;
	margin: 4px 0;
	padding: 0 12px;
	border: 1px solid var(--global-palette6);
	background: var(--global-palette8);
	color: var(--global-palette4);
	font-family: inherit;
	font-size: 18px;
	white-space: nowrap;
}
.psd-checkout .wu-styling div:has(> #field-site_url) > .wu-input-addon-prefix {
	border-right: 0;
	border-radius: var(--psd-radius) 0 0 var(--psd-radius);
}
.psd-checkout .wu-styling div:has(> #field-site_url) > .wu-input-addon-suffix {
	border-left: 0;
	border-radius: 0 var(--psd-radius) var(--psd-radius) 0;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}
.psd-checkout .wu-styling div:has(> #field-site_url) > #field-site_url {
	flex: 1 1 8rem;
	min-width: 8rem;
	margin: 4px 0;
	border-radius: 0;
}
/* Narrow screens: the domain on its own line under the field. */
@media (max-width: 599px) {
	.psd-checkout .wu-styling div:has(> #field-site_url) > #field-site_url {
		border-radius: 0 var(--psd-radius) var(--psd-radius) 0;
	}
	.psd-checkout .wu-styling div:has(> #field-site_url) > .wu-input-addon-suffix {
		flex: 1 0 100%;
		margin-top: 0;
		border-left: 1px solid var(--global-palette6);
		border-radius: var(--psd-radius);
		min-height: 40px;
	}
}
/* The order summary: labels left, amounts right. Product rows start with a
   hidden description cell, so the visible description is matched by class. */
.psd-checkout .wu-styling table th,
.psd-checkout .wu-styling table .col-description {
	text-align: left;
}
.psd-checkout .wu-styling table tr > :not(:first-child):not(.col-description) {
	text-align: right;
}

/* The checkout's pricing table as psd-checklist (psd-business-services.php):
   plans to choose one of, then services to tick, as soft cards at the site
   radius; a chosen card takes the action colour's border. */
.psd-checklist {
	display: grid;
	gap: 20px;
}
.psd-checklist-group {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}
.psd-checklist .psd-checklist-heading {
	margin: 0 0 2px;
	padding: 0;
	color: var(--global-palette3);
	font-size: 18px;
	font-weight: 700;
}
.psd-checklist-item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: start;
	gap: 4px 14px;
	padding: 16px 18px;
	border: 2px solid var(--global-palette7);
	border-radius: var(--psd-radius);
	background: var(--global-palette9);
	color: var(--global-palette4);
	cursor: pointer;
}
.psd-checklist-item:hover {
	border-color: var(--global-palette6);
}
.psd-checklist-item.is-chosen {
	border-color: var(--global-palette1);
}
.psd-checklist-item:focus-within {
	outline: 2px solid var(--global-palette1);
	outline-offset: 2px;
}
.psd-checklist .psd-checklist-input {
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: var(--global-palette1);
	cursor: pointer;
}
.psd-checklist-text {
	display: grid;
	gap: 4px;
}
.psd-checklist-name {
	color: var(--global-palette3);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
}
.psd-checklist-intro {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 18px;
	line-height: 1.5;
}
.psd-checklist-price {
	display: grid;
	gap: 2px;
	text-align: right;
	color: var(--global-palette3);
	font-size: 18px;
	white-space: nowrap;
}
.psd-checklist-price span {
	color: var(--global-palette5);
	font-size: 16px;
}
/* "Read more…" (checklist.js): the first line in full, then the rest of the
   description, what is included and what the team needs (owner review,
   24 October 2026). */
.psd-checklist-full {
	display: none;
}
.psd-checklist-text.is-open .psd-checklist-intro {
	display: block;
	-webkit-line-clamp: unset;
	overflow: visible;
}
.psd-checklist-text.is-open .psd-checklist-full {
	display: grid;
	gap: 6px;
	font-size: 18px;
	line-height: 1.5;
}
.psd-checklist-list-title {
	margin-top: 6px;
	color: var(--global-palette3);
	font-weight: 700;
}
.psd-checklist-list {
	display: grid;
	gap: 4px;
}
.psd-checklist-list > span {
	position: relative;
	padding-left: 26px;
}
.psd-checklist-list > span::before {
	content: "";
	position: absolute;
	left: 0;
	top: .25em;
	width: 16px;
	height: 16px;
	background: var(--global-palette1);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.psd-checklist-needs > span::before {
	background: var(--global-palette5);
}
.psd-checklist .psd-checklist-more {
	justify-self: start;
	color: var(--global-palette-highlight, var(--global-palette1));
	font-size: 16px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.psd-checklist .psd-checklist-more[hidden] {
	display: none;
}
.psd-checklist-text a:not(.psd-checklist-more) {
	color: var(--global-palette-highlight, var(--global-palette1));
	text-decoration: underline;
	text-underline-offset: 3px;
}
/* A description link opens a new tab: the site's bold external arrow
   (SEO Pro Directory's --spd-external-icon), on the checklist and the
   Business services cards; and policy links in forms, which open in a new
   tab (psd-site-forms.php, WooCommerce's registration text). */
.psd-checklist-text a[target="_blank"]::after,
.psd-service-card a[target="_blank"]::after,
a.psd-new-tab::after,
.woocommerce-privacy-policy-text a[target="_blank"]::after {
	content: "";
	display: inline-block;
	width: .72em;
	height: .72em;
	margin-inline-start: .3em;
	background-color: currentColor;
	vertical-align: -.02em;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M6.5 17.5l11-11M8.5 6.5h9v9'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M6.5 17.5l11-11M8.5 6.5h9v9'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* Site title, Site URL and its preview only with a website ticked
   (checklist.js sets body.psd-checkout-website): an order without a website
   asks for no site. */
body:not(.psd-checkout-website) #wu_form:has(.psd-checklist) #wrapper-field-site_title,
body:not(.psd-checkout-website) #wu_form:has(.psd-checklist) #wrapper-field-site_url,
body:not(.psd-checkout-website) #wu_form:has(.psd-checklist) #wrapper-field-site_url_preview {
	display: none;
}
@media (max-width: 599px) {
	.psd-checklist-item {
		grid-template-columns: auto minmax(0, 1fr);
	}
	.psd-checklist-price {
		grid-column: 2;
		text-align: left;
	}
}

/* The blog (owner review, 22 October 2026): the posts' panels at the site
   radius (every site search result's too, #226: listings, landing pages and
   questions sit in the same list), the image keeping the corners, and the posts page's intro
   (its excerpt, psd_site_design_blog_intro()) a readable, centred line
   under the heading. */
.blog .loop-entry,
.archive .loop-entry.type-post,
.search .loop-entry {
	border-radius: var(--psd-radius);
	overflow: hidden;
}
.post-archive-hero-section .archive-description {
	max-width: 46rem;
	margin: 12px auto 0;
	color: var(--global-palette4);
	font-size: 18px;
	line-height: 1.6;
}
.post-archive-hero-section .archive-description p {
	margin: 0;
}
/* The site's text floor on posts (owner review, 23 October 2026: copy at
   18px or more, letter-spaced labels at 16px or more). Kadence sizes these
   from the body size (80%, 14.4px on phones) with no Customizer setting;
   the meta and category sizes are Customizer settings (scripts/
   build-regional-pages.py THEME_MODS). Read More and Previous / Next are
   Kadence's uppercase letter-spaced labels. */
.comment-respond :is(.comment-notes, .logged-in-as) {
	font-size: 18px;
}
.loop-entry a.post-more-link,
.entry-tags :is(a.tag-link, .tag-hash),
.post-navigation small {
	font-size: 16px;
}

/* A readable measure for running text (owner review, 21 October 2026): a
   paragraph is at most two thirds of the content width (860px of 1290px),
   so a full-width section does not run its copy edge to edge. Specificity
   0,0,1: a block's own maximum width (Kadence's number badges) still wins.
   Centred copy (core's alignment class, or psd-text-centre on Advanced Text)
   keeps its line centred in the row: 0,4,0 outranks Advanced Text's own
   margin rule (0,3,0, printed after this sheet), which left the narrow box
   at the row's left edge with its text centred inside. */
:where(.site-main) p {
	max-width: calc(var(--global-content-width, 1290px) * 2 / 3);
}
.site-main p.has-text-align-center,
.site-main .psd-text-centre.psd-text-centre.psd-text-centre {
	margin-right: auto;
	margin-left: auto;
}

@media (prefers-reduced-motion: reduce) {
	.header-navigation[class*="header-navigation-style-underline"] .header-menu-container > ul > li > a::after,
	.entry-content .wp-block-details > summary::after,
	.psd-card > .kt-inside-inner-col,
	body .wp-block-search .wp-block-search__button {
		transition: none;
	}
}