/*
Theme Name: Real Estate With Mariana
Theme URI: https://realestatewithmariana.com
Author: Built for Mariana VanDam, Associate Broker — Bellabay Realty
Description: A calm, trust-focused block theme for a West Michigan real estate professional. Warm ivory and sand neutrals with a navy palette sampled from the client's own logo. Elegant serif headings, generous white space, and no page-builder dependency.
Version: 1.1.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: real-estate-with-mariana
Tags: full-site-editing, block-patterns, one-column, custom-colors, custom-logo, custom-menu, editor-style, featured-images, threaded-comments, translation-ready
*/

/* ==========================================================================
   Real Estate With Mariana
   All custom classes are prefixed rwm- to avoid collisions with plugins.
   Design tokens live in theme.json; this file handles layout and components.
   ========================================================================== */

:root {
	--rwm-navy: var(--wp--preset--color--navy);
	--rwm-navy-deep: var(--wp--preset--color--navy-deep);
	--rwm-blue: var(--wp--preset--color--blue);
	--rwm-sky: var(--wp--preset--color--sky);
	--rwm-paper: var(--wp--preset--color--paper);
	--rwm-paper-2: var(--wp--preset--color--paper-2);
	--rwm-paper-3: var(--wp--preset--color--paper-3);
	--rwm-ink-body: var(--wp--preset--color--ink-body);
	--rwm-ink-soft: var(--wp--preset--color--ink-soft);
	--rwm-line: var(--wp--preset--color--line);
	--rwm-serif: var(--wp--preset--font-family--cormorant);
	--rwm-sans: var(--wp--preset--font-family--inter);
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.rwm-section { padding-top: 128px; padding-bottom: 128px; }
.rwm-section--tight { padding-top: 96px; padding-bottom: 96px; }
.rwm-section--flush-top { padding-top: 0; }
.rwm-sand { background-color: var(--rwm-paper-2); }

/* --------------------------------------------------------------------------
   Type helpers
   -------------------------------------------------------------------------- */
.rwm-eyebrow {
	font-family: var(--rwm-sans);
	font-size: 11px !important;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--rwm-blue);
	margin-bottom: 24px;
}
.rwm-lede { font-size: 20px; line-height: 1.7; }
.rwm-muted { color: var(--rwm-ink-soft); }

.rwm-txtlink a,
a.rwm-txtlink {
	font-family: var(--rwm-sans);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--rwm-blue);
	display: inline-block;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--rwm-sky);
	text-decoration: none;
	transition: border-color 0.2s ease, letter-spacing 0.2s ease;
}
.rwm-txtlink a:hover,
a.rwm-txtlink:hover {
	border-color: var(--rwm-blue);
	text-decoration: none;
	letter-spacing: 0.17em;
}

/* --------------------------------------------------------------------------
   Buttons — outline variant
   -------------------------------------------------------------------------- */
