/**
 * List Block Styles
 *
 * This file contains styles for WordPress block editor list blocks (ordered and unordered).
 * It provides styling for list items, nested lists, custom list styles (checked, arrow),
 * font size variations, color options, background colors, and responsive adjustments
 * for mobile devices.
 *
 * @package VGA
 * @since 1.0.0
 */

/* List Wrapper */
.wp-block-list {
  margin: 1.5rem 0;
  padding-left: 2rem;
  max-width: 718px;
  font-size: 18px;
}

/* List Items */
.wp-block-list:first-child {
  margin-top: 0;
}
.wp-block-list:last-child {
  margin-bottom: 0;
}
.wp-block-list li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
  color: var(--wp--preset--color--foreground);
}
.wp-block-list li:last-child {
  margin-bottom: 0;
}

/* Unordered List */
.wp-block-list ul {
  list-style-type: disc;
  margin: 0;
  padding-left: 1.5rem;
}
.wp-block-list ul li {
  margin-bottom: 0.25rem;
}

/* Ordered List */
.wp-block-list ol {
  list-style-type: decimal;
  margin: 0;
  padding-left: 1.5rem;
}
.wp-block-list ol li {
  margin-bottom: 0.25rem;
}

/* Nested Lists */
.wp-block-list ul ul,
.wp-block-list ol ol,
.wp-block-list ul ol,
.wp-block-list ol ul {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.wp-block-list ul ul {
  list-style-type: circle;
}
.wp-block-list ul ul ul {
  list-style-type: square;
}
.wp-block-list ol ol {
  list-style-type: lower-alpha;
}
.wp-block-list ol ol ol {
  list-style-type: lower-roman;
}

/* Checked List */
.wp-block-list.is-style-checked li {
  list-style: none;
  position: relative;
  padding-left: 1.5rem;
}
.wp-block-list.is-style-checked li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--wp--preset--color--primary);
  font-weight: bold;
}

/* Arrow List */
.wp-block-list.is-style-arrow li {
  list-style: none;
  position: relative;
  padding-left: 1.5rem;
}
.wp-block-list.is-style-arrow li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--wp--preset--color--primary);
}

/* Font Size */
.wp-block-list.has-small-font-size {
  font-size: var(--wp--preset--font-size--small);
}
.wp-block-list.has-normal-font-size {
  font-size: var(--wp--preset--font-size--normal);
}
.wp-block-list.has-large-font-size {
  font-size: var(--wp--preset--font-size--large);
}

/* Color */
.wp-block-list.has-primary-color {
  color: var(--wp--preset--color--primary);
}
.wp-block-list.has-secondary-color {
  color: var(--wp--preset--color--secondary);
}

/* Background */
.wp-block-list.has-background {
  padding: 1rem 1.5rem;
  border-radius: 4px;
}
.wp-block-list.has-primary-background-color {
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--background);
}
.wp-block-list.has-secondary-background-color {
  background-color: var(--wp--preset--color--secondary);
  color: var(--wp--preset--color--background);
}

/* Links */
.wp-block-list a,
.wp-block-list ul a,
.wp-block-list ol a,
.wp-block-list li a,
.entry-content ul a,
.entry-content ol a,
.entry-content li a {
  font-weight: bold;
  color: var(--color-black);
  text-decoration: underline;
  text-decoration-color: var(--color-light-green);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  transition: text-decoration-thickness 0.2s ease;
}

.wp-block-list a:hover,
.wp-block-list ul a:hover,
.wp-block-list ol a:hover,
.wp-block-list li a:hover,
.entry-content ul a:hover,
.entry-content ol a:hover,
.entry-content li a:hover,
.wp-block-list a:focus,
.wp-block-list ul a:focus,
.wp-block-list ol a:focus,
.wp-block-list li a:focus,
.entry-content ul a:focus,
.entry-content ol a:focus,
.entry-content li a:focus {
  color: var(--color-black);
  text-decoration-color: var(--color-light-green);
  text-decoration-thickness: 3px;
}

/* Mobile */
@media (max-width: 1080px) {
  /* List Wrapper */
  .wp-block-list {
    margin: 1rem 0;
    padding-left: 1.5rem;
  }

  /* List Elements */
  .wp-block-list ul,
  .wp-block-list ol {
    padding-left: 1rem;
  }

  /* Background */
  .wp-block-list.has-background {
    padding: 0.75rem 1rem;
  }
}