/* ==========================================================================
   WDR Centre — theme stylesheet
   --------------------------------------------------------------------------
   The page is built as the inside of their arena. A white painted wall ground,
   and the navy dado band that wraps the room at waist height runs unbroken
   through every page as the structural spine. Section names sit above it in
   widely spaced navy capitals, set the way "THE HOME OF HARBOROUGH FOOTBALL"
   is signwritten across their gable.

   Palette sampled from the WDR marks and the arena photographs — the navy is
   the dominant pixel in both WDR logos, the gold matches the HTFC vinyls on
   the wall, the orange is the logo swoosh and the Mitre balls.

   Colour discipline: gold and orange never carry text on white (1.9:1 and
   3.1:1). Text is navy on white, or white and gold on navy. Nothing else.
   ========================================================================== */

:root {
  --wdr-navy: #0a1a3e;
  --wdr-navy-deep: #050f26;
  --wdr-royal: #1e4fb8;
  --wdr-gold: #f5b200;
  --wdr-orange: #ee6a1e;
  --wdr-turf: #2f6b2a;

  --wdr-wall: #ffffff;
  --wdr-wall-2: #f1f3f7;
  --wdr-ink: #0a1a3e;
  --wdr-muted: #4c5a78;
  --wdr-hair: #d8dde7;

  --wdr-wrap: 1180px;
  --wdr-gut: 24px;
  --wdr-dado: 14px;

  --wdr-font: "Archivo", "Helvetica Neue", Arial, sans-serif;
}

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

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

body {
  margin: 0;
  background: var(--wdr-wall);
  color: var(--wdr-ink);
  font-family: var(--wdr-font);
  font-variation-settings: "wdth" 100;
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
}

img,
svg { max-width: 100%; }

img { display: block; height: auto; }

a { color: var(--wdr-navy); }

:focus-visible {
  outline: 3px solid var(--wdr-orange);
  outline-offset: 3px;
}

.wdr-wrap {
  max-width: var(--wdr-wrap);
  margin-inline: auto;
  padding-inline: var(--wdr-gut);
}

.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--wdr-navy);
  color: #fff;
  padding: 12px 18px;
  z-index: 100;
  text-decoration: none;
}
.skip-link:focus { left: 12px; top: 12px; }

.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  clip-path: none;
  background: var(--wdr-navy);
  color: #fff;
  display: block;
  height: auto;
  left: 12px;
  padding: 14px 22px;
  top: 12px;
  width: auto;
  z-index: 100;
}

[hidden] { display: none !important; }

/* ── the signature: the dado band ───────────────────────────────────────── */

.wdr-dado {
  height: var(--wdr-dado);
  background: var(--wdr-navy);
  width: 100%;
}
.wdr-dado--gold { background: var(--wdr-gold); }
.wdr-dado--orange { background: var(--wdr-orange); }

/* the gable line — spaced capitals, the way it is painted on their wall */
.wdr-gable {
  margin: 0 0 14px;
  font-size: clamp(0.62rem, 1.5vw, 0.78rem);
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--wdr-navy);
  text-align: center;
}
.wdr-gable--left { text-align: left; }
.wdr-gable--right { text-align: right; }
.wdr-on-dark .wdr-gable,
.wdr-gable--light { color: var(--wdr-gold); }

/* ── type ───────────────────────────────────────────────────────────────── */

h1, h2, h3,
.wdr-h1, .wdr-h2, .wdr-h3 {
  font-variation-settings: "wdth" 118;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin: 0 0 0.5em;
}

h1, .wdr-h1 { font-size: clamp(2.1rem, 6.2vw, 4.05rem); }
h2, .wdr-h2 { font-size: clamp(1.65rem, 4.2vw, 2.7rem); }
h3, .wdr-h3 { font-size: clamp(1.05rem, 2.2vw, 1.32rem); letter-spacing: 0; }

h4, h5, h6 {
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 0.5em;
}

p { margin: 0 0 1.1em; }

