/* CSS to swap image and text positions while preserving original styling */

/* Swap image and text for the swap-image-text class */
.swap-image-text {
  display: grid !important;
  grid-template-columns: 50% 50% !important;
  grid-template-areas:
    "title title"
    "text image"
    "extratext image" !important;
  grid-column-gap: 0 !important; /* No gap - matches original layout */
  grid-row-gap: 30px !important; /* Matches original c-mediatext spacing */
}

.swap-image-text .title {
  grid-area: title !important;
  margin-bottom: 20px !important;
}

.swap-image-text .image {
  grid-area: image !important;
  justify-self: end !important; /* Aligns the image to the right edge */
}

.swap-image-text .image img {
  max-width: 100% !important; /* Makes sure image doesn't stretch */
}

.swap-image-text .text {
  grid-area: text !important;
  justify-self: start !important; /* Aligns the text to the left edge */
  padding-right: 0 !important; /* No padding - matches original layout */
  padding-left: 0 !important; /* Align with title */
  margin-left: 0 !important; /* Align with title */
}

/* Mobile layout */
@media (max-width: 767px) {
  .swap-image-text {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "title"
      "text"
      "image"
      "extratext" !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  .swap-image-text .title {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  .swap-image-text .image {
    justify-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .swap-image-text .text {
    padding-left: 15px !important;
    padding-right: 15px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Mobile specific rules for container-199060f3e3 */
  #container-199060f3e3.swap-image-text .image {
    justify-self: stretch !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  #container-199060f3e3.swap-image-text .image img {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  #container-199060f3e3.swap-image-text .text {
    padding-left: 0 !important; /* Remove container padding */
    padding-right: 0 !important;
  }
  
  #container-199060f3e3.swap-image-text .text .text-highlighted {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
  
  #container-199060f3e3.swap-image-text .text-highlighted h5 {
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important; /* Keep h5 at edge so blue BG is full width */
    width: 100vw !important; /* Full viewport width for blue BG */
    -webkit-padding-start: 15px !important; /* Match the first h5 */
    -webkit-padding-before: 30px !important;
    -webkit-padding-after: 20px !important;
    -webkit-padding-end: 20px !important;
    padding-inline-start: 15px !important; /* Match the first h5 */
    padding-inline-end: 20px !important;
    padding-block-start: 30px !important;
    padding-block-end: 20px !important;
    padding: 30px 20px 20px 15px !important; /* top right bottom left - Match the first h5 */
    box-sizing: border-box !important;
  }
  
  /* Extend blue background to the right on mobile */
  #container-199060f3e3.swap-image-text .text .text-highlighted h5:after {
    width: 0 !important; /* Remove the left extension on mobile */
  }
  
  #container-199060f3e3.swap-image-text .text:last-of-type {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  /* Remove padding for the last h5 */
  #container-199060f3e3.swap-image-text .text:last-of-type h5 {
    padding-left: 0 !important;
    -webkit-padding-start: 0 !important;
    padding-inline-start: 0 !important;
    margin-left: 0 !important;
  }
}

/* Specifically target container-199060f3e3 */
#container-199060f3e3.swap-image-text .image {
  justify-self: end !important; /* Push to the right */
  margin-right: 0 !important; /* No right margin */
  margin-left: 0 !important; /* No left margin */
}

#container-199060f3e3.swap-image-text .text {
  justify-self: start !important;
  padding-left: 0 !important; /* Align with title */
  margin-left: 0 !important; /* Align with title */
}

/* Ensure text-highlighted container aligns left */
#container-199060f3e3.swap-image-text .text .text-highlighted {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Specifically target the "Do's and don'ts" h5 to match the "Having treatment" h5 */
#text-461d69e24a h5 {
  padding-left: 15px !important;
  padding-right: 20px !important;
  padding-top: 30px !important;
  padding-bottom: 20px !important;
  -webkit-padding-start: 15px !important;
  -webkit-padding-end: 20px !important;
  -webkit-padding-before: 30px !important;
  -webkit-padding-after: 20px !important;
  padding-inline-start: 15px !important;
  padding-inline-end: 20px !important;
  padding-block-start: 30px !important;
  padding-block-end: 20px !important;
}

