/*
 * ARC — RealHomes dynamic templates (NXDS-35)
 *
 * Brings the RealHomes-rendered property archives and single property page
 * onto the ARC design system (ARC-DESIGN-SYSTEM.md): DM Serif Display
 * headings, Plus Jakarta Sans body, ARC blue/neutral palette.
 *
 * Scope: property archives (post-type archive, property-type / -status /
 * -city taxonomies) via #properties-listing, the single property page via
 * .rh-ultra-property-wrapper, the broker (agent) single via
 * body.single-agent .rh-page-container, the Our Team (agents list) page via
 * body.page-template-agents-list .rh-page-container, WP search results via
 * body.search-results .rh-page-container, and the Property Search page via
 * .rh-ultra-properties-half-map. The header and footer are Elementor Pro
 * templates rendered inside .rh_wrap, so nothing here targets .rh_wrap or
 * body directly — only the two content containers below.
 *
 * Enqueued from functions.php at PHP_INT_MAX (after the parent theme's
 * bundle) together with the canonical Google Fonts URL. !important is used
 * on font-family / line-height / color where the parent theme or Elementor
 * kit wins the cascade (see CLAUDE.md, Cascade discipline).
 *
 * 404 is not styled here: unknown URLs redirect to the homepage, so no
 * RealHomes 404 template ever renders.
 */

:is(
    body.single-property .rh-ultra-property-wrapper,
    body.single-agent .rh-page-container,
    body.page-template-agents-list .rh-page-container,
    body.search-results .rh-page-container,
    body.page-template-properties-search .rh-ultra-properties-half-map,
    :is(
        body.post-type-archive-property,
        body.tax-property-type,
        body.tax-property-status,
        body.tax-property-city,
        body.page-template-properties
    ) #properties-listing
) {
    --arc-brand-blue: #263D8A;
    --arc-brand-blue-dark: #1B2A66;
    --arc-brand-blue-ink: #0F1A44;
    --arc-brand-yellow: #F2DB0D;
    --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-ease: cubic-bezier(0.2, 0.6, 0.2, 1);

    /* Parent-theme color variables, re-pointed to the ARC palette. Scoped
       to the content containers so header/footer keep their own values. */
    --rh-global-color-primary: #263D8A;
    --rh-global-color-primary-dark: #1B2A66;
    --rh-global-color-primary-light: #F6F8FC;
    --rh-global-color-text: #0B1220;
    --rh-global-color-headings: #0B1220;
    --rh-global-color-link: #0B1220;
    --rh-global-color-link-hover: #263D8A;
    --rh-global-color-headings-hover: #263D8A;

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


/* ============================================================
 * Body text — everything that isn't a heading inherits Plus Jakarta Sans.
 * The parent sets Public Sans / Montserrat / Source Sans Pro on many
 * individual classes, so it is re-asserted per element group here.
 * ============================================================ */
:is(
    body.single-property .rh-ultra-property-wrapper,
    body.single-agent .rh-page-container,
    body.page-template-agents-list .rh-page-container,
    body.search-results .rh-page-container,
    body.page-template-properties-search .rh-ultra-properties-half-map,
    :is(
        body.post-type-archive-property,
        body.tax-property-type,
        body.tax-property-status,
        body.tax-property-city,
        body.page-template-properties
    ) #properties-listing
) :is(p, li, span, a, label, small, div, td, th, dt, dd, button, input, select, textarea):not(.fa):not([class*="fa-"]):not([class*="icon"]):not([class^="rh_ultra_icon"]):not(:is(h1, h2, h3, h4, h5, h6) *) {
    font-family: var(--arc-font-body) !important;
}


/* ============================================================
 * Headings — DM Serif Display, weight 400, tight line-height
 * ============================================================ */
:is(
    body.single-property .rh-ultra-property-wrapper,
    body.single-agent .rh-page-container,
    body.page-template-agents-list .rh-page-container,
    body.search-results .rh-page-container,
    body.page-template-properties-search .rh-ultra-properties-half-map,
    :is(
        body.post-type-archive-property,
        body.tax-property-type,
        body.tax-property-status,
        body.tax-property-city,
        body.page-template-properties
    ) #properties-listing
) :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--arc-font-display) !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* Page / property title (H1). Colour is left alone on the single page —
   the title sits on the hero photo and the parent sets it to white. */
