/* ==============================================
   Shared Utility Styles (Content Sections)
   ============================================== */

/* spacing */
.py-80 { padding-top: 80px; padding-bottom: 80px; }
.pt-80 { padding-top: 80px; }
.py-60 { padding-top: 60px; padding-bottom: 60px; }
.pt-60 { padding-top: 60px; }
.pb-0  { padding-bottom: 0; }
.mb-0  { margin-bottom: 0; }
.mb-4  { margin-bottom: 1.5rem; }
.mb-5  { margin-bottom: 3rem; }
.mt-5  { margin-top: 3rem; }
.mt-60 { margin-top: 60px; }
.p-0   { padding: 0; }
.pb-5  { padding-bottom: 3rem; }
.pe-md-5 { padding-right: 3rem; }
.px-0  { padding-left: 0; padding-right: 0; }
.px-10 { padding-left: 10px; padding-right:10px;}

/* size / width */
.w-100 { width: 100%; }
.h-100 { height: 100%; }
.max-w-300  { max-width: 300px; }
.max-w-500  { max-width: 500px; }
.max-w-550  { max-width: 550px; }
.max-w-800  { max-width: 800px; }
.max-w-900  { max-width: 900px; }
.max-w-1000 { max-width: 1000px; }
.max-w-1200 { max-width: 1200px; }

/* typography */
.text-5rem { font-size: 5rem;
line-height:5.6rem; }
.text-4rem { font-size: 4rem; }
.text-2rem { font-size: 2rem; }
.text-1rem { font-size: 1rem; }
.tracking-1 { letter-spacing: 1px; }
.fw-600 { font-weight: 600; }
.text-uppercase { text-transform: uppercase; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.display-5 { font-size: 3rem; line-height: 1.2; }

/* layout helpers */
.pos-rel { position: relative; }
.pos-abs { position: absolute; }
.end-0 { right: 0; }
.bottom-0 { bottom: 0; }
.auto-margin { margin-left: auto; margin-right: auto; }

/* colors */
.bg-f5f3e6 { background-color: #f5f3e6; }
.bg-f6f5f8 { background-color: #f6f5f8; }
.bg-edebde { background-color: #edebde; }
.bg-fdfdfd { background-color: #fdfdfd; }
.bg-ffffff { background-color: #ffffff; }
.bg-f5f5f6 { background-color: #f5f5f6; }

/* images */
.object-fit-cover { object-fit: cover; }
.object-pos-right-center { object-position: right center; }
.bg-black { background-color: #000; }

/* buttons / links */
.btn-outline-dark { border-color: #000 !important; color: #000 !important; }

/* containers */
.container-max-1200 { max-width: 1200px; margin-left: auto; margin-right: auto; }

/* hero sizer for text alignment to max width */
.hero-sizer { padding-left: max(1rem, calc((100vw - 1600px) / 2)); }
/* Footer container */
.results-footer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  padding-top: 0.5rem;
}

/* Centered name */
.carousel-name {
  text-align: center;
  margin: 0 auto;
  font-size: 1rem;
}

/* Controls container (right-aligned, same baseline as text) */
.carousel-controls {
  display: flex;
  align-items: center;
}

/* indc (dots) */
.carousel-indc {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 10px;
}

.carousel-indc button {
  min-width: 30px;
  min-height: 30px;
  border-radius: 50%;
  border: 1px solid #000;
  background: transparent;
  opacity: 0.6;
  cursor: pointer;
  transition: all 0.2s ease;
}

.carousel-indc button:hover, .carousel-indc button:focus {
  opacity: 1;
}

.carousel-indc button.active {
  background: #000;
  opacity: 1;
}

/* Arrows */
.carousel-arrows {
  margin-right:10px;
  display: flex;
  align-items: center;
 
}

.carousel-arrow {
  min-width: 35px;
  min-height: 48px;
  background: none;
  margin-left:5px;
  border: none;
  font-size: 3rem;
  cursor: pointer;
  line-height: 1;
  color: #000;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.carousel-arrow:hover {
  opacity: 1;
}

  .treatment-footnote {
    display: block;
  }

  .treatment-footnote-mobile {
    display: none;
  }



/* Responsive: stack name and controls cleanly on mobile */
@media (max-width: 768px) {
  .results-footer {
    flex-direction: column;
    gap: 0.5rem;
  }
  .carousel-controls {
    position: static;
    justify-content: center;
    margin-top: 0.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #helloBar .hello-btn,
  #helloBar #closeHelloBar {
      transition: none;
  }
  }



/* ---------- Responsive Breakpoints ---------- */
@media (max-width: 1600px) {
    .text-5rem { font-size: 3.5rem; line-height:1.2; }
  .text-4rem { font-size: 3.5rem; }
  .hero-sizer {
    padding-left: max(1rem, calc((100vw - 1400px) / 2));
    padding-right: max(1rem, calc((100vw - 1400px) / 2));
  }

}
@media (max-width: 1200px) {
  .text-5rem { font-size: 2.5rem; line-height:1.2; }
  .text-4rem { font-size: 3rem; }
  .pe-md-5 { padding-right: 2rem; }
  .hero-sizer {
    padding-left: max(1rem, calc((100vw - 1000px) / 2));
    padding-right: max(1rem, calc((100vw - 1000px) / 2));
  }
  .max-w-1200 { max-width: 1000px; }
  .max-w-1000 { max-width: 800px; }

}
@media (max-width: 992px) {
  .hero { padding-top: 72px; }
}
@media (max-width: 768px) {
  .carousel-indc {
    min-width: 45px;
    min-height: 45px;
  }
  .py-80 { padding-top: 40px; padding-bottom: 40px; }
  .text-4rem { font-size: 2rem; line-height: 1.3; }
  .text-2rem { font-size: 1.5rem; }
  .hero-sizer { padding-left: 1rem; padding-right: 1rem; }
  .max-w-900,
  .max-w-800,
  .max-w-1000,
  .max-w-1200 { max-width: 100%; }
  .pe-md-5 { padding-right: 1rem; }
  
  .treatment-footnote-mobile {
    display: block;
  }
    .treatment-footnote {
    display: none;
  }
}