/* css/base/reset.css */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Always show scrollbar to prevent layout shifts */
html {
  overflow-y: scroll;
  /* overflow-x: hidden; is removed as it can prevent sticky positioning */
}

/* Remove default margin and padding */
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
  padding: 0;
}

/* Prevent horizontal scrollbars site-wide */
html {
  overflow-x: hidden;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: var(--line-height-base);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  color: var(--color-gray-800);
  background-color: var(--color-gray-50);
}

/* Remove list styles on ul, ol elements */
ul,
ol {
  list-style: none;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations and transitions for people who prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Remove default button styles */
button {
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
}

/* Set default focus styles */

/* 1. Form Fields: Focus ring always visible (click or tab) */
input:focus,
select:focus,
textarea:focus {
  outline: none;
  /* Keep the subtle red ring for inputs so users know they can type */
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15);
}

/* 2. Interactive Elements (Links/Buttons): Hide focus ring on mouse click */
/* This removes the "light red outline" when clicking sidebar items or accordion lists */
a:focus,
button:focus {
  outline: none;
  box-shadow: none;
}

/* 3. Accessibility: Restore focus ring ONLY for keyboard navigation */
/* Modern browsers use this to show the ring only when tabbing */
a:focus-visible,
button:focus-visible {
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.25); /* Slightly stronger for visibility */
}

/* Set default text decoration */
a {
  text-decoration: none;
  color: var(--color-primary);
}