/*
 * Properties in NY — real-estate overrides on top of Storefront's design system.
 * Loaded after storefront.css, so everything here only changes what it needs to.
 */

/* ──────────────────────────────────────────────────────────────────────────
   Palette: Navy and gold. Selected by data-palette="navy-gold" (the theme default).
   Accent is navy, accent-2 is gold. Light and dark mode reuse the same ramps: the
   dark-mode ink is accent-300 and the light ink is accent-700, both checked for AA
   against the page and surface colours (navy 700 ≈ 10.4:1 on the light ground,
   navy 300 ≈ 9.1:1 on the dark ground, white on navy 700 fills ≈ 11.4:1, white on
   gold 700 fills ≈ 6.3:1, gold 700 ink ≈ 5.8:1 on the light ground).
   ────────────────────────────────────────────────────────────────────────── */
:root[data-palette="navy-gold"] {
    --color-accent: #1c3a66;
    --color-accent-2: #c99a22;

    --color-accent-100: #e9eef6;
    --color-accent-200: #d3dded;
    --color-accent-300: #a9bcd9;
    --color-accent-400: #7d97bd;
    --color-accent-500: #4f6d9a;
    --color-accent-600: #2f4e7c;
    --color-accent-700: #1c3a66;
    --color-accent-800: #14284b;
    --color-accent-900: #0c1a2b;

    --color-accent-2-100: #fbf3df;
    --color-accent-2-200: #f6e5b5;
    --color-accent-2-300: #eccd7a;
    --color-accent-2-400: #dcb13f;
    --color-accent-2-500: #c99a22;
    --color-accent-2-600: #a77c12;
    --color-accent-2-700: #7d5a0a;
    --color-accent-2-800: #634606;
    --color-accent-2-900: #472f03;

    --color-accent-fill: var(--color-accent-700);
    --color-accent-fill-hover: var(--color-accent-800);
    --color-accent-fill-active: var(--color-accent-900);
    --color-accent-2-fill: var(--color-accent-2-700);
    --color-accent-2-fill-hover: var(--color-accent-2-800);
}

/* ──────────────────────────────────────────────────────────────────────────
   Listing type badge: For Sale / For Rent, shown on cards and the listing page.
   ────────────────────────────────────────────────────────────────────────── */
.pny-type {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-2, 8px);
    border-radius: var(--radius-sm, 6px);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    background: var(--color-accent-100);
    color: var(--color-accent-ink);
}
.pny-type--rent {
    background: var(--color-accent-2-100);
    color: var(--color-accent-2-800);
}

/* ──────────────────────────────────────────────────────────────────────────
   Facts strip: bedrooms, bathrooms and square feet on cards and the listing page.
   ────────────────────────────────────────────────────────────────────────── */
.pny-facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 8px) var(--space-4, 16px);
    margin: var(--space-2, 8px) 0 0;
    padding: 0;
    list-style: none;
    color: var(--color-muted);
    font-size: .9rem;
}
.pny-facts li + li::before {
    content: "·";
    margin-inline-end: var(--space-4, 16px);
    color: var(--color-muted);
}
.pny-facts strong {
    color: var(--color-text);
    font-weight: 600;
}

/* ──────────────────────────────────────────────────────────────────────────
   Borough and region quick links on the home page.
   ────────────────────────────────────────────────────────────────────────── */
.pny-boroughs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
    margin: var(--space-4, 16px) 0;
    padding: 0;
    list-style: none;
}
.pny-boroughs a {
    display: inline-block;
    padding: var(--space-2, 8px) var(--space-4, 16px);
    border: 1px solid var(--color-accent-300);
    border-radius: 999px;
    color: var(--color-accent-ink);
    text-decoration: none;
    font-weight: 600;
    background: var(--color-surface);
}
.pny-boroughs a:hover,
.pny-boroughs a:focus-visible {
    background: var(--color-accent-100);
}

/* ──────────────────────────────────────────────────────────────────────────
   Agency listings: a contact button in place of the price block.
   ────────────────────────────────────────────────────────────────────────── */
.pny-agency-site {
    display: inline-block;
    margin-top: var(--space-2, 8px);
}

/* ──────────────────────────────────────────────────────────────────────────
   Size filters in the search sidebar: one small label above each min/max pair.
   ────────────────────────────────────────────────────────────────────────── */
.pny-size-label {
    margin: var(--space-3, 12px) 0 var(--space-1, 4px);
    font-size: .85rem;
    color: var(--color-muted);
}