/*
Theme Name:  Art Division Child Theme
Theme URI:   https://artdivision.co.uk
Author:      Art Division
Author URI:  https://artdivision.co.uk
Description: Child theme for Art Division. Add site-specific styles and icons here.
Version:     1.1.5
Template:    art-division
Text Domain: art-division-child
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/
/* Outline Button on an accent-colour section background. The theme's own
   --color-btn-outline-* variables are one global pick shared with Outline
   buttons on white/alternate backgrounds too, so they can't also carry a
   different value just for the yellow accent case - scoped here instead,
   matching the [class*="--bg-secondary"] convention every module's own
   "Accent" background choice ends up as (art-pm-module--bg-secondary,
   art-rep-module--{name}--bg-secondary), so this covers Page Modules,
   Repeatables and Art Division Blocks CTAs alike without listing every
   module's own class individually. */
[class*='--bg-secondary'] .art-btn--outline {
	background-color: transparent;
	border-color: #343336;
	color: #343336;
}

[class*='--bg-secondary'] .art-btn--outline:hover,
[class*='--bg-secondary'] .art-btn--outline:focus-visible {
	background-color: #343336;
	border-color: #343336;
	color: #ffffff;
}

/* Typography */
h2 {
	letter-spacing: -1.2px;
}
.art-prop-card--archive .art-prop-card__title a {
	letter-spacing: 0;
}
.art-pm-hero__heading:is(h1, .is-h1),
.art-rep-module--cta.book-a-valuation h2,
.art-pm-module--property-valuation .is-h2 {
	font-family: 'Montserrat', sans-serif;
	font-style: italic;
	text-transform: uppercase;
	font-weight: 900;
}

/* .art-pm-module__cta's shared margin-top: 2rem (Page Modules' own CSS)
   isn't wanted on this module's cards specifically - scoped removal rather
   than touching the shared plugin rule other modules still rely on. */
.art-pm-module--property-valuation .art-pm-module__cta {
	margin-top: 0;
}

body:not(.hero-nav-transparent) .oakmans-svg-logo path,
.hero-nav-transparent .site-header.is-scrolled .oakmans-svg-logo path {
	/* fill: #343336; */
	/* fill: #fff; */
}

/* Common Utilities */
/* ============================================================= */
section > div:is(.oakmans-no-pad-top) {
	padding-top: 0;
}
section > div:is(.oakmans-no-pad-bottom) {
	padding-bottom: 0;
}

/* Full natural size (300x78, matching the pasted markup's own viewBox) at
   the top of the page. Shrinks via transform:scale (not height) on scroll so
   it animates smoothly and matches the parent theme's own raw-SVG-logo
   convention (.custom-logo-link svg) of scaling rather than resizing the box.
   width:auto preserves the logo's own aspect ratio. */
.oakmans-svg-logo {
	display: block;
	width: auto;
	transition: transform 0.3s ease;
}
/* .is-scrolled .oakmans-svg-logo {
    transform: scale(0.64);
} */
/* Shrinks the header logo SVG in the tablet-width gap before the mobile nav
   breakpoint takes over (the parent theme's own Mobile Logo Scale setting,
   art_division_nav_breakpoint_css(), only applies at/below the configured
   Mobile Menu Breakpoint) - Oakmans' logo overflows its header space above
   that point but below 1060px, so this covers that gap with a fixed scale
   tuned to this specific logo's proportions. Previously added via
   wp_add_inline_style() in functions.php; moved here since it's a plain
   rule with no reason to be PHP-generated. */
@media (max-width: 1060px) {
	.custom-logo-link svg {
		transform: scale(0.7);
		transform-origin: left center;
		width: 100%;
	}
	/* The parent theme's Logo Left layout gives .site-branding flex:1 (see
	   art-division/style.css) so it grows/shrinks with the header row. A
	   flex item's default min-width is "auto", i.e. it won't shrink below
	   its content's min-content size - and the svg's width:100% above
	   makes that content report as wide as all the space it's trying to
	   fill, which drags the whole header (and page) wider than the
	   viewport instead of actually shrinking on narrow phones. min-width:0
	   lets it shrink normally; the visual size is still controlled by the
	   scale(0.7) transform above, not by this. */
	.header-layout-left .site-branding {
		min-width: 0;
	}
}
/* Nav items drop to 16px alongside the logo shrink on scroll (parent theme's
   .site-header.is-scrolled transform on the logo SVG) - Oakmans-specific
   size, not a sitewide default. Same 0.3s transition as the logo shrink.
   .nav-btn-text (the "Book a Valuation" button label) is covered separately
   below since it sits outside .header-nav and was otherwise left at its
   larger --text-base size while everything else around it shrank. */
.header-nav a,
.nav-btn-text {
	transition: font-size 0.3s ease;
}
.header-layout-centred .header-nav a {
	font-size: 18px;
}
/* .site-header.is-scrolled .header-nav a,
.site-header.is-scrolled .nav-btn-text {
    font-size: 20px;
} */
/* Oakmans Intro text */
.oakmans-intro-text .art-pm-module__header {
	margin-bottom: 0;
}
.oakmans-intro-text .art-pm-module__header p {
	color: var(--color-title);
	font-size: 2rem;
	margin-top: 0;
	margin-bottom: 0;
	font-family: var(--font-heading);
	line-height: var(--line-height-heading);
	text-wrap: pretty;
}
.oakmans-intro-text--md .art-pm-module__header p {
	font-weight: bold;
	font-size: 22px;
}
.oakmans-logo-bg {
	fill: #ededee;
}
.oakmans-list-wrap .art-pm-module__header :is(h2, p) {
	margin-inline: auto;
	max-width: var(--art-pm-content-max-width);
}
.oakmans-list-wrap .art-pm-module__header,
.oakmans-list-wrap .art-pm-module__intro {
	max-width: 100%;
}
.oakmans-list-wrap ul {
	display: flex;
	flex-wrap: wrap;
	padding: 0;
	gap: 20px;
	justify-content: center;
}
/* Buttons */
.art-btn--navbar {
	text-transform: none;
}
.art-btn {
	padding: 0.95rem 2.3rem;
	/* font-size: 1.25rem; */
}
/* Floating button */
span.art-fab-btn__label-text {
	font-family: 'Montserrat';
	text-transform: uppercase;
	font-weight: 700;
	font-style: italic;
}
/* Boxed text callout — overrides the parent theme's neutral .art-boxed-text
   default (see functions.php there for the "boxed" Quicktags button, and
   style.css there for the base rule) with Oakmans' yellow branding. */
.art-boxed-text {
	background: var(--color-accent);
	border-radius: 16px;
	padding: 24px 32px;
	/* max-width: 680px; */
	/* margin: 0 auto; */
}
/* On a bg-alternate section, swap to the theme colour with white text
   instead - the accent yellow reads poorly against the alternate grey.
   .art-checklist's checkmark (background-color: currentColor, see the
   parent theme) picks up the white automatically if a checklist is nested
   inside the box, with no extra rule needed here. */
.art-pm-module--bg-alternate .art-boxed-text {
	background: var(--color-primary);
	color: var(--art-pm-on-primary, #ffffff);
}
.art-checklist li {
	margin-bottom: 0.3rem;
	padding-left: 1.5rem;
}
/* Overrides the parent theme's SVG mask-image checkmark (see art-division
   theme style.css) with a plain "✓" character - a later rule with the same
   selector only wins the cascade for the properties it actually sets, so
   every property the parent's ::before rules set has to be explicitly
   neutralised here too, not just omitted, or it stays in effect (mask-
   image, background-color, height/width, top). Uses the CSS \2713 escape
   rather than a literal ✓ character - a caching/minify plugin combining
   CSS files drops this file's charset, so the browser decoded the raw
   UTF-8 bytes as Windows-1252 and rendered "✓" instead. */
.art-checklist li::before {
	background-color: transparent;
	content: '\2713';
	height: auto;
	left: 0;
	-webkit-mask-image: none;
	-webkit-mask-repeat: unset;
	-webkit-mask-size: unset;
	mask-image: none;
	mask-repeat: unset;
	mask-size: unset;
	position: absolute;
	top: auto;
	width: auto;
}
/* Services */
.om-rounded-icons .art-rep-list__media-link,
.om-rounded-icons .art-rep-list__media {
	color: inherit;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 124px;
	height: 124px;
	padding: 0;
	background: var(--art-color-accent);
	border-radius: 50%;
	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		transform 0.2s ease;
}
.om-rounded-icons .art-rep-list__media-link:is(:hover, :focus-visible),
.om-rounded-icons .art-rep-list__media:is(:hover, :focus-visible) {
	color: white;
	background: var(--art-color-muted);
	transform: scale(1.05);
}
/* Force 2 columns on mobile instead of Feature Grid's default 1-per-row
   (each item's own flex-basis, set by Repeatables itself, is
   min(100%, 220px) - wider than a phone screen, so it never wraps to 2-up
   on its own). The 124px icon circles above have enough room either side
   at typical phone widths. An odd item count sits alone on the last row,
   centred by the parent's own justify-content: center, so it reads as
   intentional rather than lopsided. Scoped to .om-rounded-icons (this
   list's own custom CSS class) rather than every Feature Grid list
   sitewide, since other instances may have different item counts. */
@media (max-width: 640px) {
	.om-rounded-icons .art-rep-list__item {
		flex: 1 1 calc(50% - var(--art-rep-spacing-md, 1.5rem) / 2);
	}
}
.art-rep-module--list--feature-grid .art-rep-list__item-link {
	color: var(--art-color-text);
}
.art-rep-testimonial__more {
	color: var(--art-color-text);
}
#art-prop-search-minimal-location-1#art-prop-search-minimal-location-1 {
	color: white !important;
}
.art-areas-we-cover-hero-contact__list a,
.art-branches-hero-contact__list a {
	font-family: 'Montserrat';
	font-weight: bold;
	font-style: italic;
}
/* Page Divider — base rule carries no vertical margin. margin-top/-bottom
   are added below only when the adjacent module's OWN padding wouldn't read
   as a visible gap anyway, so the divider never piles 4rem of extra empty
   space on top of a gap that's already there.

   The test is background colour, not presence of a padding class: a
   module's padding-top/-bottom is painted in that module's own background
   colour, so on a white-bg module (art-pm-module--bg-white) it blends into
   the page and genuinely reads as breathing space - no extra margin needed
   from the divider. On a non-white module (bg-primary/-secondary/
   -alternate, e.g. a solid-colour CTA banner) that same padding is just
   more of the module's own colour, not a gap at all, so the divider still
   needs its own margin to create real separation - regardless of how much
   padding that module has internally. Modules with no bg-white class at all
   (Hero, or anything not built on the standard Page Modules bg system) fall
   into the same "needs our own margin" case by default. */
.oakmans-section-divider {
	height: 10px;
	background: var(--color-accent);
	border-radius: 9999px;
	margin: 0 auto;
	width: calc(100% - 30px);
	max-width: calc(var(--art-max-width) - 30px);
	/* max-width: 1200px; */
}

.oakmans-section-divider:first-child,
:not(.art-pm-module--bg-white) + .oakmans-section-divider {
	margin-top: 4rem;
}

/* .oakmans-section-divider:last-child,
.oakmans-section-divider:has(+ :not(.art-pm-module--bg-white)) {
    margin-bottom: 4rem;
} */
/* Stats */
.art-rep-stats__text {
	font-size: 1.375rem;
}
.art-rep-stats__text span {
	font-size: 1rem;
}
/* Image text featured grid */
.art-pm-module__fg-item {
	align-items: center;
	border-radius: var(--art-radius, 0);
	display: flex;
	flex-direction: column;
	padding: 1.5rem 1rem;
	text-align: center;
}

/* .art-pm-module__fg-item:nth-child(even) {
	background-color: #d7d7dd;
} */
/* Footer */
@media (min-width: 740px) {
	.widget-area--footer .wp-block-group {
		align-items: stretch;
		justify-content: center;
		flex-wrap: wrap;
		gap: 2.5rem 4rem;
	}
	.widget-area--footer .widget_nav_menu {
		text-align: center;
	}
	.widget-area--footer .widget_nav_menu ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.widget-area--footer .widget_nav_menu:not(:last-child) {
		border-right: 2px solid var(--color-accent);
		padding-right: 4rem;
	}
	/* Client wants the "Quick Links"/"Policies & Pricing"/"Helpful Links"
	   column headings visible on mobile but not on desktop, where the
	   columns already read as distinct groups via the border-right
	   dividers above. Visually hidden rather than display:none so the
	   heading (and the outline it gives screen-reader users navigating by
	   heading) is still available, matching the parent theme's own
	   screen-reader-text convention for footer widget titles. */
	.widget-area--footer .widget-title {
		clip: rect(1px, 1px, 1px, 1px);
		height: 1px;
		margin: 0;
		overflow: hidden;
		position: absolute;
		width: 1px;
	}
}

