/* =========================================================================
 * Tina's Trust — YOOtheme Style override
 *
 * WHY THIS FILE EXISTS
 *
 * YOOtheme Pro compiles the settings from its Style panel into
 * css/theme.N.css and prints that file with a plain <link> tag late in
 * <head> — after everything WordPress enqueues, including our stylesheets.
 *
 * That creates two problems our design system cannot win on its own:
 *
 *   1. DOCUMENT ORDER. theme.N.css loads after design-system.css, so for
 *      rules of equal specificity YOOtheme wins by virtue of being later.
 *
 *   2. SPECIFICITY. YOOtheme groups element selectors with UIkit classes:
 *
 *        .uk-h1,.uk-h2,…,h1,h2,h3,h4,h5,h6 { font-family:'PT Serif' }
 *
 *      That is (0,1,1). Our equivalent is a bare h1,h2,… at (0,0,1), so
 *      YOOtheme wins even when it loads first.
 *
 * The result on a fresh install carrying a YOOtheme starter style: headings
 * render in PT Serif or Playfair Display instead of Archivo, in near-black
 * grey instead of olive. The brand fonts load correctly and are simply
 * outranked — which looks, from the front end, like nothing was applied.
 *
 * This file is printed AFTER theme.N.css and mirrors YOOtheme's own
 * specificity, so the brand wins on document order without !important.
 * Deliberate overrides in custom.css still work, because custom.css is
 * loaded after this file.
 *
 * DO NOT add layout or component rules here. Those belong in
 * design-system.css. This file exists solely to reclaim the global
 * typography and colour that YOOtheme's compiled Style file takes over.
 * ========================================================================= */


/* --- Document ---------------------------------------------------------- */

/* YOOtheme sets html { font-family:'PT Serif'; background:#fff; color:#6c6d74 }.
   Reclaim all three at the root so anything inheriting gets brand values. */
html {
  font-family: var(--tt-font-body);
  font-size: 100%;
  background: var(--tt-cream);
  color: var(--tt-ink);
}

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


/* --- Headings ---------------------------------------------------------- */

/* Matches YOOtheme's grouped selector exactly, so specificity ties and we
   win on order. Keep the selector list in sync if YOOtheme adds sizes. */
.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,
h1, h2, h3, h4, h5, h6 {
  font-family: var(--tt-font-head);
  font-weight: 700;
  color: var(--tt-olive-darker);
  line-height: var(--tt-lh-head);
  letter-spacing: -.015em;
  text-transform: none;
  margin: 0 0 var(--tt-s-4);
}

/* Per-level sizes. YOOtheme sets these individually (.uk-h1,h1 etc.), so
   each level needs an equally specific counterpart. */
.uk-h1, h1 { font-size: var(--tt-fs-h1); line-height: var(--tt-lh-tight); }
.uk-h2, h2 { font-size: var(--tt-fs-h2); }
.uk-h3, h3 { font-size: var(--tt-fs-h3); }
.uk-h4, h4 { font-size: var(--tt-fs-h4); letter-spacing: 0; }
.uk-h5, h5 { font-size: var(--tt-fs-h5, 1rem); text-transform: none; letter-spacing: 0; }
.uk-h6, h6 { font-size: var(--tt-fs-h6, .9375rem); text-transform: none; letter-spacing: 0; }

/* YOOtheme's display sizes map onto our hero scale. */
.uk-heading-small   { font-size: var(--tt-fs-h2); }
.uk-heading-medium  { font-size: var(--tt-fs-h1); }
.uk-heading-large,
.uk-heading-xlarge,
.uk-heading-2xlarge,
.uk-heading-3xlarge { font-size: var(--tt-fs-hero); line-height: var(--tt-lh-tight); }


/* --- Small caps furniture ---------------------------------------------- */

/* YOOtheme's starter styles put Montserrat uppercase with wide tracking on
   these. Ours are quieter and use the brand face. */
.uk-form-label,
.uk-description-list > dt,
blockquote footer,
.uk-article-meta {
  font-family: var(--tt-font-body);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--tt-ink-soft);
}

blockquote,
.uk-blockquote {
  font-family: var(--tt-font-head);
  color: var(--tt-olive-darker);
  font-style: normal;
}


/* --- Links ------------------------------------------------------------- */

a,
.uk-link {
  font-family: inherit;
  color: var(--tt-olive-deep);
}

a:hover,
.uk-link:hover {
  color: var(--tt-olive-darker);
}


/* --- Body copy --------------------------------------------------------- */

p, li, dd, td, th, figcaption, label, input, select, textarea, button {
  font-family: var(--tt-font-body);
}

