/* Shared site chrome: availability banner, header, primary button, contact
   details and footer. Loaded by every page, including the static legal,
   billing and confirmation pages. All fonts/assets are first-party; the menu
   needs no JS. */

/* One primary button style site-wide (page buttons and the header button). */
.appointment-button,
.site-chrome-header nav a.nav-appointment {
  box-sizing: border-box;
  width: auto;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 26px;
  border: 0;
  background: #8c2026;
  color: #fff;
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s ease;
}
.appointment-button:hover,
.site-chrome-header nav a.nav-appointment:hover { background: #741a20; color: #fff; }
.appointment-button:focus-visible { outline: 2px solid #8c2026; outline-offset: 4px; }

/* Banner and header stay pinned to the top at every width. Heights are
   tokens so the header offset, anchor scrolling and the open menu agree.
   Phones: 40 + 64 = 104px of sticky chrome. */
:root { --banner-height: 46px; --header-height: 96px; --safe-top: env(safe-area-inset-top, 0px); }
@media (max-width: 1150px) { :root { --header-height: 84px; } }
@media (max-width: 620px) { :root { --banner-height: 40px; --header-height: 64px; } }
html { scroll-padding-top: calc(var(--safe-top) + var(--banner-height) + var(--header-height) + 12px); }

/* Availability banner: one line, the whole bar links to the request page. */
.availability-banner {
  position: sticky;
  top: 0;
  z-index: 40;
  box-sizing: border-box;
  height: calc(var(--safe-top) + var(--banner-height));
  padding-top: var(--safe-top);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  background: #8c2026;
  color: #fff;
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.3;
}
.availability-banner a { color: inherit; text-decoration: none; }
.availability-banner-main { min-height: var(--banner-height); display: flex; align-items: center; justify-content: center; padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); text-align: center; font-weight: 600; white-space: nowrap; overflow: hidden; }
.availability-banner-main:hover .availability-banner-text,
.availability-banner-main:hover .availability-banner-short,
.availability-banner-main:hover .availability-banner-tiny,
.availability-banner-main:hover .availability-banner-wide { text-decoration: underline; text-underline-offset: 3px; }
.availability-banner-short, .availability-banner-tiny, .availability-banner-wide, .availability-banner-phone { display: none; }
.availability-banner-arrow { white-space: pre; }
.availability-banner a:focus-visible { outline: 2px solid #fff; outline-offset: -5px; }
/* Phones: the short wording, and the "Next:" wording below 375px. */
@media (max-width: 620px) {
  .availability-banner { font-size: 14px; }
  .availability-banner-main { padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); }
  .availability-banner-text { display: none; }
  .availability-banner-short { display: inline; }
}
@media (max-width: 374px) {
  .availability-banner-short { display: none; }
  .availability-banner-tiny { display: inline; }
}
@media (min-width: 801px) {
  .availability-banner { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); padding-inline: max(24px, env(safe-area-inset-left)) max(24px, env(safe-area-inset-right)); }
  .availability-banner-main { grid-column: 2; padding-inline: 20px; }
  .availability-banner-wide { display: inline; font-weight: 400; }
  .availability-banner-phone { grid-column: 3; justify-self: end; display: inline-flex; align-items: center; padding-left: 20px; border-left: 1px solid rgba(255,255,255,.35); margin-block: 10px; min-height: 26px; font-weight: 600; white-space: nowrap; }
  .availability-banner-phone:hover { text-decoration: underline; text-underline-offset: 3px; }
}
/* The "Request an appointment" suffix needs the room above 1150px. */
@media (min-width: 801px) and (max-width: 1150px) {
  .availability-banner-wide { display: none; }
}