.wdr-lede {
  font-size: clamp(1.03rem, 2vw, 1.24rem);
  line-height: 1.55;
  color: var(--wdr-muted);
  max-width: 46ch;
}
.wdr-on-dark .wdr-lede { color: #c3cee4; }

.wdr-note { font-size: 0.9rem; color: var(--wdr-muted); }
.wdr-on-dark .wdr-note { color: #9fb0cf; }

/* ── header ─────────────────────────────────────────────────────────────── */

.wdr-head { background: var(--wdr-wall); }

.wdr-head__in {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-block: 14px;
}

.wdr-brand {
  display: block;
  flex: none;
  line-height: 0;
  text-decoration: none;
}
.wdr-brand img { width: 104px; height: auto; }

.wdr-brand__text {
  font-variation-settings: "wdth" 122;
  font-weight: 900;
  font-size: 1.5rem;
  line-height: 1;
  text-transform: uppercase;
  color: var(--wdr-navy);
  white-space: nowrap;
}

.wdr-nav {
  margin-left: auto;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.wdr-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.wdr-nav li { position: relative; }
/* Tracking and padding are deliberately tighter than the rest of the site's
   spaced capitals. Seven items, a logo and a phone button have to share 1132px
   — the container is capped, so a wider screen buys no extra room and a nav
   that does not fit wraps to two lines at every size. */
.wdr-nav a {
  display: block;
  padding: 9px 9px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--wdr-navy);
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.wdr-nav a:hover { border-bottom-color: var(--wdr-orange); }
.wdr-nav .current-menu-item > a,
.wdr-nav .current_page_item > a,
.wdr-nav .current-menu-ancestor > a { border-bottom-color: var(--wdr-gold); }

/* one level of drop-down is plenty for a site this size */
.wdr-nav .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--wdr-navy);
  flex-direction: column;
  gap: 0;
  padding: 6px 0;
  z-index: 60;
  display: none;
}
.wdr-nav li:hover > .sub-menu,
.wdr-nav li:focus-within > .sub-menu { display: flex; }
.wdr-nav .sub-menu a {
  color: #fff;
  border-bottom: 0;
  padding: 10px 16px;
  letter-spacing: 0.06em;
}
.wdr-nav .sub-menu a:hover { background: var(--wdr-royal); }

.wdr-tel {
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  background: var(--wdr-navy);
  color: #fff;
  text-decoration: none;
  padding: 11px 14px;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.wdr-tel:hover { background: var(--wdr-royal); color: #fff; }
.wdr-tel__label {
  font-size: 0.63rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wdr-gold);
}

.wdr-nav-toggle {
  display: none;
  align-items: center;
  gap: 9px;
  margin-left: auto;
  background: var(--wdr-wall);
  border: 2px solid var(--wdr-navy);
  color: var(--wdr-navy);
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  padding: 10px 13px;
  cursor: pointer;
}
.wdr-bars {
  position: relative;
  width: 17px;
  height: 2px;
  background: currentColor;
}
.wdr-bars::before,
.wdr-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 17px;
  height: 2px;
  background: currentColor;
}
.wdr-bars::before { top: -6px; }
.wdr-bars::after { top: 6px; }
.wdr-nav-toggle[aria-expanded="true"] { background: var(--wdr-navy); color: #fff; }

/* ── buttons ────────────────────────────────────────────────────────────── */

.wdr-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.wdr-btn,
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 24px;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 2px solid var(--wdr-navy);
  background: var(--wdr-navy);
  color: #fff;
  border-radius: 0;
  cursor: pointer;
  font-family: inherit;
}
.wdr-btn:hover,
.wp-block-button__link:hover {
  background: var(--wdr-royal);
  border-color: var(--wdr-royal);
  color: #fff;
}

.wdr-btn--ghost {
  background: transparent;
  color: var(--wdr-navy);
}
.wdr-btn--ghost:hover {
  background: var(--wdr-navy);
  color: #fff;
  border-color: var(--wdr-navy);
}

.wdr-on-dark .wdr-btn {
  background: var(--wdr-gold);
  border-color: var(--wdr-gold);
  color: var(--wdr-navy);
}
.wdr-on-dark .wdr-btn:hover {
  background: #ffc634;
  border-color: #ffc634;
  color: var(--wdr-navy);
}
.wdr-on-dark .wdr-btn--ghost {
  background: transparent;
  color: #fff;
  border-color: #fff;
}
.wdr-on-dark .wdr-btn--ghost:hover { background: #fff; color: var(--wdr-navy); }

/* ── hero ───────────────────────────────────────────────────────────────── */

.wdr-hero { padding-block: clamp(30px, 6vw, 56px) 0; }

.wdr-hero__in {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(26px, 4vw, 54px);
  /* Centred, not bottom-aligned: interior pages have one-line h1s and bottom
     alignment dropped them to the floor under 200px of white. */
  align-items: center;
}

.wdr-hero__copy { padding-bottom: 10px; }
.wdr-hero h1 { margin-bottom: 0.42em; }
.wdr-hero .wdr-btns { margin-top: 26px; }

/* The photo box carries the ratio; .wdr-ph inside is absolutely populated, so
   it needs a height to fill or the whole hero image collapses to nothing. */
.wdr-hero__shot { aspect-ratio: 3 / 4; }
.wdr-hero__shot .wdr-ph { height: 100%; }

/* the wall vinyls — the little figures painted along their arena wall */
.wdr-vinyls {
  display: flex;
  align-items: flex-end;
  gap: clamp(14px, 3vw, 30px);
  margin-top: 34px;
}
.wdr-vinyls svg { height: clamp(46px, 7vw, 66px); width: auto; }

/* ── sections ───────────────────────────────────────────────────────────── */

.wdr-sec { padding-top: clamp(46px, 7vw, 84px); }
.wdr-sec__body { padding-top: clamp(28px, 4vw, 46px); }

.wdr-sec--dark { background: var(--wdr-navy); color: #fff; }
.wdr-sec--dark a { color: var(--wdr-gold); }
.wdr-sec--alt { background: var(--wdr-wall-2); }
.wdr-sec--pad { padding-bottom: clamp(46px, 7vw, 84px); }

.wdr-head-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 48px);
  align-items: start;
}
.wdr-head-row h2 { margin-bottom: 0; }

/* ── the two audiences ──────────────────────────────────────────────────── */

.wdr-aud {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 52px);
}

