/**
 * Magnolia Properties - front-end styles.
 *
 * Scoped to the plugin's own BEM blocks (magnolia-*), layered on top of the
 * active theme's Bootstrap grid and components (.row, .col-*, .btn, .alert),
 * which the bundled templates already use. Nothing here restyles Bootstrap or
 * the theme; these rules only fill the gaps Bootstrap does not cover and give
 * the plugin's blocks their own spacing, typography, and card treatment.
 *
 * Enqueued only on plugin-rendered pages by
 * Magnolia\Properties\Frontend\AssetManager.
 */

:root {
	--magnolia-gap: 1.5rem;
	--magnolia-radius: 6px;
	--magnolia-border: #e2e2e2;
	--magnolia-muted: #6b6b6b;
	/* Brand yellow (production parity). --magnolia-accent fills buttons, pills,
	   and rules; on a fill, pair it with --magnolia-accent-ink for readable dark
	   copy. For accent *text* on a light background use --magnolia-accent-strong
	   (a dark gold), since yellow text on white is unreadable.
	   --magnolia-accent-hover darkens a yellow fill on hover. */
	--magnolia-accent: #ffd772;
	--magnolia-accent-ink: #2a2207;
	--magnolia-accent-strong: #8a6a16;
	--magnolia-accent-hover: #e3b62f;
	--magnolia-surface: #ffffff;
	--magnolia-shadow: 0 1px 3px rgba( 0, 0, 0, 0.08 );
	--magnolia-shadow-hover: 0 6px 18px rgba( 0, 0, 0, 0.12 );
}

/* ---------------------------------------------------------------------------
 * Archive / listing pages (/homes/, /homes/search/, /homes/area/{slug}/)
 * ------------------------------------------------------------------------ */

/* Dark full-bleed title band, matching the single property and floorplan
   headers, so the listing pages (index, search, area) lead with the same
   page-banner treatment instead of a bare heading. */
.magnolia-archive__header {
	margin: 0 calc( 50% - 50vw ) 1.5rem;
	padding: 2.5rem calc( 50vw - 50% );
	background: #212529;
	color: #ffffff;
}

/* When the editable intro or the search band follows the title band, drop the
   band's bottom margin so the title and what follows read as one continuous
   dark hero. */
.magnolia-archive__header:has( + .magnolia-archive__intro ),
.magnolia-archive__header:has( + .magnolia-archive__search ) {
	margin-bottom: 0;
}

.magnolia-archive__title {
	margin: 0;
	color: #ffffff;
	font-size: clamp( 1.5rem, 2.5vw, 1.9rem );
	font-weight: 300;
	line-height: 1.25;
	letter-spacing: 0.28em;
	text-transform: uppercase;
}

/* Section heading above the full grid on the index, matching the featured
   strip's title so "Featured Homes" and "All Homes" read as sibling sections. */
.magnolia-archive__section-title {
	margin: 0 0 1.25rem;
	padding-bottom: 0.6rem;
	color: #212529;
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	border-bottom: 2px solid var( --magnolia-accent );
}

.magnolia-archive__grid {
	row-gap: var( --magnolia-gap );
}

.magnolia-archive__empty {
	margin: 2rem 0;
	color: var( --magnolia-muted );
	font-size: 1.125rem;
}

/* Editable marketing intro, shown only on the index above the search form. A
   dark full-bleed band that continues the title's hero treatment (see the :has
   reset above), so the lead copy sits on the same field as the page title. The
   seeded copy is an h2 lead, an uppercase h3 subhead, and a paragraph, recoloured
   for a dark field; the first/last-child resets keep it flush whatever an owner
   edits it to. */
.magnolia-archive__intro {
	margin: 0 calc( 50% - 50vw ) 2rem;
	padding: 0.5rem calc( 50vw - 50% ) 2.5rem;
	background: #212529;
	color: #dee2e6;
}

.magnolia-archive__intro > :first-child {
	margin-top: 0;
}

.magnolia-archive__intro > :last-child {
	margin-bottom: 0;
}

.magnolia-archive__intro h2 {
	margin: 0 0 0.5rem;
	color: #ffffff;
	font-size: clamp( 1.4rem, 2.4vw, 1.8rem );
	font-weight: 600;
	letter-spacing: 0.04em;
}

