/* base — reset, grounds, layout, results furniture, print
   Ported from design-export/base.css (Phase 3 Stage 2 split).
   No literal colour, no literal font family: every value is a token. */

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-min);
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img, video, svg { max-width: 100%; }
img, video { display: block; height: auto; }

/* Decorative inline-icon size floor. Markup exception #1 replaced Font Awesome
   <i> with inline <svg> that carry a viewBox but no width/height; unsized they
   paint at the replaced-element default (up to ~300px), blowing out hero meta
   rows, detail icons and list markers across many blocks. Give every inline SVG
   with no explicit dimension a text-relative size. Zero-specificity :where() so
   any component rule (.btn svg, .contact-bar__item svg, sized icons, …) wins. */
:where(svg:not([width]):not([height])) { width: 1.5em; height: 1.5em; }

/* dncg_icon() inline SVGs (inc/icons.php): inline text-sized icons that inherit
   colour via currentColor. Higher specificity than the floor above. */
.icon { width: 1.1em; height: 1.1em; display: inline-block; vertical-align: -0.15em; flex: 0 0 auto; }



input, button, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

::selection { background: var(--accent); color: var(--btn-accent-text); }

/* Focus indicator. Two-tone on purpose: no SINGLE colour can clear 3:1 against
   both a white page and a navy panel, and the theme puts focusable controls on
   both. --accent alone measured 1.89:1 on white (WCAG 1.4.11 failure).
   The dark ring carries the contrast on light grounds, the light halo carries it
   on dark grounds, and one of the two always applies. */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--focus-halo);
}

/* Screen-reader-only text. Every alias the theme + plugins use is listed here so
   there is a single source of truth after the Foundation unwire: .sr-only and
   .screen-reader-text (WP core), .show-for-sr (Foundation legacy),
   .visually-hidden (course progression part) and .visible-hidden (skip links). */
.sr-only, .show-for-sr, .screen-reader-text, .visually-hidden, .visible-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
/* Skip links (.visible-hidden) reveal on keyboard focus — accessible, not just
   hidden. They sit top-left over the header when focused. */
