/* RehabAccess custom overrides — kept separate from the vendor style.css */

/*
 * Brand colors sampled directly from the RehabAccess logo (logo.svg):
 * red from the icon/"R", blue from "ehab", green from "Access". These
 * override the theme's default purple so every button, link, and hover
 * state site-wide (both driven by these CSS vars) matches the logo.
 */
:root {
  --theme-color: #ED1C24;
  --secondary-color: #33A452;
  --blue-color: #4486F4;
  /*
   * --title-color is the theme's dark neutral, used for heading/body text
   * color only (dark section backgrounds now use --blue-color directly,
   * the logo's exact blue, per the client's request). Left as this dark
   * navy blend rather than the theme's original teal so text still reads
   * as part of the same brand palette.
   */
  --title-color: #1C253B;
}

/*
 * Header top bar: give it a solid dark background so the contact/hours
 * info and WhatsApp link stay legible on every page, not just pages with
 * a dark hero/breadcrumb image behind the (normally transparent) header.
 */
.header-layout1 .header-top-area {
  background-color: var(--blue-color);
  padding: 10px 0;
}
.header-top-whatsapp a {
  color: var(--white-color);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
}
.header-top-whatsapp a i {
  color: #25d366;
  margin-right: 8px;
  font-size: 16px;
}
.header-top-whatsapp a:hover {
  color: #25d366;
}

/* Floating WhatsApp button, shown on every page */
.whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 56px;
  height: 56px;
  background-color: #25d366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white-color);
  font-size: 26px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  z-index: 999;
  transition: transform 0.2s ease;
}
.whatsapp-float:hover {
  color: var(--white-color);
  transform: scale(1.08);
}

/*
 * Home hero redesign: text on a plain dark panel (left) instead of laid
 * over the photo, with the photo contained in its own rounded box (right)
 * — the split layout from the reference site. This replaces the old
 * full-bleed photo hero, which forced white text to fight for contrast
 * against whatever was underneath it.
 */
.rehab-hero {
  background-color: var(--blue-color);
  overflow: hidden;
}
.rehab-hero .vs-hero-inner {
  height: auto !important;
  min-height: 0 !important;
  padding: 170px 0 90px !important;
  position: relative;
}
.rehab-hero .vs-hero-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 42px 42px;
  pointer-events: none;
}
.rehab-hero .container {
  position: relative;
  z-index: 1;
}
.hero-photo-box {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
}
.hero-photo-box img {
  width: 100%;
  height: 460px;
  object-fit: cover;
  display: block;
}
.hero-photo-badge {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  background-color: var(--white-color);
  padding: 14px 18px;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  max-width: 320px;
}
.hero-photo-badge-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: rgba(237, 28, 36, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hero-photo-badge-icon i {
  color: var(--theme-color);
  font-size: 18px;
}
.hero-photo-badge strong {
  display: block;
  color: var(--title-color);
  font-size: 14px;
}
.hero-photo-badge span {
  display: block;
  color: var(--body-color);
  font-size: 12px;
}
@media (max-width: 991px) {
  .rehab-hero .vs-hero-inner {
    padding: 150px 0 60px !important;
  }
  .hero-photo-box img {
    height: 320px;
  }
}

/*
 * .hero-title.style-2 is 72px by default, sized for the old full-width
 * (800px) single-column hero. In the new two-column layout the text sits
 * in a half-width column, so 72px wrapped into 6 towering lines. Scale it
 * down to fit a ~600px column comfortably.
 */
.rehab-hero .hero-title.style-2 {
  font-size: 42px;
  line-height: 1.25;
  margin-bottom: 22px;
}
@media (max-width: 575px) {
  .rehab-hero .hero-title.style-2 {
    font-size: 32px;
  }
}

/*
 * Inner-page banners (About, Services, Contact, ...) sit on top of a photo,
 * so a decorative grid/pattern layer just looked like screen noise across
 * the photo and text (tried it, it looked broken — removed). A one-sided
 * dark scrim gives the white heading text real contrast regardless of how
 * bright the photo underneath is.
 */
.breadcumb-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 75%;
  height: 100%;
  background: linear-gradient(90deg, rgba(9, 14, 21, 0.88) 0%, rgba(9, 14, 21, 0.55) 60%, rgba(9, 14, 21, 0) 100%);
  z-index: 2;
  pointer-events: none;
}
.breadcumb-wrapper {
  position: relative;
  overflow: hidden;
}
.breadcumb-wrapper::after {
  z-index: 0;
}
.breadcumb-content {
  position: relative;
  z-index: 1;
}

