/* 
    Theme Name: LLG-Boilerplate
    Author: Neboch
    Description: Compoennt Driven, classic theme
    Version: 1.0
 */

body {
  font-family: var(--font-sans);
  color: var(--color-text);
  background-color: var(--color-background);
}

/* reset.css */
@layer reset {
  /* 1) Box sizing + remove default margins */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  /* 2) Sensible defaults */
  html:focus-within {
    scroll-behavior: smooth;
  }

  html,
  body {
    /* height: 100%; - Removed to prevent scroll-to-top on overflow: hidden */
  }

  body {
    min-height: 100%;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  /* 3) Media elements behave predictably */
  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-width: 100%;
  }

  a {
    text-decoration: none;
    color: inherit;
  }

  a:active,
  a:hover {
    text-decoration: none;
  }

  /* 4) Typography: inherit into form controls */
  input,
  button,
  textarea,
  select {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    word-spacing: inherit;
  }

  /* 5) “Unstyle” buttons so components start neutral */
  button,
  [type="button"],
  [type="reset"],
  [type="submit"] {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
  }

  /* Keep the expected cursor for clickable things */
  :where(
    button,
    [role="button"],
    [type="button"],
    [type="reset"],
    [type="submit"],
    summary
  ) {
    cursor: pointer;
  }

  /* Links inherit color (you style links explicitly in components) */
  a {
    color: inherit;
  }

  /* Lists: remove bullets only when you opt in with role="list" */
  :where(ul[role="list"], ol[role="list"]) {
    list-style: none;
    padding: 0;
  }

  /* Tables */
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }

  /* Forms: avoid overflow issues in flex/grid */
  :where(input, textarea, select) {
    min-width: 0;
  }

  textarea {
    resize: vertical;
  }

  fieldset {
    border: 0;
    min-width: 0;
    padding: 0;
    margin: 0;
  }

  /* Prevent ugly text overflow */
  :where(p, h1, h2, h3, h4, h5, h6) {
    overflow-wrap: break-word;
  }

  /* 6) Accessible focus styles */
  :where(:focus-visible) {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  :where(:focus:not(:focus-visible)) {
    outline: none;
  }

  /* 7) Respect reduced motion preferences */
  @media (prefers-reduced-motion: reduce) {
    html:focus-within {
      scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* --- GLOBAL SCROLLBAR STYLING --- */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: var(--color-brand-green, #72A250);
  border-radius: 10px;
  border: 3px solid #f1f1f1;
  transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-brand-green-dark, #57803A);
}

/* Firefox Support */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-brand-green, #72A250) #f1f1f1;
}