/* windsor.css — custom layer on top of Tailwind (things utilities don't cover) */

.nav-link { font-weight: 600; font-size: 14px; color: #232f45; white-space: nowrap; }
.nav-link:hover { color: #199fae; }
.nav-active { color: #3f63ac; font-weight: 700; border-bottom: 2px solid #3f63ac; padding-bottom: 2px; }

/* collapsed state applied by JS when scrollY > 60 */
.nav-scrolled { padding-top: .375rem !important; padding-bottom: .375rem !important; box-shadow: 0 12px 32px rgba(35,51,90,.16) !important; }
.nav-scrolled #nav-logo { height: 32px; }

/* reveal-on-scroll (JS adds .revealed) */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
[data-reveal].revealed { opacity: 1; transform: none; }

/* doctor page floating rail */
#doc-rail {
  position: fixed; left: 16px; top: calc(50% - 40px); transform: translateY(-50%);
  z-index: 55; display: none; flex-direction: column; align-items: center; gap: 10px;
  width: 56px; padding: 12px 8px; border-radius: 999px;
  background: rgba(255,252,246,.95); backdrop-filter: blur(12px);
  border: 1px solid #eae2d4; box-shadow: 0 10px 24px rgba(35,51,90,.12);
  animation: fadeIn .3s ease both;
}
#doc-rail.visible { display: flex; }
@media (max-width: 767px) { #doc-rail { top: calc(50% + 20px); } }

/* video modal */
.modal-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(20,28,48,.72); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal-card { background: #23335a; border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; width: min(860px, 100%, calc((100vh - 140px) * 16 / 9)); max-height: calc(100vh - 48px); box-shadow: 0 30px 80px rgba(0,0,0,.4); }

@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  #wave-blob1, #wave-blob2, .animate-wave1, .animate-wave2, .animate-breathe, .animate-float { animation: none !important; }
}

/* mobile icon rail buttons */
.rail-icon { width: 40px; height: 40px; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: #23335a; border: 1.5px solid transparent; transition: background .2s, border-color .2s; }
.rail-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rail-icon:hover { background: #f5ecdc; border-color: #eae2d4; }
.rail-icon-primary { background: #3f63ac; color: #fff; }
.rail-icon-primary:hover { background: #23335a; border-color: transparent; }

/* doctor rail chips */
.rail-chip { width: 40px; height: 40px; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: #23335a; background: transparent; border: 0; cursor: pointer; }
.rail-chip:hover { background: #f5ecdc; }
.rail-chip svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* testimonial carousel */
.carousel-track { display: flex; transition: transform .45s ease; }
.carousel-slide { flex: 0 0 100%; }

/* The check-in hides its radios and styles the label instead, so the focus ring has
   to be put back by hand or a keyboard user cannot see where they are. */
#quiz input[type="radio"]:focus-visible + span { outline: 3px solid #3f63ac; outline-offset: 2px; }
#quiz [data-unanswered] legend { color: #9b3832; }
#quiz [data-unanswered] legend::after { content: " — not answered yet"; font-weight: 600; }

/* prose for article bodies */
.prose-windsor { font-size: 17px; line-height: 1.75; color: #44526a; }
.prose-windsor p { margin: 0 0 1.1em; }
.prose-windsor h2, .prose-windsor h3 { font-family: "Source Serif 4", Georgia, serif; color: #23335a; margin: 1.6em 0 .6em; line-height: 1.2; }
.prose-windsor h2 { font-size: 26px; } .prose-windsor h3 { font-size: 21px; }
.prose-windsor ul, .prose-windsor ol { padding-left: 1.4em; margin: 0 0 1.1em; }
.prose-windsor a { color: #3f63ac; font-weight: 600; }

/* Everything else the article editor can produce. Each rule here matches a tag or a
   class name that content/sanitize.py allows, so nothing an editor writes can land on
   the site unstyled, and nothing styled here can be written without passing the
   sanitiser. The two lists are meant to be read together. */
.prose-windsor h4 { font-family: "Source Serif 4", Georgia, serif; color: #23335a; margin: 1.4em 0 .5em; font-size: 18px; line-height: 1.3; }
.prose-windsor li { margin: 0 0 .4em; }
.prose-windsor blockquote { margin: 1.4em 0; padding: .2em 0 .2em 1.2em; border-left: 3px solid #d5b877; color: #23335a; font-style: italic; }
.prose-windsor hr { border: 0; border-top: 1px solid #eae2d4; margin: 2em 0; }
.prose-windsor img { max-width: 100%; height: auto; border-radius: 14px; border: 1px solid #eae2d4; }
.prose-windsor figure { margin: 1.6em 0; }
.prose-windsor figcaption { margin-top: .6em; font-size: 14px; color: #5c6880; }
.prose-windsor pre { background: #fbf6ed; border: 1px solid #eae2d4; border-radius: 10px; padding: 1em; overflow-x: auto; font-size: 15px; }
.prose-windsor code { background: #f5ecdc; border-radius: 4px; padding: .1em .35em; font-size: .92em; }
.prose-windsor pre code { background: none; padding: 0; }

/* Tables can outgrow a phone, so the container scrolls rather than the page. */
/* Kept as a real table: display:block would take the rows and cells out of the
   accessibility tree, so a screen reader would read a fees table as loose text.
   A narrow screen wraps the cells instead of scrolling them. */
.prose-windsor table { width: 100%; max-width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 16px; table-layout: fixed; overflow-wrap: break-word; }
.prose-windsor caption { caption-side: top; text-align: left; font-weight: 700; color: #23335a; padding-bottom: .5em; }
.prose-windsor th, .prose-windsor td { border: 1px solid #eae2d4; padding: .6em .8em; text-align: left; vertical-align: top; }
.prose-windsor th { background: #fbf6ed; color: #23335a; font-weight: 700; }

/* Callout boxes. The label is written by CSS so an editor cannot mislabel one, and the
   three kinds are exactly the three class names the sanitiser keeps. */
.prose-windsor aside { margin: 1.6em 0; padding: 1.1em 1.3em; border-radius: 14px; border-left: 4px solid; }
.prose-windsor aside::before { display: block; margin-bottom: .4em; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.prose-windsor aside > :last-child { margin-bottom: 0; }
.prose-windsor aside.note { background: #f3fafb; border-color: #199fae; }
.prose-windsor aside.note::before { content: "Worth knowing"; color: #126e78; }
.prose-windsor aside.warning { background: #fdf2f1; border-color: #b3413a; }
.prose-windsor aside.warning::before { content: "Please note"; color: #9b3832; }
.prose-windsor aside.key-points { background: #fbf6ed; border-color: #9a6520; }
.prose-windsor aside.key-points::before { content: "Key points"; color: #7d5319; }
/* An aside the sanitiser stripped the class from still has to read as a box. */
.prose-windsor aside:not(.note):not(.warning):not(.key-points) { background: #fbf6ed; border-color: #d4dae5; }

/* Alignment, as the editor writes it. */
.prose-windsor .ql-align-center { text-align: center; }
.prose-windsor .ql-align-right { text-align: right; }
.prose-windsor .ql-align-justify { text-align: justify; }