:is(
    body.single-property .rh-ultra-property-wrapper,
    body.single-agent .rh-page-container,
    body.page-template-agents-list .rh-page-container,
    body.search-results .rh-page-container,
    body.page-template-properties-search .rh-ultra-properties-half-map,
    :is(
        body.post-type-archive-property,
        body.tax-property-type,
        body.tax-property-status,
        body.tax-property-city,
        body.page-template-properties
    ) #properties-listing
) h1 {
    font-size: clamp(32px, 4.2vw, 52px) !important;
    line-height: 1.08 !important;
}

body.single-property .rh-ultra-property-wrapper h1.property-title {
    font-size: clamp(28px, 3.4vw, 42px) !important;
}

:is(
    body.post-type-archive-property,
    body.tax-property-type,
    body.tax-property-status,
    body.tax-property-city,
    body.page-template-properties
) #properties-listing h1.rh-page-title {
    color: var(--arc-text) !important;
}

/* Section headings on the single page ("Quick Stats", "More Details",
   "Property Inquiry Form" ...). */
body.single-property .rh-ultra-property-wrapper :is(h2, h4) {
    font-size: clamp(24px, 2.4vw, 30px) !important;
    color: var(--arc-text) !important;
}

/* Card titles (H3) — design system: 22–26px, line-height 1.15–1.25. */
:is(
    body.single-property .rh-ultra-property-wrapper,
    body.single-agent .rh-page-container,
    body.page-template-agents-list .rh-page-container,
    body.search-results .rh-page-container,
    body.page-template-properties-search .rh-ultra-properties-half-map,
    :is(
        body.post-type-archive-property,
        body.tax-property-type,
        body.tax-property-status,
        body.tax-property-city,
        body.page-template-properties
    ) #properties-listing
) h3 {
    font-size: 22px !important;
    line-height: 1.2 !important;
    color: var(--arc-text) !important;
}

:is(
    body.single-property .rh-ultra-property-wrapper,
    body.single-agent .rh-page-container,
    body.page-template-agents-list .rh-page-container,
    body.search-results .rh-page-container,
    body.page-template-properties-search .rh-ultra-properties-half-map,
    :is(
        body.post-type-archive-property,
        body.tax-property-type,
        body.tax-property-status,
        body.tax-property-city,
        body.page-template-properties
    ) #properties-listing
) h3 a,
:is(
    body.single-property .rh-ultra-property-wrapper,
    body.single-agent .rh-page-container,
    body.page-template-agents-list .rh-page-container,
    body.search-results .rh-page-container,
    body.page-template-properties-search .rh-ultra-properties-half-map,
    :is(
        body.post-type-archive-property,
        body.tax-property-type,
        body.tax-property-status,
        body.tax-property-city,
        body.page-template-properties
    ) #properties-listing
) h4 a {
    font-family: var(--arc-font-display) !important;
    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: 400 !important;
    color: inherit !important;
    transition: color 150ms var(--arc-ease);
}

/* Address link under the card title (parent teal #26688b) */
:is(
    body.post-type-archive-property,
    body.tax-property-type,
    body.tax-property-status,
    body.tax-property-city,
    body.page-template-properties
) #properties-listing .rh-address-ultra a {
    color: var(--arc-text-muted) !important;
}

