/* ===========================================================
   GREENTIK ACRES — Design System
   Concept: "Site Survey" — the site is treated like an
   annotated architectural land plan. Dashed gold survey lines,
   corner tick brackets, monospace measurement labels.
   =========================================================== */

:root{
  --forest:#0F3D2E;
  --forest-ink:#0B2A20;
  --signal:#1F7A4D;
  --gold:#C9962F;
  --gold-light:#E4C374;
  --paper:#F7F3EA;
  --paper-dim:#EFE9DA;
  --ink:#171A16;
  --stone:#8A9186;
  --stone-light:#C8CDC2;
}

html{ scroll-behavior:smooth; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--gold); color:var(--ink); }

.font-display{ font-family:'Fraunces',serif; }
.font-mono{ font-family:'IBM Plex Mono',monospace; }

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

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

/* ---------- Blueprint corner brackets ---------- */
.blueprint-frame{ position:relative; }
.blueprint-frame::before,
.blueprint-frame::after,
.blueprint-frame .bp-tr,
.blueprint-frame .bp-br{
  content:"";
  position:absolute;
  width:22px; height:22px;
  border-color:var(--gold-light);
  opacity:0.85;
  z-index:10;
}
.blueprint-frame::before{ top:14px; left:14px; border-top:2px solid; border-left:2px solid; }
.blueprint-frame::after{ bottom:14px; left:14px; border-bottom:2px solid; border-left:2px solid; }
.blueprint-frame .bp-tr{ top:14px; right:14px; border-top:2px solid; border-right:2px solid; }
.blueprint-frame .bp-br{ bottom:14px; right:14px; border-bottom:2px solid; border-right:2px solid; }

/* dashed survey rule */
.survey-rule{
  border-top:1.5px dashed rgba(201,150,47,0.55);
}
.survey-rule-v{
  border-left:1.5px dashed rgba(201,150,47,0.45);
}

/* subtle graph-paper texture for dark sections */
.grid-texture{
  background-image:
    linear-gradient(rgba(247,243,234,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247,243,234,0.045) 1px, transparent 1px);
  background-size:42px 42px;
}
.grid-texture-light{
  background-image:
    linear-gradient(rgba(15,61,46,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,61,46,0.06) 1px, transparent 1px);
  background-size:36px 36px;
}

/* spec label — the "measurement tag" motif */
.spec-tag{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gold);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.spec-tag::before{
  content:"";
  width:14px; height:1px;
  background:var(--gold);
  display:inline-block;
}

/* nav link underline */
.nav-link{ position:relative; }
.nav-link::after{
  content:"";
  position:absolute; left:0; bottom:-4px;
  width:0; height:1px; background:var(--gold);
  transition:width .25s ease;
}
.nav-link:hover::after, .nav-link.active::after{ width:100%; }

/* gold outline button */
.btn-gold{
  background:var(--gold);
  color:var(--ink);
  font-weight:600;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-gold:hover{ background:var(--gold-light); transform:translateY(-2px); box-shadow:0 10px 24px -8px rgba(201,150,47,0.55); }

.btn-outline{
  border:1px solid rgba(247,243,234,0.4);
  color:var(--paper);
  transition:border-color .2s ease, background .2s ease;
}
.btn-outline:hover{ border-color:var(--gold-light); background:rgba(247,243,234,0.08); }

/* image reveal on scroll */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s ease, transform .8s ease;
}
.reveal.in-view{ opacity:1; transform:translateY(0); }

/* stat counter */
.stat-num{ font-variant-numeric:tabular-nums; }

/* marker pulse for master-plan callouts */
.plan-marker{
  width:11px; height:11px; border-radius:50%;
  background:var(--gold-light);
  box-shadow:0 0 0 0 rgba(228,195,116,0.6);
  animation:pulseMark 2.2s ease-out infinite;
}
@keyframes pulseMark{
  0%{ box-shadow:0 0 0 0 rgba(228,195,116,0.55); }
  70%{ box-shadow:0 0 0 16px rgba(228,195,116,0); }
  100%{ box-shadow:0 0 0 0 rgba(228,195,116,0); }
}

/* master-plan callout markers — connects the JS-driven .in-view toggle
   to an actual visible state (this was previously missing entirely,
   so the callout labels never appeared) */
.plan-marker-wrap.in-view{
  opacity:1 !important;
  transform:translateY(0) !important;
}

/* master-plan callout labels — capped width + wrap on small screens so
   they can never push the page into horizontal scroll, regardless of
   which side of the image a marker sits on */
@media (max-width:640px){
  .plan-marker-wrap .absolute.bg-forestink{
    font-size:9px !important;
    line-height:1.35;
    white-space:normal !important;
    max-width:104px;
    padding:5px 7px !important;
  }
}

