/**
 * expandable-listing Block
 *
 * Styles for accordion-style expandable listing component with
 * chevron icons and collapsible content sections. Supports dark mode.
 *
 * BEM STRUCTURE
 * - .expandable-listing: Main container (dark-mode modifier)
 * - .el-heading: Section header with h2 title
 * - .el-wrap: Content wrapper
 * - .el-icon-heading: Heading row with title and chevron (clickable)
 * - .el-tab-repet: Individual accordion item (active/is-open states)
 * - .el-tab-des: Content description area
 * - .el-des-btn: Hidden button area
 * - .el-cta: CTA button centered below content
 * - .chevron: Animated chevron icon (180deg rotation)
 * - .icon-plus: Icon styling (primary-200 color)
 *
 * RESPONSIVE BREAKPOINTS
 * - respond-below(md): 44px to 20px margin-bottom, padding adjustments
 *
 * KEY FEATURES
 * - Clickable .clickable class makes heading interactive
 * - .is-open state rotates chevron 180deg
 * - .active state adds box-shadow and gray background
 * - Icon animations (opacity, border, background color)
 * - Dark mode class inverts colors
 * - SVG chevron icon with data URI
 * - Smooth 0.3s ease transitions on all state changes
 * - Focus outline styling for accessibility (outline-offset 3px)
 */
/*
 * Abstracts: Core Exports
 *
 * DESCRIPTION
 * Entry point that forwards all abstract modules (functions, variables,
 * mixins) for convenient importing throughout the codebase.
 *
 * USAGE
 * Import entire abstracts layer: @use "../../abstracts/core" as *;
 * All functions, variables, and mixins become available after import.
 */
/*
 * Abstracts: Sass Functions
 *
 * DESCRIPTION
 * Custom Sass functions for calculations, conversions, and utilities.
 * Used throughout the codebase for consistent value transformations.
 *
 * KEY FUNCTIONS
 * - decimal-round: Rounds numbers to specific decimal places
 * - rem: Converts px values to rem units using $base (16px)
 * - Other utility functions for calculations
 *
 * USAGE
 * @use "function" as *;
 * $font-size: rem(24);  // Returns 1.5rem
 */
/**
 * Rounds a number to specified decimal places
 *
 * @param {number} $number - Value to round
 * @param {number} $digits - Number of decimal places
 * @param {string} $mode - round, ceil, or floor
 * @return {number} Rounded value
 */
/*
 * Abstracts: Core Exports
 *
 * DESCRIPTION
 * Entry point that forwards all abstract modules (functions, variables,
 * mixins) for convenient importing throughout the codebase.
 *
 * USAGE
 * Import entire abstracts layer: @use "../../abstracts/core" as *;
 * All functions, variables, and mixins become available after import.
 */
/*
 * Abstracts: Global Variables
 *
 * DESCRIPTION
 * Application-wide Sass variables including typography, color system,
 * spacing scales, and breakpoint definitions. All color and sizing
 * variables are defined here for consistent theming across components.
 *
 * USAGE
 * Import as: @use "variables" as *;
 * Access variables directly: $primary-100, $font-size-base, etc.
 */
/* Note: If need Disable Decimal-value functionilty open function.scss file */
/*
 * Abstracts: Core Exports
 *
 * DESCRIPTION
 * Entry point that forwards all abstract modules (functions, variables,
 * mixins) for convenient importing throughout the codebase.
 *
 * USAGE
 * Import entire abstracts layer: @use "../../abstracts/core" as *;
 * All functions, variables, and mixins become available after import.
 */
/*
 * Abstracts: Global Mixins
 *
 * DESCRIPTION
 * Reusable Sass mixins for responsive design, utility patterns, and
 * common styling needs. Includes media query helpers, flexbox utilities,
 * and other frequently used patterns.
 *
 * KEY MIXINS
 * - respond-above: Media query min-width breakpoint
 * - respond-below: Media query max-width breakpoint
 * - respond-between: Media query range between two breakpoints
 * - flex patterns and other utility mixins
 *
 * USAGE
 * Import as: @use "mixins" as *;
 * Call mixin: @include respond-above(md) { ... }
 */
