/* ==========================================================================
   Replay Ortho — Dr. Aruna Seneviratne, MD
   Design tokens originally taken from the client's supplied prototypes
   (brief section 6): court blue with an optic-yellow accent.
   Accent later swapped to the logo's brand red — the --optic variable name
   is unchanged to avoid touching every reference, but it now holds red.
   Archivo (wide grotesque) for headings, Source Serif 4 for body, because
   these pages carry long explanatory passages read by anxious patients.
   ========================================================================== */

:root{
  --ink:#0A1B2E;
  --court:#134A87;
  --court-deep:#0D3462;
  --optic:#DD221B; /* brand red, sampled from replay-ortho-logo.png */
  --paper:#FBFAF6;
  --mist:#E7ECF1;
  --line:#D3DBE4;
  --muted:#5B6879;
  --white:#fff;
  --warn:#8A4B00;
  --warn-bg:#FFF4E0;

  --display:'Archivo',system-ui,-apple-system,sans-serif;
  --body:'Source Serif 4',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  --pad:clamp(20px,5vw,72px);
  --maxw:1240px;
  --measure:78ch;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  /* room for the fixed mobile call/book bar */
  padding-bottom:0;
}

img{max-width:100%;display:block;height:auto}
a{color:var(--court)}
a:hover{color:var(--court-deep)}

/* Brief item 25 — visible keyboard focus, WCAG 2.1 AA */
:focus-visible{outline:3px solid var(--court);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);
  padding:12px 18px;z-index:200;font-family:var(--display);font-weight:600;
}
.skip-link:focus{left:0}

/* --------------------------------------------------------------- Typography */
/* Brief item 19: the old site had no H1 on any page. The first heading was an
   H2 containing a telephone number and body copy started at H3. Exactly one H1
   per page here, carrying the page subject. */

h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.08;letter-spacing:-.02em}
h1{font-size:clamp(34px,5.4vw,64px);font-stretch:112%;letter-spacing:-.03em;margin-bottom:.4em}

/* Every page except the homepage renders its H1 through this class (see
   layouts/app.blade.php). 64px reads right as a homepage statement headline
   but was too dominant sitting alone at the top of a plain inner page with
   little beneath it — a rotator-cuff-repair page title doesn't need to be
   the same scale as "Back to what you were doing before you got hurt." */
.page-h1{font-size:clamp(24px,2.6vw,32px);max-width:none}

/* Body-text blocks (procedure explanations, bios, review lists) were capped
   to a readable line length, which on a wide screen left a large dead zone
   on the right of the page. Centering them would misalign against the
   headings above, which are left-set like everything else on the site — so
   the fix is a wider measure instead, not a different alignment. */
.prose{max-width:none}
/* No width cap: spans the full .wrap content area, per direct request.
   Genuinely long lines (>90-100 characters) read worse for extended prose,
   which is why this was capped originally — but that's a call the client
   gets to make about their own site, and it's been asked for twice now. */
h2{font-size:clamp(21px,2.2vw,28px);font-stretch:108%;margin-bottom:.5em}
h3{font-size:21px;letter-spacing:-.01em;margin-bottom:.5em}
h4{font-size:17px;margin-bottom:.4em}

p{margin-bottom:1em}
p:last-child{margin-bottom:0}

.lede{font-size:20px;color:#2A3B4E;max-width:none}

.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);display:block;margin-bottom:10px;
}

/* ------------------------------------------------------------------ Buttons */

.btn{
  font-family:var(--display);font-weight:700;font-size:15px;
  text-decoration:none;padding:12px 22px;border-radius:2px;
  display:inline-block;border:none;cursor:pointer;
  transition:background .15s ease,transform .15s ease,color .15s ease;
}
.btn-solid{background:var(--court);color:var(--white)}
.btn-solid:hover{background:var(--court-deep);color:var(--white)}
.btn-optic{background:var(--optic);color:var(--white)}
.btn-optic:hover{transform:translateY(-2px);color:var(--white)}
.btn-ghost{border:1.5px solid var(--ink);color:var(--ink);background:none}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}

/* ------------------------------------------------------------------- Header */

