/* ============================================================
   Belfast Wellness Clinic — Site-specific overrides
   FILE: belfast-wellness.css
   Loaded after custom.css (the base Spawell template).

   BRAND PALETTE
   ─────────────────────────────────────────────────────────
   Deep Tide       #143e42   — primary dark teal
   Services Teal   #235156   — slightly lighter teal for services panel
   Warm Sand       #ddccb8   — warm pale beige
   Sage Mist       #b0ceb8   — soft mid-tone mint
   Pale Mint       #eef0ef   — very light mint, cards & form backgrounds
   Pale Mint Dark  #d6e1d9   — slightly deeper mint, card circle fills
   White           #ffffff
   Body grey       #868686

   BUTTON RULES (global)
   ─────────────────────────────────────────────────────────
   On WHITE / PALE backgrounds  → Deep Tide bg, white text
   On DARK backgrounds          → Warm Sand bg, Deep Tide text

   HEADING WEIGHT RULES (global)
   ─────────────────────────────────────────────────────────
   .section-title h2            → font-weight: 400
   .section-title h2 span       → font-weight: 600
   ============================================================ */


/* ============================================================
   01. CSS CUSTOM PROPERTIES (root variables)
   ============================================================ */

:root {
  /* Deep Tide — primary dark teal, replaces charcoal #333 */
  --primary-color:           #143e42;

  /* Warm Sand — used for dark-bg button backgrounds and accents */
  --secondary-color:         #ddccb8;

  /* Deep Tide — nav bar active state, preloader, dark panels */
  --accent-secondary-color:  #143e42;

  /* White page/card backgrounds */
  --bg-color:                #ffffff;

  /* Body paragraph text */
  --text-color:              #868686;

  /* Deep Tide — buttons, links, icon circles */
  --accent-color:            #143e42;

  --white-color:             #ffffff;

  /* Deep Tide at ~10% opacity — light dividers on white backgrounds */
  --divider-color:           #143e421a;

  /* Warm Sand at ~10% opacity — dividers on dark backgrounds */
  --dark-divider-color:      #ddccb81a;

  --error-color:             rgb(230, 87, 87);

  /* Gotham replaces Plus Jakarta Sans */
  --default-font:            "gotham", sans-serif;

  /* Gotham replaces Lora — italic weight carries the display contrast role */
  --accent-font:             "gotham", sans-serif;

  /* ── Custom palette additions ── */

  /* Slightly lighter teal — featured services section background */
  --services-teal:           #235156;

  /* Very light mint — card backgrounds, appointment form */
  --pale-mint:               #eef0ef;

  /* Slightly deeper mint — circle fill overlays on pale mint cards */
  --pale-mint-dark:          #d6e1d9;

  /* Sage Mist — testimonials section background */
  --sage-mist:               #b0ceb8;

  /* Warm Sand — full value for convenience */
  --warm-sand:               #ddccb8;
}


/* ============================================================
   02. GLOBAL HEADING WEIGHTS
   ============================================================ */

.section-title h1 { font-weight: 400; }
.section-title h1 span { font-weight: 600; }
.section-title h2 { font-weight: 400; }
.section-title h2 span { font-weight: 600; }


/* ============================================================
   03. SHARED PATTERNS
   Common rules used across multiple sections.
   Change here — updates everywhere.
   ============================================================ */

/* ── Buttons: light/white bg → Deep Tide bg, white text ── */
.about-us .btn-default,
.our-team .btn-default,
.our-team .section-btn .btn-default,
.appointment-form .btn-default,
.our-testimonials .btn-default,
.page-header .btn-default {
  background-color: var(--primary-color);
  color:            #ffffff;
}

.about-us .btn-default::after,
.our-team .btn-default::after,
.our-team .section-btn .btn-default::after,
.appointment-form .btn-default::after,
.our-testimonials .btn-default::after {
  background-color: #0d2b2e; /* darker Deep Tide hover fill */
}

.about-us .btn-default:hover,
.our-team .btn-default:hover,
.our-team .section-btn .btn-default:hover,
.appointment-form .btn-default:hover,
.our-testimonials .btn-default:hover {
  color: #ffffff;
}

