/* Supplementary CSS that theme.json can't express — kept small and centralized
   per migration-docs/16-architecture-pivot-gutenberg.md. */

/* ---------------------------------------------------------------------
   Dark mode. Values copied verbatim (via CSS oklch(), not hand-converted
   hex) from the Lovable reference's .dark block in styles.css, so they're
   exact, not approximated. Primary/accent are intentionally left as their
   light-mode values: nearly every block that sits on a "primary"
   background uses WordPress's own "background"-colored text (near-white)
   for contrast — inverting primary to a light teal, as the original app's
   component-level styling does, would break that pairing across every
   dark panel (Hero, Inclusion, Financing, Contact info, Footer). Keeping
   primary dark preserves correct contrast everywhere without having to
   revisit every block's text-color choice individually.
   --------------------------------------------------------------------- */
:root.dark {
	--wp--preset--color--background: oklch(0.185 0.032 220);
	--wp--preset--color--foreground: oklch(0.955 0.008 95);
	--wp--preset--color--secondary: oklch(0.235 0.035 218);
	--wp--preset--color--border: oklch(1 0 0 / 14%);
	--wp--preset--color--accent: oklch(0.8 0.115 88);
}

.erc-theme-toggle {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--border);
	background: transparent;
	cursor: pointer;
	color: inherit;
	flex-shrink: 0;
}

.erc-theme-toggle__icon-dark { display: none; }
.dark .erc-theme-toggle__icon-light { display: none; }
.dark .erc-theme-toggle__icon-dark { display: inline; }

/* ---------------------------------------------------------------------
   Header: desktop nav/language/phone visible ≥1280px (matches the
   Lovable reference's xl: breakpoint exactly); hamburger + drawer below
   that.
   --------------------------------------------------------------------- */
.erc-site-header__desktop {
	display: none;
	align-items: center;
	gap: 1.75rem;
}

.erc-mobile-menu-toggle {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--border);
	background: transparent;
	cursor: pointer;
}

.erc-mobile-menu-toggle__bars,
.erc-mobile-menu-toggle__bars::before,
.erc-mobile-menu-toggle__bars::after {
	display: block;
	width: 1.1rem;
	height: 2px;
	background: currentColor;
	position: relative;
}

.erc-mobile-menu-toggle__bars::before { content: ""; position: absolute; top: -6px; }
.erc-mobile-menu-toggle__bars::after { content: ""; position: absolute; top: 6px; }

.erc-mobile-drawer {
	display: none;
	flex-direction: column;
	gap: 1rem;
	width: 100%;
	padding: 1rem 0 0.5rem;
	border-top: 1px solid var(--wp--preset--color--border);
	margin-top: 1rem;
}

.erc-mobile-drawer .erc-site-nav {
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
}

.erc-site-header.erc-mobile-menu-open .erc-mobile-drawer {
	display: flex;
}

@media (min-width: 1280px) {
	.erc-site-header__desktop {
		display: flex;
	}
	.erc-mobile-menu-toggle,
	.erc-mobile-drawer {
		display: none !important;
	}
}

.reveal {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
		transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal[data-visible="true"] {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Eyebrow label, ported verbatim from lovable-source/src/styles.css's
   @utility eyebrow (--color-muted-foreground matched to the muted gray
   already used elsewhere in this file, e.g. .erc-property-card__specs).
   Global, not testimonials-specific, so any section can opt in. */
.eyebrow {
	font-size: 0.72rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 500;
	color: #6b7280;
}

.has-shadow-soft {
	box-shadow: var(--wp--custom--shadow--soft);
}

.has-shadow-lift {
	box-shadow: var(--wp--custom--shadow--lift);
}

/* Property filter bar */
.erc-filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: flex-end;
	background: var(--wp--preset--color--secondary);
	border-radius: var(--wp--custom--radius--base);
	padding: 1.25rem;
	margin-bottom: 2rem;
}

.erc-filter-bar__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0;
}

.erc-filter-bar__field select {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 0.6rem;
	padding: 0.55rem 0.75rem;
	min-width: 180px;
	font-family: var(--wp--preset--font-family--body);
}

.erc-filter-bar__submit {
	margin-left: auto;
}

/* Property card (used by the property-card block, on its own and inside
   the property-grid block's query loop) */
.erc-property-card {
	display: block;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--base);
	background: #fff;
	box-shadow: var(--wp--custom--shadow--soft);
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.3s ease;
}

.erc-property-card:hover {
	box-shadow: var(--wp--custom--shadow--lift);
}

.erc-property-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.erc-property-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.erc-property-card__tag {
	position: absolute;
	top: 1rem;
	left: 1rem;
	background: rgba(252, 251, 248, 0.95);
	border-radius: 999px;
	padding: 0.25rem 0.75rem;
	font-size: 0.75rem;
	font-weight: 500;
}

.erc-property-card__status {
	position: absolute;
	top: 1rem;
	right: 1rem;
	background: rgba(252, 251, 248, 0.95);
	border-radius: 999px;
	padding: 0.25rem 0.75rem;
	font-size: 0.75rem;
	font-weight: 500;
}

