/* ============================================================
   JR Plus Property, rentals site
   Pattaya and Jomtien condo and villa rentals
   Design system. Built for a 9-language site, so every rule
   must survive long German-length words, Thai tall glyphs,
   and right-to-left-free but wide Cyrillic/Devanagari text.
   ============================================================ */

:root {
  /* ---- Brand palette ----
     Anchored to JR Plus Property's real brand orange (#FA7F28),
     warmed and deepened for a premium property feel. The indigo
     from their old Divi theme is dropped; it fought the orange. */
  --sea:        #0b5d70;   /* primary. Deep Gulf-of-Thailand teal */
  --sea-deep:   #084555;   /* hover / dark surfaces */
  --sea-soft:   #e7f1f4;   /* tinted panels */
  --sun:        #fa7f28;   /* JR Plus brand orange. CTA */
  --sun-deep:   #e06a15;   /* CTA hover */
  --sand:       #fdfaf6;   /* page background */
  --sand-2:     #f5eee4;   /* alternating sections */
  --ink:        #1b2528;   /* body text */
  --ink-soft:   #55666b;   /* secondary text */
  --line:       #e6dccd;   /* borders */
  --white:      #ffffff;
  --green:      #1f9d55;   /* "available now" / success */
  --line-green: #06c755;   /* LINE brand */
  --wa-green:   #25d366;   /* WhatsApp brand */

  --max:    1180px;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow:    0 8px 24px rgba(11,93,112,.09);
  --shadow-lg: 0 18px 48px rgba(11,93,112,.16);

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
           "Noto Sans Thai", "Noto Sans JP", "Noto Sans KR",
           "Noto Sans SC", "Noto Sans Devanagari", "Noto Sans Lao",
           sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--sand);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  /* Room for the sticky mobile contact bar so it never covers content */
  padding-bottom: env(safe-area-inset-bottom);
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  line-height: 1.2;
  color: var(--ink);
  font-weight: 600;
  /* Long compound words in Thai/German/Russian must not overflow */
  overflow-wrap: break-word;
}
h1 { font-size: clamp(2rem, 5vw, 3.3rem); margin: 0 0 .4em; }
h2 { font-size: clamp(1.55rem, 3.4vw, 2.3rem); margin: 0 0 .5em; }
h3 { font-size: 1.28rem; margin: 0 0 .4em; }
h4 { font-size: 1.05rem; margin: 0 0 .3em; }
p  { margin: 0 0 1rem; }
a  { color: var(--sea); text-decoration: none; }
a:hover { color: var(--sea-deep); text-decoration: underline; }
img { max-width: 100%; display: block; }

