/* ==========================================================================
   TINA'S TRUST — YOOTHEME / UIKIT BRIDGE
   --------------------------------------------------------------------------
   design-system.css styles our own `.tt-*` components. But most of the site
   will be built from YOOtheme Pro's native elements, which output UIkit
   classes (`.uk-button`, `.uk-card`, `.uk-accordion`…).

   This file is the translation layer. It points UIkit's own variables and
   selectors at the Tina's Trust tokens so a native YOOtheme button, card or
   accordion comes out looking identical to the prototype without anyone
   having to add a custom class.

   Load order: parent theme  →  design-system.css  →  THIS FILE  →  custom.css

   Every rule below is a deliberate override of a UIkit default. Where
   `!important` appears it is because UIkit ships the same property inline or
   at higher specificity and there is no cleaner hook.
   ========================================================================== */


/* ==========================================================================
   1. THE ZERO-RADIUS RULE
   The brand has no curves. UIkit rounds buttons, cards, inputs, images,
   badges, tooltips and notifications by default. Kill all of it globally,
   then allow circles back only where a shape is genuinely round (the video
   play button, avatars if ever used).
   ========================================================================== */

*,
*::before,
*::after { border-radius: 0 !important; }

/* Genuine circles, re-permitted explicitly. */
.tt-video__play,
.uk-border-circle { border-radius: 50% !important; }


/* ==========================================================================
   2. TYPE
   Point UIkit's font stacks at ours. UIkit sets font-family on body and on
   heading classes separately, so both need doing.
   ========================================================================== */

body,
.uk-base-body,
input, select, textarea, button, .uk-input, .uk-select, .uk-textarea, .uk-button {
  font-family: var(--tt-font-body);
}

h1, h2, h3, h4, h5, h6,
.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6,
.uk-heading-small, .uk-heading-medium, .uk-heading-large,
.uk-heading-xlarge, .uk-heading-2xlarge, .uk-heading-3xlarge,
.uk-logo, .uk-card-title, .uk-modal-title, .uk-accordion-title {
  font-family: var(--tt-font-head);
  color: var(--tt-olive-darker);
  letter-spacing: -.015em;
  font-weight: 700;
  line-height: var(--tt-lh-head);
}

/* Map UIkit's heading scale onto our fluid clamp() scale so a YOOtheme
   "Heading" element with style H1/H2/H3 matches the prototype exactly. */
h1, .uk-h1 { font-size: var(--tt-fs-h1); line-height: var(--tt-lh-tight); }
h2, .uk-h2 { font-size: var(--tt-fs-h2); }
h3, .uk-h3 { font-size: var(--tt-fs-h3); }
h4, .uk-h4 { font-size: var(--tt-fs-h4); letter-spacing: 0; }

.uk-heading-small   { font-size: var(--tt-fs-h2); }
.uk-heading-medium  { font-size: var(--tt-fs-h1); }
.uk-heading-large,
.uk-heading-xlarge  { font-size: var(--tt-fs-hero); line-height: var(--tt-lh-tight); }

/* The prototype's hero and big section headings are uppercase. YOOtheme has
   no native "uppercase display" style, so expose it as a utility to add via
   Element ▸ Advanced ▸ General ▸ CSS Class. */
.tt-display {
  font-family: var(--tt-font-head);
  font-size: var(--tt-fs-hero);
  line-height: var(--tt-lh-tight);
  letter-spacing: -.02em;
  text-transform: uppercase;
  font-weight: 800;
  margin: 0 0 var(--tt-s-5);
}

/* Body copy */
body, .uk-base-body {
  font-size: var(--tt-fs-base);
  line-height: var(--tt-lh-body);
  color: var(--tt-ink);
  background: var(--tt-cream);
}

.uk-text-lead {
  font-family: var(--tt-font-body);
  font-size: var(--tt-fs-lead);
  line-height: 1.5;
  color: var(--tt-ink-soft);
  font-weight: 400;
}

.uk-text-meta, .uk-text-small { font-size: var(--tt-fs-sm); color: var(--tt-ink-soft); }