.wdr-aud__col > h3 {
  padding-bottom: 12px;
  border-bottom: 3px solid var(--wdr-navy);
  margin-bottom: 0;
}
.wdr-on-dark .wdr-aud__col > h3 { border-bottom-color: var(--wdr-gold); }

.wdr-rows { list-style: none; margin: 0; padding: 0; }
.wdr-rows li { border-bottom: 1px solid var(--wdr-hair); }
.wdr-on-dark .wdr-rows li { border-bottom-color: rgba(255, 255, 255, 0.18); }
.wdr-rows a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: baseline;
  padding: 17px 0;
  text-decoration: none;
}
.wdr-rows a:hover .wdr-rows__t { color: var(--wdr-royal); }
.wdr-rows__t {
  font-weight: 700;
  font-size: 1.06rem;
  letter-spacing: 0.01em;
  grid-column: 1;
}
.wdr-rows__d {
  grid-column: 1 / -1;
  font-size: 0.93rem;
  color: var(--wdr-muted);
  line-height: 1.5;
}
.wdr-on-dark .wdr-rows__d { color: #c3cee4; }
/* Navy, not orange. Orange arrows on white were 3.13:1 — under AA for normal
   text, and exactly the trap the colour note at the top of this file warns
   about. aria-hidden keeps them off screen readers; it does nothing for
   somebody who has to see them. */
.wdr-rows__go {
  grid-column: 2;
  grid-row: 1;
  color: var(--wdr-navy);
  font-weight: 800;
}
.wdr-on-dark .wdr-rows__go { color: var(--wdr-gold); }
.wdr-rows a:hover .wdr-rows__go { color: var(--wdr-royal); }

/* ── session times and prices, set large ────────────────────────────────── */

.wdr-times {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  background: rgba(255, 255, 255, 0.16);
  border: 2px solid rgba(255, 255, 255, 0.16);
  margin-bottom: 34px;
}
.wdr-times > div { background: var(--wdr-navy); padding: 22px 20px; }
.wdr-times dt {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wdr-gold);
  font-weight: 700;
  margin-bottom: 8px;
}
.wdr-times__age {
  display: block;
  font-variation-settings: "wdth" 118;
  font-weight: 800;
  font-size: clamp(1.5rem, 3.6vw, 2.1rem);
  line-height: 1;
  text-transform: uppercase;
  margin: 0 0 10px;
  color: #fff;
}
.wdr-times dd { margin: 0; font-size: 0.97rem; color: #d3dcee; }

/* On a light section the tiles invert so the block still reads as one object */
.wdr-times--light {
  background: var(--wdr-hair);
  border-color: var(--wdr-hair);
}
.wdr-times--light > div { background: var(--wdr-wall); }
.wdr-times--light dt { color: var(--wdr-muted); }
.wdr-times--light .wdr-times__age { color: var(--wdr-navy); }
.wdr-times--light dd { color: var(--wdr-muted); }

.wdr-prices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 36px);
  margin: 0 0 30px;
}
.wdr-prices > div {
  border-top: 3px solid var(--wdr-gold);
  padding-top: 16px;
}
.wdr-prices__n {
  font-variation-settings: "wdth" 118;
  font-weight: 900;
  font-size: clamp(2.3rem, 6vw, 3.4rem);
  line-height: 0.95;
  color: var(--wdr-gold);
  display: block;
  margin-bottom: 8px;
}
.wdr-prices__l {
  font-size: 0.95rem;
  color: #c3cee4;
  line-height: 1.45;
}
/* Gold numerals are decorative display type at 3.4rem, which clears AA large.
   The label beneath them must not be gold on white, so on light sections the
   whole block goes navy. */