:is(
    body.single-property .rh-ultra-property-wrapper,
    body.single-agent .rh-page-container,
    body.page-template-agents-list .rh-page-container,
    body.search-results .rh-page-container,
    body.page-template-properties-search .rh-ultra-properties-half-map,
    :is(
        body.post-type-archive-property,
        body.tax-property-type,
        body.tax-property-status,
        body.tax-property-city,
        body.page-template-properties
    ) #properties-listing
) h3 a:hover {
    color: var(--arc-brand-blue) !important;
}


/* ============================================================
 * Price, tags, meta
 * ============================================================ */
:is(
    body.single-property .rh-ultra-property-wrapper,
    body.single-agent .rh-page-container,
    body.page-template-agents-list .rh-page-container,
    body.search-results .rh-page-container,
    body.page-template-properties-search .rh-ultra-properties-half-map,
    :is(
        body.post-type-archive-property,
        body.tax-property-type,
        body.tax-property-status,
        body.tax-property-city,
        body.page-template-properties
    ) #properties-listing
) .ere-price-display {
    color: var(--arc-brand-blue) !important;
    font-weight: 700 !important;
}

/* Featured pill and the single-page price badge use the parent primary
   (#3a519d) as a flat background — swap to ARC brand blue. */
:is(
    body.single-property .rh-ultra-property-wrapper,
    body.single-agent .rh-page-container,
    body.page-template-agents-list .rh-page-container,
    body.search-results .rh-page-container,
    body.page-template-properties-search .rh-ultra-properties-half-map,
    :is(
        body.post-type-archive-property,
        body.tax-property-type,
        body.tax-property-status,
        body.tax-property-city,
        body.page-template-properties
    ) #properties-listing
) :is(.rh_ultra_featured, .rh-ultra-price) {
    background-color: var(--arc-brand-blue) !important;
}

