/* ============================================================
   Sulphur Adventures Property Management
   Custom layer on top of Tailwind Play CDN.
   Branded components are plain CSS so they stay 100% consistent
   across all pages and render even before Tailwind CDN loads.
   ============================================================ */

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-padding-top:80px; -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (min-width:1300px){ html{ scroll-padding-top:124px; } }
body{ margin:0; font-family:'Open Sans',ui-sans-serif,system-ui,sans-serif; color:#334155; background:#fff; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; }

/* Reserve header height (matches actual rendered bar per breakpoint) so the
   JS partial injection causes ZERO layout shift. */
#site-header{ display:block; min-height:60px; }
@media (min-width:640px){ #site-header{ min-height:64px; } }
@media (min-width:1300px){ #site-header{ min-height:108px; } }
#site-footer{ display:block; min-height:240px; }

/* ---- Skip link ---- */
.skip-link{
  position:fixed; left:1rem; top:-120px; z-index:50;
  background:#0369A1; color:#fff; padding:.75rem 1.25rem;
  border-radius:.5rem; font-family:'Poppins',sans-serif; font-weight:600;
  text-decoration:none; transition:top .2s ease;
}
.skip-link:focus{ top:1rem; outline:2px solid #fff; outline-offset:2px; }

/* ---- Focus-visible safety net ---- */
:where(a,button,[tabindex],input,select,textarea):focus-visible{
  outline:2px solid #0369A1; outline-offset:2px;
}

/* ---- Layout primitives ---- */
.container-sa{ margin-inline:auto; max-width:1200px; padding-inline:1.5rem; }
@media (min-width:640px){ .container-sa{ padding-inline:2rem; } }
@media (min-width:1024px){ .container-sa{ padding-inline:2.5rem; } }
.section{ padding-block:4rem; }
@media (min-width:768px){ .section{ padding-block:6rem; } }
.section-sm{ padding-block:3rem; }
@media (min-width:768px){ .section-sm{ padding-block:4rem; } }

/* ---- Type scale ---- */
.eyebrow{ font-family:'Poppins',sans-serif; font-weight:600; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:#0F766E; margin:0; }
.h1{ font-family:'Poppins',sans-serif; font-weight:700; font-size:clamp(2.25rem,5vw,3.75rem); line-height:1.08; letter-spacing:-.015em; color:#134E4A; margin:0; }
.h2{ font-family:'Poppins',sans-serif; font-weight:600; font-size:clamp(1.75rem,3.5vw,2.5rem); line-height:1.16; letter-spacing:-.01em; color:#134E4A; margin:0; }
.h3{ font-family:'Poppins',sans-serif; font-weight:600; font-size:1.2rem; line-height:1.3; color:#134E4A; margin:0; }
.lead{ font-size:1.125rem; line-height:1.7; color:#475569; margin:0; }
a{ color:#0369A1; }

/* ---- Buttons ---- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:44px; padding:.8rem 1.6rem; border-radius:.7rem; font-family:'Poppins',sans-serif; font-weight:600; font-size:1rem; line-height:1; text-decoration:none; cursor:pointer; border:1px solid transparent; transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease; }
.btn-primary{ background:#0369A1; color:#fff; }
.btn-primary:hover{ background:#075985; color:#fff; }
.btn-secondary{ background:#fff; color:#0F766E; border-color:#99F6E4; }
.btn-secondary:hover{ border-color:#0F766E; background:#F0FDFA; }
.btn-ghost{ background:rgba(255,255,255,.10); color:#fff; border-color:rgba(255,255,255,.45); }
.btn-ghost:hover{ background:rgba(255,255,255,.20); color:#fff; }
.btn:focus-visible{ outline:none; box-shadow:0 0 0 2px #fff,0 0 0 4px #0369A1; }
.btn-ghost:focus-visible{ box-shadow:0 0 0 2px rgba(8,28,38,.5),0 0 0 4px #fff; }
.btn[disabled]{ opacity:.65; cursor:not-allowed; }

/* ---- Cards ---- */
.card{ background:#fff; border:1px solid #99F6E4; border-radius:1rem; box-shadow:0 1px 2px rgba(15,23,42,.04),0 4px 12px rgba(15,23,42,.06); padding:1.75rem; transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease; }
.card-hover:hover{ box-shadow:0 2px 4px rgba(15,23,42,.06),0 14px 30px rgba(15,23,42,.10); transform:translateY(-3px); }
.icon-chip{ display:inline-flex; height:3rem; width:3rem; flex:none; align-items:center; justify-content:center; border-radius:.85rem; background:#F0FDFA; color:#0F766E; }
.icon-chip svg{ width:1.5rem; height:1.5rem; stroke:currentColor; }

/* ---- Stats ---- */
.stat-num{ font-family:'Poppins',sans-serif; font-weight:700; font-size:clamp(2.25rem,4vw,3rem); line-height:1; color:#059669; }
.stat-label{ margin-top:.4rem; font-size:.95rem; color:#475569; }

/* ---- Header (floating pill bar with breathing room) ---- */
.site-header-bar{ background:#fff; box-shadow:0 1px 2px rgba(15,23,42,.04),0 6px 18px rgba(15,23,42,.06); transition:box-shadow .2s ease; }
#site-header.is-stuck .site-header-bar{ box-shadow:0 2px 6px rgba(15,23,42,.06),0 14px 34px rgba(15,23,42,.12); }
.brand-mark{ display:inline-flex; height:2.25rem; width:2.25rem; flex:none; align-items:center; justify-content:center; border-radius:.6rem; background:#0F766E; color:#fff; font-family:'Poppins',sans-serif; font-weight:700; font-size:.95rem; }
.nav-link{ font-family:'Open Sans',sans-serif; font-size:.9rem; color:#334155; padding:.5rem .1rem; position:relative; text-decoration:none; white-space:nowrap; transition:color .2s ease; }
.nav-link:hover{ color:#0F766E; }
.nav-link[aria-current="page"]{ color:#0F766E; font-weight:600; }
.nav-link[aria-current="page"]::after{ content:""; position:absolute; left:0; right:0; bottom:-3px; height:2px; background:#0F766E; border-radius:2px; }

/* ---- Mobile nav ---- */
#mobileNav{ transition:opacity .2s ease,transform .2s ease; transform-origin:top; }
#mobileNav[hidden]{ display:none; }
#mobileNav.is-animating{ opacity:0; transform:translateY(-8px); }
.m-nav-link{ display:block; padding:.85rem .25rem; font-family:'Open Sans',sans-serif; color:#334155; text-decoration:none; border-bottom:1px solid #E2E8F0; min-height:44px; }
.m-nav-link[aria-current="page"]{ color:#0F766E; font-weight:600; }
body.no-scroll{ overflow:hidden; }

/* ---- Accordion ---- */
.acc-item{ border:1px solid #99F6E4; border-radius:.85rem; background:#fff; overflow:hidden; }
.acc-item + .acc-item{ margin-top:.75rem; }
.acc-trigger{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem; text-align:left; padding:1.15rem 1.35rem; min-height:44px; background:transparent; border:0; cursor:pointer; font-family:'Poppins',sans-serif; font-weight:600; font-size:1.02rem; color:#134E4A; }
.acc-trigger:hover{ color:#0F766E; }
.acc-icon{ flex:none; width:1.25rem; height:1.25rem; color:#0F766E; transition:transform .2s ease; }
.acc-item.is-open .acc-icon{ transform:rotate(45deg); }
.acc-panel{ overflow:hidden; max-height:0; transition:max-height .28s ease; }
.acc-panel-inner{ padding:0 1.35rem 1.25rem; color:#475569; line-height:1.7; }

/* ---- Scroll reveal ----
   Hidden state is gated behind html.js (set synchronously in <head>) so
   that no-JS users and non-JS crawlers always see fully visible content. */
html.js [data-reveal]{ opacity:0; transform:translateY(16px); transition:opacity .55s ease,transform .55s ease; }
html.js [data-reveal].is-visible{ opacity:1; transform:none; }
[data-reveal-delay="1"]{ transition-delay:.08s; }
[data-reveal-delay="2"]{ transition-delay:.16s; }
[data-reveal-delay="3"]{ transition-delay:.24s; }
[data-reveal-delay="4"]{ transition-delay:.32s; }

/* ---- Image with graceful fallback (Pexels hotlink safety) ---- */
.img-wrap{ position:relative; overflow:hidden; background:#F0FDFA; }
.img-wrap > img{ position:relative; z-index:1; display:block; width:100%; height:100%; object-fit:cover; }
.img-fallback{ position:absolute; inset:0; z-index:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#0F766E 0%,#14B8A6 55%,#0369A1 100%); }
.img-fallback svg{ width:36%; max-width:110px; height:auto; opacity:.92; }
.img-wrap.is-broken > img{ display:none; }

/* ---- Decorative ---- */
.bg-grid{ background-image:linear-gradient(rgba(15,118,110,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(15,118,110,.05) 1px,transparent 1px); background-size:46px 46px; }
.divider{ border-top:1px solid #99F6E4; }
.pill{ display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .7rem; border-radius:999px; font-family:'Poppins',sans-serif; font-weight:600; font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; }
.pill-available{ background:#ECFDF5; color:#059669; }
.pill-soon{ background:#F0FDFA; color:#0F766E; }
.check-li{ display:flex; gap:.65rem; align-items:flex-start; line-height:1.6; }
.check-li svg{ flex:none; width:1.25rem; height:1.25rem; color:#0F766E; margin-top:.1rem; }

/* ---- Forms ---- */
.field-label{ display:block; font-family:'Poppins',sans-serif; font-weight:600; font-size:.9rem; color:#334155; margin-bottom:.4rem; }
.field-label .req{ color:#0369A1; }
.field{ width:100%; border:1px solid #99F6E4; border-radius:.6rem; background:#fff; padding:.8rem 1rem; font-family:'Open Sans',sans-serif; font-size:1rem; color:#334155; min-height:44px; }
.field::placeholder{ color:#94A3B8; }
.field:focus-visible{ outline:none; border-color:#0369A1; box-shadow:0 0 0 3px rgba(3,105,161,.18); }
.field[aria-invalid="true"]{ border-color:#DC2626; }
.field-error{ margin-top:.35rem; font-size:.85rem; color:#DC2626; display:flex; gap:.35rem; align-items:center; }
.field-error[hidden]{ display:none; }

/* ---- Prose (legal + blog body) ---- */
.prose-sa{ color:#334155; font-size:1.02rem; }
.prose-sa h2{ font-family:'Poppins',sans-serif; font-weight:600; color:#134E4A; font-size:1.55rem; margin:2.4rem 0 .9rem; }
.prose-sa h3{ font-family:'Poppins',sans-serif; font-weight:600; color:#134E4A; font-size:1.18rem; margin:1.9rem 0 .6rem; }
.prose-sa p{ margin:0 0 1.15rem; line-height:1.8; }
.prose-sa ul,.prose-sa ol{ margin:0 0 1.2rem; padding-left:1.3rem; }
.prose-sa ul{ list-style:disc; } .prose-sa ol{ list-style:decimal; }
.prose-sa li{ margin:.45rem 0; line-height:1.75; }
.prose-sa a{ color:#0369A1; text-decoration:underline; }
.prose-sa strong{ color:#134E4A; }
.prose-sa blockquote{ margin:1.5rem 0; padding:1rem 1.25rem; border-left:3px solid #0F766E; background:#F0FDFA; border-radius:0 .5rem .5rem 0; color:#134E4A; }

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

/* ---- Print ---- */
@media print{ #site-header,#site-footer,.no-print{ display:none!important; } body{ color:#000; } }