.wdr-prices--light > div { border-top-color: var(--wdr-navy); }
.wdr-prices--light .wdr-prices__n { color: var(--wdr-navy); }
.wdr-prices--light .wdr-prices__l { color: var(--wdr-muted); }

/* ── media / cards ──────────────────────────────────────────────────────── */

.wdr-ph {
  position: relative;
  overflow: hidden;
  background: var(--wdr-wall-2);
}
.wdr-ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wdr-split {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.wdr-split--flip .wdr-split__media { order: 2; }
.wdr-split .wdr-ph { aspect-ratio: 3 / 4; }

.wdr-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.6vw, 30px);
}
.wdr-trio .wdr-ph { aspect-ratio: 3 / 4; margin-bottom: 16px; }
.wdr-trio h3 { margin-bottom: 0.35em; }
.wdr-trio p {
  font-size: 0.95rem;
  color: var(--wdr-muted);
  margin-bottom: 0;
}
.wdr-sec--dark .wdr-trio p { color: #c3cee4; }

.wdr-facts { list-style: none; margin: 0 0 26px; padding: 0; }
.wdr-facts li {
  position: relative;
  padding: 9px 0 9px 30px;
  border-bottom: 1px solid var(--wdr-hair);
  font-size: 1rem;
}
.wdr-facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 17px;
  width: 12px;
  height: 12px;
  background: var(--wdr-orange);
}
.wdr-on-dark .wdr-facts li { border-bottom-color: rgba(255, 255, 255, 0.18); }

.wdr-credits { list-style: none; margin: 0; padding: 0; }
.wdr-credits li {
  padding: 13px 0;
  border-bottom: 1px solid var(--wdr-hair);
  font-size: 1rem;
  line-height: 1.5;
}
.wdr-on-dark .wdr-credits li { border-bottom-color: rgba(255, 255, 255, 0.18); }

/* ── sponsor and partner logos ──────────────────────────────────────────── */

.wdr-sponsors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(16px, 3vw, 34px);
  align-items: center;
}
.wdr-sponsors__item {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Their sponsor files are a mix of white-ground, black-ground and orange
     tiles. A white card behind every one is the only way the set reads as a
     row rather than a rummage through a folder. */
  background: #fff;
  border: 1px solid var(--wdr-hair);
  padding: 18px 20px;
  min-height: 108px;
  text-decoration: none;
}
.wdr-sponsors__item img {
  max-height: 72px;
  width: auto;
  object-fit: contain;
}
a.wdr-sponsors__item:hover { border-color: var(--wdr-navy); }
.wdr-sponsors__cap {
  margin-top: 14px;
  font-size: 0.82rem;
  color: var(--wdr-muted);
  text-align: center;
}