/* Below 740px the footer columns stack vertically; client doesn't want the
   parent theme's 3rem top/bottom padding in that stacked view. */
@media (max-width: 739px) {
	.widget-area--footer {
		padding: 0;
	}
}

/* ==========================================================================
   Simple Stepped Form — opt-in Gravity Forms style
   Add "simple-stepped-form" to the module's Additional CSS Classes field.
   Prerequisite: give each single-line/email field its own Placeholder set
   to a single space " " in the GF field editor, so :placeholder-shown can
   drive the floating label without JS.
   ========================================================================== */

.simple-stepped-form {
	--ssf-accent: #f5d930;
	--ssf-text: #1a1a1a;
	--ssf-muted: #6b6b6b;
}

/* Progress bar → thin bar, no "Step X of Y" text. Fill colour is left as
   whatever's set in the form's own Gravity Forms settings. */
.simple-stepped-form .gf_progressbar_title {
	display: none;
}

.simple-stepped-form .gf_progressbar_wrapper {
	margin: 0 0 2rem;
}

.simple-stepped-form .gf_progressbar,
.simple-stepped-form .gf_progressbar_custom {
	background-color: var(--ssf-text) !important;
	border-radius: 0 !important;
	height: 2px !important;
	overflow: hidden;
}

.simple-stepped-form .gf_progressbar_percentage {
	height: 100%;
}

.simple-stepped-form .gf_progressbar_percentage span {
	display: none;
}

/* Inputs → underline style, no box */
.simple-stepped-form input[type='text'],
.simple-stepped-form input[type='email'],
.simple-stepped-form input[type='tel'],
.simple-stepped-form input[type='number'],
.simple-stepped-form input[type='url'] {
	background: transparent !important;
	border: none !important;
	border-bottom: 1px solid var(--ssf-text) !important;
	border-radius: 0 !important;
	padding: 0.5rem 0 !important;
	font-size: 1.125rem;
	transition: border-color 0.2s ease;
}

.simple-stepped-form input[type='text']:focus,
.simple-stepped-form input[type='email']:focus,
.simple-stepped-form input[type='tel']:focus,
.simple-stepped-form input[type='number']:focus,
.simple-stepped-form input[type='url']:focus {
	border-bottom-color: var(--ssf-accent) !important;
	outline: none !important;
	box-shadow: none !important;
}

/* Floating label — only applies to simple single-input field types, same
   scope Gravity Forms itself uses for that concept (name/address/date/
   checkbox/radio/consent fields are left untouched). GF renders the
   <label> *before* the input, so a plain ~ / + sibling selector can't make
   a preceding label react to a following input's state - :has() on the
   field wrapper is what makes that possible. */
.simple-stepped-form
	.gfield:is(
		:has(.ginput_container_text),
		:has(.ginput_container_email),
		:has(.ginput_container_number),
		:has(.ginput_container_phone),
		:has(.ginput_container_website)
	) {
	position: relative;
	padding-top: 1.25rem;
}

.simple-stepped-form
	.gfield:is(
		:has(.ginput_container_text),
		:has(.ginput_container_email),
		:has(.ginput_container_number),
		:has(.ginput_container_phone),
		:has(.ginput_container_website)
	)
	.gfield_label {
	position: absolute;
	top: 1.25rem;
	left: 0;
	margin: 0;
	transition:
		transform 0.2s ease,
		color 0.2s ease;
	transform-origin: left top;
	pointer-events: none;
}

.simple-stepped-form .gfield:has(input:placeholder-shown):not(:focus-within) .gfield_label {
	color: var(--ssf-muted);
}

.simple-stepped-form .gfield:focus-within .gfield_label,
.simple-stepped-form .gfield:not(:has(input:placeholder-shown)) .gfield_label {
	transform: translateY(-1.5rem) scale(0.8);
	color: var(--ssf-text);
}

.simple-stepped-form .gfield:focus-within .gfield_label {
	color: var(--ssf-accent);
}

/* Buttons → pill shape, uppercase, letter-spaced */
.simple-stepped-form .gform_button,
.simple-stepped-form .gform_next_button,
.simple-stepped-form .gform_previous_button {
	background-color: var(--ssf-accent) !important;
	border: none !important;
	border-radius: 999px !important;
	color: var(--ssf-text) !important;
	font-weight: 600 !important;
	letter-spacing: 0.08em !important;
	padding: 0.9rem 2.5rem !important;
	text-transform: uppercase !important;
	transition: background-color 0.2s ease;
}

.simple-stepped-form .gform_button:hover,
.simple-stepped-form .gform_next_button:hover,
.simple-stepped-form .gform_previous_button:hover,
.simple-stepped-form .gform_button:focus-visible,
.simple-stepped-form .gform_next_button:focus-visible,
.simple-stepped-form .gform_previous_button:focus-visible {
	background-color: color-mix(in srgb, var(--ssf-accent) 85%, black) !important;
}
/* Name field ("Simple" format = single visible box) needs the same
   floating-label + underline treatment as the plain text fields, plus an
   extra reset since GF wraps it in .ginput_complex/.ginput_container_name -
   an outer box independent of the <input> itself. */

.simple-stepped-form .ginput_complex,
.simple-stepped-form .ginput_container_name {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
}

.simple-stepped-form .ginput_container_name input[type='text'] {
	background: transparent !important;
	border: none !important;
	border-bottom: 1px solid var(--ssf-text) !important;
	border-radius: 0 !important;
	padding: 0.5rem 0 !important;
}

.simple-stepped-form .ginput_container_name input[type='text']:focus {
	border-bottom-color: var(--ssf-accent) !important;
	outline: none !important;
	box-shadow: none !important;
}

/* Extend the floating-label eligibility list from before to include Name.
   Name fields render as <fieldset class="gfield ..."><legend class="gfield_label ...">
   instead of <label>, but :has() only cares about the class, so the same
   selectors work - just add :has(.ginput_container_name) to both blocks. */
.simple-stepped-form
	.gfield:is(
		:has(.ginput_container_text),
		:has(.ginput_container_email),
		:has(.ginput_container_number),
		:has(.ginput_container_phone),
		:has(.ginput_container_website),
		:has(.ginput_container_name)
	) {
	position: relative;
	padding-top: 1.25rem;
}

.simple-stepped-form
	.gfield:is(
		:has(.ginput_container_text),
		:has(.ginput_container_email),
		:has(.ginput_container_number),
		:has(.ginput_container_phone),
		:has(.ginput_container_website),
		:has(.ginput_container_name)
	)
	.gfield_label {
	position: absolute;
	top: 1.25rem;
	left: 0;
	margin: 0;
	transition:
		transform 0.2s ease,
		color 0.2s ease;
	transform-origin: left top;
	pointer-events: none;
}

.simple-stepped-form .ginput_container_text,
.simple-stepped-form .ginput_container_email,
.simple-stepped-form .ginput_container_number,
.simple-stepped-form .ginput_container_phone,
.simple-stepped-form .ginput_container_website {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
}

/* =========================================
   TEAM CARDS
========================================= */

.art-team-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #343434;
	overflow: hidden;
}

/* Image */
.art-team-card__image-wrap {
	width: 100%;
	overflow: hidden;
	flex-shrink: 0;
}

.art-team-card__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Dark information area */
.art-team-card__info {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 18px 20px 0;
	background: #343434;
	text-align: center;
	color: #fff;
}

/* Name */
.art-team-card__name {
	margin: 0 0 10px;
	color: #fff;
	font-family: var(--font-base);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.15;
}

/* Arrow after name */
.art-team-card__name::after {
	content: '';
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 8px;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 5px solid #fff;
	vertical-align: middle;
}