/* Status / type tag pills (For Lease, Office ...) */
:is(
    body.single-property .rh-ultra-property-wrapper,
    body.single-agent .rh-page-container,
    body.page-template-agents-list .rh-page-container,
    body.search-results .rh-page-container,
    body.page-template-properties-search .rh-ultra-properties-half-map,
    :is(
        body.post-type-archive-property,
        body.tax-property-type,
        body.tax-property-status,
        body.tax-property-city,
        body.page-template-properties
    ) #properties-listing
) .rh-ultra-property-tag {
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

:is(
    body.single-property .rh-ultra-property-wrapper,
    body.single-agent .rh-page-container,
    body.page-template-agents-list .rh-page-container,
    body.search-results .rh-page-container,
    body.page-template-properties-search .rh-ultra-properties-half-map,
    :is(
        body.post-type-archive-property,
        body.tax-property-type,
        body.tax-property-status,
        body.tax-property-city,
        body.page-template-properties
    ) #properties-listing
) :is(.rh-ultra-status, .rh-ultra-type):not(.rh-ultra-thumb-info-box :is(.rh-ultra-status, .rh-ultra-type)) {
    color: var(--arc-brand-blue) !important;
}

/* The parent theme's :hover fills the pill with primary blue; keep the text
   readable against it. */
:is(
    body.single-property .rh-ultra-property-wrapper,
    body.single-agent .rh-page-container,
    body.page-template-agents-list .rh-page-container,
    body.search-results .rh-page-container,
    body.page-template-properties-search .rh-ultra-properties-half-map,
    :is(
        body.post-type-archive-property,
        body.tax-property-type,
        body.tax-property-status,
        body.tax-property-city,
        body.page-template-properties
    ) #properties-listing
) :is(.rh-ultra-status, .rh-ultra-type):hover {
    color: #fff !important;
}

/* Meta labels (Area, Bathrooms, "Building Size (SF):") */
:is(
    body.single-property .rh-ultra-property-wrapper,
    body.single-agent .rh-page-container,
    body.page-template-agents-list .rh-page-container,
    body.search-results .rh-page-container,
    body.page-template-properties-search .rh-ultra-properties-half-map,
    :is(
        body.post-type-archive-property,
        body.tax-property-type,
        body.tax-property-status,
        body.tax-property-city,
        body.page-template-properties
    ) #properties-listing
) :is(.rh-ultra-meta-label, .figure, .title) {
    color: var(--arc-text) !important;
}


/* ============================================================
 * Buttons — parent buttons are Montserrat 700 uppercase on #263d8a-ish.
 * Bring them to ARC weight/type; colour stays brand blue, hover goes to
 * brand-blue-dark per the design system's button hover behaviour.
 * ============================================================ */
:is(
    body.single-property .rh-ultra-property-wrapper,
    body.single-agent .rh-page-container,
    body.page-template-agents-list .rh-page-container,
    body.search-results .rh-page-container,
    body.page-template-properties-search .rh-ultra-properties-half-map,
    :is(
        body.post-type-archive-property,
        body.tax-property-type,
        body.tax-property-status,
        body.tax-property-city,
        body.page-template-properties
    ) #properties-listing
) :is(.btn, button[type="submit"], .rh-btn, a.rh-ultra-button) {
    font-family: var(--arc-font-body) !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em;
    transition: background-color 150ms var(--arc-ease), color 150ms var(--arc-ease);
}

body.single-property .rh-ultra-property-wrapper :is(button[type="submit"], .rh-btn, a.rh-ultra-button) {
    background-color: var(--arc-brand-blue) !important;
    color: #fff !important;
}

body.single-property .rh-ultra-property-wrapper :is(button[type="submit"], .rh-btn, a.rh-ultra-button):hover {
    background-color: var(--arc-brand-blue-dark) !important;
    color: #fff !important;
}

@media (prefers-reduced-motion: reduce) {
    :is(
        body.single-property .rh-ultra-property-wrapper,
        body.single-agent .rh-page-container,
        body.page-template-agents-list .rh-page-container,
        body.search-results .rh-page-container,
        body.page-template-properties-search .rh-ultra-properties-half-map,
        #properties-listing
    ) * {
        transition: none !important;
    }
}


/* ============================================================
 * Phase 2 — broker single, WP search results, Property Search page
 * ============================================================ */

/* Page titles: broker name (H1.agent-title) and search results heading
   (H2.rh-page-title). */
/* :is(#main, .rh-page-head) is deliberate — :is() takes the specificity of its
   most specific argument, so the #main id lifts this above the id-scoped
   rules earlier in this file while still matching the title on both pages. */
:is(body.single-agent, body.search-results) .rh-page-container :is(#main, .rh-page-head) :is(.agent-title, .rh-page-title) {
    font-size: clamp(32px, 4.2vw, 52px) !important;
    line-height: 1.08 !important;
    color: var(--arc-text) !important;
}

/* Section headings ("My Listings", "Contact Me", "Property Stats") and
   search-result entry titles. */
:is(body.single-agent, body.search-results) .rh-page-container #main :is(.rh-page-heading, .entry-title) {
    font-size: clamp(24px, 2.4vw, 30px) !important;
    color: var(--arc-text) !important;
}

:is(body.single-agent, body.search-results) .rh-page-container #main .entry-title a {
    font-family: inherit !important;
    font-size: inherit !important;
    color: inherit !important;
}

/* Broker contact labels (Mobile / Email ...) are H4 at 32px in the parent. */
body.single-agent .rh-page-container h4.agent-contact-item-label {
    font-size: 18px !important;
}

/* Pagination (shared by broker listings, search results, Property Search) */
:is(
    body.single-agent .rh-page-container,
    body.page-template-agents-list .rh-page-container,
    body.search-results .rh-page-container,
    body.page-template-properties-search .rh-ultra-properties-half-map
) .rh_pagination__btn {
    font-family: var(--arc-font-body) !important;
    font-weight: 600 !important;
    color: var(--arc-brand-blue) !important;
    background-color: var(--arc-surface-tint) !important;
    transition: background-color 150ms var(--arc-ease), color 150ms var(--arc-ease);
}

