/**
 * ACF Capabilities Styling
 * Modern display for "What We Do" ACF fields
 * Uses C&S Drainage brand colors
 * Works for all capability pages
 */

/* Container for What We Do section */
.wpb_column .vc_acf {
  display: block;
  padding: 0;
  margin: 0;
}

/* Specific targeting for capabilities field group 1304 */
.vc_acf[field_group="1304"],
.vc_acf[data-field-group="1304"] {
  /* These will be hidden by JavaScript and replaced with styled list */
  display: block;
}

/* Create a styled list container for ACF fields */
.wpb_wrapper .vc_acf + .vc_acf {
  margin-top: 0;
}

/* Modern bullet list styling for ACF fields */
.wpb_wrapper h4:contains("What we do") ~ .vc_acf,
.wpb_wrapper h4 ~ .gem-divider ~ .vc_empty_space ~ .vc_acf {
  position: relative;
  padding-left: 35px;
  margin-bottom: 15px;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--csd-text-primary, var(--csd-grey));
  font-family: var(--csd-font-body, 'Source Sans Pro', sans-serif);
  transition: all 0.3s ease;
}

/* Custom yellow bullet point */
.wpb_wrapper h4 ~ .gem-divider ~ .vc_empty_space ~ .vc_acf::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  background-color: var(--csd-yellow, var(--csd-yellow));
  border-radius: 50%;
  transition: all 0.3s ease;
}

/* Chevron arrow alternative (comment out above ::before to use this) */
/*
.wpb_wrapper h4 ~ .gem-divider ~ .vc_empty_space ~ .vc_acf::before {
  content: '▸';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--csd-yellow, var(--csd-yellow));
  font-size: 1.25rem;
  font-weight: bold;
}
*/

/* Hover effect for list items */
.wpb_wrapper h4 ~ .gem-divider ~ .vc_empty_space ~ .vc_acf:hover {
  padding-left: 40px;
  color: var(--csd-grey, var(--csd-grey));
}

.wpb_wrapper h4 ~ .gem-divider ~ .vc_empty_space ~ .vc_acf:hover::before {
  transform: scale(1.3);
  background-color: var(--csd-accent-hover, var(--csd-accent-hover));
}

/* Modern card-style container for What We Do section */
.what-we-do-container {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 248, 248, 0.95) 100%);
  border-left: 4px solid var(--csd-yellow, var(--csd-yellow));
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(26, 26, 26, 0.1);
  margin-top: 20px;
}

/* If ACF fields are empty, hide them */
.vc_acf:empty {
  display: none;
}

/* Group styling for multiple ACF fields */
.acf-capabilities-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Icon-based bullet points (using CSS shapes) */
.wpb_wrapper h4 ~ .gem-divider ~ .vc_empty_space ~ .vc_acf.with-icon::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 20px;
  height: 20px;
  background-color: var(--csd-yellow, var(--csd-yellow));
  clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}

/* Check mark style bullets */
.wpb_wrapper h4 ~ .gem-divider ~ .vc_empty_space ~ .vc_acf.with-check::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  color: var(--csd-yellow, var(--csd-yellow));
  font-weight: bold;
  font-size: 1.2rem;
}

/* Modern tag-style display */
.vc_acf.tag-style {
  display: inline-block;
  background-color: var(--csd-bg-secondary, #f8f8f8);
  border: 2px solid var(--csd-yellow, var(--csd-yellow));
  padding: 8px 16px;
  margin: 5px;
  border-radius: 20px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.vc_acf.tag-style:hover {
  background-color: var(--csd-yellow, var(--csd-yellow));
  color: var(--csd-grey, var(--csd-grey));
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(26, 26, 26, 0.2);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .wpb_wrapper h4 ~ .gem-divider ~ .vc_empty_space ~ .vc_acf {
    font-size: 1rem;
    padding-left: 30px;
    margin-bottom: 12px;
  }
  
  .wpb_wrapper h4 ~ .gem-divider ~ .vc_empty_space ~ .vc_acf::before {
    width: 6px;
    height: 6px;
    top: 7px;
  }
}

/* Animation for list items on page load */
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.wpb_wrapper h4 ~ .gem-divider ~ .vc_empty_space ~ .vc_acf {
  animation: fadeInLeft 0.5s ease-out forwards;
  opacity: 0;
}

.wpb_wrapper h4 ~ .gem-divider ~ .vc_empty_space ~ .vc_acf:nth-child(4) {
  animation-delay: 0.1s;
}

.wpb_wrapper h4 ~ .gem-divider ~ .vc_empty_space ~ .vc_acf:nth-child(5) {
  animation-delay: 0.2s;
}

.wpb_wrapper h4 ~ .gem-divider ~ .vc_empty_space ~ .vc_acf:nth-child(6) {
  animation-delay: 0.3s;
}

.wpb_wrapper h4 ~ .gem-divider ~ .vc_empty_space ~ .vc_acf:nth-child(7) {
  animation-delay: 0.4s;
}

.wpb_wrapper h4 ~ .gem-divider ~ .vc_empty_space ~ .vc_acf:nth-child(8) {
  animation-delay: 0.5s;
}

/* Print styles */
@media print {
  .wpb_wrapper h4 ~ .gem-divider ~ .vc_empty_space ~ .vc_acf {
    padding-left: 20px;
  }
  
  .wpb_wrapper h4 ~ .gem-divider ~ .vc_empty_space ~ .vc_acf::before {
    content: '•';
    background: none;
    color: #000;
    font-size: 1rem;
    width: auto;
    height: auto;
  }
}

/* === Enhanced JavaScript-generated list styles === */

/* Container for the enhanced list - Modern Bento Box Style */
.acf-capabilities-container {
  margin-top: 50px !important; /* Add 50px space above the container */
  padding: 30px !important; /* Normal padding all around */
  background: #ffffff;
  border: 1px solid rgba(26, 26, 26, 0.1);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  position: relative;
  overflow: hidden;
}

/* Subtle accent border on top instead of left */
.acf-capabilities-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--csd-yellow, var(--csd-yellow)) 0%, var(--csd-accent-hover, var(--csd-accent-hover)) 100%);
}

