/* ============================================================
   Custom styles – both physio clinic sites
   Refines the hugo-universal-theme blue style with a cleaner,
   more professional aesthetic inspired by modern healthcare sites.
   ============================================================ */

/* ---- Typography ---- */

/* Arial with its metrics adjusted to match Open Sans, so text laid out before
   the webfont arrives does not reflow (and shift the page) when it swaps in. */
@font-face {
  font-family: 'Open Sans Fallback';
  src: local('Arial'), local('Liberation Sans'), local('Helvetica');
  size-adjust: 105.4%;
  ascent-override: 101.6%;
  descent-override: 27.9%;
  line-gap-override: 0%;
}

/* The theme sets Roboto on these; Roboto is no longer loaded (headers.html). */
.btn, .breadcrumb, .label, .pager, .pagination,
.h1, .h2, .h3, .h4, .h5, .h6,
#intro .item, .panel.sidebar-menu ul.nav.category-menu li a,
.ribbon .theribbon, #blog-post .comment .reply {
  font-family: 'Open Sans', 'Open Sans Fallback', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
body {
  font-family: 'Open Sans', 'Open Sans Fallback', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: #333;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Open Sans', 'Open Sans Fallback', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 600;
  color: #1a2e4a;
  line-height: 1.3;
}

h2 {
  font-size: 26px;
  margin-top: 32px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #e8f0f8;
}

h3 {
  font-size: 18px;
  margin-top: 24px;
  color: #2a4a72;
}

p {
  margin-bottom: 1.1em;
}

a {
  color: #2a6099;
}

a:hover {
  color: #1a3d63;
  text-decoration: underline;
}

/* ---- Top bar ---- */
#top {
  background: #1a2e4a;
  color: #c8d8eb;
  font-size: 13px;
  padding: 8px 0;
}

#top p {
  margin: 0;
  line-height: 1.8;
}

#top a {
  color: #c8d8eb;
}

#top a:hover {
  color: #fff;
  text-decoration: none;
}

#top .social a {
  color: #8aabcc;
  font-size: 13px;
  padding: 4px 8px;
  border-radius: 3px;
  transition: background 0.2s, color 0.2s;
}

#top .social a:hover {
  background: #2a4a72;
  color: #fff;
}

/* ---- Navigation ---- */
.navbar-affixed-top .navbar {
  border-top: 3px solid #2a6099;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.navbar-default {
  background: #fff;
}

.navbar-default .navbar-nav > li > a {
  color: #2a3d55;
  font-size: 14px;
  font-weight: 600;
  padding: 20px 14px;
  letter-spacing: 0.01em;
  transition: color 0.2s;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #2a6099;
  background: transparent;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover {
  color: #2a6099;
  background: transparent;
  border-bottom: 2px solid #2a6099;
}

.navbar-brand img {
  max-height: 54px;
}

/* ---- Carousel ---- */
.carousel-item,
.item {
  min-height: 420px;
  background-color: #1a2e4a;
  background-size: cover;
  background-position: center;
}

.carousel-caption,
.carousel .item .carousel-caption {
  background: rgba(20, 40, 70, 0.62);
  border-radius: 6px;
  padding: 24px 32px;
  bottom: 60px;
  text-shadow: none;
}

.carousel-caption h2,
.carousel-caption h3 {
  color: #fff;
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 8px;
  border: none;
}

.carousel-caption p,
.carousel-caption ul {
  color: #dce8f5;
  font-size: 16px;
  margin-bottom: 0;
}

.carousel-caption .btn {
  margin-top: 16px;
}

/* ---- Hero (home-carousel) background photo + slide text ---- */
.home-carousel {
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

.home-carousel .dark-mask {
  background: rgba(15, 30, 55, 0.55) !important;
  opacity: 1 !important;
}

.home-carousel .owl-carousel {
  padding-top: 80px;
  padding-bottom: 40px;
}

/* Before Owl Carousel's JS runs, the theme hides .owl-carousel entirely, so the
   hero is ~46px tall and then jumps to ~550px, shoving the rest of the page down
   (CLS ~0.49). Instead, stack every slide in one grid cell (so the box is as tall
   as the tallest slide, which is what Owl sizes to), show only the first, and
   reserve 40px for the pagination dots. These selectors only match before Owl
   initialises: it then moves the slides into .owl-item wrappers, so they stop
   being direct children. Measured: exact on phones and tablets, ~40px short on
   desktop (~0.01 CLS). */
.home-carousel .owl-carousel {
  display: grid;
}
.home-carousel .owl-carousel > .item {
  grid-area: 1 / 1;
  padding-bottom: 40px;
}
.home-carousel .owl-carousel > .item ~ .item {
  visibility: hidden;
}

.hero-slide-text {
  padding: 40px 24px;
}

.hero-slide-text .hero-slide-title {
  font-size: 42px;
  line-height: 1.3;
  margin-top: 20px;   /* Bootstrap's h1 value; the h2s must match it */
  padding-bottom: 0;  /* the theme pads h2s */
  font-weight: 700;
  color: #fff;
  text-transform: none;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
  margin-bottom: 16px;
  border: none;
}

.hero-slide-text p {
  color: #dce8f5;
  font-size: 18px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
  margin-bottom: 0;
}

.hero-cta {
  margin-top: 24px !important;
}

.hero-cta .btn-template-main {
  background: rgba(255,255,255,0.15);
  border: 2px solid #fff;
  color: #fff;
  font-size: 16px;
  padding: 12px 32px;
  backdrop-filter: blur(4px);
}

.hero-cta .btn-template-main:hover {
  background: #fff;
  color: #1a2e4a;
}

.hero-slide-row {
  align-items: center;
}

.hero-slide-img-col {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-slide-img {
  max-height: 200px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}

@media (max-width: 767px) {
  .hero-slide-img-col {
    display: none;
  }
}

/* ---- Features section ---- */
#features {
  padding: 56px 0;
  background: #f7f9fc;
}

#features h3 {
  font-size: 17px;
  color: #1a2e4a;
  margin-top: 12px;
  margin-bottom: 8px;
  border: none;
}

.features-item {
  text-align: center;
  padding: 28px 20px;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #e0eaf5;
  margin-bottom: 24px;
  transition: box-shadow 0.2s, transform 0.2s;
}

.features-item:hover {
  box-shadow: 0 4px 20px rgba(42, 96, 153, 0.12);
  transform: translateY(-2px);
}

.features-item .icon {
  font-size: 36px;
  color: #2a6099;
  margin-bottom: 14px;
  display: block;
}

.features-item p {
  color: #555;
  font-size: 14px;
  line-height: 1.6;
}

/* ---- Testimonials ---- */
#testimonials {
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-color: #1a2e4a;
  padding: 0;
  color: #fff;
}

