/*
Theme Name:   PRYDE 2026
Theme URI:    https://pryde5330.com/
Description:  District 5330 branding for the PRYDE camp site. Child of Twenty Sixteen. Activating this theme applies the whole visual layer; switching back to Twenty Sixteen removes it completely, with no content changes either way.
Author:       Rotary District 5330 PRYDE
Template:     twentysixteen
Version:      1.1.4
Text Domain:  pryde-2026
*/

/* ── Bump the Version above on EVERY edit to this file. ──────────────────────
   Cloudflare fronts this site with max-age=2678400 (31 days) on static assets.
   The stylesheet URL only changes when this version changes, so without a bump
   your edits sit correctly on the server while every browser — including logged-in
   draft previews — keeps loading the old cached file. Confirmed 2026-08-16:
   ?ver=20260520 served an 11,932-byte stale copy while the file on disk was 14,131.
   ──────────────────────────────────────────────────────────────────────────── */

/* ==========================================================================
   Design tokens — lifted from district5330.org (d5330-additional.css),
   ranked by how often the district actually uses them.
   ========================================================================== */
:root {
  --pryde-navy:      #003a6e;  /* headings, masthead, footer */
  --pryde-navy-2:    #004a86;
  --pryde-azure:     #005daa;  /* buttons, links */
  --pryde-gold:      #f7a81b;  /* accent rules, badges */
  --pryde-gold-ink:  #8a5c00;  /* gold as readable text */
  --pryde-gold-bg:   #fdf2d9;
  --pryde-slate:     #5a6478;  /* body copy */
  --pryde-ink:       #243040;
  --pryde-mist:      #f5f7fa;
  --pryde-mist-2:    #eef1f6;
  --pryde-line:      #dde4ee;
  --pryde-shadow:    0 4px 18px rgba(0, 46, 91, .07);
  --pryde-shadow-lg: 0 5px 18px rgba(0, 30, 60, .08);
}

/* ==========================================================================
   Base typography — the district pairs Merriweather with a UI sans.
   Merriweather ships with Twenty Sixteen, so no external font request.
   ========================================================================== */
body,
.entry-content,
.site-content {
  color: var(--pryde-ink);
}

/* Twenty Sixteen paints the page behind the content container near-black (#1a1a1a),
   which is designed to frame a boxed layout. Every section here is full-bleed with
   its own ground, so that frame just showed as dark strips down both edges and
   behind the area under the last section. Make the whole base white. */