/* =========================================================================
 * COMPONENT TITLES AND UIKIT FONT UTILITIES
 *
 * The heading rules above only cover h1-h6 and .uk-hN / .uk-heading-*.
 * YOOtheme also sets its Style fonts on a family of single-class selectors,
 * and a class at (0,1,0) beats a bare element at (0,0,1) - so a post title
 * marked up as <h2 class="uk-article-title"> keeps YOOtheme's serif even
 * though our h2 rule is present and loading.
 *
 * That is exactly what happened on the default "Hello world!" post: the
 * sidebar widget headings turned olive Archivo correctly while the article
 * title stayed Playfair Display.
 *
 * Each selector below mirrors YOOtheme's own, so specificity ties and we win
 * on document order. Sizes are deliberately NOT restated except where the
 * brand scale differs, so YOOtheme's responsive sizing still applies.
 * ========================================================================= */

/* --- Article and component titles ------------------------------------- */

.uk-article-title,
.uk-modal-title,
.uk-card-title,
.uk-comment-title,
.uk-accordion-title,
.tm-section-title {
  font-family: var(--tt-font-head);
  font-weight: 700;
  letter-spacing: -.015em;
  text-transform: none;
}

.uk-article-title {
  font-size: var(--tt-fs-h1);
  line-height: var(--tt-lh-tight);
  color: var(--tt-olive-darker);
}

.uk-card-title,
.uk-comment-title,
.uk-accordion-title {
  font-size: var(--tt-fs-h3);
  color: var(--tt-olive-darker);
}

.uk-modal-title {
  font-size: var(--tt-fs-h2);
  color: var(--tt-olive-darker);
}


/* --- Lead paragraph ---------------------------------------------------- */

/* YOOtheme makes this a serif display line. Ours is body font, softly inked. */
.uk-text-lead {
  font-family: var(--tt-font-body);
  font-size: var(--tt-fs-lead, 1.1875rem);
  line-height: 1.5;
  color: var(--tt-ink-soft);
  font-weight: 400;
}


/* --- Meta furniture --------------------------------------------------- */

/* YOOtheme sets 11px Montserrat here, which is below our minimum readable
   size for carers reading on a phone. Keep the brand face and a usable size. */
.uk-article-meta,
.uk-comment-meta,
.uk-text-meta {
  font-family: var(--tt-font-body);
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--tt-ink-soft);
  text-transform: none;
  letter-spacing: 0;
}


/* --- Navigation and chrome -------------------------------------------- */

.uk-logo {
  font-family: var(--tt-font-head);
  font-weight: 800;
  letter-spacing: -.02em;
  text-transform: none;
}

.uk-nav-default,
.uk-nav-secondary,
.uk-nav-primary,
.uk-dropdown-nav,
.uk-navbar-dropdown-nav,
.uk-navbar-item,
.uk-navbar-toggle {
  font-family: var(--tt-font-body);
  text-transform: none;
  letter-spacing: 0;
}

/* 11px navigation is too small to tap reliably. Bring it to a usable size
   without changing YOOtheme's layout. */
.uk-nav-default,
.uk-nav-secondary,
.uk-dropdown-nav,
.uk-navbar-dropdown-nav {
  font-size: 1rem;
  line-height: 1.5;
}

.uk-nav-primary {
  font-family: var(--tt-font-head);
  font-size: var(--tt-fs-h3);
  font-weight: 700;
}


/* --- Buttons, labels, badges ------------------------------------------ */

.uk-button,
.uk-label,
.uk-badge,
.uk-card-badge,
.uk-form-label {
  font-family: var(--tt-font-body);
  text-transform: none;
  letter-spacing: 0;
}


/* --- UIkit font utilities --------------------------------------------- */

/*
 * These are exposed in the YOOtheme builder as Font: Default / Primary /
 * Secondary. Remap them onto the brand so choosing any of them in the UI
 * still produces a brand face rather than PT Serif or Montserrat.
 */
.uk-font-default   { font-family: var(--tt-font-body); }
.uk-font-primary   { font-family: var(--tt-font-head); }
.uk-font-secondary { font-family: var(--tt-font-body); }


/* =========================================================================
 * SECTION, TILE AND CARD COLOUR
 *
 * The typography reclaim above was only half the job. YOOtheme's compiled
 * theme.N.css also sets the background of every section style:
 *
 *   .uk-section-default { background:#fff  }
 *   .uk-section-muted   { background:#f7f7f7 }
 *   .uk-section-primary { background:#303033 }
 *
 * yootheme-bridge.css maps those same three onto the brand palette, but the
 * bridge is enqueued through WordPress and theme.N.css is printed as a raw
 * <link> afterwards. Equal specificity, later in the document - YOOtheme wins.
 *
 * The visible result is a site in white, #f7f7f7 grey and near-black, with
 * the olive and petal yellow present in the stylesheet but never reaching
 * the page. That is not a missing palette; it is an outranked one.
 *
 * Restated here, after theme.N.css, so the brand backgrounds actually land.
 * --uk-inverse is set alongside each so UIkit's own light/dark text logic
 * follows the real background rather than the one YOOtheme assumed.
 * ========================================================================= */

