/* Stylesheet for the website
   Mobile first, no JavaScript.
   The layout is done with CSS Grid and Flexbox, plus the Bootstrap grid
   (css/bootstrap-grid.min.css, grid classes only) for the home page cards.
   Colours are the club's blue and garnet (blaugrana) with a gold accent.
   Headings ask for Barlow Condensed and text for Barlow, but no font is
   downloaded, so unless the visitor has Barlow installed the stacks below
   fall back to Arial Narrow for headings and the system font for text. */

/* Variables */
:root {
  --blau: #004D98;
  --blau-dark: #003b76;
  --grana: #A50044;
  --grana-dark: #7a0034;
  --or: #EDBB00;          /* gold accent only, too low contrast for text on white */
  --or-deep: #b8880a;
  --ink: #14152A;         /* nearly black with a blue tint, main text colour */
  --ink-soft: #4a4c66;
  --mist: #F2F4F8;        /* light grey-blue section background */
  --line: #e1e6ef;
  --white: #ffffff;

  /* the browser uses the first font it can find, so if Barlow isn't
     installed it drops to the next one - none of these are downloaded */
  --ff-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --ff-body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow-sm: 0 4px 14px rgba(20, 21, 42, 0.08);
  --shadow: 0 14px 40px rgba(20, 21, 42, 0.12);
  --ring: 0 0 0 3px rgba(0, 77, 152, 0.35);

  --wrap: 1140px;
  --gutter: clamp(1rem, 4vw, 2rem);
}

/* Base / reset */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;   /* stops iOS resizing the text by itself */
}

body {
  margin: 0;
  overflow-x: hidden;               /* stops any accidental sideways scroll on phones */
  font-family: var(--ff-body);
  font-size: 1.0625rem;             /* about 17px, easy to read on a phone */
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img,
svg { max-width: 100%; height: auto; display: block; }  /* images shrink to fit their box */

a { color: var(--blau); text-underline-offset: 0.15em; }
a:hover { color: var(--grana); }

h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 800;
  line-height: 1.04;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  color: var(--ink);
  margin: 0 0 0.5em;
}

p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; }

:focus-visible {
  outline: 3px solid var(--blau);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Helpers */
.container,
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -3.5rem;
  z-index: 200;
  background: var(--ink);
  color: var(--white);
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 0.5rem; color: var(--white); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--ff-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.9rem;
  color: var(--grana);
  margin: 0 0 0.6rem;
}
.eyebrow::before {
  content: "";
  width: 28px; height: 3px;
  background: var(--or);
  flex: none;
}
.eyebrow--light { color: var(--or); }

.section { padding-block: clamp(2.75rem, 8vw, 5.25rem); }
.section--mist { background: var(--mist); }
.section--ink { background: var(--ink); color: #dfe2f0; }
.section--ink h1,
.section--ink h2,
.section--ink h3 { color: var(--white); }

.section-title {
  font-size: clamp(1.9rem, 7vw, 3rem);
  margin-bottom: 0.35em;
}
.lead {
  font-size: clamp(1.05rem, 2.6vw, 1.25rem);
  color: var(--ink-soft);
  max-width: 60ch;
}
.section--ink .lead { color: #c3c8dd; }

/* Header and nav */
.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.masthead-inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 0.75rem;
  padding-block: 0.7rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--ink);
}
.brand-crest { width: 42px; height: auto; }
.brand-name {
  display: block;
  font-family: var(--ff-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--blau);
}
.brand-motto {
  display: block;
  font-family: var(--ff-body);
  font-style: italic;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--grana);
  text-transform: none;
}
/* responsive nav done with the checkbox trick so no JavaScript is needed */
.mainnav { width: 100%; order: 3; }
.nav-checkbox {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 1px; height: 1px;
  margin: 0;
  opacity: 0;
}
.nav-burger {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.9rem;
  border: 2px solid var(--line);
  border-radius: 999px;
  font-family: var(--ff-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.95rem;
  color: var(--blau);
  cursor: pointer;
  user-select: none;
}
.nav-burger-box {
  position: relative;
  width: 22px; height: 2px;
  background: var(--blau);
  transition: background 0.2s ease;
}
.nav-burger-box::before,
.nav-burger-box::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px; height: 2px;
  background: var(--blau);
  transition: transform 0.2s ease;
}
.nav-burger-box::before { top: -7px; }
.nav-burger-box::after { top: 7px; }

.nav-menu {
  list-style: none;
  display: none;
  flex-direction: column;
  gap: 0.25rem;
  width: 100%;
  margin: 0.6rem 0 0.2rem;
  padding: 0;
}

