/* =============================================================================
   City Pages Stylesheet — pre-constructionhomes.com Child Theme
   Classes prefixed .pc- (26 pages) and .cy- (12 pages)
   Google Fonts loaded via WordPress wp_enqueue_style or header:
     Playfair Display 400,500 | DM Sans 300,400,500
   ============================================================================= */

/* ── Google Fonts ──────────────────────────────────────────────────────────── */
/* Add to functions.php wp_enqueue_style instead of inline <link> tags:        */
/*   wp_enqueue_style('city-pages-fonts',                                       */
/*     'https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500 */
/*      &family=DM+Sans:wght@300;400;500&display=swap');                        */


/* ── SVG chart text styles (shared across both page types) ────────────────── */
.sl  { font: 13px 'DM Sans', sans-serif; fill: #555; }
.ss  { font: 500 13px 'DM Sans', sans-serif; fill: #0F6E56; }
.pl  { font: 12px 'DM Sans', sans-serif; fill: #555; text-anchor: middle; }
.pv  { font: 500 12px 'DM Sans', sans-serif; text-anchor: middle; }
.dl  { font: 12px 'DM Sans', sans-serif; fill: #555; }


/* =============================================================================
   PC- PREFIX CLASSES  (boca-raton, boynton-beach, cooper-city, cutler-bay,
   davie, delray-beach, florida-city, greenacres, haverhill, homestead,
   juno-beach, jupiter, lake-worth, lantana, loxahatchee, margate, miami,
   palm-beach-gardens, parkland, pembroke-pines, pompano-beach,
   royal-palm-beach, sunrise, wellington, west-palm-beach, wilton-manors)
   ============================================================================= */

.pc-wrap            { font-family: 'DM Sans', sans-serif; color: #1a1a1a; max-width: 860px; padding: 2rem 0; }
.pc-eyebrow         { font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #1D9E75; margin-bottom: .75rem; }
.pc-h1              { font-family: 'Playfair Display', serif; font-size: 38px; font-weight: 400; line-height: 1.2; margin: 0 0 1.25rem; }
.pc-h1 span         { color: #1D9E75; }
.pc-divider         { width: 48px; height: 2px; background: #1D9E75; margin-bottom: 1.5rem; border-radius: 2px; }
.pc-lead            { font-size: 17px; font-weight: 300; line-height: 1.8; color: #1a1a1a; margin-bottom: 1.5rem; }
.pc-body            { font-size: 15px; font-weight: 400; line-height: 1.85; color: #444; margin-bottom: 1.25rem; }
.pc-h2              { font-family: 'Playfair Display', serif; font-size: 24px; font-weight: 400; margin: 2.5rem 0 .75rem; color: #1a1a1a; }

/* Stat row */
.pc-stat-row        { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 2rem 0; }
.pc-stat            { background: #f5f5f3; border-radius: 12px; padding: 1.25rem 1rem; text-align: center; border: 1px solid #e5e5e3; }
.pc-stat-num        { font-family: 'Playfair Display', serif; font-size: 30px; font-weight: 400; color: #1D9E75; line-height: 1; }
.pc-stat-label      { font-size: 12px; color: #666; margin-top: 6px; font-weight: 400; line-height: 1.4; }

/* Charts */
.pc-charts          { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin: 1.5rem 0 2rem; align-items: start; }
.pc-chart-box       { background: #fff; border: 1px solid #e5e5e3; border-radius: 12px; padding: 1rem 1.25rem; }
.pc-chart-title     { font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: #1D9E75; margin-bottom: .75rem; }
.pc-chart-note      { font-size: 10px; color: #aaa; margin-top: .5rem; line-height: 1.4; }

/* Builders */
.pc-builders-grid   { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 1.25rem 0 2rem; }
.pc-builder-card    { background: #fff; border: 1px solid #e5e5e3; border-radius: 12px; padding: 1rem 1.25rem; }
.pc-builder-name    { font-weight: 500; font-size: 15px; margin-bottom: 4px; color: #1a1a1a; }
.pc-builder-tag     { display: inline-block; font-size: 11px; background: #E1F5EE; color: #0F6E56; border-radius: 4px; padding: 2px 8px; margin-bottom: 8px; font-weight: 500; }
.pc-builder-desc    { font-size: 13px; color: #555; line-height: 1.6; margin: 0; }

/* Communities */
.pc-communities-list { margin: 1rem 0 2rem; display: flex; flex-direction: column; gap: 10px; }
.pc-community       { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid #e5e5e3; border-radius: 12px; padding: 1rem 1.25rem; }
.pc-community-dot   { width: 10px; height: 10px; border-radius: 50%; background: #1D9E75; flex-shrink: 0; margin-top: 5px; }
.pc-community-name  { font-weight: 500; font-size: 14px; margin-bottom: 2px; color: #1a1a1a; }
.pc-community-info  { font-size: 13px; color: #555; line-height: 1.55; margin: 0; }

/* Badges & closing */
.pc-badge-row       { display: flex; gap: 10px; margin: 1rem 0 2rem; flex-wrap: wrap; }
.pc-badge           { font-size: 13px; font-weight: 500; padding: 6px 16px; border-radius: 999px; background: #f5f5f3; border: 1px solid #d0d0ce; color: #1a1a1a; }
.pc-closing         { font-size: 15px; line-height: 1.85; color: #555; background: #f5f5f3; border-left: 3px solid #1D9E75; padding: 1.25rem 1.5rem; border-radius: 0 8px 8px 0; margin-top: 2rem; }

/* Responsive — pc- pages */
@media (max-width: 700px) {
  .pc-h1                                   { font-size: 26px; }
  .pc-stat-row, .pc-builders-grid, .pc-charts { grid-template-columns: 1fr; }
}


/* =============================================================================
   CY- PREFIX CLASSES  (cocoa, doral, fort-pierce, ft-pierce, hialeah,
   melbourne, palm-bay, palm-city, port-st-lucie, stuart, tequesta, vero-beach)
   ============================================================================= */

.cy-wrap            { font-family: 'DM Sans', sans-serif; color: #1a1a1a; max-width: 900px; padding: 2rem 0; }
.cy-eyebrow         { font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #1D9E75; margin-bottom: .75rem; }
.cy-h1              { font-family: 'Playfair Display', serif; font-size: 36px; font-weight: 400; line-height: 1.2; margin: 0 0 1.25rem; }
.cy-h1 span         { color: #1D9E75; }
.cy-divider         { width: 48px; height: 2px; background: #1D9E75; margin-bottom: 1.5rem; border-radius: 2px; }
.cy-lead            { font-size: 17px; font-weight: 300; line-height: 1.8; color: #1a1a1a; margin-bottom: 1.5rem; }
.cy-body            { font-size: 15px; font-weight: 400; line-height: 1.85; color: #444; margin-bottom: 1.25rem; }
.cy-h2              { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 400; margin: 2.5rem 0 .75rem; color: #1a1a1a; }

/* Stat row — 4-column */
.cy-stat-row        { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 2rem 0; }
.cy-stat            { background: #f5f5f3; border-radius: 12px; padding: 1.1rem 1rem; text-align: center; border: 1px solid #e5e5e3; }
.cy-stat-num        { font-family: 'Playfair Display', serif; font-size: 26px; font-weight: 400; color: #1D9E75; line-height: 1; }
.cy-stat-label      { font-size: 11px; color: #666; margin-top: 5px; font-weight: 400; line-height: 1.4; }

/* Home-type breakdown row */
.cy-type-row        { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: .75rem 0 2rem; }
.cy-type-card       { background: #f5f5f3; border-radius: 10px; padding: .9rem 1rem; text-align: center; border: 1px solid #e5e5e3; }
.cy-type-pct        { font-family: 'Playfair Display', serif; font-size: 22px; color: #1D9E75; }
.cy-type-label      { font-size: 12px; color: #555; margin-top: 4px; }

/* Charts — two variants used across cy pages */
/* Standard 3-col chart grid (shared with pc- pages, defined in pc- section above) */
/* Wide + narrow 2-col layout (doral, hialeah) */
.cy-charts-row      { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; margin: 1.5rem 0 2rem; }
.cy-chart-card      { background: #fff; border: 1px solid #e5e5e3; border-radius: 12px; padding: 1.25rem; }
.cy-chart-wrap      { position: relative; height: 200px; }
.cy-chart-wrap-sm   { position: relative; height: 190px; }

/* Builders */
.cy-builders-grid   { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 1.25rem 0 2rem; }
.cy-builder-card    { background: #fff; border: 1px solid #e5e5e3; border-radius: 12px; padding: 1rem 1.25rem; }
.cy-builder-name    { font-weight: 500; font-size: 14px; margin-bottom: 3px; color: #1a1a1a; }
.cy-builder-tag     { display: inline-block; font-size: 11px; background: #E1F5EE; color: #0F6E56; border-radius: 4px; padding: 2px 8px; margin-bottom: 7px; font-weight: 500; }
.cy-builder-desc    { font-size: 12px; color: #555; line-height: 1.6; margin: 0; }

/* Communities */
.cy-comm-list       { margin: 1rem 0 2rem; display: flex; flex-direction: column; gap: 10px; }
.cy-comm            { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid #e5e5e3; border-radius: 12px; padding: 1rem 1.25rem; }
.cy-comm-dot        { width: 9px; height: 9px; border-radius: 50%; background: #1D9E75; flex-shrink: 0; margin-top: 5px; }
.cy-comm-name       { font-weight: 500; font-size: 14px; margin-bottom: 2px; color: #1a1a1a; }
.cy-comm-by         { font-size: 11px; color: #1D9E75; font-weight: 500; margin-bottom: 3px; }
.cy-comm-info       { font-size: 13px; color: #555; line-height: 1.55; margin: 0; }

/* Badges & closing */
.cy-badge-row       { display: flex; gap: 8px; flex-wrap: wrap; margin: .75rem 0 1.5rem; }
.cy-badge           { font-size: 12px; font-weight: 500; padding: 5px 14px; border-radius: 999px; background: #f5f5f3; border: 1px solid #d0d0ce; color: #1a1a1a; }
.cy-closing         { font-size: 15px; line-height: 1.85; color: #555; background: #f5f5f3; border-left: 3px solid #1D9E75; padding: 1.25rem 1.5rem; border-radius: 0 8px 8px 0; margin-top: 2rem; }

/* Responsive — cy- pages */
@media (max-width: 620px) {
  .cy-h1                                   { font-size: 26px; }
  .cy-stat-row                             { grid-template-columns: repeat(2, 1fr); }
  .cy-builders-grid, .cy-charts-row        { grid-template-columns: 1fr; }
  .pc-charts                               { grid-template-columns: 1fr; }
}