html,
body,
.site,
.site-inner,
.site-content,
.content-area,
.site-main,
.entry-content { background-color: #fff; }

/* Twenty Sixteen also gives `.site` a 21px top and bottom margin, part of the same
   boxed-layout framing. With a full-bleed navy header and footer that reads as a
   white strip above the masthead and below the footer. Remove it. */
.site { margin-top: 0; margin-bottom: 0; }

/* The stock theme leaves a large gap between the last section and the footer,
   sized for a boxed layout. Sections carry their own vertical padding, so trim it
   and let the navy footer sit directly under the final band of content. */
.site-content { padding-bottom: 0; }
.site-main { margin-bottom: 0; padding-bottom: 0; }
.entry-content { margin-bottom: 0; padding-bottom: 0; }
.entry-footer { padding: 0.6em 0; margin: 0; }

h1, h2, h3, h4,
.entry-title,
.page-title {
  font-family: Merriweather, Georgia, serif;
  color: var(--pryde-navy);
}

a { color: var(--pryde-azure); }
a:hover, a:focus { color: var(--pryde-navy); }

/* Visible keyboard focus — Twenty Sixteen's default is faint. */
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible {
  outline: 3px solid var(--pryde-gold);
  outline-offset: 2px;
}

/* ==========================================================================
   Masthead — navy bar under a gold rule, matching the district header.
   ========================================================================== */
/* Twenty Sixteen wraps the header, content and footer in `.site-inner`, which is
   `max-width:1320px` with side padding. Page sections break out to 100vw, so the
   navy bar and gold rule stopped short and left white gutters either side. Break
   the header and footer out the same way, then re-centre their contents on the
   same 1060px column the page sections use, so the logo lines up with the hero. */
.site-header,
.site-footer {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  max-width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
}

.site-header {
  background: var(--pryde-navy);
  border-bottom: 4px solid var(--pryde-gold);
  padding: 14px 0;
}

/* Twenty Sixteen spaces the masthead generously for a tall stacked layout:
   28px above the branding, and 28px both sides of the menu, on top of the header's
   own padding — 47px of air above the logo and again below the nav. With the logo
   now beside the title and the nav on one line, tighten all three. */
.site-header .site-branding { margin-top: 0; margin-bottom: 0; }
.site-header .site-header-menu { margin-top: 10px; margin-bottom: 0; }
.site-header .main-navigation { margin-bottom: 0; }
.site-header > *,
.site-footer > * {
  max-width: 1060px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}
/* Logo beside the title, not above it.
   The three elements are flat siblings in Twenty Sixteen's markup — logo anchor,
   title, description — so a two-column grid with named areas puts the logo in a
   full-height left cell and stacks the title and strapline beside it, without
   needing a wrapper element. */
.site-branding {
  margin-bottom: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "logo title"
    "logo desc";
  align-items: center;
  column-gap: 18px;
  row-gap: 2px;
}
.site-branding .custom-logo-link { grid-area: logo; align-self: center; display: block; }
.site-branding .site-title       { grid-area: title; align-self: end;   margin: 0; line-height: 1.15; }
.site-branding .site-description { grid-area: desc;  align-self: start; margin: 0; line-height: 1.3; }

.custom-logo {
  height: 68px;
  width: auto;
  max-width: none;
  display: block;
}

@media screen and (max-width: 44.375em) {
  .site-branding { column-gap: 12px; }
  .custom-logo { height: 48px; }
  .site-header .site-branding .site-description { font-size: .62rem; letter-spacing: .04em; }
}

/* Twenty Sixteen sets these at `.site-branding .site-title a` (and again inside a
   min-width query), so match that specificity or the colour silently loses. */
.site-header .site-branding .site-title,
.site-header .site-branding .site-title a {
  color: #fff;
}
.site-header .site-branding .site-title a:hover,
.site-header .site-branding .site-title a:focus {
  color: var(--pryde-gold);
}
.site-header .site-branding .site-description {
  color: #b9d0e8;
  border-bottom: 0;
}
.custom-logo {
  background: #fff;
  border-radius: 5px;
  padding: 4px 8px;
}

.main-navigation,
.main-navigation .primary-menu {
  background: var(--pryde-navy);
  border: 0;
}
.main-navigation a {
  color: #d8e6f4;
  font-weight: 600;
  border: 0;
  border-bottom: 2px solid transparent;
}
.main-navigation a:hover,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
  color: #fff;
  border-bottom-color: var(--pryde-gold);
}
.main-navigation ul ul { background: var(--pryde-navy-2); }

/* Tighten the horizontal rhythm so the whole menu has a chance of fitting on one
   line. Twenty Sixteen spaces items for a light background and a narrower menu. */
.main-navigation .primary-menu > li { margin-right: 0; }
.main-navigation .primary-menu > li > a { padding: .55em .7em; white-space: nowrap; }

/* ---- mobile: hamburger toggle ----------------------------------------------
   Twenty Sixteen ships the toggle button and the JS that adds `.toggled-on`, but
   renders it as the bare word "Menu" in near-black on a light grey border — which
   is invisible on the navy masthead and reads as nothing in particular. Give it a
   proper hamburger drawn in CSS (no icon font needed) that becomes an X when open.
   ---------------------------------------------------------------------------- */
.menu-toggle,
.menu-toggle:hover,
.menu-toggle:focus {
  position: relative;
  color: #fff;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, .55);
  border-radius: 6px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .55em .9em .55em 46px;   /* room for the icon on the left */
}
.menu-toggle:hover,
.menu-toggle:focus { border-color: var(--pryde-gold); color: var(--pryde-gold); }