/* Constrain measure. UIkit's .uk-width-* is column based, not text based. */
.tt-measure, .uk-container-xsmall p { max-width: var(--tt-measure); }


/* ==========================================================================
   3. COLOUR
   UIkit exposes primary/secondary/muted "section" and "card" styles. Bind
   them to the palette so native elements inherit the brand automatically.

   REMINDER OF THE COLOUR RULES (from the design system):
     • Petal yellow #ECD15C is DECORATIVE ONLY — 1.44:1 on cream, fails even
       the 3:1 non-text threshold. Never text, never a meaningful button.
     • Olive #4E5A23 carries all functional meaning — 7.11:1 on cream.
     • #B8481F is reserved for donate actions and nothing else.
   ========================================================================== */

a, .uk-link, .uk-link-toggle .uk-link {
  color: var(--tt-olive-deep);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1.5px;
}
a:hover, .uk-link:hover { color: var(--tt-olive-darker); }

/* Section styles → our section grounds */
.uk-section-default            { background: var(--tt-cream); }
.uk-section-muted              { background: var(--tt-sand); }
.uk-section-primary            { background: var(--tt-olive-deep); }
.uk-section-secondary          { background: var(--tt-ink); }

/* --------------------------------------------------------------------------
   Anything on a dark ground must flip to cream ink.

   SPECIFICITY NOTE — this is the one place the bridge has to fight.
   UIkit writes these rules as:

       .uk-section-primary:not(.uk-preserve-color) h3  { color:#fff }

   The `:not(.uk-preserve-color)` contributes a class, giving (0,2,1). A plain
   `.uk-section-primary h3` is only (0,1,1) and silently loses, which is why
   headings came out pure #fff instead of cream. We therefore mirror UIkit's
   own `:not(.uk-preserve-color)` so we match at (0,2,1) and win on order.

   Keeping `:not(.uk-preserve-color)` also preserves the intended escape
   hatch: adding `uk-preserve-color` to a section still opts out of both
   UIkit's inversion and ours.
   -------------------------------------------------------------------------- */

.uk-section-primary:not(.uk-preserve-color),
.uk-section-secondary:not(.uk-preserve-color),
.uk-tile-primary:not(.uk-preserve-color),
.uk-tile-secondary:not(.uk-preserve-color),
.uk-light {
  color: rgba(251, 249, 245, .82);
}

.uk-section-primary:not(.uk-preserve-color) h1,
.uk-section-primary:not(.uk-preserve-color) h2,
.uk-section-primary:not(.uk-preserve-color) h3,
.uk-section-primary:not(.uk-preserve-color) h4,
.uk-section-primary:not(.uk-preserve-color) h5,
.uk-section-primary:not(.uk-preserve-color) h6,
.uk-section-secondary:not(.uk-preserve-color) h1,
.uk-section-secondary:not(.uk-preserve-color) h2,
.uk-section-secondary:not(.uk-preserve-color) h3,
.uk-section-secondary:not(.uk-preserve-color) h4,
.uk-section-secondary:not(.uk-preserve-color) h5,
.uk-section-secondary:not(.uk-preserve-color) h6,
.uk-tile-primary:not(.uk-preserve-color) h1,
.uk-tile-primary:not(.uk-preserve-color) h2,
.uk-tile-primary:not(.uk-preserve-color) h3,
.uk-tile-primary:not(.uk-preserve-color) h4,
.uk-light h1, .uk-light h2, .uk-light h3,
.uk-light h4, .uk-light h5, .uk-light h6,
.uk-card-primary.uk-card-body h1, .uk-card-primary.uk-card-body h2,
.uk-card-primary.uk-card-body h3, .uk-card-primary.uk-card-body h4,
.uk-offcanvas-bar h1, .uk-offcanvas-bar h2,
.uk-offcanvas-bar h3, .uk-offcanvas-bar h4 {
  color: var(--tt-cream);
}

/* Links on dark grounds go petal-light. Decorative-adjacent, but this is a
   link on a DARK ground, where petal-light measures 9.8:1 — comfortably AAA.
   The 1.44:1 failure only applies to petal on CREAM. */