/* lightbox */
#lightbox{
  position:fixed; inset:0; background:rgba(11,15,12,0.94);
  display:none; align-items:center; justify-content:center; z-index:100;
  padding:5vh 5vw;
}
#lightbox.open{ display:flex; }
#lightbox img{ max-width:100%; max-height:88vh; box-shadow:0 30px 80px rgba(0,0,0,0.5); }

/* mobile menu */
#mobileMenu{
  max-height:0; overflow:hidden; transition:max-height .35s ease;
}
#mobileMenu.open{ max-height:480px; }

/* form input styling */
.field-input{
  background:rgba(247,243,234,0.04);
  border:1px solid rgba(138,145,134,0.35);
  color:var(--paper);
  transition:border-color .2s ease, background .2s ease;
}
.field-input:focus{
  border-color:var(--gold);
  background:rgba(247,243,234,0.07);
}
.field-input.field-error{ border-color:#C24C3E; }
.field-input::placeholder{ color:rgba(247,243,234,0.35); }

.field-input-light{
  background:#fff;
  border:1px solid rgba(23,26,22,0.15);
  color:var(--ink);
}
.field-input-light:focus{ border-color:var(--gold); }
.field-input-light.field-error{ border-color:#C24C3E; }

/* toast */
#toast{
  position:fixed; bottom:24px; right:24px; z-index:200;
  transform:translateY(120%); opacity:0;
  transition:transform .4s ease, opacity .4s ease;
}
#toast.show{ transform:translateY(0); opacity:1; }

/* ---------- Shop directory (numbered grid + modal) ---------- */
.shop-num-btn{
  aspect-ratio:1;
  display:flex; align-items:center; justify-content:center;
  background:var(--paper-dim);
  border:1px solid rgba(23,26,22,0.12);
  color:var(--forest);
  transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
  cursor:pointer;
}
.shop-num-btn:hover,
.shop-num-btn:focus-visible{
  background:var(--forest);
  color:var(--gold-light);
  border-color:var(--forest);
  transform:translateY(-3px);
  box-shadow:0 10px 20px -8px rgba(15,61,46,0.45);
}
.shop-num-btn.is-active{
  background:var(--gold);
  color:var(--ink);
  border-color:var(--gold);
}

#shopModal{ display:none; }
#shopModal.open{ display:flex; }
#shopModal .relative{
  opacity:0;
  transform:translateY(16px) scale(0.98);
  transition:opacity .25s ease, transform .25s ease;
}
#shopModal.open .relative{ opacity:1; transform:translateY(0) scale(1); }

/* custom 14-column grid for the shop directory (beyond Tailwind's default max) */
@media (min-width:1024px){
  .lg\:grid-cols-14{ grid-template-columns:repeat(14, minmax(0,1fr)); }
}

/* scroll cue — hero attractiveness polish */
.scroll-cue{
  display:block;
  width:22px; height:36px;
  border:1.5px solid rgba(247,243,234,0.55);
  border-radius:12px;
  position:relative;
}
.scroll-cue::before{
  content:"";
  position:absolute;
  top:7px; left:50%;
  width:4px; height:4px;
  margin-left:-2px;
  border-radius:50%;
  background:var(--gold-light);
  animation:scrollCue 1.8s ease-in-out infinite;
}
@keyframes scrollCue{
  0%{ transform:translateY(0); opacity:1; }
  70%{ transform:translateY(12px); opacity:0.2; }
  100%{ transform:translateY(0); opacity:0; }
}

/* skip link */
.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--gold); color:var(--ink);
  padding:10px 16px; z-index:999; font-weight:600;
}
.skip-link:focus{ left:16px; top:16px; }

/* ---------- Logo mark (inline SVG, no external image dependency) ---------- */
.logo-glyph{
  transition:transform .35s ease;
}
.logo-mark:hover .logo-glyph{
  transform:rotate(90deg);
}
@media (prefers-reduced-motion: reduce){
  .logo-mark:hover .logo-glyph{ transform:none; }
}

/* ---------------------------------------------------------------------
   Content-protection (deters casual copy/paste — see the note in
   footer.php's inline script for what this does and doesn't do).
   Form fields and anything marked .allow-select stay selectable so
   the booking form and contact details (phone/email/address) still
   work normally for legitimate visitors.
   --------------------------------------------------------------------- */
body{
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
input, textarea, select, .allow-select, .allow-select *{
  -webkit-user-select:text;
  -moz-user-select:text;
  -ms-user-select:text;
  user-select:text;
}
img{
  -webkit-user-drag:none;
  user-drag:none;
  -webkit-touch-callout:none;
}