/* ============================================================
   AR Multispecialty Clinic — BP-C03
   Custom styles supplementing Tailwind CDN
   ============================================================ */

/* ---- BASE ---- */
/* Keep anchor jumps and focused fields clear of the fixed navbar (68px) */
html { scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
main:focus { outline: none; } /* skip-link target */

/* ---- SKIP LINK ---- */
.skip-link {
  position: fixed;
  top: .5rem;
  left: .5rem;
  z-index: 100;
  padding: .6rem 1rem;
  border-radius: .5rem;
  background: #0f766e;
  color: #fff;
  font-size: .875rem;
  font-weight: 600;
  transform: translateY(-200%);
  transition: transform .2s ease;
}
.skip-link:focus { transform: none; }

/* ---- EMERGENCY STRIP ---- */
#emergencyStrip {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 45; /* below #navbar (50): the navbar slides over the strip on scroll */
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 .75rem;
  white-space: nowrap;
  overflow: hidden;
  background: #dc2626;
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
}

/* ---- NAVBAR ---- */
#navbar {
  position: fixed;
  top: 36px; /* sits below the emergency strip */
  left: 0;
  right: 0;
  z-index: 50;
  height: 68px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
  transition: top .3s ease, box-shadow .3s ease;
}
/* when page is scrolled past the strip */
#navbar.compact {
  top: 0;
  box-shadow: 0 2px 16px rgba(0,0,0,.10);
}

#mobileMenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
}
#mobileMenu.open { display: flex; }

/* Active nav link */
a.nav-link.active { color: #0f766e; font-weight: 700; }

/* ---- SCROLL REVEAL ---- */
/* Only hidden once JS has flagged <html class="js">, so content is never
   stuck invisible without it. :where() keeps specificity at the original
   level so card hover transitions below still win. */
:where(.js) [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .55s ease, transform .55s ease;
}
:where(.js) [data-reveal][data-delay="1"] { transition-delay: .10s; }
:where(.js) [data-reveal][data-delay="2"] { transition-delay: .20s; }
:where(.js) [data-reveal][data-delay="3"] { transition-delay: .30s; }
:where(.js) [data-reveal][data-delay="4"] { transition-delay: .40s; }
:where(.js) [data-reveal].revealed       { opacity: 1; transform: none; }

/* ---- STAT NUMBERS ---- */
.stat-num {
  font-size: 2.5rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ---- SERVICE CARD ---- */
.svc-card {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.svc-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 36px rgba(15,118,110,.13);
  border-color: #0d9488;
}
.svc-icon {
  transition: background .22s ease, color .22s ease;
}
.svc-card:hover .svc-icon {
  background: #0f766e !important;
  color: #fff !important;
}

/* ---- DOCTOR CARD ---- */
.doctor-card {
  transition: transform .25s ease, box-shadow .25s ease;
}
.doctor-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(15,118,110,.15);
}
.dr-photo {
  transition: transform .4s ease;
}
.doctor-card:hover .dr-photo { transform: scale(1.04); }

/* ---- FILTER TABS ---- */
/* Single scrolling row on phones so the sticky bar stays slim */
.filter-scroll { scrollbar-width: none; }
.filter-scroll::-webkit-scrollbar { display: none; }
/* Filtered blocks (service sections / doctor cards) stop below navbar + filter bar */
.filterable { scroll-margin-top: 3.75rem; }

.filter-tab {
  flex-shrink: 0;
  padding: .45rem 1.1rem;
  border-radius: 9999px;
  font-size: .8rem;
  font-weight: 600;
  border: 1.5px solid #e2e8f0;
  color: #475569;
  background: #fff;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}
.filter-tab:hover                { border-color: #0d9488; color: #0f766e; }
.filter-tab.active               { background: #0f766e; border-color: #0f766e; color: #fff; }

/* ---- TIME SLOTS ---- */
.time-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .5rem .25rem;
  border-radius: .5rem;
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1.5px solid #e2e8f0;
  color: #475569;
  background: #f8fafc;
  cursor: pointer;
  transition: all .18s;
  text-align: center;
}
.time-slot:hover   { border-color: #0d9488; color: #0f766e; background: #f0fdfa; }
.time-slot.selected{ background: #0f766e; border-color: #0f766e; color: #fff; }

/* ---- FAQ ---- */
/* Collapsed only when JS is running; main.js sets max-height to the
   panel's real height, and visibility drops closed answers out of the
   tab order / accessibility tree. */
:where(.js) .faq-answer {
  max-height: 0;
  overflow: hidden;
  padding-bottom: 0;
  visibility: hidden;
  transition: max-height .35s ease, padding-bottom .35s ease, visibility 0s linear .35s;
}
:where(.js) .faq-item.open .faq-answer {
  padding-bottom: 1.2rem;
  visibility: visible;
  transition-delay: 0s;
}
.faq-icon { transition: transform .25s ease; }
.faq-item.open .faq-icon { transform: rotate(45deg); }

/* ---- FORM ---- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea {
  outline: none;
  border: 1.5px solid #e2e8f0;
  border-radius: .5rem;
  transition: border-color .2s, box-shadow .2s;
}
input::placeholder,
textarea::placeholder { color: #64748b; opacity: 1; } /* slate-500, 4.7:1 on white */
input:focus, select:focus, textarea:focus {
  border-color: #0d9488;
  box-shadow: 0 0 0 3px rgba(13,148,136,.12);
}
.field-error { border-color: #ef4444 !important; }
.form-error  { font-size: .73rem; color: #dc2626; margin-top: .3rem; display: none; }
.field-error ~ .form-error { display: block; }
#formSuccess:focus { outline: none; } /* focused on submit for screen readers only */

/* ---- STEP FORM indicator ---- */
.step-dot {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  border: 2px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  font-weight: 700;
  background: #fff;
  color: #94a3b8;
  transition: all .3s;
  position: relative;
  z-index: 1;
}
.step-dot.done   { background: #0f766e; border-color: #0f766e; color: #fff; }
.step-dot.active { background: #fff; border-color: #0f766e; color: #0f766e; }

/* ---- SPECIALTY BADGE ---- */
.spec-badge {
  display: inline-block;
  padding: .2rem .65rem;
  border-radius: 9999px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ---- SPECIALTY BADGE LARGE ---- */
.spec-badge-lg {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .9rem;
  border-radius: 9999px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* ---- PAGE HERO offset (emergency strip + navbar) ---- */
.page-hero-padding { padding-top: calc(36px + 68px + 2rem); }

/* ---- REDUCED MOTION ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  :where(.js) [data-reveal] { opacity: 1; transform: none; }
}

/* ---- PRINT ---- */
@media print {
  #emergencyStrip, #navbar, .skip-link { display: none !important; }
  .page-hero-padding { padding-top: 1rem; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}