.uk-section-primary:not(.uk-preserve-color) a:not(.uk-button),
.uk-section-primary:not(.uk-preserve-color) .uk-link,
.uk-section-secondary:not(.uk-preserve-color) a:not(.uk-button),
.uk-section-secondary:not(.uk-preserve-color) .uk-link,
.uk-tile-primary:not(.uk-preserve-color) a:not(.uk-button),
.uk-tile-secondary:not(.uk-preserve-color) a:not(.uk-button),
.uk-light a:not(.uk-button),
.uk-light .uk-link {
  color: var(--tt-petal-light);
}

.uk-section-primary:not(.uk-preserve-color) a:not(.uk-button):hover,
.uk-section-primary:not(.uk-preserve-color) .uk-link:hover,
.uk-section-secondary:not(.uk-preserve-color) a:not(.uk-button):hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-link:hover,
.uk-tile-primary:not(.uk-preserve-color) a:not(.uk-button):hover,
.uk-light a:not(.uk-button):hover,
.uk-light .uk-link:hover {
  color: var(--tt-petal-pale);
}

/* Tile/panel styles used inside sections */
.uk-tile-default { background: var(--tt-cream); }
.uk-tile-muted   { background: var(--tt-sand); }
.uk-tile-primary { background: var(--tt-olive-deep); }


/* ==========================================================================
   4. BUTTONS
   Match .tt-btn exactly: squared, 48px min height for touch, 600 weight,
   no text-decoration, olive default.
   ========================================================================== */

.uk-button {
  font-family: var(--tt-font-body);
  font-size: var(--tt-fs-base);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  min-height: 48px;                 /* WCAG 2.5.5 target size */
  padding: var(--tt-s-3) var(--tt-s-5);
  line-height: 1.3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tt-s-2);
  border: 2px solid transparent;
  transition: background var(--tt-dur) var(--tt-ease),
              border-color var(--tt-dur) var(--tt-ease),
              color var(--tt-dur) var(--tt-ease);
}

/* Primary = olive. The workhorse. */
.uk-button-primary {
  background: var(--tt-olive-deep);
  border-color: var(--tt-olive-deep);
  color: var(--tt-cream);
}
.uk-button-primary:hover, .uk-button-primary:focus {
  background: var(--tt-olive-darker);
  border-color: var(--tt-olive-darker);
  color: var(--tt-cream);
}

/* Secondary = outlined olive. */
.uk-button-secondary {
  background: transparent;
  border-color: var(--tt-olive-deep);
  color: var(--tt-olive-deep);
}
.uk-button-secondary:hover, .uk-button-secondary:focus {
  background: var(--tt-olive-deep);
  color: var(--tt-cream);
}

/* Danger is repurposed as DONATE — the one reserved colour.
   Use YOOtheme's "Danger" button style anywhere you need a donate action. */
.uk-button-danger {
  background: var(--tt-donate);
  border-color: var(--tt-donate);
  color: #fff;
}
.uk-button-danger:hover, .uk-button-danger:focus {
  background: var(--tt-donate-deep);
  border-color: var(--tt-donate-deep);
  color: #fff;
}

/* Default/text buttons */
.uk-button-default {
  background: transparent;
  border-color: var(--tt-line-strong);
  color: var(--tt-olive-deep);
}
.uk-button-default:hover { border-color: var(--tt-olive-deep); background: var(--tt-sand); }

.uk-button-text {
  min-height: 0;
  padding: 0;
  color: var(--tt-olive-deep);
  text-decoration: underline;
}
.uk-button-text::before { display: none; }   /* UIkit's underline pseudo */

/* On dark grounds, buttons invert to cream.
   Matching UIkit's `:not(.uk-preserve-color)` specificity, as above. */
.uk-light .uk-button-primary,
.uk-section-primary:not(.uk-preserve-color) .uk-button-primary,
.uk-section-secondary:not(.uk-preserve-color) .uk-button-primary,
.uk-tile-primary:not(.uk-preserve-color) .uk-button-primary {
  background: var(--tt-cream);
  border-color: var(--tt-cream);
  color: var(--tt-olive-darker);
}
.uk-light .uk-button-primary:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-button-primary:hover {
  background: #fff;
  border-color: #fff;
  color: var(--tt-olive-darker);
}

