/* ==========================================================================
   TIME Orthopedics — Components
   Masthead, buttons, tabs, cards, portraits, call bar, footer.

   Geometry note: everything here is rectangular. No pills, no circular
   discs, no ring motifs.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Logo
   The wordmark is the clinic's registered artwork, used as supplied. It is
   white with a lime accent, so it only ever sits on an indigo ground.
   -------------------------------------------------------------------------- */

.brand { display: inline-flex; align-items: center; flex: none; }

/* The phone size only — both rules below take over from 700px up, so the
   tablet and desktop marks are unaffected. */
.brand__img {
  height: 3.4rem;
  width: auto;
}

@media (min-width: 700px)  { .brand__img { height: 3.9rem; } }
@media (min-width: 1100px) { .brand__img { height: 4.5rem; } }

/* --------------------------------------------------------------------------
   Masthead
   A solid indigo bar. The only purple surface on the site, alongside the
   footer that closes it.
   -------------------------------------------------------------------------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  background: var(--indigo);
  transition: box-shadow var(--dur-mid) var(--ease-out);
}

.nav.is-stuck { box-shadow: 0 1px 0 rgba(0,0,0,.12), 0 8px 24px -16px rgba(25,18,51,.5); }

.nav__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  height: var(--nav-h);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  list-style: none;
  padding: 0;
  margin-inline-start: auto;
}

.nav__links a {
  display: inline-block;
  font-size: var(--step-0);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--text-on-dark-mute);
  padding-block: var(--sp-3);
  position: relative;
  transition: color var(--dur-fast) var(--ease-out);
}

.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-mid) var(--ease-out);
}

.nav__links a:hover,
.nav__links a[aria-current="page"] { color: var(--white); }

.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }

/* Mobile menu toggle — a square control, not a chip */
.nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin-inline-start: auto;
  padding: var(--sp-3) var(--sp-4);
  background: transparent;
  border: 1px solid var(--line-on-dark);
  border-radius: var(--r-sm);
  color: var(--white);
  font-size: var(--step--1);
  font-weight: 500;
  cursor: pointer;
}

.nav__toggle-bars { display: grid; gap: 3px; width: 15px; }

.nav__toggle-bars span {
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}

.nav__toggle[aria-expanded="true"] .nav__toggle-bars span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars span:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }

@media (max-width: 979px) {
  .nav__links {
    position: fixed;
    inset: var(--nav-h) 0 0 0;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--sp-2);
    margin: 0;
    padding: var(--sp-7) var(--gutter);
    background: var(--indigo);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.75rem);
    transition: opacity var(--dur-mid) var(--ease-out),
                transform var(--dur-mid) var(--ease-out),
                visibility var(--dur-mid);
  }

  .nav__links.is-open { opacity: 1; visibility: visible; transform: none; }

  .nav__links a {
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: 700;
    letter-spacing: var(--tracking-display);
    color: var(--white);
  }

  .nav .btn--nav { display: none; }
}

@media (min-width: 980px) { .nav__toggle { display: none; } }

/* --------------------------------------------------------------------------
   Buttons — rectangular
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: 0.95rem var(--sp-6);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.btn__ico { width: 1.05em; height: 1.05em; flex: none; }

/* Primary on light grounds */
.btn--primary {
  background: var(--indigo);
  color: var(--white);
}

.btn--primary:hover { background: var(--indigo-deep); }

/* Secondary on light grounds */
.btn--outline {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--text);
}

.btn--outline:hover { border-color: var(--indigo); color: var(--indigo); }

/* On the indigo masthead and footer */
.btn--nav {
  background: var(--lime);
  color: var(--indigo-dark);
  padding: 0.9rem var(--sp-6);
  font-size: var(--step-0);
}

