/*
Theme Name: HPCI 2026
Theme URI: https://hertsparentcarers.org.uk/
Author: Herts Parent Carer Involvement
Description: Accessible, mobile-first block theme for Herts Parent Carer Involvement (HPCI). Carries the HPCI pink/green/cream brand forward with WCAG 2.2 AA contrast, self-hosted Atkinson Hyperlegible + Fraunces fonts, and block-editable patterns. A modern replacement for the legacy hertsparentcarer-ng theme.
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
Version: 1.6.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hpci
Tags: full-site-editing, block-patterns, accessibility-ready, custom-colors, custom-menu, blog
*/

/*
 * Most styling lives in theme.json (the source of truth for colours, type and layout).
 * This file holds only the few things theme.json can't express yet.
 */

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Visible, high-contrast focus ring everywhere (WCAG 2.2 - 2.4.11/2.4.13) */
:where(a, button, input, select, textarea, summary, .wp-block-button__link):focus-visible {
  outline: 3px solid var(--wp--preset--color--pink);
  outline-offset: 3px;
}

/* Enable optical sizing + ligatures for the variable display font and
 * smoother subpixel rendering for both faces. */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
:where(h1,h2,h3,h4,h5,h6,.wp-block-post-title,.wp-block-site-title) {
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 36, "SOFT" 50;
  font-feature-settings: "ss01", "liga", "kern";
}

/* Card hover lift for the pattern cards */
.hpci-card {
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
  box-shadow: 0 4px 18px rgba(25,64,29,.07);
}
.hpci-card:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(25,64,29,.16); }

/* Animated hovers for buttons and nav links (subtle lift + colour fade) */
.wp-block-button__link {
  transition: transform .18s ease, box-shadow .18s ease,
              background-color .18s ease, color .18s ease, border-color .18s ease;
}
.wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(25,64,29,.18);
}
.wp-block-navigation a {
  transition: color .18s ease, background-color .18s ease;
}
.wp-block-navigation .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--pink-ink);
}
.hpci-utility a { transition: color .18s ease, opacity .18s ease; }

/* ------------------------------------------------------------------ *
 * Design polish
 * ------------------------------------------------------------------ */

/* Icon tiles on the quick-action cards */
.hpci-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 16px; color: #fff;
  box-shadow: 0 6px 16px rgba(25,64,29,.18);
}
.hpci-ic svg { width: 26px; height: 26px; }
.hpci-ic--pink { background: var(--wp--preset--color--pink-ink); }
.hpci-ic--green { background: var(--wp--preset--color--green); }
.hpci-ic--teal { background: var(--wp--preset--color--teal); }
.hpci-ic--gold { background: var(--wp--preset--color--gold); }

/* Short brand accent rule under major section headings */
.hpci-heading-accent { position: relative; }
.hpci-heading-accent::after {
  content: ""; display: block; width: 56px; height: 4px; border-radius: 999px;
  margin-top: .55rem; background: var(--wp--preset--color--pink);
}

/* Stats band: subtle dividers between the numbers */
@media (min-width: 782px) {
  .hpci-stats .wp-block-column + .wp-block-column { position: relative; }
  .hpci-stats .wp-block-column + .wp-block-column::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    height: 56px; width: 1px; background: rgba(255,255,255,.18);
  }
}