/* mini laptop resolution 1349 X 662 and 1246 X 681 and 1218 X 672 */
/* Mozila Firefox */
.expandable-listing {
  position: relative;
  background-size: cover;
}
.expandable-listing .el-heading {
  width: 100%;
  margin: 0 auto;
  margin-bottom: 2.75rem;
  text-align: center;
}
@media (max-width: 767px) {
  .expandable-listing .el-heading {
    margin-bottom: 1.25rem;
  }
}
.expandable-listing .el-heading h2 {
  margin-bottom: 1.44rem;
  font-weight: 400;
}
@media (max-width: 767px) {
  .expandable-listing .el-heading h2 {
    margin-bottom: 0.94rem;
  }
}
.expandable-listing .el-wrap {
  width: 100%;
}
.expandable-listing .el-icon-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.expandable-listing .el-icon-heading.clickable {
  cursor: pointer;
}
.expandable-listing .el-icon-heading.clickable h5 {
  padding-right: 1.25rem;
}
.expandable-listing .el-icon-heading h5 {
  position: relative;
  width: 95%;
  font-size: 1.5rem;
  line-height: 30px;
  font-weight: 400;
  margin-bottom: 0;
  padding: 1.5rem 0;
}
@media (max-width: 767px) {
  .expandable-listing .el-icon-heading h5 {
    width: 80%;
  }
}
.expandable-listing .el-icon-heading .chevron {
  width: 33px;
  height: 19px;
}
.expandable-listing .el-icon-heading .chevron::after {
  content: "";
  display: block;
  right: 1.5rem;
  top: 50%;
  width: 33px;
  height: 19px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 33 19' fill='none'%3E%3Cpath d='M1.5 1.5L16.45 17L31.47 1.5' stroke='%23081D4D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform-origin: center;
  transition: transform 0.3s ease-in-out;
}
.expandable-listing .el-des-btn {
  display: none;
  margin-top: 0;
}
.expandable-listing .el-tab-des {
  width: 100%;
  max-width: 50.94rem;
  margin-bottom: 0.88rem;
}
.expandable-listing .el-tab-des p {
  margin-bottom: 1.88rem;
}
@media (max-width: 767px) {
  .expandable-listing .el-tab-des p {
    margin-bottom: 1rem;
  }
}
.expandable-listing .el-tab-des p:last-child {
  margin-bottom: 0;
}
.expandable-listing .el-tab-des p a:focus {
  outline: none;
}
.expandable-listing .el-tab-des p a.tab-focus.tab-focus {
  outline-offset: 0.19rem;
  outline: 1px solid;
}
.expandable-listing .el-tab-des h6 {
  margin-bottom: 0.57rem;
}
.expandable-listing .el-tab-des h1,
.expandable-listing .el-tab-des .h1 {
  font-weight: 600;
}
.expandable-listing .el-tab-des h2,
.expandable-listing .el-tab-des .h2 {
  font-weight: 600;
}
.expandable-listing .el-tab-des h3,
.expandable-listing .el-tab-des .h3 {
  font-weight: 600;
}
.expandable-listing .el-tab-des h4,
.expandable-listing .el-tab-des .h4 {
  font-weight: 600;
}
.expandable-listing .el-tab-des h5,
.expandable-listing .el-tab-des .h5 {
  font-weight: 600;
}
.expandable-listing .el-tab-des h6,
.expandable-listing .el-tab-des .h6 {
  font-weight: 600;
}
.expandable-listing .el-tab-repet {
  transition: all 0.3s ease 0s;
  border-bottom: 1px solid black;
}
@media (max-width: 767px) {
  .expandable-listing .el-tab-repet {
    padding: 1.32rem 0.75rem;
  }
}
.expandable-listing .el-tab-repet.active {
  box-shadow: 0 8px 16px 0 rgba(8, 29, 77, 0.16);
  background-color: #ededeb;
}
.expandable-listing .el-tab-repet.active .el-icon-heading h5 {
  color: #1565c0;
}
.expandable-listing .el-tab-repet.active .el-icon-heading .icon-plus {
  background-color: #1565c0;
}
.expandable-listing .el-tab-repet.active .el-icon-heading .icon-plus::before {
  opacity: 0;
}
.expandable-listing .el-tab-repet.active .el-icon-heading .icon-plus::after {
  border: 1px solid #fff;
  background-color: #fff;
}
.expandable-listing .el-tab-repet.is-open .chevron::after {
  transform: translateY(-50%) rotate(180deg);
}
.expandable-listing .el-cta {
  margin: 3rem auto;
  width: -moz-fit-content;
  width: fit-content;
  display: block;
}
.expandable-listing.dark-mode h2 {
  color: white;
}
.expandable-listing.dark-mode .el-tab-repet {
  background-color: white;
}
.expandable-listing.white-seperators h2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.25;
}
.expandable-listing.white-seperators .el-tab-repet {
  border-bottom: 1px solid white;
}
.expandable-listing.white-seperators .el-tab-repet .chevron::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 33 19' fill='none'%3E%3Cpath d='M1.5 1.5L16.45 17L31.47 1.5' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}