.btn--nav:hover { background: #E4EC3C; }

.btn--on-dark {
  background: var(--lime);
  color: var(--indigo-dark);
}

.btn--on-dark:hover { background: #E4EC3C; }

.btn--ghost-dark {
  background: transparent;
  border-color: var(--line-on-dark);
  color: var(--white);
}

.btn--ghost-dark:hover { border-color: var(--white); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
}

/* --------------------------------------------------------------------------
   Contact picker

   Three clinics on two numbers, so a button that says "Call now" or
   "Contact us" asks which rather than guessing. Buttons that state a number
   still dial it directly.

   Deliberately small: one row per destination, label left, number right.
   main.js decides whether it opens up or down from the available space and
   caps its height, so it can never open off the top of the screen.
   -------------------------------------------------------------------------- */

.callpick { position: relative; flex: none; }

.callpick__chev { transition: transform var(--dur-fast) var(--ease-out); }
[aria-expanded="true"] .callpick__chev { transform: rotate(180deg); }

.callpick__menu {
  position: absolute;
  z-index: var(--z-nav);
  width: max-content;
  min-width: 15rem;
  max-width: min(22rem, calc(100vw - 2rem));
  padding: var(--sp-2);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  text-align: left;
  overflow-y: auto;
  /* This panel also opens inside the indigo band, so it sets its own text
     colour rather than inheriting white from the section. */
  color: var(--text);
}

.callpick__menu[hidden] { display: none; }

/* Direction is set by main.js from the room actually available. */
.callpick--down .callpick__menu { top: calc(100% + 0.5rem); bottom: auto; }
.callpick--up   .callpick__menu { bottom: calc(100% + 0.5rem); top: auto; }

/* Aligned to whichever edge keeps it on screen. */
.callpick--end   .callpick__menu { right: 0; left: auto; translate: none; }
.callpick--start .callpick__menu { left: 0; right: auto; translate: none; }
.callpick--mid   .callpick__menu { left: 50%; right: auto; translate: -50% 0; }

.callpick__menu ul { list-style: none; padding: 0; margin: 0; }

.callpick__menu a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: 0.6rem var(--sp-4);
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--text-muted);
  font-size: var(--step--1);
  line-height: 1.4;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out);
}

.callpick__menu a:hover { background: var(--paper); }

.callpick__menu a b {
  font-weight: 600;
  color: var(--indigo);
  font-variant-numeric: tabular-nums;
}

/* The email is longer than the numbers; let it wrap rather than force the
   whole panel wider. */
.callpick__menu li:last-child a { white-space: normal; }
.callpick__menu li:last-child b { word-break: break-all; text-align: right; }

.callpick__menu li + li { border-top: 1px solid var(--line); }

/* --------------------------------------------------------------------------
   Tabs — the squared replacement for anchor chips
   -------------------------------------------------------------------------- */

.tabs {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: var(--sp-6);
}

.tab {
  display: inline-block;
  padding: var(--sp-4) 0;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.tab:hover { color: var(--text); }

.tab.is-active,
.tab[aria-current="true"] {
  color: var(--indigo);
  border-bottom-color: var(--indigo);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card {
  padding: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  transition: border-color var(--dur-mid) var(--ease-out);
}

.card:hover { border-color: var(--line-strong); }

.card__num {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--indigo);
  letter-spacing: var(--tracking-tight);
}

.card__title { margin-block: var(--sp-4) var(--sp-3); }
.card__body { color: var(--text-muted); }

.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

/* --------------------------------------------------------------------------
   Provider portraits
   Shown in their natural colour, as supplied. A consistent crop, frame and
   caption is what holds the set together instead of a colour treatment.
   -------------------------------------------------------------------------- */

.portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--paper-2);
}

.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 16%;
  transition: transform var(--dur-slow) var(--ease-out);
}

/* Only enough of a gradient at the foot of the card to seat white caption
   text — the photograph itself is left alone. */
.portrait::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(180deg, transparent, rgba(20, 14, 42, 0.86));
  pointer-events: none;
}

.provider-card { display: block; text-decoration: none; }
.provider-card:hover .portrait img { transform: scale(1.04); }

.portrait__caption {
  position: absolute;
  z-index: 2;
  inset: auto 0 0 0;
  padding: var(--sp-5);
  color: var(--white);
}

.portrait__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
}

.portrait__role {
  margin-top: var(--sp-2);
  font-size: var(--step--1);
  color: rgba(255, 255, 255, 0.78);
}

/* --------------------------------------------------------------------------
   Location card
   -------------------------------------------------------------------------- */

.location {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  transition: border-color var(--dur-mid) var(--ease-out);
}

.location:hover { border-color: var(--indigo); }

.location__city {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
}

