/* ===================================================================
   RESET & BASE STYLES
   Box-sizing, element resets
   =================================================================== */

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

/* ===================================================================
   SKIP LINK (Accessibility)
   Visible only on focus for keyboard users
   =================================================================== */

.skip-link {
     position: absolute;
     top: -100%;
     left: 50%;
     transform: translateX(-50%);
     background: var(--color-text-dark);
     color: var(--color-white);
     padding: var(--spacing-lg) var(--spacing-2xl);
     text-decoration: none;
     font-family: var(--font-heading);
     font-weight: var(--font-weight-bold);
     font-size: var(--font-size-base);
     letter-spacing: var(--letter-spacing-normal);
     z-index: 10000;
     border-radius: 0 0 var(--radius-md) var(--radius-md);
     transition: top var(--motion-fast) var(--motion-ease);
}

.skip-link:focus {
     top: 0;
     outline: 3px solid var(--color-white);
     outline-offset: 2px;
     box-shadow: 0 0 0 6px var(--color-focus-outline);
}

/* ===================================================================
   GLOBAL FOCUS STYLES (Accessibility)
   High contrast focus rings for all interactive elements
   =================================================================== */

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

/* For elements on dark backgrounds */
.tw :focus-visible,
header :focus-visible,
hero :focus-visible,
hero-fvh :focus-visible {
     outline-color: var(--color-white);
     box-shadow: 0 0 0 6px rgba(0, 105, 180, 0.5);
}

/* Remove default outline for mouse users, keep for keyboard */
:focus:not(:focus-visible) {
     outline: none;
}

body {
     margin: 0;
     background-color: var(--color-bg-light);
     font-size: var(--font-size-base);
     font-family: "Montserrat", sans-serif;
}

button {
     -webkit-appearance: button;
     cursor: pointer;
     text-transform: none;
}

a {
     text-decoration: none;
}

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

/* Prevent body scroll when mobile menu is open */
body.menu-open {
     overflow: hidden;
}

/* ===================================================================
   REDUCED MOTION (Accessibility)
   Respects user preference for reduced motion
   =================================================================== */

@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;
     }
}

/* ===================================================================
   VISUALLY HIDDEN (Screen reader only)
   Content visible to assistive technology but hidden visually
   =================================================================== */

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

/* ===================================================================
   HIGH CONTRAST MODE (Accessibility)
   Respects system preference for increased contrast
   =================================================================== */

@media (prefers-contrast: more) {
     :root {
          --color-text-muted: var(--gray-900);
          --color-text-disabled: var(--gray-800);
     }
}