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

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

/* Shared styles for main containers and wrappers */
.rewards-program__container,
.features-section__container,
.referral-cta__content-wrapper,
.faq-section__container {
  max-width: 1200px; /* Limits the overall content width */
  margin: 0 auto; /* Centers the container horizontally */
  padding: 0 1rem; /* Adds horizontal padding to prevent content touching edges */
}

/* Shared styles for buttons on hover/focus states */
.rewards-program__button:hover,
.rewards-program__button:focus,
.referral-cta__button:hover,
.referral-cta__button:focus {
  transform: translateY(-2px); /* Subtle lift effect */
  outline: none; /* Removes default focus outline */
}

/* Common display for mobile headings */
.referral-cta__main-heading--mobile,
.faq-section__main-heading--mobile {
  display: block; /* Visible by default on mobile screens */
}

/* Common display for desktop headings (hidden by default on mobile) */
.referral-cta__main-heading--desktop,
.faq-section__main-heading--desktop {
  display: none; /* Hidden by default on mobile screens */
}

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

/* Rewards Program Section */
.rewards-program {
  padding: 3rem 0; /* Vertical padding */
  background-color: lightgray;
  min-height: fit-content; /* Ensures the section wraps its content */
}

/* Rewards Program Container */
.rewards-program__container {
  display: flex; /* Enables flexbox layout */
  flex-direction: column-reverse; /* Stacks image on top of text */
  align-items: center; /* Centers items along the cross-axis */
  gap: 1rem; /* Spacing between flex items */
}

/* Rewards Program Text Content Section */
.rewards-program__content {
  background-color: var(--bg);
  min-height: 50vh; /* Minimum height for the content box */
  border-bottom-right-radius: 100% 50%;
  border-bottom-left-radius: 100% 50%;
  color: white;
  text-align: center; /* Centers text horizontally */
  display: flex; /* Enables flexbox for its children */
  flex-direction: column; /* Stacks children vertically */
  justify-content: center; /* Centers children vertically */
  padding: 2rem; /* Internal padding */
  margin-top: 0.5rem; /* Top margin for small screens */
  width: 100%; /* Takes full width on small screens */
  max-width: 550px; /* Limits max width for text content */
}

/* Rewards Program Heading */
.rewards-program__heading {
  font-size: 2rem;
  margin-bottom: 1rem;
  line-height: 1.2;
  font-weight: bold;
}

/* Rewards Program Description Paragraph */
.rewards-program__description {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  max-width: 500px; /* Limits paragraph width for readability */
  margin-left: auto;
  margin-right: auto;
}

/* Rewards Program Button Wrapper */
.rewards-program__button-wrapper {
  margin-top: 1rem; /* Top margin for the button */
}

/* Rewards Program Button */
.rewards-program__button {
  display: inline-block; /* Allows padding and width to be applied */
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--bg_sec);
  background-color: var(--bg_sec);
  color: var(--black); /* Text color */
  text-decoration: none; /* Removes underline from link */
  border-radius: 0.375rem; /* Standard button rounded corners */
  font-weight: bold; /* Bold text */
  transition: background-color 0.3s ease, border-color 0.3s ease;
  cursor: pointer;
  font-size: 1rem;
}

/* Rewards Program Button Hover/Focus specific styles */
.rewards-program__button:hover,
.rewards-program__button:focus {
  background-color: var(--bg_sec); /* Slightly darker on hover/focus */
}

/* Rewards Program Image Wrapper */
.rewards-program__image-wrapper {
  position: relative; /* Allows for absolute positioning of children if needed */
  padding: 0; /* Removes any padding */
  width: 100%; /* Takes full width on small screens */
  max-width: 400px; /* Limits the image wrapper width for better scaling */
}

/* Rewards Program Image Asset */
.rewards-program__image-asset {
  max-width: 100%; /* Ensures image fits within its container */
  height: auto; /* Maintains aspect ratio */
  display: block; /* Removes extra space below the image */
  border-radius: 0.5rem; /* Slightly rounded corners for the image */
}

/* Features Section */
.features-section {
  padding: 3rem 0; /* Vertical padding for the section */
}

/* Features Section Container */
.features-section__container {
  display: flex;
  flex-direction: column; /* Stacks items vertically for mobile */
  align-items: center; /* Centers items horizontally */
  margin-top: 3rem; /* Top margin for spacing */
  gap: 2.5rem; /* Space between individual feature items */
}