/* Accessibility: zoom is never suppressed and focus is always visible. */
:focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--sea); color: #fff; padding: 12px 20px; z-index: 999;
}
.skip-link:focus { left: 0; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 22px; }
.section { padding: 72px 0; }
.section--tight { padding: 46px 0; }
.section--alt { background: var(--sand-2); }
.section--sea { background: var(--sea); color: #e4f2f5; }
.section--sea h2, .section--sea h3, .section--sea h4 { color: #fff; }
.center { text-align: center; }
.lead { font-size: 1.15rem; color: var(--ink-soft); max-width: 660px; }
.center .lead { margin-left: auto; margin-right: auto; }
.section--sea .lead { color: #c8e3e9; }

.hero .eyebrow, .section--sea .eyebrow { color: var(--sun); }
.eyebrow {
  text-transform: uppercase; letter-spacing: .15em; font-size: .76rem;
  /* Orange on cream measures 2.48:1, which fails WCAG. Deep teal is 7.17:1.
     Sections on dark or photo backgrounds override this to --sun below. */
  font-weight: 700; color: var(--sea); margin: 0 0 .6rem;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--sans); font-weight: 600; font-size: 1rem;
  padding: 14px 26px; border-radius: 999px; cursor: pointer;
  border: 2px solid transparent; transition: .18s ease;
  text-align: center; text-decoration: none;
  /* Tap target minimum for mobile */
  min-height: 48px;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
/* Dark text on the orange and green buttons, not white.
   Measured: white on orange 2.58:1 and white on WhatsApp green 1.98:1, both
   fail WCAG. Dark ink gives 6.06:1 and 7.89:1. These are the buttons the whole
   site exists to get clicked, and they are read outdoors on a phone. */
.btn--primary { background: var(--sun); color: var(--ink); }
.btn--primary:hover { background: var(--sun-deep); color: var(--ink); }
.btn--sea { background: var(--sea); color: #fff; }
.btn--sea:hover { background: var(--sea-deep); color: #fff; }
.btn--ghost { background: transparent; color: var(--sea); border-color: var(--sea); }
.btn--ghost:hover { background: var(--sea); color: #fff; }
.btn--line { background: var(--line-green); color: var(--ink); }
.btn--line:hover { background: #05b04c; color: var(--ink); }
.btn--wa { background: var(--wa-green); color: var(--ink); }
.btn--wa:hover { background: #1fbe5a; color: var(--ink); }
.btn--lg { padding: 17px 34px; font-size: 1.08rem; }
.btn--block { display: flex; width: 100%; }

/* ---------- Layout helpers ---------- */
.grid { display: grid; gap: 26px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); transition: .2s ease;
  display: flex; flex-direction: column;
}
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.card__body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.card__img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; background: var(--sea-soft); }

/* ---------- Price display ----------
   Prices are always visible. They are never gated behind an
   enquiry form. */
.price {
  font-family: var(--serif); font-weight: 600;
  font-size: 1.5rem; color: var(--sea); line-height: 1.2;
}
.price__unit { font-family: var(--sans); font-size: .85rem; font-weight: 500; color: var(--ink-soft); }
.price__alt  { font-size: .84rem; color: var(--ink-soft); margin-top: 2px; }

/* ---------- Badges ---------- */
.badge {
  display: inline-block; font-size: .74rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
}
.badge--avail { background: rgba(31,157,85,.13); color: var(--green); }
.badge--sea   { background: var(--sea-soft); color: var(--sea-deep); }
.badge--sun   { background: rgba(250,127,40,.14); color: var(--sun-deep); }

/* ---------- Sticky mobile contact bar ----------
   Persistent on small screens. Body padding below keeps it
   from overlapping page content. */
.contactbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  display: none; background: var(--white);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 20px rgba(0,0,0,.10);
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  gap: 8px;
}
.contactbar .btn { flex: 1; padding: 12px 8px; font-size: .92rem; min-height: 46px; }
@media (max-width: 860px) {
  .contactbar { display: flex; }
  body { padding-bottom: 74px; }
}

/* ---------- Forms ---------- */
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 14px; font: inherit; font-size: 1rem;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: var(--white); color: var(--ink);
  min-height: 48px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--sea); outline: none;
  box-shadow: 0 0 0 3px rgba(11,93,112,.13);
}
.field textarea { min-height: 110px; resize: vertical; }
.field__hint { font-size: .84rem; color: var(--ink-soft); margin-top: 5px; }
/* No CAPTCHA anywhere. A honeypot does the same job invisibly. */
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; }

/* ---------- Trust strip ---------- */
.trust { display: flex; flex-wrap: wrap; gap: 12px 30px; justify-content: center; }
.trust__item { display: flex; align-items: center; gap: 9px; font-size: .95rem; font-weight: 500; }
.trust__num { font-family: var(--serif); font-size: 1.6rem; font-weight: 600; color: var(--sea); }

/* ---------- Tables (price guides) ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: .96rem; min-width: 520px; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); }
th { background: var(--sea-soft); font-weight: 700; color: var(--sea-deep); }
tbody tr:hover { background: var(--sand-2); }

/* ---------- FAQ ---------- */
.faq details {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 0; margin-bottom: 12px; background: var(--white);
}
.faq summary {
  cursor: pointer; font-weight: 600; padding: 17px 20px;
  list-style: none; display: flex; justify-content: space-between; gap: 14px;
  min-height: 48px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; color: var(--sun); line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details > div { padding: 0 20px 18px; color: var(--ink-soft); }

/* ---------- Seasonal notice ----------
   Shown only during the low season months. Hidden by default so
   it never appears out of season, even with JavaScript disabled. */
.announce {
  background: var(--sun); color: #40230a;
  text-align: center; padding: 11px 18px;
  font-size: .95rem; font-weight: 500;
}
.announce a { color: #40230a; text-decoration: underline; font-weight: 700; }
.announce a:hover { color: #000; }
.announce[hidden] { display: none; }
/* The hidden attribute must win over any display rule set below, or JS that
   hides an element (the budget filter, the empty message, the price toggle)
   updates the count while the element stays on screen. .card sets
   display:flex, which is exactly how that bug happened. */
[hidden] { display: none !important; }

/* ---------- Quick answers ----------
   Direct question and answer pairs near the top of a page. */
.quick {
  background: var(--sea-soft); border: 1px solid #cfe3e8;
  border-radius: var(--radius); padding: 26px 28px;
}
.quick h2 { font-size: 1.25rem; margin-bottom: .8em; }
.quick dl { margin: 0; display: grid; gap: 14px 30px;
            grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.quick dt { font-weight: 700; color: var(--sea-deep); font-size: .95rem; }
.quick dd { margin: 2px 0 0; color: var(--ink); font-size: .95rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 150; background: rgba(253,250,246,.94);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 18px; padding-top: 12px; padding-bottom: 12px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-weight: 600; font-size: 1.2rem; color: var(--ink); }
.brand:hover { text-decoration: none; color: var(--ink); }
.nav { margin-left: auto; display: flex; align-items: center; gap: 26px; }
/* The links live inside a wrapper, so the gap has to be set on the wrapper
   too. Without this the nav renders as one run-on word. */
.nav__links { display: inline-flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.nav a { font-weight: 500; font-size: .97rem; color: var(--ink); white-space: nowrap; }
.nav a:hover { color: var(--sea); }
@media (max-width: 900px) { .nav__links { display: none; } }
.site-header .wrap { gap: 20px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--sea-deep); color: #b9d6dd; padding: 56px 0 30px; font-size: .95rem; }
.site-footer h4 { color: #fff; font-size: 1rem; margin-bottom: .7em; }
.site-footer a { color: #b9d6dd; }
.site-footer a:hover { color: #fff; }
.site-footer__bar {
  border-top: 1px solid rgba(255,255,255,.14); margin-top: 34px; padding-top: 20px;
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: .88rem;
}

/* ---------- Hero ---------- */
.hero { position: relative; color: #fff; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,69,85,.62) 0%, rgba(8,69,85,.78) 100%);
}
.hero__inner { position: relative; z-index: 2; padding: 92px 0 84px; }
.hero h1 { color: #fff; max-width: 15ch; }
.hero .lead { color: #dceef2; }

/* ---------- Search widget ---------- */
.searchbox {
  background: var(--white); border-radius: var(--radius); padding: 20px;
  box-shadow: var(--shadow-lg); display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  align-items: end;
}
.searchbox .field { margin-bottom: 0; }

/* ---------- Utility ---------- */
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: 10px; } .mt-2 { margin-top: 22px; } .mt-3 { margin-top: 34px; }
.stack { display: flex; flex-wrap: wrap; gap: 12px; }
.stack--center { justify-content: center; }
.muted { color: var(--ink-soft); }
.small { font-size: .88rem; }

/* Placeholder marker, so nothing fake ever ships by accident */
.is-placeholder { position: relative; }
.is-placeholder::before {
  content: "PLACEHOLDER"; position: absolute; top: 8px; left: 8px; z-index: 3;
  background: rgba(220,38,38,.92); color: #fff; font-size: .62rem; font-weight: 700;
  letter-spacing: .08em; padding: 3px 7px; border-radius: 4px;
}

@media print { .contactbar, .site-header { display: none; } }