/*
 * ARC — Town landing pages (NXDS-54)
 *
 * Restyles the six Elementor town landing pages (Bethel, Brookfield,
 * Danbury, New Fairfield, New Milford, Newtown) to ARC-DESIGN-SYSTEM.md.
 * All six share one structure: an Elementor heading + image + text-editor +
 * link buttons, then a single "RH: Properties V11" widget (rhea-ultra-*
 * card markup).
 *
 * Scope: body.page-town-landing (added via body_class in functions.php)
 * and the page's own Elementor root, .elementor[data-elementor-type="wp-page"].
 * The header and footer are separate Elementor Theme Builder templates with
 * their own roots, so nothing here can reach site chrome.
 *
 * Loaded at PHP_INT_MAX after the parent bundle and Elementor's per-post CSS.
 * !important is used where Elementor's generated
 * `.elementor-{id} .elementor-element-{hash}` rules win the cascade.
 */

body.page-town-landing .elementor[data-elementor-type="wp-page"] {
    --arc-brand-blue: #263D8A;
    --arc-brand-blue-dark: #1B2A66;
    --arc-brand-blue-ink: #0F1A44;
    --arc-brand-yellow: #F2DB0D;
    --arc-brand-yellow-hover: #E6CF00;
    --arc-text: #0B1220;
    --arc-text-muted: #52607A;
    --arc-text-subtle: #8591A8;
    --arc-surface-tint: #F6F8FC;
    --arc-divider: #E4E8F1;
    --arc-divider-strong: #C9D0DE;
    --arc-font-display: 'DM Serif Display', Georgia, serif;
    --arc-font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --arc-radius-md: 12px;
    --arc-shadow-card: 0 1px 2px rgba(15, 26, 68, 0.04), 0 8px 24px rgba(15, 26, 68, 0.06);
    --arc-shadow-card-hover: 0 4px 8px rgba(15, 26, 68, 0.06), 0 16px 40px rgba(15, 26, 68, 0.10);
    --arc-ease: cubic-bezier(0.2, 0.6, 0.2, 1);

    font-family: var(--arc-font-body);
    color: var(--arc-text);
}


/* ============================================================
 * Intro block — H1, description, link buttons
 * ============================================================ */
body.page-town-landing .elementor[data-elementor-type="wp-page"] h1.elementor-heading-title {
    font-family: var(--arc-font-display) !important;
    font-size: clamp(40px, 5.6vw, 68px) !important;
    font-weight: 400 !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
    color: var(--arc-text) !important;
}

body.page-town-landing .elementor[data-elementor-type="wp-page"] .elementor-widget-text-editor,
body.page-town-landing .elementor[data-elementor-type="wp-page"] .elementor-widget-text-editor p {
    font-family: var(--arc-font-body) !important;
    font-size: clamp(17px, 1.4vw, 19px) !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    color: var(--arc-text-muted) !important;
}