.uk-light .uk-button-secondary,
.uk-section-primary:not(.uk-preserve-color) .uk-button-secondary,
.uk-section-secondary:not(.uk-preserve-color) .uk-button-secondary,
.uk-tile-primary:not(.uk-preserve-color) .uk-button-secondary {
  background: transparent;
  border-color: rgba(251, 249, 245, .55);
  color: var(--tt-cream);
}
.uk-light .uk-button-secondary:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-button-secondary:hover {
  border-color: var(--tt-cream);
  background: rgba(251, 249, 245, .12);
  color: var(--tt-cream);
}

/* Sizes.
   NOTE ON SMALL BUTTONS: UIkit's default .uk-button-small is 30px tall.
   WCAG 2.5.5 (Target Size, AAA) asks for 44px, and 2.5.8 (AA, 2.2) asks for
   24px. A charity whose users are often exhausted carers on phones should
   clear the AAA bar, so the smallest button we ship is 44px. If a genuinely
   tiny control is ever needed, it must still have 44px of spacing around it. */
.uk-button-small {
  min-height: 44px;
  padding: var(--tt-s-2) var(--tt-s-4);
  font-size: var(--tt-fs-sm);
}
.uk-button-large {
  min-height: 56px;
  padding: var(--tt-s-4) var(--tt-s-7);
  font-size: var(--tt-fs-lead);
}

/* Buttons sitting inside the navbar are laid out by flex and can be squeezed
   below their min-height. Pin them. */
.uk-navbar-item .uk-button { min-height: 44px; }


/* ==========================================================================
   5. FOCUS VISIBILITY
   A 3px olive ring with a 2px offset, on everything focusable. This is a
   hard accessibility requirement, not a style preference — do not remove.
   On dark grounds the ring flips to petal so it stays visible.
   ========================================================================== */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.uk-button:focus-visible,
