/* ==========================================================
   Health Connect Medical Group — site-specific overrides
   Loaded after style.css. Kept separate from the compiled
   template CSS so template updates don't clobber these.
   ========================================================== */

/* header-layout1's topbar drops to display:block at >=1200px
   (style.css:3114-3117) but never got the matching .row height that
   header-layout2/header-layout3 have (style.css:2726-2728) — without
   it, align-items-center has no extra height to center within, so
   the topbar content sits flush at the top instead of centered. */
@media (min-width: 1200px) {
  .header-topbar > .container-fluid > .row {
    height: 60px;
  }
}

/* Hero has no dark overlay by default — the previous photo only
   worked because it had a naturally light area on its left, right
   where the text sits. Add a permanent left-to-right light gradient
   so the dark-navy title/desc text stays readable against any photo. */
.slider .slide-item {
  position: relative;
}
.slider .slide-item:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.85) 55%, rgba(255, 255, 255, 0) 85%);
  pointer-events: none;
}
.slider .slide-item > .container {
  position: relative;
  z-index: 3;
}

/* Feature-item card grids ("Why Choose Us" on the homepage, "Smart
   Devices We Provide" on the RPM program page): Bootstrap's .row
   already stretches each column to the row's tallest, but .feature-item
   itself has no height rule, so it sizes to its own content instead of
   filling that stretched column. The -30px accounts for the card's own
   margin-bottom, which is what creates the gap between rows. */
.feature-item {
  height: calc(100% - 30px);
}

/* "Conditions We Help Manage" checklist on specialty pages: a clean
   2-column list, not cards — the checkmark is top-aligned to the
   first line so it doesn't float mid-paragraph on longer, wrapped
   condition names. */
.condition-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 40px;
}
.condition-cards li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid #e6e8eb;
  font-weight: 600;
  color: #0e204d;
  font-size: 18px;
  margin: 0;
}
.condition-cards li:before {
  content: "\f00c";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border-radius: 50%;
  font-size: 10px;
  color: #1f7493;
  background-color: rgba(31, 116, 147, 0.12);
  margin-top: 2px;
}
@media (max-width: 767px) {
  .condition-cards {
    grid-template-columns: 1fr;
  }
}

/* Logo sizing — the template's own .navbar-brand CSS doesn't
   constrain image size (it expects pre-sized logo-light/dark.png). */
.navbar-brand .site-logo {
  height: 56px;
  width: auto;
}

/* Footer uses the all-white logo variant (built for dark backgrounds)
   directly on the dark-navy footer, no card treatment needed. */
.site-logo--footer {
  height: 48px;
  width: auto;
  display: block;
  margin-bottom: 20px;
}

/* Specialist teaser card used on specialty pages ("Meet Your Specialist") */
.specialist-teaser {
  display: flex;
  gap: 20px;
  align-items: center;
  background: #f9f9f9;
  border-radius: 10px;
  padding: 20px;
}
.specialist-teaser img {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.specialist-teaser .specialist-teaser__job {
  color: #1f7493;
  font-weight: 600;
  margin-bottom: 8px;
}

/* CTA band icon (replaces the template's generic alert.png) */
.cta__icon {
  font-size: 70px;
  color: #ffffff;
  line-height: 1;
}

/* Benefit list ("Our Approach" outcomes on specialty pages, "What You
   Get" on program pages) — same 2-column, top-aligned list treatment
   as .condition-cards, styling the real <i> icon as a circular badge. */
.benefit-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 40px;
}
.benefit-tags li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid #e6e8eb;
  font-weight: 600;
  color: #0e204d;
  font-size: 18px;
}
.benefit-tags li i {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border-radius: 50%;
  font-size: 12px;
  color: #1f7493;
  background-color: rgba(31, 116, 147, 0.12);
  margin-top: 2px;
}
@media (max-width: 767px) {
  .benefit-tags {
    grid-template-columns: 1fr;
  }
}

/* "How It Works" numbered steps (program pages) */
.how-it-works {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}
.how-it-works li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}
.how-it-works li:last-child {
  margin-bottom: 0;
}
.how-it-works .step-number {
  counter-increment: step;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #1f7493;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
}
.how-it-works .step-number::before {
  content: counter(step);
}
.how-it-works .step-text {
  padding-top: 6px;
  color: #848e9f;
}

