/* ==========================================================
   IDX: Home Valuation Page — Kaplon Realty polish (tokenized)
   File: /wp-content/themes/kadence-child/css/partials/homevaluation.css
   Scope: IDX only (wrapper), page-specific (valuation)
   Added: 2025-08-31
   Notes:
   - Uses shared tokens from colors.css (brand, neutrals, dark mode)
   - !important only where IDX injects inline styles
========================================================== */

/* ---------- 0) Page wrapper / container ---------- */
.IDX-wrapper-standard .IDX-homevaluation,
.IDX-wrapper-standard #IDX-homevaluation,
.IDX-wrapper-standard [data-idx-page="homevaluation"] {
  /* tokens from colors.css */
  /* brand */
  --btn-primary: var(--kaplon-red);
  --btn-primary-hover: var(--kaplon-red-dark);
  --heading-color: var(--color-header-default, var(--kaplon-blue));

  /* light surfaces/text/borders */
  --surface: var(--surface-1, var(--white));
  --surface-muted: var(--surface-soft);
  --text: var(--gray-text);
  --text-muted: var(--gray-600);
  --border: var(--gray-border, var(--gray-border-light));
  --focus-ring: var(--gray-focus-shadow);

  max-width: min(1100px, 92vw);
  margin: clamp(16px, 3vw, 32px) auto;
  padding: clamp(16px, 2vw, 24px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm) !important;
  color: var(--text);
}

/* ---------- 1) Headings & intro copy ---------- */
.IDX-wrapper-standard .IDX-homevaluation h1,
.IDX-wrapper-standard #IDX-homevaluation h1,
.IDX-wrapper-standard [data-idx-page="homevaluation"] h1 {
  margin: 0 0 8px;
  color: var(--heading-color) !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.6rem);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.IDX-wrapper-standard .IDX-homevaluation h2,
.IDX-wrapper-standard #IDX-homevaluation h2,
.IDX-wrapper-standard [data-idx-page="homevaluation"] h2 {
  margin: 12px 0 8px;
  color: var(--heading-color) !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem);
  font-weight: 800;
  line-height: 1.2;
}

/* subtle brand divider under primary heading */
.IDX-wrapper-standard .IDX-homevaluation h1::after,
.IDX-wrapper-standard #IDX-homevaluation h1::after,
.IDX-wrapper-standard [data-idx-page="homevaluation"] h1::after {
  display: block;
  width: 64px;
  height: 3px;
  margin: 10px 0 0;
  background: var(--kaplon-red);
  border-radius: 2px;
  content: "";
}