/* ── Buttons: dark bg → Sand bg, Deep Tide text, Deep Tide arrow ── */
.our-services .btn-default,
.hero-btn .btn-highlighted {
  background-color: var(--warm-sand);
  color:            var(--primary-color);
}

.our-services .btn-default::before,
.hero-btn .btn-highlighted::before {
  background-image: url('../images/arrow-deep-tide.svg');
}

.our-services .btn-default::after,
.hero-btn .btn-highlighted::after {
  background-color: #c9b89e; /* slightly darker Sand hover fill */
}

.our-services .btn-default:hover,
.hero-btn .btn-highlighted:hover {
  color: var(--primary-color);
}

/* ── Social icon buttons — Deep Tide bg, white icon ── */
.team-social-list ul li a,
.member-social-list ul li a {
  background: var(--primary-color);
  color:      #ffffff;
}

.team-social-list ul li:hover a,
.member-social-list ul li:hover a {
  background: #0d2b2e;
  color:      #ffffff;
}

/* ── Card/section circle overlay — shared ::before geometry ──
   Each section sets its own colours and sizing below. */
.about-us-item::before,
.our-services::before {
  content:       '';
  position:      absolute;
  left:          50%;
  transform:     translateX(-50%);
  border-radius: 50%;
  z-index:       0;
}

/* ── Icon circles — Deep Tide default across all sections ── */
.service-item .icon-box,
.benefit-counter-item .icon-box,
.why-choose-item-header .icon-box,
.footer-contact-item .icon-box{
  background-color: var(--primary-color);
}


.contact-info-item .icon-box {
  background-color: var(--warm-sand);
}



/* ── Section headings on light/pale backgrounds — Deep Tide ── */
.our-testimonials .section-title h2,
.our-testimonials .section-title h2 span,
.our-testimonials .section-title h3,
.our-testimonials .section-title p,
.our-testimonials .section-title h3::before {
  color: var(--primary-color);
}

.our-testimonials .section-title h3::before {
  background-color: var(--primary-color);
}


/* ============================================================
   04. GLOBAL BUTTON BASE
   Default button: Deep Tide bg, white text.
   Sections override as needed above.
   ============================================================ */

.btn-default {
  background-color: var(--primary-color);
  color:            #ffffff;
}

.btn-default::after {
  background-color: #0d2b2e;
}

.btn-default:hover {
  color: #ffffff;
}

/* Dark-bg utility class */
.btn-on-dark,
.btn-default.btn-on-dark {
  background-color: var(--warm-sand);
  color:            var(--primary-color);
}

.btn-on-dark::after,
.btn-default.btn-on-dark::after {
  background-color: #c9b89e;
}

.btn-on-dark:hover,
.btn-default.btn-on-dark:hover {
  color: var(--primary-color);
}

/* Highlighted variant */
.btn-default.btn-highlighted {
  background-color: var(--warm-sand);
  color:            var(--primary-color);
}

.btn-default.btn-highlighted::after {
  background-color: #c9b89e;
}

.btn-default.btn-highlighted:hover {
  color: var(--primary-color);
}

/* Border/outline variant */
.btn-default.border-btn {
  background:   transparent;
  border-color: var(--primary-color);
  color:        var(--primary-color);
}

.btn-default.border-btn::after {
  background-color: var(--primary-color);
}

.btn-default.border-btn:hover {
  color: #ffffff;
}

/* Utility secondary button */
.btn-secondary {
  background-color: var(--warm-sand);
  color:            var(--primary-color);
  border:           1px solid var(--primary-color);
}


/* ============================================================
   05. PRELOADER & DARK PANELS
   ============================================================ */

.preloader {
  background: var(--primary-color);
}

.bg-section.dark-section {
  background-color: var(--primary-color);
}


/* ============================================================
   06. NAVIGATION
   ============================================================ */

header.main-header .header-sticky.active {
  background: var(--primary-color);
}

.slicknav_menu {
  background: var(--primary-color);
}

.slicknav_nav a:hover,
.slicknav_nav a:focus,
.slicknav_nav .slicknav_row:hover {
  color: #ffffff;
}

.slicknav_open > a .slicknav_arrow:after {
  color: #ffffff;
}


/* ============================================================
   07. PAGE HEADERS
   ============================================================ */

.page-header {
  position:         relative;
  background-color: var(--primary-color);
  background-image: none !important;
}