/* Individual Feature Item */
.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center; /* Centers content within each feature item */
  text-align: center; /* Centers text within each feature item */
  width: 100%; /* Takes full width on small screens */
  max-width: 350px; /* Limits max width for better visual flow */
}

/* SVG Icon within a feature item */
.feature-item__icon {
  width: 80px; /* Standard icon size */
  height: 80px; /* Standard icon size */
  color: #072d2d; /* Example color, customize to match your brand */
  margin-bottom: 1.5rem; /* Space below the icon */
}

/* Title for each feature item */
.feature-item__title {
  font-size: clamp(1.25rem, 3vw, 1.5rem); /* Responsive font size */
  margin-bottom: 0.75rem;
  color: #333;
  font-weight: 600;
}

/* Description paragraph for each feature item */
.feature-item__description {
  font-size: clamp(0.9rem, 2vw, 1rem); /* Responsive font size */
  line-height: 1.6;
  color: #555; /* Example text color */
}

/* Referral CTA Section */
.referral-cta-section {
  padding: 0; /* Mobile-first padding */
}

/* Referral CTA Content Wrapper */
.referral-cta__content-wrapper {
  display: flex;
  flex-direction: column-reverse; /* Stacks children vertically and reverses order */
  justify-content: center; /* Centers items horizontally */
  align-items: center; /* Centers items vertically */
  gap: 2rem; /* Space between the text box and heading box */
}

/* Referral CTA Text Content Box */
.referral-cta__text-box {
  background-color: var(--bg_sec);
  color: var(--black);
  border-radius: 10px;
  width: 100%; /* Full width on mobile */
  padding: 15px; /* Internal padding */
  display: flex; /* Enables flexbox for internal content */
  flex-direction: column; /* Stacks paragraphs and button */
  justify-content: center; /* Centers content vertically */
}

/* Paragraphs within the text box */
.referral-cta__paragraph {
  font-size: clamp(0.95rem, 2vw, 1.1rem); /* Responsive font size */
  margin-bottom: 1rem;
}

/* Referral CTA Button */
.referral-cta__button {
  display: flex; /* Enables flexbox */
  justify-content: center; /* Centers content horizontally */
  align-items: center; /* Centers text vertically within the button */
  width: 50%; /* Half width */
  max-width: 200px; /* Limits button width */
  padding: 0.65rem 1.25rem;
  margin: 0.5rem auto; /* Vertical margin and horizontal centering */
  margin-top: 0.5rem; /* Initial top margin */
  text-decoration: none; /* Removes underline */
  color: white; /* Text color */
  background-color: var(--accent-color);
  border: 1px solid var(--accent-color);
  border-radius: 0.375rem; /* Standard rounded corners */
  font-weight: bold;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  cursor: pointer;
}

/* Referral CTA Button Hover/Focus specific styles */
.referral-cta__button:hover,
.referral-cta__button:focus {
  background-color: var(--accent-color-hover);
  border-color: var(--accent-color-hover);
}

/* Referral CTA Heading Box */
.referral-cta__heading-box {
  width: 100%; /* Full width on mobile */
  margin: 0.5rem 0; /* Vertical margin */
  display: flex; /* Enables flexbox */
  justify-content: center; /* Centers content horizontally */
  align-items: center; /* Centers content vertically */
  text-align: center; /* Ensures heading text is centered */
}

/* Main heading for Referral CTA */
.referral-cta__main-heading {
  font-weight: 900;
  color: #333; /* Or adjust to a variable if preferred */
  line-height: 1.2;
}

/* Mobile specific font size for Referral CTA heading */
.referral-cta__main-heading--mobile {
  font-size: clamp(1.8rem, 5vw, 2.5rem);
}

/* Desktop specific font size for Referral CTA heading */
.referral-cta__main-heading--desktop {
  font-size: clamp(2rem, 6vw, 2.3rem);
}

/* FAQ Section */
.faq-section {
  padding: 3rem 0; /* Vertical padding */
  background-color: #f8f8f8; /* Light background for the section */
}

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

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