.testimonials-overlay {
  background: rgba(15, 30, 55, 0.78);
  padding: 56px 0;
}

#testimonials h2 {
  color: #fff;
  border-color: rgba(255,255,255,0.2);
}

#testimonials h4 {
  color: #c8d8eb;
  font-size: 14px;
}

#testimonials .lead {
  color: #c8d8eb;
}

.testimonial-item {
  background: rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 24px;
  margin: 0 8px;
}

.testimonial-item p {
  color: #dce8f5;
  font-style: italic;
  font-size: 15px;
  line-height: 1.7;
}

/* ---- See More / CTA section ---- */
#see_more {
  background: #2a6099;
  padding: 40px 0;
  color: #fff;
}

#see_more h2,
#see_more h3,
#see_more p {
  color: #fff;
  border: none;
}

#see_more h3 {
  font-size: 22px;
  margin: 0 0 6px;
}

#see_more p {
  margin: 0 0 20px;
  font-size: 15px;
  color: #c8d8eb;
}

#see_more .btn {
  background: #fff;
  color: #2a6099;
  font-weight: 700;
  border-radius: 4px;
  padding: 10px 28px;
  font-size: 15px;
  border: 2px solid #fff;
  transition: background 0.2s, color 0.2s;
}

#see_more .btn:hover {
  background: transparent;
  color: #fff;
}

/* ---- Recent posts / blog ---- */
#recent_posts {
  padding: 56px 0;
  background: #fff;
}

#recent_posts h2,
#recent_posts .section-title {
  color: #1a2e4a;
}

.recent-post-item {
  border: 1px solid #e0eaf5;
  border-radius: 6px;
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.recent-post-item:hover {
  box-shadow: 0 4px 16px rgba(42, 96, 153, 0.1);
}

.recent-post-item .post-title a {
  color: #1a2e4a;
  font-weight: 600;
}

/* ---- Clients / insurers section ---- */
#clients {
  background: #f7f9fc;
  padding: 40px 0;
}

#clients h2 {
  font-size: 18px;
  text-align: center;
  color: #555;
  font-weight: 400;
  border: none;
  margin-bottom: 28px;
}

.insurer-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 32px 48px;
  padding: 8px 0 16px;
}

.insurer-logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.insurer-logo-item img {
  max-height: 56px;
  max-width: 150px;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.insurer-logo-item img:hover {
  opacity: 1;
}

/* ---- Footer ---- */
#footer {
  background: #1a2e4a;
  color: #8aabcc;
  padding: 48px 0 24px;
  font-size: 14px;
}

#footer h4 {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-bottom: 8px;
}

#footer a {
  color: #8aabcc;
}

#footer a:hover {
  color: #fff;
  text-decoration: none;
}

#footer p {
  color: #8aabcc;
  line-height: 1.7;
}

#footer .blog-entries .name h5 a {
  color: #8aabcc;
  font-size: 13px;
}

#footer .blog-entries .name h5 a:hover {
  color: #fff;
}

#copyright {
  background: #111e30;
  color: #5a7a99;
  font-size: 12px;
  padding: 14px 0;
}

#copyright p {
  margin: 0;
  line-height: 1.6;
}

