/* =========================================================
   BASE.CSS
   Reset and typography for Basingstoke Gymnastics Club (BGC).

   Design tokens (colour, type, spacing, motion) live in
   /shared/css/tokens.css — that's the single source of truth.
   Do not redeclare :root variables in this file.
   ========================================================= */

@import url('/shared/css/tokens.css');

/* -------- 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-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
}

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

/* =========================================================
   PHOTOS IN TWO FORMATS

   Every photo on the site exists twice: the JPEG that was
   uploaded, and a WebP copy about half the size, written by
   scripts/build-webp.py on each publish. Nobody makes the
   second one by hand; drop a JPEG in a folder as usual.

   Pages offer both and let the browser choose. There are two
   ways to do that, and which one applies depends only on
   whether the photo is in the HTML or in this stylesheet.
   Both examples below name a real file, so scripts/check-image
   -paths.ps1 keeps them honest:

     in HTML   <picture>
                 <source
                   srcset="/img/hero-images/hero.webp"
                   type="image/webp" />
                 <img
                   src="/img/hero-images/hero.jpg"
                   alt="..." width="1600" height="900" />
               </picture>

     in CSS    background-image: url('../img/hero-images/hero.jpg');
               background-image: image-set(
                 url('../img/hero-images/hero.webp') type('image/webp'),
                 url('../img/hero-images/hero.jpg')  type('image/jpeg')
               );

   The plain url() line above the image-set is not redundant.
   A browser too old to understand image-set() throws that whole
   declaration away and uses the line before it, which is how
   the JPEG fallback works for backgrounds.

   The hero on every page is a background, not an <img>, which
   is why the heroes are done the second way.

   The rule below takes <picture> out of the layout entirely, so
   the <img> inside it is laid out by its parent exactly as it
   was before it was wrapped. Without this, every rule on the
   site written as ".card img" would still match, but flex and
   grid children would suddenly be the <picture> rather than the
   image, and sized photos would collapse.
   ========================================================= */
picture {
  display: contents;
}

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

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

ul, ol { list-style: none; }

/* -------- TYPOGRAPHY -------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

p { max-width: 70ch; }

/* -------- UTILITY -------- */
.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;
}

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