.wp-block-button.is-style-rwm-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--rwm-navy);
	border: 1px solid var(--rwm-navy);
}
.wp-block-button.is-style-rwm-outline .wp-block-button__link:hover {
	background-color: var(--rwm-navy);
	color: #fff;
}
.wp-block-button.is-style-rwm-light .wp-block-button__link {
	background-color: transparent;
	color: #EDF3F7;
	border: 1px solid rgba(186, 213, 226, 0.5);
}
.wp-block-button.is-style-rwm-light .wp-block-button__link:hover {
	background-color: var(--rwm-sky);
	color: var(--rwm-navy-deep);
	border-color: var(--rwm-sky);
}
.wp-block-button.is-style-rwm-solid-light .wp-block-button__link {
	background-color: #F4F1EC;
	color: var(--rwm-navy-deep);
	border: 1px solid #F4F1EC;
}
.wp-block-button.is-style-rwm-solid-light .wp-block-button__link:hover {
	background-color: #fff;
	border-color: #fff;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.rwm-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background-color: rgba(251, 249, 245, 0.94);
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--rwm-line);
}
.admin-bar .rwm-header { top: 32px; }
.rwm-header .wp-block-site-logo img { height: 62px; width: auto; }
.rwm-header .wp-block-navigation a { color: var(--rwm-ink-body); }
.rwm-header .wp-block-navigation a:hover { color: var(--rwm-blue); text-decoration: none; }
.rwm-header .wp-block-navigation .current-menu-item a { color: var(--rwm-blue); }
.rwm-header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--rwm-paper);
	padding-top: 64px;
}
.rwm-header .wp-block-navigation__responsive-container.is-menu-open a { color: var(--rwm-navy); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.rwm-hero { padding-top: 128px; padding-bottom: 96px; }
.rwm-hero .wp-block-columns { align-items: center; gap: 64px; }
.rwm-hero-sig {
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid var(--rwm-line);
	font-size: 13.5px;
	letter-spacing: 0.05em;
	color: var(--rwm-ink-soft);
}
.rwm-hero-sig strong { color: var(--rwm-navy); font-weight: 600; }

/* Image frames */
.rwm-shot img { display: block; width: 100%; }
.rwm-shot.rwm-ar-45 img { aspect-ratio: 4 / 5; object-fit: cover; }
.rwm-shot.rwm-ar-11 img { aspect-ratio: 1 / 1; object-fit: cover; }
.rwm-shot.rwm-ar-43 img { aspect-ratio: 4 / 3; object-fit: cover; }
.rwm-shot.rwm-ar-32 img { aspect-ratio: 3 / 2; object-fit: cover; }

/* --------------------------------------------------------------------------
   Credibility strip
   -------------------------------------------------------------------------- */
.rwm-credstrip {
	background-color: var(--rwm-paper-2);
	border-top: 1px solid var(--rwm-line);
	border-bottom: 1px solid var(--rwm-line);
	padding-top: 48px;
	padding-bottom: 48px;
}
.rwm-credstrip .wp-block-column { text-align: center; position: relative; padding: 16px 24px; }
.rwm-credstrip .wp-block-column + .wp-block-column::before {
	content: "";
	position: absolute;
	left: 0;
	top: 14%;
	height: 72%;
	width: 1px;
	background: var(--rwm-line);
}
.rwm-cred-num {
	font-family: var(--rwm-serif);
	font-size: clamp(48px, 5vw, 66px) !important;
	color: var(--rwm-navy);
	line-height: 1;
	margin: 0 0 12px;
}
.rwm-cred-lbl {
	font-family: var(--rwm-sans);
	font-size: 11.5px !important;
	font-weight: 600;
	letter-spacing: 0.17em;
	text-transform: uppercase;
	color: var(--rwm-ink-body);
	margin: 0 0 6px;
}
.rwm-cred-sub { font-size: 13px !important; color: var(--rwm-ink-soft); margin: 0; }

/* --------------------------------------------------------------------------
   Dark band with photo background
   -------------------------------------------------------------------------- */
.rwm-band {
	position: relative;
	overflow: hidden;
	background-color: var(--rwm-navy-deep);
	padding-top: 128px;
	padding-bottom: 128px;
}
.rwm-band.has-background-image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		rgba(7, 27, 54, 0.96) 0%,
		rgba(7, 27, 54, 0.90) 42%,
		rgba(7, 27, 54, 0.55) 78%,
		rgba(7, 27, 54, 0.35) 100%
	);
	z-index: 1;
}
.rwm-band > .wp-block-group__inner-container,
.rwm-band > * { position: relative; z-index: 2; }
.rwm-band :is(h1, h2, h3) { color: #F4F1EC; }
.rwm-band p { color: #C3CBD6; }
.rwm-band .rwm-eyebrow { color: #9BC2DA; }
/* The band's direct child is centred by WordPress's constrained layout, so it must
   stay full contentSize width; cap the copy inside it instead, or the whole block
   drifts to the middle of the viewport and stops lining up with the rest of the page. */
.rwm-band > .rwm-band-inner {
	max-width: var(--wp--style--global--content-size, 1240px);
	margin-left: auto;
	margin-right: auto;
}
.rwm-band-inner > * { max-width: 660px; margin-left: 0; margin-right: auto; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.rwm-card {
	background-color: var(--rwm-paper);
	border: 1px solid var(--rwm-line);
	padding: 64px 48px;
	height: 100%;
}
.rwm-sand .rwm-card { background-color: #FBF9F5; }
.rwm-card.rwm-card--sand { background-color: var(--rwm-paper-2); }
.rwm-card > .rwm-card-img,
.rwm-card > .rwm-card-img:first-child {
	margin-top: -64px;
	margin-right: -48px;
	margin-bottom: 48px;
	margin-left: -48px;
	margin-block-start: -64px;
	overflow: hidden;
}
.rwm-card-img img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform 0.5s ease;
}
.rwm-card:hover .rwm-card-img img { transform: scale(1.035); }
.rwm-card-num {
	font-family: var(--rwm-serif);
	font-size: 15px !important;
	color: var(--rwm-blue);
	letter-spacing: 0.2em;
	margin: 0 0 24px;
}
.rwm-card-num.rwm-card-num--word {
	font-family: var(--rwm-sans);
	font-size: 11px !important;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Personality pills
   -------------------------------------------------------------------------- */
.rwm-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.rwm-pills > * {
	font-family: var(--rwm-sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--rwm-ink-body);
	border: 1px solid var(--rwm-line);
	padding: 9px 18px;
	border-radius: 100px;
	background: var(--rwm-paper);
	margin: 0;
}

/* --------------------------------------------------------------------------
   Testimonial
   -------------------------------------------------------------------------- */
.rwm-quote { max-width: 860px; margin-left: auto; margin-right: auto; text-align: center; }
.rwm-quote .wp-block-quote {
	border: 0;
	padding: 0;
	margin: 0;
	font-style: italic;
}
.rwm-quote .wp-block-quote p {
	font-family: var(--rwm-serif);
	font-size: clamp(24px, 2.8vw, 34px);
	line-height: 1.45;
	color: var(--rwm-navy);
	font-style: italic;
}
.rwm-quote .wp-block-quote cite {
	font-style: normal;
	font-family: var(--rwm-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--rwm-ink-soft);
}
.rwm-quote-mark {
	font-family: var(--rwm-serif);
	font-size: 88px !important;
	color: var(--rwm-sky);
	line-height: 0.6;
	margin: 0 0 24px;
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.rwm-contact-list { list-style: none; margin: 48px 0 0; padding: 0; }
.rwm-contact-list li {
	padding: 24px 0;
	border-bottom: 1px solid var(--rwm-line);
	display: flex;
	gap: 24px;
	align-items: baseline;
}
.rwm-contact-list li:first-child { border-top: 1px solid var(--rwm-line); }
.rwm-contact-list strong {
	font-family: var(--rwm-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--rwm-ink-soft);
	min-width: 88px;
	flex-shrink: 0;
}
.rwm-form-shell {
	background-color: var(--rwm-paper-2);
	border: 1px solid var(--rwm-line);
	padding: 48px;
}
.rwm-sand .rwm-form-shell { background-color: #FBF9F5; }
/* Generic form-plugin styling so WPForms / Fluent Forms inherit the design */
.rwm-form-shell input[type="text"],
.rwm-form-shell input[type="email"],
.rwm-form-shell input[type="tel"],
.rwm-form-shell select,
.rwm-form-shell textarea {
	width: 100%;
	font-family: var(--rwm-sans);
	font-size: 16px;
	color: var(--rwm-navy);
	background: var(--rwm-paper);
	border: 1px solid var(--rwm-line);
	padding: 14px 16px;
	border-radius: 0;
	box-shadow: none;
}
.rwm-form-shell :is(input, select, textarea):focus {
	outline: none;
	border-color: var(--rwm-blue);
}
.rwm-form-shell label {
	font-family: var(--rwm-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--rwm-ink-soft);
}
.rwm-form-shell button[type="submit"],
.rwm-form-shell input[type="submit"] {
	width: 100%;
	font-family: var(--rwm-sans);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 17px 32px;
	background: var(--rwm-navy);
	color: #fff;
	border: 1px solid var(--rwm-navy);
	border-radius: 0;
	cursor: pointer;
}
.rwm-form-shell :is(button[type="submit"], input[type="submit"]):hover {
	background: var(--rwm-blue);
	border-color: var(--rwm-blue);
}

/* --------------------------------------------------------------------------
   About page
   -------------------------------------------------------------------------- */
.rwm-pullquote {
	border-left: 2px solid var(--rwm-sky);
	padding: 16px 0 16px 32px;
	margin: 48px 0;
	font-family: var(--rwm-serif);
	font-style: italic;
	font-size: 26px !important;
	line-height: 1.5;
	color: var(--rwm-navy);
}
.rwm-stat { border-top: 1px solid var(--rwm-sky); padding-top: 24px; margin-bottom: 32px; }
.rwm-stat-n {
	font-family: var(--rwm-serif);
	font-size: 42px !important;
	color: var(--rwm-navy);
	line-height: 1;
	margin: 0;
}
.rwm-stat-t { font-size: 13.5px !important; color: var(--rwm-ink-soft); margin: 10px 0 0; }

.rwm-specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rwm-line); border: 1px solid var(--rwm-line); }
.rwm-specs > * {
	background: var(--rwm-paper);
	padding: 32px 24px;
	text-align: center;
	font-family: var(--rwm-sans);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--rwm-ink-body);
	margin: 0;
}
.rwm-sand .rwm-specs > * { background: var(--rwm-paper-2); }

/* --------------------------------------------------------------------------
   RealScout IDX widgets
   Widget colours are set through RealScout's own CSS custom properties so the
   embeds inherit the site palette instead of their default blue.
   -------------------------------------------------------------------------- */
.rwm-rs-search { display: flex; justify-content: center; }
realscout-advanced-search {
	display: block;
	--rs-as-button-text-color: #ffffff;
	--rs-as-background-color: #ffffff;
	--rs-as-button-color: var(--rwm-navy);
	--rs-as-widget-width: 500px !important;
}

.rwm-rs-listings { width: 100%; }
realscout-office-listings {
	display: block;
	width: 100%;
	--rs-listing-divider-color: var(--rwm-navy);
}

.rwm-rs-hv { width: 100%; }
realscout-home-value {
	display: block;
	--rs-hvw-background-color: #ffffff;
	--rs-hvw-title-color: var(--rwm-navy);
	--rs-hvw-subtitle-color: rgba(28, 30, 38, 0.5);
	--rs-hvw-input-text-color: var(--rwm-navy);
	--rs-hvw-primary-button-text-color: #ffffff;
	--rs-hvw-primary-button-color: var(--rwm-navy);
	--rs-hvw-secondary-button-text-color: var(--rwm-navy);
	--rs-hvw-secondary-button-color: #ffffff;
	--rs-hvw-widget-width: auto;
}

/* Before the bundle loads, custom elements are unknown and collapse to zero
   height, which makes the page jump. Reserve space so it doesn't. */
realscout-advanced-search:not(:defined) { min-height: 220px; width: 500px; max-width: 100%; }
realscout-office-listings:not(:defined) { min-height: 420px; }
realscout-home-value:not(:defined) { min-height: 320px; }

@media (max-width: 600px) {
	realscout-advanced-search { --rs-as-widget-width: 100% !important; }
	realscout-advanced-search:not(:defined) { width: 100%; }
}

/* --------------------------------------------------------------------------
   Search page
   -------------------------------------------------------------------------- */
.rwm-idx-slot {
	border: 1px dashed var(--rwm-blue);
	background: var(--rwm-paper-2);
	padding: 96px 32px;
	text-align: center;
}
.rwm-idx-slot p { max-width: 52ch; margin-left: auto; margin-right: auto; color: var(--rwm-ink-soft); font-size: 15px; }
.rwm-areas .wp-block-column { }
.rwm-area {
	border: 1px solid var(--rwm-line);
	background: var(--rwm-paper);
	padding: 32px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	transition: border-color 0.2s ease, background 0.2s ease;
	font-family: var(--rwm-serif);
	font-size: 22px;
	color: var(--rwm-navy);
	text-decoration: none;
	margin: 0;
}
.rwm-area:hover { border-color: var(--rwm-blue); background: var(--rwm-paper-2); text-decoration: none; }
.rwm-area::after { content: "\2192"; color: var(--rwm-blue); font-family: var(--rwm-sans); font-size: 18px; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.rwm-footer {
	background-color: var(--rwm-navy-deep);
	color: #A7B2C0;
	padding-top: 96px;
	padding-bottom: 48px;
	font-size: 14.5px;
}
.rwm-footer p, .rwm-footer li { color: #A7B2C0; }
.rwm-footer .wp-block-site-logo img {
	height: 70px;
	width: auto;
	margin-bottom: 24px;
	/* The logo is navy; render it near-ivory on the dark footer so one uploaded
	   file serves both header and footer. */
	filter: brightness(0) invert(0.94);
}
.rwm-footer a { color: #C8D2DD; text-decoration: none; }
.rwm-footer a:hover { color: #fff; text-decoration: underline; }
.rwm-footer h2, .rwm-footer h5, .rwm-foot-head {
	font-family: var(--rwm-sans);
	font-size: 11px !important;
	font-weight: 600;
	letter-spacing: 0.17em;
	text-transform: uppercase;
	color: #7F8B9C;
	margin: 0 0 24px;
}
.rwm-footer .wp-block-navigation { display: block; }
.rwm-footer .wp-block-navigation ul { display: block; }
.rwm-footer .wp-block-navigation li { margin-bottom: 12px; }
.rwm-footer .wp-block-navigation a { font-size: 14.5px; text-transform: none; letter-spacing: 0; }
.rwm-foot-bottom {
	border-top: 1px solid rgba(186, 213, 226, 0.14);
	padding-top: 32px;
	margin-top: 64px;
	font-size: 12.5px;
	color: #7F8B9C;
}
.rwm-foot-bottom p { color: #7F8B9C; font-size: 12.5px; margin: 0; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
	.rwm-header .wp-block-site-logo img { height: 52px; }
	.rwm-specs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 781px) {
	.rwm-section { padding-top: 96px; padding-bottom: 96px; }
	.rwm-band { padding-top: 96px; padding-bottom: 96px; }
	.rwm-hero { padding-top: 64px; padding-bottom: 64px; }
	.rwm-hero .wp-block-columns { gap: 48px; }
	.rwm-card { padding: 48px 32px; }
	.rwm-card > .rwm-card-img,
	.rwm-card > .rwm-card-img:first-child {
		margin-top: -48px; margin-right: -32px; margin-bottom: 32px; margin-left: -32px;
		margin-block-start: -48px;
	}
	.rwm-credstrip .wp-block-column + .wp-block-column::before { display: none; }
	.rwm-credstrip .wp-block-column + .wp-block-column {
		border-top: 1px solid var(--rwm-line);
		margin-top: 24px;
		padding-top: 32px;
	}
	.rwm-band.has-background-image::before {
		background: linear-gradient(180deg, rgba(7, 27, 54, 0.94) 0%, rgba(7, 27, 54, 0.90) 100%);
	}
	.rwm-form-shell { padding: 32px 24px; }
	.rwm-contact-list li { flex-direction: column; gap: 6px; }
	.rwm-idx-slot { padding: 64px 24px; }
}
@media (max-width: 600px) {
	.rwm-section { padding-top: 64px; padding-bottom: 64px; }
	.rwm-hero { padding-top: 48px; padding-bottom: 64px; }
	.rwm-specs { grid-template-columns: 1fr; }
	.rwm-lede { font-size: 18px; }
	.rwm-header .wp-block-site-logo img { height: 44px; }
	/* Give the logo room on small phones; Search Homes still lives in the menu. */
	.rwm-header .wp-block-buttons { display: none; }
}