/* ── testimonials ───────────────────────────────────────────────────────── */

.wdr-samples {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
}
.wdr-sample {
  border-left: 5px solid var(--wdr-gold);
  padding: 4px 0 4px 22px;
  margin: 0;
}
.wdr-sample p {
  font-size: 1.07rem;
  line-height: 1.55;
  margin-bottom: 12px;
}
.wdr-sample footer {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--wdr-muted);
}
.wdr-on-dark .wdr-sample footer { color: #9fb0cf; }

/* ── FAQ accordion ──────────────────────────────────────────────────────── */

.wdr-faq { border-top: 3px solid var(--wdr-navy); }
.wdr-faq details {
  border-bottom: 1px solid var(--wdr-hair);
}
.wdr-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 40px 18px 0;
  font-weight: 700;
  font-size: 1.04rem;
  position: relative;
}
.wdr-faq summary::-webkit-details-marker { display: none; }
.wdr-faq summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -9px;
  border-right: 3px solid var(--wdr-navy);
  border-bottom: 3px solid var(--wdr-navy);
  transform: rotate(45deg);
  transition: transform 0.15s;
}
.wdr-faq details[open] summary::after {
  transform: rotate(-135deg);
  margin-top: -3px;
}
.wdr-faq__a {
  padding: 0 0 20px;
  color: var(--wdr-muted);
  max-width: 68ch;
}
.wdr-faq__a > :last-child { margin-bottom: 0; }

/* ── contact ────────────────────────────────────────────────────────────── */

.wdr-contact-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}

.wdr-form-note {
  background: var(--wdr-wall-2);
  border-left: 5px solid var(--wdr-orange);
  padding: 16px 20px;
  font-size: 0.93rem;
  color: var(--wdr-muted);
  margin-bottom: 26px;
}

.wdr-field { margin-bottom: 20px; }
.wdr-field label {
  display: block;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  margin-bottom: 7px;
}
.wdr-field input,
.wdr-field textarea,
.wdr-field select {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--wdr-ink);
  background: var(--wdr-wall);
  border: 2px solid var(--wdr-hair);
  padding: 13px 14px;
  border-radius: 0;
}
.wdr-field input:focus,
.wdr-field textarea:focus,
.wdr-field select:focus {
  border-color: var(--wdr-navy);
  outline: 3px solid var(--wdr-orange);
  outline-offset: 2px;
}
.wdr-field textarea { min-height: 138px; resize: vertical; }

.wdr-deets { list-style: none; margin: 0 0 26px; padding: 0; }
.wdr-deets li {
  padding: 14px 0;
  border-bottom: 1px solid var(--wdr-hair);
}
.wdr-deets__k {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wdr-muted);
  font-weight: 700;
  margin-bottom: 5px;
}
.wdr-deets__v { font-size: 1.12rem; font-weight: 600; }
.wdr-deets a { font-weight: 700; }

/* ── editor / post content ──────────────────────────────────────────────── */

/* The reading measure belongs to the prose, not to the container.
   Constraining .wdr-entry itself squeezed everything inside it to 72
   characters — including tables, embeds and the booking calendar, none of
   which are prose. Applying the measure to the text elements keeps paragraphs
   readable while letting wide things use the full column. */
.wdr-entry > p,
.wdr-entry > h1,
.wdr-entry > h2,
.wdr-entry > h3,
.wdr-entry > h4,
.wdr-entry > h5,
.wdr-entry > h6,
.wdr-entry > ul,
.wdr-entry > ol,
.wdr-entry > dl,
.wdr-entry > blockquote { max-width: 72ch; }