#copyright a {
  color: #5a7a99;
}

/* ---- Footer columns ---- */
.footer-col {
  margin-bottom: 24px;
}

.footer-address p {
  margin-bottom: 4px;
}

.footer-clinic-name {
  display: block;
  color: #c8d8eb;
  font-size: 13px;
  margin-bottom: 4px;
  margin-top: 8px;
}

.footer-hours ul {
  list-style: none;
  padding: 0;
  margin: 0 0 8px 0;
}

.footer-hours ul li {
  font-size: 13px;
  color: #8aabcc;
  line-height: 1.8;
}

.footer-whatclinic {
  margin-top: 16px;
}

.footer-whatclinic a {
  display: inline-block;
}

.footer-whatclinic img {
  width: 120px;
  height: auto;
}

.footer-registrations {
  padding-top: 0;
}

.footer-reg-logos {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

.footer-reg-img {
  max-width: 180px;
  height: auto;
  opacity: 0.9;
  transition: opacity 0.2s;
}

.footer-reg-img:hover {
  opacity: 1;
}

/* ---- Page content ---- */
#content {
  padding: 48px 0;
}

#content h2:first-child {
  margin-top: 0;
}

/* ---- Blog post ---- */
#blog-post {
  font-size: 15px;
  line-height: 1.75;
}

#blog-post h1 {
  font-size: 28px;
  margin-bottom: 24px;
  border-bottom: 2px solid #e8f0f8;
  padding-bottom: 12px;
}

/* ---- Page heading banner (blog/inner pages) ---- */
#heading-breadcrumbs {
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-color: #1a2e4a;
  padding: 0;
}

.heading-breadcrumbs-overlay {
  background: rgba(15, 30, 55, 0.68);
  padding: 36px 0;
}

#heading-breadcrumbs h1 {
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  margin: 0;
  border: none;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* ---- Breadcrumbs ---- */
#page-breadcrumb {
  background: #f0f5fb;
  border-bottom: 1px solid #dce8f5;
  padding: 10px 0;
  font-size: 13px;
}

#page-breadcrumb .breadcrumb {
  background: transparent;
  margin: 0;
  padding: 0;
  font-size: 13px;
}

#page-breadcrumb .breadcrumb a {
  color: #2a6099;
}

/* ---- Buttons ---- */
.btn-template-main {
  background: #2a6099;
  color: #fff;
  border: 2px solid #2a6099;
  border-radius: 4px;
  font-weight: 600;
  padding: 9px 22px;
  font-size: 14px;
  transition: background 0.2s, color 0.2s;
}

.btn-template-main:hover,
.btn-template-main:focus {
  background: #1a3d63;
  border-color: #1a3d63;
  color: #fff;
}

/* ---- Contact page map ---- */
#map {
  height: 350px;
}

/* ---- Carousel image heights ---- */
.box-image-text .image {
  min-height: 190px;
  max-height: 190px;
  overflow: hidden;
}

.box-image-text .image img {
  max-height: 190px;
  width: 100%;
  object-fit: cover;
}

.box-simple {
  min-height: 230px;
}

/* ---- Responsive tweaks ---- */
@media (max-width: 768px) {
  .carousel-caption h2,
  .carousel-caption h3 {
    font-size: 22px;
  }

  .item, .carousel-item {
    min-height: 260px;
  }

  #content {
    padding: 32px 0;
  }

  #features,
  #recent_posts,
  #see_more {
    padding: 40px 0;
  }

  .testimonials-overlay,
  .heading-breadcrumbs-overlay {
    padding: 40px 0;
  }

  #map {
    height: 250px;
  }
}

@media (max-width: 480px) {
  .carousel-caption h2,
  .carousel-caption h3 {
    font-size: 18px;
    line-height: 1.2;
  }

  .carousel-caption p {
    font-size: 13px;
  }

  .carousel-caption .btn {
    font-size: 13px;
    padding: 6px 14px;
  }

  .item, .carousel-item {
    min-height: 200px;
  }
}

/* ---- Homepage intro (rendered from content-{site}/_index.md by carousel.html) ---- */
.home-intro {
  background: #fff;   /* the theme gives every .bar the blue accent background */
  padding: 50px 0 20px;
}
.home-intro p {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 16px;
}

/* ---- Mobile "Book now" under the hero (carousel.html, phones only) ---- */
.hero-book-mobile {
  position: relative;   /* sit above .dark-mask */
  z-index: 2;
  text-align: center;
  margin: -10px 0 0;
  padding-bottom: 32px;
}
.hero-book-mobile .btn-template-main {
  background: #fff;
  border: 2px solid #fff;
  color: #1a2e4a;
  font-weight: 700;
  font-size: 18px;
  padding: 14px 40px;
  min-width: 220px;
}
.hero-book-mobile .btn-template-main:hover,
.hero-book-mobile .btn-template-main:focus {
  background: #2a6099;
  border-color: #2a6099;
  color: #fff;
}