.uk-input:focus-visible, .uk-select:focus-visible, .uk-textarea:focus-visible,
.uk-accordion-title:focus-visible, .uk-navbar-nav > li > a:focus-visible {
  outline: 3px solid var(--tt-olive-deep) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

.uk-light :where(a, button, input, select, textarea, [tabindex]):focus-visible,
.uk-section-primary :where(a, button):focus-visible,
.uk-section-secondary :where(a, button):focus-visible {
  outline-color: var(--tt-petal-light) !important;
}

/* UIkit removes outlines on some elements via box-shadow. Undo that. */
.uk-input:focus, .uk-select:focus, .uk-textarea:focus {
  border-color: var(--tt-olive-deep);
  background-color: #fff;
}


/* ==========================================================================
   6. FORM CONTROLS
   Squared, 2px line, generous height. Matches .tt-input.
   ========================================================================== */

.uk-input, .uk-select, .uk-textarea {
  font-family: var(--tt-font-body);
  font-size: var(--tt-fs-base);
  color: var(--tt-ink);
  background: #fff;
  border: 2px solid var(--tt-line-strong);
  padding: var(--tt-s-3) var(--tt-s-4);
  min-height: 48px;
  width: 100%;
  transition: border-color var(--tt-dur) var(--tt-ease);
}
.uk-textarea { min-height: 140px; padding-top: var(--tt-s-3); }
.uk-input::placeholder, .uk-textarea::placeholder { color: #8A8577; }

.uk-form-label {
  font-family: var(--tt-font-body);
  font-size: var(--tt-fs-sm);
  font-weight: 600;
  color: var(--tt-ink);
  display: block;
  margin-bottom: var(--tt-s-2);
}

/* Checkbox / radio: 24px squares, olive when checked. */
.uk-checkbox, .uk-radio {
  width: 24px; height: 24px;
  border: 2px solid var(--tt-line-strong);
  background-color: #fff;
  margin-top: -.25em;
}
.uk-radio { border-radius: 50% !important; }
.uk-checkbox:checked, .uk-radio:checked,
.uk-checkbox:indeterminate {
  background-color: var(--tt-olive-deep);
  border-color: var(--tt-olive-deep);
}

/* Required-field asterisk in olive, never red-on-cream (too low contrast). */
.uk-form-label .required, abbr[title="required"] {
  color: var(--tt-olive-deep);
  text-decoration: none;
  border: 0;
}


/* ==========================================================================
   7. CARDS
   The prototype card is a squared block with a 2px bottom-weighted line and
   an olive hover. UIkit cards have padding + shadow by default.
   ========================================================================== */

.uk-card { transition: transform var(--tt-dur) var(--tt-ease), border-color var(--tt-dur) var(--tt-ease); }
.uk-card-default {
  background: #fff;
  border: 1px solid var(--tt-line);
  box-shadow: none;
}
.uk-card-default:hover { border-color: var(--tt-olive-deep); }
.uk-card-muted   { background: var(--tt-sand); border: 1px solid var(--tt-line); }
.uk-card-primary { background: var(--tt-olive-deep); color: var(--tt-cream); }

.uk-card-title {
  font-size: var(--tt-fs-h3);
  margin-bottom: var(--tt-s-3);
}
.uk-card-body { padding: var(--tt-s-6); }
.uk-card-small .uk-card-body { padding: var(--tt-s-5); }

/* Link-wrapped cards must not inherit the underline. */
a.uk-card, .uk-card a.uk-link-reset { text-decoration: none; }


/* ==========================================================================
   8. ACCORDION  (native YOOtheme Accordion element)
   Matches .tt-accordion: rule-separated rows, olive title, chevron right.
   ========================================================================== */

.uk-accordion > li {
  border-top: 1px solid var(--tt-line);
  margin-top: 0;
  padding: 0;
}
.uk-accordion > li:last-child { border-bottom: 1px solid var(--tt-line); }
.uk-accordion > li.uk-open { background: var(--tt-sand); }

/* UIkit renders the title as an <a>, so it inherits our global link
   underline. Strip it — an accordion header is a control, not a link. */
.uk-accordion-title {
  font-size: var(--tt-fs-h4);
  font-weight: 700;
  color: var(--tt-olive-darker);
  text-decoration: none;
  padding: var(--tt-s-5) var(--tt-s-5) var(--tt-s-5) var(--tt-s-5);
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: var(--tt-s-4);
}
.uk-accordion-title:hover { color: var(--tt-olive-deep); text-decoration: none; }

/* UIkit's open/closed marker is a ::before pseudo, which flex places first
   and therefore on the LEFT. The prototype puts it on the right, so push it
   there with order + auto margin rather than restructuring the markup. */
.uk-accordion-title::before {
  order: 2;
  margin-left: auto;
  margin-right: 0;
  flex: 0 0 auto;
}

.uk-open > .uk-accordion-title { color: var(--tt-olive-deep); }

.uk-accordion-content {
  margin-top: 0;
  padding: 0 var(--tt-s-5) var(--tt-s-5);
  color: var(--tt-ink-soft);
  max-width: var(--tt-measure);
}


/* ==========================================================================
   9. NAVBAR / HEADER
   The prototype header is an olive bar, cream logo, cream nav, uppercase
   small caps nav labels, with a donate button at the right.
   ========================================================================== */

.uk-navbar-container:not(.uk-navbar-transparent) { background: var(--tt-olive-deep); }

.uk-navbar-nav > li > a,
.uk-navbar-item, .uk-navbar-toggle {
  font-family: var(--tt-font-body);
  font-size: var(--tt-fs-sm);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(251, 249, 245, .88);
  text-decoration: none;
  min-height: 56px;
  padding: 0 var(--tt-s-4);
}
.uk-navbar-nav > li > a:hover,
.uk-navbar-nav > li > a:focus,
.uk-navbar-nav > li.uk-active > a {
  color: var(--tt-cream);
  background: rgba(0, 0, 0, .14);
}

/* Current page marker — a petal underline. Decorative use of petal is fine. */
.uk-navbar-nav > li.uk-active > a {
  box-shadow: inset 0 -4px 0 0 var(--tt-petal);
}

.uk-logo img { max-height: 56px; width: auto; }

/* Dropdowns */
.uk-navbar-dropdown {
  background: var(--tt-cream);
  border: 1px solid var(--tt-line);
  box-shadow: var(--tt-shadow-lg);
  padding: var(--tt-s-4);
}
.uk-navbar-dropdown-nav > li > a { color: var(--tt-olive-deep); text-transform: none; letter-spacing: 0; }

/* Mobile off-canvas */
.uk-offcanvas-bar { background: var(--tt-olive-darker); padding: var(--tt-s-6); }
.uk-offcanvas-bar .uk-nav > li > a {
  color: var(--tt-cream);
  font-size: var(--tt-fs-lead);
  font-weight: 600;
  padding: var(--tt-s-3) 0;
  min-height: 48px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(251, 249, 245, .16);
}


/* ==========================================================================
   10. ARROW LINKS
   Maggie's-style "read more →" using a CSS mask so the glyph takes
   currentColor. Add class `tt-arrow-link` to any YOOtheme Link or Button.
   ========================================================================== */

.tt-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--tt-s-2);
  font-weight: 600;
  text-decoration: none;
  color: var(--tt-olive-deep);
}
.tt-arrow-link::after {
  content: "";
  width: 1.1em;
  height: 1.1em;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--tt-arrow-mask) no-repeat center / contain;
          mask: var(--tt-arrow-mask) no-repeat center / contain;
  transition: transform var(--tt-dur) var(--tt-ease);
}
.tt-arrow-link:hover { text-decoration: underline; }
.tt-arrow-link:hover::after { transform: translateX(4px); }