.magnolia-archive__intro h3 {
	margin: 0 0 0.75rem;
	color: var( --magnolia-accent );
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.magnolia-archive__intro p {
	margin: 0 0 1rem;
	font-size: 1.05rem;
	line-height: 1.6;
}

/* When the search band follows the intro on the index, drop the intro's bottom
   margin so the dark field continues unbroken into the search band. */
.magnolia-archive__intro:has( + .magnolia-archive__search ) {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
 * Search form (/homes/, /homes/search/)
 * ------------------------------------------------------------------------ */

/* The search form sits in a dark full-bleed band that continues the title and
   intro hero, while the form itself keeps its white surface so it reads as a
   card floating on the dark field. The band carries no top padding: the header
   or intro band above it supplies the dark space over the card. */
.magnolia-archive__search {
	margin: 0 calc( 50% - 50vw ) 2rem;
	padding: 0 calc( 50vw - 50% ) 2.5rem;
	background: #212529;
}

.magnolia-archive__search .magnolia-search {
	margin: 0;
}

.magnolia-search {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var( --magnolia-gap );
	margin: 0 0 2rem;
	padding: 1.5rem;
	background: var( --magnolia-surface );
	border: 1px solid var( --magnolia-border );
	border-radius: var( --magnolia-radius );
	box-shadow: var( --magnolia-shadow );
}

.magnolia-search__fields {
	display: grid;
	flex: 1 1 auto;
	grid-template-columns: repeat( auto-fit, minmax( 180px, 1fr ) );
	gap: 1rem;
}

.magnolia-search__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0;
}

.magnolia-search__label {
	color: var( --magnolia-muted );
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.magnolia-search__select {
	width: 100%;
	padding: 0.6rem 0.75rem;
	color: #212529;
	font-size: 1rem;
	line-height: 1.3;
	background: #ffffff;
	border: 1px solid var( --magnolia-border );
	border-radius: var( --magnolia-radius );
}

.magnolia-search__select:focus {
	border-color: var( --magnolia-accent );
	outline: 2px solid rgba( 246, 207, 63, 0.45 );
	outline-offset: 1px;
}

.magnolia-search__submit {
	flex: 0 0 auto;
	padding: 0.7rem 1.85rem;
	color: var( --magnolia-accent-ink );
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	background: var( --magnolia-accent );
	border: 1px solid var( --magnolia-accent );
	border-radius: var( --magnolia-radius );
	cursor: pointer;
	transition: background 0.2s ease;
}

.magnolia-search__submit:hover,
.magnolia-search__submit:focus {
	background: var( --magnolia-accent-hover );
}

@media ( max-width: 575.98px ) {
	.magnolia-search__submit {
		width: 100%;
	}
}

/* ---------------------------------------------------------------------------
 * Featured homes strip (/homes/ index, site root shortcode)
 * ------------------------------------------------------------------------ */

.magnolia-featured {
	margin: 0 0 2.5rem;
}

.magnolia-featured__title {
	margin: 0 0 1.25rem;
	padding-bottom: 0.6rem;
	color: #212529;
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	border-bottom: 2px solid var( --magnolia-accent );
}

.magnolia-featured__grid {
	row-gap: var( --magnolia-gap );
}

/* On desktop the featured strip becomes a light-gray full-bleed band (the
   archive header's break-out technique, sharing the single-property field's
   tone) so the curated homes read as white cards on a soft field; the mobile
   strip stays inline to skip the full-bleed math on narrow screens. */
@media ( min-width: 768px ) {
	.magnolia-featured {
		margin: 0 calc( 50% - 50vw ) 2.5rem;
		padding: 2.5rem calc( 50vw - 50% );
		background: #f1f1f0;
	}
}

/* ---------------------------------------------------------------------------
 * Property card (listing grid)
 * ------------------------------------------------------------------------ */

.magnolia-property-card {
	margin-bottom: var( --magnolia-gap );
}

.magnolia-property-card__inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: var( --magnolia-surface );
	border: 1px solid var( --magnolia-border );
	border-radius: var( --magnolia-radius );
	box-shadow: var( --magnolia-shadow );
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.magnolia-property-card__inner:hover,
.magnolia-property-card__inner:focus-within {
	box-shadow: var( --magnolia-shadow-hover );
	transform: translateY( -2px );
}

.magnolia-property-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.magnolia-property-card__photo {
	display: block;
	width: 100%;
	height: 220px;
	object-fit: cover;
}

.magnolia-property-card__name {
	margin: 0;
	padding: 1rem 1.25rem 0.5rem;
	color: #212529;
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.magnolia-property-card__location {
	margin: 0;
	padding: 0 1.25rem;
	color: var( --magnolia-muted );
	font-size: 0.95rem;
}

.magnolia-property-card__area {
	color: inherit;
	text-decoration: none;
}

.magnolia-property-card__area:hover,
.magnolia-property-card__area:focus {
	color: var( --magnolia-accent-strong );
	text-decoration: underline;
}

.magnolia-property-card__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 0.5rem 0 0;
	padding: 0 1.25rem;
	list-style: none;
}

.magnolia-property-card__stat {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var( --magnolia-muted );
	font-size: 0.9rem;
}

.magnolia-property-card__stat-icon {
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.magnolia-property-card__stat-icon--units {
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b6b6b'%3E%3Cpath d='M2 14V3l6-2 6 2v11h-4v-3H6v3H2z'/%3E%3C/svg%3E" );
}

.magnolia-property-card__stat-icon--year {
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b6b6b' stroke-width='1.2'%3E%3Crect x='2' y='3' width='12' height='11' rx='1'/%3E%3Cpath d='M2 6h12M5 1.5v3M11 1.5v3'/%3E%3C/svg%3E" );
}

.magnolia-property-card__stat-icon--beds {
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b6b6b'%3E%3Cpath d='M3 7V4H1v9h2v-2h10v2h2V9a2 2 0 0 0-2-2H3z'/%3E%3C/svg%3E" );
}

/* Without a flags row, the last text row (the stats, or the location when a card
   has no stats) would sit flush against the card's bottom edge. Give it the same
   bottom gap the flags row carries so every card foot breathes equally. */
.magnolia-property-card__location:last-child,
.magnolia-property-card__stats:last-child {
	padding-bottom: 1.25rem;
}

.magnolia-property-card__flags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.75rem 0 0;
	padding: 0 1.25rem 1.25rem;
	list-style: none;
}

.magnolia-property-card__new-construction,
.magnolia-property-card__featured {
	display: inline-block;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.magnolia-property-card__new-construction {
	background: #212529;
	color: #ffffff;
}

.magnolia-property-card__featured {
	background: var( --magnolia-accent );
	color: var( --magnolia-accent-ink );
}

/* ---------------------------------------------------------------------------
 * Single property
 * ------------------------------------------------------------------------ */

/* The whole property article sits on a light-gray full-bleed field so the
   content sections below can read as white cards floating on it. The negative
   inline margins bleed the field to the viewport edges; the inverse horizontal
   padding returns the content to the article's column, which also re-bases the
   calc() full-bleed math for the hero, offers band, and title band nested
   inside. */
.magnolia-property {
	margin: 0 calc( 50% - 50vw );
	padding: 0 calc( 50vw - 50% ) 3rem;
	background: #f1f1f0;
}

.magnolia-property__alert {
	margin-bottom: 1.5rem;
}

/* Section panels: on the gray field the prose, gallery, and location sections
   read as white cards with their own padding, border, and shadow, separated by
   clear gaps. Scoped under .magnolia-property (the two-class specificity beats
   the base single-class section rules regardless of source order) so the shared
   gallery partial stays unboxed on the floorplan page. The office-hours and
   contact blocks are deliberately off this list - they nest inside the Location
   card and would otherwise box twice. The card-grid sections - floor plans and
   team - are likewise left off so their own white cards keep popping on the gray
   instead of washing out on a white panel. */
.magnolia-property .magnolia-property__content,
.magnolia-property .magnolia-property__features,
.magnolia-property .magnolia-property__amenities,
.magnolia-property .magnolia-gallery,
.magnolia-property .magnolia-property__location {
	margin-bottom: 1.75rem;
	padding: 1.75rem 2rem;
	background: var( --magnolia-surface );
	border: 1px solid var( --magnolia-border );
	border-radius: var( --magnolia-radius );
	box-shadow: var( --magnolia-shadow );
}

/* Dark full-bleed title band (production parity). The band bleeds to the viewport
   edges with the same calc( 50% - 50vw ) trick as the hero, and an inverse
   calc( 50vw - 50% ) horizontal padding returns the title/address back into the
   article's content column. White, wide-tracked, uppercase title over near-black. */
.magnolia-property__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem 2rem;
	margin: 0 calc( 50% - 50vw );
	padding: 2.5rem calc( 50vw - 50% );
	background: #212529;
	color: #ffffff;
}

/* Title/address on the left, the Pricing & Availability CTA pinned right on
   desktop. On a narrow screen the flex row wraps and the CTA drops below. */
.magnolia-property__header-text {
	flex: 1 1 20rem;
}

.magnolia-property__header-cta {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

/* Social profiles row beneath the CTA button. Small brand-yellow glyphs on the
   dark title band: the inline SVGs take their fill from the link's currentColor,
   so the accent colour is set once here. The row centers under the button and
   inherits the header's mobile centering. */
.magnolia-property__social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.magnolia-property__social-link {
	display: inline-flex;
	color: var( --magnolia-accent );
	transition: color 0.2s ease;
}

.magnolia-property__social-link:hover,
.magnolia-property__social-link:focus {
	color: #ffffff;
}

.magnolia-property__social-icon {
	display: block;
	width: 1.25rem;
	height: 1.25rem;
	fill: currentColor;
}

.magnolia-property__title {
	margin: 0 0 0.5rem;
	color: #ffffff;

	/* Match the live site's title: the theme's body face (DM Sans, picked up
	   via inherit) at its thinnest weight, not the serif heading font. */
	font-family: inherit;
	font-size: clamp( 1.5rem, 2.5vw, 1.9rem );
	font-weight: 100;
	line-height: 1.25;
	letter-spacing: 0.28em;
	text-transform: uppercase;
}

.magnolia-property__address {
	margin: 0 0 0.25rem;
	color: rgba( 255, 255, 255, 0.82 );
	font-size: 1.05rem;
}

.magnolia-property__bedrooms {
	margin: 0;
	color: rgba( 255, 255, 255, 0.92 );
	font-weight: 600;
}

/* Header address: the full comma-joined line shows on desktop; on phones it is
   hidden in favour of the stacked street / city-state-ZIP parts (below). */
.magnolia-property__address-part {
	display: none;
}

/* Phone line in the title band, directly below the address. A tel: link that
   keeps the plain look on desktop and is tappable on phones. */
.magnolia-property__header-phone {
	margin: 0 0 0.25rem;
	color: rgba( 255, 255, 255, 0.82 );
	font-size: 1.05rem;
}

.magnolia-property__header-phone a {
	color: inherit;
	text-decoration: none;
}

.magnolia-property__header-phone a:hover,
.magnolia-property__header-phone a:focus {
	text-decoration: underline;
}

/* On phones the title band stacks (text over CTA over social), so center the
   whole block: justify-content centers the wrapped CTA/social row, and the
   inherited text-align centers the title, address, and bedroom line. */
@media ( max-width: 575.98px ) {
	.magnolia-property__header {
		justify-content: center;
		text-align: center;
	}

	.magnolia-property__address-oneline {
		display: none;
	}

	.magnolia-property__address-part {
		display: block;
	}

	.magnolia-property__call-number {
		display: none;
	}
}

/* Full-bleed hero: negative inline margins pull the figure out to the viewport
   edges from inside the theme's centered container, without the horizontal-scroll
   risk of width:100vw. The image crops to a banner band so portrait and landscape
   source photos all lead the page at a consistent height. */
.magnolia-property__hero {
	margin: 0 calc( 50% - 50vw );
}

.magnolia-property__hero img {
	display: block;
	width: 100%;
	height: clamp( 320px, 60vh, 640px );
	object-fit: cover;
}

.magnolia-property__content {
	margin-bottom: 1.5rem;
	font-size: 1.05rem;
	line-height: 1.7;
}

.magnolia-property__contact {
	margin: 0;
}

/* Each contact line is a label ("Phone:") followed by its value link. The row
   owns the block spacing; the muted label sits inline before the accent value. */
.magnolia-property__contact-row {
	margin: 0 0 0.3rem;
}

.magnolia-property__contact-label {
	margin-right: 0.35rem;
	color: var( --magnolia-muted );
}

.magnolia-property__phone,
.magnolia-property__email,
.magnolia-property__website {
	color: var( --magnolia-accent-strong );
	font-weight: 600;
	text-decoration: none;
}

.magnolia-property__phone:hover,
.magnolia-property__email:hover,
.magnolia-property__website:hover {
	text-decoration: underline;
}

/* Primary calls-to-action. The templates mark these with Bootstrap's base
   .btn, which ships no colour of its own (no .btn-* modifier is applied), so
   it renders as bare near-black text. Fill that gap with a solid accent button
   in the plugin's own type system - this styles the plugin's own block classes,
   not .btn globally, so the theme's button component is left untouched. */
.magnolia-property__availability,
.magnolia-property__view-website,
.magnolia-property__waitlist-trigger,
.magnolia-floorplan__tour {
	padding: 0.7rem 1.4rem;
	background: var( --magnolia-accent );
	border: 0;
	border-radius: var( --magnolia-radius );
	color: var( --magnolia-accent-ink );
	font-family: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s ease;
}

.magnolia-property__availability:hover,
.magnolia-property__availability:focus,
.magnolia-property__view-website:hover,
.magnolia-property__view-website:focus,
.magnolia-property__waitlist-trigger:hover,
.magnolia-property__waitlist-trigger:focus,
.magnolia-floorplan__tour:hover,
.magnolia-floorplan__tour:focus {
	background: var( --magnolia-accent-hover );
	color: var( --magnolia-accent-ink );
}

/* Full-width "Call to Schedule a Tour" band beneath the Description: a dark field
   with accent text. The number shows inline on desktop; on phones it is hidden and
   the whole bar is a tap-to-call tel: link. */
.magnolia-property__call {
	margin-bottom: 2.5rem;
}

.magnolia-property__call-cta {
	display: block;
	padding: 1rem 1.5rem;
	background: #212529;
	border-radius: var( --magnolia-radius );
	color: var( --magnolia-accent );
	font-weight: 600;
	font-size: 0.95rem;
	letter-spacing: 0.08em;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.magnolia-property__call-cta:hover,
.magnolia-property__call-cta:focus {
	background: #2c3136;
	color: var( --magnolia-accent-hover );
}

/* Showcase hero: the first showcase photo at the top of the content column,
   filling it edge to edge with no side padding and opening the showcase lightbox
   on click. */
.magnolia-property__showcase-hero {
	margin: 0 0 1.75rem;
}

.magnolia-property__showcase-hero-link {
	display: block;
	cursor: pointer;
}

.magnolia-property__showcase-hero-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var( --magnolia-radius );
}

.magnolia-property__showcase-hero-link:hover .magnolia-property__showcase-hero-img,
.magnolia-property__showcase-hero-link:focus-visible .magnolia-property__showcase-hero-img {
	opacity: 0.94;
}

.magnolia-property__features,
.magnolia-property__amenities,
.magnolia-property__floorplans,
.magnolia-property__promotions,
.magnolia-property__team {
	margin-bottom: 2.5rem;
}

/* Section labels - uppercase, wide-tracked, bold (production parity). One rule
   for every server-rendered section heading so the property, gallery, and
   office-hours sections share a single consistent label treatment. */
.magnolia-property__content > h2,
.magnolia-property__features h2,
.magnolia-property__amenities h2,
.magnolia-property__floorplans h2,
.magnolia-property__team h2,
.magnolia-property__location > h2,
.magnolia-form__heading,
.magnolia-gallery__heading,
.magnolia-hours__heading {
	margin: 0 0 1.25rem;
	padding-bottom: 0.75rem;
	color: #212529;
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-bottom: 1px solid var( --magnolia-border );
}

.magnolia-property__features ul,
.magnolia-property__amenities ul {
	columns: 2;
	column-gap: 2rem;
	margin: 0;
	padding-left: 0;
	list-style: none;
}

@media ( max-width: 575.98px ) {
	.magnolia-property__features ul,
	.magnolia-property__amenities ul {
		columns: 1;
	}
}

.magnolia-property__features li,
.magnolia-property__amenities li {
	position: relative;
	margin-bottom: 0.4rem;
	padding-left: 1.75rem;
	break-inside: avoid;
}

/* Bullet icon - a yellow disc with a white check, matching the legacy
   Bootstrap check-circle marker. Inline SVG (brand yellow #ffd772) keeps it a
   single HTTP-free asset; absolute placement sits it in the list-item's left
   padding so wrapped lines stay aligned with the text, not the icon. */
.magnolia-property__features li::before,
.magnolia-property__amenities li::before {
	content: "";
	position: absolute;
	top: 0.2em;
	left: 0;
	width: 1.1rem;
	height: 1.1rem;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23ffd772'/%3E%3Cpath d='M4.6 8.3 6.9 10.6 11.4 5.6' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* Map - reserve visible space so the container never collapses before (or
   without) the Google Map render. The fallback "View on Google Maps" link fills
   the box and is centered; when the map renders, Google replaces the link. */
.magnolia-property__map {
	min-height: 320px;
	margin-bottom: 1.75rem;
	overflow: hidden;
	background: var( --magnolia-surface );
	border: 1px solid var( --magnolia-border );
	border-radius: var( --magnolia-radius );
	box-shadow: var( --magnolia-shadow );
}

.magnolia-property__map-link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 320px;
	padding: 1rem;
	color: var( --magnolia-accent-strong );
	font-weight: 600;
	text-decoration: none;
}

.magnolia-property__map-link:hover {
	text-decoration: underline;
}

/* Google InfoWindow content (marker popup). */
.magnolia-property__map-info {
	margin: 0;
	font-weight: 600;
}

/* Location card - production parity. Under the heading sits a linked locality
   label (city - neighborhood); then a full-width map; then the postal address
   and contact details in two columns; office hours sit full-width beneath. The
   nested map and hours shed their own box (shadow, divider) so the section reads
   as one card. */
.magnolia-property__locality {
	margin: 0 0 1.5rem;
	font-size: 1.05rem;
}

.magnolia-property__locality-link {
	color: var( --magnolia-accent-strong );
	font-weight: 600;
	text-decoration: none;
}

.magnolia-property__locality-link:hover {
	text-decoration: underline;
}

.magnolia-property__locality-sep {
	margin: 0 0.5rem;
	color: var( --magnolia-muted );
}

.magnolia-property__location .magnolia-property__map {
	margin: 0 0 1.75rem;
	box-shadow: none;
}

.magnolia-property__location-columns {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 3rem;
}

.magnolia-property__location-columns > * {
	flex: 1 1 14rem;
	margin: 0;
}

/* Sub-labels (ADDRESS / CONTACT / OFFICE HOURS) - smaller siblings of the
   section heading: same uppercase tracking, no divider rule. */
.magnolia-property__location-label,
.magnolia-property__location .magnolia-hours__heading {
	margin: 0 0 0.6rem;
	padding-bottom: 0;
	color: #212529;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-bottom: 0;
}

.magnolia-property__address-line {
	margin: 0 0 0.25rem;

	/* Explicit dark ink: the shared .magnolia-property__address class is also the
	   white-on-dark title-band address, whose color would otherwise inherit here
	   and render the location address white-on-white. */
	color: #212529;
}

.magnolia-property__location .magnolia-hours {
	margin: 1.75rem 0 0;
}

/* ---------------------------------------------------------------------------
 * Floorplan - single + card
 * ------------------------------------------------------------------------ */

.magnolia-floorplan {
	margin: 0 0 3rem;
}

/* Dark full-bleed title band, matching the single-property header. It carries
   the parent property context, a yellow accent rule, the floor plan name, and
   the spec pills; the breadcrumb, tour button, description, and hero image
   follow below it. */
.magnolia-floorplan__header {
	margin: 0 calc( 50% - 50vw ) 1.5rem;
	padding: 2.5rem calc( 50vw - 50% );
	background: #212529;
	color: #ffffff;
}

/* Parent property context: the property name (linked to its page) over its
   address, shown above the yellow rule and the floor plan name. */
.magnolia-floorplan__property {
	margin: 0 0 1.25rem;
}

.magnolia-floorplan__property-name {
	display: inline-block;
	color: #ffffff;
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
}

.magnolia-floorplan__property-name:hover,
.magnolia-floorplan__property-name:focus {
	text-decoration: underline;
}

.magnolia-floorplan__property-address {
	margin: 0.35rem 0 0;
	color: rgba( 255, 255, 255, 0.72 );
	font-size: 0.9rem;
	line-height: 1.5;
}

/* Yellow accent rule dividing the property context from the floor plan name. */
.magnolia-floorplan__separator {
	display: block;
	width: 72px;
	height: 3px;
	margin: 0 0 1.25rem;
	background: var( --magnolia-accent );
	border-radius: 999px;
}

.magnolia-floorplan__name {
	margin: 0 0 1rem;
	color: #ffffff;
	font-size: clamp( 1.5rem, 2.5vw, 1.9rem );
	font-weight: 300;
	line-height: 1.25;
	letter-spacing: 0.28em;
	text-transform: uppercase;
}

.magnolia-floorplan__specs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Translucent-white pills so the specs read as chips on the dark band. */
.magnolia-floorplan__specs li {
	padding: 0.4rem 0.9rem;
	background: rgba( 255, 255, 255, 0.12 );
	border-radius: var( --magnolia-radius );
	color: rgba( 255, 255, 255, 0.92 );
	font-size: 0.95rem;
}

.magnolia-floorplan__hero {
	margin: 0 0 1.5rem;
}

.magnolia-floorplan__hero img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var( --magnolia-radius );
}

.magnolia-floorplan__content {
	margin-bottom: 1.5rem;
	line-height: 1.7;
}

.magnolia-floorplan-card {
	margin-bottom: var( --magnolia-gap );
}

.magnolia-floorplan-card__inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: var( --magnolia-surface );
	border: 1px solid var( --magnolia-border );
	border-radius: var( --magnolia-radius );
	box-shadow: var( --magnolia-shadow );
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.magnolia-floorplan-card__inner:hover,
.magnolia-floorplan-card__inner:focus-within {
	box-shadow: var( --magnolia-shadow-hover );
	transform: translateY( -2px );
}

/* Media box: a consistent 250px-tall area that vertically centres the plan.
   These are diagrams, so the image is contained (never cropped) and capped at
   250px on either side, which standardises the cards whatever each plan's
   natural size. */
.magnolia-floorplan-card__media {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 250px;
	padding: 1.25rem 1.25rem 0;
}

.magnolia-floorplan-card__media img {
	display: block;
	max-width: min( 100%, 250px );
	max-height: 250px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.magnolia-floorplan-card__name {
	margin: 0;
	padding: 1rem 1.25rem 0.5rem;
	color: #212529;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-align: center;
	text-transform: uppercase;
}

.magnolia-floorplan-card__name a {
	color: inherit;
	text-decoration: none;
}

.magnolia-floorplan-card__name a:hover {
	text-decoration: underline;
}

/* Stat row - equal columns (bed / bath / sq. ft.), each a big value over a small
   uppercase label, divided by hairlines. margin-top:auto pins the row to the
   card foot so it aligns across cards with differing name lengths. The row
   shrinks to the stats that carry a value (a missing bath or sqft drops out). */
.magnolia-floorplan-card__specs {
	display: flex;
	margin: auto 0 0;
	padding: 0.75rem 1.25rem 1.25rem;
	border-top: 1px solid var( --magnolia-border );
}

.magnolia-floorplan-card__stat {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
	text-align: center;
}

.magnolia-floorplan-card__stat + .magnolia-floorplan-card__stat {
	border-left: 1px solid var( --magnolia-border );
}

.magnolia-floorplan-card__stat-value {
	color: #212529;
	font-size: 1.5rem;
	font-weight: 300;
	line-height: 1.1;
}

.magnolia-floorplan-card__stat-label {
	color: var( --magnolia-muted );
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Floor plans archive: the page listing every plan a property offers, one level
   above a single plan. It reuses the dark property-context header band above,
   then lays the plan cards out in the same Bootstrap grid the property page
   uses; the wrapper carries the single plan's bottom margin for a matching page
   foot. */
.magnolia-floorplans-archive {
	margin: 0 0 3rem;
}

/* Stands in for the card grid when a property has no published plans yet, so the
   archive reads as an intentional empty state rather than a blank page. */
.magnolia-floorplans-archive__empty {
	margin: 0;
	padding: 2rem 0;
	color: var( --magnolia-muted );
	font-size: 1.05rem;
}

/* ---------------------------------------------------------------------------
 * Person card (leasing team)
 * ------------------------------------------------------------------------ */

.magnolia-person-card {
	margin-bottom: var( --magnolia-gap );
}

.magnolia-person-card__inner {
	height: 100%;
	padding: 1.25rem;
	text-align: center;
	background: var( --magnolia-surface );
	border: 1px solid var( --magnolia-border );
	border-radius: var( --magnolia-radius );
	box-shadow: var( --magnolia-shadow );
}

/* Keep the photo a perfect circle at any column width: the width caps at 250px
   but shrinks to the column via max-width, and aspect-ratio holds the box square
   so a narrow column never flattens the circle into a vertical oval. A fixed
   height must NOT be reintroduced - it would override aspect-ratio and let the
   width shrink while the height stays put. object-fit: cover crops the source to
   fill the square without distorting it. */
.magnolia-person-card__photo {
	width: 250px;
	max-width: 100%;
	aspect-ratio: 1;
	margin: 0 auto 0.75rem;
	object-fit: cover;
	border-radius: 50%;
}

.magnolia-person-card__name {
	margin: 0 0 0.25rem;
	color: #212529;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.magnolia-person-card__title {
	margin: 0 0 0.5rem;
	color: var( --magnolia-accent-strong );
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
 * Promotion
 * ------------------------------------------------------------------------ */

.magnolia-promotion {
	margin-bottom: 1.25rem;
	padding: 1.25rem 1.5rem;
	background: #fbf7ef;
	border: 1px solid #ecdfc6;
	border-left: 4px solid #c79a3e;
	border-radius: var( --magnolia-radius );
}

.magnolia-promotion__title {
	margin: 0 0 0.5rem;
	color: #212529;
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.magnolia-promotion__body {
	margin-bottom: 0.5rem;
	line-height: 1.6;
}

.magnolia-promotion__restrictions {
	margin: 0.25rem 0 0;
	color: var( --magnolia-muted );
	font-size: 0.85rem;
}

/* Hero placement: the current-offers section is lifted between the full-bleed
   hero photo and the dark title band, so a move-in special leads the page
   instead of sitting below the floor plans. It is styled as the prior site's
   solid yellow move-in-special banner - a full-bleed band carrying the offer as
   centered, bold dark copy - rather than a bordered card, and kept inline (no
   hero overlay, no dismiss) so it needs no JavaScript. The band bleeds to the
   viewport edges with the same calc( 50% - 50vw ) trick as the hero, and an
   inverse calc( 50vw - 50% ) horizontal padding returns the offer copy to the
   article's content column. */
.magnolia-property__promotions--hero {
	margin: 0 calc( 50% - 50vw );
	padding: 1.75rem calc( 50vw - 50% );
	background: var( --magnolia-accent );
	text-align: center;
}

/* On the yellow band the offer itself is the banner copy, so the card chrome -
   cream fill, gold border, radius, padding - is dropped and the offer sits
   directly on the band in dark ink for contrast. */
.magnolia-property__promotions--hero .magnolia-promotion {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

/* Divider between stacked offers when a property carries more than one. */
.magnolia-property__promotions--hero .magnolia-promotion + .magnolia-promotion {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba( 31, 26, 7, 0.22 );
}

.magnolia-property__promotions--hero .magnolia-promotion__title {
	margin: 0 0 0.35rem;
	color: #1f1a07;
	font-size: 1.35rem;
	letter-spacing: 0.01em;
	text-transform: none;
}

.magnolia-property__promotions--hero .magnolia-promotion__body {
	color: #2c2410;
}

.magnolia-property__promotions--hero .magnolia-promotion__restrictions {
	color: #5c5018;
}

/* ---------------------------------------------------------------------------
 * Office hours
 * ------------------------------------------------------------------------ */

.magnolia-hours {
	margin-bottom: 2.5rem;
}

.magnolia-hours__list {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.4rem 1.5rem;
	max-width: 360px;
	margin: 0;
}

.magnolia-hours__day {
	margin: 0;
	color: #212529;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.magnolia-hours__value {
	margin: 0;
	color: var( --magnolia-muted );
}

/* ---------------------------------------------------------------------------
 * Breadcrumb
 * ------------------------------------------------------------------------ */

.magnolia-breadcrumb {
	margin: 1rem 0 1.5rem;
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.magnolia-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.magnolia-breadcrumb__item {
	display: flex;
	align-items: center;
}

.magnolia-breadcrumb__item:not( :last-child )::after {
	content: "/";
	margin-left: 0.4rem;
	color: var( --magnolia-muted );
}

.magnolia-breadcrumb__item a {
	color: var( --magnolia-accent-strong );
	text-decoration: none;
}

.magnolia-breadcrumb__item a:hover {
	text-decoration: underline;
}

.magnolia-breadcrumb__item--current {
	color: var( --magnolia-muted );
}

/* ---------------------------------------------------------------------------
 * Gallery (responsive grid; lightbox carousel layered on by JS)
 * ------------------------------------------------------------------------ */

.magnolia-gallery {
	margin-bottom: 2.5rem;
}

.magnolia-gallery__grid {
	row-gap: var( --magnolia-gap );
}

.magnolia-gallery__item {
	margin: 0;
}

/* The anchor is the progressive-enhancement fallback (opens the full image
   without JS) and the click target the lightbox upgrades. */
.magnolia-gallery__link {
	display: block;
	border-radius: var( --magnolia-radius );
	overflow: hidden;
	cursor: zoom-in;
}

.magnolia-gallery__img {
	display: block;
	width: 100%;
	height: 200px;
	object-fit: cover;
	border-radius: var( --magnolia-radius );
	transition: transform 0.2s ease;
}

.magnolia-gallery__link:hover .magnolia-gallery__img,
.magnolia-gallery__link:focus-visible .magnolia-gallery__img {
	transform: scale( 1.04 );
}

/* On phones every property gallery shows one full-width image per row,
   overriding the Bootstrap col-6 two-up. The showcase leads the page and the
   amenities and lifestyle galleries match it, so the whole gallery stack reads
   as a single column on mobile. Above this breakpoint they share the Bootstrap
   grid (two-up, then three-up at md). Scoped to .magnolia-property so the
   floorplan page's gallery is unaffected. */
@media ( max-width: 575.98px ) {
	.magnolia-property .magnolia-gallery__item {
		flex: 0 0 100%;
		width: 100%;
		max-width: 100%;
	}
}

/* ---------------------------------------------------------------------------
 * Lightbox overlay (built and reused by magnolia-properties-gallery.js)
 * ------------------------------------------------------------------------ */

/* Sit above the theme's Bootstrap fixed-top header (z-index 1030) and the
   logged-in admin bar (99999) so the overlay is a true fullscreen modal and its
   top-anchored close button and counter are never hidden behind them. */
.magnolia-lightbox {
	display: flex;
	position: fixed;
	inset: 0;
	z-index: 100000;
	align-items: center;
	justify-content: center;
}

/* Beat the display:flex above when the overlay is dismissed. */
.magnolia-lightbox[hidden] {
	display: none;
}

body.magnolia-lightbox-open {
	overflow: hidden;
}

.magnolia-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, 0.85 );
}

.magnolia-lightbox__stage {
	display: flex;
	position: relative;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 3.5rem 1rem;
}

.magnolia-lightbox__figure {
	display: flex;
	z-index: 1;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
}

.magnolia-lightbox__image {
	max-width: min( 1200px, 92vw );
	max-height: 82vh;
	object-fit: contain;
	border-radius: var( --magnolia-radius );
	box-shadow: 0 10px 40px rgba( 0, 0, 0, 0.5 );
}

.magnolia-lightbox__caption {
	max-width: 60ch;
	color: #f3f3f3;
	font-size: 0.95rem;
	text-align: center;
}

.magnolia-lightbox__counter {
	position: absolute;
	top: 1rem;
	left: 50%;
	z-index: 2;
	margin: 0;
	transform: translateX( -50% );
	color: #f3f3f3;
	font-size: 0.9rem;
	letter-spacing: 0.05em;
}

.magnolia-lightbox__close,
.magnolia-lightbox__nav {
	display: flex;
	position: absolute;
	z-index: 2;
	align-items: center;
	justify-content: center;
	padding: 0;
	color: #ffffff;
	background: rgba( 0, 0, 0, 0.4 );
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.15s ease;
}

.magnolia-lightbox__close:hover,
.magnolia-lightbox__nav:hover,
.magnolia-lightbox__close:focus-visible,
.magnolia-lightbox__nav:focus-visible {
	background: rgba( 0, 0, 0, 0.75 );
}

.magnolia-lightbox__close {
	top: 1rem;
	right: 1rem;
	width: 2.75rem;
	height: 2.75rem;
	font-size: 1.75rem;
	line-height: 1;
}

.magnolia-lightbox__nav {
	top: 50%;
	width: 3.25rem;
	height: 3.25rem;
	font-size: 2.25rem;
	line-height: 1;
	transform: translateY( -50% );
}

.magnolia-lightbox__nav--prev {
	left: 1rem;
}

.magnolia-lightbox__nav--next {
	right: 1rem;
}

@media ( max-width: 575.98px ) {
	.magnolia-lightbox__nav {
		width: 2.5rem;
		height: 2.5rem;
		font-size: 1.75rem;
	}

	.magnolia-lightbox__nav--prev {
		left: 0.35rem;
	}

	.magnolia-lightbox__nav--next {
		right: 0.35rem;
	}
}

/* ---------------------------------------------------------------------------
 * Waitlist modal (singular property, not leasing)
 *
 * The header "Join the Waitlist" call to action reveals this dialog, which is
 * server-rendered hidden and centred over a dimmed full-viewport backdrop (the
 * overlay itself). It reuses the lead-form field styling; the dialog is the
 * card, so the form inside sheds its own card chrome.
 * ------------------------------------------------------------------------ */
.magnolia-modal {
	display: flex;
	position: fixed;
	inset: 0;
	z-index: 100000;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	background: rgba( 0, 0, 0, 0.5 );
	overflow-y: auto;
}

/* Beat the display:flex above when the dialog is dismissed. */
.magnolia-modal[hidden] {
	display: none;
}

body.magnolia-modal-open {
	overflow: hidden;
}

.magnolia-modal__dialog {
	position: relative;
	width: 100%;
	max-width: 34rem;
	max-height: calc( 100vh - 3rem );
	margin: auto;
	padding: 1.75rem 2rem;
	overflow-y: auto;
	background: var( --magnolia-surface );
	border-radius: var( --magnolia-radius );
	box-shadow: 0 10px 40px rgba( 0, 0, 0, 0.35 );
}

.magnolia-modal__close {
	display: flex;
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	color: var( --magnolia-muted );
	font-size: 1.6rem;
	line-height: 1;
	background: transparent;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: color 0.15s ease, background 0.15s ease;
}

.magnolia-modal__close:hover,
.magnolia-modal__close:focus-visible {
	color: #212529;
	background: rgba( 0, 0, 0, 0.06 );
}

/* The dialog is the card, so the form inside drops its own card chrome to avoid
   a card-in-card; its fields and submit keep their styling. */
.magnolia-modal .magnolia-form {
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

/* Keep the heading clear of the close control. */
.magnolia-modal .magnolia-form__heading {
	padding-right: 2.25rem;
}

/* ---------------------------------------------------------------------------
 * Two-column property layout
 * ------------------------------------------------------------------------ */

/* The property body is a two-column grid: every content section in the wider
   left column, the tour lead-form in the right column. The right column stays
   sticky while the left column scrolls on desktop, matching the legacy site.
   Below the Bootstrap lg breakpoint the grid collapses to one column and the
   form stacks beneath the content. The sidebar column stretches to the full row
   height (default grid alignment) so its sticky inner has room to travel. */
.magnolia-property__layout {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var( --magnolia-gap );
	margin-bottom: 1.75rem;
}

/* Let the wide left column shrink rather than overflow: grid items default to
   min-width: auto, which would otherwise let wide content force the track. */
.magnolia-property__main {
	min-width: 0;
}

/* Pin the form below the theme's fixed site header (#header.navbar.fixed-top,
   83px tall at the desktop widths where this two-column layout applies) plus a
   gap, so the form heading clears the header instead of hiding beneath it. The
   admin bar, when shown, pushes that fixed header down by its own 32px, so the
   logged-in offset adds the same amount. */
.magnolia-property__sidebar-inner {
	position: sticky;
	top: calc( 83px + 1.5rem );
}

body.admin-bar .magnolia-property__sidebar-inner {
	top: calc( 83px + 1.5rem + 32px );
}

/* The theme wraps all page content in #wrapper with overflow-x: hidden, which
   computes overflow-y to auto and makes the wrapper a scroll container - that
   silently defeats position: sticky for every descendant, including the sidebar
   form. Switching to overflow-x: clip clips horizontal overflow identically
   (no horizontal scrollbar) without establishing a scroll container, so sticky
   works. Scoped to the single-property body so it touches the theme wrapper only
   on the page that needs it, with specificity above the theme's #wrapper rule. */
body.single-magnolia_property #wrapper {
	overflow-x: clip;
}

@media ( max-width: 991.98px ) {
	.magnolia-property__layout {
		grid-template-columns: 1fr;
	}

	.magnolia-property__sidebar-inner {
		position: static;
	}
}

/* ---------------------------------------------------------------------------
 * Lead-capture forms (tour in the sticky sidebar; waitlist in the header modal)
 * ------------------------------------------------------------------------ */

/* Each form is its own white card, matching the other property sections. */
.magnolia-form {
	padding: 1.75rem 2rem;
	background: var( --magnolia-surface );
	border: 1px solid var( --magnolia-border );
	border-radius: var( --magnolia-radius );
	box-shadow: var( --magnolia-shadow );
}

.magnolia-form__form,
.magnolia-form__fields {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.magnolia-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0;
}

.magnolia-form__label {
	color: var( --magnolia-muted );
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.magnolia-form__required {
	margin-left: 0.15rem;
	color: var( --magnolia-accent-strong );
}

.magnolia-form__input {
	width: 100%;
	padding: 0.6rem 0.75rem;
	color: #212529;
	font-size: 1rem;
	line-height: 1.3;
	background: #ffffff;
	border: 1px solid var( --magnolia-border );
	border-radius: var( --magnolia-radius );
}

.magnolia-form__input--textarea {
	min-height: 6rem;
	resize: vertical;
}

.magnolia-form__input:focus {
	border-color: var( --magnolia-accent );
	outline: 2px solid rgba( 246, 207, 63, 0.45 );
	outline-offset: 1px;
}

.magnolia-form__input--invalid {
	border-color: #c0392b;
}

.magnolia-form__input--invalid:focus {
	outline-color: rgba( 192, 57, 43, 0.4 );
}

/* Per-field error note the submission script renders beneath an input the
   server rejected. */
.magnolia-form__error {
	color: #c0392b;
	font-size: 0.8rem;
}

.magnolia-form__submit {
	align-self: stretch;
	padding: 0.7rem 1.85rem;
	color: var( --magnolia-accent-ink );
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	background: var( --magnolia-accent );
	border: 1px solid var( --magnolia-accent );
	border-radius: var( --magnolia-radius );
	cursor: pointer;
	transition: background 0.2s ease;
}

.magnolia-form__submit:hover,
.magnolia-form__submit:focus {
	background: var( --magnolia-accent-hover );
}

.magnolia-form__submit:disabled {
	cursor: default;
	opacity: 0.65;
}

/* Inline result region (role="status"). Hidden until the script writes to it,
   then tinted by state: a neutral pending note, a green confirmation, or a red
   error. */
.magnolia-form__status {
	margin: 1rem 0 0;
	padding: 0.75rem 1rem;
	font-size: 0.95rem;
	border-radius: var( --magnolia-radius );
}

.magnolia-form__status--pending {
	color: var( --magnolia-muted );
	background: #f4f4f4;
}

.magnolia-form__status--success {
	color: #1e6b3a;
	background: #e7f6ec;
	border: 1px solid #bfe6cd;
}

.magnolia-form__status--error {
	color: #8a1c12;
	background: #fdecea;
	border: 1px solid #f5c6c0;
}

.magnolia-form__noscript {
	margin: 0;
	color: var( --magnolia-muted );
}

/* Visually hidden anti-spam honeypot: pulled off-screen and out of the tab
   order, but still submitted so a bot that fills it is rejected server-side. */
.magnolia-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}