.location__addr { color: var(--text-muted); font-style: normal; line-height: 1.6; }

.location__hours {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--step--1);
  color: var(--text-faint);
}

.location__hours::before {
  content: "";
  width: 0.5rem;
  height: 2px;
  background: var(--teal);
  flex: none;
}

.location__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  margin-top: auto;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
}

.location__links a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 24px;
  padding-block: 2px;
  text-decoration: none;
  font-weight: 600;
  color: var(--indigo);
}

.location__links a:hover { text-decoration: underline; }
.location__links svg { width: 1.05em; height: 1.05em; flex: none; }

/* --------------------------------------------------------------------------
   Note / disclosure
   Used where information is genuinely missing rather than invented.
   -------------------------------------------------------------------------- */

.note {
  padding: var(--sp-4) var(--sp-5);
  border-left: 2px solid var(--teal);
  background: var(--paper);
  font-size: var(--step--1);
  color: var(--text-muted);
}

/* Squared key-term tags */
.tags { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); }

.tags span {
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--white);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--indigo);
}

/* --------------------------------------------------------------------------
   Sticky mobile call bar
   -------------------------------------------------------------------------- */

.call-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-callbar);
  display: flex;
  padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom));
  background: var(--white);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform var(--dur-mid) var(--ease-out);
}

.call-bar.is-visible { transform: none; }
.call-bar .btn { flex: 1; }

/* In the bar the picker owns the full width, and its panel opens upward
   across the screen rather than hanging off the button. */
.callpick--bar { flex: 1; }
.callpick--bar > .btn { width: 100%; }

.callpick--bar .callpick__menu {
  left: 0;
  right: 0;
  translate: none;
  width: auto;
  max-width: none;
  min-width: 0;
}

@media (min-width: 980px) { .call-bar { display: none; } }
@media (max-width: 979px) { body { padding-bottom: 4.5rem; } }

/* --------------------------------------------------------------------------
   Closing call band — indigo, matching the masthead
   -------------------------------------------------------------------------- */

/* The same hero photograph, pushed well back behind a heavy indigo wash so
   the page closes on the image it opened with. */
.call-band {
  position: relative;
  isolation: isolate;
  background: var(--indigo);
  color: var(--white);
  text-align: center;
  /* No overflow:hidden — the contact menu opens upward out of this section
     and would be clipped. The background layers are inset:0 so they never
     overflow anyway. */
}

.call-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("../img/hero/runner-xray.jpg") center 42% / cover no-repeat;
  opacity: 0.62;
}

/* Enough indigo to keep white text at full contrast, but the photograph
   still clearly reads through it. */
.call-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(47, 33, 105, 0.80) 0%,
    rgba(47, 33, 105, 0.68) 45%,
    rgba(36, 25, 80, 0.86) 100%);
}

.call-band h2 { color: var(--white); font-size: var(--step-4); margin-bottom: var(--sp-5); }
.call-band .lede { color: var(--text-on-dark-mute); margin-inline: auto; }
.call-band .btn-row { justify-content: center; margin-top: var(--sp-7); }

.call-band__numbers {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-on-dark);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3) var(--sp-7);
  font-size: var(--step--1);
  color: var(--text-on-dark-mute);
}

.call-band__numbers a { color: var(--white); text-decoration: none; font-weight: 600; }
.call-band__numbers a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Footer — indigo, so the white wordmark reads correctly
   -------------------------------------------------------------------------- */

.footer {
  background: var(--indigo-dark);
  color: var(--text-on-dark-mute);
  padding-block: var(--sp-8) var(--sp-6);
  font-size: var(--step--1);
}

.footer__grid {
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.footer__heading {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: var(--sp-4);
}

.footer__list { list-style: none; padding: 0; display: grid; gap: var(--sp-1); }

/* Padded to clear the 24px minimum target size rather than sitting at the
   text height. */
.footer__list a,
.footer__list li { display: inline-flex; align-items: center; min-height: 24px; }
.footer__list a { color: var(--text-on-dark-mute); text-decoration: none; }
.footer__list a:hover { color: var(--white); }

.footer__tagline { margin-top: var(--sp-4); max-width: 26ch; }

.footer__bottom {
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-on-dark);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: space-between;
}