:root {
  --tt-arrow-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='square'/%3E%3C/svg%3E");
}


/* ==========================================================================
   11. OVERLAPPING ACTION CARDS
   On the home page the three action cards ride up over the hero. In YOOtheme
   this is a Section with the class below, which pulls the row up and adds
   the matching bottom padding so nothing collides.
   ========================================================================== */

.tt-overlap-up { position: relative; z-index: 2; margin-top: clamp(-6rem, -6vw, -2.5rem); }

@media (max-width: 639px) {
  .tt-overlap-up { margin-top: 0; }   /* stack cleanly on phones */
}


/* ==========================================================================
   12. STATISTIC FIGURES
   Oversized numerals, tabular so they do not jitter while counting up.
   ========================================================================== */

.tt-figure {
  font-family: var(--tt-font-head);
  font-size: var(--tt-fs-stat);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  display: block;
  color: var(--tt-cream);
}
.uk-section-default .tt-figure,
.uk-section-muted .tt-figure { color: var(--tt-olive-deep); }


/* ==========================================================================
   13. SUNDRIES
   ========================================================================== */

/* Skip link — must be first focusable element in the DOM. */
.tt-skip {
  position: absolute;
  left: var(--tt-s-4);
  top: var(--tt-s-4);
  z-index: 1000;
  transform: translateY(-200%);
  background: var(--tt-olive-darker);
  color: var(--tt-cream);
  padding: var(--tt-s-3) var(--tt-s-5);
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--tt-dur) var(--tt-ease);
}
.tt-skip:focus { transform: translateY(0); color: var(--tt-cream); }

/* UIkit's dotted divider → our solid rule. */
.uk-hr, hr { border-top: 1px solid var(--tt-line); }

/* Blockquote / testimonial */
blockquote, .uk-blockquote {
  font-family: var(--tt-font-head);
  font-size: var(--tt-fs-lead);
  font-style: normal;
  font-weight: 600;
  line-height: 1.4;
  color: var(--tt-olive-darker);
  border-left: 4px solid var(--tt-petal);
  padding-left: var(--tt-s-5);
  margin: 0;
}
blockquote footer, .uk-blockquote footer {
  font-family: var(--tt-font-body);
  font-size: var(--tt-fs-sm);
  font-weight: 400;
  color: var(--tt-ink-soft);
  margin-top: var(--tt-s-4);
}
blockquote footer::before { content: none; }

/* Lists with the flower-head bullet. Add class to any YOOtheme Text element. */
.tt-flower-list { list-style: none; padding-left: 0; }
.tt-flower-list > li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: var(--tt-s-3);
}
.tt-flower-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: 1.1rem;
  height: 1.1rem;
  background: var(--tt-flower-bullet, none) no-repeat center / contain;
}