/* ============================================================
   08. HERO SECTION
   ============================================================ */

.hero {
  background-image: url('../images/custom/hero-bg.png');
}

.hero.hero-bg-image {
  background: url('../images/custom/hero-bg.jpg') no-repeat;
}

.hero-content .hero-btn .btn-default {
  text-transform: none;
}



/* "Book an Appointment" — header and hero
   Normal → Sand bg, Deep Tide text, Deep Tide arrow
   Hover  → slightly darker Sand bg, Deep Tide text, Deep Tide arrow */
.hero-btn .btn-highlighted,
.header-btn .btn-highlighted {
  background-color: var(--warm-sand);
  color:            var(--primary-color);
}

.hero-btn .btn-highlighted::before,
.header-btn .btn-highlighted::before,
.hero-btn .btn-highlighted:hover::before,
.header-btn .btn-highlighted:hover::before {
  background-image: url('../images/arrow-deep-tide.svg');
}

.hero-btn .btn-highlighted::after,
.header-btn .btn-highlighted::after {
  background-color: #c9b89e;
}

.hero-btn .btn-highlighted:hover,
.header-btn .btn-highlighted:hover {
  color: var(--primary-color);
}


/* "Our Services" border button
   Normal  → transparent, Sand text, Sand border, Sand arrow
   Hover   → Sand bg, Deep Tide text, Deep Tide arrow */
.hero-btn .border-btn {
  color:        var(--warm-sand);
  border-color: var(--warm-sand);
}

.hero-btn .border-btn::before {
  background-image: url('../images/arrow-sand.svg');
}

.hero-btn .border-btn::after {
  background-color: var(--warm-sand);
}

.hero-btn .border-btn:hover {
  color:        var(--primary-color);
  border-color: var(--warm-sand);
}

.hero-btn .border-btn:hover::before {
  background-image: url('../images/arrow-deep-tide.svg');
}


/* ============================================================
   09. ABOUT SECTION
   ============================================================ */

/* Button — handled by shared patterns (section 03) */

/* Cards — Pale Mint bg with Pale Mint Dark circle overlay */
.about-us-item {
  background: var(--pale-mint);
  position:   relative;
  overflow:   hidden;
}

/* Circle overlay — unique sizing for about cards */
.about-us-item::before {
  bottom:      -68%;
  width:       140%;
  height:      140%;
  background:  var(--pale-mint-dark);
}

/* Adjusted circle position for homepage about cards */
.home-about .about-us-item::before {
  bottom: -76%;
}

/* Card content above circle */
.about-us-item > * {
  position: relative;
  z-index:  1;
}

/* All text — Deep Tide */
.about-us-item h3,
.about-us-item p {
  color: var(--primary-color);
}


/* ============================================================
   10. FEATURED SERVICES SECTION
   ============================================================ */

/* Section — Services Teal bg, circle overlay, all children above it */
.our-services {
  background-color: #245156!important;
  position:         relative;
  overflow:         hidden;
}

.our-services h2 {
  max-width: 597px;
  margin:    auto;
}

/* Circle overlay — unique sizing for services section */
.our-services::before {
  bottom:     -60%;
  width:      130vw;
  height:     97vw;
  background: var(--primary-color);
}

.our-services > * {
  position: relative;
  z-index:  1;
}

/* Section headings — Sage Mist on dark bg */
.our-services .section-title h2,
.our-services .section-title h2 span {
  color: var(--sage-mist);
}

/* Eyebrow and body — Warm Sand on dark bg */
.our-services .section-title h3,
.our-services .section-title p {
  color: var(--warm-sand);
}

.our-services .section-title h3::before {
  background-color: var(--warm-sand);
}

/* Cards — Warm Sand default, Sage Mist on hover */
.service-item {
  background: var(--warm-sand);
}

.service-item .service-content h3,
.service-item .service-content h3 a,
.service-item .service-content p {
  color: var(--primary-color);
}

/* Hover fill — Sage Mist (overrides custom.css accent-color fill) */
.service-item::before {
  background-color: var(--sage-mist);
}

