/* ================= FAQ PAGE MOBILE RESPONSIVE STYLES ================= */

/* ================= MOBILE RESPONSIVE STYLES (max-width: 767px) ================= */

@media (max-width: 767px) {
  :root {
    /* ========== MOBILE TYPOGRAPHY SCALE ========== */
    
    /* Section Titles & Headings */
    --mobile-title-primary: clamp(1.6rem, 4.8vw, 2.2rem);       /* Main section titles */
    --mobile-title-secondary: clamp(1.3rem, 3.8vw, 1.8rem);     /* Sub-section titles */
    --mobile-title-tertiary: clamp(1.1rem, 3.2vw, 1.4rem);      /* Card/component titles */
    
    /* Body Text & Content */
    --mobile-text-large: clamp(0.9rem, 2.8vw, 1rem);           /* Large body text */
    --mobile-text-base: clamp(0.8rem, 2.4vw, 0.9rem);          /* Standard body text */
    --mobile-text-small: clamp(0.7rem, 2.1vw, 0.8rem);         /* Small text, captions */
    --mobile-subtitle: clamp(1rem, 3.5vw, 1.3rem);             /* Section subtitles */
    
    /* Interactive Elements */
    --mobile-button-text: clamp(0.75rem, 2.5vw, 0.85rem);      /* Button text */
    --mobile-form-text: clamp(0.8rem, 2.4vw, 0.9rem);          /* Form inputs */
    
    /* Decorative & UI Elements */
    --mobile-svg-small: clamp(14px, 3.5vw, 18px);              /* Small SVGs/icons */
    --mobile-svg-medium: clamp(18px, 4.5vw, 22px);             /* Medium SVGs */
    --mobile-divider-width: clamp(160px, 45vw, 200px);         /* Divider width */
    
    /* Spacing Scale */
    --mobile-spacing-xs: clamp(0.3rem, 1.2vw, 0.5rem);         /* Extra small spacing */
    --mobile-spacing-sm: clamp(0.5rem, 1.8vw, 0.7rem);         /* Small spacing */
    --mobile-spacing-md: clamp(0.7rem, 2.8vw, 1rem);           /* Medium spacing */
    --mobile-spacing-lg: clamp(1rem, 4vw, 1.4rem);             /* Large spacing */
    --mobile-spacing-xl: clamp(1.2rem, 5vw, 1.8rem);           /* Extra large spacing */
    --mobile-spacing-xxl: clamp(1.8rem, 7vw, 2.5rem);          /* Section spacing */
    
    /* Container & Layout */
    --mobile-container-padding: clamp(18px, 4.5vw, 24px);      /* Side padding */
    --mobile-section-padding: clamp(2rem, 8vw, 3rem);          /* Section padding */
  }

  /* ========== GLOBAL MOBILE CONTAINER SYSTEM ========== */
  .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 var(--mobile-container-padding) !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  /* ========== SECTION SPACING ========== */
  section {
    padding: var(--mobile-section-padding) 0 !important;
  }

  /* ========== FAQ SECTION MOBILE OPTIMIZATION ========== */
  .faq {
    padding: var(--mobile-section-padding) 0 !important;
  }

  .faq__header {
    text-align: left !important;
    margin-bottom: var(--mobile-spacing-xl) !important;
  }

  .faq__title {
    font-size: var(--mobile-title-primary) !important;
    margin-bottom: var(--mobile-spacing-sm) !important;
    line-height: 1.2 !important;
  }

  .faq__divider {
    max-width: var(--mobile-divider-width) !important;
    margin: 0 0 var(--mobile-spacing-sm) 0 !important;
  }

  .faq__subtitle {
    font-size: var(--mobile-text-base) !important;
    line-height: 1.5 !important;
  }

  .faq__section-heading {
    font-size: 1.5rem;
  }

  .faq__accordion {
    width: 100% !important;
    max-width: none !important;
  }

  .faq__item {
    margin-bottom: var(--mobile-spacing-md) !important;
    padding: 0 !important;
  }

  .faq__question {
    padding: var(--mobile-spacing-md) var(--mobile-container-padding) !important;
    font-size: var(--mobile-text-large) !important;
    line-height: 1.4 !important;
  }

  .faq__icon {
    min-width: var(--mobile-svg-medium) !important;
    height: var(--mobile-svg-medium) !important;
    margin-left: var(--mobile-spacing-sm) !important;
  }

  .faq__icon img {
    width: var(--mobile-svg-small) !important;
    height: var(--mobile-svg-small) !important;
  }

  .faq__answer {
    padding: 0 var(--mobile-container-padding) !important;
  }

  .faq__answer[aria-hidden="false"] {
    padding: 0 var(--mobile-container-padding) var(--mobile-spacing-md) !important;
  }

  .faq__answer p {
    font-size: var(--mobile-text-base) !important;
    line-height: 1.5 !important;
  }
}

/* ================= MOBILE SUB-BREAKPOINTS ================= */

/* Extra Small Mobile Devices (320px - 375px) */
@media (max-width: 375px) {
  :root {
    --mobile-container-padding: 16px !important;
    --mobile-section-padding: clamp(1.8rem, 7vw, 2.5rem) !important;
  }

  .faq__title {
    font-size: clamp(1.4rem, 4.5vw, 1.8rem) !important;
  }

  .faq__question {
    font-size: var(--mobile-text-base) !important;
    padding: var(--mobile-spacing-sm) var(--mobile-container-padding) !important;
  }

  .faq__answer p {
    font-size: var(--mobile-text-small) !important;
  }
}

/* Small Mobile Devices (376px - 414px) */
@media (min-width: 376px) and (max-width: 414px) {
  :root {
    --mobile-container-padding: 18px !important;
  }
}

/* Medium Mobile Devices (415px - 600px) */
@media (min-width: 415px) and (max-width: 600px) {
  :root {
    --mobile-container-padding: 20px !important;
  }
}

/* Large Mobile Devices (601px - 767px) */
@media (min-width: 601px) and (max-width: 767px) {
  :root {
    --mobile-container-padding: 24px !important;
  }
}