/*
 * Theme bug: .blog-card .blog-content has padding-top:145px and
 * margin-top:-110px because the design expects a .blog-img photo sitting
 * above it that the card rides up into. The Knowledge Hub cards on the
 * Resources page are text-only (title + excerpt, no photo), so with no
 * image to overlap, that negative margin pulled each card up into the row
 * above it, and neighbouring cards' text bled through the empty gap where
 * an image should have been.
 */
.blog-layout1 .blog-card .blog-content {
  margin-top: 0;
  padding-top: 33px;
}

/*
 * Theme bug: .service-img > img has no fixed height, so each photo's own
 * aspect ratio decides the card's height. The service photos are a mix of
 * landscape and portrait crops, so cards in the same row ended up wildly
 * different heights (e.g. Telehealth's portrait photo towered over
 * Occupational Therapy's landscape one). Fixed height + object-fit crops
 * every photo to the same size so all cards in a row line up.
 */
.service-box-three .service-img > img {
  height: 220px;
  object-fit: cover;
}
.service-box-three {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.service-box-three .service-content {
  flex-grow: 1;
}

/*
 * Theme bug: the About section's feature checklist ("Individualised
 * Therapy Plans", "Family & Caregiver Involvement", ...) sets each <li> to
 * 24px bold with no flex layout, just an icon with margin-right followed
 * by inline text. Short demo phrases never wrapped, so nobody noticed the
 * icon and text weren't actually aligned as a row — our real phrases are
 * longer, wrap to a second line, and that line falls back to the left
 * edge under the icon instead of lining up with the first line's text.
 */
.about-layout1 .check-list1 .about-list li {
  display: flex;
  align-items: flex-start;
  font-size: 17px;
  gap: 14px;
}
.about-layout1 .check-list1 .about-list li img {
  margin-right: 0;
  margin-top: 2px;
  flex-shrink: 0;
}

/*
 * The 7 service icon badges used to be 7 different leftover template
 * images — some thin red line-art, some thick and opaque, one orange, one
 * a solid photo-icon that painted over its own red badge — so the row of
 * badges never matched. Swapped each for a plain Font Awesome glyph in the
 * controller; this just centers and colors that glyph consistently.
 *
 * Also shrank the badge and moved it fully inside the photo (bottom-right,
 * like a small tag chip) instead of the theme's default — a big 70px
 * square hanging half off the bottom edge of the image, breaking into the
 * card below it. Contained inside the photo it reads as a clean, modern
 * card instead of a template badge overflowing its own image.
 */
.service-box-three .service-img .service-icon {
  width: 46px;
  height: 46px;
  line-height: 46px;
  bottom: 14px;
  left: auto;
  right: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.service-box-three .service-icon i {
  color: var(--white-color);
  font-size: 18px;
  line-height: 46px;
}
.service-box-three .service-content {
  padding-top: 24px;
}
.service-box-three {
  box-shadow: 0 10px 30px rgba(16, 55, 65, 0.08);
}

/*
 * Same leftover-purple problem as the footer: the "Conditions We Support"
 * section's background image (classes-bg.png) is a purple/blue radial
 * gradient with no relation to the new brand colors. Removed the image
 * reference in the template; this supplies a plain dark background instead
 * so the white heading/text inside it still has contrast.
 */
.classes-layout1 {
  background-color: var(--blue-color);
}

/*
 * Theme bug: .class-box1 (the "Conditions We Support" cards) lays the
 * photo and text out side-by-side with a fixed white card behind them,
 * sized for a 2-column row. In our 3-column grid each card only has
 * ~390px to work with, but the image + text together need ~580px, so the
 * text overflowed the white card and spilled onto the next card's photo.
 * Replaced with the same photo-on-top, content-below card style already
 * used for Services, which has no minimum-width requirement.
 */
.condition-card {
  background-color: var(--white-color);
  border-radius: 20px;
  overflow: hidden;
  height: 100%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.condition-card-img img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}
.condition-card-content {
  padding: 26px 28px 30px;
}
.condition-card-title {
  margin-bottom: 10px;
}
.condition-card-title a {
  color: var(--title-color);
  font-size: 20px;
  font-weight: 700;
}
.condition-card-title a:hover {
  color: var(--theme-color);
}
.condition-card-text {
  color: var(--body-color);
  margin-bottom: 0;
}

/*
 * The trust-bar strip (one sub-title line + a 4-item checklist) used the
 * theme's full 120px section spacing on both top and bottom, same as
 * every full section. Stacked against the About section's own 120px top
 * padding right below it, that left ~240px of empty space between two
 * short lines of text and the About content — most of a screen's height
 * with nothing in it. This is light connective content, not a full
 * section, so it gets a smaller padding of its own.
 */
.trust-bar-section {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}

/*
 * The testimonial section's background (testi-bg.png) was a giant purple
 * speech-bubble shape with faint embossed lettering from the old template
 * — an odd, oversized shape unrelated to the brand, not just the wrong
 * color. Removed it in favour of the same plain dark background used for
 * the other dark sections, so quotes are readable without the decoration.
 */
.testimonial-section1 {
  background-color: var(--blue-color);
}

/*
 * The footer's background image (footer-bg-5.png) is a baked-in purple/
 * magenta gradient left over from the old template — it clashed badly with
 * the red/blue/green brand colors everywhere else. Client asked for the
 * footer specifically to be blue (a dark navy shade of the logo's blue),
 * distinct from the mixed dark tone used for the header/other sections.
 */
.footer-layout5 {
  background-color: var(--blue-color);
}

/*
 * Theme bug: .breadcumb-wrapper has z-index:2 but .header-layout1 (the
 * logo/nav bar, absolutely positioned over the top of every page) only has
 * z-index:1. Every inner page (About, Services, Contact, ...) opens with a
 * breadcrumb banner, so on all of them the banner was stacking on top of
 * and completely hiding the header — no visible navigation at all except
 * the "Home" breadcrumb link. Raise the header above it.
 */
.header-layout1 {
  z-index: 10;
}

/*
 * The theme paints the whole nav pill in --theme-color. Now that
 * --theme-color is the logo red, a full-width solid red bar reads as loud
 * and alarm-like rather than a calm clinic brand, so keep the pill white
 * and use red only for the CTA button and hover states — same as the
 * white "R" backdrop already behind the logo.
 */
.header-layout1 .menu-style1 {
  background-color: var(--white-color);
  box-shadow: 0 6px 20px rgba(16, 55, 65, 0.08);
}
.header-layout1 .main-menu > ul > li > a {
  color: var(--title-color);
}
.header-layout1 .main-menu > ul > li > a:hover {
  background-color: var(--secondary-color);
  color: var(--white-color);
}
.header-layout1 .header-button .vs-btn {
  background-color: var(--theme-color);
  font-size: 15px;
  padding: 10px 24px;
  min-width: 0;
}
.header-layout1 .header-button .vs-btn:hover {
  color: var(--white-color);
  background-color: var(--secondary-color);
}
/*
 * Theme bug found while fixing this: the button's hover state is actually
 * driven by 4 animated circles ("btn-hover .part") that slide up from
 * behind and visually fill the button — the :hover background-color
 * above almost never shows on its own. The theme hard-coded those circles
 * to white (for its original white-pill hover style), so once the button
 * itself was set to hover green, the white circles covered it completely
 * and — worse — covered the (also white) hover text, making the label
 * disappear. The circles need to be the same green for the fill to work.
 */
.header-layout1 .header-button .vs-btn .btn-hover .part {
  background: var(--secondary-color);
}

/*
 * Header: with the longer nav ("Conditions We Treat") and the longer
 * "Book Appointment" button label, the nav + toggle/button row is wider than
 * the theme's original nav. Forcing it onto one line caused it to overflow
 * and get clipped off-screen at common desktop widths, so instead: let it
 * wrap when there truly isn't room, but keep the toggle/button pinned to the
 * right on its own line (instead of the default flex-wrap behaviour, which
 * drops it to the far left). When there IS room, the auto-margin below pulls
 * it flush right on the same line as the nav, which is the intended look.
 */
@media (min-width: 1200px) {
  .header-layout1 .menu-style1 > .row {
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 12px;
  }
  .header-layout1 .menu-style1 > .row > .col-auto:first-child {
    margin-right: auto;
  }
  .header-layout1 .header-button {
    position: static;
    top: auto;
    transform: none;
  }
  .header-layout1 .main-menu > ul > li > a {
    padding: 5px 9px;
  }
}

@media (min-width: 1200px) and (max-width: 1439px) {
  .header-layout1 .main-menu > ul > li > a {
    font-size: 16px;
    padding: 5px 7px;
  }
  .header-layout1 .header-button .vs-btn {
    font-size: 16px;
    padding: 11px 18px;
  }
}

/*
 * Theme bug (same family as the service-card photos): the service detail
 * page's main image is just width:100% with no height cap, so at full
 * column width a portrait-cropped photo like Special Education's towers
 * over the page, pushing all the real content (title, description, areas
 * of support, button) below the fold. Cap it to a normal banner height.
 * !important is needed here because the theme's own reset
 * (img:not([draggable]) { height: auto }) is more specific than a plain
 * class selector and was winning over a plain height:420px.
 */
.service-detail-img {
  height: 420px !important;
  object-fit: cover;
  border-radius: 10px;
}
@media (max-width: 767px) {
  .service-detail-img {
    height: 280px !important;
  }
}

/*
 * Sitewide: .sec-title.big-title ("Rehabilitation Built Around Each
 * Person's Goals" and the same class on every page's "Book an
 * Assessment" CTA heading) is 60px by default (48/40/36 at the theme's
 * breakpoints) — too large for the Baloo 2 display font at this weight.
 * Scale it down a step at every breakpoint, everywhere the class appears.
 */
.sec-title.big-title {
  font-size: 50px;
}
@media (max-width: 1199px) {
  .sec-title.big-title {
    font-size: 42px;
  }
}
@media (max-width: 991px) {
  .sec-title.big-title {
    font-size: 36px;
  }
}
@media (max-width: 767px) {
  .sec-title.big-title {
    font-size: 30px;
  }
}
@media (max-width: 575px) {
  .sec-title.big-title {
    font-size: 26px;
  }
}

/*
 * Theme bug: the default --border-color (rgb(238, 241, 242)) is almost
 * indistinguishable from the white form-control background, so on the
 * Book Appointment and Contact forms the input/select/textarea outlines
 * are essentially invisible, leaving fields looking borderless and
 * unstructured. Give these forms a clearly visible border instead.
 */
.contact-form .form-control {
  border: 2px solid #9aa5b1;
}
.contact-form .form-control:focus {
  border-color: var(--theme-color);
}

/* Required-field marker on form labels (e.g. "Your Name*") */
.required-star {
  color: var(--theme-color);
}

/*
 * Loading spinner shown on a form's submit button while an ajax-contact
 * form (Leave a Message / Book Appointment) is being sent, so the click
 * has visible feedback and the disabled button (see ajax-mail.js) reads
 * as "in progress" rather than just inert.
 */
.contact-form button[type="submit"].is-loading {
  opacity: 0.85;
  cursor: not-allowed;
}
.btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--white-color);
  border-radius: 50%;
  vertical-align: -2px;
  animation: btn-spinner-spin 0.7s linear infinite;
}
@keyframes btn-spinner-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Photo treatments for the plain (no baked-in shape) home page images */
.about-layout1 .about-img img,
.service-bg img,
.img-box-3 img {
  width: 100%;
  height: auto;
  border-radius: 28px;
  box-shadow: 0 18px 40px rgba(16, 55, 65, 0.15);
}

/*
 * Inner page banner: the theme's [data-overlay="title"]::before is a
 * flat, full-width dark fill at full opacity — stacked on top of the
 * left-to-right text-contrast gradient (.breadcumb-wrapper::after) above,
 * it doubled up and turned the whole banner near-black, hiding the photo.
 * Dial it down to a light tint; the gradient already does the real work of
 * keeping the white heading text readable over the photo.
 */
.breadcumb-wrapper[data-overlay="title"]::before {
  opacity: 0.25;
}