/* ---------- 2) Form layout ---------- */
.IDX-wrapper-standard .IDX-homevaluation form,
.IDX-wrapper-standard #IDX-homevaluation form,
.IDX-wrapper-standard [data-idx-page="homevaluation"] form {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {

  .IDX-wrapper-standard .IDX-homevaluation form,
  .IDX-wrapper-standard #IDX-homevaluation form,
  .IDX-wrapper-standard [data-idx-page="homevaluation"] form {
    gap: 16px 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Ensure “full width” rows (e.g., comments) stretch across both columns */
.IDX-wrapper-standard :where(.IDX-homevaluation, #IDX-homevaluation, [data-idx-page="homevaluation"]) form :where(.IDX-full) {
  grid-column: 1 / -1;
}

/* ---------- 3) Labels, help text, inputs ---------- */
.IDX-wrapper-standard :where(.IDX-homevaluation, #IDX-homevaluation, [data-idx-page="homevaluation"]) :where(label) {
  display: inline-block;
  margin-bottom: 4px;
  color: var(--heading-color);
  font-weight: 600;
}

.IDX-wrapper-standard :where(.IDX-homevaluation, #IDX-homevaluation, [data-idx-page="homevaluation"]) :where(small) {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.IDX-wrapper-standard :where(.IDX-homevaluation, #IDX-homevaluation, [data-idx-page="homevaluation"]) :where(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], select, textarea) {
  width: 100%;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  line-height: 1.25;
  appearance: none;
}

.IDX-wrapper-standard :where([data-idx-page="homevaluation"], .IDX-homevaluation, #IDX-homevaluation) ::placeholder {
  color: var(--gray-500);
}

/* Focus state — visible, accessible */
.IDX-wrapper-standard :where(.IDX-homevaluation, #IDX-homevaluation, [data-idx-page="homevaluation"]) :where(input, select, textarea):focus {
  border-color: var(--kaplon-blue) !important;
  outline: 2px solid var(--kaplon-blue);
  outline-offset: 2px;
  /* override inline */
}

/* Error states (IDX often adds .IDX-error or .error) */
.IDX-wrapper-standard :where(.IDX-homevaluation, #IDX-homevaluation, [data-idx-page="homevaluation"]) :where(.IDX-error input, input.error) {
  border-color: var(--kaplon-red) !important;
}

/* ---------- 4) Primary CTA (submit) ---------- */
.IDX-wrapper-standard :where(.IDX-homevaluation, #IDX-homevaluation, [data-idx-page="homevaluation"]) :where(input[type="submit"], .IDX-btn) {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 12px 18px !important;
  background: var(--btn-primary) !important;
  border: 1px solid var(--btn-primary) !important;
  border-radius: 10px !important;
  box-shadow: var(--shadow-card-md) !important;
  color: var(--color-on-secondary, var(--kaplon-white)) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  cursor: pointer;
  transition:
    background 0.2s ease,
    transform 0.06s ease;
  gap: 8px;
}

.IDX-wrapper-standard :where(.IDX-homevaluation, #IDX-homevaluation, [data-idx-page="homevaluation"]) :where(input[type="submit"], .IDX-btn):hover {
  background: var(--btn-primary-hover) !important;
  border-color: var(--btn-primary-hover) !important;
  transform: translateY(1px);
}

.IDX-wrapper-standard :where(.IDX-homevaluation, #IDX-homevaluation, [data-idx-page="homevaluation"]) :where(input[type="submit"], .IDX-btn):focus-visible {
  box-shadow: var(--shadow-focus) !important;
  outline: 2px solid var(--kaplon-blue);
  outline-offset: 2px;
}

/* Center and add breathing room above CTA row */
.IDX-wrapper-standard :where(.IDX-homevaluation, #IDX-homevaluation, [data-idx-page="homevaluation"]) :where(.IDX-actions) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 6px;
  gap: 10px;
  grid-column: 1 / -1;
}

/* ---------- 5) Cards / groupings ---------- */
.IDX-wrapper-standard :where(.IDX-homevaluation, #IDX-homevaluation, [data-idx-page="homevaluation"]) :where(.IDX-fieldset) {
  padding: 12px;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.IDX-wrapper-standard :where(.IDX-homevaluation, #IDX-homevaluation, [data-idx-page="homevaluation"]) :where(.IDX-fieldset + .IDX-fieldset) {
  margin-top: 8px;
}

/* ---------- 6) Links ---------- */
.IDX-wrapper-standard :where([data-idx-page="homevaluation"], .IDX-homevaluation, #IDX-homevaluation) :where(a) {
  color: var(--kaplon-blue) !important;
  text-decoration: none !important;
}

.IDX-wrapper-standard :where([data-idx-page="homevaluation"], .IDX-homevaluation, #IDX-homevaluation) :where(a):hover {
  color: var(--kaplon-red) !important;
  text-decoration: underline !important;
}

/* ---------- 7) Dark Mode (IDX valuation only) ---------- */
@media (prefers-color-scheme: dark) {

  html[data-kaplon-color-mode=system] .IDX-wrapper-standard .IDX-homevaluation,html[data-kaplon-color-mode=system] 
  .IDX-wrapper-standard #IDX-homevaluation,html[data-kaplon-color-mode=system] 
  .IDX-wrapper-standard [data-idx-page="homevaluation"] {
    --surface: var(--dark-surface);
    --surface-muted: var(--dark-bg);
    --text: var(--dark-text);
    --text-muted: var(--gray-300);
    --border: var(--dark-border);

    background: var(--surface);
    border-color: var(--border);
    box-shadow: var(--shadow-dark-sm) !important;
    color: var(--text);
  }

  html[data-kaplon-color-mode=system] .IDX-wrapper-standard :where(.IDX-homevaluation, #IDX-homevaluation, [data-idx-page="homevaluation"]) :where(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], select, textarea) {
    background: var(--dark-surface);
    border-color: var(--dark-border);
    color: var(--dark-text);
  }
}
html[data-kaplon-color-mode=dark] .IDX-wrapper-standard .IDX-homevaluation,html[data-kaplon-color-mode=dark] 
  .IDX-wrapper-standard #IDX-homevaluation,html[data-kaplon-color-mode=dark] 
  .IDX-wrapper-standard [data-idx-page="homevaluation"] {
    --surface: var(--dark-surface);
    --surface-muted: var(--dark-bg);
    --text: var(--dark-text);
    --text-muted: var(--gray-300);
    --border: var(--dark-border);

    background: var(--surface);
    border-color: var(--border);
    box-shadow: var(--shadow-dark-sm) !important;
    color: var(--text);
  }
html[data-kaplon-color-mode=dark] .IDX-wrapper-standard :where(.IDX-homevaluation, #IDX-homevaluation, [data-idx-page="homevaluation"]) :where(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], select, textarea) {
    background: var(--dark-surface);
    border-color: var(--dark-border);
    color: var(--dark-text);
  }

/* ---------- 8) Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {

  .IDX-wrapper-standard :where(.IDX-homevaluation, #IDX-homevaluation, [data-idx-page="homevaluation"]) * {
    transition: none !important;
  }
}

/* Kaplon Realty IDX Home Valuation: True Exception Overrides Only */

body {
  background: var(--surface-muted, var(--kaplon-white)) !important;
}

.IDX-page-homevaluation .IDX-pageContainer {
  padding: clamp(24px, 4vw, 48px);
  background: var(--kaplon-white) !important;
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
}

.IDX-page-homevaluation .kaplon-divider {
  height: 3px;
  margin: 10px 0 20px;
  background: var(--kaplon-red) !important;
  border-radius: 2px;
}

/* ===== Rollback marker: Remove entire file to revert ===== */