/* when the checkbox is ticked the menu shows */
.nav-checkbox:checked ~ .mainnav .nav-menu { display: flex; }
/* turn the burger icon into an X when the menu is open */
.nav-checkbox:checked ~ .nav-burger .nav-burger-box { background: transparent; }
.nav-checkbox:checked ~ .nav-burger .nav-burger-box::before { transform: translateY(7px) rotate(45deg); }
.nav-checkbox:checked ~ .nav-burger .nav-burger-box::after { transform: translateY(-7px) rotate(-45deg); }
/* focus ring for keyboard users */
.nav-checkbox:focus-visible ~ .nav-burger { outline: 3px solid var(--blau); outline-offset: 2px; }

.nav-link {
  display: block;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-sm);
  font-family: var(--ff-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 1.1rem;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}
.nav-link:hover { background: var(--mist); color: var(--grana); }
.nav-link[aria-current="page"] {
  color: var(--white);
  background: var(--blau);
}

/* blue and garnet stripe bar */
.stripe-bar {
  height: 6px;
  background: repeating-linear-gradient(
    90deg,
    var(--blau) 0 18px,
    var(--grana) 18px 36px
  );
}

/* Buttons */
.button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--ff-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1.05rem;
  line-height: 1;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, background-color 0.18s ease,
    color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.button--primary { background: var(--or); color: var(--ink); }
.button--primary:hover { background: #ffcf1a; color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.button--ghost { border-color: rgba(255, 255, 255, 0.55); color: var(--white); }
.button--ghost:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.1); color: var(--white); transform: translateY(-2px); }
.button--grana { background: var(--grana); color: var(--white); }
.button--grana:hover { background: var(--grana-dark); color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-sm); }

/* Hero */
.hero {
  position: relative;
  color: var(--white);
  background:
    radial-gradient(1100px 480px at 78% -10%, rgba(237, 187, 0, 0.18), transparent 60%),
    linear-gradient(155deg, var(--blau-dark) 0%, var(--blau) 46%, var(--grana) 118%);
  overflow: hidden;
}
.hero::before {                 /* faint stripes behind the hero content */
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 0 2px,
    transparent 2px 46px
  );
  pointer-events: none;
}
.hero-inner {
  position: relative;
  display: grid;
  gap: clamp(1.5rem, 5vw, 3rem);
  padding-block: clamp(2.75rem, 9vw, 5.5rem);
}
.hero h1 {
  color: var(--white);
  font-size: clamp(2.6rem, 12vw, 5.5rem);
  letter-spacing: 0.01em;
  margin-bottom: 0.2em;
}
.hero h1 .accent { color: var(--or); display: block; }
.hero-tag {
  font-family: var(--ff-display);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--or);
  margin-bottom: 1rem;
}
.hero-lead { color: #e7eaf6; font-size: clamp(1.05rem, 2.6vw, 1.3rem); max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.6rem; }
.hero-figure {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.hero-figure img { width: 100%; }

/* hero fades and slides in on load */
.rise { opacity: 0; transform: translateY(18px); animation: rise 0.7s ease forwards; }
.rise-2 { animation-delay: 0.12s; }
.rise-3 { animation-delay: 0.24s; }
@keyframes rise { to { opacity: 1; transform: none; } }

.split { display: grid; gap: clamp(1.5rem, 4vw, 2rem); }
.split > * { min-width: 0; }    /* stops the table card blowing out the grid column so it can scroll inside instead */
.split--center { align-items: center; }
.split--start { align-items: start; }
/* the feature cards are laid out with the Bootstrap grid (.row / .col-*), so no rule is needed here */

.feature {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  height: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.feature-icon {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--mist);
  margin-bottom: 1rem;
}
.feature-icon img { width: 32px; height: 32px; }
.feature h3 { font-size: 1.35rem; margin-bottom: 0.35em; }
.feature p { color: var(--ink-soft); margin: 0; }

/* Stat strip */
.stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 3vw, 1.5rem); }
.stat { text-align: center; padding: 0.5rem; }
.stat-num {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 9vw, 3.6rem);
  line-height: 1;
  color: var(--or);
}
.stat-label {
  display: block;
  font-family: var(--ff-display);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.85rem;
  color: #c3c8dd;
  margin-top: 0.4rem;
}
/* Motto band */
.motto {
  text-align: center;
  background: var(--grana);
  color: var(--white);
  position: relative;
}
.motto-quote {
  font-family: var(--ff-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.8rem, 7vw, 3.4rem);
  line-height: 1.05;
  margin: 0 0 0.3rem;
}
.motto-sub { color: rgba(255, 255, 255, 0.85); margin: 0; letter-spacing: 0.02em; }