/* High-contrast adjustments for the new bits */
html[data-contrast="high"] .hpci-ic { background: #000 !important; box-shadow: none !important; }
html[data-contrast="high"] .hpci-heading-accent::after { background: #000; }

/* Make the header CTA buttons pill-shaped consistently */
.hpci-pill .wp-block-button__link { border-radius: 999px; }

/* ------------------------------------------------------------------ *
 * Header layout: logo on the left, nav + CTAs grouped on the right,
 * with a subtle shadow so the sticky header reads as a distinct
 * surface above the utility bar.
 * ------------------------------------------------------------------ */
.hpci-header {
  z-index: 50;
  box-shadow: 0 2px 10px rgba(25,64,29,.06);
}
.hpci-header > .alignwide { column-gap: 1.5rem; row-gap: .75rem; }
.hpci-header-right { column-gap: 1.5rem; row-gap: .75rem; margin-left: auto !important; }
.hpci-header .wp-block-navigation__container { gap: 1.4rem; column-gap: 1.4rem; }
.hpci-header .wp-block-site-logo { display: flex; align-items: center; }
.hpci-utility { position: relative; z-index: 51; }
.hpci-utility > .alignwide { column-gap: 1rem; row-gap: .5rem; }

/* ------------------------------------------------------------------ *
 * Utility-bar search: a slim pill, not a chunky input.
 * The default core search block adds 13.6px padding which dwarfs the
 * surrounding text + buttons.
 * ------------------------------------------------------------------ */
.hpci-utility .wp-block-search__inside-wrapper {
  height: 34px; padding: 0 4px; align-items: center;
}
.hpci-utility .wp-block-search__input {
  height: 28px; padding: 0 .6rem; font-size: .9rem;
  border: 0; background: transparent;
}
.hpci-utility .wp-block-search__button {
  height: 28px; padding: 0 .55rem; min-width: 32px;
  background: var(--wp--preset--color--green); color: #fff;
  border-radius: 999px; border: 0;
}
.hpci-utility .wp-block-search__button svg { width: 16px; height: 16px; fill: currentColor; }

/* ------------------------------------------------------------------ *
 * Banner alignment: keep the full-width bands (hero, stats, join cover)
 * vertically centred and balanced.
 * ------------------------------------------------------------------ */
/* Hero: vertically align the photo with the text block */
.wp-block-columns.are-vertically-aligned-center > .wp-block-column { align-self: center; }
.wp-block-columns.are-vertically-aligned-center .wp-block-image { margin: 0; }
.wp-block-columns.are-vertically-aligned-center .wp-block-image img {
  width: 100%; height: auto; display: block;
}

/* Stats band: equal column heights, dividers aligned to the numbers,
 * tabular numerals so the figures sit optically centred above their
 * captions (proportional digits + the comma in "1,270+" pull weight
 * to the left of the column otherwise). */
.hpci-stats .wp-block-columns { align-items: stretch; }
.hpci-stats .wp-block-column {
  display: flex; flex-direction: column; justify-content: center;
}
.hpci-stats h2 {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum", "lnum";
  letter-spacing: -.01em;
  margin-bottom: .35rem !important;
  line-height: 1;
}
.hpci-stats p { margin-top: 0 !important; }
@media (min-width: 782px) {
  .hpci-stats .wp-block-column + .wp-block-column::before { top: 50%; height: 64px; }
}

/* Join CTA cover: centre the inner content and tighten the button row */
.wp-block-cover.alignfull > .wp-block-cover__inner-container {
  max-width: var(--wp--style--global--content-size, 720px);
  margin-inline: auto;
}
.wp-block-cover .wp-block-buttons { justify-content: center; }

/* ------------------------------------------------------------------ *
 * Footer polish: tighten the link spacing inside the link columns
 * (each link is its own paragraph block, which inherits the 1.5rem
 * block gap and leaves yawning spaces between rows otherwise).
 * ------------------------------------------------------------------ */
footer.wp-block-template-part .wp-block-column p { margin: 0 0 .45rem; }
footer.wp-block-template-part .wp-block-column h2 { margin-bottom: .9rem; }
footer.wp-block-template-part .wp-block-column .wp-block-navigation__container {
  gap: .45rem;
}
footer.wp-block-template-part a { word-break: break-word; }

/* ------------------------------------------------------------------ *
 * Leave room at the bottom of the footer for the fixed cookie banner
 * while it's still on screen, so it never covers the legal links.
 * Extending the footer (not the body) keeps the green band continuous
 * — no cream gap appears under the footer. Cleared automatically when
 * the JS adds the [hidden] attribute on dismiss.
 * ------------------------------------------------------------------ */
body:has(#hpci-cookie:not([hidden])) footer.wp-block-template-part {
  padding-bottom: 7rem;
}
@media (max-width: 600px) {
  body:has(#hpci-cookie:not([hidden])) footer.wp-block-template-part {
    padding-bottom: 11rem;
  }
}

/* ------------------------------------------------------------------ *
 * Accessibility: skip link + screen-reader-text utility
 * (kept here so the theme doesn't rely on core injecting these styles)
 * ------------------------------------------------------------------ */
.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); -webkit-clip-path: inset(50%); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; padding: 0; overflow: hidden; position: absolute; word-wrap: normal !important;
}
.skip-link.screen-reader-text:focus {
  background: var(--wp--preset--color--green); color: #fff; clip: auto; -webkit-clip-path: none; clip-path: none;
  height: auto; width: auto; padding: 14px 22px; left: 8px; top: 8px; z-index: 100000;
  border-radius: 0 0 10px 10px; font-weight: 700; text-decoration: underline;
}