.menu-toggle::before,
.menu-toggle::after {
  content: "";
  position: absolute;
  left: 15px;
  top: 50%;
  width: 20px;
  height: 2px;
  margin-top: -1px;
  background: currentColor;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
/* closed: three bars — middle is the element, outer two are box-shadows */
.menu-toggle::before { box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor; }
.menu-toggle::after  { opacity: 0; }

/* open: collapse to an X */
.menu-toggle.toggled-on::before { box-shadow: none; transform: rotate(45deg); }
.menu-toggle.toggled-on::after  { opacity: 1; transform: rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .menu-toggle::before, .menu-toggle::after { transition: none; }
}

/* ---- mobile: the opened panel ---- */
.site-header-menu.toggled-on { background: var(--pryde-navy); margin-top: 12px; }
.site-header-menu.toggled-on .primary-menu > li { border-top: 1px solid rgba(255, 255, 255, .16); }
.site-header-menu.toggled-on .primary-menu > li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .16); }
.site-header-menu.toggled-on .primary-menu > li > a { display: block; padding: .8em .2em; }
/* the desktop gold underline reads as a stray dash in a stacked list — use a
   left marker instead so the current page is still obvious */
.site-header-menu.toggled-on .primary-menu > li > a { border-bottom: 0; border-left: 3px solid transparent; padding-left: 12px; }
/* NOTE the `> li.current-menu-item >` — the rule above is 0,4,0 and sets the
   `border-left` SHORTHAND, which resets the colour. A plain
   `.toggled-on .current-menu-item > a` (0,3,0) loses to it and the gold marker
   silently never appears. This selector is 0,5,0 so it wins. */
