/* ==========================================================================
   AB CARE AFH — shared design tokens + components
   Imported on every page; paired with Tailwind (CDN for now, compile later).
   ========================================================================== */

:root {
  --coral: #B05C3A;
  --coral-soft: #EFDCD1;
  --ink: #1F1B1A;
  --cream: #FAF7F2;
  --stone-200: #E7E5E4;
  --stone-400: #A8A29E;
  --stone-500: #78716C;
  --stone-600: #57534E;
  --warm-dark: #1B1714;
}

* { -webkit-font-smoothing: antialiased; }

body {
  font-family: 'Inter', sans-serif;
  background: #fff;
  color: var(--ink);
  font-feature-settings: 'ss01','cv11';
}

/* Type */
.serif {
  font-family: 'Fraunces', Georgia, serif;
  font-optical-sizing: auto;
  font-variation-settings: 'SOFT' 40, 'WONK' 0;
  letter-spacing: -0.01em;
}
.mono {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-feature-settings: 'tnum' 1;
}

/* Token helpers */
.bg-coral { background: var(--coral); }
.bg-coral-soft { background: var(--coral-soft); }
.bg-cream { background: var(--cream); }
.bg-ink { background: var(--ink); }
.bg-warm-dark { background: var(--warm-dark); }
.text-coral { color: var(--coral); }
.text-ink { color: var(--ink); }
.border-coral { border-color: var(--coral); }

/* Highlight swipe */
.swipe {
  background-image: linear-gradient(transparent 70%, rgba(176,92,58,.20) 70%);
  background-repeat: no-repeat;
  padding: 0 .05em;
}
.swipe-light {
  background-image: linear-gradient(transparent 70%, rgba(176,92,58,.55) 70%);
  background-repeat: no-repeat;
  padding: 0 .05em;
}

/* Pill */
.pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .85rem;
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid var(--stone-200);
  color: var(--stone-600);
  background: white;
}
.pill .dot { width: .35rem; height: .35rem; border-radius: 999px; background: var(--coral); }
.pill-light { border: 1px solid rgba(255,255,255,.25); color: white; background: rgba(255,255,255,.12); }

/* Stats */
.stat-num {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'SOFT' 40, 'opsz' 144;
  font-size: 3rem;
  line-height: .9;
  font-weight: 400;
  letter-spacing: -0.03em;
}
@media (min-width: 768px) { .stat-num { font-size: 4rem; } }

/* Scroll reveal */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1);
}
[data-reveal].in-view { opacity: 1; transform: translateY(0); }

/* Grain overlay for hero photo */
.grain { position: relative; }
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: .5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.65'/></svg>");
}

/* Photo hover */
.photo-warm { overflow: hidden; }
.photo-warm img {
  transition: transform .9s cubic-bezier(.22,1,.36,1), filter .9s ease;
  filter: saturate(.9) contrast(1.02);
}
.photo-warm:hover img { transform: scale(1.04); filter: saturate(1) contrast(1.05); }

/* Buttons */
.btn-coral, .btn-ghost, .btn-ghost-light {
  padding: .95rem 1.9rem;
  border-radius: 999px;
  font-weight: 500;
  font-size: .88rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: all .3s ease;
}
.btn-coral { background: var(--coral); color: white; }
.btn-coral:hover { background: var(--ink); }
.btn-ghost { border: 1px solid var(--ink); color: var(--ink); background: transparent; padding: .9rem 1.9rem; }
.btn-ghost:hover { background: var(--ink); color: white; }
.btn-ghost-light { border: 1px solid white; color: white; background: transparent; padding: .9rem 1.9rem; }
.btn-ghost-light:hover { background: white; color: var(--ink); }

/* FAQ */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .faq-plus { transform: rotate(45deg); }
.faq-plus { transition: transform .3s ease; display: inline-block; }

/* Footer */
.footer-link { color: rgba(255,255,255,.6); transition: color .3s; }
.footer-link:hover { color: var(--coral); }

/* Nav */
.nav-link[data-active="true"] { color: var(--ink); }
.nav-link { color: var(--stone-500); }
.nav-link:hover { color: var(--coral); }

/* Fade in */
.fade-in { animation: fadeIn .9s ease forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* Services editorial rows */
.svc-row { border-top: 1px solid var(--stone-200); padding: 2rem 0; }
.svc-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .7rem;
  color: var(--coral);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.amenity-tile { position: relative; border-radius: 16px; overflow: hidden; background: var(--cream); }
.amenity-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.amenity-tile:hover img { transform: scale(1.03); }
.amenity-tile .cap {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: 1.25rem;
  background: linear-gradient(to top, rgba(0,0,0,.55), transparent);
  color: white;
}

/* Form inputs */
.field { position: relative; }
.field label {
  display: block;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--stone-500);
  font-weight: 600;
  margin-bottom: .5rem;
}
.field input, .field select, .field textarea {
  width: 100%;
  background: white;
  border: 1px solid var(--stone-200);
  padding: .85rem 1rem;
  border-radius: 12px;
  font-size: .95rem;
  color: var(--ink);
  font-family: inherit;
  transition: border-color .25s, box-shadow .25s;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(176,92,58,.12);
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23B05C3A' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.info-row { border-top: 1px solid var(--stone-200); padding-top: 1.5rem; }
.info-row:first-of-type { border-top: none; padding-top: 0; }
.info-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--coral);
}

/* Gallery grid */
.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  cursor: zoom-in;
  background: var(--cream);
  transition: transform .5s ease, box-shadow .5s ease;
}
.gallery-item:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -12px rgba(31,27,26,.18); }
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.22,1,.36,1);
}
.gallery-item:hover img { transform: scale(1.04); }
.gallery-item::after {
  content: "+";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--coral);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 300;
  opacity: 0;
  transform: scale(.8);
  transition: all .3s ease;
}
.gallery-item:hover::after { opacity: 1; transform: scale(1); }

/* Touch-device: show the + badge on the focused/last-tapped tile */
@media (hover: none) {
  .gallery-item::after { opacity: .85; transform: scale(1); }
}

#lightbox { transition: opacity .25s ease; }
#lightbox.open { opacity: 1; pointer-events: auto; }

/* Focus-visible for keyboard users */
.nav-link:focus-visible,
.footer-link:focus-visible,
.btn-coral:focus-visible,
.btn-ghost:focus-visible,
.btn-ghost-light:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip-to-content link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  background: var(--ink);
  color: white;
  padding: .6rem 1rem;
  border-radius: 6px;
  font-size: .85rem;
  font-weight: 500;
  z-index: 100;
  transition: top .2s ease;
}
.skip-link:focus { top: 8px; }

/* Mobile menu slide */
#mm {
  overflow: hidden;
  max-height: 0;
  transition: max-height .35s ease;
}
#mm.open { max-height: 400px; }

/* FAQ open animation */
details[open] summary ~ * { animation: faqIn .35s ease; }
@keyframes faqIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .fade-in { animation: none; }
  .photo-warm img { transition: none; }
  .photo-warm:hover img { transform: none; }
  .gallery-item, .gallery-item img, .gallery-item:hover img, .gallery-item:hover { transition: none; transform: none; }
  .grain::after { opacity: 0; }
  #mm { transition: none; }
  details[open] summary ~ * { animation: none; }
}