/* ============================================================
   KORO DESIGN SYSTEM — ocean-blue skin (bundled, self-contained)
   ------------------------------------------------------------
   The client's locked ocean-blue skin + self-hosted fonts, moved
   OUT of the site Customizer and INTO the plugin so the design
   travels with the folder (no per-site Customizer paste, no font
   upload). Enqueued AFTER koro-properties.css (its dependency) and
   uses !important so it wins over the neutral base and the theme's
   global button/hover styles (e.g. Elementor / hello-elementor).

   Fonts are bundled at ../fonts/ (relative to this file). No CDN,
   no @import. Disable the whole skin with:
       add_filter( 'koro_load_skin', '__return_false' );

   © 2026 Mad About Islands, LLC; all rights reserved.
   ============================================================ */

@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 900;font-display:swap;src:url("../fonts/playfair-display.woff2") format("woff2");}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/poppins-400.woff2") format("woff2");}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/poppins-500.woff2") format("woff2");}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/poppins-600.woff2") format("woff2");}

:root{
  --koro-font-heading:'Playfair Display',Georgia,'Times New Roman',serif;
  --koro-font-body:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --koro-navy:#0E2439; --koro-ink:#1A2E42; --koro-ink-soft:#5A6B7A;
  --koro-teal:#4EACBC; --koro-teal-light:#59C1C1;
  --koro-blue:#1F6FA8; --koro-blue-deep:#1B4478;
  --koro-mint:#DCEFE8; --koro-surface:#EEF4F7; --koro-card:#FFFFFF; --koro-line:#DCE6EC;
  --koro-badge-available:#0E7A6E; --koro-badge-reserved:#9C5600; --koro-badge-sold:#64748B;
  --koro-chip-bg:#0E2439;
}

/* Body/UI font on EVERY koro-* text surface so nothing inherits the theme kit */
.koro-listing,.koro-sidebar,.koro-filter-btn,.koro-filter-heading,.koro-filter-reset,
.koro-filter-search__input,.koro-results-count,.koro-card,.koro-card__title,.koro-card__title a,
.koro-card__location,.koro-stat,.koro-stat__label,.koro-stat__value,.koro-btn,.koro-badge,
.koro-pill,.koro-summary,.koro-summary__label,.koro-summary__value,.koro-pd,.koro-pd__meta,
.koro-pd__crumbs,.koro-field,.koro-field label,.koro-field input,.koro-field textarea,
.koro-contact-card,.koro-contact-card__ref,.koro-contact-form__submit,.koro-inquiry-ref,
.koro-cta__button,.koro-r4,.koro-r4-eyebrow,.koro-r4-heading,.koro-r4-subheading,
.koro-r4-card-title,.koro-r4-card-loc,.koro-r4-card-price,.koro-r4-card-cta{
  font-family:var(--koro-font-body);}

/* Display serif: detail title + section H2 + price display + featured heading */
.koro-pd__title,.koro-pd__h2,.koro-pd__price,.koro-price-chip,.koro-contact-card__title,
.koro-r4-heading{ font-family:var(--koro-font-heading); }

/* Card title = Poppins 600 (client: match mockup) */
.koro-card__title,.koro-card__title a{ font-weight:600!important; color:var(--koro-navy)!important; }