.wdr-entry ul,
.wdr-entry ol { padding-left: 1.3em; }
.wdr-entry li { margin-bottom: 0.4em; }
.wdr-entry blockquote {
  border-left: 5px solid var(--wdr-gold);
  padding-left: 22px;
  margin-left: 0;
  font-size: 1.07rem;
}
.wdr-entry table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.4em;
}
.wdr-entry th,
.wdr-entry td {
  border-bottom: 1px solid var(--wdr-hair);
  padding: 11px 10px;
  text-align: left;
}
.wdr-entry th {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.wdr-entry code,
.wdr-entry pre {
  background: var(--wdr-wall-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
}
.wdr-entry code { padding: 2px 6px; }
.wdr-entry pre { padding: 18px; overflow-x: auto; }

.alignleft { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { margin-inline: auto; }
.alignwide { max-width: min(1180px, 92vw); margin-inline: auto; }
.alignfull {
  max-width: none;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}
.wp-caption { max-width: 100%; }
.wp-caption-text,
.wp-block-image figcaption {
  font-size: 0.85rem;
  color: var(--wdr-muted);
  margin-top: 8px;
}

/* ── post / archive listing ─────────────────────────────────────────────── */

.wdr-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(20px, 3vw, 36px);
}
.wdr-card {
  border-bottom: 3px solid var(--wdr-navy);
  padding-bottom: 20px;
}
.wdr-card .wdr-ph {
  aspect-ratio: 4 / 3;
  margin-bottom: 16px;
}
.wdr-card h2,
.wdr-card h3 { font-size: 1.2rem; margin-bottom: 0.4em; }
.wdr-card h2 a,
.wdr-card h3 a { text-decoration: none; }
.wdr-card h2 a:hover,
.wdr-card h3 a:hover { color: var(--wdr-royal); }
.wdr-card__meta {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wdr-muted);
  font-weight: 700;
  margin-bottom: 10px;
}
.wdr-card p { font-size: 0.95rem; color: var(--wdr-muted); }

.wdr-pagination {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: clamp(32px, 5vw, 54px);
}
.wdr-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 46px;
  padding: 0 12px;
  border: 2px solid var(--wdr-hair);
  text-decoration: none;
  font-weight: 700;
}
.wdr-pagination .page-numbers:hover { border-color: var(--wdr-navy); }
.wdr-pagination .page-numbers.current {
  background: var(--wdr-navy);
  border-color: var(--wdr-navy);
  color: #fff;
}

/* ── comments ───────────────────────────────────────────────────────────── */

.wdr-comments { margin-top: clamp(40px, 6vw, 70px); }
.wdr-comments ol { list-style: none; margin: 0; padding: 0; }
.wdr-comments .children { padding-left: clamp(16px, 4vw, 44px); }
.wdr-comments .comment-body {
  border-bottom: 1px solid var(--wdr-hair);
  padding: 20px 0;
}
.wdr-comments .comment-author img {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}
.wdr-comments .comment-metadata {
  font-size: 0.78rem;
  color: var(--wdr-muted);
  margin-bottom: 10px;
}

/* ── footer ─────────────────────────────────────────────────────────────── */

