/* ==========================================================================
   UTILITIES
   --------------------------------------------------------------------------
   PURPOSE:
   This file contains SMALL, SINGLE-PURPOSE helper classes.
   Utilities do ONE thing and do it predictably.

   Utilities are:
   - reusable
   - opt-in
   - safe to stack

   WHY THIS FILE EXISTS:
   - Prevents copy/paste CSS across sections
   - Keeps templates readable
   - Avoids one-off “hack” classes in sections

   RULES:
   - Utilities should be atomic (one job only)
   - No deep nesting
   - No section-specific styling
   - Can override Bootstrap utilities intentionally (if chosen)

   COMMON USE CASES:
   - spacing helpers
   - colour helpers
   - radius helpers
   - text helpers
   - visibility helpers

   EXAMPLES OF WHAT BELONGS HERE:
   .pt-small
   .pb-large
   .text-primary (if overriding Bootstrap)
   .bg-accent
   .play-icon

   EXAMPLES OF WHAT DOES NOT BELONG HERE:
   Header layout
   Buttons
   Cards
   Forms
   Section-specific styles
   ========================================================================== */



/* Lenis (manual version of lenis.css) */



/* Bootstrap utility overrides (your current approach) */
.text-primary   { color: var(--brand-primary) !important; }
.text-secondary { color: var(--brand-secondary) !important; }
.text-white     { color: var(--brand-white) !important; }
.text-dark      { color: var(--brand-black) !important; }

.text-accent    { color: var(--brand-accent) !important; }

.bg-primary   { background-color: var(--brand-primary) !important; }
.bg-secondary { background-color: var(--brand-secondary) !important; }
.bg-accent    { background-color: var(--brand-accent) !important; }
.bg-light     { background-color: var(--bg-light) !important; }
.bg-dark      { background-color: var(--brand-secondary) !important; }

a.text-primary:hover { color: var(--brand-secondary) !important; }


.radius-xl { border-radius: var(--radius-xl) !important; }
.radius-lg { border-radius: var(--radius-lg) !important; }
.radius-md { border-radius: var(--radius-md) !important; }
.radius-sm { border-radius: var(--radius-sm) !important; }

/* shadows */
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }

/* Section spacing */
.layout-section {
  padding-top: var(--section-gap);
  padding-bottom: var(--section-gap);
  position: relative;
}

/* Semantic padding helpers */
.pt-none { padding-top: 0 !important; }
.pb-none { padding-bottom: 0 !important; }

.pt-small { padding-top: var(--section-gap-sm) !important; }
.pb-small { padding-bottom: var(--section-gap-sm) !important; }

.pt-large { padding-top: calc(var(--section-gap) * 1.5) !important; }
.pb-large { padding-bottom: calc(var(--section-gap) * 1.5) !important; }

/* Existing utility backgrounds */
.greybg { background-color: var(--bg-light); }

.blueoverlay {
  background: var(--brand-secondary);
  background: linear-gradient(
    0deg,
    rgba(0,9,68,0.8) 0%,
    rgba(0,9,68,0.8) 38%,
    rgba(0,9,65,0.45) 38%,
    rgba(0,9,68,0.45) 100%
  );
}

/* Position helpers you use */
.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}