/* ==========================================================================
   BAES UK — Global CSS
   Design tokens, resets, typography, section spacing
   ========================================================================== */

/* ── Design tokens ───────────────────────────────────────────────────────── */
:root {
  /* Colours */
  --bae-navy:        #002855;
  --bae-navy-alt:    #012169;
  --bae-red:         #E31E24;
  --bae-red-alt:     #CC0000;
  --bae-red-hover:   #aa0000;
  --bae-grey-light:  #F5F5F5;
  --bae-white:       #FFFFFF;
  --bae-cta-dark:    #222222;
  --bae-footer-dark: #333333;
  --bae-text:        #1a1a1a;
  --bae-text-muted:  #555555;

  /* Section spacing */
  --bae-section-y: 100px;

  /* Typography */
  --bae-font-heading: 'Mulish Variable', 'Mulish', sans-serif;
  --bae-font-body:    'Open Sans Variable', 'Open Sans', sans-serif;

  /* Max content width */
  --bae-max-w: 1200px;
  --bae-gutter: 24px;
}

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

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
}

body {
  font-family: var(--bae-font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--bae-text);
  background: var(--bae-white);
}

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

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--bae-font-heading);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 1rem;
}

p {
  margin: 0 0 1rem;
}

p:last-child {
  margin-bottom: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

/* ── Layout helpers ──────────────────────────────────────────────────────── */
.bae-container {
  max-width: var(--bae-max-w);
  margin-inline: auto;
  padding-inline: var(--bae-gutter);
}

/* ── Section spacing ─────────────────────────────────────────────────────── */
.bae-section {
  padding-block: var(--bae-section-y);
}

@media (max-width: 1023px) {
  :root { --bae-section-y: 60px; }
}

@media (max-width: 767px) {
  :root { --bae-section-y: 40px; }
}

/* ── Shared CTA button ───────────────────────────────────────────────────── */
.bae-btn {
  display: inline-block;
  padding: 14px 28px;
  font-family: var(--bae-font-heading);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 3px;
  transition: background 0.2s, color 0.2s;
  cursor: pointer;
}

.bae-btn--red {
  background: var(--bae-red);
  color: var(--bae-white);
}
.bae-btn--red:hover { background: var(--bae-red-hover); }

.bae-btn--navy {
  background: var(--bae-navy);
  color: var(--bae-white);
}
.bae-btn--navy:hover { background: var(--bae-navy-alt); }

.bae-btn--outline {
  background: transparent;
  color: var(--bae-navy);
  border: 2px solid var(--bae-navy);
}
.bae-btn--outline:hover {
  background: var(--bae-navy);
  color: var(--bae-white);
}

.bae-btn--outline-white {
  background: transparent;
  color: var(--bae-white);
  border: 2px solid var(--bae-white);
}
.bae-btn--outline-white:hover {
  background: var(--bae-white);
  color: var(--bae-navy);
}

/* ── Utility ─────────────────────────────────────────────────────────────── */
.bae-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;
}