/* Fixes on top of the original custom5 theme. Same file in all three sites;
   linked last from every page. */

/* Between 980px and 1299px the 310px "Schedule An Appointment" button no
   longer fits beside the menu and wraps above it. Let it size to its text. */
@media (min-width: 980px) and (max-width: 1299px) {
  .navarea a.appt { width: auto; padding-left: 18px; padding-right: 18px; font-size: 15px; }
}

/* ---------------------------------------------------------------------------
   Appointment and review popups (markup on every page, logic in forms.js)
   --------------------------------------------------------------------------- */

/* popups and their backdrop above the mobile icon bar (z-index 2000) */
.modal.sf-modal { z-index: 2100; }
.modal-backdrop { z-index: 2090; }

.modal.sf-modal {
  width: 480px;
  margin-left: -240px;
  max-height: 92%;
  border: 0;
  border-radius: 10px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.modal.sf-modal.fade.in { top: 4%; }
@media (max-width: 767px) {
  .modal.sf-modal { width: auto; margin-left: 0; left: 10px; right: 10px; }
  .modal.sf-modal.fade.in { top: 10px; }
}

.sf-modal .modal-header {
  position: relative;
  padding: 22px 48px 14px;
  border-bottom: 1px solid #e6e6e6;
  text-align: center;
}
.sf-modal .modal-title {
  margin: 0;
  font-family: 'trajan_proregular', Georgia, serif;
  font-size: 24px;
  line-height: 1.25;
  color: #1b3866;
}
.sf-modal .sf-intro {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.4;
  color: #555;
}
.sf-modal .close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  font-size: 30px;
  line-height: 44px;
  color: #555;
  opacity: 1;
  text-shadow: none;
}
.sf-modal .close:hover, .sf-modal .close:focus { color: #1b3866; }
.sf-modal .modal-body { max-height: none; padding: 18px 24px 22px; overflow: visible; }

.site-form, .sf-success { font-family: 'museo_sans300', "Helvetica Neue", Arial, sans-serif; color: #333; }
.site-form .sf-field { margin: 0 0 14px; }
.site-form label, .site-form legend {
  display: block;
  margin: 0 0 5px;
  padding: 0;
  border: 0;
  font-size: 15px;
  line-height: 1.3;
  font-weight: bold;
  color: #1b3866;
}
.site-form .sf-optional { font-weight: normal; color: #777; }
.site-form input[type=text], .site-form input[type=tel], .site-form input[type=email], .site-form textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 16px; /* 16px+ stops iPhones zooming in on focus */
  line-height: 1.4;
  color: #222;
  background: #fff;
  border: 1px solid #b8b8b8;
  border-radius: 6px;
  box-shadow: none;
}
.site-form textarea { min-height: 90px; resize: vertical; }
.site-form input:focus, .site-form textarea:focus,
.site-form input:focus:invalid, .site-form textarea:focus:invalid { /* Bootstrap 2 paints empty required fields red */
  outline: none;
  border-color: #1b3866;
  box-shadow: 0 0 0 3px rgba(27, 56, 102, .2);
}

/* errors */
.site-form .sf-invalid input, .site-form .sf-invalid textarea { border-color: #b3261e; background: #fff6f5; }
.site-form .sf-invalid input:focus, .site-form .sf-invalid textarea:focus { box-shadow: 0 0 0 3px rgba(179, 38, 30, .2); }
.site-form .sf-error { margin: 5px 0 0; font-size: 14px; line-height: 1.35; color: #b3261e; }
.site-form .sf-status { margin: 0; font-size: 15px; line-height: 1.4; }
.site-form .sf-status:not(:empty) { margin: 0 0 12px; padding: 10px 12px; border-radius: 6px; }
.site-form .sf-status-error { color: #8c1d18; background: #fdecea; }

/* Yes / No as large tappable choices */
.site-form .sf-choice { margin: 4px 0 18px; padding: 0; border: 0; }
.site-form .sf-choice label { display: inline-block; margin: 0 8px 0 0; font-weight: normal; }
.site-form .sf-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.site-form .sf-choice span {
  display: inline-block;
  min-width: 88px;
  padding: 10px 18px;
  font-size: 16px;
  line-height: 1.3;
  text-align: center;
  color: #1b3866;
  border: 2px solid #1b3866;
  border-radius: 6px;
  cursor: pointer;
}
.site-form .sf-choice input:checked + span { color: #fff; background: #1b3866; }
.site-form .sf-choice input:focus-visible + span { box-shadow: 0 0 0 3px rgba(27, 56, 102, .35); }

/* star rating: inputs in 5..1 order, shown 1..5 left to right */
.site-form .sf-stars { margin: 0 0 14px; padding: 0; border: 0; }
.site-form .sf-stars-row { display: inline-flex; flex-direction: row-reverse; }
.site-form .sf-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.site-form .sf-stars label {
  width: 44px;
  height: 44px;
  margin: 0;
  font-size: 36px;
  line-height: 44px;
  text-align: center;
  color: #c8c8c8;
  cursor: pointer;
}
.site-form .sf-stars label::before { content: "\2605"; }
.site-form .sf-stars input:checked ~ label,
.site-form .sf-stars label:hover, .site-form .sf-stars label:hover ~ label { color: #f9a61e; }
.site-form .sf-stars input:focus-visible + label { outline: 2px solid #1b3866; outline-offset: -4px; border-radius: 6px; }
.sf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* spam trap: hidden from people */
.site-form .sf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* buttons */
.sf-modal .sf-submit {
  display: block;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 12px 20px;
  font-family: 'trajan_proregular', Georgia, serif;
  font-size: 18px;
  line-height: 1.2;
  color: #fff;
  background: #1b3866;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s;
}
.sf-modal .sf-submit:hover, .sf-modal .sf-submit:focus { background: #f9a61e; color: #1b3866; }
.sf-modal .sf-submit:focus-visible { outline: 3px solid #1b3866; outline-offset: 2px; }
.sf-modal .sf-submit[disabled] { opacity: .7; cursor: wait; }
.site-form .sf-privacy { margin: 12px 0 0; text-align: center; font-size: 14px; }
.site-form .sf-privacy a { color: #1b3866; text-decoration: underline; }

/* success */
.sf-success { text-align: center; padding: 6px 0 2px; outline: none; }
.sf-success p { margin: 0 0 12px; font-size: 16px; line-height: 1.5; }
.sf-success .sf-success-title { font-family: 'trajan_proregular', Georgia, serif; font-size: 24px; color: #1b3866; }
.sf-success a { color: #1b3866; font-weight: bold; white-space: nowrap; }
.sf-success .sf-submit { margin-top: 18px; }
[hidden] { display: none !important; }

/* Turnstile bot check (rendered by forms.js; invisible unless it needs a click) */
.site-form .sf-turnstile:not(:empty) { margin: 0 0 12px; }

/* ---------------------------------------------------------------------------
   Reviews page: the reviews plugin hides every card until a scroll animation
   reveals it, but the reveal never fires past the first row, so most of the
   page was blank. Show all cards, no animation.
   --------------------------------------------------------------------------- */
.review-object {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
  transform: none !important;
  transition: none !important;
}
/* the plugin pulses one star bigger than the rest; keep all five the same size */
.review-object .star-container .star { transform: none !important; animation: none !important; }

/* ---------------------------------------------------------------------------
   Phones (up to 767px)
   --------------------------------------------------------------------------- */

/* sticky Call / Request Appointment bar (markup at the end of every page) */
.sf-actionbar { display: none; }

@media (max-width: 767px) {
  .sf-actionbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1900; /* below the popups (2090+) */
    gap: 8px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: #fff;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .18);
  }
  .sf-actionbar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 48px;
    border-radius: 6px;
    font-family: 'trajan_proregular', Georgia, serif;
    font-size: 16px;
    line-height: 1.1;
    text-decoration: none;
  }
  .sf-actionbar .sf-call { flex: 0 0 36%; color: #1b3866; border: 2px solid #1b3866; background: #fff; }
  .sf-actionbar .sf-book { flex: 1; color: #fff; background: #1b3866; }
  .sf-actionbar a:active { opacity: .8; }
  /* out of the way while a popup is open */
  body:has(.modal.in) .sf-actionbar { display: none; }
  body { padding-bottom: 72px; }

  /* social icons: a small row at the bottom of the page instead of a fixed bar */
  .mobile-social {
    position: static !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    height: auto !important;
    padding: 14px 10px !important;
    background: #1b3866;
  }
  .mobile-social a { display: inline-block; width: auto !important; float: none !important; }
  .mobile-social img { display: block; width: auto !important; height: 22px !important; max-width: none; }
  /* the page ends with this row, so keep it clear of the sticky bar */
  .mobile-social { padding-bottom: calc(14px + 72px + env(safe-area-inset-bottom)) !important; }

  /* footer: less empty space, readable copyright */
  footer[role="contentinfo"] { padding: 22px 0 18px; }
  footer[role="contentinfo"] > div { color: #c8d2e2; font-size: 13px; }

  /* home page hero: readable heading and a real button */
  .slidetext h2 { font-size: 26px; line-height: 1.2; margin-bottom: 10px; }
  .slidetext a.appt {
    display: inline-block;
    width: auto;
    height: auto;
    min-height: 48px;
    margin-top: 6px;
    padding: 14px 22px;
    font-size: 16px;
    line-height: 20px;
  }

  /* inner pages: drop the empty decorative band so content starts under the header */
  body:not(.home) .showcasefull { display: none; }
  /* the header's "Schedule An Appointment" strip repeats the sticky bar on phones */
  .headerarea .navarea a.appt { display: none; }
  body:not(.home) .bannerarea { min-height: 0; }

  /* photos in page text stack above the words instead of squeezing them */
  .post_content img.alignleft,
  .post_content img.alignright {
    float: none;
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto 16px;
  }

  /* menu button: white lines on the orange bar, 44px target */
  .mobilenav .btn-navbar {
    min-width: 44px;
    min-height: 40px;
    padding: 9px 11px;
    background: transparent !important;
    background-image: none !important;
    border: 2px solid #fff !important;
    border-radius: 6px;
    box-shadow: none !important;
    text-shadow: none;
  }
  .mobilenav .btn-navbar .icon-bar { width: 22px; height: 3px; background: #fff !important; box-shadow: none !important; border-radius: 2px; }
  .mobilenav .nav-collapse .nav > li > a { padding-top: 12px; padding-bottom: 12px; font-size: 18px; }

  /* reviews: one full-width column with tighter spacing */
  .bpfr_review-box { margin: 0 0 12px !important; }
  .col-box .review-column { width: 100% !important; float: none !important; }

  /* tap-to-call numbers in page text */
  .post_content a[href^="tel:"] { font-weight: bold; color: #1b3866; }
}