/* /themes/tenants/dc.css — DC-HOME-REFRESH-01 — Donna Caccioppo's tenant sheet.
   Loaded by the tenant layout through dc's homepage composition (brand.themeCssHref) on EVERY dc page, AFTER the Biscayne sheet
   and the brand knob, BEFORE any CMS customCss (so the CMS always wins). No other tenant loads it. Her colours otherwise stay
   Biscayne (her blue is unchanged): this sheet carries her logo sizes, the sand accents and the broker footer only.

   Her sand, from her logo (the exact fill in web-clients/caccioppo/_brand/logos/*.svg):
     • #D8B98E — on the slate bands (#1F2A30) 7.86:1, on the footer (#11181D) 9.60:1: TEXT OK on those dark grounds.
       On white 1.87:1, on the grey #F4F6F8 1.72:1: DECORATION ONLY there (rules, rings), never text. Never on a CTA.
   The sand candidates are separate named blocks, (a) … (e), each between its own open / close comment, so the ones
   Joey doesn't pick come out cleanly. (a) is recommended: it fixes two existing contrast failures (CD_GATE_PLAN).
   SPECIFICITY: `:not(#__dc)` matches every element (no element has that id) and lifts a rule to id weight, so a named accent here
   outranks the bundled rule it replaces without !important (the nb.css pattern). */
:root {
  --dc-sand: #D8B98E;
}

/* ── Her wordmark (public/themes/tenants/dc/). Desktop ≥1025 = the large header (main.css: data-logo-size='large') shows the
   LOCKUP (donna-caccioppo-header-lockup.svg, CD review R2): the wordmark + "POMPANO BEACH WATERFRONT SPECIALIST" drawn as outlined
   Inter SemiBold to the name's width ("D" → the final "o"), so the two stay matched at any size. 85 px tall (295-unit artwork):
   the name ≈ 70 px, the tagline's caps 25 units = 7.2 px (CD floor 7 px), 249 px wide.
   The header's HEIGHT is never the logo's: the link's margins shrink its OUTER box to 40 px (85 − 44 − 1), under the nav row's
   own content (the CTA, 41–45 px), so the header stays dc's own 110 / 110 / 106 px at 1440 / 1280 / 1025 (MEASURED on live) and
   nothing below moves; −44 / −1 centres the lockup (12.5 px above and below at 1440, 10.5 at 1025).
   SCROLLED = THE SAME (CD review R3, Joey): no swap to the name-only wordmark on scroll. The lockup keeps its 85 px, the tagline
   stays, and the nav never moves (main.css's scrolled swap — lockup hidden, the 48 px .logo-mark shown — is outranked here by
   id weight, `:not(#__dc)`, so these rules hold in both states). Phones: the plain wordmark (main.css .logo-mark). ── */
