/* ═══════════════════════════════════════════════════════════════
   craft.css — designer-grade polish layer (2026-09-26)
   Focus states · anchor behavior · form craft · type rhythm ·
   surfaces. Additive on every page (index, projects, calculator).
   ═══════════════════════════════════════════════════════════════ */

:root {
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;
  --gold: #c8a84e;
  --gold-line: rgba(200, 168, 78, .28);
  --ink: #eceef5;
  --ink-dim: #a7a9b6;
  --focus: rgba(200, 168, 78, .85);
}

/* ── 1. Anchor navigation: land BELOW the fixed nav ───────────── */
html { scroll-behavior: smooth; }
section[id], div[id], [id="properties"], [id="gallery"],
[id="floorplan"], [id="team"], [id="testimonials"], [id="faq"],
[id="contact"], [id="top"] {
  scroll-margin-top: 112px;
}

/* ── 2. Visible keyboard focus (was 1px black on dark) ────────── */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible,
[role="button"]:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}
a:focus:not(:focus-visible), button:focus:not(:focus-visible) {
  outline: none;
}

/* ── 3. Selection: gold on ink ────────────────────────────────── */
::selection {
  background: rgba(200, 168, 78, .92);
  color: #0a0a0f;
}
::-moz-selection {
  background: rgba(200, 168, 78, .92);
  color: #0a0a0f;
}

/* ── 4. Custom scrollbar (dark + gold) ────────────────────────── */
* { scrollbar-color: rgba(200, 168, 78, .5) rgba(255, 255, 255, .05); scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: rgba(255, 255, 255, .04); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(200, 168, 78, .55), rgba(200, 168, 78, .3));
  border-radius: 999px; border: 3px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(200, 168, 78, .8); }

/* ── 5. Form craft ────────────────────────────────────────────── */
/* dark autofill: browsers force pale-yellow bg — kill it */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--gold);
  box-shadow: 0 0 0 1000px #15151f inset;
  border-color: var(--gold-line) !important;
  transition: background-color 9999s ease-out;
}
input, textarea, select {
  caret-color: var(--gold);
  transition: border-color .3s, box-shadow .3s;
}
input::placeholder, textarea::placeholder {
  color: rgba(167, 169, 182, .55);
  transition: opacity .3s;
}
input:focus::placeholder, textarea:focus::placeholder { opacity: .35; }

/* ── 6. Radii rhythm: one family (10 / 14 / 20 / pill) ────────── */
.burger, .fp-img .room-hot, .pv-lb__thumb { border-radius: var(--r-sm) !important; }
.faq-item, .fp-room, .form-grid input, .form-grid textarea, .form-grid select {
  border-radius: var(--r-md);
}
.card, .pv-quote, .pv-stats .stat, .fp-img, .pv-cta, .cta-banner {
  border-radius: var(--r-lg);
}

/* ── 7. Headings: optical balance ─────────────────────────────── */
h1, h2, h3, .sec-title, .ptitle {
  text-wrap: balance;
}
p, .sec-sub { text-wrap: pretty; }

/* ── 8. Footer surface (was fully transparent) ────────────────── */
footer {
  border-top: 1px solid var(--gold-line);
  background:
    linear-gradient(180deg, rgba(200, 168, 78, .045), transparent 42%),
    rgba(255, 255, 255, .012);
}

/* ── 9. Section header editorial detail: gold dash before kicker ─ */
.kicker {
  display: inline-flex; align-items: center; gap: 12px;
}
.kicker::before {
  content: ""; width: 26px; height: 1.5px; flex: none;
  background: linear-gradient(90deg, var(--gold), rgba(200, 168, 78, .15));
}

/* ── 10. Image load fade (JS adds .is-loaded) ─────────────────── */
img.pv-fade { opacity: 0; transition: opacity .7s ease; }
img.pv-fade.is-loaded { opacity: 1; }

/* ── 11. Link underline craft (in-prose links) ────────────────── */
p a, .sec-sub a, li a {
  background-image: linear-gradient(transparent 82%, rgba(200, 168, 78, .55) 0);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  transition: background-size .45s cubic-bezier(.16, 1, .3, 1);
  text-decoration: none;
}
p a:hover, .sec-sub a:hover, li a:hover { background-size: 100% 100%; }

/* ── 12. Smooth page on load (avoid flash of unstyled motion) ─── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  img.pv-fade { opacity: 1 !important; transition: none !important; }
  p a, .sec-sub a, li a { transition: none !important; }
}

/* ── 15. Hero text legibility (mobile-first audit 2026-09-26) ────
   Masks clipped 7px of glyphs (44px box vs 51px content); gold scrim
   wash sat behind text and broke contrast to 2.2:1. */
.mask, .reveal-word {
  padding: .17em .05em;
  margin: -.17em -.05em;
}
.hero h1 {
  text-shadow:
    0 2px 24px rgba(5, 6, 10, .8),
    0 1px 3px rgba(5, 6, 10, .65),
    0 20px 60px rgba(0, 0, 0, .5);
}
.hero .sub, .hero p, .hero .kicker {
  text-shadow: 0 2px 14px rgba(5, 6, 10, .85), 0 1px 2px rgba(5, 6, 10, .7);
}
/* grain under the text, still over the photos */
.pv-grain { z-index: 3 !important; pointer-events: none; }

@media (max-width: 720px) {
  /* darker scrim where the copy sits; keep only a whisper of gold glow */
  .hero .layer.scrim {
    background:
      radial-gradient(120% 85% at 16% 20%, rgba(200, 168, 78, .07), transparent 52%),
      linear-gradient(185deg, rgba(10, 10, 15, .82) 0%, rgba(10, 10, 15, .62) 46%, rgba(10, 10, 15, .78) 100%) !important;
  }
  .hero h1 { font-size: clamp(2.55rem, 11vw, 3.2rem); line-height: 1.02; }
  .hero .sub { font-size: 1.02rem; line-height: 1.65; color: #c6c8d2; }
}

/* ── Mobile: tighten paddings where the audit flagged density ─── */
@media (max-width: 720px) {
  section[id], div[id] { scroll-margin-top: 86px; }
  .kicker::before { width: 18px; }
}