.wdr-foot {
  background: var(--wdr-navy-deep);
  color: #b9c5dd;
  padding-block: clamp(38px, 5vw, 58px) 26px;
  margin-top: clamp(48px, 7vw, 88px);
  font-size: 0.95rem;
}
.wdr-foot__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: clamp(24px, 4vw, 48px);
  padding-bottom: 30px;
}
.wdr-foot h3 {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--wdr-gold);
  font-variation-settings: "wdth" 100;
  font-weight: 700;
  margin-bottom: 14px;
}
.wdr-foot ul { list-style: none; margin: 0; padding: 0; }
.wdr-foot li { margin-bottom: 8px; }
.wdr-foot a { color: #dce4f2; text-decoration: none; }
.wdr-foot a:hover { color: var(--wdr-gold); text-decoration: underline; }
/* Their logo is a white-ground raster — on a navy footer it reads as a white
   box, so the footer sets the name in type instead. The mark itself is in the
   header on every page, which is where it earns its keep. */
.wdr-foot__mark {
  font-variation-settings: "wdth" 122;
  font-weight: 900;
  font-size: 1.85rem;
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 14px;
}
.wdr-foot__mark span {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.34em;
  font-variation-settings: "wdth" 100;
  color: var(--wdr-gold);
  margin-top: 7px;
}
.wdr-foot__end {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  justify-content: space-between;
  font-size: 0.85rem;
  color: #8fa0bf;
}
.wdr-foot__end p { margin: 0; }

/* WDR Coaching is its own brand and belongs on white sections, because the
   file is a white-ground raster and would read as a box on navy. */
.wdr-mark { width: 230px; height: auto; margin-bottom: 20px; }

/* ── Elementor interop ──────────────────────────────────────────────────── */

/* Elementor sets its own container width; when our sections are used inside an
   Elementor container we don't want to double the gutter. */
.elementor-widget-container > .wdr-wrap { padding-inline: 0; }

/* Elementor's section stretch fights overflow-x hidden on some hosts; this
   keeps full-bleed sections behaving. */
.elementor-section-stretched { max-width: 100vw; }

/* ── responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .wdr-hero__in { grid-template-columns: 1fr; align-items: start; }
  .wdr-hero__shot { aspect-ratio: 4 / 3; }
  .wdr-vinyls { margin-top: 28px; }
  .wdr-split,
  .wdr-contact-grid,
  .wdr-head-row { grid-template-columns: 1fr; }
  .wdr-split--flip .wdr-split__media { order: 0; }
  .wdr-split .wdr-ph { aspect-ratio: 4 / 3; }
  .wdr-foot__grid { grid-template-columns: 1fr 1fr; }
  .wdr-foot__brand { grid-column: 1 / -1; }
}

/* The word "Call" is the first thing to go when the header gets tight. A
   telephone number in a navy button is not mistaken for anything else. */
@media (max-width: 1240px) {
  .wdr-tel__label { display: none; }
}

@media (max-width: 1024px) {
  /* PROGRESSIVE ENHANCEMENT, and it is not decoration.
     The collapse is keyed off `.js`, which an inline script in <head> sets
     before first paint. With JavaScript off, the button that would open the
     menu cannot work — so the button stays hidden and the nav stays OPEN as a
     plain stacked list. Hiding it by default would have left a phone with no
     navigation at all and no way to get any. */
  .js .wdr-nav-toggle { display: inline-flex; }
  .wdr-head__in { flex-wrap: wrap; gap: 12px; }
  .wdr-brand img { width: 88px; }
  .wdr-tel { padding: 10px 14px; font-size: 0.9rem; }
  .wdr-nav {
    order: 3;
    margin-left: 0;
    width: 100%;
    flex-direction: column;
    gap: 0;
    border-top: 2px solid var(--wdr-navy);
    padding-top: 6px;
  }
  .wdr-nav ul { flex-direction: column; gap: 0; width: 100%; }
  .js .wdr-nav { display: none; }
  .js .wdr-nav.is-open { display: flex; }
  .wdr-nav a {
    padding: 13px 2px;
    font-size: 0.95rem;
    border-bottom: 1px solid var(--wdr-hair);
  }
  .wdr-nav .current-menu-item > a,
  .wdr-nav .current_page_item > a {
    border-bottom-color: var(--wdr-hair);
    color: var(--wdr-royal);
  }
  .wdr-nav .current-menu-item > a::before,
  .wdr-nav .current_page_item > a::before {
    content: "▸ ";
    color: var(--wdr-gold);
  }
  .wdr-nav .sub-menu {
    position: static;
    display: flex;
    background: transparent;
    padding: 0 0 0 18px;
    min-width: 0;
  }
  .wdr-nav .sub-menu a { color: var(--wdr-navy); }
}

@media (max-width: 700px) {
  .wdr-aud,
  .wdr-samples,
  .wdr-trio,
  .wdr-prices { grid-template-columns: 1fr; }
  .wdr-times { grid-template-columns: 1fr; }
  .wdr-prices > div { padding-top: 12px; }
}

@media (max-width: 480px) {
  body { font-size: 16px; }
  .wdr-foot__grid { grid-template-columns: 1fr; }
  .wdr-btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@media not (prefers-reduced-motion: reduce) {
  .wdr-nav a,
  .wdr-tel,
  .wdr-btn,
  .wdr-rows a { transition: background 0.15s, color 0.15s, border-color 0.15s; }
}

@media print {
  .wdr-head,
  .wdr-foot,
  .wdr-nav-toggle,
  .wdr-btns { display: none !important; }
  body { font-size: 12pt; color: #000; }
}