/* ==========================================================
   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;
  }
}

/* SMS consent checkbox above the submit button. Unchecked by default -
   consent must be an affirmative, separate act, not implied by entering a
   phone number. Echoes .choice's bordered-card look, sized for a full
   paragraph of disclosure text instead of a short label. */
.consent-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 20px 0 10px;
  padding: 16px 18px;
  border: 1px solid #e6e8eb;
  border-radius: 12px;
}
.consent-check input {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  accent-color: #1f7493;
  cursor: pointer;
}
.consent-check label {
  display: block;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: #4a5361;
  cursor: pointer;
}
/* Policy links live on their own line, separate from the consent
   paragraph itself, so the disclosure text and the "go read this
   elsewhere" links don't run together as one wall of text. */
.consent-check__links {
  margin: 10px 0 0;
  font-size: 14px;
  color: #6f7c8e;
}
.consent-check a {
  color: #1f7493;
  text-decoration: underline;
}
.consent-check:has(input:checked) {
  border-color: #1f7493;
  background-color: rgba(31, 116, 147, 0.07);
}

/* 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;
}