/* Hawaii Property Online - Direction C ("Sunset Bold").
   Colors: navy #0b2545, ink #0f1d33, muted #4a5a73, accent #c2410c, ground #f4f6fa. */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: #f4f6fa; color: #0f1d33; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 15px; line-height: 1.45; }
a { color: #c2410c; }
a:hover { color: #9a3412; }
h1, h2, h3 { margin: 0; letter-spacing: -0.4px; }
img { max-width: 100%; display: block; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Header */
.site-header { background: #0b2545; color: #fff; padding: 10px 32px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; }
.site-header .left { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; }
.logo { color: #fff; text-decoration: none; font-size: 21px; font-weight: 800; letter-spacing: -0.3px; }
.logo:hover { color: #fff; }
.logo span { color: #fdba74; }
.main-nav { display: flex; flex-wrap: wrap; gap: 20px; font-weight: 600; }
.main-nav a { color: #c9d4e5; text-decoration: none; }
.main-nav a[aria-current="page"], .main-nav a:hover { color: #fff; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 12px; border: 0; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.btn-accent { background: #c2410c; color: #fff; }
.btn-accent:hover { background: #9a3412; color: #fff; }
.btn-pill { border-radius: 999px; }
.btn-outline { background: #fff; color: #0f1d33; border: 1px solid #cdd5e1; }

/* Search bar */
.search-band { background: #0b2545; padding: 0 32px 22px; }
.searchbar { display: flex; flex-wrap: wrap; background: #fff; border-radius: 14px; padding: 6px; }
.searchbar label { flex: 1 1 130px; display: flex; flex-direction: column; padding: 8px 14px; font-size: 12px; font-weight: 700; color: #4a5a73; border-right: 1px solid #e2e7ef; }
.searchbar label.wide { flex: 3 1 240px; }
.searchbar label:last-of-type { border-right: 0; }
.searchbar input, .searchbar select { font: inherit; font-size: 16px; font-weight: 600; color: #0f1d33; border: 0; padding: 4px 0; background: transparent; min-width: 0; }
.searchbar .btn { min-height: 56px; padding: 0 28px; font-size: 16px; border-radius: 10px; }

/* Map */
.map { background: #bfd8e6; }
.map-strip { height: 300px; }
.map-box { height: 260px; border-radius: 16px; overflow: hidden; }
.price-pin { background: #0b2545; color: #fff; font-weight: 700; font-size: 13px; padding: 5px 10px; border-radius: 999px; white-space: nowrap; box-shadow: 0 1px 3px rgba(11, 37, 69, 0.35); }
.price-pin:hover { background: #c2410c; }
.leaflet-div-icon.pin-wrap { background: transparent; border: 0; }

/* Layout */
.page { display: flex; flex-wrap: wrap; gap: 28px; padding: 26px 32px 48px; }
.sidebar { flex: 1 1 260px; min-width: 0; max-width: 340px; display: flex; flex-direction: column; gap: 20px; }
.content { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.panel { background: #fff; border: 1px solid #e2e7ef; border-radius: 16px; padding: 20px; }
.panel-warm { background: #fff4ec; border: 1px solid #fed7aa; border-radius: 16px; padding: 20px; }
.panel-dark { background: #0b2545; color: #fff; border-radius: 16px; padding: 18px; }
.panel-dark .hint { color: #c9d4e5; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.row-between { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.muted { color: #4a5a73; }
.small { font-size: 13px; }

/* Forms */
.field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: #4a5a73; }
.panel-dark .field { color: #c9d4e5; }
.field input, .field select, .field textarea { font: inherit; font-size: 15px; font-weight: 400; color: #0f1d33; padding: 10px; border: 1px solid #cdd5e1; border-radius: 10px; background: #fff; width: 100%; }
.check { display: flex; align-items: flex-start; gap: 10px; min-height: 32px; font-size: 14px; }
.check input { width: 18px; height: 18px; margin-top: 1px; accent-color: #c2410c; flex: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid #cdd5e1; background: #fff; font-weight: 600; cursor: pointer; }
.chip input { width: 16px; height: 16px; accent-color: #0b2545; margin: 0; }
.chip:has(input:checked) { background: #0b2545; color: #fff; border-color: #0b2545; }
.form-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.form-ok { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Result cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.card { background: #fff; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; border: 1px solid #e2e7ef; color: #0f1d33; text-decoration: none; }
.card:hover { color: #0f1d33; border-color: #9fb0c8; }
.card-photo { position: relative; height: 190px; background: #d6e2ee; display: flex; align-items: center; justify-content: center; }
.card-photo img { width: 100%; height: 100%; object-fit: cover; }
.card-price { position: absolute; left: 12px; bottom: 12px; background: #0b2545; color: #fff; font-weight: 800; font-size: 18px; padding: 6px 12px; border-radius: 10px; }
.card-price small { font-size: 13px; font-weight: 600; }
.badge { display: inline-block; font-weight: 700; font-size: 12px; padding: 5px 10px; border-radius: 999px; }
.badge-accent { background: #c2410c; color: #fff; }
.badge-soft { background: #e6ebf3; color: #0f1d33; }
.badge-white { background: #fff; color: #0f1d33; }
.card-badge { position: absolute; right: 12px; top: 12px; }
.card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.card-title { font-weight: 800; font-size: 17px; }
.sample-note { font-size: 12px; font-weight: 700; color: #9a3412; }
.empty { text-align: center; padding: 40px 20px; }
.pager { display: flex; gap: 10px; justify-content: center; align-items: center; }

/* Listing page */
.back { padding: 18px 32px 0; font-size: 14px; font-weight: 600; }
.gallery { padding: 14px 32px 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 200px; gap: 10px; }
.gallery > * { background: #dbe5ef; border-radius: 16px; overflow: hidden; }
.gallery > :first-child { grid-column: span 2; grid-row: span 2; position: relative; display: flex; align-items: center; justify-content: center; background: #d6e2ee; }
.gallery img { width: 100%; height: 100%; object-fit: cover; }
.gallery .badge { position: absolute; left: 14px; top: 14px; }
.gallery.gallery-empty { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 220px; }
.gallery.gallery-empty > :first-child { grid-column: auto; grid-row: auto; }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sort-select { font: inherit; color: #0f1d33; margin-left: 6px; padding: 7px 10px; border: 1px solid #cdd5e1; border-radius: 10px; background: #fff; }
.listing-head { display: flex; flex-direction: column; gap: 8px; }
.listing-head h1 { font-size: 34px; font-weight: 800; }
.price-big { font-size: 32px; font-weight: 800; }
.price-big small { font-size: 16px; font-weight: 600; color: #4a5a73; }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px 20px; }
.fact-label { font-size: 12px; font-weight: 700; color: #4a5a73; text-transform: uppercase; }
.fact-value { font-weight: 600; }
.description { margin: 0; line-height: 1.6; max-width: 760px; white-space: pre-line; }
.contact { flex: 1 1 340px; min-width: 0; max-width: 420px; display: flex; flex-direction: column; gap: 16px; }

/* Footer */
.site-footer { background: #0b2545; color: #c9d4e5; padding: 28px 32px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; font-size: 14px; }
.site-footer a { color: #c9d4e5; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 18px; }

@media (max-width: 700px) {
  .site-header, .search-band, .page, .back, .gallery, .site-footer { padding-left: 16px; padding-right: 16px; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 140px; }
  .sidebar, .contact { max-width: none; }
  .searchbar label { border-right: 0; }
  .searchbar .btn { flex: 1 1 100%; }
  .listing-head h1 { font-size: 28px; }
}

/* Lister + admin forms */
.header-actions { display: flex; align-items: center; gap: 16px; }
.admin-link { color: #fdba74; font-weight: 700; }
.form-page .content { gap: 20px; }
.form-sections { gap: 20px; }
.form-section { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.form-section legend { font-size: 20px; font-weight: 800; padding: 0 6px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px 18px; }
.form-grid .full { grid-column: 1 / -1; margin: 0; }
.checks-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.btn-big { min-height: 52px; padding: 0 26px; font-size: 16px; }
.btn-small { min-height: 36px; padding: 0 12px; font-size: 13px; }
.dropzone { border: 2px dashed #cdd5e1; border-radius: 14px; padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.dropzone input { font: inherit; font-size: 14px; }
.h-small { font-size: 18px; font-weight: 800; }
.on-dark { color: #fdba74; }
.on-dark:hover { color: #fff; }
.manage-url { display: block; word-break: break-all; background: #fff; color: #0f1d33; border: 1px solid #cdd5e1; border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.photo-tile { display: flex; flex-direction: column; gap: 6px; }
.photo-tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: #dbe5ef; }
.drop-pin { display: block; width: 22px; height: 22px; border-radius: 50% 50% 50% 0; background: #c2410c; border: 3px solid #fff; transform: rotate(-45deg); box-shadow: 0 1px 4px rgba(11, 37, 69, 0.4); }
.narrow { max-width: 420px; margin: 40px auto; width: 100%; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.stat { padding: 16px 18px; }
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th { text-align: left; font-size: 12px; text-transform: uppercase; color: #4a5a73; padding: 8px 10px; border-bottom: 2px solid #e2e7ef; white-space: nowrap; }
table.data td { padding: 10px; border-bottom: 1px solid #eef1f5; vertical-align: top; }

/* Home page */
.hero { background: #0b2545; color: #fff; padding: 20px 32px 32px; }
.hero-inner { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.hero h1 { font-size: 42px; line-height: 1.08; font-weight: 800; letter-spacing: -1px; max-width: 760px; }
.hero p { margin: 0; font-size: 18px; color: #c9d4e5; max-width: 640px; }
.home { max-width: 1264px; margin: 0 auto; padding: 32px 32px 48px; display: flex; flex-direction: column; gap: 48px; }
.stack-lg { display: flex; flex-direction: column; gap: 18px; }
.h-section { font-size: 28px; font-weight: 800; }
.island-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.island-tile { min-height: 140px; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; text-decoration: none; color: #0f1d33; border: 1px solid #e2e7ef; }
.island-tile:hover { color: #0f1d33; border-color: #9fb0c8; }
.island-name { font-weight: 800; font-size: 18px; }
.island-cta { font-size: 13px; font-weight: 600; color: #4a5a73; }
.island-oahu { background: #d6e2ee; } .island-maui { background: #fde4d3; } .island-hawaii { background: #e6ebf3; }
.island-kauai { background: #dcebe0; } .island-molokai { background: #efe8d8; } .island-lanai { background: #e8e1ef; }
.feature-band { display: flex; flex-wrap: wrap; gap: 28px; padding: 28px; }
.feature-band > * { flex: 1 1 340px; }
.badge-warm { align-self: flex-start; background: #fff4ec; color: #9a3412; }
.btn-navy { background: #0b2545; color: #fff; align-self: flex-start; }
.btn-navy:hover { background: #13335c; color: #fff; }
.chip-link { text-decoration: none; color: #0f1d33; background: #f4f6fa; }
.chip-link:hover { color: #0f1d33; border-color: #9fb0c8; }
.owners-band { background: #c2410c; color: #fff; border-radius: 20px; padding: 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.owners-band .stack { flex: 1 1 420px; }
.owners-band p { margin: 0; font-size: 16px; line-height: 1.55; }
.btn-white { background: #fff; color: #9a3412; }
.btn-white:hover { background: #fff4ec; color: #9a3412; }
@media (max-width: 700px) {
  .hero { padding: 16px 16px 24px; }
  .hero h1 { font-size: 30px; }
  .home { padding: 32px 16px 40px; }
}

/* Map credit: keep the required OpenStreetMap attribution, but quiet */
.leaflet-container .leaflet-control-attribution { font-size: 10px; line-height: 1.4; padding: 1px 6px; background: rgba(255, 255, 255, 0.75); color: #4a5a73; }
.leaflet-container .leaflet-control-attribution a { color: #4a5a73; text-decoration: none; }
.leaflet-container .leaflet-control-attribution a:hover { text-decoration: underline; }

/* Outreach preview + contact */
.preview-bar { background: #fff4ec; border-bottom: 1px solid #fed7aa; padding: 12px 32px; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: 14px; }
.narrow-wide { max-width: 720px; margin: 0 auto; width: 100%; }
table.data tr.done td { color: #7a879b; }
.msg-cell { max-width: 420px; white-space: pre-line; word-break: break-word; }

/* Footer sits at the bottom of the window on short pages */
body { min-height: 100vh; display: flex; flex-direction: column; }
.site-footer { margin-top: auto; }