/* ============================================================
   SiteKit Base CSS — Universal reset, accessibility, layout
   These are truly universal styles no site should need to change.
   Opinionated styles (header, nav, footer) belong in theme templates.
   ============================================================ */

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
   font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
   color: var(--color-text, #1c1917);
   background: var(--color-bg, #ffffff);
   line-height: 1.6;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   overflow-x: hidden;
}

#main-content {
   flex: 1;
   display: flex;
   flex-direction: column;
}

img {
   max-width: 100%;
   height: auto;
   display: block;
}

a {
   color: var(--color-accent, #4f46e5);
   text-decoration: none;
   transition: color var(--transition, 0.2s ease);
}

a:hover {
   color: var(--color-accent-hover, var(--color-accent, #4f46e5));
}

/* --- Accessibility --- */
:focus-visible {
   outline: 2px solid var(--color-accent, #4f46e5);
   outline-offset: 2px;
}

.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
}

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