/*! Notes...

    Author: Jay George
    Author URI: https://jaygeorge.co.uk

    ABOUT THIS CSS
    ===================================================
    - Only edit filename.css, then process with Codekit to output into prod/

*/

/* purgecss start ignore */
/* GROUP COMPONENTS / STARKER FRAMEWORK / TABBED INTERFACE
=================================================== */
/* Notes...

  - Based on https://inclusive-components.design/tabbed-interfaces/
  - https://codepen.io/heydon/pen/veeaEa
  - Progressively enhanced with JS

*/

/* HTML Example...

  <div class="js__tabbed-interface">
      <ul>
          <li>
              <a href="#section1">Section 1</a>
          </li>
          <li>
              <a href="#section2">Section 2</a>
          </li>
          <li>
              <a href="#section3">Section 3</a>
          </li>
          <li>
              <a href="#section4">Section 4</a>
          </li>
      </ul>
      <section id="section1">
          <h2>Section 1</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod, tortor nec pharetra ultricies, ante erat imperdiet velit, nec laoreet enim lacus a velit. <a href="#">Nam luctus</a>, enim in interdum condimentum, nisl diam iaculis lorem, vel volutpat mi leo sit amet lectus. Praesent non odio bibendum magna bibendum accumsan.</p>
      </section>
      <section id="section2">
          some text
      </section>
      <section id="section3">
          some text
      </section>
      <section id="section4">
          some text
      </section>
  </div>

*/
/* GROUP COMPONENTS / STARKER FRAMEWORK / TABBED INTERFACE / LAYOUT
=================================================== */
[role="tabpanel"] > :is(h2, h3, p) {
    max-width: var(--max-width-reading-long);
    margin-inline: auto;
}

[role="tablist"] li,
[role="tablist"] a {
    display: inline-block;
}

[role="tablist"] {
    text-align: center;
}

/* --mq-tabbed-component-full-before */
@media (max-width: 767px) {
    [role="tablist"] li, [role="tablist"] a {
        display: block;
        position: static;
    }

    [role="tablist"] [aria-selected] {
        position: static;
    }
}

/* --mq-tabbed-component-full-after */
@media (min-width: 768px) {
    [role="tablist"] {
        display: flex;
        justify-content: center;
        max-width: 75rem;
        padding-inline: var(--spacing-l);
        margin-inline: auto;
        gap: var(--spacing-m);
    }

    [role="tablist"] li {
        flex-basis: 33.33%;
    }

    [role="tablist"] a {
        display: flex;
        justify-content: center;
    }
}
/* GROUP COMPONENTS / STARKER FRAMEWORK / TABBED INTERFACE / SPACING
=================================================== */
[role="tablist"] li {
    /* Cancel any defaults */
    padding-block-end: 0;
}

[role="tablist"] a {
    padding: var(--spacing-m) var(--spacing-l);
}

[role="tabpanel"] {
    padding: var(--spacing-l-4) var(--spacing-l);
}
/* GROUP COMPONENTS / STARKER FRAMEWORK / TABBED INTERFACE / DECORATION
=================================================== */
[role="tablist"] a {
    text-decoration: none;
    color: black;
    font-size: var(--font-size-s);
    line-height: var(--font-size-s-1-line-height);
    font-weight: var(--font-family-main-weight-strong);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-s);
}

[role="tab"] {
    border: 1px solid var(--colour-grey);
    border-style: none;
    border-block-end: 0;
}

[role="tablist"] [aria-selected] {
    background: var(--colour-grey-light-2);
    border-block-end: 0;
    position: relative;
    top: 2px;
}

[role="tabpanel"] {
    background: var(--colour-grey-light-2);
}

/* --mq-tabbed-component-full-after */
@media (max-width: 550px) {
    [role="tablist"] li + li a {
        border-top: 0 !important;
    }

    /* Not if there's only one tab */
    [role="tablist"] li:not(:only-child) [aria-selected] {
        color: var(--colour-red);
    }
    
    [role="tabpanel"] {
        border-top: 0;
    }
}
/* GROUP COMPONENTS / STARKER FRAMEWORK / TABBED INTERFACE / ACCESSIBILITY / FOCUS
=================================================== */
.c-tabbed-interface *:focus:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 4px var(--colour-focus);
}



/* GROUP COMPONENTS / TABBED RELATED LIST
=================================================== */
/* Notes...

	- e.g. Related and Resources list

*/
/* HTML Example...

  <ul class="c-tabbed-list">
      <li>
          <a href="{{ url }}">{{ title }}</a>
      </li>
  </ul>

*/
/* GROUP COMPONENTS / TABBED RELATED LIST / LAYOUT
=================================================== */
.c-tabbed-list {
    max-width: var(--max-width-reading-long);
    margin-inline: auto;
    text-align: center;

    /* display: grid; */
    /* Prevent overflow on screens less than px value */
    /* grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr)); */
    /* gap: var(--spacing-s-x) var(--spacing-m); */
}
/* GROUP COMPONENTS / TABBED RELATED LIST / SPACING
=================================================== */
/* GROUP COMPONENTS / TABBED RELATED LIST / DECORATION
=================================================== */
.c-tabbed-list {
    list-style: none;
    font-size: var(--font-size-s);
}
/* purgecss end ignore */