.topbar{background:var(--ink);color:#C9D6E4;font-family:var(--mono);font-size:12px}
.topbar .wrap{display:flex;gap:24px;justify-content:flex-end;padding-top:9px;padding-bottom:9px;flex-wrap:wrap}
.topbar a{text-decoration:none;color:#C9D6E4}
.topbar a:hover{color:var(--optic)}

header.site{
  position:sticky;top:0;z-index:60;background:rgba(251,250,246,.95);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
header.site .wrap{display:flex;align-items:center;gap:26px;padding-top:14px;padding-bottom:14px}

.brand{display:block;text-decoration:none;line-height:0;flex-shrink:0}
.brand img{height:52px;width:auto;display:block}
@media (max-width:760px){.brand img{height:42px}}

nav.main{margin-left:auto;display:flex;gap:22px;align-items:center}
nav.main a:not(.btn){
  font-family:var(--display);font-weight:600;font-size:14.5px;text-decoration:none;
  color:var(--ink);padding:6px 0;border-bottom:2px solid transparent;
}
nav.main a:not(.btn):hover,nav.main a:not(.btn)[aria-current="page"]{border-bottom-color:var(--optic)}

/* The book-appointment link is a real button living inside the nav list, not
   a nav link — nav.main's own link rules were previously winning on
   specificity and squashing its padding down to a thin strip. */
nav.main a.btn{margin-left:6px}

.menu-toggle{
  display:none;margin-left:auto;background:none;border:1.5px solid var(--ink);
  border-radius:2px;font-family:var(--mono);font-size:12px;padding:9px 13px;
  cursor:pointer;text-transform:uppercase;letter-spacing:.1em;
}

/* --------------------------------------------------------------- Credentials */
/* Brief section 6: "Ten award JPEGs stacked on a homepage read as insecurity.
   The same information set typographically reads as authority." */

.creds{background:var(--ink);color:#DDE7F0}
.creds .wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;padding-top:0;padding-bottom:0}
.cred{padding:22px 18px 24px;border-left:1px solid rgba(255,255,255,.12)}
.cred:first-child{border-left:0}
.cred b{display:block;font-family:var(--display);font-weight:700;font-size:15px;margin-bottom:5px}
.cred span{font-family:var(--mono);font-size:11px;line-height:1.5;color:#93A8BE;display:block}

/* ----------------------------------------------------------------- Sections */

section{padding:clamp(52px,6.5vw,92px) 0}
section.tight{padding:clamp(24px,2.6vw,36px) 0}

/* The layout's default page heading (.page-hero) is immediately followed by
   that page's own first section, on every inner page site-wide. Whatever
   class that next section has — .tight, full padding, or none — its own
   top padding was stacking on top of the hero's bottom padding, producing
   up to ~150px of dead space between a heading and the text under it on
   some pages and ~110px on others, depending on which classes happened to
   collide. This targets the actual seam directly, so it's fixed uniformly
   everywhere rather than page by page, and spacing further down any page
   (where two full sections deliberately sit next to each other) is
   untouched. */
section.tight.page-hero{padding-bottom:0}
.page-hero + section.tight{padding-top:0}
.page-hero + section{padding-top:0}
.section-head{max-width:60ch;margin-bottom:36px}
.section-head p{color:var(--muted);font-size:18px}

.band-ink{background:var(--ink);color:#E4ECF4}
.band-ink h2,.band-ink h3{color:var(--white)}
/* Plain links on the dark band get the yellow accent for contrast — but a
   .btn living in here already sets its own text color (e.g. dark ink text
   on a yellow .btn-optic background), and this rule was winning on
   specificity and overwriting it with yellow-on-yellow, invisible text. */
.band-ink a:not(.btn){color:var(--optic)}
.band-mist{background:var(--mist)}

/* --------------------------------------------------------- Region picker */

.regions{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.region{
  background:var(--white);border:1px solid var(--line);border-radius:3px;
  padding:24px 22px 26px;text-decoration:none;display:block;color:var(--ink);
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.region:hover{border-color:var(--court);transform:translateY(-3px);box-shadow:0 10px 30px rgba(10,27,46,.09);color:var(--ink)}
.region h3{margin-bottom:6px}
.region p{font-size:15px;color:var(--muted);margin:0}

/* ------------------------------------------------------- Symptom triage */
/* Brief section 5.2: patients search by symptom, the old site was organised
   by procedure name. */

.symptoms{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.symptom{
  display:flex;align-items:center;gap:14px;background:var(--white);
  border:1px solid var(--line);border-left:4px solid var(--optic);
  padding:18px 20px;text-decoration:none;color:var(--ink);border-radius:2px;
  font-size:16.5px;transition:border-left-color .18s ease,background .18s ease;
}
.symptom:hover{border-left-color:var(--court);background:#F5F8FB;color:var(--ink)}

/* ------------------------------------------------------- Procedure lists */

.proc-group{margin-bottom:34px}
.proc-group h3{padding-bottom:8px;border-bottom:2px solid var(--ink);margin-bottom:14px}
.proc-list{list-style:none}
.proc-list li{border-bottom:1px solid var(--line)}
.proc-list a{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:13px 2px;text-decoration:none;color:var(--ink);
}
.proc-list a:hover{color:var(--court)}
.proc-list .sub{font-family:var(--mono);font-size:11px;color:var(--muted);flex-shrink:0}

/* --------------------------------------------------------------- Documents */

.doc-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:10px}
.doc-list a{
  display:flex;align-items:center;gap:12px;background:var(--white);
  border:1px solid var(--line);padding:14px 16px;text-decoration:none;
  color:var(--ink);border-radius:2px;font-size:16px;
}
.doc-list a:hover{border-color:var(--court);color:var(--court)}
.doc-list .meta{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--muted)}

/* ------------------------------------------------------------------ Video */

.video-item{margin-bottom:44px;max-width:820px}
.video-item h3{margin-bottom:10px}
.video-item video{width:100%;border-radius:2px;background:#000}
.consent-note{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:8px;letter-spacing:.04em}

/* YouTube facade — no iframe until clicked (brief 5.3 performance budget) */
.yt-facade{
  position:relative;aspect-ratio:16/9;background:var(--ink) center/cover no-repeat;
  border:none;width:100%;cursor:pointer;border-radius:2px;display:block;
}
.yt-facade::after{
  content:'';position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);
  width:68px;height:48px;background:var(--optic);border-radius:8px;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
}
.yt-facade span{
  position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);
  z-index:2;font-family:var(--display);font-weight:700;color:var(--ink);font-size:14px;
}

/* ------------------------------------------------------------------ Notices */

.notice{
  background:var(--warn-bg);border-left:4px solid var(--warn);
  padding:18px 22px;margin:24px 0;max-width:var(--measure);border-radius:2px;
}
.notice b{font-family:var(--display)}

/* -------------------------------------------------------------------- Forms */

.field{margin-bottom:18px;max-width:560px}
.field label{display:block;font-family:var(--display);font-weight:600;font-size:14.5px;margin-bottom:6px}
.field input,.field textarea,.field select{
  width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:2px;
  font-family:var(--body);font-size:16px;background:var(--white);color:var(--ink);
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--court);outline:none}
.field .hint{font-size:14px;color:var(--muted);margin-top:5px}
.field .error{color:#B3261E;font-size:14px;margin-top:5px}

/* ------------------------------------------------------------------- Footer */

footer.site{background:var(--ink);color:#B9C8D8;padding:56px 0 28px;font-size:15.5px}
footer.site h4{color:var(--white);font-size:14px;margin-bottom:12px}
footer.site a{color:#B9C8D8;text-decoration:none}
footer.site a:hover{color:var(--optic)}
/* Explicit 5 columns rather than auto-fit — there are always exactly 5
   footer groups (Manhattan, Brooklyn, Contact, Patients, Practice), and
   auto-fit's minmax(220px,1fr) needed more width than the footer has,
   which silently wrapped the 5th column onto its own row. */
.foot-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:32px;margin-bottom:40px}
.foot-grid ul{list-style:none}
.foot-grid li{margin-bottom:7px}
@media (max-width:960px){
  .foot-grid{grid-template-columns:repeat(3,1fr);row-gap:36px}
}
@media (max-width:600px){
  .foot-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:420px){
  .foot-grid{grid-template-columns:1fr}
}
.foot-bottom{
  border-top:1px solid rgba(255,255,255,.14);padding-top:20px;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11.5px;color:#8FA3B8;
}

/* ------------------------------------------------ Fixed mobile call/book bar */
/* Brief section 6: "The majority of patients searching for an orthopedic
   surgeon are on a phone and in pain." */

.mobile-bar{display:none}

/* --------------------------------------------------------------- Responsive */

@media (max-width:960px){
  .creds .wrap{grid-template-columns:repeat(2,1fr)}
  .cred{border-left:0;border-top:1px solid rgba(255,255,255,.12)}
  .regions{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:760px){
  .topbar{display:none}
  .menu-toggle{display:block}
  nav.main{
    display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);
    border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;
    gap:0;padding:8px var(--pad) 18px;
  }
  nav.main.open{display:flex}
  nav.main a:not(.btn){padding:13px 0;border-bottom:1px solid var(--line)}
  nav.main a.btn{margin:14px 0 4px;text-align:center}
  header.site .wrap{position:relative}

  body{padding-bottom:68px}
  .mobile-bar{
    display:grid;grid-template-columns:1fr 1fr;position:fixed;bottom:0;left:0;right:0;
    z-index:100;border-top:1px solid rgba(0,0,0,.12);
  }
  .mobile-bar a{
    padding:18px 10px;text-align:center;font-family:var(--display);font-weight:700;
    font-size:15px;text-decoration:none;
  }
  .mobile-bar .call{background:var(--ink);color:var(--paper)}
  .mobile-bar .book{background:var(--optic);color:var(--white)}
}

@media (max-width:520px){
  .regions{grid-template-columns:1fr}
  .creds .wrap{grid-template-columns:1fr}
}

/* ------------------------------------------------------------------- Print */

@media print{
  .topbar,nav.main,.mobile-bar,.menu-toggle,footer.site{display:none}
  body{background:#fff;font-size:12pt}
}

/* ---------------------------------------------------------------- Hero ---- */
.hero{padding:clamp(44px,6vw,84px) 0 clamp(34px,5vw,58px);border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,68px);align-items:center}
.hero h1{margin:14px 0 18px;max-width:14ch}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.hero-portrait{position:relative}
.hero-portrait img{border-radius:3px;width:100%}
@media (max-width:760px){
  .hero .wrap{grid-template-columns:1fr}
  .hero h1{max-width:none}
}
figure{margin:0}

/* Consistent frame for photographic images — brief feedback: photos looked
   bland and unbordered next to the flat design elsewhere on the page. */
.hero-portrait img,
.split img,
.gallery-slide img,
.region img.photo{
  border:3px solid var(--ink);
  border-radius:16px;
  box-shadow:0 3px 10px rgba(10,27,46,.12);
}

/* --------------------------------------------------------- Split content -- */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,64px);align-items:center}
@media (max-width:760px){.split{grid-template-columns:1fr}}

.sport-list{list-style:none;columns:2;gap:30px;max-width:54ch;margin-top:18px}
.sport-list li{break-inside:avoid;padding:5px 0;border-bottom:1px solid var(--line)}
.sport-list small{display:block;font-family:var(--mono);font-size:11px;color:var(--muted)}

/* ------------------------------------------------------------- Badge row -- */
.badge-row{
  list-style:none;display:flex;align-items:center;
  justify-content:space-between;flex-wrap:wrap;gap:32px 24px;
}
.badge-row li{flex:1 1 180px;display:flex;justify-content:center}
.badge-row img{height:84px;width:auto;max-width:100%;filter:saturate(.9)}
.badge-row a:hover img{filter:none}
@media (max-width:700px){
  .badge-row img{height:64px}
}

/* ------------------------------------------------------------ Slideshow --- */
/* One slide visible at a time, auto-advancing on a timer, with prev/next
   arrows that also reset the timer so a manual click doesn't immediately
   get overridden by the next auto-advance. */
.slideshow{position:relative;max-width:640px;margin:0 auto}
.slideshow-viewport{overflow:hidden;border-radius:16px}
.slideshow-track{display:flex;transition:transform .5s ease}
.slideshow-slide{flex:0 0 100%;width:100%}

.slideshow-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
  background:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:700;font-size:18px;color:var(--ink);
  box-shadow:0 2px 8px rgba(10,27,46,.15);
}
.slideshow-nav:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.slideshow-nav.prev{left:-20px}
.slideshow-nav.next{right:-20px}
@media (max-width:700px){
  .slideshow-nav.prev{left:6px}
  .slideshow-nav.next{right:6px}
}

.slideshow-dots{display:flex;gap:8px;justify-content:center;margin-top:14px}
.slideshow-dots button{
  width:8px;height:8px;border-radius:50%;border:none;background:var(--line);
  padding:0;cursor:pointer;
}
.slideshow-dots button[aria-current="true"]{background:var(--court)}

/* Gallery slides ------------------------------------------------------------ */
.gallery-slide figcaption{font-size:14px;color:var(--muted);margin-top:12px;text-align:center;min-height:2.6em}

/* Review slides -------------------------------------------------------------- */
.review-slide{
  background:var(--white);border:3px solid var(--ink);border-radius:16px;
  padding:30px 28px;min-height:200px;display:flex;flex-direction:column;justify-content:center;
  box-shadow:0 3px 10px rgba(10,27,46,.12);
}
.review-slide::before{
  content:'"';font-family:var(--display);font-size:52px;line-height:1;
  color:var(--optic);-webkit-text-stroke:1px var(--ink);display:block;margin-bottom:4px;
}
.review-slide p{font-size:16px;color:var(--ink);margin-bottom:18px}
.review-slide footer{font-family:var(--mono);font-size:11.5px;color:var(--muted);letter-spacing:.02em}