/**
Theme Name: Arbor Child Theme
Author: CEMYK Studio
Author URI: http://cemyk.net
Description: Custom child theme developed by CEMYK Studio for Arbor Neurorehabilitation Services. Built on the Astra framework, this theme includes bespoke styling, layouts, and CPT support tailored to Arbor’s brand and service structure.
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: arbor-child-theme
Template: astra
*/


/* ==================================================
   00. VARIABLES & SERVICE COLOURS
   ================================================== */

.service-neuropsychology { --service-color: #ed5a5a; --service-color-rgb: 237,90,90; }
.service-physiotherapy { --service-color: #63b3c6; --service-color-rgb: 99,179,198; }
.service-occupational-therapy { --service-color: #5bc48f; --service-color-rgb: 91,196,143; }
.service-speech-language-therapy { --service-color: #f8c864; --service-color-rgb: 248,200,100; }
.service-lld {--service-color: #7061af; --service-color-rgb: 112,97,175;}
.service-therapy-assistants { --service-color: #87adac; --service-color-rgb: 135,173,172; }
.service-all-services { --service-color: #c4c0b8; --service-color-rgb: 196,192,184; }

[class*="service-"]:not(.service-neuropsychology):not(.service-physiotherapy):not(.service-occupational-therapy):not(.service-speech-language-therapy):not(.service-later-life-dementia-care):not(.service-therapy-assistants):not(.service-lld):not(.service-all-services) {
  --service-color: #c4c0b8;
  --service-color-rgb: 196,192,184;
}


/* ==================================================
   01. BASE & UTILITIES
   ================================================== */

.custom-child { max-width: 1000px !important; margin: 0 auto; }

/* ==================================================
   02. TEAM COMPONENTS
   ================================================== */

/* Loop/Archive cards */
body:not(.single-team_member) .team-services-section {
  font-size: 14px;
	line-height: 1.2;
	background-color: var(--service-color);
  padding: 10px 10px;
  margin: -5px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}
body:not(.single-team_member) .team-services-section > p { margin: 0; }
body:not(.single-team_member) .team-card a { text-decoration: none !important; }

/* Loop/Archive cards - base and hover */
.loop-team-card {
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.25s ease;
  cursor: pointer;
}

.loop-team-card:hover,
.loop-team-card:focus-within {
  transform: translateY(-2px) scale(1.012);
  z-index: 2;
}

.loop-team-card a {
  text-decoration: none !important;
}

/* Single team member */
.team-services-section {
  color: var(--ast-global-color-0);
  background-color: var(--service-color);
  font-weight: 500;
  line-height: 1.2;
}

/* Desktop only */
@media (min-width: 921px) {
  .team-services-section {
    height: 70px;
  }
}

.team-pos-quali {line-height: 1.2;}

a.team-member-linkedin svg,
.team-member-linkedin svg {
  display: block;
  width: 28px;
  height: 28px;
  fill: currentColor;
}

body.single-team_member .team-card .uagb-heading-text a {
  color: var(--ast-global-color-0) !important;
  text-decoration: none;
}
body.single-team_member .team-card .uagb-heading-text a:hover {
  color: var(--ast-global-color-1);
  text-decoration: underline;
}

/* chrome collapsing profile images */
.team-loop-card .uagb-image img,
.team-member .uagb-image img,
.uagb-image img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    display: block;
}

/* ==================================================
   03. HEADER & NAVIGATION
   ================================================== */

/* Maintain header above other layers */
.site-header,
.ast-mobile-header-wrap,
.ast-desktop-header-content {
  position: relative;
  z-index: 1000;
}

/* Header buttons (mobile) */
@media (max-width: 768px) {
  .ast-header-button-1,
  .ast-header-button-2 {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    margin: 0;
    text-align: center;
  }
  .ast-mobile-header-content .ast-header-button-1,
  .ast-mobile-header-content .ast-header-button-2,
  .ast-mobile-popup-content .ast-header-button-1,
  .ast-mobile-popup-content .ast-header-button-2 {
    padding: 5px 15px !important;
  }
}


/* ==================================================
   04. MEGAMENU
   ================================================== */

.astra-megamenu.sub-menu {
  background-color: var(--ast-global-color-5) !important;
  border-top: 1px solid #ccc !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 0 15px 15px !important;
  overflow: hidden;
  list-style: none;
  padding: 0 !important;
}

.astra-megamenu.sub-menu .mm-item:hover {
  background: #f6f2e4;
  border-radius: 10px;
}

@media (max-width: 1300px) {
  .mm-services-title { display: none !important; }
}

@media (min-width: 922px) {
  .main-header-bar .astra-megamenu.sub-menu {
    position: fixed !important;
    top: 69px;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    z-index: 9999;
  }
}


/* ==================================================
   05. MAP
   ================================================== */

#team-map {
  border-radius: 15px;
  overflow: hidden;
  position: relative;
  z-index: 0 !important;
}

/* Keep map layers below nav */
.site-header,
.ast-primary-header-bar,
.ast-header-sticked,
.ast-desktop .main-header-bar .astra-megamenu.sub-menu {
  position: relative;
  z-index: 99999 !important;
}

.leaflet-control-container,
.leaflet-control {
  z-index: 1 !important;
}

.leaflet-control-zoom a {
  background: white;
  border: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  font-size: 1.5rem;
  line-height: 1;
}


/* ==================================================
   06. SERVICE PAGES
   ================================================== */

/* Background colour for service team sections */
.service-team {
  background-color: var(--service-color);
}

/* ----------------------------------------------
   SERVICE HEADER
   Desktop-first, then refined on tablet & mobile
   ---------------------------------------------- */

.service-header[class*="service-"] {
  background-color: rgba(var(--service-color-rgb), 0.3);
  color: var(--wp--preset--color--ast-global-color-4, #1a1a1a);

  /* Desktop (default) padding */
  padding-top: clamp(60px, 8vw, 120px);
  padding-right: 0;
  padding-bottom: clamp(40px, 6vw, 60px);
  padding-left: 0;
}

/* Tablet */
@media (max-width: 1024px) {
  .service-header[class*="service-"] {
    padding-top: 60px;
    padding-right: 24px;
    padding-bottom: 40px;
    padding-left: 24px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .service-header[class*="service-"] {
    padding-top: 40px;
    padding-right: 24px;
    padding-bottom: 24px;
    padding-left: 24px;
  }
}

/* ==================================================
   07. CTA BLOCKS
   ================================================== */

.user-cta-item {
  background: #0C4536;
  border-radius: 12px;
  /* Match loop card animation behaviour */
  transition: transform 0.25s ease,  background-color 0.25s ease, border-color 0.25s ease;
  will-change: transform;
}
.user-cta-item:hover,
.user-cta-item:focus-within {
  /* Grow the container like .loop-team-card */
  transform: translateY(-2px) scale(1.012);
  z-index: 2;
  /* Keep CTA background consistent (no fade) */
  background: #0C4536;
}
/* Optional a11y: keyboard focus ring if needed */
.user-cta-item:focus-visible {
  outline: 2px solid rgba(40,60,90,0.35);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .user-cta-item { transition: none !important; }
}


/* ==================================================
   08. SLIDER / INFOBOXES
   ================================================== */

/* Service colour hover */
/* Note: This rule applies to .arbor-infobox, not the slider cards below. */
/* It currently goes from 100% to 75% on hover. */
.arbor-infobox[class*="service-"] {
  background-color: var(--service-color);
  transition: background-color 0.25s ease-in-out;
}
.arbor-infobox[class*="service-"]:hover,
.arbor-infobox[class*="service-"]:active {
  background-color: rgba(var(--service-color-rgb), 0.75);
}

/* Hover interaction (service boxes) */
.arbor-service-info-box {
  overflow: visible !important;
}
.arbor-service-info-box .wp-block-uagb-container {
  display: block !important;
  position: relative;
  z-index: 1;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.arbor-service-info-box .wp-block-uagb-container:hover,
.arbor-service-info-box .wp-block-uagb-container:focus-within {
  transform: translateY(-2px) scale(1.012) !important;
  box-shadow: 0 6px 28px rgba(40,60,90,0.16) !important;
  z-index: 2;
}


/* ==================================================
   09. RESPONSIVE ADJUSTMENTS
   ================================================== */


@media (max-width: 922px) {
  .main-header-bar .astra-megamenu.sub-menu {
    position: fixed !important;
    top: 69px;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    z-index: 9999;
  }
}

@media (max-width: 768px) {
  .wp-block-uagb-slider-child:hover .swiper-content,
  .wp-block-uagb-slider-child:focus-within .swiper-content,
  .wp-block-uagb-slider-child:has(.uagb-infobox-link-wrap:hover) .swiper-content {
    transform: translateZ(0) scale(1.015);
  }
}

@media (max-width: 600px) {
  .custom-slider-nav {
    gap: 0.25rem;
    margin-top: 1rem;
  }
  .custom-slider-nav button {
    width: 32px;
    height: 32px;
    font-size: 1.1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wp-block-uagb-slider-child .swiper-content {
    transition: none !important;
  }
}
/* ==================================================
   10. BLOG CAROSEL EDIT
   ================================================== */
/* Curve both Top-Left and Top-Right corners */
.wp-block-uagb-post-carousel .uagb-post__image img {
    border-radius: 12px;
}