/* ============================================================================
   FILE: css/base.css
   PURPOSE: The "foundation layer" — rules that apply to the ENTIRE page.
   ----------------------------------------------------------------------------
   WHAT LIVES HERE?
   1. A "reset" — browsers add their own default spacing to elements; we wipe
      it so every browser starts from the same blank slate.
   2. Global typography — the default font, size, and color for all text.
   3. Shared helpers — the .wrap container and the .rv scroll-reveal class
      that many sections reuse.
   ========================================================================== */

/* ------------------------------ CSS RESET -------------------------------- */

/* "*" selects EVERY element on the page.
   - margin/padding 0: remove the browser's built-in default spacing.
   - box-sizing border-box: makes width calculations intuitive — if you say
     an element is 300px wide, padding and borders are INCLUDED in the 300px. */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Smooth scrolling: when a menu link jumps to a section (e.g. #services),
   the page glides there instead of teleporting. */
html { scroll-behavior: smooth; }

/* ------------------------- GLOBAL PAGE DEFAULTS --------------------------- */

body {
  background: var(--void);         /* dark navy background (from variables.css) */
  color: var(--titan);             /* default text color                        */
  font-family: var(--sans);        /* default font for paragraphs               */
  font-size: 16.5px;               /* comfortable reading size                  */
  line-height: 1.65;               /* space between lines — improves legibility */
  -webkit-font-smoothing: antialiased; /* crisper text on Mac/iOS               */
}

/* What text looks like when the user highlights it with the mouse. */
::selection { background: var(--cobalt); color: #fff; }

/* Links inherit the color of the text around them (we style each link
   individually in components.css instead of using default browser blue). */
a { color: inherit; }

/* Images and SVGs behave as blocks — removes a mysterious small gap that
   browsers add under inline images. A classic beginner gotcha! */
img, svg { display: block; }

/* All headings use the display font, near-white color, and tight line height. */
h1, h2, h3 {
  font-family: var(--disp);
  color: var(--paper);
  font-weight: 600;
  line-height: 1.12;
}

/* -------------------------- ACCESSIBILITY --------------------------------- */

/* When a keyboard user presses TAB to move around the page, the focused
   element gets a visible aqua outline. NEVER remove focus outlines —
   keyboard users depend on them to know where they are. */
:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 3px;
}

/* --------------------------- SHARED HELPERS ------------------------------- */

/* .wrap = the centered content column used inside every section.
   max-width stops text lines from becoming uncomfortably long on big
   monitors; auto margins center it; padding keeps it off screen edges. */
.wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 28px;
}

/* .rv = "reveal". Elements with this class start invisible and slightly
   lower on the page. JavaScript (js/main.js) adds the class "in" when the
   element scrolls into view, which fades + slides it into place. */
.rv {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s, transform .7s;
}
.rv.in {
  opacity: 1;
  transform: none;
}

/* ------------------------ REDUCED MOTION SUPPORT -------------------------- */

/* Some users enable "reduce motion" in their operating system (animations
   can cause dizziness/nausea for people with vestibular disorders).
   This media query detects that setting and switches ALL animation off.
   Professional sites always respect it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto;
  }
  .rv { opacity: 1; transform: none; }
}