:is(
    body.single-agent .rh-page-container,
    body.page-template-agents-list .rh-page-container,
    body.search-results .rh-page-container,
    body.page-template-properties-search .rh-ultra-properties-half-map
) .rh_pagination__btn:hover {
    background-color: var(--arc-divider) !important;
}

:is(
    body.single-agent .rh-page-container,
    body.page-template-agents-list .rh-page-container,
    body.search-results .rh-page-container,
    body.page-template-properties-search .rh-ultra-properties-half-map
) .rh_pagination__btn.current {
    background-color: var(--arc-brand-blue) !important;
    color: #fff !important;
}


/* ============================================================
 * NXDS-55 — Empty-results message on property archives (e.g. towns with
 * no properties yet). Markup comes from realhomes_print_no_result() in
 * functions.php: <div class="rh-no-results-taxonomy"><h4 class="no-results">
 * message with inline links</h4><div class="rh-no-results-btn-group"> two
 * .rh-no-results-search-btn links.
 *
 * The message is an <h4>, so the heading rules above turned it into DM
 * Serif Display at body size. It is body copy — Plus Jakarta Sans — and
 * the legacy style.css button (slide-fill hover, Open Sans, 8px radius,
 * uppercase, parent teal text) becomes the canonical .btn--primary pill.
 * Selectors carry #properties-listing to outrank the id-scoped rules above.
 * ============================================================ */

/* Let the message use the full row instead of one 1/3-width card column. */
:is(
    body.post-type-archive-property,
    body.tax-property-type,
    body.tax-property-status,
    body.tax-property-city,
    body.page-template-properties
) #properties-listing .rh-ultra-grid-box:has(> .rh-no-results-taxonomy) {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
}

:is(
    body.post-type-archive-property,
    body.tax-property-type,
    body.tax-property-status,
    body.tax-property-city,
    body.page-template-properties
) #properties-listing .rh-no-results-taxonomy {
    width: 100%;
    max-width: 680px;
    padding: 24px 15px 64px !important; /* 15px left inset lines up with the page title */
}

:is(
    body.post-type-archive-property,
    body.tax-property-type,
    body.tax-property-status,
    body.tax-property-city,
    body.page-template-properties
) #properties-listing .rh-no-results-taxonomy h4.no-results {
    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;
    margin: 0 0 24px !important;
}

:is(
    body.post-type-archive-property,
    body.tax-property-type,
    body.tax-property-status,
    body.tax-property-city,
    body.page-template-properties
) #properties-listing .rh-no-results-taxonomy h4.no-results a {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: 600 !important;
    color: var(--arc-brand-blue) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

:is(
    body.post-type-archive-property,
    body.tax-property-type,
    body.tax-property-status,
    body.tax-property-city,
    body.page-template-properties
) #properties-listing .rh-no-results-taxonomy h4.no-results a:hover {
    color: var(--arc-brand-blue-dark) !important;
}

/* Buttons: canonical .btn--primary (yellow pill, ink text). */
:is(
    body.post-type-archive-property,
    body.tax-property-type,
    body.tax-property-status,
    body.tax-property-city,
    body.page-template-properties
) #properties-listing .rh-no-results-taxonomy a.rh-no-results-search-btn {
    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: var(--arc-brand-yellow) !important;
    border: 1px solid var(--arc-brand-yellow) !important;
    border-radius: 999px !important;
    padding: 14px 22px !important;
    transition: background-color 220ms var(--arc-ease), border-color 220ms var(--arc-ease);
}

:is(
    body.post-type-archive-property,
    body.tax-property-type,
    body.tax-property-status,
    body.tax-property-city,
    body.page-template-properties
) #properties-listing .rh-no-results-taxonomy a.rh-no-results-search-btn:hover,
:is(
    body.post-type-archive-property,
    body.tax-property-type,
    body.tax-property-status,
    body.tax-property-city,
    body.page-template-properties
) #properties-listing .rh-no-results-taxonomy a.rh-no-results-search-btn:focus {
    color: var(--arc-brand-blue-ink) !important;
    background: #E6CF00 !important;
    border-color: #E6CF00 !important;
}