/* User-controlled text resize (set by the accessibility toolbar) */
html { font-size: calc(100% * var(--hpci-text-scale, 1)); }

/* ------------------------------------------------------------------ *
 * High-contrast mode, toggled by the toolbar, and also auto-applied
 * for users who ask their OS for more contrast. A real re-theme, not
 * an overlay: it remaps the design tokens to a maximum-contrast set.
 * ------------------------------------------------------------------ */
html[data-contrast="high"] {
  --wp--preset--color--cream: #ffffff;
  --wp--preset--color--white: #ffffff;
  --wp--preset--color--ink: #000000;
  --wp--preset--color--muted: #1a1a1a;
  --wp--preset--color--green: #00301a;
  --wp--preset--color--green-deep: #000000;
  --wp--preset--color--teal: #00301a;
  --wp--preset--color--pink: #7a0042;
  --wp--preset--color--pink-ink: #7a0042;
  --wp--preset--color--gold: #4d4300;
}
html[data-contrast="high"] body { background: #fff; color: #000; }
html[data-contrast="high"] a { text-decoration: underline; }
html[data-contrast="high"] .hpci-card,
html[data-contrast="high"] .wp-block-group.has-background {
  border: 2px solid #000 !important; box-shadow: none !important;
}
html[data-contrast="high"] .wp-block-button__link { border: 2px solid #000 !important; }
html[data-contrast="high"] :where(.has-hero-gradient-background,.has-join-gradient-background) {
  background: #fff !important;
}
/* Cards built on the gradients carry cream/white text; when the
 * gradient is flattened to white in high-contrast mode that text
 * goes invisible. Recolour only the running text — leave buttons
 * alone (they have their own dark background and want white text). */
html[data-contrast="high"]
  :where(.has-hero-gradient-background,.has-join-gradient-background)
  :where(h1,h2,h3,h4,h5,h6,p,li,a:not(.wp-block-button__link)) {
  color: #000 !important;
}

@media (prefers-contrast: more) {
  /* Strengthen borders/focus for users who request more contrast */
  .hpci-card { border: 1px solid var(--wp--preset--color--green); }
  :where(a):focus-visible { outline-width: 4px; }
}

/* ------------------------------------------------------------------ *
 * Accessibility toolbar (sits in the utility bar)
 * ------------------------------------------------------------------ */
/* Links on any dark-green surface (utility bar + footer) must be light for
   WCAG contrast. The global pink link colour fails on dark green. */
.hpci-utility a,
.has-green-deep-background-color a,
footer.wp-block-template-part a { color: #eaf3ea; }
.hpci-utility a:hover,
.has-green-deep-background-color a:hover,
footer.wp-block-template-part a:hover { color: #ffffff; }

/* Keep the utility-bar search compact (it was stretching too wide) */
.hpci-utility .wp-block-search { width: auto; }
.hpci-utility .wp-block-search__inside-wrapper { width: 220px; max-width: 42vw; }
.hpci-utility .wp-block-search__input { flex-grow: 1; width: auto; min-width: 0; }

/* Placeholder featured image fallback (matches the news/archive card thumbs) */
.hpci-fallback-thumb { margin: 0; }
.hpci-fallback-thumb img {
  display: block; width: 100%; height: 180px; object-fit: cover;
  border-radius: 18px 18px 0 0;
}

.hpci-toolbar { display: flex; gap: .25rem; align-items: center; }
.hpci-toolbar button {
  font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer;
  background: transparent; color: inherit; border: 1px solid currentColor;
  border-radius: 999px; padding: 3px 10px; line-height: 1.4;
}
.hpci-toolbar button[aria-pressed="true"] { background: var(--wp--preset--color--pink); color: #fff; border-color: var(--wp--preset--color--pink); }
.hpci-toolbar button:hover { background: rgba(255,255,255,.15); }

/* ------------------------------------------------------------------ *
 * Cookie notice
 * ------------------------------------------------------------------ */
#hpci-cookie {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 9999;
  max-width: 640px; margin-inline: auto; background: var(--wp--preset--color--green-deep);
  color: #eef6ee; padding: 1rem 1.25rem; border-radius: 14px; box-shadow: 0 18px 48px rgba(0,0,0,.35);
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; justify-content: space-between;
}
#hpci-cookie[hidden] { display: none; }
#hpci-cookie p { margin: 0; font-size: .95rem; flex: 1 1 280px; }
#hpci-cookie a { color: #ffd6ec; }
#hpci-cookie .hpci-cookie-actions { display: flex; gap: .5rem; }
#hpci-cookie button {
  font: inherit; font-weight: 700; cursor: pointer; border: 0; border-radius: 999px;
  padding: .6rem 1.1rem; background: var(--wp--preset--color--pink-ink); color: #fff;
}

/* ------------------------------------------------------------------ *
 * Accessible contact form
 * ------------------------------------------------------------------ */
.hpci-form p { margin: 0 0 1.1rem; }
.hpci-form label { display: block; font-weight: 700; color: var(--wp--preset--color--green); margin-bottom: .35rem; }
.hpci-form input, .hpci-form select, .hpci-form textarea {
  width: 100%; font: inherit; padding: .7rem .9rem; border-radius: 12px;
  border: 2px solid rgba(25,64,29,.25); background: #fff; color: var(--wp--preset--color--ink);
}
.hpci-form input:focus, .hpci-form select:focus, .hpci-form textarea:focus {
  border-color: var(--wp--preset--color--green); outline: 3px solid var(--wp--preset--color--pink); outline-offset: 1px;
}
.hpci-submit {
  background: var(--wp--preset--color--pink-ink); color: #fff; border: 0; cursor: pointer;
  font-weight: 700; padding: .85rem 1.6rem; border-radius: 999px;
}
.hpci-submit:hover { background: var(--wp--preset--color--green); }
.hpci-form-note { font-size: .9rem; color: var(--wp--preset--color--muted); }

/* ------------------------------------------------------------------ *
 * Print styles ("Print view" parity with the old site)
 * ------------------------------------------------------------------ */
@media print {
  .hpci-header, .hpci-toolbar, #hpci-cookie, .wp-block-navigation__responsive-container-open,
  footer.wp-block-template-part nav, .wp-block-buttons, .hpci-utility { display: none !important; }
  body { background: #fff !important; color: #000 !important; font-size: 12pt; }
  a { color: #000 !important; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  .hpci-card, .wp-block-group.has-background { box-shadow: none !important; border: 1px solid #999 !important; background: #fff !important; }
  main { padding-top: 0 !important; }
}