.uk-section-default { --uk-inverse: dark;  background: var(--tt-cream); }
.uk-section-muted   { --uk-inverse: dark;  background: var(--tt-sand); }
.uk-section-primary { --uk-inverse: light; background: var(--tt-olive-deep); }
.uk-section-secondary { --uk-inverse: light; background: var(--tt-ink); }

.uk-tile-default   { --uk-inverse: dark;  background-color: var(--tt-cream); }
.uk-tile-muted     { --uk-inverse: dark;  background-color: var(--tt-sand); }
.uk-tile-primary   { --uk-inverse: light; background-color: var(--tt-olive-deep); }
.uk-tile-secondary { --uk-inverse: light; background-color: var(--tt-ink); }

/* Cards carry YOOtheme's own border and body colour too, so restate all three. */
.uk-card-default {
  --uk-inverse: dark;
  background-color: #fff;
  color: var(--tt-ink);
  border: 1px solid var(--tt-line);
}
.uk-card-primary   { --uk-inverse: light; background-color: var(--tt-olive-deep); color: #fff; }
.uk-card-secondary { --uk-inverse: light; background-color: var(--tt-ink); color: #fff; }


/* --- Petal yellow, reclaimed ------------------------------------------ */

/*
 * The yellow is the part of the logo people actually remember, and on a
 * white-and-grey page it had disappeared entirely. These are the places the
 * prototype used it. Kept deliberately sparing: accent, not decoration.
 */

/* Eyebrow labels above each section heading. */
.tt-eyebrow {
  color: var(--tt-olive);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .8125rem;
}
.uk-section-primary .tt-eyebrow,
.uk-section-secondary .tt-eyebrow,
.uk-light .tt-eyebrow { color: var(--tt-petal); }

/* Heading underscore - the prototype's signature mark. */
.uk-section-default h2::after,
.uk-section-muted h2::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 4px;
  margin-top: var(--tt-s-3, .75rem);
  background: var(--tt-petal);
}
/* Not on headings that are already inside a card, panel or accordion. */
.uk-card h2::after,
.uk-panel h2::after,
.uk-accordion h2::after,
.uk-tile h2::after { display: none; }

/* Active navigation item. */
.uk-navbar-nav > li.uk-active > a,
.uk-navbar-nav > li.current-menu-item > a {
  color: var(--tt-olive-darker);
  box-shadow: inset 0 -4px 0 0 var(--tt-petal);
  /* YOOtheme washes the active item with rgba(0,0,0,.14); the petal
     underline is our active marker, so clear the grey box. */
  background-color: transparent;
}

/* Primary button: olive with a petal lift on hover. */
.uk-button-primary {
  background-color: var(--tt-olive-deep);
  color: #fff;
  border: 2px solid var(--tt-olive-deep);
}
.uk-button-primary:hover,
.uk-button-primary:focus {
  background-color: var(--tt-petal);
  border-color: var(--tt-petal);
  color: var(--tt-olive-darker);
}

/* Accordion and pull quote accents. */
.uk-accordion-title { border-left: 4px solid var(--tt-petal); padding-left: var(--tt-s-4, 1rem); }
.uk-blockquote, blockquote { border-left: 4px solid var(--tt-petal); padding-left: var(--tt-s-5, 1.25rem); }


/* --- Logo sizing ------------------------------------------------------- */

/*
 * yootheme-bridge.css caps .uk-logo img at 56px, which suited the earlier
 * wide wordmark. The stacked mark is nearly square (760x617), so at 56px tall
 * the words "Tina's Trust" become unreadable. Give it room, and let the
 * mobile flower stay compact.
 */
.tm-header .uk-logo img { max-height: 72px; width: auto; }
.tm-header-mobile .uk-logo img { max-height: 44px; width: auto; }

/*
 * Navigation labels were breaking mid-item ("ABOUT / US") because each <a>
 * is only as wide as its flex basis allows. There is ample room on the row -
 * the items total ~870px inside a 1112px navbar - so simply forbid the wrap.
 */
.tm-header .uk-navbar-nav > li > a { white-space: nowrap; }

/* The enlarged logo sits flush against the first nav item. Give it room. */
.tm-header .uk-logo { margin-right: var(--tt-s-6, 2rem); }

/* ---------------------------------------------------------------
   Logo shrink fix
   The nine `white-space:nowrap` nav items above make the navbar
   demand more width than is available at 1280-1440px. UIkit gives
   .uk-logo flex-shrink:1, so the logo was the element that gave way,
   collapsing from 88px to ~44px. Pin it open.
   --------------------------------------------------------------- */
.tm-header .uk-navbar-left { flex-shrink: 0; }
.tm-header .uk-logo { flex-shrink: 0; }
.tm-header .uk-logo img { flex-shrink: 0; width: auto; max-height: 72px; object-fit: contain; }
.tm-header .uk-navbar-right { min-width: 0; }