/* Reserve side gutters so carousel prev/next arrows sit beside the
   cards instead of overlapping their edges. */
.team-layout2 .slick-carousel,
.services-carousel .slick-carousel {
  padding: 0 50px;
}
@media (max-width: 767px) {
  .team-layout2 .slick-carousel,
  .services-carousel .slick-carousel {
    padding: 0 45px;
  }
}

/* The template gives .services-carousel its own desktop-only arrow
   position (a compact pair above-right of the heading). Override it
   so Specialties/Programs arrows stay beside the cards like Physicians. */
@media (min-width: 1200px) {
  .services-carousel .slick-arrow {
    top: 50%;
    transform: translateY(-50%);
  }
  .services-carousel .slick-arrow.slick-prev {
    left: 0;
  }
  .services-carousel .slick-arrow.slick-next {
    left: auto;
    right: 0;
  }
}

/* Equalize card heights within each homepage carousel — slick merges
   its own slide classes onto the card elements, and its base CSS sets
   .slick-slide{height:100%}, which (with no explicit .slick-track
   height) defeats flexbox stretch unless reset to auto here. */
.team-layout2 .slick-track,
.services-carousel .slick-track {
  display: flex !important;
}
.team-layout2 .slick-slide,
.services-carousel .slick-slide {
  height: auto !important;
}

