/* =====================================================================
   Summer Sales Event — landing page styles
   ---------------------------------------------------------------------
   This is your editable stylesheet. Each card piece has its own class
   (the names below) so you can target and restyle anything you want.
   In WP Grid Builder, assign these class names to the matching card
   blocks (see the build spec). Sections are labeled so you can find
   things fast. Brand green is set once as a variable at the top.
   ===================================================================== */

:root {
  --sse-green: #1D7A4D;        /* brand green — buttons, accents */
  --sse-green-soft: #e6f0ea;   /* light green — builder tag background */
  --sse-sale: #c0392b;         /* sale ("now") price color */
  --sse-save: #2e7d32;         /* savings / positive */
  --sse-ink: #222;             /* primary text */
  --sse-muted: #666;           /* secondary text */
  --sse-faint: #999;           /* struck-through / disabled text */
  --sse-line: #e3e3e0;         /* borders */
  --sse-radius: 10px;
}

/* ---------------------------------------------------------------------
   1. CARD CONTAINER  (class: sse-card)
   --------------------------------------------------------------------- */
.sse-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--sse-line);
  border-radius: var(--sse-radius);
  padding: 12px 18px;
  margin-bottom: 10px;
  background: #fff;
}

/* ---------------------------------------------------------------------
   2. HEADER — neighborhood, plan, builder tag
   CHANGE #1 (Lizzie): Neighborhood is the prominent line; plan is
   secondary underneath.
   CHANGE #2 (Lizzie): Builder tag has a colored background so it stands out.
   --------------------------------------------------------------------- */
.sse-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.sse-neighborhood {            /* prominent */
  font-size: 18px;
  font-weight: 700;
  color: var(--sse-ink);
  line-height: 1.2;
}

.sse-plan {                    /* secondary */
  font-size: 13px;
  font-weight: 400;
  color: var(--sse-muted);
}

.sse-builder {                 /* colored tag */
  font-size: 11px;
  font-weight: 600;
  color: var(--sse-green);
  background: var(--sse-green-soft);
  border-radius: 6px;
  padding: 3px 9px;
  white-space: nowrap;
}

.sse-address {                 /* muted subline */
  font-size: 13px;
  color: var(--sse-muted);
  margin: 4px 0 8px;
}

/* ---------------------------------------------------------------------
   3. STATS ROW — beds / baths / garage / sqft + home type
   CHANGE #3 (Lizzie): icon sits closer to its number (small inner gap),
   with more space between each category (larger outer gap).
   CHANGE #4 (Lizzie): Home Type now shows in the details.
   --------------------------------------------------------------------- */
.sse-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;                   /* space BETWEEN categories — Lizzie #3 */
  font-size: 13px;
  color: #555;
  align-items: center;
}
.sse-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;                    /* icon-to-number — Lizzie #3 */
  white-space: nowrap;
}
.sse-stat svg { flex-shrink: 0; width: 15px; height: 15px; }

