/* ==============================
   FOOTER FIXES - Remove Blur and Unnecessary Containers
   Applied globally to all pages
   ============================== */

/* Remove backdrop blur from all footer elements - target Tailwind classes */
.footer [class*="backdrop-blur"] {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Remove all borders from footer container divs */
.footer .relative[class*="border"] {
  border: none !important;
}

.footer .container.relative > div[class*="border"] {
  border: none !important;
}

/* Remove borders from nested footer divs */
.footer div[class*="border-x"],
.footer div[class*="border-y"],
.footer div[class*="border-b"],
.footer div[class*="border-t"],
.footer div[class*="border-primary_dark"] {
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: none !important;
}

/* Specifically target the border-x-[0.5px] and border-y-[0.5px] classes */
.footer [class*="border-x-\[0\.5px\]"],
.footer [class*="border-y-\[0\.5px\]"],
.footer [class*="border-b-\[0\.5px\]"] {
  border: none !important;
}

/* Remove borders from footer sections */
.footer section {
  border: none !important;
}

/* ==============================
   NAV LOGO CLICKABLE FIX - All Sub Pages
   Ensure logo links to homepage on all non-homepage pages
   ============================== */

/* Make logo container clickable on all sub pages */
body:not(.home):not(.page-id-850) #header .flex.flex-shrink-0.items-center a,
body:not(.home):not(.page-id-850) header .flex.flex-shrink-0.items-center a,
body:not(.home):not(.page-id-850) #header nav .flex.flex-shrink-0.items-center a {
  pointer-events: auto !important;
  cursor: pointer !important;
  display: block !important;
  text-decoration: none !important;
}

/* Ensure logo images don't block clicks */
body:not(.home):not(.page-id-850) #header .flex.flex-shrink-0.items-center a img,
body:not(.home):not(.page-id-850) header .flex.flex-shrink-0.items-center a img,
body:not(.home):not(.page-id-850) #header nav .flex.flex-shrink-0.items-center a img {
  pointer-events: none !important;
  display: block !important;
}

/* Make entire logo container clickable as backup */
body:not(.home):not(.page-id-850) #header .flex.flex-shrink-0.items-center,
body:not(.home):not(.page-id-850) header .flex.flex-shrink-0.items-center,
body:not(.home):not(.page-id-850) #header nav .flex.flex-shrink-0.items-center {
  cursor: pointer !important;
}

/* Ensure logo link has proper href */
body:not(.home):not(.page-id-850) #header .flex.flex-shrink-0.items-center a[href],
body:not(.home):not(.page-id-850) header .flex.flex-shrink-0.items-center a[href],
body:not(.home):not(.page-id-850) #header nav .flex.flex-shrink-0.items-center a[href] {
  pointer-events: auto !important;
  z-index: 10 !important;
  position: relative !important;
}

/* ==============================
   HIDE LOGO IN HEADER NAV - All Pages
   Remove logo from header navigation on all pages
   Override WordPress Custom CSS rules - MUST be more specific
   ============================== */

/* Hide logo container in header nav on ALL pages - override main CSS with exact path */
#header nav .container-full > div > div.flex.flex-shrink-0.items-center,
header nav .container-full > div > div.flex.flex-shrink-0.items-center,
#header .flex.flex-shrink-0.items-center,
header .flex.flex-shrink-0.items-center,
#header nav .flex.flex-shrink-0.items-center,
#header .flex.flex-shrink-0.items-center.order-1,
#header .flex.flex-shrink-0.items-center.order-2,
#header .flex.flex-shrink-0.items-center[class*="order-1"],
#header .flex.flex-shrink-0.items-center[class*="order-2"],
header .flex.flex-shrink-0.items-center.order-1,
header .flex.flex-shrink-0.items-center.order-2,
header .flex.flex-shrink-0.items-center[class*="order-1"],
header .flex.flex-shrink-0.items-center[class*="order-2"],
body:not(.home):not(.page-id-850) #header nav .container-full > div > div.flex.flex-shrink-0.items-center,
body:not(.home):not(.page-id-850) header nav .container-full > div > div.flex.flex-shrink-0.items-center,
body:not(.home):not(.page-id-850) #header .flex.flex-shrink-0.items-center.order-1,
body:not(.home):not(.page-id-850) #header .flex.flex-shrink-0.items-center.order-2,
body:not(.home):not(.page-id-850) #header .flex.flex-shrink-0.items-center[class*="order-1"],
body:not(.home):not(.page-id-850) #header .flex.flex-shrink-0.items-center[class*="order-2"],
body:not(.home):not(.page-id-850) header .flex.flex-shrink-0.items-center.order-1,
body:not(.home):not(.page-id-850) header .flex.flex-shrink-0.items-center.order-2,
body:not(.home):not(.page-id-850) header .flex.flex-shrink-0.items-center[class*="order-1"],
body:not(.home):not(.page-id-850) header .flex.flex-shrink-0.items-center[class*="order-2"],
body.home #header nav .container-full > div > div.flex.flex-shrink-0.items-center,
body.home header nav .container-full > div > div.flex.flex-shrink-0.items-center,
body.page-id-850 #header nav .container-full > div > div.flex.flex-shrink-0.items-center,
body.page-id-850 header nav .container-full > div > div.flex.flex-shrink-0.items-center {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
}

