/*
Theme Name:   Hello Elementor Child - Luxury Estates
Theme URI:    https://example.com/
Description:  Custom child theme of Hello Elementor built for a premium luxury real estate portfolio site. Extends the parent theme's minimal footprint with a champagne/charcoal editorial palette and deep RankMath schema integration for property listings.
Author:       Your Agency Name
Author URI:   https://example.com/
Template:     hello-elementor
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  hello-elementor-child
*/

/* ==========================================================================
   1. DESIGN TOKENS — Luxury Real Estate Palette
   These custom properties are consumed globally and by Elementor global
   colors/typography if you re-map them under Site Settings > Global Colors.
   ========================================================================== */
:root {
	/* Core palette */
	--hec-color-charcoal: #1C1C1C;      /* Deep Charcoal - primary text / dark sections */
	--hec-color-gold: #D4AF37;          /* Champagne Gold - accents, CTAs, borders */
	--hec-color-off-white: #FAFAFA;     /* Warm Off-White - primary background */

	/* Derived / supporting tones */
	--hec-color-charcoal-80: rgba(28, 28, 28, 0.8);
	--hec-color-charcoal-40: rgba(28, 28, 28, 0.4);
	--hec-color-gold-soft: #E9D9A8;     /* Lightened gold for hover/tints */
	--hec-color-gold-deep: #B8912B;     /* Deepened gold for active/pressed states */
	--hec-color-hairline: #E4E1D8;      /* Subtle dividers on off-white background */
	--hec-color-overlay: rgba(28, 28, 28, 0.55); /* Image overlays on hero/listing cards */

	/* Typography scale (pair a serif display face with a clean sans body in Elementor) */
	--hec-font-display: "Playfair Display", "Times New Roman", serif;
	--hec-font-body: "Jost", "Helvetica Neue", Arial, sans-serif;

	/* Spacing / radius */
	--hec-radius-card: 2px;   /* Luxury real estate favors sharp, architectural corners */
	--hec-space-section: 96px;
}

/* ==========================================================================
   2. GLOBAL RESETS / BASE OVERRIDES
   ========================================================================== */
body {
	background-color: var(--hec-color-off-white);
	color: var(--hec-color-charcoal);
	font-family: var(--hec-font-body);
}

h1, h2, h3, h4,
.elementor-heading-title {
	font-family: var(--hec-font-display);
	color: var(--hec-color-charcoal);
	letter-spacing: 0.02em;
}

a {
	color: var(--hec-color-charcoal);
	transition: color 0.25s ease;
}

a:hover,
a:focus {
	color: var(--hec-color-gold);
}

/* ==========================================================================
   3. BUTTONS / CTAs
   ========================================================================== */
.elementor-button,
button.elementor-button,
a.elementor-button {
	background-color: var(--hec-color-charcoal);
	color: var(--hec-color-off-white);
	border: 1px solid var(--hec-color-charcoal);
	border-radius: var(--hec-radius-card);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 13px;
	padding: 16px 32px;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.elementor-button:hover,
button.elementor-button:hover,
a.elementor-button:hover {
	background-color: var(--hec-color-gold);
	border-color: var(--hec-color-gold);
	color: var(--hec-color-charcoal);
}

.hec-btn-outline {
	background-color: transparent;
	border: 1px solid var(--hec-color-gold);
	color: var(--hec-color-charcoal);
}

.hec-btn-outline:hover {
	background-color: var(--hec-color-gold);
	color: var(--hec-color-charcoal);
}

/* ==========================================================================
   4. LISTING CARDS (Loop Grid / Archive)
   Class hooks intended for use inside Elementor Loop Item templates.
   ========================================================================== */
.hec-listing-card {
	background-color: #FFFFFF;
	border: 1px solid var(--hec-color-hairline);
	border-radius: var(--hec-radius-card);
	overflow: hidden;
}

.hec-listing-card__media {
	position: relative;
}

.hec-listing-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(28,28,28,0) 55%, var(--hec-color-overlay) 100%);
	pointer-events: none;
}

.hec-listing-card__price {
	font-family: var(--hec-font-display);
	color: var(--hec-color-gold-deep);
	font-size: 22px;
	font-weight: 600;
}

.hec-listing-card__meta {
	color: var(--hec-color-charcoal-80);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.hec-listing-card__badge {
	display: inline-block;
	background-color: var(--hec-color-charcoal);
	color: var(--hec-color-gold);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: var(--hec-radius-card);
}

/* Legal-status specific badge (e.g. "Individual 7/12", "Clear Title") */
.hec-badge-legal {
	background-color: var(--hec-color-off-white);
	color: var(--hec-color-charcoal);
	border: 1px solid var(--hec-color-gold);
}

/* ==========================================================================
   5. SECTIONS / SPACING RHYTHM
   ========================================================================== */
.hec-section {
	padding-top: var(--hec-space-section);
	padding-bottom: var(--hec-space-section);
}

.hec-section--dark {
	background-color: var(--hec-color-charcoal);
	color: var(--hec-color-off-white);
}

.hec-section--dark h1,
.hec-section--dark h2,
.hec-section--dark h3 {
	color: var(--hec-color-off-white);
}

.hec-divider-gold {
	width: 64px;
	height: 2px;
	background-color: var(--hec-color-gold);
	margin: 24px auto;
}

/* ==========================================================================
   6. RESPONSIVE ADJUSTMENTS
   ========================================================================== */
@media (max-width: 767px) {
	:root {
		--hec-space-section: 56px;
	}

	.hec-listing-card__price {
		font-size: 18px;
	}
}