/* Shared contact bar and Contact dropdown, loaded on every page */
.topbar { position:fixed; top:0; left:0; right:0; z-index:101; height:34px; display:flex; justify-content:center; align-items:center; gap:2rem; background:#1a2e25; color:rgba(245,240,232,0.75); font-family:'Jost',sans-serif; font-size:0.72rem; letter-spacing:0.04em; white-space:nowrap; overflow:hidden; }
.topbar a { color:#f5f0e8; text-decoration:none; }
.topbar a:hover { color:#c8a96e; }
.topbar .tb-hours { color:#c8a96e; }
body > nav#navbar { top:34px; }
.nav-sub { position:relative; }
.nav-sub > ul { display:none; position:absolute; top:100%; left:-1rem; padding:0.8rem 0 0; list-style:none; min-width:220px; }
.nav-sub > ul::before { content:''; position:absolute; inset:0.8rem 0 0; background:#f5f0e8; border:1px solid rgba(122,158,135,0.25); box-shadow:0 8px 24px rgba(26,46,37,0.1); z-index:-1; }
.nav-sub:hover > ul, .nav-sub:focus-within > ul { display:block; }
.nav-sub > ul a { display:block; padding:0.6rem 1rem; white-space:nowrap; }
@media (max-width:900px) {
  .topbar { gap:1rem; font-size:0.7rem; }
  .topbar .tb-addr, .topbar .tb-hours { display:none; }
}
@media (min-width:901px) and (max-width:1250px) {
  nav#navbar .nav-links { gap:1.4rem; }
}
/* Footer on phones: stack everything, centred, and let the page links wrap instead of running off the screen.
   "body >" outranks each page's own footer styles, which load after this file. */
body > footer .footer-links { flex-wrap:wrap; }
@media (max-width:900px) {
  body > footer { padding:2.5rem 1.5rem; flex-direction:column; align-items:center; text-align:center; gap:1.4rem; }
  body > footer .footer-logo { line-height:1.5; }
  body > footer .footer-links { justify-content:center; gap:0.6rem 1.2rem; max-width:420px; }
  body > footer .footer-links a { padding:0.25rem 0; }
  body > footer .footer-areas { line-height:1.9; max-width:520px; }
  body > footer .ft-sep { display:block; height:0; overflow:hidden; }
}
/* Phone menu: start below the header (whose height varies as the clinic subtitle wraps) so Services
   isn't hidden behind it, and scroll if the list is taller than the screen. --mm-top is set by the hamburger. */
@media (max-width:900px) {
  body > .mobile-menu { top:0; bottom:0; padding-top:calc(var(--mm-top, 150px) + 1rem); padding-bottom:2rem; overflow-y:auto; }
}