@media (min-width: 1025px) {
  html body .header[data-logo-size='large'] .logo--with-lockup:not(#__dc) { display: block; height: 85px; margin-top: -44px; margin-bottom: -1px; }
  html body .header[data-logo-size='large'] .logo--with-lockup .logo-lockup:not(#__dc) { display: block; height: 85px; width: auto; margin: 0; }
  html body .header[data-logo-size='large'] .logo--with-lockup .logo-mark:not(#__dc) { display: none; }
}
/* Phones / tablets: the renderer has no default image-logo height (an SVG would draw at its own size, or collapse) → 56 px
   (198 px wide: at 320 it ends at x 218, clear of the menu button at 268). The nav row's 10 px padding → 6 px: header ≈ 68 px. */
@media (max-width: 1024px) {
  html body .header .logo--image img { display: block; height: 56px; width: auto; }
  html body .header .nav-content:not(#__dc) { padding-top: 6px; padding-bottom: 6px; }
}
/* the footer: the white-ink wordmark at 72 px (255 px wide), her tagline as real text under it (Footer: .footer-brand-tagline) */
html body .footer .footer-brand--image img { display: block; height: 72px; width: auto; }

/* ── The broker footer (§5): her CL International badge is a transparent round gold mark (500 × 500 RGBA) — it sits directly on
   the navy, without the platform's white plate; larger (96 px at desktop, 72 px on phones); the disclosure 14 → 16 px (15 on
   phones), its colour unchanged (white 82% on #11181D ≈ 12:1). The BROKERAGE-DISPLAY-01 settings are untouched. ── */
html body .footer .footer-attribution .broker-logo-plate:not(#__dc) { background: transparent; padding: 0; border-radius: 0; }
html body .footer .footer-attribution .broker-logo:not(#__dc) { height: 96px; max-height: 96px; max-width: none; }
html body .footer .footer-bottom > .footer-attribution:not(#__dc) { font-size: 1rem; }
/* the brokerage's NAME in that line: the brand blue on the navy is 4.06:1 (MEASURED, fails) → white, underlined (a link) */
html body .footer .footer-attribution .broker-logo-link:not(#__dc) { color: var(--im-white, #fff); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) {
  html body .footer .footer-attribution .broker-logo:not(#__dc) { height: 72px; max-height: 72px; }
  html body .footer .footer-bottom > .footer-attribution:not(#__dc) { font-size: 0.9375rem; }
}

/* ── SAND (a) — RECOMMENDED — the eyebrows on DARK grounds in sand: "MY POMPANO BEACH" (the niche band) and the footer titles
   (EXPLORE · CONNECT · POMPANO WATERFRONT). Today they are the brand blue at 3.33:1 on the slate and 4.06:1 on the footer
   (fails); sand reads 7.86 / 9.60. The eyebrows on light sections ("PORTFOLIO", "MY SALES MAP", …) stay blue. ── */
html body :is(.agent-niche .agent-niche-label, .footer .footer-title):not(#__dc) { color: var(--dc-sand); }
/* ── /SAND (a) ── */

/* ── SAND (b) — a short sand rule under the homepage section headings (40 × 2 px, decoration; on light grounds it is a
   rule, never text). Centred under the centred headings, at the start under the start-aligned ones (the niche, About). The
   closing band has its own line, (c). ── */
html body .block-homepage[data-site-type='agent'] > section:not([data-section='cta']) h2::after {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  margin: 14px auto 0;
  background: var(--dc-sand);
}
html body .block-homepage[data-site-type='agent'] > section:is([data-section='main-niche'], [data-section='bio']) h2::after { margin-inline: 0; }
/* ── /SAND (b) ── */

/* ── SAND (c) — the closing band: a thin sand line above its title (decoration, on the slate) ── */
html body .contact-band .cta-title::before {
  content: '';
  display: block;
  width: 48px;
  height: 2px;
  margin: 0 auto 20px;
  background: var(--dc-sand);
}
/* ── /SAND (c) ── */

/* ── SAND (d) — the footer links on hover: a sand underline (decoration on the navy); the link text stays white ── */
html body .footer .footer-links a:hover:not(#__dc) {
  color: var(--im-white, #fff);
  text-decoration: underline;
  text-decoration-color: var(--dc-sand);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
/* ── /SAND (d) ── */

/* ── SAND (e) — the sold-map pins: a sand ring on her blue pin (the "DC" mark stays white) ── */
html body .block-homepage[data-site-type='agent'] section.dominance { --im-pin-outline: var(--dc-sand); }
html body .block-homepage[data-site-type='agent'] section.dominance .dom-pin .dom-pin-fill { stroke-width: 2; }
/* ── /SAND (e) ── */

/* ── ABOUT ME, full height (CD review R3, Joey): on desktop (≥1024, where the bio sits beside its portrait) the section fills the
   viewport under the header, Donna's portrait grows with it, and the text is centred beside it. The stat bar stays INSIDE the
   section, directly under the portrait + text. CSS only (no markup change): the bio grid (_agent-blocks.css) stacks the text
   cells in column 1 and spans the portrait over every row; here two 1fr spacer rows wrap the text rows — a ::before cell fills
   the top spacer so the text auto-places from row 2 — and the portrait's height comes from the viewport (minus the header, the
   section's padding, the gap and the stat bar), between 420 and 760 px. Phones / tablets (<1024): the existing stacked layout
   (portrait first, 400 px max), no forced height. ── */
@media (min-width: 1024px) {
  html body .block-homepage .block-bio:not(#__dc) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100vh - 110px);
    padding: 48px 0;
  }
  html body .block-homepage .block-bio .bio-body:not(#__dc) {
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr repeat(var(--bio-rows, 2), auto) 1fr;
    margin-bottom: 40px;
  }
  html body .block-homepage .block-bio .bio-body::before { content: ''; grid-column: 1; grid-row: 1; }
  html body .block-homepage .block-bio .bio-body .article-section-image:not(#__dc) {
    grid-column: 2;
    grid-row: 1 / -1;
    width: auto;
    height: clamp(420px, calc(100vh - 110px - 96px - 40px - 125px), 760px);
    aspect-ratio: 3 / 4;
  }
}

/* ── The News block, fewer posts than columns (CD review R3): one or two cards keep their one-third width and sit CENTRED
   instead of hugging the left of a 3-column grid with empty columns beside them. Desktop only (≤1024 the block is the phone
   carousel, a card per screen). dc only for now; the same rule suits every tenant (named in RESULTS_R3). ── */
@media (min-width: 1025px) {
  html body .block-homepage .news-grid:has(> .news-card:only-child):not(#__dc) {
    grid-template-columns: minmax(0, calc((100% - 80px) / 3));
    justify-content: center;
  }
  html body .block-homepage .news-grid:has(> .news-card:nth-child(2):last-child):not(#__dc) {
    grid-template-columns: repeat(2, minmax(0, calc((100% - 80px) / 3)));
    justify-content: center;
  }
}