/* Static-hosting compatibility and responsive improvements. */
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }

#navigation > ul { display: flex; flex-wrap: wrap; }
#navigation li { position: relative; }
#navigation .wsite-menu-wrap {
  display: none !important;
  position: absolute;
  top: 38px;
  left: 0;
  min-width: 210px;
  z-index: 100;
}
#navigation li:hover > .wsite-menu-wrap,
#navigation li:focus-within > .wsite-menu-wrap { display: block !important; }
#navigation .wsite-menu {
  display: block;
  margin: 0;
  padding: 0;
  background: #6a96c7;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2);
}
#navigation .wsite-menu li,
#navigation .wsite-menu a { float: none; width: 100%; }
#navigation .wsite-menu a {
  height: auto;
  padding: 9px 12px;
  border-bottom: 1px solid #7ba1ce;
  background: #6a96c7;
  color: #fff;
}
#navigation .wsite-menu a:hover,
#navigation .wsite-menu a:focus { background: #335e93; color: #fff; }

.service-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0;
  padding: 0;
  list-style: none;
}
.service-links a,
.map-link {
  display: block;
  padding: 12px 16px;
  border-radius: 4px;
  background: #4984c9;
  color: #fff !important;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}
.service-links a:hover,
.service-links a:focus,
.map-link:hover,
.map-link:focus { background: #335e93; }

.clinic-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.clinic-gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 333 / 248;
  object-fit: cover;
  border: 4px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.contact-note {
  max-width: 640px;
  margin-top: 20px;
  padding: 18px;
  border-left: 5px solid #4984c9;
  background: #fff;
  font-size: 14px;
  line-height: 1.6;
}
.wsite-multicol-table { width: 100%; }

@media screen and (max-width: 800px) {
  body { background: #273b4a; }
  #wrapper { padding-bottom: 0; background: none; }
  #container, #banner, #content, #navigation, #footer,
  .tall-header-page .wsite-header,
  .short-header-page .wsite-header,
  .landing-page .wsite-header { width: 100%; }
  #content, #footer { padding-left: 18px; padding-right: 18px; }
  #header { height: auto; }
  #header tr { display: flex; align-items: center; justify-content: space-between; }
  #logo { padding: 20px 14px; }
  #logo, #logo a { font-size: 22px; }
  #header-right { padding: 0 14px; }
  #navigation { height: auto; background: #335e93; }
  #navigation > ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #navigation li, #navigation li a { float: none; width: 100%; }
  #navigation li a { height: auto; padding: 11px 12px; }
  #navigation .wsite-menu-wrap { position: static; min-width: 0; }
  .wsite-header { background-position: center !important; background-size: cover !important; }
  .wsite-multicol-table, .wsite-multicol-tbody, .wsite-multicol-tr, .wsite-multicol-col {
    display: block;
    width: 100% !important;
  }
  .wsite-multicol-table-wrap { margin: 0 !important; }
  .wsite-multicol-col { padding: 0 !important; }
  .clinic-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 480px) {
  #header tr { display: block; }
  #header-right { padding: 0 14px 18px; }
  #header-right table { float: none; width: auto; }
  #header-right .phone-number .wsite-text { margin-left: 0; }
  #navigation > ul, .service-links, .clinic-gallery { grid-template-columns: 1fr; }
  .tall-header-page .wsite-header,
  .short-header-page .wsite-header,
  .landing-page .wsite-header { height: 180px; }
}