.site-chrome-header {
  position: sticky;
  top: var(--safe-top);
  z-index: 39;
  box-sizing: border-box;
  min-height: var(--header-height);
  padding: 0 max(3.3%, env(safe-area-inset-right)) 0 max(3.3%, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: #faf8f4;
  color: #17302b;
  border-bottom: 1px solid #d3cec4;
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
}
.availability-banner + .site-chrome-header { top: calc(var(--safe-top) + var(--banner-height)); }
.site-chrome-header .wordmark {
  position: relative;
  top: 3px;
  color: inherit;
  font-family: "Newsreader", "Iowan Old Style", Georgia, serif;
  font-size: clamp(28px, 2.4vw, 37px);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.site-desktop-navigation { display: flex; align-items: center; gap: clamp(14px, 1.5vw, 34px); }
.site-chrome-header nav a { color: inherit; font-size: 16px; font-weight: 600; line-height: 1.5; text-decoration: none; padding: 12px 0; white-space: nowrap; }
.site-chrome-header nav a[aria-current="page"]:not(.nav-appointment) { box-shadow: 0 1px #8c2026; }
/* Patient login: small and secondary, before the Request button. */
.site-desktop-navigation a.nav-patient-login { order: 1; font-size: 14px; font-weight: 500; color: #53605c; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.site-desktop-navigation a.nav-appointment { order: 2; }
.site-mobile-navigation-links a.nav-patient-login { order: 1; font-size: 15px; font-weight: 500; color: #53605c; }
.site-mobile-navigation-links a.nav-appointment { order: 2; }
.site-chrome-header nav a:not(.nav-appointment):hover { color: #8c2026; }
.site-chrome-header a:focus-visible,
.site-chrome-header summary:focus-visible,
.site-footer.site-chrome-footer a:focus-visible { outline: 2px solid #8c2026; outline-offset: 5px; }
.site-mobile-navigation { display: none; }
/* Five links plus the button need about 1100px; below that use the menu. */
@media (max-width: 1150px) {
  .site-chrome-header { padding: 0 6%; gap: 12px; }
  .site-chrome-header .wordmark { font-size: 32px; }
  .site-desktop-navigation { display: none; }
  .site-mobile-navigation { display: block; }
  .site-mobile-navigation summary { min-height: 48px; display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; font-size: 15px; font-weight: 600; }
  .site-mobile-navigation summary::-webkit-details-marker { display: none; }
  .site-mobile-navigation summary span[aria-hidden] { font-size: 22px; }
  .site-mobile-navigation .menu-open { display: none; }
  .site-mobile-navigation[open] .menu-closed { display: none; }
  .site-mobile-navigation[open] .menu-open { display: inline; }
  /* The open menu hangs below the pinned header and scrolls on its own when
     it is taller than the rest of the screen (short or landscape phones). */
  .site-mobile-navigation-links { position: absolute; z-index: 20; top: 100%; left: 0; right: 0; box-sizing: border-box; max-height: calc(100vh - var(--safe-top) - var(--banner-height) - var(--header-height)); max-height: calc(100dvh - var(--safe-top) - var(--banner-height) - var(--header-height)); overflow-y: auto; overscroll-behavior: contain; padding: 5px 6% 24px; background: #faf8f4; border-bottom: 1px solid #d3cec4; }
  .site-mobile-navigation:not([open]) .site-mobile-navigation-links { display: none; }
  .site-mobile-navigation[open] .site-mobile-navigation-links { display: flex; flex-direction: column; align-items: flex-start; }
  .site-chrome-header .site-mobile-navigation-links a { align-self: stretch; padding: 13px 0; font-size: 17px; }
  .site-chrome-header .site-mobile-navigation-links a[aria-current="page"]:not(.nav-appointment) { box-shadow: none; color: #8c2026; }
  .site-chrome-header .site-mobile-navigation-links a.nav-appointment { align-self: flex-start; margin-top: 12px; padding: 16px 26px; }
}
@media (max-width: 620px) {
  .site-chrome-header { padding-inline: max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right)); }
  .site-chrome-header .wordmark { font-size: clamp(22px, 6.5vw, 31px); letter-spacing: -.045em; }
  .site-mobile-navigation summary { font-size: 14px; gap: 8px; }
  .site-mobile-navigation-links { padding-inline: 20px; }
}

/* Contact details: labeled Address, Phone and Email rows. */
.contact-details { margin: 0; display: grid; gap: 0; font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif; }
.contact-details-row { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: baseline; column-gap: 16px; padding: 12px 0; border-top: 1px solid #d3cec4; }
/* Divider rule: items never draw a closing line that would land on the
   section or footer border, so the last row has no bottom rule. */
.contact-details dt { color: #53605c; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.contact-details dd { margin: 0; min-width: 0; font-size: 18px; line-height: 1.5; }
.contact-details dd a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; overflow-wrap: anywhere; }
.contact-details dd a:hover { color: #8c2026; }
.contact-details-compact { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 0 22px; }
.contact-details-compact .contact-details-row { display: flex; gap: 8px; padding: 0; border: 0; }
.contact-details-compact .contact-details-row:last-child { border: 0; }
.contact-details-compact dt { font-size: 12px; }
.contact-details-compact dd { font-size: 16px; }
@media (max-width: 620px) {
  .contact-details-row { grid-template-columns: 70px minmax(0, 1fr); column-gap: 12px; padding: 8px 0; }
  .contact-details dd { font-size: 16px; }
  .contact-details-compact { display: grid; gap: 0; }
  .contact-details-compact .contact-details-row { display: grid; grid-template-columns: 62px minmax(0, 1fr); padding: 0; }
}

.site-footer.site-chrome-footer {
  box-sizing: border-box;
  padding: 28px 8.3% 24px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px 40px;
  align-items: start;
  background: #10241f;
  color: #bec8c2;
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
}
.site-footer.site-chrome-footer .contact-details-row { border-color: rgba(190,200,194,.25); padding: 2px 0; }
.site-footer.site-chrome-footer .contact-details dt { color: #bec8c2; font-size: 11px; }
.site-footer.site-chrome-footer .contact-details dd { font-size: 14px; }
.site-footer.site-chrome-footer .footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); align-content: start; gap: 0 28px; font-size: 14px; line-height: 1.5; }
.site-footer.site-chrome-footer .footer-hours { display: grid; align-content: start; gap: 10px; padding-top: 12px; font-size: 14px; line-height: 1.55; }
.site-footer.site-chrome-footer .footer-hours p { margin: 0; }
.site-footer.site-chrome-footer a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-underline-offset: 4px; }
.site-footer.site-chrome-footer a:hover { color: #fff; }
.site-footer.site-chrome-footer .footer-copyright { grid-column: 1 / -1; margin: 0; font-size: 12px; line-height: 1.6; }
@media (max-width: 800px) {
  .site-footer.site-chrome-footer { grid-template-columns: minmax(0, 1fr); padding: 24px 7%; gap: 14px; }
  .site-footer.site-chrome-footer .footer-hours { padding-top: 0; }
  .site-footer.site-chrome-footer .footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
  .site-footer.site-chrome-footer .footer-links a { min-width: 0; overflow-wrap: break-word; }
}