/* CSS VERIFICATION MARKER - VERSION 3.0 - LOADED */
/* Mobile Responsiveness Fixes for K Studio */

/* Ensure navbar has position relative for absolute positioning to work */
.navigation .navbar {
  position: relative !important;
}

/* Mobile header center title - HIGH SPECIFICITY */
.navigation .navbar_center {
  display: none;
  flex: 1;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  text-align: center;
  width: auto;
  z-index: 10;
}

.navbar-mobile-title {
  font-family: 'Geist', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--base-color-brand--mint-cloud);
  text-align: center;
  white-space: nowrap;
}

/* Desktop: hide hamburger and center title with HIGH SPECIFICITY */
@media screen and (min-width: 768px) {
  .navigation .navbar_left,
  .navigation .navbar_left .navbar_toggle,
  .navigation .navbar_center {
    display: none !important;
    visibility: hidden !important;
  }
}

/* Tablet range: also hide hamburger and title */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .navigation .navbar_left,
  .navigation .navbar_center {
    display: none !important;
    visibility: hidden !important;
  }
}

/* Fix grid-3col to properly stack on mobile */
@media screen and (max-width: 767px) {
  /* Show mobile center title - HIGH SPECIFICITY */
  .navigation .navbar_center {
    display: flex !important;
  }
  
  /* Hide desktop menu on mobile - HIGH SPECIFICITY */
  .navigation .navbar_menu {
    display: none !important;
  }
  .grid-3col {
    flex-flow: column nowrap !important;
    display: flex !important;
  }
  
  .grid-3col.is-gap-copy,
  .grid-3col.is-gap-copy-copy {
    flex-flow: column nowrap !important;
  }
  
  /* Ensure button variant styling is applied */
  .button-link_content.w-variant-97b4d818-cf66-3677-6018-273bc62dadc6 {
    background-color: var(--base-color-brand--forest-shadow) !important;
    border-style: none !important;
  }
  
  /* Fix heading overflow on mobile */
  .heading-style-large {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  
  .hero-title h1 {
    max-width: 100%;
    overflow-wrap: break-word;
  }
  
  /* Ensure proper container width on mobile */
  .container-large {
    max-width: 100%;
    padding-left: var(--spacing-sizes--medium);
    padding-right: var(--spacing-sizes--medium);
  }
  
  /* Fix grid-2col to stack on mobile */
  .grid-2col {
    grid-template-columns: 1fr !important;
    display: grid !important;
  }
  
  /* Fix values cards to show images on mobile */
  .values-card {
    min-height: 400px !important;
    aspect-ratio: 3/4;
  }
  
  .values-card_image {
    display: block !important;
  }
  
  /* ========================================
     COMPREHENSIVE SERVICE CARD FIXES FOR MOBILE
     ======================================== */
  
  /* Fix card structure and layout */
  .class-card,
  .w-dyn-item .class-card,
  div.class-card {
    display: flex !important;
    flex-direction: column !important;
    flex-flow: column !important;
    padding: var(--spacing-sizes--medium) !important;
    min-height: auto !important;
    height: auto !important;
    width: 100% !important;
    position: relative !important;
    overflow: visible !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
  }
  
  /* Force service card images to display */
  .class-card .class-card_image,
  .w-dyn-item .class-card_image,
  div.class-card_image,
  .class-card > .class-card_image,
  .class-card_image.w-layout-vflex {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 250px !important;
    min-height: 250px !important;
    max-height: 250px !important;
    overflow: hidden !important;
    position: relative !important;
    margin-bottom: var(--spacing-sizes--small) !important;
    border-radius: var(--spacing-sizes--tiny) !important;
    flex-shrink: 0 !important;
  }
  
  /* Ensure images inside cards are visible and properly sized */
  .class-card_image img,
  .class-card_image img.image-slide,
  .class-card .class-card_image img,
  div.class-card_image > img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    position: relative !important;
  }
  
  /* Fix card content section */
  .class-card .class-card_content,
  .class-card_content {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    overflow: visible !important;
    margin-bottom: var(--spacing-sizes--small) !important;
    flex-shrink: 0 !important;
  }
  
  /* Fix text overflow in cards - allow text to be visible */
  .class-card .clip,
  .class-card_content .clip,
  .class-card .flex-vertical-tiny .clip {
    overflow: visible !important;
    position: relative !important;
  }
  
  /* Ensure headings are visible and don't overflow */
  .class-card h5,
  .class-card .heading-style-h4 {
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    white-space: normal !important;
    overflow: visible !important;
  }
  
  /* Fix divider */
  .class-card .class-card_divider,
  .class-card_divider {
    display: block !important;
    width: 100% !important;
    margin: var(--spacing-sizes--small) 0 !important;
    flex-shrink: 0 !important;
  }
  
  /* Fix buttons to stay within card and be visible */
  .class-card .button_wrapper,
  .class-card .button_wrapper.stretch,
  .button_wrapper.stretch {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    position: relative !important;
    overflow: visible !important;
    margin-top: auto !important;
    flex-shrink: 0 !important;
  }
  
  .class-card .button-wrapper,
  .class-card .button-wrapper.w-variant-2b5a8f25-5b16-a128-cc19-fec770344964 {
    width: 100% !important;
    display: block !important;
    position: relative !important;
  }
  
  .class-card .button-link_content,
  .class-card a.button-link_content {
    width: 100% !important;
    display: flex !important;
    position: relative !important;
    overflow: visible !important;
  }
  
  /* Ensure collection list stacks properly */
  .collection-list-3.w-dyn-items {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--spacing-sizes--large) !important;
  }
  
  /* Reset problematic image rules for card images specifically */
  .class-card_image img {
    height: 100% !important;
  }
}

/* Tablet fixes */
@media screen and (max-width: 991px) {
  .grid-3col {
    flex-flow: column nowrap !important;
    display: flex !important;
  }
  
  .grid-2col {
    grid-template-columns: 1fr !important;
  }
  
  /* Apply some card fixes to tablet too */
  .class-card_image {
    display: block !important;
    height: 250px !important;
  }
}

/* Ensure Lottie animations are visible */
.arrow-icon_right {
  min-width: 16px;
  min-height: 16px;
}

/* Make sure button text is visible */
.button-link-text_normal,
.button-link-text_hover {
  color: var(--base-color-brand--mint-cloud);
}

/* Add spacing between stacked service buttons - CORRECT SELECTOR */
.button_wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  row-gap: 0.75rem !important;
}

/* Target the inner wrapper too */
.button_wrapper > .button-wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}

/* Multiple approaches to ensure spacing */
.button_wrapper > * + * {
  margin-top: 0.75rem !important;
}

.button_wrapper .button-link_content:not(:last-child) {
  margin-bottom: 0.75rem !important;
}