.sse-hometype {                /* Home Type chip — Lizzie #4 */
  font-size: 12px;
  color: #555;
  border: 1px solid var(--sse-line);
  border-radius: 6px;
  padding: 2px 8px;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------
   4. PRICING — was / now
   --------------------------------------------------------------------- */
.sse-prices { text-align: right; }
.sse-was { font-size: 13px; color: var(--sse-faint); text-decoration: line-through; }
.sse-now { font-size: 20px; font-weight: 700; color: var(--sse-sale); line-height: 1.2; }

/* ---------------------------------------------------------------------
   5. REQUEST INFO BUTTON  (class: sse-cta)
   --------------------------------------------------------------------- */
.sse-cta {
  font-size: 13px;
  padding: 7px 14px;
  border: 1px solid var(--sse-green);
  background: var(--sse-green);
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.sse-pricecol { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }

/* ---------------------------------------------------------------------
   6. SOLD STATE  (add class sse-card + is-sold)
   Home stays visible, dimmed, with a SOLD badge and struck price.
   --------------------------------------------------------------------- */
/* Sold homes now read like any other card — the only marker is the corner
   ribbon (Section 16). No dimming, no struck price, no disabled button. */

/* ---------------------------------------------------------------------
   7. RESPONSIVE — on phones, the card stacks and the button drops
   full-width under the details.
   --------------------------------------------------------------------- */
@media (max-width: 782px) {
  .sse-card { flex-direction: column; align-items: stretch; }
  .sse-pricecol { justify-content: space-between; flex-wrap: wrap; margin-top: 4px; }
  .sse-prices { text-align: left; }
  .sse-cta { width: 100%; margin-top: 8px; }
}

/* ---------------------------------------------------------------------
   8. FACET SIDEBAR (optional polish — WP Grid Builder facet classes)
   Tweak these if you want the filters to match the card styling.
   --------------------------------------------------------------------- */
.sse-page .wpgb-facet .wpgb-button.wpgb-selected,
.sse-page .wpgb-facet input[type="checkbox"]:checked + label { color: var(--sse-green); }

/* ---------------------------------------------------------------------
   9. WP GRID BUILDER CONTEXT FIXES
   Overrides so the card sits right inside WP Grid Builder's wrappers
   and the brand stat icons size correctly. !important defeats theme rules.
   --------------------------------------------------------------------- */
.sse-card { gap: 16px; align-items: center; padding: 14px 18px; }
.sse-card .sse-neighborhood { font-size: 18px !important; font-weight: 700 !important; color: var(--sse-ink) !important; line-height: 1.2; }
.sse-card .sse-plan { font-size: 13px !important; font-weight: 600 !important; color: var(--sse-muted) !important; }
.sse-card .sse-builder { background: #e6eef4; color: #005576; }
.sse-card .sse-address { margin: 4px 0 8px !important; display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.sse-card .sse-addr-text { font-size: 13px; color: var(--sse-muted); }
.sse-head { row-gap: 4px; }
.sse-card .sse-stats { gap: 20px; row-gap: 6px; align-items: center; }
.sse-card .sse-stat { gap: 6px; }
.sse-card .sse-stat svg { width: auto !important; height: 17px !important; }
.sse-card .sse-hometype { align-self: center; }

/* ---------------------------------------------------------------------
   10. TIGHTEN + PRICE EMPHASIS (match Figma)
   --------------------------------------------------------------------- */
.sse-card { padding: 16px 16px !important; }
.sse-card .sse-info { display: flex; flex-direction: column; gap: 4px; }
.sse-card .sse-head, .sse-card .sse-address, .sse-card .sse-stats { margin: 0 !important; }
.sse-card .sse-neighborhood { line-height: 1.2 !important; }
.sse-card .sse-plan, .sse-card .sse-addr-text { font-size: 14px !important; line-height: 1.3 !important; }
.sse-card .sse-stats { line-height: 1.2 !important; }
.sse-card .sse-was { line-height: 1.2 !important; }
.sse-card .sse-now { font-size: 24px !important; font-weight: 700 !important; line-height: 1.15 !important; }

/* ---------------------------------------------------------------------
   11. TWO-COLUMN GRID — 3 aligned rows
   Row 1: head  | was price
   Row 2: plan/address | now price
   Row 3: stats | button
   --------------------------------------------------------------------- */
.sse-card { display: grid !important; grid-template-columns: 1fr auto !important; column-gap: 24px !important; row-gap: 6px !important; align-items: center !important; }
.sse-card .sse-was, .sse-card .sse-now, .sse-card .sse-cta-cell { justify-self: end; text-align: right; }
.sse-card .sse-cta-cell { display: flex; }
@media (max-width: 600px) {
  .sse-card { grid-template-columns: 1fr !important; }
  .sse-card .sse-was, .sse-card .sse-now, .sse-card .sse-cta-cell { justify-self: start; text-align: left; }
}

/* ---------------------------------------------------------------------
   12. PILL TAG PADDING — give tags breathing room on the sides
   --------------------------------------------------------------------- */
.sse-card .sse-builder { padding: 3px 12px !important; }
.sse-card .sse-badge-sold { padding: 3px 12px !important; }
.sse-card .sse-hometype { padding: 3px 10px !important; }

/* ---------------------------------------------------------------------
   13. CARD SEPARATION — border, rounded corners, subtle alternating shade
   --------------------------------------------------------------------- */
.sse-card { border: 1px solid #e3e3e0 !important; border-radius: 12px !important; background: #fff; }
.wpgb-card:nth-child(even) .sse-card { background: #faf9f7; }

/* ---------------------------------------------------------------------
   14. SUMMER SALE PAGE LAYOUT — filter sidebar + grid, responsive
   --------------------------------------------------------------------- */
.sse-page { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; max-width: 1200px; margin: 0 auto; }
.sse-filters { border: 1px solid #e3e3e0; border-radius: 12px; padding: 18px 20px; align-self: start; background: #fff; }
.sse-filters h4 { margin: 16px 0 6px !important; font-size: 13px !important; line-height: 1.3 !important; text-transform: uppercase; letter-spacing: .04em; color: #005576 !important; font-weight: 600 !important; }
.sse-filters h4:first-child { margin-top: 0 !important; }
@media (max-width: 782px) {
  .sse-page { grid-template-columns: 1fr; gap: 18px; }
  .sse-filters { position: static; }
}

/* ---------------------------------------------------------------------
   15. MOBILE — keep everything inside the phone frame, collapsible
   filters (modeled on the All Homes "Filter Homes" button), and a
   right-sized page title. Modeled after /our-homes/view-all/.
   --------------------------------------------------------------------- */

/* 15a. No horizontal scroll: nothing may exceed the viewport width.
   box-sizing so borders/padding count inside the width. */
.sse-page, .sse-filters, .sse-card, .sse-results [class*="wpgb-grid"] { max-width: 100% !important; box-sizing: border-box; }
.sse-page * { min-width: 0; }                 /* let grid/flex children shrink */
.sse-filters .wpgb-facet { max-width: 100% !important; }

/* 15b. The "Filter Homes" toggle button (injected by the plugin).
   Hidden on desktop; full-width control on mobile. */
.sse-filter-toggle { display: none !important; }

@media (max-width: 782px) {
  /* Card stacks as a FLEX COLUMN on mobile (not grid). CSS grid mis-sizes the
     button's auto-row to ~100px on mobile, floating the 44px button in a tall
     track (extra space above & below). Flex sizes every item to its true
     content height with an exact, uniform gap — no track-sizing quirk. */
  .sse-card { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 12px !important; padding: 16px !important; }
  .sse-card .sse-was, .sse-card .sse-now, .sse-card .sse-cta-cell { justify-self: start; text-align: left; }
  /* Flex cell ignores the whitespace text nodes around the button (those were
     rendering as line-boxes ~28px each and inflating the cell to ~100px). */
  .sse-card .sse-cta-cell { display: flex; flex-direction: column; line-height: 0; }
  .sse-card .sse-cta { width: 100%; margin: 0 !important; }   /* full width, no stray 8px margin */
  .sse-card .sse-stats { gap: 14px; }

  /* Reorder the stacked card so the two prices sit together (was over now),
     with the button last. (order works on grid items.) */
  .sse-card .sse-head     { order: 1 !important; }
  .sse-card .sse-address  { order: 2 !important; }
  .sse-card .sse-stats    { order: 3 !important; }
  .sse-card .sse-was      { order: 4 !important; }
  .sse-card .sse-now      { order: 5 !important; }                   /* equal spacing between every row */
  .sse-card .sse-cta-cell { order: 6 !important; }                   /* even spacing — no extra gap above the button */

  /* Collapsible filters */
  .sse-filter-toggle {
    display: block !important; width: 100%; padding: 12px 16px; margin-bottom: 14px;
    background: transparent !important; color: #005576 !important; border: 2px solid #005576 !important; border-radius: 4px !important;
    font-size: 14px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
    cursor: pointer; text-align: center;
  }
  .sse-filter-toggle:active { background: #005576 !important; color: #fff !important; }   /* tap feedback (no hover on touch) */
  .sse-page .sse-filters { display: none; }
  .sse-page.sse-filters-open .sse-filters { display: block; margin-bottom: 18px; }

  /* Right-size the page title on phones (this test page only) */
  body.page-id-40431 .entry-title,
  body.page-id-40431 h1.entry-title { font-size: 26px !important; line-height: 1.25 !important; }
}

/* ---------------------------------------------------------------------
   16. SOLD RIBBON — folded corner ribbon (replaces the old inline SOLD tag).
   Sold cards now read like every other card; the ribbon is the only marker.
   Technique: CSS folded ribbon (Temani Afif). Colour is one line to change.
   --------------------------------------------------------------------- */
.sse-card { position: relative; overflow: hidden; }  /* anchor + clip ribbon to the rounded corner */

.sse-ribbon {
  position: absolute; top: 20px; left: -42px; z-index: 3;
  width: 150px; padding: 6px 0; line-height: 1;
  transform: rotate(-45deg) !important;         /* diagonal; !important beats WPGB's .wpgb-card div{transform:none} reset */
  background-color: #A82925;                     /* Babcock brand red (Elementor global) — change here */
  color: #fff !important;                         /* white text; !important beats WPGB .wpgb-card div reset */
  font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35) !important;  /* drop shadow; !important beats the WPGB reset */
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

/* Deactivated "Sold" button on sold cards — clearly non-clickable. */
.sse-cta:disabled,
.sse-cta[disabled] {
  background: #cfcfcf !important;
  border-color: #cfcfcf !important;
  color: #fff !important;
  cursor: not-allowed;
}

/* ---------------------------------------------------------------------
   18. PRIMARY CTA "Request info" — brand light-blue button (navy text,
   ~11:1 AA), hover fills to brand blue with WHITE text (8.2:1 AA), plus a
   subtle press. The filter button is the outline style (Section 15).
   --------------------------------------------------------------------- */
.sse-cta:not(:disabled) {
  background: #6BC4E8 !important;
  color: #01263E !important;
  border-color: #6BC4E8 !important;
  border-radius: 4px !important;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .05s ease !important;
}
.sse-cta:not(:disabled):hover {
  background: #005576 !important;
  border-color: #005576 !important;
  color: #fff !important;
}
.sse-cta:not(:disabled):active { transform: translateY(1px) !important; }
.sse-cta:focus-visible { outline: 3px solid rgba(0, 85, 118, .45) !important; outline-offset: 2px; }

/* ---------------------------------------------------------------------
   17. CARD HOVER — subtle lift, only on devices with a real pointer
   (desktop). Touch devices never trigger :hover, so mobile is unaffected.
   !important defeats WPGB's .wpgb-card div reset (which forces transform:none).
   --------------------------------------------------------------------- */
@media (hover: hover) {
  .sse-card { transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease !important; }
  .sse-card:hover {
    box-shadow: 0 3px 10px rgba(0, 0, 0, .07) !important;
    border-color: #9cc3d6 !important;       /* soft brand blue */
    transform: translateY(-1px) !important;
  }
}

/* ---------------------------------------------------------------------
   19. REQUEST INFO MODAL — selected-home meta box (neighborhood + home).
   Understated: soft off-white box, light stroke, rounded, no bold.
   --------------------------------------------------------------------- */
.sse-modal-meta {
  background: #faf9f7;
  border: 1px solid #e3e3e0;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  color: #444;
  line-height: 1.55;
}
.sse-modal-meta .sse-meta-lbl { color: #8a8a8a; }

/* ---------------------------------------------------------------------
   20. LOAD MORE — WPGB "Load more" button. WPGB ships this button
   unstyled on our page (white text, transparent bg, 0 width) so it is
   invisible against the white background. Style it as a centered brand
   button. !important defeats the theme button reset + WPGB resets.
   --------------------------------------------------------------------- */
.sse-results .wpgb-facet { text-align: center !important; }
.sse-results .wpgb-facet .wpgb-button.wpgb-load-more {
  display: inline-block !important;
  width: auto !important;
  min-width: 200px !important;
  margin: 24px auto 8px !important;
  padding: 13px 34px !important;
  background: #005576 !important;
  color: #fff !important;
  border: 2px solid #005576 !important;
  border-radius: 4px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  cursor: pointer !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: background .15s ease, color .15s ease, border-color .15s ease !important;
}
.sse-results .wpgb-facet .wpgb-button.wpgb-load-more:hover {
  background: #6BC4E8 !important;
  border-color: #6BC4E8 !important;
  color: #005576 !important;
}
.sse-results .wpgb-facet .wpgb-button.wpgb-load-more:focus-visible {
  outline: 3px solid rgba(0, 85, 118, .45) !important;
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   21. KILL PHANTOM CARD GAP (desktop). WPGB wraps our card markup in
   .wpgb-block-1 with surrounding whitespace text nodes. At the block's
   24px line-height, the trailing whitespace renders as an empty line box
   below every card, adding ~24px of dead space between rows. Making the
   block a flex column discards the whitespace-only boxes so the block
   hugs the card exactly, so cards sit together with only the grid gutter.
   --------------------------------------------------------------------- */
.sse-results .wpgb-block-1 { display: flex !important; flex-direction: column !important; }

/* ---------------------------------------------------------------------
   22. PROMO HEADER — promo dates + intro copy above the inventory,
   below the hero (requested by Lizzie). Dates in brand red to match the
   hero banner; intro is centered readable body copy.
   --------------------------------------------------------------------- */
.sse-promo-header { text-align: center; max-width: 820px; margin: 8px auto 30px; padding: 0 16px; }
.sse-dates { font-size: 22px; font-weight: 700; letter-spacing: .3px; color: #A82925; margin: 0 0 14px; }
.sse-intro { font-size: 17px; line-height: 1.65; color: #444; margin: 0; }
@media (max-width: 782px) {
  .sse-promo-header { margin: 4px auto 22px; }
  .sse-dates { font-size: 19px; }
  .sse-intro { font-size: 15.5px; }
}