/*
 * Container Queries - Modern CSS for Component-Level Responsiveness
 *
 * Container queries allow components to adapt based on their container size
 * rather than the viewport size, enabling true modular design.
 *
 * Browser Support: Chrome 105+, Edge 105+, Safari 16+, Firefox 110+
 * Fallback: Wrapped in @supports for progressive enhancement
 */

@supports (container-type: inline-size) {

  /*
   * Toolpanel Container
   * Allows the toolpanel to adapt based on its available width
   */
  #toolpanelwrap {
    container-type: inline-size;
    container-name: toolpanel;
  }

  @container toolpanel (min-width: 300px) {
    .toolitem {
      display: flex;
      gap: 10px;
      align-items: center;
    }

    .toolitem i {
      flex-shrink: 0;
    }
  }

  @container toolpanel (max-width: 299px) {
    .toolitem {
      display: block;
      text-align: center;
    }
  }

  /*
   * Booklet Layout Container
   * Booklet sidebar adapts to container width
   */
  #bookletlayout {
    container-type: inline-size;
    container-name: booklet;
  }

  @container booklet (min-width: 600px) {
    #bookletleft {
      width: 300px;
    }
  }

  @container booklet (max-width: 599px) {
    #bookletleft {
      width: 100%;
    }
  }

  /*
   * Question Cards Container
   * Question grid adapts to container space
   */
  #questionsholder {
    container-type: inline-size;
    container-name: questions;
  }

  @container questions (min-width: 800px) {
    .qholder {
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
  }

  @container questions (min-width: 500px) and (max-width: 799px) {
    .qholder {
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
  }

  @container questions (max-width: 499px) {
    .qholder {
      grid-template-columns: 1fr;
    }
  }

  /*
   * Search Results Container
   * Search results adapt to available space
   */
  #searchresults {
    container-type: inline-size;
    container-name: search;
  }

  @container search (min-width: 600px) {
    .searchresult {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 15px;
    }
  }

  @container search (max-width: 599px) {
    .searchresult {
      display: block;
    }
  }

  /*
   * Content Wrapper
   * Main content area responds to its container
   */
  #contentwrap {
    container-type: inline-size;
    container-name: content;
  }

  @container content (min-width: 1000px) {
    #contentpad {
      padding: 0 20px;
    }
  }

  @container content (min-width: 600px) and (max-width: 999px) {
    #contentpad {
      padding: 0 20px;
    }
  }

  @container content (max-width: 599px) {
    #contentpad {
      padding: 0 10px;
    }
  }

  /*
   * Promises Section Container
   * Promises tiles adapt to container
   */
  .promisessectionbg {
    container-type: inline-size;
    container-name: promises;
  }

  @container promises (min-width: 700px) {
    .promisessectionbg {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @container promises (max-width: 699px) {
    .promisessectionbg {
      display: grid;
      grid-template-rows: auto;
    }
  }

  /*
   * FSS Card Grid Container
   * FAQ/FSS cards adapt to available width
   */
  .fsscardgrid {
    container-type: inline-size;
    container-name: fsscards;
  }

  @container fsscards (min-width: 900px) {
    .fsscardgrid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @container fsscards (min-width: 600px) and (max-width: 899px) {
    .fsscardgrid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @container fsscards (max-width: 599px) {
    .fsscardgrid {
      grid-template-columns: 1fr;
    }
  }

}

/*
 * Fallback for browsers without container query support
 * These styles maintain functionality in older browsers
 */
@supports not (container-type: inline-size) {
  /* Container queries not supported - media queries will handle responsiveness */
  /* No additional fallback needed as media queries are already in place */
}