/* Link buttons — canonical .btn--primary: yellow pill, ink text. */
body.page-town-landing .elementor[data-elementor-type="wp-page"] .elementor-widget-button .elementor-button {
    font-family: var(--arc-font-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    color: var(--arc-brand-blue-ink) !important;
    background-color: var(--arc-brand-yellow) !important;
    border: 1px solid var(--arc-brand-yellow) !important;
    border-radius: 999px !important;
    padding: 14px 22px !important;
    box-shadow: none !important;
    transition: background-color 220ms var(--arc-ease), border-color 220ms var(--arc-ease);
}

body.page-town-landing .elementor[data-elementor-type="wp-page"] .elementor-widget-button .elementor-button:hover,
body.page-town-landing .elementor[data-elementor-type="wp-page"] .elementor-widget-button .elementor-button:focus {
    color: var(--arc-brand-blue-ink) !important;
    background-color: var(--arc-brand-yellow-hover) !important;
    border-color: var(--arc-brand-yellow-hover) !important;
}

body.page-town-landing .elementor[data-elementor-type="wp-page"] .elementor-widget-button .elementor-button:focus-visible {
    outline: 2px solid var(--arc-brand-yellow);
    outline-offset: 3px;
}

body.page-town-landing .elementor[data-elementor-type="wp-page"] .elementor-widget-button .elementor-button-icon,
body.page-town-landing .elementor[data-elementor-type="wp-page"] .elementor-widget-button .elementor-button-icon svg {
    color: var(--arc-brand-blue-ink) !important;
    fill: var(--arc-brand-blue-ink) !important;
}


/* ============================================================
 * Property grid ("RH: Properties V11" widget, rhea-ultra-* markup)
 * ============================================================ */
body.page-town-landing .elementor[data-elementor-type="wp-page"] .elementor-widget-rhea-ultra-properties-widget-1 :is(p, span, a, div, label, button, select, li):not(.fa):not(.far):not(.fas):not(.fab):not([class*="fa-"]):not([class*="icon"]):not(:is(h1, h2, h3, h4, h5, h6) *) {
    font-family: var(--arc-font-body) !important;
}

/* Card titles: DM Serif Display 22px, tight leading. */
body.page-town-landing .elementor[data-elementor-type="wp-page"] :is(h3.rhea-ultra-property-title, h3.rhea-ultra-property-title a) {
    font-family: var(--arc-font-display) !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    color: var(--arc-text) !important;
    transition: color 150ms var(--arc-ease);
}

body.page-town-landing .elementor[data-elementor-type="wp-page"] h3.rhea-ultra-property-title a:hover {
    color: var(--arc-brand-blue) !important;
}

/* Meta-tooltip headings (Availability etc.) inherit the parent's 28px
   Montserrat H5; bring them to body type. */
body.page-town-landing .elementor[data-elementor-type="wp-page"] h5.rhea-meta-icons-labels {
    font-family: var(--arc-font-body) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: var(--arc-text) !important;
}

/* Address, property type, price */
body.page-town-landing .elementor[data-elementor-type="wp-page"] .rhea_address_ultra a {
    color: var(--arc-text-muted) !important;
    font-size: 14px !important;
}

body.page-town-landing .elementor[data-elementor-type="wp-page"] .rhea-ultra-property-types {
    color: var(--arc-brand-blue) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.page-town-landing .elementor[data-elementor-type="wp-page"] .ere-price-display {
    color: var(--arc-brand-blue) !important;
    font-weight: 700 !important;
}

body.page-town-landing .elementor[data-elementor-type="wp-page"] :is(.ere-price-slash, .ere-price-postfix) {
    color: var(--arc-text-muted) !important;
}

body.page-town-landing .elementor[data-elementor-type="wp-page"] .rhea_ultra_meta_box .figure {
    color: var(--arc-text) !important;
    font-weight: 600 !important;
}

body.page-town-landing .elementor[data-elementor-type="wp-page"] .rhea_ultra_meta_box .label,
body.page-town-landing .elementor[data-elementor-type="wp-page"] p.added-date {
    color: var(--arc-text-muted) !important;
}

/* Pills over the photo: Featured, custom labels use the parent primary
   (#3a519d); swap to ARC brand blue. */
body.page-town-landing .elementor[data-elementor-type="wp-page"] .rhea_ultra_featured {
    background-color: var(--arc-brand-blue) !important;
}

/* Photo radius per design system (--radius-md) */
body.page-town-landing .elementor[data-elementor-type="wp-page"] .elementor-widget-rhea-ultra-properties-widget-1 :is(.rhea-ultra-property-thumb, .rhea-ultra-thumb, .rhea-ultra-card-thumb, .rhea-ultra-property-card figure, .rhea-ultra-property-card .rhea-ultra-image-box) {
    border-radius: var(--arc-radius-md) !important;
}

/* NXDS-73: photo is clickable (arc-town-card-link.js) */
body.page-town-landing .elementor[data-elementor-type="wp-page"] .elementor-widget-rhea-ultra-properties-widget-1 .rhea-ultra-card-thumb-wrapper {
    cursor: pointer;
}

/* Stats line, sort dropdown, view switcher */
body.page-town-landing .elementor[data-elementor-type="wp-page"] p.rhea-ultra-properties-stats {
    font-size: 14px !important;
    color: var(--arc-text-muted) !important;
}

body.page-town-landing .elementor[data-elementor-type="wp-page"] .elementor-widget-rhea-ultra-properties-widget-1 .btn.dropdown-toggle {
    font-size: 13px !important;
    font-weight: 600 !important;
}

@media (prefers-reduced-motion: reduce) {
    body.page-town-landing .elementor[data-elementor-type="wp-page"] * {
        transition: none !important;
    }
}