.erc-property-card__body {
	padding: 1.5rem;
}

.erc-property-card__price {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	margin: 0;
}

.erc-property-card__specs {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--border);
	font-size: 0.875rem;
	color: #6b7280;
	list-style: none;
	padding-left: 0;
}

/* Property details: map, agent, similar properties */
.erc-property-details__map {
	margin: 1.5rem 0;
	border-radius: var(--wp--custom--radius--base);
	overflow: hidden;
}

.erc-property-details__map iframe {
	width: 100%;
	height: 320px;
	border: 0;
	display: block;
}

.erc-property-details__agent {
	margin: 1.5rem 0;
	padding: 1.25rem;
	border-radius: var(--wp--custom--radius--base);
	background: var(--wp--preset--color--secondary);
}

.erc-property-details__similar {
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--wp--preset--color--border);
}

/* Property details (single-property template) */
.erc-property-details__price {
	font-family: var(--wp--preset--font-family--display);
	font-size: 2.25rem;
	margin: 0;
}

.erc-property-card__specs li,
.erc-property-details__specs li {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.erc-property-details__specs {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin: 1rem 0;
	list-style: none;
	padding-left: 0;
}

/* Testimonials carousel */
.erc-testimonials-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: 2.5rem;
}

.erc-testimonials-nav {
	display: flex;
	gap: 0.5rem;
	flex-shrink: 0;
}

.erc-testimonials-nav__btn {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--border);
	background: transparent;
	cursor: pointer;
	color: inherit;
	transition: background-color 0.2s ease;
}

.erc-testimonials-nav__btn:hover {
	background: var(--wp--preset--color--secondary);
}

.erc-testimonials {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.5rem;
}

.erc-testimonials__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: var(--wp--custom--radius--base);
	padding: 1.75rem;
	background: #fff;
	margin: 0;
}

.erc-testimonials__quote-icon {
	color: var(--wp--preset--color--accent);
}

.erc-testimonials__card blockquote {
	flex: 1;
	margin: 1.25rem 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.15rem;
	line-height: 1.4;
}

.erc-testimonials__card figcaption {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--wp--preset--color--border);
}

.erc-testimonials__name {
	margin: 0;
	font-size: 0.9rem;
	font-weight: 500;
}

.erc-testimonials__role {
	margin: 0.15rem 0 0;
	font-size: 0.85rem;
	color: #6b7280;
}

.erc-testimonials__stars {
	display: flex;
	gap: 0.15rem;
	margin-top: 0.6rem;
	color: var(--wp--preset--color--accent);
}

/* Contact form */
.erc-contact-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin-bottom: 1rem;
}

.erc-contact-form__field input,
.erc-contact-form__field select,
.erc-contact-form__field textarea {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 0.6rem;
	padding: 0.6rem 0.85rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.95rem;
}

.erc-contact-form__error {
	color: #b3261e;
	font-size: 0.8rem;
	min-height: 1em;
}

.erc-contact-form__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.erc-contact-form__status {
	margin-top: 0.75rem;
}

.erc-contact-form__success {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	border-radius: var(--wp--custom--radius--base);
	background: var(--wp--preset--color--secondary);
	padding: 1.25rem;
	margin-top: 1rem;
}

.erc-contact-form__success .erc-icon {
	color: var(--wp--preset--color--accent);
	margin-top: 0.15rem;
}

.erc-contact-form__success p {
	margin: 0;
}

/* Site navigation (custom-rendered, see erc-site-navigation block) */
.erc-site-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	align-items: center;
}

.erc-site-nav a {
	text-decoration: none;
	color: inherit;
	font-size: 0.9rem;
}

.erc-site-nav a:hover {
	color: var(--wp--preset--color--accent);
}

/* Site contact panel */
.erc-site-contact-panel__list {
	list-style: none;
	padding-left: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
}

.erc-site-contact-panel__list li,
.erc-site-contact-panel__list a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.erc-site-contact-panel__whatsapp {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1rem;
	padding: 0.6rem 1.25rem;
	border-radius: 999px;
	background: #25d366;
	color: #0b3d24;
	text-decoration: none;
	font-weight: 500;
}

.erc-site-contact-panel__socials {
	list-style: none;
	padding-left: 0;
	display: flex;
	gap: 0.75rem;
	margin-top: 1rem;
}

.erc-site-contact-panel__socials a {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--border);
	transition: background-color 0.2s ease;
}

.erc-site-contact-panel__socials a:hover {
	background: var(--wp--preset--color--secondary);
}

.erc-icon {
	flex-shrink: 0;
}

/* Language switcher */
.erc-language-switcher {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	padding: 0.25rem;
}

.erc-language-switcher a {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 500;
	text-transform: uppercase;
	text-decoration: none;
}

.erc-language-switcher a.erc-language-switcher__current {
	background: var(--wp--preset--color--primary);
	color: #fff;
}