/* Specialties title inside container - Bold and Prominent */
.acf-capabilities-title {
  font-family: var(--csd-font-heading, 'Montserrat', sans-serif);
  font-size: 2.3rem !important; /* 37px - reduced by 15% from 2.7rem (43px) */
  font-weight: 800; /* Extra bold */
  color: var(--csd-grey, var(--csd-grey));
  margin: 0 0 65px -10px; /* Added 20px more spacing (was 45px, now 65px) */
  padding: 0; /* Removed padding since no border */
  border: none; /* Removed yellow underline */
  text-transform: uppercase;
  letter-spacing: 0.12em; /* More letter spacing */
  position: relative;
  display: block;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* The capabilities list */
.acf-capabilities-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px; /* Good spacing between items */
}

/* Individual capability items */
.acf-capability-item {
  position: relative;
  padding-left: 40px;
  font-size: 1.75rem; /* 28px - larger, more prominent size */
  line-height: 1.8;
  color: var(--csd-text-primary, var(--csd-grey));
  font-family: var(--csd-font-body, 'Source Sans Pro', sans-serif);
  cursor: default; /* No pointer cursor */
  opacity: 0;
  transform: translateX(-20px);
}

/* Animated in state - removed duplicate animation */
.acf-capability-item.animate-in {
  animation: fadeInLeft 0.5s ease-out forwards;
}

/* Modern bullet point with brand colors */
.acf-capability-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 13px; /* Adjusted for larger font */
  width: 14px;
  height: 14px;
  background-color: var(--csd-yellow, var(--csd-yellow));
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(242, 144, 28, 0.3);
}

/* Hover state - removed for cleaner experience */
/* No hover effects on list items */

/* Highlighted state (for mobile tap) */
.acf-capability-item.highlighted {
  background-color: rgba(242, 144, 28, 0.1);
  padding: 10px 10px 10px 40px;
  border-radius: 6px;
  margin-left: -5px;
}

.acf-capability-item.highlighted::before {
  background-color: var(--csd-accent-hover, var(--csd-accent-hover));
  transform: scale(1.4);
}

/* Text within capability item */
.capability-text {
  display: inline-block;
  font-weight: 500; /* Medium weight for clean readability at larger size */
  letter-spacing: 0.02em; /* Increased letter spacing for better readability */
}

/* Alternative chevron style (uncomment to use) */
/*
.acf-capability-item.chevron-style::before {
  content: '▸';
  background: none;
  width: auto;
  height: auto;
  color: var(--csd-yellow, var(--csd-yellow));
  font-size: 1.4rem;
  font-weight: bold;
  top: 0;
  box-shadow: none;
}
*/

/* Alternative checkmark style (uncomment to use) */
/*
.acf-capability-item.check-style::before {
  content: '✓';
  background: none;
  width: 20px;
  height: 20px;
  color: var(--csd-yellow, var(--csd-yellow));
  font-weight: bold;
  font-size: 1.2rem;
  top: 0;
  box-shadow: none;
}
*/

/* Responsive adjustments */
@media (max-width: 768px) {
  .acf-capabilities-container {
    padding: 20px !important; /* Keep original padding on mobile, no extra top padding */
    margin-top: 20px !important; /* Normal space on mobile, not the 50px */
  }
  
  .acf-capabilities-title {
    font-size: 1.8rem; /* 29px on mobile - reduced by 15% */
    margin-bottom: 35px; /* Good spacing on mobile too */
    padding-bottom: 0; /* No padding needed without border */
    font-weight: 700; /* Still bold but not as heavy on mobile */
  }
  
  .acf-capabilities-list {
    gap: 12px;
  }
  
  .acf-capability-item {
    font-size: 1.375rem; /* 22px on mobile - still quite prominent */
    padding-left: 35px;
  }
  
  .acf-capability-item::before {
    width: 12px;
    height: 12px;
    top: 10px;
  }
}

/* Loading animation */
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Gentle glow animation (no size changes to prevent jumping) */
@keyframes glow {
  0% {
    box-shadow: 0 2px 4px rgba(242, 144, 28, 0.3);
  }
  50% {
    box-shadow: 0 2px 8px rgba(242, 144, 28, 0.6);
  }
  100% {
    box-shadow: 0 2px 4px rgba(242, 144, 28, 0.3);
  }
}

/* Add subtle glow to first item without size changes */
.acf-capability-item:first-child::before {
  animation: glow 2s ease-in-out infinite;
}