/* All text stays Deep Tide on Sage Mist hover */
.service-item.active .service-content h3,
.service-item:hover  .service-content h3,
.service-item.active .service-content h3 a,
.service-item:hover  .service-content h3 a,
.service-item.active .service-content p,
.service-item:hover  .service-content p,
.service-item.active .service-item-list ul li,
.service-item:hover  .service-item-list ul li,
.service-item.active .service-item-list ul li::before,
.service-item:hover  .service-item-list ul li::before,
.service-item.active .service-btn a,
.service-item:hover  .service-btn a {
  color: var(--primary-color);
}

/* Icon circle — Pale Mint on hover */
.service-item.active .icon-box,
.service-item:hover  .icon-box {
  background: var(--pale-mint);
}

.service-item .icon-box img {
  max-width: 46px;
}

/* Icon darkens on Pale Mint hover bg */
.service-item.active .icon-box img,
.service-item:hover  .icon-box img {
  filter: brightness(0);
}

/* Button — Sand bg, Deep Tide text handled by shared patterns (section 03).
   Arrow and hover unique to this section: */
.our-services .btn-default::before {
  background-image: url('../images/arrow-deep-tide.svg');
}

.our-services .btn-default:hover::before {
  background-image: url('../images/arrow-deep-tide.svg');
}

/* Footer note text */
.our-services .section-footer-text p,
.our-services .section-footer-text p a {
  color: var(--warm-sand);
}

.our-services::before {
  content:       '';
  position:      absolute;
  bottom:        -60%;
  left:          50%;
  transform:     translateX(-50%);
  width:         130vw;
  height:        97vw;
  background:    #153e44;
  border-radius: 50%;
  z-index:       0;
}
/* ============================================================
   11. BOOK APPOINTMENT SECTION
   ============================================================ */

/* Section — white fading into Pale Mint */
.book-appointment {
  background: linear-gradient(
    to bottom,
    #ffffff     0%,
    #ffffff    10%,
    var(--pale-mint) 20%,
    var(--pale-mint) 90%,
    #ffffff   100%
  );
  padding: 100px 0;
}

/* Form card — white so it lifts off Pale Mint */
.appointment-form {
  background: #ffffff;
}

/* Input fields — white */
.appointment-form .form-control {
  background-color: #ffffff;
}

/* Button — handled by shared patterns (section 03) */

/* Opening hours box — Pale Mint bg, Deep Tide text */
.appointment-timing-box {
  left:             unset;
  right:            30px;
  background-color: var(--pale-mint);
}

.appointment-timing-box h3,
.appointment-timing-box ul li {
  color: var(--primary-color);
}

/* Benefit counter — number 400, suffix span 600 */
.benefit-counter-content h2 {
  font-weight: 400;
}

.benefit-counter-content h2 span {
  font-weight: 600;
}


/* ============================================================
   12. TESTIMONIALS SECTION
   ============================================================ */

/* Section — Sage Mist bg, no template texture */
.our-testimonials,
.what-we-do {
  background-color: var(--sage-mist);
  background-image: none;
}

/* Section headings — handled by shared patterns (section 03) */

/* Body copy — Deep Tide */
.our-testimonials .section-title p,
.our-testimonials .section-title-content p,
.what-we-do p {
  color: var(--primary-color);
}

/* Quote text — Deep Tide */
.testimonial-content p {
  color:     var(--primary-color);
  margin:    0;
  font-size: 20px;
}

/* Divider below quote */
.testimonial-content {
  border-bottom:  1px solid var(--primary-color);
  margin-bottom:  30px;
  padding-bottom: 30px;
}

/* Author name and role */
.author-content h3 {
  font-size:      20px;
  text-transform: capitalize;
  color:          var(--primary-color);
  margin-bottom:  5px;
}

.author-content p {
  color:         var(--primary-color);
  margin-bottom: 0;
}

/* Google rating */
.goolge-rating-content .icon-rating i,
.goolge-rating-content p,
.satisfy-client-box p {
  color: var(--primary-color);
}

/* Prev/next buttons — Deep Tide bg, white arrow */
.testimonial-slider .testimonial-button-next,
.testimonial-slider .testimonial-button-prev {
  background: var(--primary-color);
}

.testimonial-slider .testimonial-button-next::before,
.testimonial-slider .testimonial-button-prev::before {
  color: #ffffff;
}

.testimonial-slider .testimonial-button-next:hover,
.testimonial-slider .testimonial-button-prev:hover {
  background: #0d2b2e;
}