.team-layout2 .member {
  display: flex;
  flex-direction: column;
}
.team-layout2 .member .member__info {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.team-layout2 .member .member__info > .mt-20 {
  margin-top: auto !important;
}

.services-carousel .service-item {
  display: flex;
  flex-direction: column;
}
.services-carousel .service-item .service__content {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.services-carousel .service-item .service__content > a.btn {
  margin-top: auto;
}

/* Specialty/program page hero card: .info__meta's 45px padding-top
   (style.css:6433-6436) was sized to hold a star-rating widget above
   the divider that our pages don't use, leaving pure dead space above
   the intro paragraph and Book Appointment button. */
.info-card .info__meta {
  padding-top: 22px;
  gap: 20px;
}

/* RPM "Smart Devices We Provide" cards use real product photos instead
   of icon-font glyphs — give them a consistent bounding box so photos
   with different aspect ratios (square scale vs. wide oximeter, etc.)
   still line up the same across every card. */
.feature__icon--photo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
}
.feature__icon--photo img {
  max-width: 100%;
  max-height: 120px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Brand teal for icons currently navy/gray on white or light
   backgrounds. Deliberately excludes icons that are white/light for
   contrast on teal or dark backgrounds (scroll-to-top, topbar social
   icons, CTA bands, sidebar widget-help, and any icon inheriting white
   from a solid .btn__primary button like "Book Appointment") — those
   would become invisible against their own background if recolored. */
.service-item .service__icon,
.widget-schedule .widget__icon,
.member .btn__link.btn__secondary i,
.form-group-icon {
  color: #1f7493;
}

/* Physician page floating photo card (.widget-member.shifted-top) uses a
   -450px margin-top (style.css:6224-6226) sized for a taller hero than this
   page-title section actually is. The page-title no longer has any heading
   text at all (just the background photo + Book Appointment button, right-
   aligned), so the card can overlap deep into it — -400px lands the photo
   about two-thirds of the way up the hero with a comfortable 140px gap
   below the header and 650px of horizontal clearance from the button. */
@media (min-width: 1200px) {
  .widget-member.shifted-top {
    margin-top: -400px;
  }
}

/* Homepage "Our Specialties" TMS card uses the TMS Institute's real icon
   mark instead of a generic icon-font glyph — size it to match the glyphs
   it sits alongside (.service-item .service__icon is font-size:80px desktop,
   50px at the same mobile breakpoint below). */
.service__icon-img {
  height: 80px;
  width: auto;
  margin-bottom: 7px;
}
@media (max-width: 767px) {
  .service__icon-img {
    height: 50px;
    margin-bottom: 4px;
  }
}

/* TMS Institute logo inside the "TMS Referral Partner" note (TMS specialty
   page and Dr. Debwan's doctor page) — compact lockup under the note text,
   not a full-width banner. */
.tms-referral-logo-link {
  display: inline-block;
  margin-top: 4px;
}
.tms-referral-logo {
  max-height: 50px;
  width: auto;
}

/* Physician page "Specialties" row: when a physician has more than one
   role, each is stacked as its own <p> inside one .details__content —
   .mb-0 collapses them flush together, so add spacing between lines. */
.details-list .details__content p + p {
  margin-top: 8px;
}

/* Contact/appointment form submit feedback (assets/js/hcmg-mailto.js),
   shown after a fetch to send_email.php resolves. Success replaces the whole
   form with .form-thankyou below, so only the error state is styled here. */
.form-status {
  font-weight: 600;
  font-size: 14px;
}
.form-status--error {
  color: #d64545;
}

/* The icon sits at left: 23px and is ~16px wide (style.css:1855-1866), so the
   stock 45px padding left only ~6px between it and the typed text. */
.form-group-icon + .form-control,
.form-group-icon + select + .form-control {
  padding-left: 58px;
}

/* Success takeover: assets/js/hcmg-mailto.js swaps the submitted form out for
   this panel, so the page reads as a confirmation rather than a form with a
   one-line notice under it. Sized large deliberately — this is the only
   confirmation a patient gets on-screen. */
.form-thankyou {
  padding: 20px 0 10px;
  text-align: center;
}
.form-thankyou:focus {
  outline: none;
}
.form-thankyou__icon {
  width: 88px;
  height: 88px;
  margin: 0 auto 28px;
  border-radius: 50%;
  font-size: 38px;
  line-height: 88px;
  color: #ffffff;
  background-color: #1f7493;
}
.form-thankyou__title {
  margin-bottom: 18px;
  font-size: 30px;
  line-height: 1.3;
  color: #0e204d;
}
.form-thankyou__desc {
  margin-bottom: 14px;
  font-size: 20px;
  line-height: 1.7;
}
.form-thankyou__note {
  margin-bottom: 0;
  font-size: 18px;
  color: #848e9f;
}
.form-thankyou__note a {
  font-weight: 700;
  color: #1f7493;
}
@media (max-width: 767px) {
  .form-thankyou__icon {
    width: 68px;
    height: 68px;
    font-size: 30px;
    line-height: 68px;
  }
  .form-thankyou__title {
    font-size: 24px;
  }
  .form-thankyou__desc {
    font-size: 18px;
  }
}

/* Keep the selected physician inside the control while giving the open
   menu enough room to show the physicians' full names and credentials. */
.nice-select.doctor-select {
  padding-right: 46px;
}
.nice-select.doctor-select .current {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .nice-select.doctor-select .list {
    width: max-content;
    min-width: 100%;
    max-width: min(520px, calc(100vw - 40px));
  }
  .nice-select.doctor-select .option {
    white-space: nowrap;
  }
}

/* Larger general type scale — many patients have low vision, and the
   template's base reading size (body: 14px, style.css:66) plus most
   component text (buttons, nav, form fields, list items, descriptions)
   sat in a 13-16px band, below the WCAG-recommended 16px floor. This
   file loads after style.css, so these rules win at every breakpoint
   without needing separate mobile versions of each one. Headings are
   left alone — they're already large enough to read comfortably. */
body {
  font-size: 18px;
}
p {
  font-size: 18px;
}
.btn {
  font-size: 17px;
}
.form-control {
  font-size: 17px;
}
.navbar .nav__item .nav__item-link {
  font-size: 17px;
}
.navbar .dropdown-menu .nav__item .nav__item-link {
  font-size: 16px;
}
.heading__desc,
.text-block__desc,
.contact-panel__desc,
.pagetitle__desc {
  font-size: 19px;
}
.service-item .service__desc {
  font-size: 18px;
}
.list-items li {
  font-size: 18px;
}
.contact-list li,
.footer-widget-nav li a,
.footer .contact__list li,
.details-list .details__content p {
  font-size: 17px;
}
.footer-widget__title {
  font-size: 18px;
}
.form-status {
  font-size: 16px;
}

/* Topbar social icons (style.css:2662-2665) render navy-on-teal by
   default — hard to see against the navy topbar background. White
   reads clearly there; on hover the circle itself turns white
   (style.css:2666-2668), so the icon needs to flip to a dark color
   at that point instead, or it would disappear into its own hover
   background. */
.header-topbar .social-icons li a {
  color: #ffffff;
}
.header-topbar .social-icons li a:hover {
  color: #19315b;
}

/* Footer supporting text sits smaller than the sitewide body size —
   the About paragraph in particular wraps to ~10 lines in its narrow
   column at 18px. The phone number keeps its own 22px
   (style.css:3735) and stays prominent. */
.footer-widget-about p,
.footer .contact-list li {
  font-size: 15px;
}

/* style.css:3672-3675 zeroes the contact rows' bottom margin, leaving
   the email flush against the address. */
.footer .contact-list li {
  margin-bottom: 10px;
}
.footer .contact-list li:last-child {
  margin-bottom: 0;
}

/* Footer social icons up from the base 23px/12px (style.css:1977-1990).
   Scoped to .footer so the header topbar icons keep their size. */
.footer .social-icons li a {
  width: 32px;
  height: 32px;
  line-height: 32px;
  font-size: 15px;
}

/* Footer link-button sits on the dark navy background — white reads
   better than the template's teal (.btn__link.btn__primary,
   style.css:1549-1551). Its existing hover rule already resolves to
   white (style.css:1552-1554), so it stays white throughout. */
.footer .footer-widget-about .btn__link.btn__primary {
  color: #ffffff;
}

/* Footer nav links hover white instead of teal (style.css:3711-3713).
   Deliberately scoped to the nav columns — the Contact Us card is a
   white card (style.css:3676-3682), so links inside it keep their
   gray hover or they'd disappear against it. */
.footer .footer-widget-nav li a:hover {
  color: #ffffff;
}

/* ----------------------------------------------------------------
   Contact / appointment form: grouped into a "what do you need"
   section followed by a "who you are" section.
   ---------------------------------------------------------------- */
.form-section {
  margin-bottom: 40px;
}
.form-section:last-of-type {
  margin-bottom: 0;
}
.form-section + .form-section {
  padding-top: 34px;
  border-top: 1px solid #e6e8eb;
}
.form-section__title {
  font-size: 21px;
  color: #0e204d;
  margin-bottom: 6px;
}
.form-section__desc {
  font-size: 15px;
  color: #848e9f;
  margin-bottom: 24px;
}
.form-field__label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #0e204d;
  margin-bottom: 12px;
}

/* Multi-select as checkbox cards rather than a native <select multiple>.
   Many patients here have low vision, and a ctrl+click multi-select
   hides most options, needs a modifier key, and is unusable on touch.
   Cards give every option a large, always-visible tap target. */
.choice-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 20px;
  margin-bottom: 8px;
}
.choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 13px 16px;
  border: 1px solid #e6e8eb;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: #0e204d;
  cursor: pointer;
  transition: border-color 0.2s linear, background-color 0.2s linear;
}
.choice:hover {
  border-color: #1f7493;
}
.choice input {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: #1f7493;
  cursor: pointer;
}
/* Progressive enhancement — without :has() the native checkbox still
   shows the state, this just tints the whole card. */
.choice:has(input:checked) {
  border-color: #1f7493;
  background-color: rgba(31, 116, 147, 0.07);
}
/* .choice sets display:flex, so [hidden] needs an explicit override to
   actually hide filtered-out options. */
.choice[hidden] {
  display: none;
}
/* Physician labels carry credentials and a title, so they wrap to two or
   three lines in a half-width card. Give that group the full width; the
   short area-of-care names stay two-up. */
#doctorChoices {
  grid-template-columns: 1fr;
}
@media (max-width: 767px) {
  .choice-group {
    grid-template-columns: 1fr;
  }
}

/* reCAPTCHA v3's badge is shown (rather than hidden behind an attribution
   line), which is what carries Google's required notice. It floats at
   bottom: 14px and stands 60px tall, landing on top of #scrollTopBtn
   (style.css:3747, bottom: 30px) — so lift the scroll button clear of it.
   Keyed off a body class rather than :has(.grecaptcha-badge), because the
   badge is injected after first paint and the :has() match did not
   re-resolve the button's style when it appeared. */
.has-recaptcha #scrollTopBtn {
  bottom: 90px;
}