:is(
    body.post-type-archive-property,
    body.tax-property-type,
    body.tax-property-status,
    body.tax-property-city,
    body.page-template-properties
) #properties-listing .rh-no-results-taxonomy a.rh-no-results-search-btn:focus-visible {
    outline: 2px solid var(--arc-brand-yellow);
    outline-offset: 3px;
}

/* Drop the legacy slide-fill hover layer (style.css ::before). */
:is(
    body.post-type-archive-property,
    body.tax-property-type,
    body.tax-property-status,
    body.tax-property-city,
    body.page-template-properties
) #properties-listing .rh-no-results-taxonomy a.rh-no-results-search-btn::before {
    display: none !important;
}


/* ============================================================
 * NXDS-56 — Our Team page (templates/agents-list.php)
 * Broker cards: article.agent-card > name (h3.agent-title), job title,
 * Mobile/Office contact items (h4 label + link), listing-count link.
 * `#main` in the selectors outranks the id-scoped shared rules above.
 * ============================================================ */
body.page-template-agents-list .rh-page-container p.rh-page-description {
    font-size: clamp(17px, 1.4vw, 19px) !important;
    line-height: 1.6 !important;
    color: var(--arc-text-muted) !important;
}

body.page-template-agents-list #main article.agent-card {
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 26, 68, 0.04), 0 8px 24px rgba(15, 26, 68, 0.06);
}

body.page-template-agents-list #main article.agent-card figure.agent-thumbnail img {
    border-radius: 12px;
}

/* Broker name */
body.page-template-agents-list #main h3.agent-title,
body.page-template-agents-list #main h3.agent-title a {
    font-size: clamp(26px, 2.6vw, 32px) !important;
    line-height: 1.1 !important;
    color: var(--arc-text) !important;
}

body.page-template-agents-list #main h3.agent-title a:hover {
    color: var(--arc-brand-blue) !important;
}

body.page-template-agents-list #main p.agent-job-title {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--arc-text-muted) !important;
}

/* "Mobile" / "Office" — the parent renders these as 32px H4s; they are
   labels, so use the design-system eyebrow treatment. */
body.page-template-agents-list #main h4.agent-contact-item-label {
    font-family: var(--arc-font-body) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--arc-text-muted) !important;
    margin: 0 0 4px !important;
}

body.page-template-agents-list #main .agent-contact-item a {
    font-weight: 600 !important;
    color: var(--arc-brand-blue) !important;
}

body.page-template-agents-list #main .agent-contact-item a:hover {
    color: var(--arc-brand-blue-dark) !important;
}

body.page-template-agents-list #main a.agent-listing-count,
body.page-template-agents-list #main a.agent-listing-count i {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--arc-brand-blue) !important;
}

body.page-template-agents-list #main a.agent-listing-count:hover,
body.page-template-agents-list #main a.agent-listing-count:hover i {
    color: var(--arc-brand-blue-dark) !important;
}

/* ============================================================
 * Sidebar "Featured Properties" slider (Our Team, broker and single
 * property): the price sits on the photo, so it stays white. The shared
 * .ere-price-display rule above would otherwise make it brand blue.
 * ============================================================ */
:is(
    body.single-property .rh-ultra-property-wrapper,
    body.single-agent .rh-page-container,
    body.page-template-agents-list .rh-page-container
) .rh-ultra-bottom-box :is(.ere-price-display, .ere-price-slash, .ere-price-postfix, #arc-specificity-lift) {
    /* The never-matching #arc-specificity-lift argument is deliberate: :is()
       takes its most specific argument, lending id-level specificity so this
       outranks the #properties-listing-scoped price rule above. */
    color: #fff !important;
}