/* Screen-reader-only text */
.tt-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Tables (used on the transparency page for accounts/policies) */
.uk-table th {
  font-family: var(--tt-font-head);
  font-size: var(--tt-fs-sm);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tt-olive-darker);
  border-bottom: 2px solid var(--tt-olive-deep);
}
.uk-table td { border-bottom: 1px solid var(--tt-line); }
.uk-table-striped tbody tr:nth-of-type(odd) { background: var(--tt-sand); }

/* Pagination (news archive) */
.uk-pagination > li > a { color: var(--tt-olive-deep); min-width: 48px; min-height: 48px; display: flex; align-items: center; justify-content: center; }
.uk-pagination > .uk-active > * { background: var(--tt-olive-deep); color: var(--tt-cream); }


/* --------------------------------------------------------------------------
   Badges, labels, progress and alerts.

   These UIkit components default to a blue (#1e87f0) that has nothing to do
   with this brand, and they turn up unannounced inside things like YOOtheme's
   post meta and form validation. Recolour them all to the palette so no blue
   can ever leak onto the page.
   -------------------------------------------------------------------------- */

.uk-badge {
  background: var(--tt-olive-deep);
  color: var(--tt-cream);
  min-width: 24px;
  height: 24px;
  font-family: var(--tt-font-body);
  font-weight: 700;
  font-size: var(--tt-fs-xs);
}

.uk-label {
  background: var(--tt-olive-deep);
  color: var(--tt-cream);
  font-family: var(--tt-font-body);
  font-size: var(--tt-fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 4px 10px;
}
.uk-label-success { background: var(--tt-olive); }
.uk-label-warning { background: var(--tt-donate); }
.uk-label-danger  { background: var(--tt-donate-deep); }

.uk-progress { background: var(--tt-line); height: 12px; }
.uk-progress::-webkit-progress-bar   { background: var(--tt-line); }
.uk-progress::-webkit-progress-value { background: var(--tt-olive-deep); }
.uk-progress::-moz-progress-bar      { background: var(--tt-olive-deep); }

.uk-alert {
  background: var(--tt-sand);
  color: var(--tt-ink);
  border-left: 4px solid var(--tt-olive-deep);
  padding: var(--tt-s-5) var(--tt-s-6);
}
.uk-alert-primary { background: var(--tt-sand);   border-left-color: var(--tt-olive-deep); }
.uk-alert-success { background: #EEF2E0;          border-left-color: var(--tt-olive); }
.uk-alert-warning { background: #FBF0E8;          border-left-color: var(--tt-donate); }
.uk-alert-danger  { background: #FBEAE4;          border-left-color: var(--tt-donate-deep); }
.uk-alert h1, .uk-alert h2, .uk-alert h3, .uk-alert h4 { color: var(--tt-olive-darker); }

/* Anything still reaching for UIkit's default blue. */
.uk-text-primary  { color: var(--tt-olive-deep) !important; }
.uk-text-success  { color: var(--tt-olive) !important; }
.uk-text-warning  { color: var(--tt-donate) !important; }
.uk-text-danger   { color: var(--tt-donate-deep) !important; }
.uk-background-primary { background-color: var(--tt-olive-deep) !important; }
.uk-dotnav > .uk-active > * { background: var(--tt-olive-deep); border-color: var(--tt-olive-deep); }
.uk-slidenav { color: var(--tt-olive-deep); }
.uk-totop { color: var(--tt-olive-deep); }

/* Reduced motion — belt and braces over UIkit's own animations. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Print: strip navigation and dark grounds, keep the content readable. */
@media print {
  .uk-navbar-container, .uk-offcanvas-bar, .tt-donate-band,
  .uk-sticky, .tt-skip, .uk-totop { display: none !important; }
  .uk-section-primary, .uk-section-secondary, .uk-light {
    background: #fff !important;
    color: #000 !important;
  }
  .uk-section-primary *, .uk-section-secondary *, .uk-light * { color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
}