/* Hide logo images in header on ALL pages - override main CSS */
#header .main-logo,
#header img.main-logo,
#header .alter-logo,
#header img.alter-logo,
header .main-logo,
header img.main-logo,
header .alter-logo,
header img.alter-logo,
body:not(.home):not(.page-id-850) #header .main-logo,
body:not(.home):not(.page-id-850) #header img.main-logo,
body:not(.home):not(.page-id-850) header .main-logo {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Hide logo links in header on ALL pages */
#header .flex.flex-shrink-0.items-center a,
header .flex.flex-shrink-0.items-center a,
#header nav .flex.flex-shrink-0.items-center a,
body:not(.home):not(.page-id-850) #header nav a[href*="home"],
body:not(.home):not(.page-id-850) #header nav a[href="/"],
body:not(.home):not(.page-id-850) header nav a[href*="home"],
body:not(.home):not(.page-id-850) header nav a[href="/"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* ==============================
   CENTER SUBTITLE IN HEADER HERO - All Pages
   Center "Conditions We Treat" and similar subtitles when they appear alone
   ============================== */

/* Hide empty second div in hero subtitle container */
.block_hero-image .absolute.bottom-0 .inline-flex.justify-between > div:last-child:empty {
  display: none !important;
}

/* Center the container when there's only one visible child (either only-child OR second is empty/hidden) */
.block_hero-image .absolute.bottom-0 .inline-flex.justify-between:has(> div:only-child),
.block_hero-image .absolute.bottom-0 .inline-flex.justify-between:has(> div:last-child:empty),
.block_hero-image .absolute.bottom-0 .inline-flex.justify-between:has(> div:last-child[style*="display: none"]) {
  justify-content: center !important;
}

/* Center the text content when it's alone */
.block_hero-image .absolute.bottom-0 .inline-flex.justify-between:has(> div:only-child) > div,
.block_hero-image .absolute.bottom-0 .inline-flex.justify-between:has(> div:last-child:empty) > div:first-child {
  text-align: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
}

/* Additional fallback: center first child when second is not visible */
.block_hero-image .absolute.bottom-0 .inline-flex.justify-between > div:first-child:not(:empty) {
  text-align: center;
}

/* Ensure container centers content when only one child is visible */
.block_hero-image .absolute.bottom-0 .inline-flex.justify-between:not(:has(> div:last-child:not(:empty))) {
  justify-content: center !important;
}

/* ==============================
   HERO VIDEO OVERLAY OPACITY
   Reduce overlay opacity from 50% to 35% for better video visibility
   ============================== */
/* Target the hero video overlay - override opacity-50 class */
.block_hero-image div.absolute.top-0.left-0.w-full.h-full.bg-black.opacity-50,
.block_hero-image div[class*="opacity-50"][class*="bg-black"][class*="absolute"],
.block_hero-image > div > div.absolute.bg-black.opacity-50,
.block_hero-image div.absolute[class*="bg-black"][class*="opacity-50"] {
  opacity: 0.35 !important; /* Reduce from 50% to 35% */
}

/* ==============================
   MOBILE SPACING FIXES - Consolidated
   All mobile/iPhone fixes in one clean section
   ============================== */
@media (max-width: 768px) {
  /* ==============================
     FOOTER SPACING FIXES
     ONLY target footer section - ensure no homepage interference
     ============================== */
  /* Remove bottom padding/margin from footer section itself - be very specific */
  section.footer.pt-8,
  section.footer[class*="footer"],
  body > section.footer {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  /* Remove bottom padding ONLY from the LAST footer container (copyright/social section) */
  section.footer > div:last-child,
  .footer.pt-8 > div:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  /* Remove bottom padding from nested containers in LAST section only */
  section.footer > div:last-child > div,
  section.footer > div:last-child > div > div,
  section.footer > div:last-child .container,
  section.footer > div:last-child .container > div,
  .footer.pt-8 > div:last-child > div,
  .footer.pt-8 > div:last-child .container {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  
  /* Remove padding from copyright section specifically */
  section.footer .copyright,
  section.footer .copyright > div,
  .footer.pt-8 .copyright {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  
  /* Target padding-bottom classes ONLY in the last footer section */
  section.footer > div:last-child [class*="pb-12"],
  section.footer > div:last-child [class*="pb-16"],
  section.footer > div:last-child [class*="pb-20"],
  section.footer > div:last-child [class*="py-12"],
  section.footer > div:last-child [class*="py-16"],
  section.footer > div:last-child [class*="py-20"] {
    padding-bottom: 0 !important;
  }
  
  /* Reduce top padding from last footer section to fix social icons spacing */
  section.footer > div:last-child [class*="pt-16"] {
    padding-top: 1rem !important; /* Reduce from 64px to 16px */
  }
  
  /* Target the flex container with gap classes in the last section */
  section.footer > div:last-child .flex.flex-wrap {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  /* ==============================
     HOMEPAGE SPACING FIXES
     ============================== */
  /* Reduce massive padding on stats count section */
  .block_stats-count,
  body.home .block_stats-count,
  body.page-id-850 .block_stats-count {
    padding-top: 2rem !important; /* Reduce from 80px to 32px */
    padding-bottom: 2rem !important; /* Reduce from 80px to 32px */
  }
  
  /* ==============================
     CONDITIONS WE TREAT SECTION SPACING
     ============================== */
  /* Reduce padding on conditions grid container */
  .block_conditions-we-treat-posts-list .slide-container-conditions-grid.pt-16.pb-12,
  .block_conditions-we-treat-posts-list .slide-container-conditions-grid[class*="pt-16"][class*="pb-12"],
  .block_conditions-we-treat-posts-list div.slide-container-conditions-grid,
  .block_conditions-we-treat-posts-list div[class*="slide-container-conditions-grid"],
  div.pt-16.md\:pt-28.pb-12.md\:pb-20.slide-container-conditions-grid,
  div[class*="pt-16"][class*="pb-12"][class*="slide-container-conditions-grid"] {
    padding-top: 1.5rem !important; /* Reduce from pt-16 (64px) to 1.5rem (24px) */
    padding-bottom: 1.5rem !important; /* Reduce from pb-12 (48px) to 1.5rem (24px) */
  }
  
  /* Reduce spacing between title and paragraph */
  .block_conditions-we-treat-posts-list h2 {
    margin-top: 0 !important;
    margin-bottom: 0.75rem !important;
  }
  
  /* Reduce spacing after paragraph, before cards */
  .block_conditions-we-treat-posts-list p {
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
  }
  
  /* Reduce gap in flex containers */
  .block_conditions-we-treat-posts-list [class*="gap-28"] {
    gap: 1rem !important;
  }
  
  /* ==============================
     IPHONE SAFE AREA FIX
     Prevent sections from appearing too large on iPhone
     ============================== */
  /* Remove safe-area padding from all sections except footer */
  section:not(.footer):not(section.footer) {
    padding-bottom: 0 !important;
    min-height: auto !important;
    height: auto !important;
  }
  
  /* Specifically fix Conditions We Treat section */
  .block_conditions-we-treat-posts-list,
  section.block_conditions-we-treat-posts-list {
    padding-bottom: 0 !important;
    min-height: auto !important;
    height: auto !important;
  }
  
  /* Target the slide container */
  .block_conditions-we-treat-posts-list .slide-container-conditions-grid {
    min-height: auto !important;
    height: auto !important;
  }
  
  /* ==============================
     HIDE CONDITION SUB-TEXTS ON MOBILE
     ============================== */
  /* Hide ALL text-sm divs in condition cards on mobile */
  a[href*="conditions_category"] div.text-sm,
  a[href*="conditions_category"] > div > div > div.text-sm,
  a[href*="conditions_category"] > div > div div.text-sm,
  a[href*="conditions_category"] div[class*="max-w-"] div.text-sm,
  a[href*="conditions_category"] div[class*="max-w-"] > div.text-sm,
  a[href*="conditions_category"] > div div.text-sm,
  .block_conditions-category a[href*="conditions_category"] div.text-sm,
  .block_conditions-category a[href*="conditions_category"] > div > div > div.text-sm,
  .block_conditions-category a[href*="conditions_category"] div[class*="max-w-"] div.text-sm {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
  }
}

/* Smaller mobile devices */
@media (max-width: 480px) {
  .block_conditions-we-treat-posts-list div[class*="slide-container-conditions-grid"],
  .block_conditions-we-treat-posts-list div[class*="pt-16"][class*="pb-12"] {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
}

/* ==============================
   DESKTOP SPACING - Ensure proper spacing on larger screens
   ============================== */
@media (min-width: 769px) {
  /* Be specific - only target footer section, not homepage sections */
  section.footer.pt-8,
  section.footer[class*="footer"],
  body > section.footer {
    padding-bottom: 5rem !important; /* md:py-20 = 5rem */
  }
  
  section.footer > div:last-child,
  .footer.pt-8 > div:last-child {
    padding-bottom: 2rem !important; /* Increased for more padding */
  }
  
  /* Ensure last footer section has proper top padding on desktop */
  section.footer > div:last-child .container > div[class*="pt-16"] {
    padding-top: 3rem !important; /* md:pt-12 = 3rem (48px) */
  }
}

/* ==============================
   IPHONE SAFE AREA FIX - Global
   Prevent safe-area padding from affecting sections other than footer
   ============================== */

/* Remove safe-area padding from all sections except footer */
section:not(.footer):not(section.footer) {
    padding-bottom: 0 !important;
}

/* Only apply safe-area padding to the actual footer */
section.footer,
.footer,
footer {
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Specifically target the Conditions We Treat section */
.block_conditions-we-treat-posts-list,
section.block_conditions-we-treat-posts-list {
    padding-bottom: 0 !important;
    min-height: auto !important;
}

/* iPhone-specific fixes */
@supports (-webkit-touch-callout: none) {
    /* Remove any safe-area padding from non-footer sections */
    section:not(.footer):not(section.footer) {
        padding-bottom: 0 !important;
        min-height: auto !important;
    }
    
    /* Ensure Conditions We Treat section doesn't have extra height */
    .block_conditions-we-treat-posts-list,
    section.block_conditions-we-treat-posts-list {
        padding-bottom: 0 !important;
        min-height: auto !important;
        height: auto !important;
    }
    
    /* Remove padding from the container inside */
    .block_conditions-we-treat-posts-list .slide-container-conditions-grid {
        padding-bottom: 0 !important;
        min-height: auto !important;
    }
}

/* ==============================
   REMOVE SUB-TEXT FROM INTEGRATIVE PROGRAMS
   Hide the "{ Ultra-confidential and private }" type sub-texts
   ============================== */
/* Hide sub-text divs that appear after the title in integrative programs links */
a[href*="integrative-programs"] div[class*="max-w-"] > div.text-sm {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Hide the hover version of sub-text (with opacity-0 and text-secondary classes) */
a[href*="integrative-programs"] div.text-sm.text-secondary.opacity-0,
a[href*="integrative-programs"] div.text-sm.text-secondary.mt-0 {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Also hide any visible text-sm divs that contain curly braces (fallback) */
a[href*="integrative-programs"] > div > div > div.text-sm:not(:has(> *)) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* ==============================
   REMOVE "{ X CONDITIONS }" SUB-TEXT FROM CONDITION CARDS
   Hide the "{ 3 conditions }" type sub-texts on all condition thumbnail cards
   ============================== */
/* Hide ALL text-sm divs within condition category cards - target max-w-[320px] containers */
a[href*="conditions_category"] div[class*="max-w-"] > div.text-sm {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide the visible version (without opacity-0) */
a[href*="conditions_category"] div[class*="max-w-"] > div.text-sm:not(.opacity-0) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Hide the hover version (with opacity-0 and text-secondary classes) */
a[href*="conditions_category"] div.text-sm.text-secondary.opacity-0,
a[href*="conditions_category"] div.text-sm.text-secondary.mt-0 {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Target condition cards in the conditions-we-treat page - more specific */
.block_conditions-category a[href*="conditions_category"] div[class*="max-w-"] > div.text-sm,
.block_conditions-category a[href*="conditions_category"] > div > div > div.text-sm {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Target all text-sm divs that are direct children of max-w containers in condition cards */
a[href*="conditions_category"] div[class*="max-w-"] div.text-sm {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* ==============================
   CAROUSEL IMAGE OVERLAY EFFECT
   10% opacity overlay by default for text readability, darker on hover
   ============================== */
/* Light overlay (10% opacity) on Conditions We Treat cards - normal state */
/* Target the exact overlay div structure: div.relative > div.absolute.bg-black */
.block_conditions-we-treat-posts-list a[href*="conditions_category"] div.relative > div.block.absolute.top-0.left-0.h-full.w-full.bg-black.bg-opacity-30,
.block_conditions-we-treat-posts-list a[href*="conditions_category"] div.relative > div.absolute.bg-black.bg-opacity-30,
a[href*="conditions_category"] div.relative > div.absolute.bg-black.bg-opacity-30,
a[href*="conditions_category"] div.relative > div.absolute[class*="bg-black"][class*="bg-opacity-30"],
a[href*="conditions_category"] div.relative > div.block.absolute.bg-black,
a[href*="conditions_category"] > div > div > div.absolute.bg-black {
  background-color: rgba(0, 0, 0, 0.1) !important; /* 10% opacity overlay for text readability */
  background: rgba(0, 0, 0, 0.1) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Add darker overlay on hover for Conditions We Treat - so text is readable */
.block_conditions-we-treat-posts-list a[href*="conditions_category"]:hover div.relative > div.block.absolute.top-0.left-0.h-full.w-full.bg-black.bg-opacity-30,
.block_conditions-we-treat-posts-list a[href*="conditions_category"]:hover div.relative > div.absolute.bg-black.bg-opacity-30,
a[href*="conditions_category"]:hover div.relative > div.absolute.bg-black.bg-opacity-30,
a[href*="conditions_category"]:hover div.relative > div.absolute[class*="bg-black"][class*="bg-opacity-30"],
a[href*="conditions_category"]:hover div.relative > div.block.absolute.bg-black,
a[href*="conditions_category"]:hover > div > div > div.absolute.bg-black {
  background-color: rgba(0, 0, 0, 0.5) !important; /* Darken on hover - 50% opacity for text readability */
  background: rgba(0, 0, 0, 0.5) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Mobile touch: Darker overlay on tap for Conditions We Treat cards */
.block_conditions-we-treat-posts-list a[href*="conditions_category"]:active div.relative > div.block.absolute.top-0.left-0.h-full.w-full.bg-black.bg-opacity-30,
.block_conditions-we-treat-posts-list a[href*="conditions_category"]:active div.relative > div.absolute.bg-black.bg-opacity-30,
a[href*="conditions_category"]:active div.relative > div.absolute.bg-black.bg-opacity-30,
a[href*="conditions_category"]:active div.relative > div.absolute[class*="bg-black"][class*="bg-opacity-30"],
a[href*="conditions_category"]:active div.relative > div.block.absolute.bg-black,
a[href*="conditions_category"]:active > div > div > div.absolute.bg-black {
  background-color: rgba(0, 0, 0, 0.5) !important; /* Darken on tap - 50% opacity for text readability */
  background: rgba(0, 0, 0, 0.5) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Light overlay (10% opacity) on Integrative Programs cards - normal state */
a[href*="integrative-programs"] div.relative > div.block.absolute.top-0.left-0.h-full.w-full.bg-black.bg-opacity-30,
a[href*="integrative-programs"] div.relative > div.absolute.bg-black.bg-opacity-30,
a[href*="integrative-programs"] div.relative > div.absolute[class*="bg-black"][class*="bg-opacity-30"],
a[href*="integrative-programs"] div.relative > div.block.absolute.bg-black,
a[href*="integrative-programs"] > div > div > div.absolute.bg-black {
  background-color: rgba(0, 0, 0, 0.1) !important; /* 10% opacity overlay for text readability */
  background: rgba(0, 0, 0, 0.1) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Add darker overlay on hover for Integrative Programs - so text is readable */
a[href*="integrative-programs"]:hover div.relative > div.block.absolute.top-0.left-0.h-full.w-full.bg-black.bg-opacity-30,
a[href*="integrative-programs"]:hover div.relative > div.absolute.bg-black.bg-opacity-30,
a[href*="integrative-programs"]:hover div.relative > div.absolute[class*="bg-black"][class*="bg-opacity-30"],
a[href*="integrative-programs"]:hover div.relative > div.block.absolute.bg-black,
a[href*="integrative-programs"]:hover > div > div > div.absolute.bg-black {
  background-color: rgba(0, 0, 0, 0.5) !important; /* Darken on hover - 50% opacity for text readability */
  background: rgba(0, 0, 0, 0.5) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Mobile touch: Darker overlay on tap for Integrative Programs cards */
a[href*="integrative-programs"]:active div.relative > div.block.absolute.top-0.left-0.h-full.w-full.bg-black.bg-opacity-30,
a[href*="integrative-programs"]:active div.relative > div.absolute.bg-black.bg-opacity-30,
a[href*="integrative-programs"]:active div.relative > div.absolute[class*="bg-black"][class*="bg-opacity-30"],
a[href*="integrative-programs"]:active div.relative > div.block.absolute.bg-black,
a[href*="integrative-programs"]:active > div > div > div.absolute.bg-black {
  background-color: rgba(0, 0, 0, 0.5) !important; /* Darken on tap - 50% opacity for text readability */
  background: rgba(0, 0, 0, 0.5) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Light overlay (10% opacity) on AP Concept cards (Personal Recovery Mentor, etc.) - normal state */
/* Target using block class for higher specificity - same pattern as conditions cards */
.block_ap-concept-posts-list a.w-full[href*="/concepts/"] div.relative > div.block.absolute.top-0.left-0.h-full.w-full.bg-black.bg-opacity-30,
.block_ap-concept-posts-list a[href*="/concepts/"] div.relative > div.block.absolute.top-0.left-0.h-full.w-full.bg-black.bg-opacity-30,
.block_ap-concept-posts-list a[href*="/concepts/"] div.relative > div.absolute.bg-black.bg-opacity-30,
.block_ap-concept-posts-list a[href*="/concepts/"] div.relative > div.absolute[class*="bg-black"][class*="bg-opacity-30"],
.block_ap-concept-posts-list a[href*="/concepts/"] div.relative > div.block.absolute.bg-black,
a.w-full[href*="/concepts/"] div.relative > div.block.absolute.top-0.left-0.h-full.w-full.bg-black.bg-opacity-30,
a.w-full[href*="/concepts/"] div.relative > div.absolute.bg-black.bg-opacity-30,
a.w-full[href*="/concepts/"] div.relative > div.absolute[class*="bg-black"][class*="bg-opacity-30"],
a.w-full[href*="/concepts/"] div.relative > div.block.absolute.bg-black,
a[href*="/concepts/"] div.relative > div.block.absolute.top-0.left-0.h-full.w-full.bg-black.bg-opacity-30,
a[href*="/concepts/"] div.relative > div.absolute.bg-black.bg-opacity-30,
a[href*="/concepts/"] div.relative > div.absolute[class*="bg-black"][class*="bg-opacity-30"],
a[href*="/concepts/"] div.relative > div.block.absolute.bg-black,
a[href*="/concepts/"] > div > div > div.absolute.bg-black {
  background-color: rgba(0, 0, 0, 0.1) !important; /* 10% opacity overlay for text readability */
  background: rgba(0, 0, 0, 0.1) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Add darker overlay on hover for AP Concept cards - so text is readable */
.block_ap-concept-posts-list a.w-full[href*="/concepts/"]:hover div.relative > div.block.absolute.top-0.left-0.h-full.w-full.bg-black.bg-opacity-30,
.block_ap-concept-posts-list a[href*="/concepts/"]:hover div.relative > div.block.absolute.top-0.left-0.h-full.w-full.bg-black.bg-opacity-30,
.block_ap-concept-posts-list a[href*="/concepts/"]:hover div.relative > div.absolute.bg-black.bg-opacity-30,
.block_ap-concept-posts-list a[href*="/concepts/"]:hover div.relative > div.absolute[class*="bg-black"][class*="bg-opacity-30"],
.block_ap-concept-posts-list a[href*="/concepts/"]:hover div.relative > div.block.absolute.bg-black,
a.w-full[href*="/concepts/"]:hover div.relative > div.block.absolute.top-0.left-0.h-full.w-full.bg-black.bg-opacity-30,
a.w-full[href*="/concepts/"]:hover div.relative > div.absolute.bg-black.bg-opacity-30,
a.w-full[href*="/concepts/"]:hover div.relative > div.absolute[class*="bg-black"][class*="bg-opacity-30"],
a.w-full[href*="/concepts/"]:hover div.relative > div.block.absolute.bg-black,
a[href*="/concepts/"]:hover div.relative > div.block.absolute.top-0.left-0.h-full.w-full.bg-black.bg-opacity-30,
a[href*="/concepts/"]:hover div.relative > div.absolute.bg-black.bg-opacity-30,
a[href*="/concepts/"]:hover div.relative > div.absolute[class*="bg-black"][class*="bg-opacity-30"],
a[href*="/concepts/"]:hover div.relative > div.block.absolute.bg-black,
a[href*="/concepts/"]:hover > div > div > div.absolute.bg-black {
  background-color: rgba(0, 0, 0, 0.5) !important; /* Darken on hover - 50% opacity for text readability */
  background: rgba(0, 0, 0, 0.5) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Mobile touch: Darker overlay on tap for AP Concept cards */
.block_ap-concept-posts-list a.w-full[href*="/concepts/"]:active div.relative > div.block.absolute.top-0.left-0.h-full.w-full.bg-black.bg-opacity-30,
.block_ap-concept-posts-list a[href*="/concepts/"]:active div.relative > div.block.absolute.top-0.left-0.h-full.w-full.bg-black.bg-opacity-30,
.block_ap-concept-posts-list a[href*="/concepts/"]:active div.relative > div.absolute.bg-black.bg-opacity-30,
.block_ap-concept-posts-list a[href*="/concepts/"]:active div.relative > div.absolute[class*="bg-black"][class*="bg-opacity-30"],
.block_ap-concept-posts-list a[href*="/concepts/"]:active div.relative > div.block.absolute.bg-black,
a.w-full[href*="/concepts/"]:active div.relative > div.block.absolute.top-0.left-0.h-full.w-full.bg-black.bg-opacity-30,
a.w-full[href*="/concepts/"]:active div.relative > div.absolute.bg-black.bg-opacity-30,
a.w-full[href*="/concepts/"]:active div.relative > div.absolute[class*="bg-black"][class*="bg-opacity-30"],
a.w-full[href*="/concepts/"]:active div.relative > div.block.absolute.bg-black,
a[href*="/concepts/"]:active div.relative > div.block.absolute.top-0.left-0.h-full.w-full.bg-black.bg-opacity-30,
a[href*="/concepts/"]:active div.relative > div.absolute.bg-black.bg-opacity-30,
a[href*="/concepts/"]:active div.relative > div.absolute[class*="bg-black"][class*="bg-opacity-30"],
a[href*="/concepts/"]:active div.relative > div.block.absolute.bg-black,
a[href*="/concepts/"]:active > div > div > div.absolute.bg-black {
  background-color: rgba(0, 0, 0, 0.5) !important; /* Darken on tap - 50% opacity for text readability */
  background: rgba(0, 0, 0, 0.5) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ==============================
   TEAM CARD TITLES/ROLES - Dark Blue for Readability
   Change team member role/title text (e.g., "Personal Trainer", "Clinical Director") 
   to dark blue so it's readable on all photos
   NOTE: This targets TITLES/ROLES only, NOT the names
   ============================== */
/* Target team member card titles/roles (first paragraph) - force dark blue color */
/* Using site's dark blue: rgb(6, 16, 45) = #06102d */
button.team-member-trigger > div > div.absolute p:first-child,
button.team-member-trigger > div > div.absolute.flex.flex-col p:first-child,
button[data-postid] > div > div.absolute p:first-child,
button[data-postid] > div > div.absolute.flex.flex-col p:first-child {
  color: #06102d !important; /* Dark blue - rgb(6, 16, 45) */
}

/* Also target with text-primary classes (the role/title paragraph) */
button.team-member-trigger p.text-primary:first-of-type,
button.team-member-trigger p[class*="text-primary"]:first-of-type,
button[data-postid] p.text-primary:first-of-type,
button[data-postid] p[class*="text-primary"]:first-of-type {
  color: #06102d !important; /* Dark blue for role/title */
}

/* Target with md: breakpoint classes - ensure dark blue on all screen sizes */
button.team-member-trigger p.md\:text-primary_dark:first-of-type,
button.team-member-trigger p[class*="md:text-primary_dark"]:first-of-type,
button[data-postid] p.md\:text-primary_dark:first-of-type,
button[data-postid] p[class*="md:text-primary_dark"]:first-of-type {
  color: #06102d !important; /* Force dark blue on all screen sizes */
}

/* Ensure it stays dark blue on hover too */
button.team-member-trigger:hover > div > div.absolute p:first-child,
button.team-member-trigger.group-hover > div > div.absolute p:first-child,
button[data-postid]:hover > div > div.absolute p:first-child,
button.team-member-trigger:hover p.text-primary:first-of-type,
button.team-member-trigger.group-hover p.text-primary:first-of-type,
button[data-postid]:hover p.text-primary:first-of-type {
  color: #06102d !important; /* Keep dark blue on hover */
}

/* ==============================
   TEAM CARD OVERLAY EFFECT
   Match the same overlay behavior as other thumb cards: 10% default, 50% on hover
   Override Tailwind's group-hover:bg-white class with maximum specificity
   ============================== */
/* Light overlay (10% opacity) on team member cards - normal state */
/* Target the exact overlay structure: button > div > div.absolute with bg-primary_dark */
button.team-member-trigger > div > div.absolute.bg-primary_dark,
button.team-member-trigger > div > div.block.absolute.bg-primary_dark,
button.team-member-trigger > div > div.absolute.top-0.left-0.h-full.w-full.bg-primary_dark,
button.team-member-trigger > div > div.block.absolute.top-0.left-0.h-full.w-full.bg-primary_dark,
button[data-postid] > div > div.absolute.bg-primary_dark,
button[data-postid] > div > div.block.absolute.bg-primary_dark,
button[data-postid] > div > div.absolute.top-0.left-0.h-full.w-full.bg-primary_dark,
button[data-postid] > div > div.block.absolute.top-0.left-0.h-full.w-full.bg-primary_dark {
  background-color: rgba(0, 0, 0, 0.1) !important; /* 10% opacity overlay for text readability */
  background: rgba(0, 0, 0, 0.1) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Darker overlay (50% opacity) on hover - MUST override Tailwind's group-hover:bg-white */
/* Target when button with group class is hovered - Tailwind applies group-hover styles */
button.team-member-trigger.group:hover > div > div.absolute.bg-primary_dark,
button.team-member-trigger.group:hover > div > div.block.absolute.bg-primary_dark,
button.team-member-trigger.group:hover > div > div.absolute.top-0.left-0.h-full.w-full,
button.team-member-trigger.group:hover > div > div.block.absolute.top-0.left-0.h-full.w-full,
button.team-member-trigger.group:hover > div > div.absolute[class*="bg-primary_dark"],
button.team-member-trigger.group:hover > div > div.block.absolute[class*="bg-primary_dark"],
button.team-member-trigger:hover.group > div > div.absolute.bg-primary_dark,
button.team-member-trigger:hover.group > div > div.block.absolute.bg-primary_dark,
button.team-member-trigger:hover.group > div > div.absolute.top-0.left-0.h-full.w-full,
button.team-member-trigger:hover.group > div > div.block.absolute.top-0.left-0.h-full.w-full,
button[data-postid].group:hover > div > div.absolute.bg-primary_dark,
button[data-postid].group:hover > div > div.block.absolute.bg-primary_dark,
button[data-postid].group:hover > div > div.absolute.top-0.left-0.h-full.w-full,
button[data-postid].group:hover > div > div.block.absolute.top-0.left-0.h-full.w-full,
button[data-postid]:hover.group > div > div.absolute.bg-primary_dark,
button[data-postid]:hover.group > div > div.block.absolute.bg-primary_dark,
button[data-postid]:hover.group > div > div.absolute.top-0.left-0.h-full.w-full,
button[data-postid]:hover.group > div > div.block.absolute.top-0.left-0.h-full.w-full,
/* Also target direct hover */
button.team-member-trigger:hover > div > div.absolute.bg-primary_dark,
button.team-member-trigger:hover > div > div.block.absolute.bg-primary_dark,
button.team-member-trigger:hover > div > div.absolute.top-0.left-0.h-full.w-full,
button.team-member-trigger:hover > div > div.block.absolute.top-0.left-0.h-full.w-full,
button[data-postid]:hover > div > div.absolute.bg-primary_dark,
button[data-postid]:hover > div > div.block.absolute.bg-primary_dark,
button[data-postid]:hover > div > div.absolute.top-0.left-0.h-full.w-full,
button[data-postid]:hover > div > div.block.absolute.top-0.left-0.h-full.w-full {
  background-color: rgba(0, 0, 0, 0.5) !important; /* Darken on hover - 50% opacity for text readability */
  background: rgba(0, 0, 0, 0.5) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* CRITICAL: Override Tailwind's group-hover:bg-white - target overlay with group-hover class */
/* Tailwind generates: .group:hover .group-hover\:bg-white { background-color: white; } */
/* We need higher specificity to override this */
button.group:hover > div > div.absolute.group-hover\:bg-white,
button.group:hover > div > div.block.absolute.group-hover\:bg-white,
button.team-member-trigger.group:hover > div > div.absolute[class*="group-hover:bg-white"],
button.team-member-trigger.group:hover > div > div.block.absolute[class*="group-hover:bg-white"],
button.team-member-trigger.group:hover > div > div.absolute.top-0.left-0.h-full.w-full[class*="group-hover"],
button.team-member-trigger.group:hover > div > div.block.absolute.top-0.left-0.h-full.w-full[class*="group-hover"],
button[data-postid].group:hover > div > div.absolute[class*="group-hover:bg-white"],
button[data-postid].group:hover > div > div.block.absolute[class*="group-hover:bg-white"],
button[data-postid].group:hover > div > div.absolute.top-0.left-0.h-full.w-full[class*="group-hover"],
button[data-postid].group:hover > div > div.block.absolute.top-0.left-0.h-full.w-full[class*="group-hover"] {
  background-color: rgba(0, 0, 0, 0.5) !important; /* Override white with dark overlay */
  background: rgba(0, 0, 0, 0.5) !important;
}

/* Mobile touch: Darker overlay on tap for team member cards */
button.team-member-trigger:active > div > div.absolute.bg-primary_dark,
button.team-member-trigger:active > div > div.block.absolute.bg-primary_dark,
button.team-member-trigger:active > div > div.absolute.top-0.left-0.h-full.w-full.bg-primary_dark,
button.team-member-trigger:active > div > div.block.absolute.top-0.left-0.h-full.w-full.bg-primary_dark,
button[data-postid]:active > div > div.absolute.bg-primary_dark,
button[data-postid]:active > div > div.block.absolute.bg-primary_dark,
button[data-postid]:active > div > div.absolute.top-0.left-0.h-full.w-full.bg-primary_dark,
button[data-postid]:active > div > div.block.absolute.top-0.left-0.h-full.w-full.bg-primary_dark,
button.team-member-trigger.group:active > div > div.absolute.bg-primary_dark,
button.team-member-trigger.group:active > div > div.block.absolute.bg-primary_dark,
button.team-member-trigger.group:active > div > div.absolute.top-0.left-0.h-full.w-full,
button.team-member-trigger.group:active > div > div.block.absolute.top-0.left-0.h-full.w-full,
button[data-postid].group:active > div > div.absolute.bg-primary_dark,
button[data-postid].group:active > div > div.block.absolute.bg-primary_dark,
button[data-postid].group:active > div > div.absolute.top-0.left-0.h-full.w-full,
button[data-postid].group:active > div > div.block.absolute.top-0.left-0.h-full.w-full {
  background-color: rgba(0, 0, 0, 0.5) !important; /* Darken on tap - 50% opacity for text readability */
  background: rgba(0, 0, 0, 0.5) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Mobile touch: Override Tailwind's group-hover:bg-white on tap */
button.group:active > div > div.absolute.group-hover\:bg-white,
button.group:active > div > div.block.absolute.group-hover\:bg-white,
button.team-member-trigger.group:active > div > div.absolute[class*="group-hover:bg-white"],
button.team-member-trigger.group:active > div > div.block.absolute[class*="group-hover:bg-white"],
button.team-member-trigger.group:active > div > div.absolute.top-0.left-0.h-full.w-full[class*="group-hover"],
button.team-member-trigger.group:active > div > div.block.absolute.top-0.left-0.h-full.w-full[class*="group-hover"],
button[data-postid].group:active > div > div.absolute[class*="group-hover:bg-white"],
button[data-postid].group:active > div > div.block.absolute[class*="group-hover:bg-white"],
button[data-postid].group:active > div > div.absolute.top-0.left-0.h-full.w-full[class*="group-hover"],
button[data-postid].group:active > div > div.block.absolute.top-0.left-0.h-full.w-full[class*="group-hover"] {
  background-color: rgba(0, 0, 0, 0.5) !important; /* Override white with dark overlay on tap */
  background: rgba(0, 0, 0, 0.5) !important;
}

/* ==============================
   MOBILE TOUCH DEVICES - Enhanced Rollover Effect
   For devices without hover capability, use :active and :focus states
   ============================== */
/* Target touch devices (devices without hover capability) */
@media (hover: none) and (pointer: coarse) {
  /* Conditions We Treat cards - keep overlay darker on touch */
  .block_conditions-we-treat-posts-list a[href*="conditions_category"]:active div.relative > div.block.absolute.top-0.left-0.h-full.w-full.bg-black.bg-opacity-30,
  .block_conditions-we-treat-posts-list a[href*="conditions_category"]:active div.relative > div.absolute.bg-black.bg-opacity-30,
  a[href*="conditions_category"]:active div.relative > div.absolute.bg-black.bg-opacity-30,
  a[href*="conditions_category"]:active div.relative > div.absolute[class*="bg-black"][class*="bg-opacity-30"],
  a[href*="conditions_category"]:active div.relative > div.block.absolute.bg-black,
  a[href*="conditions_category"]:active > div > div > div.absolute.bg-black,
  /* Also apply on focus for keyboard navigation */
  .block_conditions-we-treat-posts-list a[href*="conditions_category"]:focus div.relative > div.block.absolute.top-0.left-0.h-full.w-full.bg-black.bg-opacity-30,
  a[href*="conditions_category"]:focus div.relative > div.absolute.bg-black.bg-opacity-30 {
    background-color: rgba(0, 0, 0, 0.5) !important;
    background: rgba(0, 0, 0, 0.5) !important;
    transition: background-color 0.2s ease !important;
  }

  /* Integrative Programs cards */
  a[href*="integrative-programs"]:active div.relative > div.block.absolute.top-0.left-0.h-full.w-full.bg-black.bg-opacity-30,
  a[href*="integrative-programs"]:active div.relative > div.absolute.bg-black.bg-opacity-30,
  a[href*="integrative-programs"]:active div.relative > div.absolute[class*="bg-black"][class*="bg-opacity-30"],
  a[href*="integrative-programs"]:active div.relative > div.block.absolute.bg-black,
  a[href*="integrative-programs"]:active > div > div > div.absolute.bg-black,
  a[href*="integrative-programs"]:focus div.relative > div.absolute.bg-black.bg-opacity-30 {
    background-color: rgba(0, 0, 0, 0.5) !important;
    background: rgba(0, 0, 0, 0.5) !important;
    transition: background-color 0.2s ease !important;
  }

  /* AP Concept cards */
  .block_ap-concept-posts-list a[href*="/concepts/"]:active div.relative > div.block.absolute.top-0.left-0.h-full.w-full.bg-black.bg-opacity-30,
  a[href*="/concepts/"]:active div.relative > div.absolute.bg-black.bg-opacity-30,
  a[href*="/concepts/"]:active div.relative > div.block.absolute.bg-black,
  a[href*="/concepts/"]:active > div > div > div.absolute.bg-black,
  a[href*="/concepts/"]:focus div.relative > div.absolute.bg-black.bg-opacity-30 {
    background-color: rgba(0, 0, 0, 0.5) !important;
    background: rgba(0, 0, 0, 0.5) !important;
    transition: background-color 0.2s ease !important;
  }

  /* Team member cards */
  button.team-member-trigger:active > div > div.absolute.bg-primary_dark,
  button.team-member-trigger:active > div > div.block.absolute.bg-primary_dark,
  button[data-postid]:active > div > div.absolute.bg-primary_dark,
  button[data-postid]:active > div > div.block.absolute.bg-primary_dark,
  button.team-member-trigger:focus > div > div.absolute.bg-primary_dark,
  button[data-postid]:focus > div > div.absolute.bg-primary_dark {
    background-color: rgba(0, 0, 0, 0.5) !important;
    background: rgba(0, 0, 0, 0.5) !important;
    transition: background-color 0.2s ease !important;
  }

  /* Override Tailwind group-hover on touch devices */
  button.group:active > div > div.absolute[class*="group-hover"],
  button.group:focus > div > div.absolute[class*="group-hover"],
  button.team-member-trigger.group:active > div > div.absolute[class*="group-hover:bg-white"],
  button[data-postid].group:active > div > div.absolute[class*="group-hover:bg-white"] {
    background-color: rgba(0, 0, 0, 0.5) !important;
    background: rgba(0, 0, 0, 0.5) !important;
  }
}

/* ==============================
   TEAM CARD FADE-IN ANIMATION
   Ensure team cards fade in like other homepage cards
   ============================== */
/* Ensure team cards with AOS attributes fade in properly */
button.team-member-trigger > div.relative[data-aos="fade-up"],
button[data-postid] > div.relative[data-aos="fade-up"] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

/* When AOS animates, show the card */
button.team-member-trigger > div.relative[data-aos="fade-up"].aos-animate,
button[data-postid] > div.relative[data-aos="fade-up"].aos-animate {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Fallback: If AOS doesn't trigger, fade in after a delay */
@keyframes teamCardFadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Apply animation to team cards that should fade in */
button.team-member-trigger > div.relative.aos-init:not(.aos-animate),
button[data-postid] > div.relative.aos-init:not(.aos-animate) {
  animation: teamCardFadeIn 1s ease-out forwards;
  animation-delay: 0.1s;
}

/* ==============================
   BURGER MENU - "Contact" Link Styling
   Override the #header nav a[href="contact"] rule that's applying button styles
   Must match or exceed that specificity
   ============================== */
/* Override the high-specificity rule: #header nav a[href="contact"] */
#header nav a[href*="/contact/"]:not([title*="Get in touch"]),
#header nav a[href*="contact"]:not([title*="Get in touch"]),
header#header nav a[href*="/contact/"]:not([title*="Get in touch"]),
header#header nav a[href*="contact"]:not([title*="Get in touch"]),
#header nav a[href*="/contact/"][class*="py-4"],
#header nav a[href*="/contact/"][class*="h5"],
#header nav a[href*="/contact/"][class*="group"],
header#header nav a[href*="/contact/"][class*="py-4"],
header#header nav a[href*="/contact/"][class*="h5"] {
  /* Override button styling - match other menu items exactly */
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 16px 20px !important; /* Match py-4 px-5 */
  font-size: 20px !important; /* Match h5 - same as Team/Accommodation */
  font-weight: 400 !important; /* Match Team/Accommodation */
  line-height: 34px !important; /* Match Team/Accommodation line-height */
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.2) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  white-space: normal !important;
  color: inherit !important;
}

/* Hover effect for Contact link */
#header nav a[href*="/contact/"]:not([title*="Get in touch"]):hover,
#header nav a[href*="contact"]:not([title*="Get in touch"]):hover,
header#header nav a[href*="/contact/"]:not([title*="Get in touch"]):hover,
#header nav a[href*="/contact/"][class*="hover:bg-secondary_dark"]:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  padding-left: 28px !important;
}

/* ==============================
   BURGER MENU - "Get in touch" Button Styling
   Change "Get in touch" button to match other menu text links
   ============================== */
/* Make "Get in touch" button look like other menu items - remove button styling */
/* Target with maximum specificity including parent containers */
.desktop-menu a.btn.dark_section.second.small[href*="/contact/"][title*="Get in touch"],
.desktop-menu a.btn.dark_section.second[href*="/contact/"][title*="Get in touch"],
.desktop-menu a[class*="btn"][class*="dark_section"][class*="second"][href*="/contact/"],
nav .desktop-menu a.btn[href*="/contact/"],
nav .desktop-menu a[href*="/contact/"][class*="btn"],
.desktop-menu a.btn[href*="/contact/"][title*="Get in touch"],
.desktop-menu a[href*="/contact/"][title*="Get in touch"][class*="btn"],
a.btn.dark_section.second.small[href*="/contact/"][title*="Get in touch"],
a.btn.dark_section.second[href*="/contact/"][title*="Get in touch"],
a[class*="btn"][class*="dark_section"][class*="second"][href*="/contact/"],
nav a.btn[href*="/contact/"],
nav a[href*="/contact/"][class*="btn"],
a.btn[href*="/contact/"][title*="Get in touch"],
a[href*="/contact/"][title*="Get in touch"][class*="btn"] {
  /* Remove ALL button styling */
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 16px 20px !important; /* Match other menu items: py-4 px-5 */
  font-size: 20px !important; /* Match h5 class */
  font-weight: 400 !important; /* Match other menu items */
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.2) !important; /* Match border-light */
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  transition: all 0.3s ease !important;
  min-height: auto !important;
  height: auto !important;
  line-height: normal !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Add hover effect like other menu items */
.desktop-menu a.btn.dark_section.second.small[href*="/contact/"][title*="Get in touch"]:hover,
.desktop-menu a.btn.dark_section.second[href*="/contact/"][title*="Get in touch"]:hover,
.desktop-menu a[class*="btn"][class*="dark_section"][class*="second"][href*="/contact/"]:hover,
nav .desktop-menu a.btn[href*="/contact/"]:hover,
nav .desktop-menu a[href*="/contact/"][class*="btn"]:hover,
.desktop-menu a.btn[href*="/contact/"][title*="Get in touch"]:hover,
.desktop-menu a[href*="/contact/"][title*="Get in touch"][class*="btn"]:hover,
a.btn.dark_section.second.small[href*="/contact/"][title*="Get in touch"]:hover,
a.btn.dark_section.second[href*="/contact/"][title*="Get in touch"]:hover,
a[class*="btn"][class*="dark_section"][class*="second"][href*="/contact/"]:hover,
nav a.btn[href*="/contact/"]:hover,
nav a[href*="/contact/"][class*="btn"]:hover,
a.btn[href*="/contact/"][title*="Get in touch"]:hover,
a[href*="/contact/"][title*="Get in touch"][class*="btn"]:hover {
  background-color: rgba(255, 255, 255, 0.1) !important; /* Match hover:bg-secondary_dark */
  padding-left: 28px !important; /* Match hover:pl-7 */
  background: rgba(255, 255, 255, 0.1) !important;
}

/* Show on mobile too - override hidden class */
.desktop-menu a.btn.dark_section.second.small[href*="/contact/"][class*="hidden"],
.desktop-menu a.btn.dark_section.second[href*="/contact/"][class*="hidden"],
.desktop-menu a[class*="btn"][class*="dark_section"][class*="second"][href*="/contact/"][class*="hidden"],
nav .desktop-menu a.btn[href*="/contact/"][class*="hidden"],
.desktop-menu a.btn[href*="/contact/"][title*="Get in touch"][class*="hidden"],
a.btn.dark_section.second.small[href*="/contact/"][class*="hidden"],
a.btn.dark_section.second[href*="/contact/"][class*="hidden"],
nav a.btn[href*="/contact/"][class*="hidden"],
a.btn[href*="/contact/"][title*="Get in touch"][class*="hidden"] {
  display: flex !important; /* Show on mobile - override hidden */
}

/* On desktop, keep it visible but styled as text link */
@media (min-width: 768px) {
  .desktop-menu a.btn.dark_section.second.small[href*="/contact/"][class*="md:flex"],
  .desktop-menu a.btn.dark_section.second[href*="/contact/"][class*="md:flex"],
  .desktop-menu a[class*="btn"][class*="dark_section"][class*="second"][href*="/contact/"][class*="md:flex"],
  nav .desktop-menu a.btn[href*="/contact/"][class*="md:flex"],
  .desktop-menu a.btn[href*="/contact/"][title*="Get in touch"][class*="md:flex"],
  a.btn.dark_section.second.small[href*="/contact/"][class*="md:flex"],
  a.btn.dark_section.second[href*="/contact/"][class*="md:flex"],
  nav a.btn[href*="/contact/"][class*="md:flex"],
  a.btn[href*="/contact/"][title*="Get in touch"][class*="md:flex"] {
    display: flex !important; /* Override hidden md:flex */
  }
}