/* Mitchell's Mega Matchplay — site styles
 *
 * Design tokens are lifted verbatim from the Elementor kit (post 8) that ran the
 * WordPress site, so the rebuilt pages render the same colours, type and rhythm.
 * Breakpoints are Elementor's (1024px tablet, 767px mobile) so responsive
 * behaviour matches too.
 */

/* ----------------------------------------------------------------- fonts */

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/poppins-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/poppins-600.woff2') format('woff2');
}
/* Figtree ships as a variable font: one file covers the whole 300–900 range. */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/assets/fonts/figtree-var.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url('/assets/fonts/figtree-var-italic.woff2') format('woff2-variations');
}

/* ---------------------------------------------------------------- tokens */

:root {
  --color-primary: #1a237e;
  --color-secondary: #283593;
  --color-text: #212121;
  --color-accent: #ff6f00;
  --color-link: #c36;
  --color-bg: #fff;
  --color-bg-accent: #f5f5f5;

  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Figtree', sans-serif;

  --content-width: 800px;
  --hero-height: 450px;
  --gutter: 24px;
  --block-gap: 25px;
  --content-pad-y: 50px;
}

/* ------------------------------------------------------------------ base */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
}

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

a {
  color: var(--color-link);
  text-decoration: none;
}

a:hover,
a:focus-visible {
  text-decoration: underline;
}

/* A visible focus ring everywhere — the Elementor original had none, and this is
   the one accessibility affordance you cannot fake with colour alone. */
:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 24px;
  background: var(--color-primary);
  color: #fff;
}

.skip-link:focus {
  left: 0;
}

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

/* ------------------------------------------------------------------ hero */

/* The WordPress original painted the banner as a background-image on an empty
   container with min-height:450px, and overrode that to min-height:0 on mobile —
   which left phones with a 96px sliver of a 16:9 image. Here the <img> itself
   establishes the height, so the banner can never collapse. */
.hero {
  position: relative;
  background: var(--color-secondary);
  line-height: 0;
}

.hero img {
  display: block;
  width: 100%;
  height: var(--hero-height);
  object-fit: cover;
  object-position: center center;
}

/* --------------------------------------------------------------- buttons */

/* Full-bleed in the original (`content_width: "full"`), 10px padding, 20px gap.
   auto-fit rather than a fixed count so the row stays balanced if a button is ever
   added or removed — a hardcoded `repeat(4, …)` left an empty cell once the two
   duplicate IFPA buttons were merged. */
.button-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 20px;
  padding: 10px;
}

/* One link instead of three: size it to its content rather than a full-width bar. */
.button-row--single {
  grid-auto-flow: row;
  grid-auto-columns: auto;
  grid-template-columns: minmax(180px, max-content);
}

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 3px;
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
}

.button:hover,
.button:focus-visible {
  background: #e56400;
  color: #fff;
  text-decoration: none;
}

/* Only outbound links carry an icon, so it signals "leaves the site" rather than
   decorating every button identically. Slightly smaller than the label, and nudged
   up, so it reads as an annotation rather than a second word. */
.button svg {
  flex: none;
  width: 0.75em;
  height: 0.75em;
  margin-top: -0.15em;
  fill: currentcolor;
  opacity: 0.85;
}

/* --------------------------------------------------------------- content */

/* Elementor nests these: an outer full-width box carrying the 24px horizontal
   gutter, and an 800px inner column carrying 50px of vertical padding and the
   25px inter-block gap. Each block then adds its own 10px, giving a 780px text
   measure. Collapsed here into one element with the same resulting geometry. */
.content {
  display: flex;
  flex-direction: column;
  gap: var(--block-gap);
  width: 100%;
  max-width: calc(var(--content-width) + 2 * var(--gutter));
  margin: 0 auto;
  padding: var(--content-pad-y) var(--gutter);
}

.content h1,
.content h2 {
  margin: 0;
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: 24px;
  line-height: 1;
}

/* The headline is 600; the section headings below it are 500. */
.content h1 {
  font-weight: 600;
}

.content h2 {
  font-weight: 500;
}

.content .subtitle {
  margin: 0;
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
}

.block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* The intro pair (headline + subtitle) is the one block Elementor padded. */
.intro {
  gap: 20px;
  padding: 10px;
}

.block p {
  margin: 0 0 0.9em;
}

/* Elementor pulls text widgets up by 10px to claw back the trailing paragraph
   margin. Reproduced so vertical rhythm matches the original block for block. */
.block > div {
  margin-bottom: -10px;
}

.block ul:not(.gallery),
.block ol {
  margin: 0;
  padding-left: 40px;
}

/* --------------------------------------------------------------- gallery */

/* WordPress rendered this as `gallery-columns-4`: four 200px cells, each holding a
   150x150 thumbnail centred with whitespace around it. Reproduced here. */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gallery li {
  display: flex;
  justify-content: center;
  margin: 0;
}

.gallery a {
  display: block;
  width: 150px;
  max-width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
}

.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease;
}

.gallery a:hover img,
.gallery a:focus-visible img {
  transform: scale(1.04);
}

/* ---------------------------------------------------------------- footer */

.footer {
  border-top: 1px solid #e0e0e0;
  margin-top: 24px;
  padding: 32px var(--gutter) 48px;
  color: #5f5f5f;
  font-size: 14px;
  text-align: center;
}

.footer p {
  margin: 0 0 6px;
}

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

.footer strong {
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-weight: 600;
}

/* -------------------------------------------------------------- lightbox */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(0 0 0 / 92%);
}

.lightbox[hidden] {
  display: none;
}

.lightbox img {
  max-width: calc(100vw - 96px);
  max-height: calc(100vh - 96px);
  object-fit: contain;
}

.lightbox button {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 12%);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.lightbox button:hover {
  background: rgb(255 255 255 / 25%);
}

.lightbox .lb-close {
  top: 16px;
  right: 16px;
}

.lightbox .lb-prev {
  left: 16px;
}

.lightbox .lb-next {
  right: 16px;
}

.lightbox .lb-count {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 14px;
}

/* ---------------------------------------------------------- breakpoints */

/* Elementor tablet. The button grid deliberately stays at 4 columns here — that is
   what the original does; it only collapses below 767px. */
@media (max-width: 1024px) {
  :root {
    --gutter: 16px;
    --block-gap: 47px;
    --content-pad-y: 80px;
  }

  .content h1,
  .content h2 {
    font-size: 22px;
  }
}

/* Elementor mobile */
@media (max-width: 767px) {
  :root {
    --hero-height: auto;
    --block-gap: 24px;
    --content-pad-y: 48px;
  }

  /* Show the whole 16:9 banner rather than a cover-cropped sliver of it. */
  .hero img {
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .button-row {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: 1fr;
  }

  /* The original kept 4 columns here, which squeezed the thumbnails to ~89px on a
     phone. This is a deliberate departure from the WordPress layout: same photos,
     usable size. */
  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }

  .content h1,
  .content .subtitle {
    font-size: 18px;
  }

  .content h2 {
    font-size: 16px;
  }

  .lightbox img {
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 120px);
  }

  .lightbox .lb-prev {
    left: 8px;
  }

  .lightbox .lb-next {
    right: 8px;
  }
}

/* Narrow phones: two columns keeps the thumbnails around 170px. */
@media (max-width: 480px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery img {
    transition: none;
  }
}