.site-header-menu.toggled-on .primary-menu > li.current-menu-item > a,
.site-header-menu.toggled-on .primary-menu > li.current_page_item > a {
  border-left-color: var(--pryde-gold);
  color: #fff;
}
.site-header-menu.toggled-on .sub-menu a { padding-left: 30px; font-size: .95em; color: #b9d0e8; }

/* Open state: Twenty Sixteen flips the button to a near-black fill, which fights
   the navy masthead. Keep it transparent with a gold outline instead. */
.site-header .menu-toggle.toggled-on,
.site-header .menu-toggle.toggled-on:hover,
.site-header .menu-toggle.toggled-on:focus {
  background: transparent;
  color: var(--pryde-gold);
  border-color: var(--pryde-gold);
}

/* The submenu expander (Photos) is also near-black by default — invisible here. */
.site-header-menu .dropdown-toggle,
.site-header-menu .dropdown-toggle:hover,
.site-header-menu .dropdown-toggle:focus {
  color: #fff;
  background: transparent;
  border-color: rgba(255, 255, 255, .28);
}
.site-header-menu .dropdown-toggle:hover,
.site-header-menu .dropdown-toggle:focus { color: var(--pryde-gold); }

/* The stock theme prints the page title above every page; the new pages
   carry their own banner block, so suppress the duplicate. */
.page .entry-header .entry-title { display: none; }

/* ==========================================================================
   Full/wide alignment. Twenty Sixteen predates block alignment entirely, so
   alignfull blocks would otherwise sit boxed inside the content column. Break
   them out to the viewport, and clamp the body so this never causes sideways
   scrolling.
   ========================================================================== */
html, body { overflow-x: hidden; max-width: 100%; }

/* `calc(50% - 50vw)` only centres when the content box is itself centred in the
   viewport. Twenty Sixteen offsets .site-main for its sidebar layout, so that
   technique pushes full-width sections off to one side. Anchor to the viewport
   with left/right 50% instead — this is position-based and offset-proof. */
.entry-content > .alignfull {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  max-width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
}
.entry-content > .alignwide {
  position: relative;
  left: 50%;
  right: 50%;
  width: 92vw;
  max-width: 92vw;
  margin-left: -46vw;
  margin-right: -46vw;
}

/* Full-bleed sections span the viewport; their contents stay in a readable column
   — the same 1060px + 24px gutter as the header and footer, so the hero text lines
   up with the logo above it. */
.entry-content > .alignfull > .wp-block-group__inner-container,
.entry-content > .alignfull > .wp-block-cover__inner-container {
  max-width: 1060px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}
/* those sections already carry their own % padding — drop it so the gutter above
   is the single source of truth and nothing double-indents */
.entry-content > .alignfull.pryde-mist,
.entry-content > .alignfull.pryde-mist-2,
.entry-content > .alignfull.pryde-plain,
.entry-content > .alignfull.pryde-banner { padding-left: 0; padding-right: 0; }

/* Twenty Sixteen's page background is near-black, so any section without its own
   ground would show through as a dark band. Give every full-bleed section one. */
.entry-content > .alignfull { background-color: #fff; }
.entry-content > .alignfull.pryde-mist   { background-color: var(--pryde-mist); }
.entry-content > .alignfull.pryde-mist-2 { background-color: var(--pryde-mist-2); }
.entry-content > .alignfull.pryde-hero,
.entry-content > .alignfull.pryde-photobanner { background-color: #00284d; }

/* ==========================================================================
   Blocks — these classes are set on the blocks themselves via the editor's
   "Additional CSS class" field, so the markup stays plain core Gutenberg.
   ========================================================================== */

/* --- hero (core/cover) ---
   The cover block defaults to a 430px minimum plus generous inner padding, which
   pushed the hero past 560px and shoved the audience cards below the fold. Tighten
   both so the first thing a visitor scrolls to is the routing, not empty photo. */
.pryde-hero { min-height: 0; }
.pryde-hero .wp-block-cover__inner-container {
  max-width: 1060px;
  margin: 0 auto;
  padding-top: 2.2em;
  padding-bottom: 2.2em;
}
.pryde-hero h1 {
  color: #fff !important;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1.14;
  max-width: 19ch;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .32);
  margin-bottom: .3em;
}
.pryde-hero p { color: #cfe1f5; margin-bottom: .4em; }
.pryde-hero .pryde-when {
  color: #ffdf9e;
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: .2em;
}
.pryde-hero .wp-block-buttons { margin-top: 1.1em; }

/* --- eyebrow / badge --- */
.pryde-eyebrow {
  display: inline-block;
  background: var(--pryde-gold);
  color: #3d2900;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 4px;
  margin-bottom: 1em;
}

/* --- photo page banner (core/cover) — a shorter cousin of the hero, for interior
   pages that have a strong photograph of their own --- */
.pryde-photobanner { min-height: 300px; }
.pryde-photobanner .wp-block-cover__inner-container {
  max-width: 1060px;
  margin: 0 auto;
  padding: 1.6em 0 1.4em;
}
.pryde-photobanner h1 {
  color: #fff !important;
  margin: 0 0 .3em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .38);
}
.pryde-photobanner p { color: #dceaf7; margin: 0; text-shadow: 0 1px 6px rgba(0, 0, 0, .4); }
.pryde-photobanner .pryde-crumb { color: #b7d3ec !important; }

/* --- page banner (core/group) --- */
.pryde-banner {
  background: linear-gradient(180deg, var(--pryde-navy) 0%, var(--pryde-navy-2) 100%);
  border-bottom: 4px solid var(--pryde-gold);
  padding: 1.8em 7.6923%;
}
.pryde-banner h1 { color: #fff; margin: 0 0 .25em; }
.pryde-banner p { color: #cfe1f5; margin: 0; }
.pryde-crumb {
  color: #9fc2e2 !important;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: .6em !important;
}

/* --- cards (core/columns with .pryde-cards) --- */
.pryde-cards .wp-block-column {
  background: #fff;
  border: 1px solid var(--pryde-line);
  border-top: 4px solid var(--pryde-azure);
  border-radius: 10px;
  padding: 1.15em 1.1em;
  box-shadow: var(--pryde-shadow);
}
.pryde-cards .wp-block-column:nth-child(even) { border-top-color: var(--pryde-gold); }
.pryde-cards h3 { font-size: 1rem; margin: 0 0 .4em; }
.pryde-cards p { color: var(--pryde-slate); font-size: .88rem; line-height: 1.55; }
.pryde-due {
  display: inline-block;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--pryde-gold-ink);
  background: var(--pryde-gold-bg);
  padding: 3px 8px;
  border-radius: 3px;
  margin-bottom: .6em !important;
}

/* --- key dates rail --- */
.pryde-dates .wp-block-column {
  background: #fff;
  border-radius: 11px;
  border-left: 5px solid var(--pryde-azure);
  padding: 1em 1.05em;
  box-shadow: var(--pryde-shadow-lg);
}
.pryde-dates .wp-block-column:nth-child(even) { border-left-color: var(--pryde-gold); }
.pryde-dates h3 {
  color: var(--pryde-azure);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  margin: 0 0 .2em;
}
.pryde-dates .wp-block-column:nth-child(even) h3 { color: var(--pryde-gold-ink); }
.pryde-dates strong { display: block; color: var(--pryde-navy); font-size: .84rem; }
.pryde-dates p { color: #5b6675; font-size: .8rem; line-height: 1.5; margin: .2em 0 0; }

/* --- deadline alert --- */
.pryde-alert {
  background: #fffdf6;
  border: 1px solid #f0dcae;
  border-left: 5px solid var(--pryde-gold);
  border-radius: 0 10px 10px 0;
  padding: 1.05em 1.25em;
}
.pryde-alert h3 { margin: 0 0 .25em; font-size: 1.02rem; }
.pryde-alert p { color: #5b6675; margin: 0; font-size: .9rem; }

/* --- section grounds --- */
.pryde-mist   { background: var(--pryde-mist);   padding: 2.2em 7.6923%; }
.pryde-mist-2 { background: var(--pryde-mist-2); padding: 2.2em 7.6923%; }
.pryde-plain  { padding: 2.2em 7.6923%; }

/* --- buttons ---
   Twenty Sixteen's blocks.css loads AFTER this stylesheet and carries rules at
   specificity 0,3,0 / 0,4,0:
       .is-style-outline .wp-block-button__link:not(.has-text-color) { color:#1a1a1a }
       .wp-block-button .wp-block-button__link:hover                 { background:#007acc }
   So every button rule below is deliberately scoped through .entry-content or
   .pryde-hero to outrank them. Loosen the selectors and the black outline text
   and the stray blue hover both come straight back.                            */
.entry-content .wp-block-button .wp-block-button__link {
  background: var(--pryde-azure);
  color: #fff;
  font-weight: 800;
  border-radius: 6px;
  padding: .8em 1.6em;
  transition: background .15s ease, transform .15s ease;
}
.entry-content .wp-block-button .wp-block-button__link:hover,
.entry-content .wp-block-button .wp-block-button__link:focus {
  background: var(--pryde-navy);
  color: #fff;
  transform: translateY(-1px);
}

/* Outline button on the dark hero — white text and border, not the theme's black.
   Note the .entry-content prefix: without it this rule ties at 0,4,0 with the
   light-ground rule below and loses on source order, turning the hero button
   azure-on-transparent. Keep it at 0,5,0. */
.entry-content .pryde-hero .is-style-outline .wp-block-button__link,
.entry-content .pryde-hero .is-style-outline .wp-block-button__link:not(.has-text-color),
.entry-content .pryde-hero .is-style-outline .wp-block-button__link:not(.has-background) {
  background: transparent;
  border: 2px solid #fff;
  color: #fff;
}
.entry-content .pryde-hero .is-style-outline .wp-block-button__link:not(.has-text-color):hover,
.entry-content .pryde-hero .is-style-outline .wp-block-button__link:not(.has-text-color):focus,
.entry-content .pryde-hero .is-style-outline .wp-block-button__link:not(.has-background):hover,
.entry-content .pryde-hero .is-style-outline .wp-block-button__link:not(.has-background):focus {
  background: #fff;
  color: var(--pryde-navy);
  border-color: #fff;
}

/* Outline button anywhere else sits on a light ground — navy on white. */
.entry-content .is-style-outline .wp-block-button__link:not(.has-text-color) {
  background: transparent;
  border: 2px solid var(--pryde-azure);
  color: var(--pryde-azure);
}
.entry-content .is-style-outline .wp-block-button__link:not(.has-text-color):hover,
.entry-content .is-style-outline .wp-block-button__link:not(.has-text-color):focus {
  background: var(--pryde-azure);
  color: #fff;
}

.entry-content .pryde-btn-gold .wp-block-button__link { background: var(--pryde-gold); color: #3d2900; }
.entry-content .pryde-btn-gold .wp-block-button__link:hover,
.entry-content .pryde-btn-gold .wp-block-button__link:focus { background: #d18906; color: #fff; }

/* --- inline photo in body copy --- */
.pryde-inline-photo img {
  border-radius: 10px;
  box-shadow: var(--pryde-shadow);
  display: block;
  width: 100%;
  height: auto;
}
.pryde-inline-photo figcaption {
  color: var(--pryde-slate);
  font-size: .8rem;
  margin-top: .5em;
  text-align: left;
}
/* Portrait photos sat next to text would otherwise tower over the column. */
.wp-block-column .pryde-inline-photo img { max-height: 420px; object-fit: cover; }

/* --- video ---
   The camp films are 44–79 MB each. `preload="none"` plus a poster frame means a
   visitor downloads nothing until they press play — without it, browsers fetch
   metadata (and some fetch far more) on every page load. Keep both whenever a
   video is embedded here. */
.pryde-video { margin: 1.4em 0 0; }
.pryde-video video {
  display: block;
  width: 100%;
  max-height: 560px;
  border-radius: 10px;
  box-shadow: var(--pryde-shadow);
  background: #00284d;
}
.pryde-video figcaption {
  color: var(--pryde-slate);
  font-size: .8rem;
  text-align: center;
  margin-top: .55em;
}

/* --- gallery strip --- */
.pryde-gallery.wp-block-gallery figure.wp-block-image img {
  height: 220px;
  object-fit: cover;
  border-radius: 9px;
  display: block;
  width: 100%;
}
.pryde-gallery.wp-block-gallery figcaption { display: none; }

/* --- document download cards --- */
.pryde-docs .wp-block-column {
  background: #fff;
  border: 1px solid var(--pryde-line);
  border-radius: 9px;
  padding: .9em 1em;
  box-shadow: 0 3px 12px rgba(0, 46, 91, .05);
}
.pryde-docs .wp-block-column p { margin: 0; }
.pryde-docs a { font-weight: 800; text-decoration: none; }
.pryde-docs a:hover { text-decoration: underline; }
.pryde-doctype {
  display: inline-block;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .08em;
  background: var(--pryde-navy);
  color: #fff;
  padding: 3px 7px;
  border-radius: 3px;
  margin-bottom: .5em !important;
}

/* --- emergency / reference card --- */
.pryde-ref {
  background: var(--pryde-mist-2);
  border: 1px solid var(--pryde-line);
  border-radius: 11px;
  padding: 1.05em 1.1em;
}
.pryde-ref h3 { font-size: .98rem; margin: 0 0 .35em; }
.pryde-ref p { color: #4d5765; font-size: .85rem; margin: 0 0 .4em; }
.pryde-tel {
  font-size: 1.15rem !important;
  font-weight: 800;
  color: var(--pryde-azure) !important;
  font-variant-numeric: tabular-nums;
}
.pryde-fine { font-size: .74rem !important; color: #78828f !important; }

/* --- footer --- */
.site-footer {
  background: var(--pryde-navy);
  color: #c9dcef;
  border-top: 4px solid var(--pryde-gold);
  padding: 1.8em 7.6923%;
}
.site-footer a { color: #ffd98a; }
.site-info { color: #9fc2e2; }

/* ==========================================================================
   Responsive + motion
   ========================================================================== */
@media (max-width: 44.375em) {
  .pryde-cards .wp-block-column,
  .pryde-dates .wp-block-column { margin-bottom: 1em; }
  .pryde-mist, .pryde-mist-2, .pryde-plain, .pryde-banner { padding-left: 5%; padding-right: 5%; }
}
@media (prefers-reduced-motion: reduce) {
  .wp-block-button__link { transition: none; }
  .wp-block-button__link:hover { transform: none; }
}