/* ──────────────────────────────────────────────────────────
   Dejobaan Games — site styles
   Layered on top of Bootstrap 5. Palette and type lifted from
   the Squarespace original; layout is our own.
   ────────────────────────────────────────────────────────── */

:root {
  --dejo-yellow: #ffcc00;
  --dejo-dark:   #38302e;
  --dejo-ink:    #000;

  /* Bootstrap overrides */
  --bs-body-font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-body-font-weight: 300;
  --bs-body-color: var(--dejo-ink);
  --bs-link-color-rgb: 0, 0, 0;
}

body {
  font-size: 1.0625rem;
  line-height: 1.6;
}

.container {
  max-width: 1000px;
  overflow: hidden;
  padding-inline: 1.5rem;
}

@media (min-width: 576px) {
  .container { padding-inline: 2.25rem; }
}

/* ── Header ─────────────────────────────────────────────── */

.site-header {
  background: #fff;
  padding: 1.25rem 0;
}

.site-title {
  font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 2rem);
  line-height: 1;
  color: var(--dejo-ink);
  text-decoration: none;
}

.site-title:hover,
.site-title:focus {
  color: var(--dejo-ink);
  opacity: 0.7;
}

/* ── Section shells ─────────────────────────────────────── */

.sec {
  padding: clamp(2.5rem, 7vw, 4.5rem) 0;
}

.sec--white  { background: #fff; }
.sec--yellow { background: var(--dejo-yellow); }

.sec--dark {
  background: var(--dejo-dark);
  color: #fff;
  padding: 2rem 0;
  text-align: center;
  font-size: 0.9375rem;
}

/* Body links inherit black ink, which is unreadable on the dark band */
.sec--dark a {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, 0.5);
}

.sec--dark a:hover,
.sec--dark a:focus {
  color: var(--dejo-yellow);
  text-decoration-color: currentColor;
}

.sec--hero {
  padding: clamp(2.5rem, 8vw, 5rem) 0;
}

/* ── Typography ─────────────────────────────────────────── */

h2 {
  font-weight: 700;
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  line-height: 1.2;
  text-align: center;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  /* "AaaaaAAaaaAAAAaAAAAA!!!" is one unbreakable token — let it wrap */
  overflow-wrap: anywhere;
}

h3 {
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.4;
  margin-bottom: 0.5rem;
}

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

strong { font-weight: 700; }

/* Hero copy — the big ragged statement */
.hero-lead {
  font-weight: 300;
  font-size: clamp(1.25rem, 3.2vw, 1.75rem);
  line-height: 1.45;
  margin-bottom: 1rem;
}

.hero-lead strong {
  font-weight: 700;
  white-space: nowrap;
}

.hero-sub {
  font-size: 1rem;
  opacity: 0.85;
}

/* Intro line under a section heading, above the grid */
.lead-note {
  max-width: 46rem;
  margin: 0 auto clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
}

/* Bold one-liner that closes a section */
.kicker {
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 700;
  text-align: center;
}

/* ── Buttons ────────────────────────────────────────────── */

.btn-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.btn-dejo {
  --bs-btn-padding-y: 0.75rem;
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-font-weight: 700;
  --bs-btn-font-size: 1rem;
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--dejo-ink);
  --bs-btn-border-color: var(--dejo-ink);
  --bs-btn-hover-color: var(--dejo-ink);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: var(--dejo-ink);
  --bs-btn-active-color: var(--dejo-ink);
  --bs-btn-active-bg: #fff;
  --bs-btn-active-border-color: var(--dejo-ink);
  --bs-btn-border-radius: 3px;
  --bs-btn-focus-shadow-rgb: 0, 0, 0;
  border-width: 2px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* ── Media ──────────────────────────────────────────────── */

.media-frame {
  border-radius: 4px;
  overflow: hidden;
  background: var(--dejo-dark);
}

img.media-frame { display: block; width: 100%; height: auto; }

.media-frame iframe { border: 0; }

/* ── Pull quote (T-Minus 30) ────────────────────────────── */

.pull-quote {
  margin: 1.5rem 0 0;
  padding-left: 1rem;
  border-left: 3px solid var(--dejo-ink);
}

.pull-quote blockquote {
  margin: 0 0 0.5rem;
  font-size: 1.0625rem;
  font-style: italic;
}

.pull-quote blockquote::before { content: "\201C"; }
.pull-quote blockquote::after  { content: "\201D"; }

.pull-quote figcaption {
  font-weight: 700;
  font-size: 0.9375rem;
}

/* ── Tour dates ─────────────────────────────────────────── */

.tour-date {
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.3;
  margin-bottom: 0.25rem;
}