#container-199060f3e3.swap-image-text .image img {
  max-width: 100% !important; /* Match the size of other images */
  width: 100% !important; /* Ensure full width like hmnc-img4 */
  height: auto !important; /* Maintain aspect ratio */
  margin-left: 0 !important; /* No left margin */
  margin-right: 0 !important; /* No right margin */
  display: block !important; /* Removes inline spacing */
}

/* Override the blue background extension to go left instead of right */
#container-199060f3e3.swap-image-text .text .text-highlighted h5:after {
  background-color: var(--emu-semantic-colors-secondary-blue-400, #e6f6fc) !important;
  content: "" !important;
  z-index: var(--emu-common-other-z-index-layer, 1) !important;
  width: 50vw !important;
  display: block !important;
  position: absolute !important;
  inset-block: 0 !important;
  inset-inline-start: auto !important; /* Remove the right extension */
  inset-inline-end: 100% !important; /* Extend to the left instead */
}

/* Ensure the h5 element has proper positioning and spacing - Desktop only */
@media (min-width: 768px) {
  #container-199060f3e3.swap-image-text .text .text-highlighted h5 {
    position: relative !important;
    background-color: var(--emu-semantic-colors-secondary-blue-400, #e6f6fc) !important;
    max-width: calc(100% - 30px) !important; /* Add gap from the image */
    margin-right: 30px !important; /* Gap between blue BG and image */
    margin-left: 0 !important; /* Align to left like title */
    padding-left: 0 !important; /* Remove extra padding for desktop */
  }
}

/* Remove the :before pseudo-element that extends right in the original layout */
#container-199060f3e3.swap-image-text .text .text-highlighted h5:before {
  display: none !important; /* Hide the right extension */
}

/* Position the additional text below blue background text, beside the image */
#container-199060f3e3.swap-image-text .text:last-of-type {
  grid-area: extratext !important; /* Place in the third row, left column */
  margin-top: 0 !important;
  padding-top: 0 !important;
  align-self: start !important; /* Align to top of grid area */
}

/* Fix the overlapping blue backgrounds by adding space between them */
#container-199060f3e3.swap-image-text .text + .text {
  margin-top: 150px !important;
  padding-top: 30px !important;
}

/* Ensure the h5 inside additional text also aligns left */
#container-199060f3e3.swap-image-text .text:last-of-type h5 {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Ensure paragraphs in additional text align left */
#container-199060f3e3.swap-image-text .text:last-of-type p {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Ensure the inner text container aligns left */
#container-199060f3e3.swap-image-text .text:last-of-type .cmp-text {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* ===========================================
   STICKY NAVIGATION & SMOOTH SCROLLING
   =========================================== */

/* Enable smooth scrolling for the entire page */
html {
  scroll-behavior: smooth !important;
}

/* Sticky navigation container */
.c-topicnavigation.aaaem-container__position-sticky {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background-color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Make navigation container display flex to align items inline */
#container-31174db936.c-topicnavigation__container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
}

/* Make the Browse by topic text stay on left */
#container-31174db936 .text:first-child {
  flex: 0 0 auto !important;
  text-align: left !important;
}

#container-31174db936 .text:first-child p {
  margin: 0 !important;
}

/* Make navigation list align to right */
#container-31174db936 .navigationlist {
  flex: 1 1 auto !important;
  display: flex !important;
  justify-content: flex-end !important;
}

/* Align ul and li items to the right */
#container-31174db936 .emu-navigation ul {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#container-31174db936 .emu-navigation ul li {
  display: inline-flex !important;
}

/* Fix parent containers that might interfere with sticky */
.c-topicnavigation.aaaem-container__position-sticky::before,
.c-topicnavigation.aaaem-container__position-sticky::after {
  content: none !important;
}

