/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

 /* .input {
  grid-column: 1 / -1;
 } */

.hint {
 color: var(--color-muted-foreground)
}

/*
Reset the counter on the main ordered list
sources:
- https://mark.ie/blog/nested-lists-in-css-with-a-numbered-hierarchy
- https://css-tricks.com/almanac/functions/c/counters/
- https://stackoverflow.com/questions/73925486/css-how-to-have-multiple-counters-in-nested-counters
*/

div.ui-nested-list {
  counter-reset: section;

  /* Style for the main list items */
  & > section > h2 {
    counter-increment: section;
  }

  /* Before each list item in the main list, insert the counter */
  & > section > h2::before {
    content: counters(section, ".", lower-alpha) ") ";
  }

  /* For nested lists (2nd level), add a new counter and reset */
  & > section > h2 ~ div.section {
    counter-reset: subsection;
    padding-left: 2rem;
  }

  /* For nested list items, increment the subsection counter */
  & > section > h2 ~ div.section > section > h3 {
    counter-increment: subsection;
  }

  /* Format the second-level list items with main section and subsection */
  & > section > h2 ~ div.section > section > h3::before{
    content: counters(section, ".", lower-alpha) "." counters(subsection, ".", numeric) ") ";
  }
}