.testimonial-slider .testimonial-button-next:hover::before,
.testimonial-slider .testimonial-button-prev:hover::before {
  color: #ffffff;
}

/* Button — handled by shared patterns (section 03) */


/* ============================================================
   13. OUR TEAM — homepage grid
   ============================================================ */

.our-team {
  padding: 100px 0 0;
}

.our-team h2 {
  max-width: 700px;
}

/* Cards — Pale Mint bg, Deep Tide text */
.team-item {
  background: var(--pale-mint);
}

.team-content h3,
.team-content h3 a,
.team-content p {
  color: var(--primary-color);
}

/* Social icons — handled by shared patterns (section 03) */

/* Button — handled by shared patterns (section 03) */

/* Book appointment row below cards */
.team-book-appointment {
  padding: 2rem 0;
}

.team-member p {
  display:         flex;
  align-items:     center;
  min-height:      60px;
  justify-content: center;
  font-size:       16px;
}

.team-book-appointment .btn-default {
  font-size: 15px;
  padding:   18px 48px 18px 16px;
}

.team-book-appointment .btn-default::before {
  right: -10px;
}


/* ============================================================
   14. ICONS — size overrides
   ============================================================ */

.benefit-counter-item .icon-box img,
.why-choose-item-header .icon-box img {
  max-width: 36px;
}


/* ============================================================
   15. TEAM — single member page
   ============================================================ */

.team-member-about-box {
  align-items: flex-start;
}

.team-member-image img {
  max-width:             unset;
  border-radius:         10px;
  -webkit-border-radius: 10px;
  -moz-border-radius:    10px;
  -ms-border-radius:     10px;
  -o-border-radius:      10px;
}

.team-member-image {
  padding: 2rem;
}

.member-info-list ul {
  padding-top: 2rem;
}

.member-social-list {
  justify-content: center;
  margin-top:      0;
  padding-top:     20px;
}

.member-info-list a {
  color: var(--primary-color);
}

/* Social icons — handled by shared patterns (section 03) */

/* Custom bullet list */
.team-member-content ul.member-bullets {
  margin:       1rem 0;
  padding-left: 1.25rem;
  list-style:   none;
}

.team-member-content ul.member-bullets li {
  position:     relative;
  margin:       0 0 0.5rem;
  padding-left: 1.25rem;
}

.team-member-content ul.member-bullets li::before {
  content:       '';
  position:      absolute;
  left:          0;
  top:           0.6em;
  width:         0.45rem;
  height:        0.45rem;
  border-radius: 50%;
  background:    var(--primary-color);
  transform:     translateY(-50%);
}

.team-member-content ul.member-bullets li:last-child {
  margin-bottom: 0;
}

@media only screen and (max-width: 767px) {
  .member-info-list ul li span {
    width: 76%;
  }
}

/* Two-column layout */
.page-team-detail {
  display:   flex;
  flex-wrap: wrap;
  gap:       40px;
}

.page-team-detail .col-experience,
.page-team-detail .col-personal {
  width: calc(50% - 20px);
}

@media (max-width: 980px) {
  .page-team-detail .col-experience,
  .page-team-detail .col-personal {
    width: 100%;
  }
}


/* ============================================================
   16. SERVICE PAGES — single service layout
   ============================================================ */

.service-entry h2 {
  margin-bottom: 2rem;
}

.service-entry h3 {
  margin-top:    2rem;
  margin-bottom: 1rem;
}

.service-entry h4 {
  margin-top:    2rem;
  margin-bottom: 1rem;
  color:         var(--primary-color);
}

@media (min-width: 1200px) {
  .service-entry h4 {
    font-size: 1.2rem;
  }
}

.service-entry p a,
.service-entry a {
  color: var(--primary-color);
}

.service-entry ul {
  display:        flex;
  flex-wrap:      nowrap;
  flex-direction: column;
  padding-bottom: 20px;
}

.service-entry ul li {
  width: 100%;
}

.service-entry img {
  width:         100%;
  aspect-ratio:  1 / 0.598;
  object-fit:    cover;
  border-radius: 20px;
}

@media (max-width: 980px) {
  .page-service-single .container .row {
    display:        flex;
    flex-direction: column-reverse;
  }
}


/* ============================================================
   17. CHIROPRACTIC PAGE
   ============================================================ */