.visible-hidden:focus {
  position: fixed; top: .5rem; left: .5rem; z-index: 1000;
  width: auto; height: auto; clip: auto; clip-path: none; margin: 0;
  padding: .7rem 1.1rem; background: var(--navy-deep); color: var(--white);
  border-radius: var(--radius-sm); font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* --------------------------------------------------------- ground helpers */
.bg-white { background: var(--white); }
.bg-light-grey { background: var(--light); }
.bg-mid-grey { background: var(--neutral-300, var(--box-border)); }
.bg-blue { background: var(--surface-blue); color: var(--white); }
.bg-dark-blue { background: var(--surface-dark); color: var(--white); }
.bg-navy { background: var(--surface-dark); color: var(--white); }
.bg-black { background: var(--surface-muted); color: var(--white); }
.bg-red { background: var(--surface-brand); color: var(--white); }

:is(.bg-blue, .bg-dark-blue, .bg-navy, .bg-black, .bg-red, .bg-magenta, .bg-dark, .bg-dc-dark-blue, .bg-dc-blue, .bg-mid-blue, .bg-dark-grey) :is(h1, h2, h3, h4, h5, .content-area-title, .title-font) { color: var(--white); }
/* Two families of coloured ground, and they need different treatment.

   DEEP grounds (navy, near-black, dark grey) are far enough from white that an
   accent or a softened tint still clears AA on them.

   MID-TONE BRAND fills (--surface-blue, --surface-brand) are sized to carry white
   at about 4.5:1 and have no headroom left, so on them an alpha tint drops under
   (measured 4.07:1 ucdon, 3.45:1 ucnl, 4.14:1 hesta, 4.22:1 dc) and a bright accent
   collapses (2.07:1 ucdon, 1.41:1 ucnl, 2.20:1 hesta). Those take full-strength
   on-dark text and lean on weight/underline instead of colour. */
:is(.bg-dark-blue, .bg-navy, .bg-black, .bg-dark, .bg-dc-dark-blue, .bg-dark-grey) .eyebrow { color: var(--accent-on-dark); }
:is(.bg-dark-blue, .bg-navy, .bg-black, .bg-dark, .bg-dc-dark-blue, .bg-dark-grey) :is(.section-intro, .title-area p) { color: rgba(var(--on-dark-rgb), .86); }
:is(.bg-dark-blue, .bg-navy, .bg-black, .bg-dark, .bg-dc-dark-blue, .bg-dark-grey) .d-lead { color: rgba(var(--on-dark-rgb), .72); }
:is(.bg-dark-blue, .bg-navy, .bg-black, .bg-dark, .bg-dc-dark-blue, .bg-dark-grey) :is(h1, h2, h3) em { color: var(--accent-on-dark); }
:is(.bg-dark-blue, .bg-navy, .bg-black, .bg-dark, .bg-dc-dark-blue, .bg-dark-grey) a:not(.btn):not(.button):not(.cta) { color: var(--accent-on-dark); }

:is(.bg-blue, .bg-red, .bg-magenta, .bg-dc-blue, .bg-mid-blue) :is(.eyebrow, .section-intro, .title-area p, .d-lead) { color: var(--text-on-dark); }
:is(.bg-blue, .bg-red, .bg-magenta, .bg-dc-blue, .bg-mid-blue) :is(h1, h2, h3) em { color: var(--display-em-on-dark); }
:is(.bg-blue, .bg-red, .bg-magenta, .bg-dc-blue, .bg-mid-blue) a:not(.btn):not(.button):not(.cta) { color: var(--text-on-dark); text-decoration-thickness: 2px; }

/* ------------------------------------------------------ layout and rhythm */
.row {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding-inline: var(--page-gutter);
}
.row--narrow { max-width: var(--content-max-narrow); }
.row--full { max-width: none; }

/* SECTION RHYTHM — the single source of truth for the whole .pad* family.
   ---------------------------------------------------------------------------
   There is no second set. css/bridge.css used to carry a parallel
   `.content-area.pad*` set at higher specificity, and the two disagreed:

     .pad          3.5rem / 5rem responsive   vs   5rem flat
     .pad-reduced  2.4rem flat                vs   3.5rem flat

   So the same editor choice measured differently depending on whether the
   block happened to emit .content-area, and "Reduced (50%)" was really 70% on
   the .content-area half. Those six compound rules are DELETED. Do not
   reintroduce them: any block-specific padding belongs in that block's own
   stylesheet, not in a second copy of this family.

   FULL     --space-section-sm (3.5rem) below 64em, --space-section (5rem) above
   REDUCED  exactly half of full at both widths: 1.75rem and 2.5rem

   Reduced is written as calc(full / 2) rather than as its own literal so it
   cannot drift: change --space-section and the reduced step follows. */
.pad { padding-block: var(--space-section-sm); }
.pad-top { padding-top: var(--space-section-sm); }
.pad-bottom { padding-bottom: var(--space-section-sm); }
.pad-reduced { padding-block: calc(var(--space-section-sm) / 2); }
.pad-top-reduced { padding-top: calc(var(--space-section-sm) / 2); }
.pad-bottom-reduced { padding-bottom: calc(var(--space-section-sm) / 2); }
@media (min-width: 64em) {
  .pad { padding-block: var(--space-section); }
  .pad-top { padding-top: var(--space-section); }
  .pad-bottom { padding-bottom: var(--space-section); }
  .pad-reduced { padding-block: calc(var(--space-section) / 2); }
  .pad-top-reduced { padding-top: calc(var(--space-section) / 2); }
  .pad-bottom-reduced { padding-bottom: calc(var(--space-section) / 2); }
}

/* All-round padding for a PANEL, as opposed to the .pad* rules above, which are
   section rhythm and only ever touch the block axis. Restored: both classes are
   emitted by templates in this theme and neither survived the extraction, so
   five elements were rendering with no internal padding at all —
   parts/repeats/breadcrumb-courses.php, breadcrumb-news.php,
   dark-breadcrumb.php, single-tribe_events.php (the "Attend this event" panel)
   and taxonomy-course-category.php (the testimonial panel).

   Values are the originals from sites/dc/dc-child/style.css L4349-4353, not new
   ones. The other two members of that family, .pad-full-medium and
   .pad-full-large, are NOT restored: nothing in target/ emits them. */
.pad-full-extra-small { padding: 1rem; }
.pad-full-small { padding: 2rem; }

.content-area { position: relative; }

/* ------------------------------------------------- pagination and results */
.pagination { display: flex; align-items: center; gap: .75rem; margin-top: 2rem; }
.pagination a, .pagination span.is-current {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; text-decoration: none;
  border: 1px solid var(--line); color: var(--text-heading);
}
.pagination span.is-current { background: var(--navy); color: var(--white); border-color: var(--navy); }

.filter-panel { border-right: 1px solid var(--line); padding: 2rem 1.8rem 3rem; }
.filter-panel__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1.2rem; }
.filter-group { border-top: 1px solid var(--line); padding-block: 1.1rem; }
.filter-group__toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.filter-group__toggle span:first-child { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.3125rem; color: var(--text-heading); }
.filter-group__options { margin-top: .9rem; max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: .55rem; }
.filter-option { display: flex; align-items: center; gap: .7rem; text-align: left; }
.filter-option__box { flex: 0 0 auto; width: 22px; height: 22px; border: 2px solid var(--box-border); background: var(--white); border-radius: 5px; display: flex; align-items: center; justify-content: center; color: var(--white); font-size: var(--fs-meta); font-weight: 700; }
.filter-option[aria-pressed="true"] .filter-option__box { background: var(--navy); border-color: var(--navy); }
.filter-option[aria-pressed="true"] .filter-option__label { font-weight: 700; color: var(--navy); }
.filter-option__count { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.results-layout { display: grid; grid-template-columns: 330px 1fr; align-items: start; }
@media (max-width: 64em) { .results-layout { grid-template-columns: 1fr; } .filter-panel { border-right: 0; border-bottom: 1px solid var(--line); } }

/* ------------------------------------------------ shared campaign motion
   Two general-purpose keyframes used by campaign / landing sections (Clearing,
   and future landing pages): `rise` is a fade-up entrance, `bob` a gentle idle
   loop. @keyframes are invalid inside the page-scoped Custom CSS wrapper, so
   they must live at theme level; they were previously duplicated per child as
   ucd-rise/ucd-bob (ucdon) and ucnl-rise/ucnl-bob (ucnl). Merged here once,
   brand-neutral. Page / variant CSS references them by these names, and must
   pair its `animation:` usage with a prefers-reduced-motion: reduce reset on the
   same selector (the consuming selectors are not known here). */
@keyframes rise { from { opacity: 0; translate: 0 32px; } to { opacity: 1; translate: 0 0; } }
@keyframes bob  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

/* --------------------------------------------------------------- printing */
@media print {
  body { background: var(--white); }
  .site-header, .site-footer, .page-navigation, .controls,
  .brand-switcher, [data-print-hide] { display: none !important; }
  .hero-background, .full-page-hero__background, .stats-banner::before { display: none; }
  .hero, .full-page-hero, .hero-enhanced, .stats-banner { background: var(--white); color: var(--black); }
  a { text-decoration: underline; }
}