/* Main heading for FAQ Section */
.faq-section__main-heading {
  font-weight: 400;
  color: var(--primary-color);
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

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

/* Desktop specific font size for FAQ heading */
.faq-section__main-heading--desktop {
  font-size: clamp(2.5rem, 6vw, 3.5rem);
}

/* Wrapper for the accordion component */
.faq-section__accordion-wrapper {
  width: 100%; /* Full width on mobile */
  max-width: 1200px; /* Adjusted max-width */
  margin-top: 1rem; /* Top margin */
}

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

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

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

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

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

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

/* Button inside the header */
.faq-item__button {
  display: flex; /* Enables flexbox */
  justify-content: space-between; /* Distributes space between items */
  align-items: center; /* Centers items vertically */
  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.25rem); /* Responsive font size */
  font-weight: 400;
  cursor: pointer;
  color: var(--black); /* Default text color */
  transition: color 0.3s ease; /* Smooth transition for text color */
}

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

/* Remove outline and box-shadow on focus */
.faq-item__button:focus {
  outline: none;
  box-shadow: none;
}

/* Icon (SVG) styling */
.faq-item__icon {
  width: 24px;
  height: 24px;
  color: var(--black); /* Default icon color */
  transition: transform 0.3s ease, color 0.3s ease; /* Smooth transition for rotation and color */
  flex-shrink: 0; /* Prevent icon from shrinking */
  margin-left: 0.5rem; /* Space between text and icon */
}

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

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

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

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

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

/* Body text within the accordion content */
.faq-item__body-text {
  padding: 0.5rem 1.2rem 1.5rem; /* Padding for the content */
  font-size: clamp(0.9rem, 2vw, 1rem); /* Responsive font size */
  line-height: 1.6;
}

/* Link color within accordion body text */
.faq-item__body-text a {
  color: #007bff; /* Link color */
  text-decoration: underline;
}

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

/* Large devices (min-width: 992px) */
@media (min-width: 992px) {
  /* Rewards Program Section adjustments for large screens */
  .rewards-program__container {
    flex-direction: row; /* Arranges items in a row */
    justify-content: space-around; /* Distributes space around items */
    align-items: flex-start; /* Aligns items to the start of the cross-axis */
  }

  .rewards-program__content {
    flex: 0 0 auto; /* Prevents text from growing or shrinking automatically */
    width: 48%; /* Takes roughly half the width */
    margin-top: 0; /* Removes top margin */
  }

  .rewards-program__image-wrapper {
    flex: 0 0 auto; /* Prevents image from growing or shrinking automatically */
    width: 38%; /* Takes roughly 40% width */
  }

  /* Features Section adjustments for large screens */
  .features-section__container {
    flex-direction: row; /* Arranges items in a row */
    justify-content: space-between; /* Distributes space evenly between items */
    align-items: flex-start; /* Aligns items to the top */
  }

  .feature-item {
    flex: 0 0 auto; /* Prevent growing/shrinking */
    /* Calculate width to fit 3 items with a 2.5rem gap (total 2 gaps) */
    width: calc(33.333% - (2.5rem * 2 / 3));
  }

  /* Referral CTA Section adjustments for large screens */
  .referral-cta-section {
    padding: 3rem 0; /* Vertical padding */
  }

  .referral-cta__content-wrapper {
    flex-direction: row; /* Arranges items in a row */
    justify-content: space-between; /* Distributes space between items */
    align-items: center; /* Aligns items vertically in the center */
  }

  .referral-cta__text-box {
    width: calc(50% - 2.5rem); /* Adjusted for gap from heading box */
    padding: 1.5rem; /* Larger padding */
    border-radius: 20px;
  }

  .referral-cta__button {
    margin-top: 0.75rem; /* Adjusted top margin */
  }

  .referral-cta__heading-box {
    width: calc(50% - 2.5rem); /* Adjusted for gap */
    margin-left: 3rem; /* Left margin */
    margin-top: 0; /* Resets vertical margin */
    margin-bottom: 0; /* Resets vertical margin */
  }

  /* Visibility toggles for Referral CTA headings on large screens */
  .referral-cta__main-heading--desktop {
    display: block; /* Visible on large screens */
  }

  .referral-cta__main-heading--mobile {
    display: none; /* Hidden on large screens */
  }

  /* Visibility toggles for FAQ headings on large screens */
  .faq-section__main-heading--desktop {
    display: block; /* Visible on large screens */
  }

  .faq-section__main-heading--mobile {
    display: none; /* Hidden on large screens */
  }
}