/* Footer */
.site-footer { background: var(--ink); color: #b9bdd4; }
.site-footer a { color: #dfe3f3; }
.site-footer a:hover { color: var(--or); }
.footer-grid { display: grid; gap: 2rem; padding-block: clamp(2.5rem, 7vw, 3.5rem); }
.footer-brand { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.9rem; }
.footer-brand img { width: 40px; }
.footer-brand span {
  font-family: var(--ff-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.25rem;
  color: var(--white);
}
.footer h2 {
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  color: var(--white);
  margin-bottom: 0.9rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 0.5rem; }
.footer-contact a { font-weight: 600; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: 1.1rem;
  font-size: 0.85rem;
  color: #8a8fac;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  justify-content: space-between;
}
.footer-disclaimer {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: #9297b4;
}

/* Timeline (history page) */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before {
  content: "";
  position: absolute;
  left: 8px; top: 4px; bottom: 4px;
  width: 3px;
  background: linear-gradient(var(--blau), var(--grana));
}
.timeline li { position: relative; padding: 0 0 1.75rem 2.5rem; }
.timeline li::before {
  content: "";
  position: absolute;
  left: 2px; top: 4px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--or);
  border: 3px solid var(--white);
  box-shadow: 0 0 0 2px var(--or);
}
.timeline .year {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--grana);
  line-height: 1;
}
.timeline h3 { margin: 0.15rem 0 0.35rem; font-size: 1.25rem; }
.timeline p { color: var(--ink-soft); margin: 0; }

/* Video (bonus feature) */
.video-frame {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 4px solid var(--white);
  background: #000;
}
/* keeps the video at 16:9 no matter how wide the screen is */
.video-frame.ratio-fallback { position: relative; aspect-ratio: 16 / 9; }
.video-frame.ratio-fallback iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0;
}

.media-note {
  font-size: 0.9rem;
  color: var(--ink-soft);
  border-left: 3px solid var(--or);
  padding-left: 0.9rem;
}

/* Tables (honours page) */
.table-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }  /* the table scrolls inside the card, not the page */

table.data {
  width: 100%;
  min-width: 560px;               /* forces the sideways scroll on small screens */
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
table.data caption {
  caption-side: top;
  text-align: left;
  padding: 1rem 1.25rem;
  font-family: var(--ff-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--ink-soft);
  font-size: 0.9rem;
}
table.data thead th {
  background: var(--blau);
  color: var(--white);
  font-family: var(--ff-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  text-align: left;
  padding: 0.8rem 1rem;
  white-space: nowrap;
}
table.data tbody th,
table.data tbody td {
  padding: 0.8rem 1rem;
  border-top: 1px solid var(--line);
  text-align: left;
}
table.data tbody th { font-weight: 600; }
table.data tbody tr:nth-child(odd) { background: var(--mist); }
table.data tbody tr:hover { background: rgba(0, 77, 152, 0.08); }
table.data .num { text-align: right; font-weight: 600; }
table.data .win { color: var(--blau); font-weight: 700; }
table.data .loss { color: var(--grana); font-weight: 700; }
table.data tfoot td {
  padding: 0.8rem 1rem;
  border-top: 2px solid var(--blau);
  font-family: var(--ff-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .rise { opacity: 1; transform: none; }
}

/* Responsive breakpoints (mobile first) */

/* 600px and up: footer splits into three (the cards go two across at Bootstrap's sm) */
@media (min-width: 600px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

/* 768px and up: hero becomes two columns */
@media (min-width: 768px) {
  .hero-inner { grid-template-columns: 1.05fr 0.95fr; align-items: center; }
  .stat-row { grid-template-columns: repeat(4, 1fr); }
  table.data { min-width: 0; }         /* enough room now, no scroll needed */
}

/* 992px and up: full nav bar across the top; burger hidden on desktop wide view; burger menu shows when window is narrowed*/
@media (min-width: 992px) {
  .split--7-5 { grid-template-columns: 7fr 5fr; }
  .split--8-4 { grid-template-columns: 8fr 4fr; }
  .split--4-8 { grid-template-columns: 4fr 8fr; }
  .masthead-inner { flex-wrap: nowrap; }
  .nav-burger,
  .nav-checkbox { display: none; }
  .mainnav { width: auto; order: 0; }
  .nav-checkbox:checked ~ .mainnav .nav-menu,
  .nav-menu {
    display: flex;
    flex-direction: row;
    width: auto;
    margin: 0;
    gap: 0.3rem;
  }
  .nav-link { font-size: 1rem; padding: 0.55rem 0.85rem; }
}