/* ═══════════════════════════════════════
   RESET / NORMALIZE
   ═══════════════════════════════════════ */

@layer reset {
  *, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html {
    font-size: 100%;
    scroll-behavior: smooth;
    scrollbar-gutter: stable; /* Reserve space for scrollbar to prevent layout shift */
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-synthesis: none;
    /* NO overflow here — it turns html into a scroll-container
       and breaks position:fixed (header shifts on scroll) */
  }

  body {
    font-family: var(--ff-body);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    color: var(--c-text);
    background-color: var(--c-bg);
    /* clip instead of hidden — clips overflow WITHOUT creating a scroll-container,
       so position:fixed elements (header) stay aligned to the true viewport */
    overflow-x: clip;
    width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  body.nav-open {
    overflow: hidden;
  }

  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }

  img {
    height: auto;
  }

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

  button {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
    outline: none;
  }

  ul, ol {
    list-style: none;
  }

  input, textarea, select {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    outline: none;
  }

  h1, h2, h3, h4, h5, h6 {
    font-weight: var(--fw-regular);
    line-height: var(--lh-heading);
  }

  ::selection {
    background-color: var(--c-gold);
    color: var(--c-bg);
  }

  :focus-visible {
    outline: 2px solid var(--c-gold);
    outline-offset: 3px;
  }

  /* Scrollbar */
  ::-webkit-scrollbar {
    width: 6px;
  }
  ::-webkit-scrollbar-track {
    background: var(--c-bg);
  }
  ::-webkit-scrollbar-thumb {
    background: var(--c-surface-light);
    border-radius: 3px;
  }

  /* Hover effects for scrollbar */
  @media (hover: hover) and (pointer: fine) {
    ::-webkit-scrollbar-thumb:hover {
      background: var(--c-gold-dark);
    }
  }

}