.chiropractic-content p {
  margin-bottom: 2rem;
}

.our-approach {
  background-color: var(--bg-color);
  padding:          50px 0;
}

@media only screen and (max-width: 991px) {
  .our-approach {
    padding: 30px 0;
  }

  .chiropractic-content .approach-content {
    margin-top: 3rem;
  }
}


/* ============================================================
   18. CONTACT PAGE
   ============================================================ */

.contact-info-item {
  width:         100%;
  border-bottom: 1px solid var(--dark-divider-color);
  border-right:  none;
  padding:       20px 30px 20px 0;
  margin-bottom: 0;
}

.contact-info-item:nth-of-type(2n+2) {
  padding:       20px 0;
  border-bottom: 1px solid var(--dark-divider-color);
  border-right:  none;
}

/* Icon — handled by shared patterns (section 03) */

.contact-info-item .icon-box:hover {
  background: var(--primary-color);
}

.contact-item-content p a:hover,
.footer-contact-item-content p a:hover {
  text-decoration: underline;
  color:           #ffffff;
}

@media only screen and (min-width: 991px) {
  .contact-info-item {
    padding:       10px 30px 30px 0;
    margin-bottom: 20px;
  }

  .contact-info-item:nth-of-type(2n+2) {
    padding: 10px 0 30px;
  }
}


/* ============================================================
   19. FOOTER
   ============================================================ */

.footer-contact-item {
  align-items: flex-start;
}

.footer-contact-item-content ul {
  margin:     0.75rem 0 0;
  padding:    0;
  list-style: none;
}

.footer-contact-item-content ul li {
  padding:     0.35rem 0;
  line-height: 1.4;
  color:       #ffffff;
}

.footer-contact-item-content ul li + li {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}


/* ============================================================
   19. FOOTER
   ============================================================ */

/* All paragraph text — white */
.main-footer p,
.main-footer p a {
  color: #ffffff;
}

.main-footer p a:hover {
  color: var(--warm-sand);
}

/* All h3s — Sage Mist */
.main-footer h3 {
  color: var(--sage-mist);
}

/* Icon circles — Sage Mist bg */
.main-footer .footer-contact-item .icon-box {
  background-color: var(--dark-divider-color);
}

/* Opening hours list — white */
.footer-contact-item-content ul {
  margin:     0.75rem 0 0;
  padding:    0;
  list-style: none;
}

.footer-contact-item-content ul li {
  padding:     0.35rem 0;
  line-height: 1.4;
  color:       #ffffff;
}

.footer-contact-item-content ul li + li {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Align contact items to top */
.footer-contact-item {
  align-items: flex-start;
}

/* Buttons — Warm Sand bg, Deep Tide text */
.main-footer .btn-default,
.main-footer .btn-highlighted {
  background-color: var(--warm-sand);
  color:            var(--primary-color);
}

.main-footer .btn-default::before,
.main-footer .btn-highlighted::before {
  background-image: url('../images/arrow-deep-tide.svg');
}

.main-footer .btn-default::after,
.main-footer .btn-highlighted::after {
  background-color: #c9b89e;
}

.main-footer .btn-default:hover,
.main-footer .btn-highlighted:hover {
  color: var(--primary-color);
}

/* Social icons — Sage Mist bg, white icon */
.footer-social-links ul li a {
  background: var(--sage-mist);
}

.footer-social-links ul li a i {
  color: var(--primary-color);
}

.footer-social-links ul li:hover a {
  background: var(--dark-divider-color);
}

/* Footer nav links — white */
.footer-links ul li,
.footer-links ul li a {
  color: #ffffff;
}

.footer-links ul li a:hover {
  color: var(--warm-sand);
}

/* Copyright text — white */
.footer-copyright-text p {
  color: #ffffff;
}

/*INDIVIDUAL PAGES*/
.about-title-box h2 {
  max-width: 797px;
  margin:    auto;
}

.hero-section .section-title h1 {
  font-weight: 600;
}
.hero-section .section-title p {
  max-width: 600px;

}

.team-member-image,
.contact-us-form,
.page-catagery-list{
  background: var(--pale-mint);
}
.sidebar-cta-box{
  background: var(--sage-mist);
}
.sidebar-cta-content p {color:var(--primary-color)}