/* Job title */
.art-team-card__job-title {
	margin: 0 0 18px;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

/* Contact area pushed to bottom */
.art-team-card .art-pm-module__contact-buttons {
	display: flex;
	width: calc(100% + 40px);
	margin-top: auto;
	margin-left: -20px;
	gap: 0px;
}

/* Yellow buttons */
.art-team-card .art-pm-module__contact-buttons .art-btn {
	flex: 1;
	margin: 0;
	padding: 15px 10px;
	border: 0;
	border-radius: 0;
	background: #f5da4f;
	color: #292929;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 1.5px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition:
		background 0.2s ease,
		color 0.2s ease;
}

/* Divider when Call + Email both exist */
.art-team-card .art-pm-module__contact-buttons .art-btn + .art-btn {
	border-left: 1px solid rgba(0, 0, 0, 0.15);
}

/* Hover */
.art-team-card .art-pm-module__contact-buttons .art-btn:hover {
	background: #292929;
	color: #fff;
}

/* Mobile tweaks */
@media (max-width: 767px) {
	.art-team-card__info {
		padding: 16px 15px 0;
	}

	.art-team-card__name {
		font-size: 20px;
	}

	.art-team-card__job-title {
		font-size: 13px;
		letter-spacing: 1.2px;
	}

	.art-team-card .art-pm-module__contact-buttons {
		width: calc(100% + 30px);
		margin-left: -15px;
	}
}
.art-pm-module--bg-primary :is(h1, h2, h3, h4, h5, h6, p, li) {
	color: white;
}

/* =========================================
   HOMEPAGE HERO PROPERTY SEARCH
   Dark pill redesign for the compact search box (Page Modules' Hero,
   rendering Property Modules' [art_property_search] "compact" style).
   Scoped to .art-pm-hero__search--compact only, so the standalone Property
   Search module elsewhere on the site keeps its own default look.

   Field grouping: Location (and Radius, labelled "Distance" in the PH
   search form) always show in the top pill. Everything else - Type, Min
   Beds, Min/Max Price, the sold/let checkbox - is grouped into a
   collapsible panel by assets/js/hero-search-filters.js, opened via the
   "Filters" text toggle beneath the pill. The Auctions tab is spliced into
   the dept-tabs markup server-side, see functions.php.

   Admin setup this depends on (Settings > Frontend > Search Forms in
   PropertyHive):
   - a search form with the ID "homepage_hero_search" (Page Modules 1.2.128+
     uses it automatically once it exists, falling back to "default")
   - Location's field Label set to "Search location", Radius's to "Distance"
   - "Show Label" left UNTICKED on every field in that form, so PH fills
     the input placeholder / select's blank option from the Label text
     instead of rendering a visible <label> - this design has no labels.
   ========================================= */

/* height is a fixed reservation matching the CLOSED card's natural height
   (tabs 3rem + pill's 1.25rem top margin + pill's 4rem height + the
   "Filters" toggle row's ~2.125rem = 10.375rem) - this is what the Hero's
   flex-centred content column measures for layout purposes. The actual
   card below is position:absolute *within* this box, free to grow past
   the reservation when the filters panel opens without changing it - so
   opening filters can never reflow/shift the heading or CTAs above the
   search box, regardless of how tall the card gets. See .art-prop-search
   below. */
.art-pm-hero__search--compact {
	background: transparent;
	height: 10.375rem;
	max-width: 100%;
	padding: 0;
	position: relative;
}

/* The whole card - tabs, pill, AND the filters panel are all one unified
   box (filters render inside it, in normal flow, same as any other
   content - see hero-search-filters.js), so there's only ever one
   border/shadow/radius to keep in sync, no separate piece to align with a
   seam. overflow:hidden clips the edge-to-edge tabs row to the top
   corners and the pill/chips to the bottom ones, and the box's own height
   naturally grows to fit the filters panel when it opens - it's just
   auto-height block content, not constrained by the wrapper's fixed
   height above (that fixed height is what stays put; this card is
   positioned independently over it). */
/* Two layers, not one flat shadow - a tight, darker "contact" shadow close
   to the edge plus a larger, softer, more spread-out one further out reads
   as a more deliberate/premium elevation than a single box-shadow does. */
.art-pm-hero__search--compact .art-prop-search {
	background: rgb(52 52 52 / 90%);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 20px;
	box-shadow:
		0 2px 6px rgba(0, 0, 0, 0.2),
		0 30px 60px rgba(0, 0, 0, 0.3);
	inset-inline: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
}

/* Belt-and-suspenders: this design has no visible field labels anywhere -
   placeholder / blank-option text carries the field name instead. If "Show
   Label" ever gets ticked on a field, hide the label rather than let it
   break the layout. */
.art-pm-hero__search--compact .art-prop-search__field > label {
	display: none;
}

/* Department tabs - full-width row. Active tab reads as part of the dark
   card behind it (underlined); inactive tabs are solid yellow blocks. */
/* gap reveals the card's own dark background as the divider between tabs,
   rather than a hairline border/shadow drawn on each tab - a real gap
   reads as a bigger, more deliberate separation than a 1px line does. */
.art-pm-hero__search--compact .art-prop-search__dept-tabs {
	border-bottom: 1px solid rgb(52 52 52 / 90%);
	flex-wrap: nowrap;
	gap: 1px;
	margin-block-end: 0;
}

.art-pm-hero__search--compact .art-prop-search__dept-tab {
	background: rgb(245 217 48 / 90%);
	border: none;
	border-radius: 0;
	color: #1a1a1a;
	flex: 1 1 0;
	font-size: 0.8125rem;
	height: 3rem;
	letter-spacing: 0.05em;
	min-width: 0;
	text-decoration: none;
	text-transform: uppercase;
}

/* Active tab reads as part of the dark card behind it, with a short
   underline hugging the text (not a full-width bar under the whole tab) -
   text-decoration naturally only decorates the visible text, skipping the
   radio input itself. :has(...:checked) is the only trigger now - the
   server-rendered .is-active class used to also be listed here, but since
   it's never removed after the visitor picks a different tab (selection is
   native radio behaviour, nothing left to update a class), the original
   department stayed permanently highlighted alongside the actually-checked
   one. */
.art-pm-hero__search--compact .art-prop-search__dept-tab:has(input:checked) {
	background: rgb(52 52 52 / 90%);
	color: #fff;
	text-decoration: underline;
	text-decoration-color: var(--color-accent, #f5d930);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.8em;
}

.art-pm-hero__search--compact .art-prop-search__dept-tab:has(input:focus-visible) {
	outline: 2px solid #fff;
	outline-offset: -3px;
}

/* Search bar pill - Location + Radius ("Distance") + Search, always
   visible. The submit button is handled separately below - it floats
   inset within the pill rather than filling it edge-to-edge. */
.art-pm-hero__search--compact .art-prop-search__form {
	align-items: stretch;
	background: #fff;
	border-radius: 16px;
	flex-wrap: nowrap;
	gap: 0;
	margin: 1.25rem;
	margin-bottom: 12px;
	overflow: hidden;
}

.art-pm-hero__search--compact .art-prop-search__field {
	min-width: 0;
}

.art-pm-hero__search--compact .art-prop-search__control {
	border: none;
	border-radius: 0;
	height: 4rem;
}

.art-pm-hero__search--compact .art-prop-search__field--address_keyword {
	align-items: center;
	display: flex;
	flex: 1 1 auto;
}

.art-pm-hero__search--compact .art-prop-search__field--radius {
	border-inline-start: 1px solid #e5e5e5;
	flex: 0 0 auto;
}

.art-pm-hero__search--compact .art-prop-search__field--radius .art-prop-search__control {
	width: auto;
}

/* The button itself carries its own border-radius/shadow since it's meant
   to float inset - a shorter pill with white showing all round it, not one
   flush against the outer pill's own edges. */
.art-pm-hero__search--compact .art-prop-search__field--submit {
	align-items: center;
	display: flex;
	flex: 0 0 auto;
	padding-inline-end: 0.375rem;
}

/* Hides the "extra" fields (Type/Beds/Price/sold-let) up front, before
   hero-search-filters.js has grouped them into the collapsible panel below -
   otherwise every field flashes inline for a moment while that (deferred)
   script is still loading. Gated on the `art-pm-hero-js` class functions.php
   adds via a synchronous marker script placed just ahead of this form in the
   page, so it only ever hides content that JS is actually about to move -
   without it the fields never get grouped and must stay visible, hence no
   plain (JS-independent) version of this rule. Scoped to a direct child of
   the form (`>`) rather than just .art-prop-search__field, so once JS
   reparents a field into .art-pm-hero-search-filters it stops matching and
   reverts to visible - see the panel's own field rules further below.
   Radius ("Distance") is excluded here because on desktop the JS never
   moves it - it stays in the bar permanently. */
html.art-pm-hero-js
	.art-pm-hero__search--compact
	.art-prop-search__form
	> .art-prop-search__field:not(.art-prop-search__field--address_keyword):not(.art-prop-search__field--radius):not(
		.art-prop-search__field--submit
	) {
	display: none;
}

/* On mobile, hero-search-filters.js's boundary check also moves Radius into
   the panel (see the script's own comment) - without this, Radius would
   flash visible in the bar for a moment before JS relocates it, same FOUC
   the rule above already prevents for Type/Beds/Price. Media-scoped to
   match the JS's own matchMedia check (47.9375em = 767px). */
@media (max-width: 47.9375em) {
	html.art-pm-hero-js .art-pm-hero__search--compact .art-prop-search__form > .art-prop-search__field--radius {
		display: none;
	}
}

.art-pm-hero__search--compact .art-prop-search__submit {
	background: var(--color-accent, #f5d930);
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: var(--art-radius-round, 999px);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
	color: #1a1a1a;
	font-size: 0.875rem;
	height: 3rem;
	min-width: 6.5rem;
}

/* Once relocated into the filters panel (mobile only, see
   hero-search-filters.js), Radius should look like any other panel chip
   instead of keeping its bar-specific fixed width/divider - the two rules
   above only make sense next to Location/Search in the bar. Equal
   specificity to those, later in source, so this wins for the panel case
   without needing !important. */
.art-pm-hero-search-filters .art-prop-search__field--radius {
	border-inline-start: none;
	flex: 1 1 7.5rem;
}

.art-pm-hero-search-filters .art-prop-search__field--radius .art-prop-search__control {
	width: 100%;
}

/* Filters toggle - plain text row directly beneath the pill, opens the
   collapsible panel below it. Injected by assets/js/hero-search-filters.js,
   so it only exists once that script has run - the form still works with
   every field inline if it hasn't. No top margin here - the gap above it
   is entirely the pill's own margin-bottom (12px, tightened from the
   default 1.25rem), since adjacent block-sibling margins would otherwise
   collapse to whichever is larger. Height contribution (~2.125rem: 12px
   gap + ~1.125rem text line + 1.25rem bottom margin) is baked into
   .art-pm-hero__search--compact's fixed height reservation above. */
.art-pm-hero-search-filters-toggle {
	align-items: center;
	background: none;
	border: none;
	color: #fff;
	cursor: pointer;
	display: flex;
	font-size: 0.8125rem;
	gap: 0.4rem;
	letter-spacing: 0.02em;
	margin: 0 auto 1.25rem 1.45rem;
	padding: 0;
	transition: color 0.15s ease;
	width: fit-content;
}

.art-pm-hero-search-filters-toggle svg {
	flex-shrink: 0;
	height: 0.9rem;
	width: 0.9rem;
}

.art-pm-hero-search-filters-toggle:hover,
.art-pm-hero-search-filters-toggle[aria-expanded='true'] {
	color: var(--color-accent, #f5d930);
}

/* Collapsible filters panel (Type / Min Beds / Min Price / Max Price / the
   sold-let checkbox) - a normal in-flow child of the card (see .art-prop-
   search above), same as the pill. grid-rows 0fr/1fr animates the height
   open without any JS measuring; the card's own height simply grows to
   fit it, same as any other auto-height block content - no separate
   background/border/radius needed here, it's all one box. Same inline
   margin as the pill above so the chips line up with it. */
.art-pm-hero-search-filters {
	display: grid;
	grid-template-rows: minmax(0, 0fr);
	margin-inline: 1.25rem;
	transition: grid-template-rows 0.3s ease;
}

.art-pm-hero-search-filters.is-open {
	grid-template-rows: minmax(0, 1fr);
}

/* Page Modules' Hero scroll-cue button (.art-pm-hero__down-arrow) is
   position:absolute, pinned 60px from the *Hero section's* own bottom edge
   - it has no idea this card can grow taller than that reservation. The
   search card itself (.art-prop-search) is also position:absolute and
   free to grow past its fixed-height wrapper when this panel opens (see
   .art-pm-hero__search--compact above), so an open panel can extend past
   where the Hero's own bottom used to be, landing the now-misplaced arrow
   directly on top of the panel's chips instead of below the card. Hiding
   the arrow while a panel's open is simpler and safer than trying to
   reposition a shared Page Modules element from here. .art-pm-hero is the
   Hero section itself - the nearest ancestor that actually contains both
   this panel and the down-arrow as descendants. */
.art-pm-hero:has(.art-pm-hero-search-filters.is-open) .art-pm-hero__down-arrow {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

/* flex, not CSS grid auto-fit: auto-fit sizes columns by how many
   7.5rem-minimum tracks FIT the row's width, not by how many chips
   actually exist - on a wide/full-width card that created several empty
   trailing tracks, leaving real chips clustered on the left with blank
   space after them. Flex distributes space among however many chips
   there actually are, so they always fill the row evenly regardless of
   count or container width. */
.art-pm-hero-search-filters__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	min-height: 0;
	overflow: hidden;
	padding-block-end: 1.25rem;
}

/* overflow:hidden here (not just on __inner above) clips each chip's own
   select/input to the chip's rounded shape - without it the control's own
   square corners show past the rounded wrapper since nothing masks them. */
.art-pm-hero-search-filters .art-prop-search__field {
	background: #fff;
	border-radius: 10px;
	flex: 1 1 7.5rem;
	margin: 0;
	overflow: hidden;
}

.art-pm-hero-search-filters .art-prop-search__control {
	overflow: hidden;
	padding-inline: 1.25rem 2rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Sold/let checkbox reads directly on the dark card, not as a white chip
   like the dropdowns - overrides the generic chip rule above.
   flex-basis:100% forces it onto its own line below the chips (nothing
   else fits beside it once it claims the full row width), rather than
   competing with them for a share of the row and truncating its own
   label text. */
.art-pm-hero-search-filters .art-prop-search__field--toggle {
	align-items: center;
	background: none;
	color: #fff;
	display: flex;
	flex-basis: 100%;
	gap: 0.5rem;
	justify-content: flex-start;
}

/* Browser default checkbox styling is a thin, near-invisible outline
   against a dark background - accent-color + explicit sizing makes it
   actually readable, and !important beats the inline style="margin-right"
   PropertyHive renders directly on the element. */
.art-pm-hero-search-filters .art-prop-search__field--toggle input[type='checkbox'] {
	accent-color: var(--color-accent, #f5d930);
	height: 1.125rem;
	margin: 0 !important;
	width: 1.125rem;
}

@media (max-width: 47.9375em) {
	.art-pm-hero__search--compact .art-prop-search__dept-tab {
		font-size: 0.6875rem;
		padding-inline: 0.375rem;
	}

	.art-pm-hero-search-filters__inner {
		grid-template-columns: repeat(2, 1fr);
	}

	/* At 2-per-row, each chip only has ~half the width it gets on wider
	   screens - the default 1.25rem/2rem side padding plus full-size text
	   left "Min Bedroom" no room to actually fit, clipping mid-word with no
	   ellipsis (the ellipsis rule on .art-prop-search__control now at least
	   makes that graceful, but tightening padding + font-size here means it
	   mostly doesn't need to truncate at all). 2rem end-padding was sized
	   for the chevron on a much wider control; 1.5rem is still enough
	   clearance for it. */
	.art-pm-hero-search-filters .art-prop-search__control {
		font-size: 0.8125rem;
		padding-inline: 0.875rem 1.5rem;
	}

	/* Search button loses its label in favour of a magnifying-glass icon -
	   the bar barely has room for Location once Distance moves into the
	   panel (see hero-search-filters.js) without also giving Search back
	   the width its text needs. font-size: 0 hides the text visually while
	   keeping it as the button's accessible name (unlike display:none/
	   visibility:hidden, which would strip it from the accessibility tree
	   entirely) - standard icon-button technique. */
	.art-pm-hero__search--compact .art-prop-search__submit {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
		background-position: center;
		background-repeat: no-repeat;
		background-size: 1.125rem;
		font-size: 0;
		min-width: 3rem;
		padding: 0;
		width: 3rem;
	}
}

/* Student tab - Studio/1 Bed/2 Bed... links instead of the search form.
   Injected server-side (see functions.php) as a sibling of .art-prop-
   search__form, .art-pm-hero-search-filters-toggle and .art-pm-hero-
   search-filters, all inside the same .art-prop-search card. The swap is
   pure CSS reacting to the Student radio's :checked state - same
   :has(...:checked) technique already used above to highlight the active
   tab - so it works with no page reload and no extra JS.

   The extra :has(.art-prop-search__student-beds) condition on the hide
   rules below is a safety fallback: functions.php always injects the
   .art-prop-search__student-beds div (the full Studio to 9+ set) once it
   can resolve the Student tab and form action. If it can't (markup
   changed, tab renamed), that div is never rendered, so this condition
   never matches and the normal search form stays visible instead of
   leaving the card empty. */
.art-pm-hero__search--compact .art-prop-search__student-beds {
	display: none;
}

.art-pm-hero__search--compact
	.art-prop-search:has(.art-prop-search__dept-tab--student input:checked):has(.art-prop-search__student-beds)
	.art-prop-search__form,
.art-pm-hero__search--compact
	.art-prop-search:has(.art-prop-search__dept-tab--student input:checked):has(.art-prop-search__student-beds)
	.art-pm-hero-search-filters-toggle,
.art-pm-hero__search--compact
	.art-prop-search:has(.art-prop-search__dept-tab--student input:checked):has(.art-prop-search__student-beds)
	.art-pm-hero-search-filters {
	display: none;
}

.art-pm-hero__search--compact .art-prop-search:has(.art-prop-search__dept-tab--student input:checked) .art-prop-search__student-beds {
	display: flex;
}

.art-pm-hero__search--compact .art-prop-search__student-beds {
	flex-wrap: wrap;
	margin: 1.25rem;
}

.art-pm-hero__search--compact .art-prop-search__student-bed {
	align-items: center;
	border-inline-start: 1px solid rgba(255, 255, 255, 0.15);
	color: #fff;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.4rem;
	padding: 0.5rem 0.75rem;
	text-decoration: none;
	transition: color 0.15s ease;
}

.art-pm-hero__search--compact .art-prop-search__student-bed:first-child {
	border-inline-start: none;
}

.art-pm-hero__search--compact .art-prop-search__student-bed:hover,
.art-pm-hero__search--compact .art-prop-search__student-bed:focus-visible {
	color: var(--color-accent, #f5d930);
}

.art-pm-hero__search--compact .art-prop-search__student-bed svg {
	height: 1.6rem;
	width: 2.1rem;
}

.art-pm-hero__search--compact .art-prop-search__student-bed span {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-align: center;
	text-transform: uppercase;
}

@media (max-width: 47.9375em) {
	.art-pm-hero__search--compact .art-prop-search__student-bed {
		flex: 1 1 20%;
		padding: 0.5rem 0.25rem;
	}

	.art-pm-hero__search--compact .art-prop-search__student-bed span {
		font-size: 0.5625rem;
	}
}

.art-pm-module--property-slider .art-pm-module__dept-tab.is-active {
	color: var(--art-color-text);
}
.oakmans-highlight-cards .art-pm-module__content-multi-card {
	background-color: #f6d932;
}
.oakmans-highlight-cards img {
	max-width: 78px;
	margin: 0 0 -15px 0;
}

/* Hero "Select Bedrooms" panel — post 1565 only (see functions.php,
   oakmans_render_select_bedrooms_panel()). Rendered via the
   art_division_page_modules_after_hero_content action, i.e. as a normal-flow
   sibling immediately after .art-pm-hero__content (not position: absolute),
   so it sits directly under the heading/CTAs and follows the Hero's own
   Vertical Align setting (top/middle/bottom) as one group with them, rather
   than being pinned to a fixed offset from the section's bottom edge
   regardless of where the text ends up.

   The text-shadow below (no background backdrop) is what keeps the white
   text/borders legible against this Hero's bright daytime aerial photo.

   position: relative is required, not cosmetic: .art-pm-hero__bg/__overlay
   are position: absolute, which makes them paint above any later *non-
   positioned* sibling regardless of DOM order - without this, the panel
   rendered behind the background image. z-index: 2 matches the plugin's
   own .art-pm-hero__content rule (same problem, same fix) - position:
   relative alone still left the white pill text/borders washed out behind
   .art-pm-hero__overlay on this Hero, position: relative + z-index: auto
   isn't enough to guarantee this panel's stacking order wins over a sibling
   that's also positioned; an explicit z-index above the overlay's own is. */
.art-pm-hero__select-bedrooms {
	margin: 0 auto;
	max-width: 48rem;
	padding-inline: 1.5rem;
	position: relative;
	text-align: center;
	z-index: 2;
}

.art-pm-hero__select-bedrooms-heading {
	align-items: center;
	color: #fff;
	display: flex;
	font-size: 0.8125rem;
	font-weight: 600;
	gap: 1rem;
	justify-content: center;
	letter-spacing: 0.25em;
	margin: 0 auto 1rem;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
	text-transform: uppercase;
}

.art-pm-hero__select-bedrooms-heading::before,
.art-pm-hero__select-bedrooms-heading::after {
	border-top: 1px solid rgba(255, 255, 255, 0.6);
	content: '';
	flex: 1 1 auto;
}

.art-pm-hero__select-bedrooms-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
}

.art-pm-hero__select-bedrooms-pill {
	background: transparent;
	border: 1px solid #fff;
	border-radius: 999px;
	color: #fff;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1;
	min-width: 2.75rem;
	padding: 0.65rem 1rem;
	text-decoration: none;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
	transition:
		background-color 0.15s ease,
		color 0.15s ease;
}

.art-pm-hero__select-bedrooms-pill:hover,
.art-pm-hero__select-bedrooms-pill:focus-visible {
	background-color: var(--color-accent, #f5d930);
	border-color: var(--color-accent, #f5d930);
	color: #1a1a1a;
	text-shadow: none;
}

@media (max-width: 47.9375em) {
	.art-pm-hero__select-bedrooms {
		padding-inline: 1rem;
	}

	.art-pm-hero__select-bedrooms-heading {
		font-size: 0.6875rem;
		gap: 0.625rem;
		letter-spacing: 0.15em;
		margin-bottom: 0.75rem;
	}

	.art-pm-hero__select-bedrooms-pills {
		gap: 0.5rem;
	}

	.art-pm-hero__select-bedrooms-pill {
		font-size: 0.75rem;
		min-width: 2.25rem;
		padding: 0.5rem 0.75rem;
	}
}
.art-prop-card__price {
	color: var(--art-color-text);
}
.oakmans-instant-valuation {
	padding-top: 0;
	padding-bottom: 0;
	height: 125px;
}
.oakmans-instant-valuation h2 {
	font-size: 2rem;
}

/* Below 768px, Repeatables' own .art-rep-cta__row switches from a single
   row to a stacked column (title above button) - the fixed 125px height
   above was sized for the one-row desktop layout only. Since it's a hard
   height (not min-height) on a centred flex container, stacked content
   taller than 125px overflows equally above/below the box instead of
   growing it, spilling into the hero image above. Swap to min-height and
   restore some vertical breathing room so the stacked content pushes the
   band open instead of overflowing it. */
@media (max-width: 768px) {
	.oakmans-instant-valuation {
		height: auto;
		min-height: 125px;
		padding-top: 1.5rem;
		padding-bottom: 1.5rem;
	}

	.oakmans-instant-valuation h2 {
		font-size: 1.5rem;
	}
}
.art-pm-market-stats__value {
	color: var(--art-color-text);
}
/* Primary buttons on an Accent-coloured section (Page Modules' bg-secondary,
   which the module picker now labels "Accent" - see
   [[project_theme_colour_primary_accent_rename]]) sit on the same yellow as
   the button itself would otherwise darken to, so the normal hover state
   barely reads. Go transparent instead and let the border (already
   --color-btn-primary-border on the resting state) carry the hover, so the
   button reads as an outline against the accent background. */
.art-pm-module--bg-secondary .art-btn--primary:hover,
.art-pm-module--bg-secondary .art-btn--primary:focus-visible,
.art-rep-module--cta--bg-secondary .art-btn--primary:hover,
.art-rep-module--cta--bg-secondary .art-btn--primary:focus-visible {
	background-color: transparent;
	border-color: var(--color-btn-primary-border);
}
/* Hero CTA buttons on Areas We Cover and Branches singles - white border on
   hover/focus so the outline reads clearly against the hero's background
   image, instead of the default theme colour border. Written when Hero CTAs
   only ever had primary/secondary styling, so it targeted every .art-btn;
   excluding --outline now that it's a real style with its own configured
   hover border (Theme Settings > Buttons > Outline Button) - this rule was
   overriding that with a hardcoded white regardless of what's set there. */
.single-area .art-pm-hero__ctas .art-btn:not(.art-btn--outline):hover,
.single-area .art-pm-hero__ctas .art-btn:not(.art-btn--outline):focus-visible,
.single-branch .art-pm-hero__ctas .art-btn:not(.art-btn--outline):hover,
.single-branch .art-pm-hero__ctas .art-btn:not(.art-btn--outline):focus-visible {
	border-color: #ffffff;
}
/* Maybe add to parent theme, opinionated styles */
/* .site-footer p,
.site-footer li,
.site-footer dd,
.site-footer dt {
    line-height: 1.6;
} */

/* Content Multi Timeline/Timeline Cards connecting lines - on a bg-alternate
   section the parent theme's default grey line (var(--art-color-border))
   reads too faint against the grey background, so switch it to white there.
   Only the lines/tick, not the marker circle's own border - that wasn't
   asked for and still reads fine in grey. */
.art-pm-module--bg-alternate .art-pm-module__content-multi-timeline-connector,
.art-pm-module--bg-alternate .art-pm-module__content-multi-timeline-cards-line,
.art-pm-module--bg-alternate .art-pm-module__content-multi-timeline-cards-tick {
	background-color: #ffffff;
}

.art-pm-module--bg-alternate .art-pm-module__content-multi-timeline-cards-rail::after {
	background-color: #ffffff;
}
/* End Maybe add to parent theme, opinionated styles */

/* =========================================
   HEADER PROPERTY SEARCH POPUP
   "Find your property" pill redesign — see functions.php for the "oakmans"
   Popup Style registration (art_division_property_modules_nav_search_*
   hooks). Base overlay/backdrop/panel/close-button box already comes from
   the parent theme's default "centered" style (see art-division/style.css);
   everything below only restyles the panel's contents and the panel itself,
   scoped under the --oakmans modifier class so it can't affect any other
   site using the shared plugin's default style.
   ========================================= */

.art-nav-property-search--oakmans .art-nav-property-search__panel {
	background: #faf8f2;
	border-radius: 28px;
	padding: 2.75rem;
}

.art-nav-property-search--oakmans .art-nav-property-search__inner {
	gap: 0;
}

.art-nav-property-search--oakmans .art-nav-property-search__title {
	color: #232323;
	font-family: var(--font-heading);
	font-size: clamp(1.75rem, 4vw, 2.25rem);
	letter-spacing: -1.4px;
	line-height: 1.15;
	margin: 0 0 0.75rem;
}

.art-nav-property-search--oakmans .art-nav-property-search__subtitle {
	color: #6b6b6b;
	font-size: 1rem;
	line-height: 1.5;
	margin: 0 0 1.75rem;
}

.art-nav-property-search--oakmans .art-nav-property-search__field {
	position: relative;
}

.art-nav-property-search--oakmans .art-nav-property-search__field-icon {
	color: #9a9a9a;
	height: 1.125rem;
	left: 1.125rem;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 1.125rem;
}

/* Placeholder text carries the field's purpose (matching the reference
   design, which has no visible label) — the real <label> stays in the DOM
   for screen readers rather than being removed. */
.art-nav-property-search--oakmans .art-nav-property-search__label {
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	margin: 0;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

.art-nav-property-search--oakmans .art-nav-property-search__input {
	background: #ffffff;
	border-color: #e5e3dc;
	border-radius: 14px;
	padding-block: 1rem;
	padding-inline-start: 2.75rem;
}

.art-nav-property-search--oakmans .art-nav-property-search__departments {
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.art-nav-property-search--oakmans .art-nav-property-search__dept-btn {
	background-color: #efeee8;
	border-color: transparent;
	border-radius: 14px;
	color: #232323;
	flex: 1 1 0;
	font-weight: 600;
	min-width: 0;
	padding-block: 1rem;
}

.art-nav-property-search--oakmans .art-nav-property-search__dept-btn:hover,
.art-nav-property-search--oakmans .art-nav-property-search__dept-btn:focus-visible {
	background-color: #e5e3da;
	border-color: transparent;
	color: #232323;
}

.art-nav-property-search--oakmans .art-nav-property-search__dept-btn.is-default {
	background-color: var(--color-accent, #f5d930);
}

.art-nav-property-search--oakmans .art-nav-property-search__dept-btn.is-default:hover,
.art-nav-property-search--oakmans .art-nav-property-search__dept-btn.is-default:focus-visible {
	background-color: color-mix(in srgb, var(--color-accent, #f5d930) 85%, black);
}

@media (max-width: 480px) {
	.art-nav-property-search--oakmans .art-nav-property-search__panel {
		padding: 2.25rem 1.5rem;
	}

	.art-nav-property-search--oakmans .art-nav-property-search__dept-btn {
		font-size: 0.8125rem;
		padding-inline: 0.75rem;
	}
}

/* Single property summary rows (title/price/badges) - un-centres a multi-
   block row's cross-axis alignment. Deliberately global (not scoped to the
   Feature header) since .art-prop-single__custom-row--multi is the generic
   Summary Layout block builder's row class, shared by every header style. */
.art-prop-single__custom-row--multi {
	align-items: normal;
}

/* =========================================
   SINGLE PROPERTY — FEATURE IMAGE HEADER
   Restyles Art Division Property Modules' "Feature" header (Property
   Settings > Single Property > Header Style): a full-width Alternate-colour
   strip (matching Page Modules' own bg-alternate, --art-color-alternate —
   no rounding/overflow-hidden on the strip itself, so it reads as truly
   full width rather than an inset card) behind the info panel and photo,
   the photo itself rounded to the site's own configured radius and inset
   within the strip, nav buttons moved to the photo's bottom-right corner,
   and a "1 / N" counter bottom-left. See assets/js/property-feature-
   header.js for the counter (no existing slide-index state to read) and the
   CTA's sitewide button classes.
   ========================================= */

/* .site (parent theme) caps the whole page at --art-site-max-width and
   centres it with auto margins, so this element's own box never actually
   reaches the browser viewport edge even at 100% width - the box-shadow/
   clip-path pair below is the standard "full-bleed without a wrapper div"
   trick: a huge shadow spread paints the background out to the viewport
   edge on both sides while the element's own box (and its grid columns)
   stay exactly where they are; clip-path stops that spread from adding
   horizontal scroll, so no overflow-x:hidden is needed anywhere upstream. */
.art-prop-images--feature {
	background: var(--art-color-alternate, #f5f5f5);
	box-shadow: 0 0 0 100vmax var(--art-color-alternate, #f5f5f5);
	clip-path: inset(0 -100vmax);
	gap: 1.5rem;
	/* Cancels .art-prop-archive__wrapper's own padding-top (2rem default,
	   exposed as this exact variable so a full-bleed image style can pull
	   itself back up flush under the header) - same technique the plugin's
	   own "Columns" header style (.art-prop-images--strip) already uses for
	   the same reason, see its CSS comment. Without it this strip started
	   2rem below the navbar instead of flush against it, since this style's
	   Alternate background is what makes that gap visible in the first
	   place - it was always there, just invisible against a near-white
	   default background. */
	margin-top: calc(-1 * var(--art-prop-archive-wrapper-pt, 0px));
	padding-block: 4rem;
}

/* Dark grey instead of the plugin's default accent (yellow) - yellow reads
   as too loud for a small utility link sitting right under the navbar. */
.art-prop-images--feature .art-prop-images__back-to-search {
	color: #343336;
}

/* Transparent so the shared strip background above shows through instead of
   the plugin's own slightly different near-white fill sitting beside it.
   gap: 30px replaces the plugin's own per-block margins (info-panel's own
   .art-prop-single__custom margin-block-end + the CTA link's own top
   margin) with one consistent rhythm between the title/price/badges group
   and the "Arrange a Viewing" button below it, matching the reference. */
.art-prop-images--feature .art-prop-images__info-panel {
	background: transparent;
	gap: 30px;
}

/* Same reasoning as above, one level down: turns the title/price/badges
   stack into its own flex column so the 30px rhythm is even between rows
   too, rather than the plugin's smaller fixed row margin
   (.art-prop-single__custom-row's own margin-block-end: 0.75rem, reset to
   0 here since the gap now owns that spacing). */
.art-prop-images--feature .art-prop-single__custom {
	display: flex;
	flex-direction: column;
	gap: 30px;
	margin: 0;
}

.art-prop-images--feature .art-prop-single__custom-row {
	margin: 0;
}

/* Title sized past the plugin's own clamp() ceiling (1.6rem) to match the
   reference. */
.art-prop-images--feature .art-prop-images__info-panel h1.property_title {
	font-size: 2.2rem;
}

.art-prop-images--feature .art-prop-images__img {
	border-radius: var(--art-radius, 0);
}

/* Thumbnail strip no longer needs a background override here - Property
   Modules 1.5.87 renders it as a sibling outside .art-prop-images--feature
   entirely (see that plugin's own image-header-feature.php docblock), so
   it already sits on the plain page background with no Alternate bleed to
   paint over. */

/* "FOR SALE" / "Apartment" — plain text and a plain icon+label instead of
   the plugin's default yellow badge-tag chip / grey badge-meta pill,
   matching the reference design (still distinguished from "Leasehold" by
   weight/colour, just no filled background). */
.art-prop-images--feature .art-prop-single__badge-tag {
	border-radius: 5px;
	color: var(--art-color-text, #1a1a1a);
	font-weight: 600;
}

.art-prop-images--feature .art-prop-single__badge-meta {
	background: transparent;
	padding: 0;
}

/* Price sized slightly past the plugin's own clamp() ceiling (2rem) to match
   the reference, and the tenure label nudged back up to the price's
   cap-height baseline now that the price itself sits taller. */
.art-prop-images--feature .price {
	font-size: 2.1rem;
}

.art-prop-images--feature .art-prop-single__tenure-text {
	position: relative;
	top: -6px;
}

/* Now that the row's own align-items is un-centred (see the global
   .art-prop-single__custom-row--multi rule above), the tenure block needs
   its own cross-axis alignment so it still sits at the price's baseline
   instead of the row's top. */
.art-prop-images--feature .art-prop-single__custom-block--tenure_tag {
	align-self: end;
}

.art-prop-images--feature .art-prop-images__nav {
	bottom: 1rem;
	top: auto;
	transform: none;
}

.art-prop-images--feature .art-prop-images__nav--prev {
	left: auto;
	right: 4rem;
}

.art-prop-images--feature .art-prop-images__nav--next {
	right: 1rem;
}

/* "Arrange a Viewing" — property-feature-header.js adds the real
   .art-btn/.art-btn--secondary classes so hover-animation always matches
   Theme Settings > Buttons. Radius AND colour are set directly here instead
   of relying on that JS + .art-btn/.art-btn--secondary's own rules, after
   radius-only twice failed to actually render rounded (stayed square even
   once the classes were confirmed correct) - suspect a caching layer
   serving a stale copy of this one element rather than a real CSS conflict,
   but targeting the plugin's own always-present .art-prop-images__info-cta
   class directly (not .art-btn, which depends on the JS having run) removes
   that dependency either way. The plugin's own base .art-prop-images__info-
   cta rule (art-division-property-modules.css) hardcodes an accent-colour
   background at the same specificity as .art-btn--secondary, so which one
   wins depends on stylesheet load order rather than intent - colour is
   pinned here, at higher specificity, for the same reliability reason as
   radius. Values mirror .art-btn--secondary itself (Art-Division/style.css)
   so this still tracks the site's actual Secondary button colour, and
   .art-btn-shape-rounded's own rule so it still tracks Button Shape -
   compare against the Image & Text module's "Contact Us" button, which is
   the same pill. */
.art-prop-images--feature .art-prop-images__info-cta {
	background-color: var(--color-btn-secondary-bg, #666666);
	border: 1px solid var(--color-btn-secondary-border, #666666);
	border-radius: var(--art-radius, 0);
	color: var(--color-btn-secondary-text, #ffffff);
	margin-top: 20px;
}

body.art-btn-shape-rounded .art-prop-images--feature .art-prop-images__info-cta {
	border-radius: 9999px;
}

.art-prop-images--feature .art-prop-images__info-cta.art-btn {
	letter-spacing: normal;
}

.art-prop-images--feature .art-prop-images__info-cta:hover,
.art-prop-images--feature .art-prop-images__info-cta:focus-visible {
	background-color: var(--color-btn-secondary-bg-hover, #1a1a2e);
	border-color: var(--color-btn-secondary-border-hover, #1a1a2e);
	color: var(--color-btn-secondary-text-hover, #ffffff);
}

.art-prop-images--feature .art-prop-images__info-cta.art-btn:hover,
.art-prop-images--feature .art-prop-images__info-cta.art-btn:focus-visible {
	opacity: 1;
}

/* 1300px (81.25em), matching Property Modules' own updated breakpoint for
   this component (art-division-property-modules.css) - not the site's
   usual 47.9375em. */
@media (max-width: 81.25em) {
	/* No padding-inline here any more (was 1.25rem) - it was stacking on
	   top of the info panel's own clamp() padding for no reason (the panel
	   already insets its own text/CTA), and the slider panel's full-bleed
	   breakout (Property Modules 1.7.8+) cancels ancestor padding on its
	   own regardless of what this is set to, so it was never doing
	   anything for the photo either. padding-block-start: 0 removes the
	   4rem gap above the now edge-to-edge photo (order:-1 puts it first on
	   mobile) - padding-block-end stays at the base rule's 4rem so the info
	   panel below still has its usual breathing room before the next
	   section. */
	.art-prop-images--feature {
		padding-block-start: 0;
	}

	/* Tighter than the desktop 30px rhythm (set above) between the
	   title/price/badges rows at this width. */
	.art-prop-images--feature .art-prop-single__custom {
		gap: 16px;
	}

	/* Image-first mobile reorder moved into Property Modules itself (base
	   plugin CSS) since it applies to every site using this header style,
	   not just Oakmans - see that plugin's own mobile media query for
	   .art-prop-images--feature. */

	/* Smaller than the desktop-oversized 2.2rem above (set to match the
	   reference design on wider screens) - at this width the title wraps
	   to 3-4 lines at 2.2rem, taking up too much of the screen above the
	   fold. */
	.art-prop-images--feature .art-prop-images__info-panel h1.property_title {
		font-size: 1.7rem;
	}

	/* Info panel's own clamp(1.5rem,5%,3rem) side padding is now cancelled
	   globally (Property Modules 1.7.9's own mobile media query for
	   .art-prop-images--feature .art-prop-images__info-panel), so no
	   Oakmans-only override needed here any more. */

	/* CTA breaks out to the true screen edge on mobile - a full-width flat
	   bar instead of the inset rounded pill used everywhere else on the
	   page. The info panel no longer has its own side padding to cancel
	   (see above), so only the bottom margin still needs to pull the
	   button past the panel's own bottom padding to reach the container's
	   edge. Keeps the site's own button radius (no local border-radius
	   override any more - relies on .art-btn/Button Shape same as every
	   other CTA) rather than forcing it square just because it's edge-to-
	   edge. */
	.art-prop-images--feature .art-prop-images__info-cta {
		align-self: stretch;
		border-width: 0;
		margin: 1.5rem 0 calc(-1 * clamp(1.5rem, 5%, 3rem));
		padding-block: 1.1rem;
		text-align: center;
	}

	/* The photo now goes edge-to-edge (Property Modules 1.7.8's own mobile
	   full-bleed breakout for .art-prop-images__slider-panel) - a rounded
	   corner sitting flush against the screen edge would show the
	   background peeking through the notch, so cancel this style's own
	   desktop rounding (set earlier in this file) at this breakpoint. */
	.art-prop-images--feature .art-prop-images__img {
		border-radius: 0;
	}
}

/* Photo counter and thumbnail strip now come from Property Modules itself
   (1.5.8x+, image-header-feature.php + assets/css/art-division-property-
   modules.css: .art-prop-images__counter / __thumbs / __thumb / __thumb-
   more) - toggleable via Property Settings > Single Property Page. No
   Oakmans override needed; the plugin's default styling already matches
   this design (radius via --art-radius, thumbnails inherit the Alternate
   strip's background automatically since they're rendered inside
   .art-prop-images--feature). */

/* ValPal results video — see propertyhive/valpal-results.php. Sits above the
   valuation amounts, same width as the rest of the results panel. */
.oakmans-valpal-video {
	margin-bottom: 1.5rem;
}
.oakmans-valpal-video video {
	border-radius: 12px;
	display: block;
	max-width: 100%;
	width: 100%;
}

/* Property Actions (View Gallery / Floorplan / Virtual Tour / Add To
   Shortlist / Arrange a Viewing) - plain text tab strip instead of the
   plugin's own grey pill buttons (see Art-Division-Property-Modules'
   art-division-property-modules.css .property_actions ul li a), matching
   the reference design: a shared baseline under the whole row, the first
   action picked out with a bold accent-coloured underline, the rest muted
   and unobtrusive. Not a real switching-tabs interface - each action is
   independent (opens a lightbox/gallery/external link) - only borrowing
   the tab strip's visual language, so the "active" one is simply whichever
   renders first per Property Settings > Single Property Page > Property
   Actions, not a JS-driven state. */
/* margin-inline-start pulls the whole row left by exactly the first tab's
   own left padding (1.25rem, below) - each <a>'s padding gives it a
   comfortable click target, but that same padding also outdented the first
   tab's icon 1.25rem to the right of plain text content beside it (e.g.
   "Property Features" below, which has no padding of its own), reading as
   the two being slightly out of line rather than sharing one left edge. */
.property_actions ul {
	border-bottom: 2px solid var(--art-color-border, #e0e0e0);
	gap: 0;
	margin-inline-start: -1.25rem;
	margin-top: 0;
}

.property_actions ul li a {
	align-items: center;
	background-color: transparent;
	border: none;
	border-bottom: 3px solid transparent;
	border-radius: 0;
	color: var(--art-color-muted, #666666);
	display: inline-flex;
	font-size: var(--art-text-sm, 0.875rem);
	gap: 0.5em;
	margin-bottom: -2px;
	padding: 1rem 1.25rem;
}

/* Icons - one per action, keyed by the plugin's own stable action class
   (Property Modules' filter_property_actions()/build_gallery_action(), or
   PropertyHive core's own class for Virtual Tour) plus Oakmans' own
   action-overview (functions.php). Plain CSS masks (background-color:
   currentColor via mask-image) - the same self-contained technique as the
   AD Contact block's own phone icon (Art Division Blocks/blocks/contact/
   style.css) - rather than the site's Font Awesome icon library, so the
   icon always renders instead of depending on it having been imported into
   the active style. Scoped to only the classes below (not a blanket
   `.property_actions ul li a::before`) so Arrange a Viewing's own filled-
   button styling further down never picks up a stray icon box. Virtual
   Tour and Cinematic Video share the same play icon since PropertyHive's
   Virtual Tour add-on gives every tour instance the same action-virtual-
   tour class regardless of its own per-instance label. */
.property_actions ul li.action-overview a::before,
.property_actions ul li.action-gallery a::before,
.property_actions ul li.action-floorplans a::before,
.property_actions ul li.action-epc a::before,
.property_actions ul li.action-virtual-tour a::before,
.property_actions ul li.action-shortlist a::before {
	background-color: currentColor;
	content: '';
	display: inline-block;
	flex-shrink: 0;
	height: 1.1em;
	width: 1.1em;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.property_actions ul li.action-overview a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
}

.property_actions ul li.action-gallery a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpolyline points='21 15 16 10 5 21'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpolyline points='21 15 16 10 5 21'/%3E%3C/svg%3E");
}

.property_actions ul li.action-floorplans a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='3' y1='9' x2='21' y2='9'/%3E%3Cline x1='9' y1='21' x2='9' y2='9'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='3' y1='9' x2='21' y2='9'/%3E%3Cline x1='9' y1='21' x2='9' y2='9'/%3E%3C/svg%3E");
}

.property_actions ul li.action-epc a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cpolyline points='10 9 9 9 8 9'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cpolyline points='10 9 9 9 8 9'/%3E%3C/svg%3E");
}

.property_actions ul li.action-virtual-tour a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolygon points='10 8 16 12 10 16 10 8'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolygon points='10 8 16 12 10 16 10 8'/%3E%3C/svg%3E");
}

.property_actions ul li.action-shortlist a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
}

.property_actions ul li a:hover {
	background-color: transparent;
	border-bottom-color: var(--art-color-accent, #1a4a6b);
	color: var(--art-color-text, #1a1a1a);
}

.property_actions ul li a:focus-visible {
	outline-offset: -2px;
}

.property_actions ul li:first-child:not(.action-make-enquiry) a {
	border-bottom-color: var(--art-color-accent, #1a4a6b);
	color: var(--art-color-text, #1a1a1a);
	font-weight: 600;
}

/* Only one underline shows at a time - hovering any other tab hands the
   accent line over to it (see the general :hover rule above), so Overview's
   own permanent underline hides for as long as that hover lasts. */
.property_actions ul:has(li:not(:first-child) a:hover) li:first-child a {
	border-bottom-color: transparent;
}

/* Arrange a Viewing keeps its own filled CTA treatment (property_actions
   ul li.action-make-enquiry a in the plugin's own CSS) rather than joining
   the plain-text tab strip - it's the primary action on the row, not
   another info/media link. */
.property_actions ul li.action-make-enquiry a {
	border-bottom: none;
	border-radius: var(--art-radius, 0);
	margin-bottom: 0;
	padding: 0.625rem 1rem;
}

/* Mobile only: the desktop underline tab-strip above wraps into a messy
   multi-line row of icon+text pairs at phone widths, so this switches to a
   2-column grid of equal-width boxes instead (icon + label back, the
   plugin's own default look, just evenly gridded rather than flex-wrapped
   chips). Overview is dropped here too - it's Oakmans' own prepended
   scroll-anchor label (functions.php, oakmans_prepend_overview_action()),
   not a real feature, and the boxed layout has less room to spare for it
   than the desktop tab strip did. */
@media (max-width: 47.9375em) {
	.property_actions ul li.action-overview {
		display: none;
	}

	.property_actions ul {
		border-bottom: none;
		display: grid;
		gap: 0.75rem;
		grid-template-columns: 1fr 1fr;
		margin-inline-start: 0;
	}

	.property_actions ul li.action-make-enquiry {
		grid-column: 1 / -1;
	}

	/* Last action spans both columns when it'd otherwise sit alone in a
	   half-empty final row (odd total). :nth-child() counts Overview even
	   though it's display:none above, so its own presence has to be
	   accounted for separately - it's always the first item when present,
	   so "visible count is odd" becomes "total DOM count is even" with it,
	   or "total DOM count is odd" without it. Doesn't attempt to handle
	   Make Enquiry appearing mid-list (not last) - it isn't part of this
	   grid on Oakmans currently (its own Arrange a Viewing CTA covers that
	   role elsewhere), and it already always spans via its own rule above
	   regardless of what matches here. */
	.property_actions ul:has(.action-overview) li:last-child:nth-child(even),
	.property_actions ul:not(:has(.action-overview)) li:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	.property_actions ul li a {
		background-color: var(--art-color-surface, #f9fafb);
		border-bottom: none;
		border-radius: var(--art-radius, 8px);
		color: var(--art-color-text, #1a1a1a);
		font-weight: 400;
		margin-bottom: 0;
		padding: 0.85rem 1rem;
		width: 100%;
	}

	.property_actions ul li:first-child:not(.action-make-enquiry) a {
		font-weight: 400;
	}
}

/* Single property body - no longer boxed (border/radius/padding removed),
   just bottom spacing before whatever follows. .art-prop-single__body is
   the shared grid wrapper for both columns (Art-Division-Property-Modules/
   modules/property-single/single-property.php). */
.art-prop-single__body {
	margin-bottom: 60px;
}

/* Sidebar gutter - only where the columns actually sit side by side
   (matches the plugin's own has-sidebar 2-column breakpoint - 75.625em/
   1210px, not the usual 48em, since the sidebar's own fixed width squeezes
   the content column well before the site's normal desktop width, see
   art-division-property-modules.css). No divider border anymore. */
@media (min-width: 75.625em) {
	.art-prop-single--has-sidebar .art-prop-single__sidebar {
		padding-left: 2rem;
	}
}

/* Sidebar widgets (Get in Touch / AD Contact, AD Maps, Rental Affordability
   Calculator) - filled grey cards instead of each block's own default
   border-only/white styling, matching the reference. Overridden here
   rather than in each block's own CSS since AD Contact/AD Maps are shared
   across other placements (e.g. the single-property-cta split style) where
   the border-only treatment is the deliberately requested look - this only
   applies within the property sidebar context. */
.art-prop-single__sidebar .art-blocks-contact,
.art-prop-single__sidebar .art-blocks-map-card {
	background-color: var(--art-color-alternate, #f4f4f6);
	border: none;
}

.art-prop-single__sidebar .art-blocks-property-calculators .art-blocks-property-calculators__container {
	padding: 2rem;
}

.art-prop-single__sidebar .art-blocks-property-calculators__card {
	border-radius: var(--art-radius, 12px);
}

/* Tabs-style calculator panel - the plugin's default padding-block (2rem)
   reads as squashed right under the tab bar and right above the Calculate
   button; bumped up while leaving the horizontal padding as-is. */
.art-blocks-property-calculators.is-style-tabs .art-blocks-property-calculators__panels {
	padding-block: 3rem;
}

/* Tab labels sit right under the card's own rounded top edge by default
   (only the tab buttons' own 1rem padding separates them) - extra top
   padding on the row itself gives real breathing room above the text. */
.art-blocks-property-calculators.is-style-tabs .art-blocks-property-calculators__tablist {
	padding-top: 1rem;
}

/* Property Material Information's accordion rows (Additional Information /
   Energy Performance Certificate / Utilities, Rights & Restrictions) -
   each its own bordered white card (not filled) with a gap between them,
   instead of the plugin's own flat list with a border-bottom divider
   (which used --art-color-accent, the brand yellow here, reading as a
   stray underline rather than a divider). overflow:hidden clips the
   trigger's own hover/open fill (below) to the card's rounded corners.
   Scoped to .art-prop-mi__rows generally (not the --rows modifier alone) -
   Oakmans' actual property pages use the block's Accordion style, which
   carries the same shared .art-pm-module__accordion-* markup, so both
   style choices get the same boxed-card treatment. */
.art-prop-mi__rows .art-pm-module__accordion-item {
	background-color: var(--art-color-bg, #ffffff);
	border: 1px solid var(--art-color-border, #e5e7eb);
	border-radius: var(--art-radius, 12px);
	margin-bottom: 1rem;
	overflow: hidden;
}

.art-prop-mi__rows .art-pm-module__accordion-item:last-child {
	margin-bottom: 0;
}

/* Resets the shared accordion trigger's own hover-fill trick (negative
   margin-inline / wider-than-100% width, see Page Modules' own accordion
   CSS) - left as-is it would push the trigger (chevron included) past this
   card's own edges; overflow:hidden above only contains the fill itself,
   not the chevron sitting outside the card's visible bounds. */
.art-prop-mi__rows .art-pm-module__accordion-trigger {
	margin-inline: 0;
	padding: 1.25rem;
	width: 100%;
}

/* Chevron - dark (matching the trigger's own icon/title text) rather than
   the shared component's default accent colour, which read as an odd spot
   of brand yellow on an otherwise plain dark-on-white row. */
.art-prop-mi__rows .art-pm-module__accordion-trigger::after {
	border-right-color: var(--art-color-text, #1a1a1a);
	border-top-color: var(--art-color-text, #1a1a1a);
}

/* Grey fill on hover, and permanently while a row is open - not just
   hover, so the open row stays visually picked out once you've clicked it,
   not only while the cursor happens to be over it. */
.art-prop-mi__rows .art-pm-module__accordion-trigger:hover,
.art-prop-mi__rows .art-pm-module__accordion-item.is-open .art-pm-module__accordion-trigger {
	background-color: var(--art-color-alternate, #f3f4f6);
}

.art-prop-mi__rows .art-pm-module__accordion-content {
	padding: 0 1.25rem 1.25rem;
}

/* ── Popup Gravity Form dark re-skin ──────────────────────────────────────────
   Every "Book a Valuation"/"Arrange a Viewing"/etc. Gravity Form opened in the
   shared .art-modal popup (Theme/Blocks/Repeatables/Page Modules all use the
   same dialog.art-modal pattern) - re-styled to a dark card with bold white
   labels, plain white input fields and yellow accent controls, replacing the
   previously plain white-on-white popup look. Scoped with :has() to modals
   that actually contain a Gravity Form, so other .art-modal content (e.g. the
   ValPal embed) is untouched. Oakmans-only visual preference, not a shared
   plugin pattern - see feedback_site_specific_styling_goes_in_child_theme. */

dialog.art-modal:has(.gform_wrapper) {
	background: #343336;
	border: 1px solid #ffffff;
	max-width: min(740px, calc(100vw - 2rem));
}

dialog.art-modal:has(.gform_wrapper) .art-modal__close {
	color: #ffffff;
}

dialog.art-modal .gform_wrapper .gform_heading .gform_title,
dialog.art-modal .gform_wrapper .gform_description,
dialog.art-modal .gform_wrapper .gfield_description,
dialog.art-modal .gform_wrapper .gfield_checkbox label,
dialog.art-modal .gform_wrapper .gfield_radio label,
dialog.art-modal .gform_wrapper .ginput_container label,
dialog.art-modal .gform_wrapper .gform_confirmation_message {
	color: #cccccc;
}

dialog.art-modal .gform_wrapper .gform_description {
	font-size: var(--art-text-sm, 0.875rem);
}

dialog.art-modal .gform_wrapper .gform_title {
	margin-top: 0;
}

dialog.art-modal .gform-theme--framework .gf_progressbar_title {
	margin-block-end: var(--gf-field-pg-prog-title-margin-y-end);
	font-weight: 400;
	font-size: 13px;
	color: #ccc;
}

dialog.art-modal .gform_wrapper .gfield_label,
dialog.art-modal .gform_wrapper legend.gfield_label,
dialog.art-modal .gform_wrapper .gform-field-label {
	color: #cccccc !important;
	font-weight: normal;
}

dialog.art-modal .gform_wrapper .gfield_required {
	color: var(--color-accent, #f5d930) !important;
}

dialog.art-modal .gform_wrapper input[type='text'],
dialog.art-modal .gform_wrapper input[type='email'],
dialog.art-modal .gform_wrapper input[type='tel'],
dialog.art-modal .gform_wrapper input[type='number'],
dialog.art-modal .gform_wrapper input[type='url'],
dialog.art-modal .gform_wrapper input[type='search'],
dialog.art-modal .gform_wrapper textarea,
dialog.art-modal .gform_wrapper select {
	background-color: #ffffff !important;
	border-color: #ffffff !important;
	color: #1a1a1a !important;
}

dialog.art-modal .gform_wrapper input[type='checkbox'],
dialog.art-modal .gform_wrapper input[type='radio'] {
	accent-color: var(--color-accent, #f5d930);
}

dialog.art-modal .gform_wrapper .gform_footer,
dialog.art-modal .gform_wrapper .gform_page_footer {
	border-top-color: rgba(255, 255, 255, 0.15);
}

dialog.art-modal .gform_wrapper p.form-privacy-statement {
	color: #cccccc;
	font-size: 14px;
	margin: 0;
}

/* Gravity Forms' own title/description are now always rendered (forced true
   via the art_division_repeatables_cta_gravity_form_title/_description
   filters in functions.php, needed so the markup exists to unhide later) but
   hidden by default here - the CTA module's own Title/Content fields already
   cover that role, so this keeps today's look unchanged. To show the form's
   own title/description again (in the popup, or sitewide), remove or narrow
   this rule rather than touching the PHP filters. */
.gform_wrapper .gform_heading {
	display: none;
}

/* Form 2 only - unhidden per request. GF's .gform_heading is a sibling of
   <form id="gform_2">, not a descendant of it (both sit inside the same
   #gform_wrapper_2), so the override has to target the wrapper id, not the
   form id. Specificity (1,0,1) already beats the (0,0,2) rule above without
   needing !important. */
#gform_wrapper_2 .gform_heading {
	display: block;
}

dialog.art-modal .gform_wrapper .gform_button {
	background-color: var(--color-accent, #f5d930) !important;
	border-color: var(--color-accent, #f5d930) !important;
	color: #1a1a1a !important;
	font-weight: normal;
	text-transform: uppercase;
}

dialog.art-modal .gform_wrapper .gform_button:hover,
dialog.art-modal .gform_wrapper .gform_button:focus-visible {
	background-color: #ffffff !important;
	border-color: #ffffff !important;
	color: #1a1a1a !important;
}

/* Multi-page form "Next" button → site's Secondary button colours instead
   of the accent yellow above, which is reserved for the final Submit
   action. Same --color-btn-secondary-* vars as the "Arrange a Viewing"
   trigger button (see .art-prop-images__info-cta comment further up).
   Gravity Forms gives page-nav buttons both .gform_button and
   .gform_next_button - targeting the more specific class here means this
   wins over the accent rule above (equal specificity, later in source)
   without touching Submit. */
dialog.art-modal .gform_wrapper .gform_next_button {
	background-color: var(--color-btn-secondary-bg, #666666) !important;
	border-color: var(--color-btn-secondary-border, #666666) !important;
	color: var(--color-btn-secondary-text, #ffffff) !important;
}

dialog.art-modal .gform_wrapper .gform_next_button:hover,
dialog.art-modal .gform_wrapper .gform_next_button:focus-visible {
	background-color: color-mix(in srgb, var(--color-btn-secondary-bg, #666666) 85%, black) !important;
	border-color: color-mix(in srgb, var(--color-btn-secondary-bg, #666666) 85%, black) !important;
}

dialog.art-modal .gform_wrapper a {
	color: var(--color-accent, #f5d930);
}

/* ── Arrange a Viewing (PropertyHive's #makeEnquiry{ID} Fancybox popup) ──────
   A completely different popup mechanism from the dialog.art-modal pattern
   styled above - PropertyHive's own hidden form (rendered by Property
   Modules' render_make_enquiry_form(), one per property post) opened via
   Fancybox, not our shared <dialog>. Scoped with an id-prefix attribute
   selector since the id is per-property (#makeEnquiry123, #makeEnquiry456,
   ...) - Fancybox's inline content mode reuses this exact element as its
   popup content box rather than cloning it, so styling the id directly
   reaches the real popup card. Same dark-card/yellow-accent treatment as
   the .art-modal popups above, for visual consistency. */
[id^='makeEnquiry'] {
	background: #343336;
	border: 1px solid #ffffff;
	color: #cccccc;
	padding: 2rem;
}

[id^='makeEnquiry'] h2 {
	color: #ffffff;
	margin-top: 0;
}

[id^='makeEnquiry'] .gform_wrapper .gfield_label,
[id^='makeEnquiry'] .gform_wrapper legend.gfield_label,
[id^='makeEnquiry'] .gform_wrapper .gform-field-label {
	color: #ffffff !important;
	font-weight: normal;
}

[id^='makeEnquiry'] .gform_wrapper .gfield_description,
[id^='makeEnquiry'] .gform_wrapper .gfield_checkbox label,
[id^='makeEnquiry'] .gform_wrapper .gfield_radio label,
[id^='makeEnquiry'] .gform_wrapper .ginput_container label {
	color: #cccccc;
}

[id^='makeEnquiry'] .gform_wrapper .gfield_required {
	color: var(--color-accent, #f5d930) !important;
}

[id^='makeEnquiry'] .gform_wrapper input[type='text'],
[id^='makeEnquiry'] .gform_wrapper input[type='email'],
[id^='makeEnquiry'] .gform_wrapper input[type='tel'],
[id^='makeEnquiry'] .gform_wrapper input[type='number'],
[id^='makeEnquiry'] .gform_wrapper select,
[id^='makeEnquiry'] .gform_wrapper textarea {
	background-color: #ffffff !important;
	border-color: #ffffff !important;
	color: #1a1a1a !important;
}

[id^='makeEnquiry'] .gform_wrapper input[type='checkbox'],
[id^='makeEnquiry'] .gform_wrapper input[type='radio'] {
	accent-color: var(--color-accent, #f5d930);
}

[id^='makeEnquiry'] .gform_wrapper p.form-privacy-statement {
	color: #cccccc;
	font-size: 14px;
	margin: 0;
}

[id^='makeEnquiry'] .gform_wrapper .gform_button {
	background-color: var(--color-accent, #f5d930) !important;
	border-color: var(--color-accent, #f5d930) !important;
	color: #1a1a1a !important;
	font-weight: normal;
	text-transform: uppercase;
}

[id^='makeEnquiry'] .gform_wrapper .gform_button:hover,
[id^='makeEnquiry'] .gform_wrapper .gform_button:focus-visible {
	background-color: #ffffff !important;
	border-color: #ffffff !important;
	color: #1a1a1a !important;
}

[id^='makeEnquiry'] .gform_wrapper a {
	color: var(--color-accent, #f5d930);
}

/* ── Registration page Gravity Form dark re-skin ─────────────────────────────
   Same dark-card / white-input / yellow-accent treatment as the Arrange a
   Viewing and other Gravity Form popups above, applied to the dedicated
   Page Modules "Gravity Form" module (used on /registration/) instead of a
   popup. Overrides the shared plugin's light "card" background (added in
   art-division-page-modules.css for every site using that module) - here
   because it's an Oakmans-only visual preference, not a shared plugin
   pattern, see feedback_site_specific_styling_goes_in_child_theme.
   !important on background/border since the shared plugin rule it replaces
   is scoped per Background Colour variant at equal class specificity. */

.art-pm-module--gravity-form .art-pm-module__form {
	background: #343336 !important;
	border: 1px solid #ffffff !important;
}

.art-pm-module--gravity-form .gform_wrapper .gform_heading .gform_title,
.art-pm-module--gravity-form .gform_wrapper .gform_description,
.art-pm-module--gravity-form .gform_wrapper .gfield_description,
.art-pm-module--gravity-form .gform_wrapper .gfield_checkbox label,
.art-pm-module--gravity-form .gform_wrapper .gfield_radio label,
.art-pm-module--gravity-form .gform_wrapper .ginput_container label,
.art-pm-module--gravity-form .gform_wrapper .gform_confirmation_message {
	color: #cccccc;
}

.art-pm-module--gravity-form .gform_wrapper .gfield_label,
.art-pm-module--gravity-form .gform_wrapper legend.gfield_label,
.art-pm-module--gravity-form .gform_wrapper .gform-field-label {
	color: #cccccc !important;
	font-weight: normal;
}

.art-pm-module--gravity-form .gform_wrapper .gfield_required {
	color: var(--color-accent, #f5d930) !important;
}

.art-pm-module--gravity-form .gform_wrapper input[type='text'],
.art-pm-module--gravity-form .gform_wrapper input[type='email'],
.art-pm-module--gravity-form .gform_wrapper input[type='tel'],
.art-pm-module--gravity-form .gform_wrapper input[type='number'],
.art-pm-module--gravity-form .gform_wrapper input[type='url'],
.art-pm-module--gravity-form .gform_wrapper input[type='search'],
.art-pm-module--gravity-form .gform_wrapper textarea,
.art-pm-module--gravity-form .gform_wrapper select {
	background-color: #ffffff !important;
	border-color: #ffffff !important;
	color: #1a1a1a !important;
}

.art-pm-module--gravity-form .gform_wrapper input[type='checkbox'],
.art-pm-module--gravity-form .gform_wrapper input[type='radio'] {
	accent-color: var(--color-accent, #f5d930);
}

.art-pm-module--gravity-form .gform_wrapper p.form-privacy-statement {
	color: #cccccc;
	font-size: 14px;
}

.art-pm-module--gravity-form .gform_wrapper .gform_footer,
.art-pm-module--gravity-form .gform_wrapper .gform_page_footer {
	border-top-color: rgba(255, 255, 255, 0.15);
}

.art-pm-module--gravity-form .gform_wrapper .gform_button {
	background-color: var(--color-accent, #f5d930) !important;
	border-color: var(--color-accent, #f5d930) !important;
	color: #1a1a1a !important;
	font-weight: normal;
	text-transform: uppercase;
}

.art-pm-module--gravity-form .gform_wrapper .gform_button:hover,
.art-pm-module--gravity-form .gform_wrapper .gform_button:focus-visible {
	background-color: #ffffff !important;
	border-color: #ffffff !important;
	color: #1a1a1a !important;
}

.art-pm-module--gravity-form .gform_wrapper a {
	color: var(--color-accent, #f5d930);
}

/* ── Property search "More filters" popup dark re-skin ──────────────────────
   Same dark-card / white-border / yellow-accent treatment as the Arrange a
   Viewing and other Gravity Form popups above, applied to the 'popup'
   Filter Style dialog (art-prop-search__modal-dialog, the "More filters"
   overlay) so the site's overlay forms look consistent. The submit button
   already renders as a yellow pill via the theme's own --art-color-accent/
   --art-radius-round, so it needs no override here. Field-row classes
   (.art-prop-search__drawer-field/-control) are shared with the 'slide_in'
   side-drawer Filter Style, so those are scoped under .art-prop-search__modal-body
   here to avoid re-skinning the drawer wherever else it's used. */

dialog.art-prop-search__modal-dialog {
	background: #343336;
	border: 1px solid #ffffff;
}

.art-prop-search__modal-header,
.art-prop-search__modal-footer {
	border-color: rgba(255, 255, 255, 0.15);
}

.art-prop-search__modal-title {
	color: #ffffff;
}

.art-prop-search__modal-close {
	color: #ffffff;
}

.art-prop-search__modal-close:hover {
	background-color: rgba(255, 255, 255, 0.1);
}

.art-prop-search__modal-body .art-prop-search__drawer-field label {
	color: #cccccc;
}

.art-prop-search__modal-body .art-prop-search__drawer-control {
	border-color: #ffffff;
}

.art-prop-search__modal-clear {
	color: #cccccc;
}

.art-prop-search__modal-clear:hover {
	color: #ffffff;
}

/* Base rule sets white text (fine on the default dark-blue accent) but
   Oakmans' accent colour is bright yellow, so the button needs dark text
   for contrast - same colour as the Arrange a Viewing Submit button. */
.art-prop-search__modal-submit {
	color: #1a1a1a;
}

.art-prop-single__sidebar .widget + .widget {
	margin-top: var(--art-spacing, 1.5rem);
}

/* FAQ accordion +/- icon - the base theme colours it var(--color-accent),
   which resolves to Oakmans' bright yellow brand colour; low-contrast/too
   loud against the grey question bar here, so pinned to the same dark text
   colour used sitewide instead. Oakmans-only preference, not a shared
   plugin pattern - see feedback_site_specific_styling_goes_in_child_theme.
   .wp-block-art-division-faq is Art Division Blocks' AD FAQ block, which
   plugs into this same accordion (see the theme's shared schema-faq rules) -
   included here too so its icon matches Yoast's/Content Generator's. */
.schema-faq.wp-block-yoast-faq-block .schema-faq-question::after,
.schema-faq.wp-block-art-division-faq .schema-faq-question::after {
	color: #1a1a1a;
}
.oakmans-centered .art-pm-module__content-multi-card-body {
	align-items: center;
	justify-content: center;
}
.oakmans-centered .art-pm-module__content-multi-card-body .art-pm-module__content-multi-card-text {
	align-items: center;
	display: flex;
	text-align: center;
	justify-content: center;
	flex-direction: column;
	margin: 0;
}
.oakmans-centered .art-pm-module__content-multi-card-body .art-pm-module__content-multi-card-text p {
	margin: 0;
}

/* Social Icons block ("Follow Us") - centred title matching the site's
   body font/weight/line-height instead of the block's own default heading
   style, and larger icons than the plugin's default (Art Division Blocks,
   svg width/height="20" attributes in the markup - CSS here overrides
   those presentation attributes as normal). */
.art-blocks-social-icons__title {
	font-family: 'Montserrat';
	font-size: 20px;
	font-weight: var(--font-base-weight);
	letter-spacing: normal;
	line-height: var(--line-height-body);
	text-align: center;
}

.art-blocks-social-icons__link svg {
	width: 32px;
	height: 32px;
}

/* Student department search results: functions.php's tax_query filter
   already forces every Availability status to always show there, so the
   "Include/Exclude sold / let" checkbox would just be a no-op control -
   .oakmans-dept-student is added to body_class only on that department's
   results, see the filter next to oakmans_get_student_department_slug(). */
body.oakmans-dept-student .art-prop-search__field--toggle {
	display: none;
}

/* ── ValPal instant valuation popup dark re-skin ─────────────────────────────
   Same dark-card/yellow-accent treatment as the Gravity Form popups and
   Arrange a Viewing above, applied to the ValPal CTA's own .art-modal (the
   'valpal' cta_type in Repeatables' CTA module - see
   feedback_site_specific_styling_goes_in_child_theme). Scoped with :has() to
   modals containing .valpal-form specifically, so this doesn't also catch
   the Gravity Form popups' own dialog (which already has its own rule set,
   above, with a different max-width). The logo/heading/subheading don't
   exist in the plugin's own markup at all - those come from the theme
   overrides at propertyhive/valpal-form.php and propertyhive/valpal-results.php,
   not the propertyhive-valpal plugin itself. Field ids/names are unchanged
   from the plugin's own template - only the visible caption changed from a
   <label> above each field to a
   placeholder-style treatment (see valpal-form.php's own docblock for why
   the real <label> is kept, just visually hidden). */

dialog.art-modal:has(.valpal-form) {
	background: #343336;
	border: 1px solid #ffffff;
}

dialog.art-modal:has(.valpal-form) .art-modal__close {
	color: #ffffff;
}

.valpal-form__intro,
.valpal-results__intro {
	margin-bottom: 1.5rem;
	text-align: center;
}

.valpal-form__logo,
.valpal-results__logo {
	margin: 0 auto 1rem;
	max-width: 180px;
}

.valpal-form__logo svg,
.valpal-results__logo svg {
	display: block;
	height: auto;
	width: 100%;
}

.valpal-form__title,
.valpal-results__title {
	color: #ffffff;
	font-weight: 700;
	letter-spacing: 1px;
	margin: 0 0 0.5rem;
	text-transform: uppercase;
}

.valpal-form__title {
	font-size: var(--art-text-lg, 1.25rem);
}

.valpal-results__title {
	font-size: 1.7rem;
}

.valpal-form__subtitle {
	color: #cccccc;
	margin: 0 0 1.5rem;
}

.valpal-form .control {
	margin-bottom: 0.75rem;
}

.valpal-form input[type='text'],
.valpal-form input[type='email'],
.valpal-form input[type='number'],
.valpal-form select,
.valpal-form textarea {
	background-color: #ffffff;
	border: 1px solid #ffffff;
	border-radius: var(--art-radius, 4px);
	color: #1a1a1a;
	padding: 0.75rem 1rem;
}

/* Safari-only bug: its native <select> widget ignores vertical padding
   (min-height too, in some Safari versions) - text inputs render at a
   comfortable height from the padding above, but selects were squashed
   there. Same fix already established elsewhere in this codebase for the
   same bug (Property Modules' .art-prop-search__drawer-control etc.):
   appearance:none drops the native widget chrome entirely, so the select
   becomes a normal box that fully respects padding/min-height like any
   other element - the trade-off is it also drops the native dropdown
   arrow, replaced here with the same chevron background-image those other
   selects use, so it doesn't look unstyled. */
.valpal-form select {
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-position: right 1rem center;
	background-repeat: no-repeat;
	background-size: 0.75rem;
	min-height: 3rem;
	padding-right: 2.5rem;
}

.valpal-form ::placeholder {
	color: #6f6f6f;
	opacity: 1;
}

/* Address lookup's "Find Address" button - the one plain <button> in the
   form, styled as the same yellow pill as the eventual Submit button so it
   doesn't read as unstyled browser chrome against the dark card. Plugin CSS
   (ph-valpal.css, .valpal-form button) already sets width:100%. */
.valpal-form button {
	background-color: var(--color-accent, #f5d930);
	border: 1px solid var(--color-accent, #f5d930);
	border-radius: var(--art-radius-round, 9999px);
	color: #1a1a1a;
	font-weight: 700;
	padding: 0.65rem 1rem;
	text-transform: uppercase;
}

.valpal-form button:hover,
.valpal-form button:focus-visible {
	background-color: #ffffff;
	border-color: #ffffff;
}

.valpal-form input[type='checkbox'] {
	accent-color: var(--color-accent, #f5d930);
}

.valpal-form .required {
	color: var(--color-accent, #f5d930);
}

.valpal-form__row {
	display: flex;
	gap: 0.75rem;
}

.valpal-form__row .control {
	flex: 1;
}

@media (max-width: 480px) {
	.valpal-form__row {
		flex-direction: column;
		gap: 0;
	}
}

.valpal-form__checkbox {
	margin-bottom: 1rem;
}

.valpal-form__checkbox label {
	align-items: flex-start;
	color: #cccccc;
	display: flex;
	font-size: var(--art-text-sm, 0.875rem);
	gap: 0.5rem;
}

.valpal-form__checkbox input[type='checkbox'] {
	flex-shrink: 0;
	margin-top: 0.2rem;
}

.valpal-form input[type='submit'].button {
	background-color: var(--color-accent, #f5d930);
	border: 1px solid var(--color-accent, #f5d930);
	border-radius: var(--art-radius-round, 9999px);
	color: #1a1a1a;
	font-weight: 700;
	padding: 0.85rem 1rem;
	text-transform: uppercase;
}

.valpal-form input[type='submit'].button:hover,
.valpal-form input[type='submit'].button:focus-visible {
	background-color: #ffffff;
	border-color: #ffffff;
}

/* Shared by the results screen's "Back" link and step 2's own "Back" link
   (propertyhive/valpal-form.php) - both fade back to an earlier step/the
   form via valpal-form.js's data-valpal-back/-restart handlers. Absolutely
   positioned against the nearest positioned ancestor, .art-modal__inner
   (Repeatables' own art-division-repeatables.css), same as .art-modal__close
   anchors its top-right X - mirrors that on the opposite corner. */
.valpal-nav-back {
	color: var(--color-accent, #f5d930);
	font-size: var(--art-text-sm, 0.875rem);
	font-weight: normal;
	left: var(--art-rep-spacing-sm, 1rem);
	position: absolute;
	text-transform: uppercase;
	top: var(--art-rep-spacing-sm, 1rem);
}

.valpal-nav-back:hover,
.valpal-nav-back:focus-visible {
	color: #ffffff;
}

#valuation_results .info-container {
	background: transparent;
	padding: 2rem 0 0;
}

#valuation_results .area-info {
	color: #cccccc;
}

/* !important throughout this block: ph-valpal.css (the propertyhive-valpal
   plugin's own stylesheet) sets background/line-height/font-size/display on
   these exact same selectors at equal specificity, so without it the winner
   depends on stylesheet load order rather than intent - same reasoning as
   the Gravity Form popups' own re-skin above, see
   feedback_gform_specificity_important_requirement. */
#valuation_results .amounts .min-amount-label,
#valuation_results .amounts .actual-amount-label,
#valuation_results .amounts .max-amount-label {
	color: #cccccc !important;
	font-weight: 700 !important;
}

#valuation_results .amounts .min-amount,
#valuation_results .amounts .actual-amount,
#valuation_results .amounts .max-amount {
	background: transparent !important;
	color: #ffffff !important;
	line-height: normal !important;
}

#valuation_results .amounts .actual-amount {
	font-size: 1.75rem !important;
	font-weight: 700 !important;
}

/* ph-valpal.css fixes this span's line-height at 38px, sized for the
   plugin's original 16px figure - shorter than the 2.5rem (40px) size set
   above, which was clipping/overlapping the digits rather than a genuine
   colour problem. */
#valuation_results .amounts .actual-amount span {
	line-height: normal !important;
}

/* The min/actual/max amounts stay a 3-column float layout at every width
   (ph-valpal.css, width:33.3% each) - the labels/values live in two
   separate DOM groups (all 3 labels, then all 3 values) rather than paired
   per column, so stacking them on narrow screens would print in the wrong
   order (all labels, then all values) rather than restructuring into
   Label/Value/Label/Value. Shrinking the centre figure to fit its own third
   of the (much narrower) row is the fix that doesn't require reworking that
   structure. */
@media (max-width: 480px) {
	#valuation_results .amounts .actual-amount {
		font-size: 1.15rem !important;
	}
}

.valpal-results__disclaimer {
	color: #cccccc;
	font-size: var(--art-text-sm, 0.875rem);
	margin: 0 auto 1.5rem;
	max-width: 40rem;
	text-align: center;
}

.valpal-results__restart {
	margin-top: 1.5rem;
	text-align: center;
}

.valpal-results__restart a {
	color: var(--color-accent, #f5d930);
}

.valpal-results__restart a:hover,
.valpal-results__restart a:focus-visible {
	color: #ffffff;
}
@media (max-width: 992px) {
	.oakmans-marketing.art-pm-module--style-feature-grid .art-pm-module__feature-grid {
		display: grid;
		gap: 1rem;
		grid-template-columns: repeat(auto-fit, minmax(109px, 1fr));
		margin-inline: auto;
		margin-top: 2rem;
		max-width: var(--art-max-width, 75rem);
	}
	.oakmans-marketing .art-pm-module__fg-title {
		display: block;
		margin-top: 0.75rem;
		font-size: 1rem;
	}
}

/* Text-Image Icons */
img.art-pm-module__fg-img {
	width: 100px;
}

/* TEMP - Review Aggregator */
.art-ra-sidebar__leave-buttons .art-ra-btn:last-child,
.art-ra-sidebar__map,
.art-ra-sidebar__heading,
.art-ra-sidebar__address,
.art-ra-list-page__sidebar p:first-of-type,
.art-ra-list-page__sidebar p > a,
.art-ra-sidebar__areas,
.art-ra-sidebar__back-link {
	display: none;
}
.art-ra-sidebar__leave-buttons,
.art-ra-sidebar__enquiry-btn {
	display: inline-block;
	width: 100%;
	font-size: 16px;
	max-width: 48%;
}
.art-ra-sidebar__leave-buttons .art-ra-btn:first-child {
	width: max-content;
	background: var(--art-color-accent);
	transition:
		background-color 0.3s ease,
		color 0.3s ease,
		border-color 0.3s ease;

	&:hover {
		background: var(--color-btn-secondary-bg-hover, #1a1a2e);
	}
}