/* Variables */

body {
  overflow-x: clip;
}

a {
  text-decoration: none;
}

/* Fixed navbar scroll offset */
section[id]:before {
  content: "";
  display: block;
  height: 120px;
  margin-top: -120px;
  visibility: hidden;
}

.result-message {
  line-height: 22px;
  font-size: 16px;
}

.result-message a {
  color: rgb(89, 111, 214);
  font-weight: 600;
  text-decoration: none;
}

.hidden {
  display: none;
}

#card-error {
  color: rgb(105, 115, 134);
  text-align: left;
  font-size: 13px;
  line-height: 17px;
  margin-top: 12px;
}

#card-element {
  border-radius: 4px 4px 0 0 ;
  padding: 12px;
  border: 1px solid rgba(50, 50, 93, 0.1);
  height: 44px;
  width: 100%;
  background: white;
}

#payment-request-button {
  margin-bottom: 32px;
}


/* spinner/processing state, errors */
.spinner,
.spinner:before,
.spinner:after {
  border-radius: 50%;
}
.spinner {
  color: #ffffff;
  font-size: 22px;
  text-indent: -99999px;
  margin: 0px auto;
  position: relative;
  width: 20px;
  height: 20px;
  box-shadow: inset 0 0 0 2px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.spinner:before,
.spinner:after {
  position: absolute;
  content: "";
}
.spinner:before {
  width: 10.4px;
  height: 20.4px;
  background: #5469d4;
  border-radius: 20.4px 0 0 20.4px;
  top: -0.2px;
  left: -0.2px;
  -webkit-transform-origin: 10.4px 10.2px;
  transform-origin: 10.4px 10.2px;
  -webkit-animation: loading 2s infinite ease 1.5s;
  animation: loading 2s infinite ease 1.5s;
}
.spinner:after {
  width: 10.4px;
  height: 10.2px;
  background: #5469d4;
  border-radius: 0 10.2px 10.2px 0;
  top: -0.1px;
  left: 10.2px;
  -webkit-transform-origin: 0px 10.2px;
  transform-origin: 0px 10.2px;
  -webkit-animation: loading 2s infinite ease;
  animation: loading 2s infinite ease;
}

@-webkit-keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* Match h3 styling to previous h4 in profile sections (heading order fix) */
.profile h3,
.profile-right h3 {
  font-size: 1.5rem;
}

/* Reset button styles for profile collapse toggles (converted from <a> to <button>) */
button.profile-plus {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  width: 100%;
}

/* Ensure minimum touch target size for mobile (48x48px) */
.footer-dark .item ul li a {
  display: inline-block;
  min-height: 48px;
  line-height: 48px;
}

.footer-dark .item ul li {
  margin-bottom: 0;
}

@media only screen and (max-width: 600px) {
  form {
    width: 80vw;
  }
}

/* Hero secondary call-to-action (tap-to-call) */
.hero-call {
  display: inline-block;
  margin-left: 12px;
  padding: 10px 22px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.hero-call:hover,
.hero-call:focus {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: #fff;
  color: #fff;
}

/* Live Google rating shown beneath the hero CTA */
.hero-rating {
  color: #fff;
  font-size: 0.95rem;
  margin-top: 18px;
  margin-bottom: 0;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.45);
}

@media only screen and (max-width: 600px) {
  .hero-call {
    display: block;
    margin: 12px auto 0;
    max-width: 260px;
    text-align: center;
  }
}

/* Keep the navbar subtitle on one line — it shares the row with the nav
   links, so without this it wraps when space gets tight. Below 600px a rule
   in styles.min.css hides the subtitle entirely. */
.title-subtitle {
  white-space: nowrap;
}

/* Navbar labels are short (Portal / Find Us / About / Pay / FAQ), so the
   full row measures ~1085px in Montserrat. Bootstrap's xl breakpoint (1200px)
   keeps the hamburger longer than necessary and lg (992px) is too narrow, so
   expand at 1150px — the row fits with ~65px to spare, enough that a fallback
   font rendering wider than Montserrat still will not wrap the subtitle. */
@media only screen and (min-width: 1150px) {
  .clean-navbar {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  .clean-navbar .navbar-toggler {
    display: none;
  }

  .clean-navbar .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }

  .clean-navbar .navbar-nav {
    flex-direction: row;
  }
}

/* Carousel slides: equal height regardless of copy length.

   styles.min.css sets only min-height, so the tallest slide (slide 1, which
   carries the longest subtitle plus the review rating) stretched past the
   others and the carousel jumped as it advanced. Fix the height instead and
   center the content vertically so every slide matches.

   Heights are set from the measured content height of slide 1 (the tallest)
   at each breakpoint, plus headroom so nothing clips. */
div.jumbotron.carousel-hero {
  height: 580px;
  min-height: 580px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 40px;
  padding-bottom: 40px;
}

div.jumbotron.carousel-hero > * {
  width: 100%;
}

/* styles.min.css also sets padding inside its own breakpoints (70/50/30px),
   which would otherwise beat the base rule above; restate padding here. */
@media only screen and (max-width: 991px) {
  div.jumbotron.carousel-hero {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

@media only screen and (max-width: 767px) {
  div.jumbotron.carousel-hero {
    height: 520px;
    min-height: 520px;
    padding-top: 32px;
    padding-bottom: 32px;
  }
}

@media only screen and (max-width: 450px) {
  div.jumbotron.carousel-hero {
    height: 520px;
    min-height: 520px;
    padding-top: 24px;
    padding-bottom: 24px;
  }
}

/* Google rating is clickable through to the reviews page (/g). The site sets
   a { text-decoration: none } globally, so give these an explicit hover cue
   and keep them inheriting the surrounding text colors. */
.rating-link,
.hero-rating-link {
  color: inherit;
  text-decoration: none;
  border-radius: 4px;
  transition: opacity 0.2s ease;
}

.rating-link:hover,
.rating-link:focus-visible,
.hero-rating-link:hover,
.hero-rating-link:focus-visible {
  color: inherit;
  text-decoration: underline;
  opacity: 0.85;
}

.hero-rating-link:focus-visible,
.rating-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Hero image focal points.

   The hero photos are 1583x430 panoramas (3.68:1). styles.min.css centers
   them with background-position: center, which works on a wide desktop slide
   but on a phone crops to a narrow vertical slice — about 19% of the image
   width — landing on empty background rather than the subject. Each photo's
   subject sits in a different place, so aim the crop per slide:
     image1: stethoscope on the patient's chest, center-right
     image2: face in the CPAP mask, left third
     image3: the doctor on the laptop screen, left third */
div.jumbotron.hero-nature {
  background-position: 63% center;
}

div.jumbotron.hero-photography {
  background-position: 19% center;
}

div.jumbotron.hero-technology {
  background-position: 20% center;
}

/* Mobile hero images.

   The desktop photos are 3.68:1 panoramas. A phone slide is taller than it
   is wide, so background-size: cover has to scale them ~1.2x and shows only
   about 20% of the frame — the subject ends up as a zoomed fragment. Serve
   portrait crops (322x430 of the original, exported at 2x) on phones so the
   slide fills at native scale with the subject properly framed. Desktop
   keeps the panoramas and the focal points set above. */
@media only screen and (max-width: 767px) {
  div.jumbotron.hero-nature {
    background-image: url(../img/hero/image1-mobile-d377b0600b641f6f98a98b662da72f8a.jpg?vsn=d);
    background-position: center;
  }

  div.jumbotron.hero-photography {
    background-image: url(../img/hero/image2-mobile-7590be3229dd4e404cd32f2682956b95.jpg?vsn=d);
    background-position: center;
  }

  div.jumbotron.hero-technology {
    background-image: url(../img/hero/image3-mobile-d299c33bd85929d65031245f62c7d40c.jpg?vsn=d);
    background-position: center;
  }
}