/* Ensure parent elements don't have overflow hidden */
body,
html,
.root,
.experiencefragment,
.xf-content-height,
.aem-Grid,
.aem-GridColumn,
.container.responsivegrid {
  overflow: visible !important;
}

/* Ensure the sticky container has proper display */
.c-topicnavigation.aaaem-container__position-sticky,
.c-topicnavigation.aaaem-container__position-sticky .container.responsivegrid,
.c-topicnavigation__container {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Prevent any transforms on parent that could break sticky */
.aem-GridColumn--default--12:has(.c-topicnavigation) {
  transform: none !important;
  will-change: auto !important;
}

/* Add scroll offset to prevent content from hiding under sticky nav */
#before-treatment,
#treatment,
#post-treatment {
  scroll-margin-top: 120px !important;
}


/* Center the FIND A CLINIC button horizontally */
.c-navigation-wrapper-bottom {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  text-align: center !important;
}

#container-710c8004f8 {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#container-710c8004f8 .button {
  display: block !important;
  text-align: center !important;
  width: 100% !important;
  margin: 0 auto !important;
}

#container-710c8004f8 .button a {
  display: inline-block !important;
  margin: 0 auto !important;
}

/* Mobile responsive */
@media (max-width: 767px) {
  .aaaem-container__position-sticky {
    padding: 0 !important;
  }
  
  #before-treatment,
  #treatment,
  #post-treatment {
    scroll-margin-top: 100px !important;
  }
  
  /* Center FIND A CLINIC button on mobile */
  .c-navigation-wrapper-bottom {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
  }
  
  #container-710c8004f8 {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  #container-710c8004f8 .button {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    margin: 0 auto !important;
  }
  
  #container-710c8004f8 .button a {
    display: inline-block !important;
    margin: 0 auto !important;
    text-align: center !important;
  }
}

/* ===========================================
   FADE-IN ANIMATION FOR SCROLL ELEMENTS
   =========================================== */

/* Initial state - hidden and moved down */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Visible state - shown and in position */
.fade-in-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered animation delays */
.fade-in-up.delay-1 {
  transition-delay: 0.15s;
}

.fade-in-up.delay-2 {
  transition-delay: 0.3s;
}

.fade-in-up.delay-3 {
  transition-delay: 0.45s;
}

.fade-in-up.delay-4 {
  transition-delay: 0.6s;
}

/* Faster animation variant */
.fade-in-up.fast {
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

/* Slower animation variant */
.fade-in-up.slow {
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

/* ===========================================
   SIMPLE STACKED CARDS - NO SCROLL REVEAL
   =========================================== */

/* Reset scroll reveal to normal flow */
.emu-scroll-reveal {
  display: block;
  position: static;
  height: auto;
}

.emu-scroll-reveal__container,
.emu-scroll-reveal__content-wrapper {
  position: static;
  height: auto;
}

/* Center title */
.emu-scroll-reveal__static-content-container {
  text-align: center;
  margin-bottom: 50px;
}

/* Hide progress bar */
.emu-scroll-reveal__progressbar-container {
  display: none;
}

/* Stack all article divs vertically */
.emu-scroll-reveal__slides {
  display: block;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.emu-scroll-reveal__slides > div {
  display: block;
  margin-bottom: 40px;
  opacity: 1;
  visibility: visible;
  position: static;
  transform: none;
}

.emu-scroll-reveal__slides article {
  display: block;
  opacity: 1;
  visibility: visible;
}

/* Hide helper divs */
.emu-scroll-reveal__checkpoint,
.emu-scroll-reveal__placeholder,
.emu-scroll-reveal__vh {
  display: none;
}

@media (max-width: 767px) {
  .emu-scroll-reveal__static-content-container {
    margin-bottom: 30px;
  }
  
  .emu-scroll-reveal__slides {
    padding: 0 15px;
  }
  
  .emu-scroll-reveal__slides > div {
    margin-bottom: 30px;
  }
}