/* ==========================================================================
   abvservices.co.uk — design + accessibility fixes (Newspaper Lite child theme)
   gogo-impeccable · typeset + colorize + harden · 2026-10-29
   Paste into: Appearance → Theme File Editor → child theme style.css
   (or Customizer → Additional CSS). No layout rebuild — refinement only.
   ========================================================================== */

/* NB: theme sets html{font-size:62.5%} → 1rem = 10px. Use px here. */

/* 1. TOKENS ---------------------------------------------------------------- */
:root {
  --abv-font: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --abv-ink: #1f2430;          /* body text — 15.2:1 on white */
  --abv-ink-2: #4b5260;        /* meta/excerpts — 7.6:1 on white */
  --abv-paper: #ffffff;
  --abv-paper-2: #f6f6f4;
  --abv-accent: #c8102e;       /* brand red, darkened: white text 5.9:1 (was #ff0033 = 3.96:1, fails AA) */
  --abv-accent-ink: #ffffff;
  --abv-focus: #0b57d0;        /* focus ring — 6.9:1 on white, 3:1+ on red/navy */
  --abv-nav: #2b2f3a;
  --abv-radius: 4px;
  --abv-ease: cubic-bezier(.23, 1, .32, 1);
}

/* 2. ONE FONT THAT HAS CYRILLIC ------------------------------------------- */
/* Poppins is loaded with the latin subset only → every Cyrillic word falls
   back to Times while digits/Latin stay in Poppins (mixed fonts in one line). */
body, button, input, select, textarea,
.site-title, .site-description, .main-navigation a,
h1, h2, h3, h4, h5, h6, .entry-title, .widget-title, .cat-links a {
  font-family: var(--abv-font) !important;
}

/* 3. READABLE BODY --------------------------------------------------------- */
body {
  font-size: 17px;        /* 17px (was 14px) */
  line-height: 1.6;
  color: var(--abv-ink);
  -webkit-text-size-adjust: 100%;
}
.entry-content, .post-content, .entry-summary, .np-post-excerpt, .widget p,
.post-content-wrapper, .post-content-wrapper p {
  color: var(--abv-ink-2);
  font-size: 15px !important;   /* theme sets 10–12px on home-page blocks */
  line-height: 1.6 !important;
  max-width: 68ch;
}
.entry-title, .post-title, h3.np-post-title, .np-post-title {
  font-size: clamp(18px, 16px + .5vw, 21px) !important;  /* was 26px mobile / 15px desktop */
  line-height: 1.3;
  font-weight: 600;
  text-wrap: balance;
  color: var(--abv-ink);
}
.site-title { font-weight: 700; letter-spacing: -.01em; }
.site-title a { color: var(--abv-accent); }

/* 3b. Home-page blocks have fixed heights that clip longer text → let them grow */
.block-posts-wrapper .single-post-wrapper,
.block-posts-wrapper .post-content-wrapper {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
.block-posts-wrapper .single-post-wrapper { margin-bottom: 24px; }
.block-posts-wrapper .post-title a { font-size: 18px !important; line-height: 1.35; }

/* Keep header/nav at theme scale (body bump must not inflate them) */
.main-navigation a { font-size: 14px !important; }
.site-description { font-size: 14px !important; }

/* 4. CATEGORY TAGS — contrast + target size -------------------------------- */
.cat-links a, .np-post-meta .cat-links a, .category-button a, .post-cat-list a {
  background: var(--abv-accent) !important;
  color: var(--abv-accent-ink) !important;
  font-size: 13px !important;  /* 13px (was 12px) */
  line-height: 1;
  padding: 8px 10px;      /* ≈30px tall; tag strip gets 8px gap below */
  border-radius: var(--abv-radius);
  display: inline-block;
  margin: 0 6px 8px 0;
}

/* 5. TAP TARGETS (WCAG 2.5.8 ≥24px, aim 44px on primary links) ------------- */
.entry-title a, .post-title a, .np-post-title a, .widget li a, .main-navigation a {
  display: inline-block;
  padding-block: 6px;
}
@media (max-width: 768px) {
  .main-navigation a, .menu-toggle, .np-home-icon a, .search-main a { min-height: 44px; min-width: 44px; }
}

/* 6. FOCUS — theme removes outlines on :focus in 4 rules ------------------ */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--abv-focus) !important;
  outline-offset: 2px !important;
  border-radius: 2px;
}
.main-navigation a:focus-visible, .cat-links a:focus-visible {
  outline-color: #ffffff !important;      /* on navy/red backgrounds */
  box-shadow: 0 0 0 5px var(--abv-focus);
}

/* 7. PHONE LINKS (added by functions.php) ---------------------------------- */
a.abv-tel {
  color: var(--abv-accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* 8. HERO IMAGE WITH BAKED-IN TEXT — hide on mobile, it pushes listings down */
@media (max-width: 768px) {
  .np-block-fullwidth .np-single-post .np-post-thumb img[src*="abv-london-compress"] { display: none; }
}

/* 9. BROWSER SURFACES ------------------------------------------------------ */
::selection { background: var(--abv-accent); color: #fff; }
input, textarea { caret-color: var(--abv-accent); }

/* 10. MOTION ---------------------------------------------------------------- */
a, button { transition: color .15s var(--abv-ease), background-color .15s var(--abv-ease); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* 11. OVERFLOW GUARD (long postcodes / phone strings like "SW15,SW4,SW11…") */
.entry-content, .np-post-excerpt, .entry-title, .post-title, .post-content-wrapper { overflow-wrap: anywhere; min-width: 0; }
html, body { overflow-x: clip; }