/* =========================
   Base CSS — Structural Foundation
   Loaded globally via base.html before all other stylesheets.

   What this file does:
   - Universal box-sizing reset (fixes overflow inconsistencies across pages)
   - Root font-size with responsive scaling (fixes pages resizing differently)
   - Shared layout variables: breakpoints, spacing, container widths, border-radius
   - .container utility class for the base.html wrapper div
   - Helper utilities (.text-center, .w-100, etc.)

   What this file does NOT do:
   - Set background colours or gradients (each page owns those)
   - Set text colour (each page owns that)
   - Set display:flex on body (each page owns that)

   Usage in page CSS:
     font-size: var(--font-size-lg);
     padding: var(--space-md);
     border-radius: var(--radius-md);
     max-width: var(--container-lg);
   ========================= */

:root {
  /* Breakpoints (reference only — use in page-level media queries) */
  --breakpoint-xs: 480px;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;

  /* Font Sizes */
  --font-size-xs:   0.75rem;   /*  12px */
  --font-size-sm:   0.875rem;  /*  14px */
  --font-size-base: 1rem;      /*  16px */
  --font-size-lg:   1.25rem;   /*  20px */
  --font-size-xl:   1.5rem;    /*  24px */

  /* Spacing */
  --space-xs: 0.25rem;   /*  4px */
  --space-sm: 0.5rem;    /*  8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 2rem;      /* 32px */
  --space-xl: 4rem;      /* 64px */

  /* Container Widths */
  --container-sm: 540px;
  --container-md: 720px;
  --container-lg: 960px;
  --container-xl: 1200px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
}

/* =========================
   Universal Reset
   ========================= */

html {
  box-sizing: border-box;
  font-size: 16px;
  font-family: 'Segoe UI', Arial, sans-serif;
  scroll-behavior: smooth;
}

/* Applies box-sizing and zero margins to every element.
   Individual page CSS can safely set margins where needed. */
*, *::before, *::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  font-size: var(--font-size-base);
  line-height: 1.5;
}

/* =========================
   Container
   Used by base.html's <div class="container"> that wraps
   {% block content %} and flash messages on every page.
   Page CSS can override as needed (e.g. ads.css adds top margin).
   ========================= */

.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  max-width: var(--container-xl);
  padding-right: var(--space-md);
  padding-left: var(--space-md);
}

/* =========================
   Utility Classes
   ========================= */

.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-left   { text-align: left; }

.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }

.mt-md { margin-top: var(--space-md) !important; }
.mb-md { margin-bottom: var(--space-md) !important; }
.p-md  { padding: var(--space-md) !important; }

/* =========================
   Responsive Container Scaling
   ========================= */

@media (max-width: 1200px) {
  .container { max-width: var(--container-lg); }
}
@media (max-width: 992px) {
  .container { max-width: var(--container-md); }
}
@media (max-width: 768px) {
  .container { max-width: var(--container-sm); }
  html { font-size: 15px; }
}
@media (max-width: 576px) {
  .container { max-width: 100%; padding: var(--space-sm); }
  html { font-size: 14px; }
}