:root {
  /* Core Brands */
  --brand-primary: #F48A4D; /* Energetic Orange */
  --brand-secondary: #B5C6A9; /* Subtle Sage */
  --brand-trust: #1A365D; /* Deep Navy */

  /* Neutral & Text Colors */
  --brand-bg: #FAFAF7; /* Warm Off-White */
  --brand-text: #2D3748; /* Charcoal */
  --brand-ui-subdued: #E2E8F0; /* Light Gray */

  /* Typography */
  --font-display: 'Fredoka', sans-serif;
  --font-body: 'Nunito', sans-serif;
}

/* =========================================================================
   60-30-10 Rule & Base Typography
==========================================================================*/

body {
  background-color: var(--brand-bg);
  color: var(--brand-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.site-title,
.es-property-title,
.es-widget-title {
  font-family: var(--font-display);
  color: var(--brand-trust);
  font-weight: 600;
  margin-bottom: 0.5em;
}

p {
  color: var(--brand-text);
}

/* =========================================================================
   UI Elements: Buttons & Inputs
==========================================================================*/

button, 
.button, 
.wp-block-button__link,
.es-btn {
  background-color: var(--brand-primary);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  cursor: pointer;
  transition: all 0.3s ease;
}

button:hover, 
.button:hover, 
.wp-block-button__link:hover,
.es-btn:hover {
  background-color: #E0783D; /* Slightly darker orange */
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(244, 138, 77, 0.3);
}

/* Secondary Buttons */
.button-secondary,
.es-btn-secondary {
  background-color: var(--brand-secondary);
  color: #fff;
}

.button-secondary:hover,
.es-btn-secondary:hover {
  background-color: #A3B598;
}

/* Inputs and Forms */
input[type="text"],
input[type="email"],
input[type="number"],
textarea,
select {
  border: 1px solid var(--brand-ui-subdued);
  border-radius: 6px;
  padding: 10px 16px;
  font-family: var(--font-body);
  color: var(--brand-text);
  background-color: #fff;
}

/* =========================================================================
   Estatik / Real Estate Card Styling
==========================================================================*/

.es-property {
  background-color: #fff;
  border-radius: 12px;
  border: 1px solid var(--brand-ui-subdued);
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.es-property:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.es-property-price {
  color: var(--brand-primary);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
}

.es-badge,
.es-label {
  background-color: var(--brand-secondary);
  color: #fff;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 0.85rem;
}

/* =========================================================================
   Mobile Optimization
==========================================================================*/

@media (max-width: 768px) {
  /* Horizontal swipe support for grids */
  .es-properties-grid,
  .es-properties-wrap {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding-bottom: 16px; /* give scrollbar room */
  }

  .es-property {
    flex: 0 0 85%; /* Make cards take 85% of screen to indicate scrollability */
    scroll-snap-align: center;
  }
}