/* ---- Filters + results ---- */
.koro-filter-heading{ color:var(--koro-ink-soft)!important; }
.koro-filter-btn{ background:#fff!important; border:1px solid var(--koro-line)!important; color:var(--koro-ink)!important; }
.koro-filter-btn:hover{ border-color:var(--koro-blue)!important; color:var(--koro-blue)!important; background:#fff!important; }
.koro-filter-btn.koro-filter--active{ background:var(--koro-blue)!important; border-color:var(--koro-blue)!important; color:#fff!important; }
.koro-filter-reset{ color:var(--koro-ink-soft)!important; }
.koro-results-count{ color:var(--koro-ink-soft)!important; }

/* ---- Card ---- */
.koro-card{ background:var(--koro-card)!important; border:1px solid var(--koro-line)!important; }
.koro-card:hover{ box-shadow:0 12px 28px rgba(14,36,57,.14)!important; }
.koro-card__location{ color:var(--koro-ink-soft)!important; display:flex; align-items:center; gap:7px; }
.koro-card__location::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--koro-teal); flex:none; }
.koro-stat{ background:var(--koro-surface)!important; }
.koro-stat__label{ color:var(--koro-ink-soft)!important; }
.koro-stat__value{ color:var(--koro-navy)!important; }

/* ---- Price chip ---- */
.koro-price-chip{ background:var(--koro-chip-bg); color:#fff; }

/* ---- Status badges ---- */
.koro-badge{ background:var(--koro-badge-sold)!important; color:#fff!important; }
.koro-badge--available{ background:var(--koro-badge-available)!important; }
.koro-badge--reserved{ background:var(--koro-badge-reserved)!important; }
.koro-badge--sold{ background:var(--koro-badge-sold)!important; }

/* ---- Buttons: deliberate hover + visible focus (never inherit theme global button hover) ---- */
.koro-btn--primary,.koro-cta__button,.koro-contact-form__submit,.koro-r4-card-cta{
  background:var(--koro-blue); color:#fff; border:0; }
.koro-btn--primary:hover,.koro-cta__button:hover,.koro-contact-form__submit:hover,
.koro-r4-card-cta:hover{ background:var(--koro-blue-deep)!important; color:#fff!important; opacity:1!important; }
.koro-btn--secondary{ background:#fff; color:var(--koro-blue); border:1px solid var(--koro-line); }
.koro-btn--secondary:hover{ background:var(--koro-surface); color:var(--koro-blue-deep); border-color:var(--koro-blue); }
.koro-btn--disabled,.koro-btn--disabled:hover{ background:#E2E8EC!important; color:#8595A0!important; }
.koro-btn:focus-visible,.koro-cta__button:focus-visible,.koro-filter-btn:focus-visible,
.koro-contact-form__submit:focus-visible,.koro-pd__thumb:focus-visible,
.koro-r4-card-cta:focus-visible{ outline:3px solid var(--koro-teal)!important; outline-offset:2px!important; }

/* ---- Featured / random section header ---- */
.koro-r4-eyebrow{ color:var(--koro-ink-soft)!important; }
.koro-r4-heading{ color:var(--koro-navy)!important; }
.koro-r4-subheading{ color:var(--koro-ink-soft)!important; }

/* ---- Detail page ---- */
.koro-pd__title{ color:var(--koro-navy)!important; font-weight:700!important; }
.koro-pd__meta{ color:var(--koro-ink-soft)!important; }
.koro-pd__crumbs a{ color:var(--koro-blue)!important; }
.koro-pill{ background:var(--koro-surface)!important; color:var(--koro-ink)!important; }
.koro-pd__section{ border-top-color:var(--koro-line)!important; }
.koro-pd__h2{ color:var(--koro-navy)!important; font-weight:700!important; }
.koro-pd__price{ color:var(--koro-navy)!important; font-weight:700!important; }
.koro-summary{ border-color:var(--koro-line)!important; }
.koro-summary__label{ color:var(--koro-ink-soft)!important; }
.koro-summary__value{ color:var(--koro-navy)!important; }
.koro-pd__thumb{ border:2px solid transparent!important; color:var(--koro-ink)!important; }
.koro-pd__thumb.is-active{ border-color:var(--koro-blue)!important; }
.koro-pd__thumbimg{ border:0!important; }
.koro-gallery__item{ border:0!important; }
.koro-gallery__img{ border:0!important; }

/* ---- Contact card + form ---- */
.koro-contact-card{ background:var(--koro-card)!important; border:1px solid var(--koro-line)!important; }
.koro-contact-card__title{ color:var(--koro-navy)!important; font-weight:700!important; }
.koro-contact-card__ref{ color:var(--koro-ink-soft)!important; }
.koro-field label{ color:var(--koro-ink-soft)!important; }
.koro-field input,.koro-field textarea{ border:1px solid var(--koro-line)!important; color:var(--koro-ink)!important; }
.koro-field input:focus,.koro-field textarea:focus{ outline:2px solid var(--koro-teal)!important; border-color:transparent!important; }

/* ---- [koro_property_ref_field] "Inquiring about…" line ---- */
.koro-inquiry-ref{ border-left:3px solid var(--koro-blue)!important; background:var(--koro-surface)!important; color:var(--koro-ink)!important; }

/* ---- Phase 3 quick-view modal close × (on-brand in every state) ---- */
.koro-modal__close,
.koro-modal__close:hover,
.koro-modal__close:focus,
.koro-modal__close:focus-visible,
.koro-modal__close:active{ background:transparent!important; border:0!important; box-shadow:none!important; }
.koro-modal__close{ color:var(--koro-ink-soft)!important; }
.koro-modal__close:hover,.koro-modal__close:focus{ color:var(--koro-navy)!important; opacity:1!important; }
.koro-modal__close:focus-visible{ outline:3px solid var(--koro-teal)!important; outline-offset:2px!important; }

/* =========== Listing layout: centered pill filters on top, grid below ===========
   Matches the mockup "Find a Lot" arrangement (filters as a centered horizontal
   pill row, results centered, 3-column card grid) — NO background colour (that
   cream tone was the homepage, not the listing). Overrides the neutral base's
   left-sidebar grid (base loads first; this skin loads after and wins). */
.koro-listing{ display:block; max-width:1200px; margin:0 auto; }
.koro-sidebar{ flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center; gap:12px 28px; margin-bottom:14px; }
.koro-filter-group{ display:flex; align-items:center; gap:10px; }
.koro-filter-heading{ margin:0; }
.koro-filter-reset{ align-self:center; }
.koro-results-header{ justify-content:center; margin:8px 0 22px; }
.koro-filter-btn{ border-radius:30px; padding:9px 20px; }
.koro-grid{ grid-template-columns:repeat(3,1fr); gap:26px; }
.koro-card{ border-radius:10px; }
.koro-card__media{ aspect-ratio:16/11; }
@media(max-width:900px){ .koro-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .koro-grid{ grid-template-columns:1fr; } }