/* ==========================================================================
   Summit Neuro, custom styles
   Design system modeled on a modern Tailwind clinic theme.
   Palette: primary #0B0B0D (navy), gold #C9A24B, sky #5DADE2, tertiary #CFF4FF, secondary #D33414, cream #FCF4E9
   Fonts: Montserrat (sans) + Lora (serif italic accents)
   ========================================================================== */

:root {
  --primary: #0B0B0D;
  --primary-soft: #0A1A33;
  --gold: #C9A24B;
  --sky: #5DADE2;
  --tertiary: #CFF4FF;
  --secondary: #D33414;
  --cream: #FCF4E9;
}

html { scroll-behavior: smooth; }
body { background-color: #fff; color: var(--primary); }

.font-montserrat { font-family: 'Montserrat', system-ui, sans-serif; }
.font-lora { font-family: 'Lora', Georgia, serif; }

/* ---------- Header ---------- */
.site-header {
  transition: background-color .3s ease, box-shadow .3s ease, margin .3s ease, width .3s ease, border-radius .3s ease;
}
.site-header.scrolled {
  background-color: #FCF4E9 !important;
  box-shadow: 0 10px 30px -12px rgba(11,11,13,.25);
}

/* Dropdown */
.nav-dropdown > .dropdown-panel {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
  pointer-events: none;
}
.nav-dropdown:hover > .dropdown-panel,
.nav-dropdown:focus-within > .dropdown-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.nav-link { position: relative; }
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 0; height: 2px;
  background: var(--gold);
  transition: width .3s ease;
}
.nav-link:hover::after { width: 100%; }

/* Mobile menu */
#mobile-menu {
  transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .3s ease;
  transform: translateX(100%);
}
#mobile-menu.open { transform: translateX(0); }
.mobile-sub { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.mobile-sub.open { max-height: 320px; }

/* ---------- Hero ---------- */
.hero-overlay {
  background: linear-gradient(90deg, rgba(11,11,13,.96) 0%, rgba(11,11,13,.82) 38%, rgba(11,11,13,.45) 70%, rgba(11,11,13,.25) 100%);
}

/* ---------- Service cards ---------- */
.service-card .default-overlay { transition: opacity .5s ease; }
.service-card .hover-overlay { opacity: 0; transition: opacity .5s ease; }
.service-card .hover-content { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.service-card:hover .default-overlay { opacity: 0; }
.service-card:hover .default-content { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.service-card:hover .hover-overlay { opacity: 1; }
.service-card:hover .hover-content { opacity: 1; transform: translateY(0); }

/* ---------- Accordion ---------- */
.accordion-item .accordion-body { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.accordion-item.active .accordion-body { max-height: 600px; }
.accordion-item.active .accordion-icon { transform: rotate(45deg); }
.accordion-icon { transition: transform .3s ease; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ---------- Typewriter cursor ---------- */
.tw-cursor { display:inline-block; margin-left:2px; animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Misc ---------- */
.text-balance { text-wrap: balance; }
.float-cta {
  box-shadow: 0 12px 28px -8px rgba(211,52,20,.6);
}
.condition-pill { transition: background-color .25s ease, color .25s ease, transform .25s ease; }
.condition-pill:hover { transform: translateY(-2px); }

/* keep dropdown bridge so hover doesn't drop */
.nav-dropdown > .dropdown-panel::before {
  content: "";
  position: absolute;
  top: -16px; left: 0; right: 0; height: 16px;
}

/* ---------- FAQ accordion ---------- */
/* <details> carries its own disclosure triangle, which duplicates the plus icon
   the design already draws. list-style covers Firefox; the pseudo-element is
   WebKit's separate marker. */
.faq-item > summary { list-style: none; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::marker { content: ""; }
.faq-item > summary:focus-visible {
  outline: 2px solid rgb(var(--sn-gold, 201 162 75));
  outline-offset: 4px;
  border-radius: 8px;
}
/* Answers are in the DOM whether or not the panel is open, so they are animated
   rather than mounted. prefers-reduced-motion turns the movement off but leaves
   the disclosure working. */
.faq-item[open] > .faq-answer { animation: sn-faq-open .35s ease; }
@keyframes sn-faq-open {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .faq-item[open] > .faq-answer { animation: none; }
}

/* ---------- In-copy internal links ---------- */
/* Added by tools/apply-seo.php. Colour is inherited so the same rule works in
   dark bands and light ones; only the underline marks it as a link. */
.sn-seo-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgb(var(--sn-gold, 201 162 75) / 0.6);
  text-underline-offset: 3px;
  transition: color .2s ease, text-decoration-color .2s ease;
}
.sn-seo-link:hover,
.sn-seo-link:focus-visible {
  color: rgb(var(--sn-gold, 201 162 75));
  text-decoration-color: rgb(var(--sn-gold, 201 162 75));
}

/* ---------- Appointment date field ---------- */
/* The text input is what submits, so it keeps the form's field styling. The
   native picker beside it exists only to be opened by the button, and is placed
   under the button rather than display:none so the browser will still anchor
   its calendar popover to the right spot. */
.sn-date-field { position: relative; display: block; }
.sn-date-field > input { width: 100%; padding-right: 3rem; }
.sn-date-native {
  position: absolute;
  right: 0.75rem;
  bottom: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.sn-date-open {
  position: absolute;
  top: 50%;
  right: 0.35rem;
  transform: translateY(-50%);
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: rgb(var(--sn-primary, 11 11 13) / 0.55);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.sn-date-open:hover { background: rgb(var(--sn-gold, 201 162 75) / 0.15); color: rgb(var(--sn-primary, 11 11 13)); }
.sn-date-open:focus-visible {
  outline: 2px solid rgb(var(--sn-gold, 201 162 75));
  outline-offset: 2px;
}