/* ===========================================================================
   Grand Views Homes — custom layer (only what Tailwind can't do cleanly)
   =========================================================================== */

/* ---- Self-hosted brand fonts (no external dependency) ---- */
@font-face{
  font-family:"Playfair Display"; font-style:normal; font-weight:400 900;
  font-display:swap; src:url("../fonts/PlayfairDisplay.ttf") format("truetype");
}
@font-face{
  font-family:"Cormorant Garamond"; font-style:normal; font-weight:300 700;
  font-display:swap; src:url("../fonts/CormorantGaramond.ttf") format("truetype");
}
@font-face{
  font-family:"Manrope"; font-style:normal; font-weight:300 800;
  font-display:swap; src:url("../fonts/Manrope.ttf") format("truetype");
}

:root{
  --navy:#0C1B37; --navy-900:#081127; --navy-800:#0C1B37;
  --gold:#CEAA49; --gold-dark:#b8923a; --cream:#F8F8F8; --ink:#222222;
}

html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{ overflow-x:hidden; }

/* ---- Typographic helpers ---- */
.eyebrow{
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold-dark); font-weight:600;
}
.eyebrow-gold{
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold); font-weight:600;
}

/* ---- Buttons ---- */
.btn-gold{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.95rem 2.1rem; background:var(--gold); color:var(--navy);
  font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  transition:background .35s ease, transform .35s ease;
}
.btn-gold:hover{ background:#fff; transform:translateY(-2px); }

.btn-outline-light{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.95rem 2.1rem; border:1px solid rgba(255,255,255,.45); color:#fff;
  font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  transition:all .35s ease;
}
.btn-outline-light:hover{ border-color:var(--gold); color:var(--gold); }

.btn-outline-navy{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.95rem 2.1rem; border:1px solid var(--navy); color:var(--navy);
  font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  transition:all .35s ease;
}
.btn-outline-navy:hover{ background:var(--navy); color:#fff; }

/* ---- Form fields ---- */
.field{
  width:100%; background:rgba(255,255,255,.04);
  border:1px solid rgba(206,170,73,.25); color:#fff;
  padding:.9rem 1.1rem; font-size:14px; outline:none;
  transition:border-color .3s ease, background .3s ease;
}
.field::placeholder{ color:rgba(255,255,255,.4); }
.field:focus{ border-color:var(--gold); background:rgba(255,255,255,.07); }
select.field{ appearance:none; background-image:none; }
select.field option{ color:#111; }

/* ---- Header scroll states ---- */
[data-header]{ background:transparent; }
[data-header].is-stuck{
  background:rgba(8,17,39,.92);
  backdrop-filter:saturate(140%) blur(10px);
  box-shadow:0 1px 0 rgba(206,170,73,.18);
}
[data-header].is-stuck .h-20{ height:4.5rem; }

/* underline animation on nav links */
.nav-link::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--gold); transition:width .35s ease;
}
.nav-link:hover::after{ width:100%; }

/* ---- Scroll reveal ---- */
[data-reveal]{
  opacity:0; transform:translateY(28px);
  transition:opacity .9s cubic-bezier(.16,.84,.44,1), transform .9s cubic-bezier(.16,.84,.44,1);
  will-change:opacity, transform;
}
[data-reveal].is-visible{ opacity:1; transform:none; }

/* ---- Lightbox ---- */
.lb{
  position:fixed; inset:0; z-index:90; display:none;
  align-items:center; justify-content:center; background:rgba(8,17,39,.96);
}
.lb.is-open{ display:flex; }
.lb img{ max-width:92vw; max-height:88vh; object-fit:contain; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.lb__btn{
  position:absolute; color:#fff; opacity:.8; transition:opacity .25s, color .25s;
  background:none; border:0; cursor:pointer;
}
.lb__btn:hover{ opacity:1; color:var(--gold); }
.lb__close{ top:1.5rem; right:1.5rem; }
.lb__prev{ left:1.25rem; top:50%; transform:translateY(-50%); }
.lb__next{ right:1.25rem; top:50%; transform:translateY(-50%); }
.lb__count{ position:absolute; bottom:1.5rem; left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,.7); font-size:13px; letter-spacing:.1em; }

/* ---- Graceful image fallback (when an asset is missing) ---- */
img.img-missing{
  background:
    repeating-linear-gradient(45deg, #0e1f3e, #0e1f3e 14px, #0c1b37 14px, #0c1b37 28px);
  position:relative;
}
.img-fallback{
  display:grid; place-items:center; text-align:center;
  background:#0c1b37; color:#CEAA49;
  font-family:"Playfair Display",serif; letter-spacing:.05em;
}
.img-fallback span{ font-size:12px; color:rgba(255,255,255,.45); letter-spacing:.18em; text-transform:uppercase; }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  html{ scroll-behavior:auto; }
}

/* keyboard focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--gold); outline-offset:2px;
}