/*------------------------------------*\
 * #IMPORTS
 * Import external stylesheets here.
\*------------------------------------*/
@import url(/css/all.css?v=0);

/*------------------------------------*\
 * #COMMON MOBILE-FIRST STYLES
 * These styles apply by default to all screen sizes,
 * unless overridden by specific media queries.
\*------------------------------------*/

/* Shared container styling for the FAQ section */
.faq-section-cradle__container {
  max-width: 1200px; /* Limits overall content width */
  margin: 0 auto; /* Centers the container horizontally */
  padding: 0 1rem; /* Horizontal padding for spacing from screen edges */
}

/* Common button focus styles */
.faq-cradle-item__button:focus {
  outline: none;
  box-shadow: none;
}

/* Common icon transition */
.faq-cradle-item__icon {
  transition: transform 0.3s ease, color 0.3s ease; /* Smooth transition for rotation and color */
}

/* Common body text font size and line height */
.faq-cradle-item__body-text {
  font-size: clamp(0.9rem, 2vw, 1rem); /* Responsive font size */
  line-height: 1.6;
}

/* Common link styling in body text */
.faq-cradle-item__body-text a {
  color: #007bff; /* Link color */
  text-decoration: underline;
}

.faq-cradle-item__body-text a:hover {
  text-decoration: none;
}

/*------------------------------------*\
 * #SECTION-SPECIFIC MOBILE-FIRST STYLES
 * Styles unique to each section on smaller screens.
\*------------------------------------*/

/* FAQ Section for Cradle Program */
.faq-section-cradle {
  padding: 3rem 0; /* Vertical padding */
  margin-top: 60px; /* Specific top margin */
  background-color: #f8f8f8; /* Light background for the section */
}

/* FAQ Section Container */
.faq-section-cradle__container {
  display: flex;
  flex-direction: column; /* Stacks items vertically for mobile */
  align-items: center; /* Centers content horizontally */
  gap: 0.5rem; /* Space between heading and accordion */
}

/* Wrapper for the main FAQ heading */
.faq-section-cradle__heading-wrapper {
  width: 100%;
  text-align: center; /* Centers the heading text */
  margin-bottom: 1rem;
}

/* Main heading styles for FAQ Section */
.faq-section-cradle__main-heading {
  font-weight: 700;
  color: var(-black);
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

/* Mobile specific font size for FAQ Section heading */
.faq-section-cradle__main-heading--mobile {
  font-size: clamp(1.8rem, 5vw, 2.5rem);
}

/* Desktop specific font size for FAQ Section heading */
.faq-section-cradle__main-heading--desktop {
  font-size: clamp(2rem, 6vw, 2.1rem);
}

/* Wrapper for the accordion component */
.faq-section-cradle__accordion-wrapper {
  width: 100%; /* Takes full width */
  max-width: 1200px; /* Limits max-width */
  margin-top: 1rem; /* Top margin */
}

/* Footer text for FAQ Section */
.faq-section-cradle__footer-text {
  text-align: center;
  margin-top: 1.5rem; /* Top margin */
  font-weight: bold;
  font-size: clamp(0.9rem, 2vw, 1rem);
  color: var(--black);
}

/* FAQ Accordion Component */
.faq-cradle-accordion {
  border: 1px solid var(--white); /* Overall border for the accordion */
  border-radius: 8px; /* Slightly rounded corners */
  overflow: hidden; /* Ensures rounded corners are applied properly */
}

/* Individual FAQ item */
.faq-cradle-item {
  border-bottom: 1px solid var(--border-color); /* Separator between items */
}

.faq-cradle-item:last-child {
  border-bottom: none; /* No border for the last item */
}

/* FAQ item header (the clickable part) */
.faq-cradle-item__header {
  background-color: var(--white); /* Default background */
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Active header styling */
.faq-cradle-item__header.is-active {
  background-color: var(--bg);
  color: var(--white);
}

/* Button inside the header */
.faq-cradle-item__button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%; /* Full width */
  background: none; /* No background */
  border: none; /* No border */
  padding: 1rem 1.2rem;
  text-align: left;
  font-size: clamp(1rem, 2.5vw, 1.15rem); /* Responsive font size */
  font-weight: 500;
  cursor: pointer;
  color: var(--black); /* Default text color */
  transition: color 0.3s ease; /* Smooth transition for text color */
}

/* Active button text color */
.faq-cradle-item__header.is-active .faq-cradle-item__button {
  color: var(--white); /* White text for active button */
}

/* Icon (SVG) styling */
.faq-cradle-item__icon {
  width: 24px;
  height: 24px;
  color: var(--black); /* Default icon color */
  flex-shrink: 0; /* Prevent icon from shrinking */
  margin-left: 0.5rem; /* Space between text and icon */
}

/* Icon color for active header */
.faq-cradle-item__header.is-active .faq-cradle-item__icon {
  color: var(--white); /* White icon for active header */
}

/* Initial state (collapsed) */
.faq-cradle-item__button[aria-expanded="false"] .faq-cradle-item__icon {
  transform: rotate(-90deg); /* Rotates to point right when collapsed */
}

/* Expanded state */
.faq-cradle-item__button[aria-expanded="true"] .faq-cradle-item__icon {
  transform: rotate(0deg); /* Rotates to point down when expanded */
}

/* Collapsible content area */
.faq-cradle-item__content {
  max-height: 0; /* Hidden by default */
  overflow: hidden;
  transition: max-height 0.3s ease-out; /* Smooth collapse transition */
}

/* Open content area */
.faq-cradle-item__content.is-open {
  max-height: 600px; /* A value large enough to show content */
  transition: max-height 0.3s ease-in; /* Smooth expand transition */
}

/* Body text within the accordion content */
.faq-cradle-item__body-text {
  padding: 0.5rem 1.2rem 1.5rem; /* Padding for the content */
  background-color: var(--white); /* Background for content body */
  border-bottom: 2px solid var(--light_grey);
}

/*------------------------------------*\
 * #MEDIA QUERIES
 * Styles that apply only to specific screen sizes.
\*------------------------------------*/