/* ==========================================================================
   Foster Care Home core styles
   All custom CSS lives here. Never inline a <style> block in a section file.
   Design tokens first, then section styles appended below as you build.
   ========================================================================== */

:root {
  /* Brand palette, sampled from the live theme on 20 August 2026 rather than
     guessed. These were placeholders until now, which is why earlier work in
     this file looked subtly off-brand.

       #073933  the deep teal behind the hero and breadcrumb bars
       #1E3737  the secondary dark, used by the theme at various alphas
       #FE7F4C  the orange on every call to action
       #F2F7F7  the soft tinted section background

     The theme sets body copy at #777 on white, which is 4.48:1 and misses
     WCAG AA for normal text. --fch-ink and --fch-body below are deliberately
     darker so anything this plugin renders passes. */
  --fch-teal:      #073933;
  --fch-teal-soft: #0F5349;
  --fch-ink:       #1E3737;
  --fch-body:      #3D4F4C;   /* 8.1:1 on white, 7.6:1 on the tint */
  --fch-paper:     #FFFFFF;
  --fch-bg:        #F2F7F7;
  --fch-accent:    #FE7F4C;
  --fch-accent-dk: #C4501F;   /* 4.6:1 on white, for text and links */
  --fch-muted:     #5C6470;
  --fch-line:      #DCE7E5;

  --fch-font-head: Manrope, "Manrope Fallback", system-ui, sans-serif;

  --fch-wrap: 1200px;
  /* The theme ships TWO content containers with different padding:
     .container at 1200/12px and .fc-container at 1200/15px, so builder pages
     already disagree with each other by a few pixels before anything is
     injected. Both are normalised to this one value below, together with the
     article, so every content edge on the site lines up exactly. */
  --fch-content: 1200px;
  --fch-radius: 4px;
  /* Exactly the theme container's side padding, so edges line up. */
  --fch-gutter: 12px;
  --fch-section-pad: clamp(40px, 6vw, 72px);
}

/* Section styles get appended below this line as sections are built. */


/* ==========================================================================
   Remediation layer
   Styles for the corrections in includes/remediation/. Temporary by intent,
   when the underlying content is fixed properly in wp-admin, these go too.
   ========================================================================== */

/* Visually hidden H1, added to pages that render without one.
   Readable by screen readers and by Google, invisible on screen, and it does
   not create a scroll anchor or a layout shift. */
.fch-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Animation reduction
   PageSpeed Insights flagged "51 animated elements" and non-composited
   animations on the home page. Measured directly: 25 elements carrying a CSS
   animation, 5 of them running INFINITELY, which means the browser never stops
   repainting them for as long as the tab is open.
   ========================================================================== */

/* 1. The infinite ones, minus the loader.

      The page loader keeps its animation deliberately: a spinner that does not
      move reads as a frozen page, which is worse than the cost of animating
      it, and it only runs while the page is loading rather than forever.

      The other three are decorative and run for as long as the tab is open:
      a ripple, a sliding border and a drifting shape. Those stay off. */
.foster-stroke-ripple,
.tp-about-2__thumb-border,
.tp-about-4__shape {
  animation: none !important;
}

/* 2. Scroll entrance animations (WOW.js, 20 elements on the home page).
      WOW sets visibility:hidden inline and only reveals an element when it
      scrolls into view, so the content is invisible until JavaScript decides
      otherwise. Three elements were measured STUCK hidden even after the
      script had run.
      Forcing them visible removes the fade, which is the point, and also means
      content can no longer be lost to a script that fails or runs late.
      Scoped to .wow / .animated deliberately: the hero slider uses opacity on
      .foster-hero-slide to show one slide at a time, and a blanket opacity
      rule would reveal every slide at once. Verified the slider still reports
      opacity 1 / 0 across its slides after this change. */
.wow,
.animated {
  animation: none !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* 2b. THE STICKY HEADER, which is what the white shape over the header was.
       ------------------------------------------------------------------
       The theme adds .header-sticky to the header once you scroll past the
       top, and its own stylesheet gives that class `animation: fadeInDown
       0.5s`. fadeInDown starts at opacity 0 and translateY(-100%), so for the
       first half second after every scroll the header is a partly transparent
       white bar sliding down over the page with its navigation cut off at the
       top edge. Reported as the header being covered by a white shape, and
       that is precisely what it is: the header's own background mid-animation.

       It survived the rules above because the theme applies it through
       .header-sticky rather than through WOW.js's .wow / .animated, which is
       what those rules target. Measured on /adoptive-parent-resources/: four
       animated elements remained on the page, and this was the only one that
       was not either the loader or an admin-only wp-admin indicator.

       Turning the animation off leaves the header in its finished state, which
       is where it was always going to end up half a second later anyway. */
.header-sticky,
[class*="header-sticky"] {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* 3. Honour an explicit operating-system request for reduced motion. Separate
      from the above: that is a performance decision for everyone, this is an
      accessibility requirement for people who get motion sickness or migraine
      from movement on screen. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* Horizontal overflow at small widths.
   The home page hero carries a decorative outlined-text watermark,
   .foster-bg-text-outline, which is 588px wide inside a 320px viewport. It
   pushes documentElement.scrollWidth to 446px.

   The visitor never actually saw a sideways scroll, because the theme sets
   `html { overflow-x: hidden }` and that clips it, verified by scripting
   window.scrollTo(500, 0) at 320px and 390px and confirming scrollX stayed 0.
   So this is not the bug it first looked like.

   It is still worth constraining rather than leaving to be masked: relying on
   an ancestor to clip a 588px element is fragile, and it makes any genuine
   future overflow impossible to spot, because the measurement is already
   dirty. Clipping it at its own box is visually identical, the watermark sits
   behind the hero and is cut off either way. Confirmed with a side-by-side
   render at 320px.

   This drops scrollWidth from 446px to viewport width. The 3px that .row and
   .col-xl-* overhang on other pages is standard Bootstrap gutter maths, is
   clipped, is invisible, and is deliberately left alone, changing gutter
   variables site-wide to chase 3px would risk far more than it fixes. */
@media (max-width: 991.98px) {
  .foster-bg-text-outline {
    max-width: 100%;
    overflow: hidden;
  }
}

/* The actual root cause, found after the rule above: the hero wrapper is set
   to `width: 100vw`.

   100vw is the width of the viewport INCLUDING the scrollbar, while the space
   a page can actually use excludes it. So on any device that reserves a
   scrollbar the hero is wider than the scrollport, and the page can be panned
   sideways by exactly the scrollbar width. Measured at 390px: scrollport 375,
   hero 390, page pannable. This is the single most common cause of unwanted
   horizontal scroll on the web.

   `width: 100%` resolves against the containing block instead, which is what
   was meant. Verified at 320, 390, 768, 1200 and 1440px: the hero still spans
   the full width at every one, and window.scrollTo(500, 0) leaves scrollX at 0.

   !important is needed because this stylesheet has no declared load order
   relative to the theme's, and the theme's own rule has equal specificity. */
.foster-hero-container {
  width: 100% !important;
  max-width: 100% !important;
}

/* A duplicate H1 demoted to H2 by includes/remediation/output.php.
   Theme heading styles are written against the tag, so demotion silently
   strips them. On the home page hero that turned the second slide's heading
   into dark text on a dark green background, invisible. These values mirror
   what the theme computes for `.foster-hero-inner h1`, measured at 320, 480,
   768, 992, 1200 and 1440px: fixed 32px below 768, then 6vw, capped at 68px.
   clamp() reproduces that curve exactly. */
.foster-hero-inner h2.fch-demoted-h1 {
  color: #fff;
  font-size: clamp(32px, 6vw, 68px);
  line-height: 1.15;
  font-weight: 800;
  margin-bottom: 35px;
}

/* Notice blocks: privacy statements, jurisdiction warnings, form guidance. */
.fch-notice {
  box-sizing: border-box;
  max-width: 100%;
  margin: 24px 0;
  padding: 16px 18px;
  background: var(--fch-bg, #F5F6F8);
  border-left: 4px solid var(--fch-accent, #1F6F5C);
  border-radius: var(--fch-radius, 4px);
  color: var(--fch-ink, #14161A);
  font-size: 15px;
  line-height: 1.55;
}

.fch-notice__heading {
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
  color: var(--fch-ink, #14161A);
}

.fch-notice__body {
  margin: 0;
  /* #4A515C on #F5F6F8 is 6.4:1, comfortably past WCAG AA. The token
     --fch-muted is a placeholder and may not be, so it is not used here. */
  color: #4A515C;
}

.fch-notice__body a {
  display: inline-block;
  min-height: 24px;
  padding: 4px 0;
  color: var(--fch-accent, #1F6F5C);
  text-decoration: underline;
}

/* ==========================================================================
   Content layer
   Editorial styling for the sourced articles in includes/content/.

   PADDING. The article box is deliberately given the SAME geometry as the
   theme's own .container, measured from the live site: max-width 1200px with
   12px side padding. Before this it centred on a narrow 760px measure, so on
   /about_adoption/ and /adopt_a_baby/ the article text started ~250px to the
   right of the Elementor content directly above it and the page looked like
   two different documents stapled together.

   Matching the container keeps every left edge on the site aligned. Line
   length is then handled separately, by constraining the text blocks inside
   and letting them sit LEFT rather than centring them, so readability does not
   cost alignment.

   BORDERS. This layer draws no borders at all. Separation comes from
   background tint and spacing, which is lighter to render and calmer to read.
   ========================================================================== */

.fch-article,
.fch-article *,
.fch-article *::before,
.fch-article *::after {
  box-sizing: border-box;
}

.fch-article {
  width: 100%;
  padding: clamp(28px, 5vw, 52px) var(--fch-gutter, 16px);
  color: var(--fch-body, #3D4F4C);
  font-size: clamp(16.5px, 1.05vw + 14px, 18px);
  line-height: 1.72;
  overflow-wrap: break-word;
}

.fch-article p,
.fch-article ul,
.fch-article ol {
  margin: 0 0 1.15em;
}

.fch-article ul,
.fch-article ol {
  padding-left: 1.35em;
}

.fch-article li {
  margin-bottom: 0.55em;
}

.fch-article strong {
  color: var(--fch-ink, #1E3737);
  font-weight: 700;
}

.fch-article a {
  color: var(--fch-accent-dk, #C4501F);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.fch-article a:hover,
.fch-article a:focus-visible {
  color: var(--fch-teal, #073933);
}

/* Headings. Manrope is already loaded by the theme, so using it costs nothing
   and makes the article look native to the site. */
.fch-article__heading {
  margin: 1.9em 0 0.5em;
  color: var(--fch-teal, #073933);
  font-family: var(--fch-font-head);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h2.fch-article__heading {
  font-size: clamp(23px, 2.6vw + 14px, 32px);
}

h3.fch-article__heading {
  margin-top: 1.6em;
  font-size: clamp(18.5px, 1.2vw + 15px, 22px);
  font-weight: 700;
}

/* The opening paragraphs, set larger so the page has a clear entry point. */
.fch-article__intro {
  font-size: 1.1em;
  line-height: 1.65;
  color: var(--fch-ink, #1E3737);
}

.fch-article__intro p:last-child {
  margin-bottom: 0;
}

/* Jurisdiction class. Small, but it is the single most important thing a
   reader can know before acting on any of this. */
.fch-article__scope,
.fch-article__scope-inline {
  display: inline-block;
  max-width: 100%;
  margin: 0 0 1.4em;
  padding: 6px 14px;
  background: var(--fch-bg, #F2F7F7);
  border-radius: 999px;
  color: var(--fch-teal, #073933);
  font-family: var(--fch-font-head);
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.4;
}

.fch-article__scope-inline {
  margin-top: 0.2em;
}

/* Callouts. Tint only, no rule, per the no-borders direction. The warning
   variant uses the brand orange tint so an important point still reads as
   part of this site. */
.fch-callout {
  margin: 1.7em 0;
  padding: clamp(16px, 3.5vw, 24px);
  background: var(--fch-bg, #F2F7F7);
  border-radius: var(--fch-radius, 4px);
}

.fch-callout--warning {
  background: #FFF1EA;
}

.fch-callout__heading {
  margin: 0 0 0.5em;
  color: var(--fch-teal, #073933);
  font-family: var(--fch-font-head);
  font-size: 1.02em;
  font-weight: 800;
  line-height: 1.35;
}

.fch-callout--warning .fch-callout__heading {
  color: #8F3A14;
}

.fch-callout__body > :last-child {
  margin-bottom: 0;
}

/* Tables carry the jurisdictional variation, which is the hardest and most
   important thing on this site to communicate. They scroll inside their own
   box so they can never break the page at 320px. Row separation is by tint
   rather than by rules. */
.fch-table-wrap {
  max-width: 100%;
  margin: 1.7em 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.fch-table {
  width: 100%;
  min-width: 34em;
  border-collapse: collapse;
  font-size: 0.92em;
}

.fch-table caption {
  margin-bottom: 0.7em;
  color: var(--fch-muted, #5C6470);
  font-size: 0.95em;
  text-align: left;
}

.fch-table th,
.fch-table td {
  padding: 12px 14px;
  border: 0;
  text-align: left;
  vertical-align: top;
}

.fch-table thead th {
  background: var(--fch-teal, #073933);
  color: #fff;
  font-family: var(--fch-font-head);
  font-weight: 700;
}

.fch-table tbody tr:nth-child(odd) {
  background: var(--fch-bg, #F2F7F7);
}

.fch-table tbody th {
  color: var(--fch-ink, #1E3737);
  font-weight: 700;
}

/* The action step. Deep teal, echoing the hero, so the end of every article
   has visible weight and the reader knows where to go next. */
.fch-article__next {
  margin: 2.4em 0 0;
  padding: clamp(22px, 4.5vw, 36px);
  background: var(--fch-teal, #073933);
  border-radius: var(--fch-radius, 4px);
  color: #E8F1EF;
}

.fch-article__next .fch-article__heading {
  margin-top: 0;
  color: #fff;
}

.fch-article__next strong { color: #fff; }
.fch-article__next > :last-child { margin-bottom: 0; }

.fch-article__next a {
  color: #FFC7AC;
  text-decoration: underline;
}

.fch-article__next a:hover,
.fch-article__next a:focus-visible {
  color: #fff;
}

/* Internal links to sibling pages. */
.fch-related {
  margin: 2.2em 0 0;
  padding: clamp(18px, 3.5vw, 26px);
  background: var(--fch-bg, #F2F7F7);
  border-radius: var(--fch-radius, 4px);
}

.fch-related__heading {
  margin: 0 0 0.7em;
  color: var(--fch-teal, #073933);
  font-family: var(--fch-font-head);
  font-size: 1em;
  font-weight: 800;
}

.fch-related__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fch-related__list li {
  margin-bottom: 0.6em;
  padding-left: 0;
}

.fch-related__list a {
  font-weight: 600;
}

.fch-related__note {
  display: block;
  color: var(--fch-muted, #5C6470);
  font-size: 0.88em;
}

/* Sources. Present on every article by design, because an unsourced YMYL page
   is worse than no page. */
.fch-sources {
  margin: 2.2em 0 0;
  padding: clamp(20px, 4vw, 30px);
  background: var(--fch-bg, #F2F7F7);
  border-radius: var(--fch-radius, 4px);
  font-size: 0.93em;
}

.fch-sources__heading {
  margin: 0 0 0.8em;
  color: var(--fch-teal, #073933);
  font-family: var(--fch-font-head);
  font-size: 1.15em;
  font-weight: 800;
}

.fch-sources__list {
  margin: 0 0 1em;
  padding-left: 1.2em;
}

.fch-sources__list li {
  margin-bottom: 0.6em;
  line-height: 1.55;
}

.fch-sources__list a {
  overflow-wrap: anywhere;
}

.fch-sources__note {
  color: var(--fch-muted, #5C6470);
}

.fch-sources__reviewed {
  margin: 0;
  padding-top: 1em;
  color: var(--fch-muted, #5C6470);
  font-size: 0.95em;
}

/* Notices injected by the remediation layer sit inside the same articles, so
   they are re-tuned here to match rather than clashing with them. */
/* A notice injected by the remediation layer renders OUTSIDE .fch-article,
   so without this it sat hard against the screen edge at 18px while the
   article beside it sat at 64px. Giving it the same container geometry as the
   article puts every block this plugin renders on one left edge. */
.fch-notice {
  box-sizing: border-box;
  width: 100%;
  padding-top: clamp(16px, 3.5vw, 22px);
  padding-bottom: clamp(16px, 3.5vw, 22px);
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* The tinted panel is drawn on an inner wrapper so the tint starts at the
   text edge rather than at the screen edge. */
.fch-notice__heading,
.fch-notice__body {
}

.fch-notice__heading {
  padding: clamp(14px, 3vw, 20px) clamp(16px, 3.5vw, 22px) 0;
  background: var(--fch-bg, #F2F7F7);
  border-radius: var(--fch-radius, 4px) var(--fch-radius, 4px) 0 0;
  margin-bottom: 0;
}

.fch-notice__body {
  padding: 0.4em clamp(16px, 3.5vw, 22px) clamp(14px, 3vw, 20px);
  background: var(--fch-bg, #F2F7F7);
  border-radius: 0 0 var(--fch-radius, 4px) var(--fch-radius, 4px);
}

/* Inside an article the notice is already within the article's padding, so it
   must not add a second container on top. */
.fch-article .fch-notice {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

.fch-notice__heading {
  color: var(--fch-teal, #073933);
  font-family: var(--fch-font-head);
  font-weight: 800;
}

.fch-notice__body {
  color: var(--fch-body, #3D4F4C);
}

.fch-notice__body a {
  color: var(--fch-accent-dk, #C4501F);
}

@media (max-width: 480px) {

  .fch-table th,
  .fch-table td {
    padding: 10px 12px;
  }
}

/* ==========================================================================
   Site wide: consistent gutters, no decorative borders
   Applies to every page, not only the pages this plugin writes.
   ========================================================================== */

/* One gutter value for the whole site. The theme ships .container at a flat
   12px, which is tight on a phone and inconsistent with everything else, so
   this scales it: 16px on a small screen up to 24px on a wide one. Matching
   .fch-article to the same container keeps every left edge on the site in
   line. */
/* Match the theme's own .container exactly rather than trying to restyle it.

   Overriding .container was the wrong instinct: the theme's rule won on
   specificity so the override silently did nothing, and had it worked it would
   have shifted every existing section on the site to chase a few pixels.

   The container is Bootstrap's, so it is not one width. It steps through
   540 / 720 / 960 / 1140 and is capped at 1200, with 12px side padding
   throughout. A single max-width cannot match that: it lined up at 1440 and
   390 and was 16px and 30px out at 768 and 1280. These are the same
   breakpoints, so injected content sits on the theme's content edge at every
   width. Verified against the live .container at 390, 768, 1280 and 1440.

   Sections nested inside Bootstrap columns sit a further 15px in. That is the
   builder's own layout, it differs section to section, and flattening it from
   a stylesheet would do more harm than the inconsistency it fixes. Genuinely
   uniform section padding is an Elementor template job. */
.fch-article,
.fch-notice {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--fch-gutter, 12px);
  padding-right: var(--fch-gutter, 12px);
}

@media (min-width: 576px) {
  .fch-article,
  .fch-notice { max-width: 540px; }
}

@media (min-width: 768px) {
  .fch-article,
  .fch-notice { max-width: 720px; }
}

@media (min-width: 992px) {
  .fch-article,
  .fch-notice { max-width: 960px; }
}

@media (min-width: 1200px) {
  .fch-article,
  .fch-notice { max-width: 1140px; }
}

@media (min-width: 1400px) {
  .fch-article,
  .fch-notice { max-width: var(--fch-content, 1200px); }
}

/* On pages where the article REPLACES the content it is rendered inside the
   theme's own .container, which has already applied the container width and
   padding. Applying them a second time pushed the text 12px further in on
   desktop and 22px on mobile than the rest of the site.

   Where an ancestor container exists, the article contributes nothing of its
   own and simply fills it. Where one does not, such as the pages where the
   article is appended directly to the body, the rules above still supply the
   container. Verified on both arrangements at 390 and 1440. */
.container .fch-article,
.container .fch-notice,
.tp-page-post .fch-article,
.postbox__content .fch-article {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* Those wrappers also carry a little side padding of their own (10px on
   .postbox__content, 12px on .tp-page-post), which sat on top of the
   container's and pushed the article to 22px against the site's 12px on
   mobile. Zeroed only where the wrapper actually holds an article, because
   the same wrappers hold ordinary posts elsewhere and keep their padding
   there. Without :has() support the rule is skipped and the result is simply
   a slightly wider gutter, never a broken layout. */
.tp-page-post:has(.fch-article),
.postbox__content:has(.fch-article) {
  padding-left: 0;
  padding-right: 0;
}

/* An earlier attempt here added a mobile gutter to .tp-page-post,
   .postbox__content and Elementor widgets. It was written before the theme's
   Bootstrap container was understood, and it double-padded: those wrappers
   already sit inside .container, so the article ended up at 24px on mobile
   against the site's 12px. Removed rather than tuned, because matching the
   container above makes it unnecessary. Verified at 390px on every content
   page after removal. */

/* Contrast.

   PageSpeed: "Background and foreground colors do not have a sufficient
   contrast ratio." The theme sets body copy to #777 on white, which measures
   4.48:1 and fails WCAG AA for normal text.

   FIRST ATTEMPT WAS WRONG AND IS WORTH RECORDING. It set the darker colour on
   `body p, body li, body span, body label` globally. CSS cannot see what is
   behind an element, so that also darkened text sitting on the teal widget
   backgrounds, turning white labels into near-unreadable dark text on dark
   teal. It fixed a 4.48:1 failure by creating a much worse one.

   Scoped to light-background content areas only. Anything on a dark panel
   keeps whatever the theme gave it, and the explicit exclusions below cover
   the widget areas that are teal.

   #5A6B68 measures 5.62:1 on white and 5.20:1 on the #F2F7F7 tint. */
.fch-article p,
.fch-article li,
.postbox__content > p,
.postbox__content > ul li,
.tp-page-post > p,
.tp-page-content p,
article .entry-content p,
.elementor-widget-text-editor p {
  color: #5A6B68;
}

/* THE SAME MISTAKE, ONE PANEL FURTHER IN.
   ----------------------------------------------------------------------
   The block above is scoped away from the theme's dark panels, but it was
   still catching a dark panel this plugin draws itself. .fch-article__next is
   the closing signpost: solid teal, with `color: #E8F1EF` set on the wrapper
   so its text reads light on dark. That wrapper colour is inherited, and
   `.fch-article p` sets a colour directly on the paragraph, so it wins. Every
   paragraph and list item in the signpost rendered #5A6B68 on #073933, which
   is about 1.5:1. The heading stayed white, so the block looked fine at a
   glance and the body copy underneath was very nearly invisible. Reported as
   information not being fully visible, which is exactly what it was.

   #E8F1EF on #073933 is 13.4:1. Links inside the panel keep #FFC7AC, which is
   8.9:1 on the same ground, and both are stated explicitly rather than left to
   inheritance so that a future colour rule scoped to `p` cannot silently take
   them again. */
.fch-article__next p,
.fch-article__next li,
.fch-article__next span,
.fch-article__next td,
.fch-article__next th {
  color: #E8F1EF;
}

.fch-article__next p strong,
.fch-article__next li strong {
  color: #fff;
}

.fch-article__next p a,
.fch-article__next li a {
  color: #FFC7AC;
}

.fch-article__next p a:hover,
.fch-article__next li a:hover,
.fch-article__next p a:focus-visible,
.fch-article__next li a:focus-visible {
  color: #fff;
}

/* Never re-colour text that sits on a dark or coloured panel. */
[class*="theme-bg"] *,
[class*="dark-bg"] *,
[class*="bg-dark"] *,
.tp-footer *,
footer *,
.widget[style*="background"] *,
.search__wrapper *,
.tp-sidebar-widget-bg *,
.wp-block-search *,
[style*="background-color: rgb(23"] *,
[style*="background-color: rgb(7,"] * {
  color: inherit;
}

/* Headings keep the deep teal, which is 12.79:1 on white. */
.fch-article h1, .fch-article h2, .fch-article h3,
.fch-article h4, .fch-article h5, .fch-article h6 {
  color: var(--fch-ink, #1E3737);
}

/* Sidebar widget titles.

   SECOND CORRECTION IN THE SAME PLACE, worth recording. The first attempt made
   the search widget's label readable by forcing white on
   `.sidebar__widget-title`. But only ONE widget on this site is teal:

     .widget_search          #1C847F  dark teal, needs white text
     .widget_categories      #F2F7F7  light tint
     .widget_tp-latest-posts #F2F7F7  light tint
     .widget_block           #F2F7F7  light tint

   So "Category" and "Our Latest Post" became white on a near-white background
   and disappeared entirely. Fixing a contrast failure by creating an invisible
   heading is not a fix.

   White is now scoped to the teal widget alone. Everything else gets the dark
   ink, which is 9.4:1 on the tint. */
.sidebar__widget-title,
.sidebar__widget .widget-title,
.sidebar__widget h2,
.sidebar__widget h3 {
  color: var(--fch-ink, #1E3737);
}

.widget_search .sidebar__widget-title,
.widget_search .widget-title,
.widget_search label,
.widget_search h2,
.widget_search h3,
.search__wrapper label,
.search__wrapper .widget-title {
  color: #fff !important;
}

/* Its button text was wrapping to "Searc h" in a box too narrow for the word. */
.search__form button,
.search__wrapper button,
.wp-block-search__button {
  white-space: nowrap;
  min-width: 92px;
  padding-left: 14px;
  padding-right: 14px;
}

/* Remove decorative borders across the site.

   Two deliberate exemptions:
     - form controls, because an input with no visible boundary is genuinely
       hard to use and fails the same accessibility standards this audit is
       meant to improve
     - :focus-visible, so keyboard users can still see where they are.
       WCAG 2.4.7 requires a visible focus indicator, and outline is a separate
       property from border, but the exemption is written out explicitly so
       nobody removes it later by accident.

   Scoped under body so the rule cannot touch html, and written with
   border-style rather than the border shorthand so any border-radius used for
   shape is preserved. */
body *:not(input):not(select):not(textarea):not(button):not(.fch-keep-border) {
  border-style: none !important;
}

body *:focus-visible {
  outline: 2px solid var(--fch-accent, #FE7F4C) !important;
  outline-offset: 2px;
}

/* Horizontal rules were borders too. Keep them as a hairline of tint so a
   genuine section break does not disappear entirely. */
hr {
  height: 1px;
  border: 0 !important;
  background: var(--fch-line, #DCE7E5);
}

/* ==========================================================================
   Header: highlight the page you are on
   WordPress already puts these classes on the current menu item, so nothing
   needs adding to the markup. The theme simply never styled them.

   Colour alone is not enough to signal state, so the underline carries it too.
   That is a WCAG requirement (1.4.1, use of colour) and it also helps anyone
   reading on a phone in daylight.
   ========================================================================== */

.current-menu-item > a,
.current_page_item > a,
.current-menu-ancestor > a,
.current-menu-parent > a,
.current_page_parent > a {
  color: var(--fch-accent, #FE7F4C) !important;
  font-weight: 700;
}

/* The underline sits below the text rather than on it, so descenders stay
   readable. */
.tp-main-menu ul > li.current-menu-item > a,
.tp-main-menu ul > li.current_page_item > a,
.tp-main-menu ul > li.current-menu-ancestor > a,
nav ul > li.current-menu-item > a,
nav ul > li.current_page_item > a {
  position: relative;
}

.tp-main-menu ul > li.current-menu-item > a::after,
.tp-main-menu ul > li.current_page_item > a::after,
.tp-main-menu ul > li.current-menu-ancestor > a::after,
nav ul > li.current-menu-item > a::after,
nav ul > li.current_page_item > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 3px;
  background: var(--fch-accent, #FE7F4C);
  border-radius: 2px;
}

/* Screen readers get the same information, via the theme's own aria handling
   where present. Where the current item is a plain link, mark it. */
.current-menu-item > a[aria-current],
.current_page_item > a[aria-current] {
  font-weight: 700;
}

/* Inside the mobile off-canvas menu an underline looks wrong; use a bar. */
.tpoffcanvas .current-menu-item > a::after,
.tpoffcanvas .current_page_item > a::after {
  display: none;
}

.tpoffcanvas .current-menu-item > a,
.tpoffcanvas .current_page_item > a {
  padding-left: 10px;
  border-left: 3px solid var(--fch-accent, #FE7F4C) !important;
}


/* ==========================================================================
   Blog listing and pagination
   ========================================================================== */

.fch-bloglist__count {
  color: var(--fch-muted, #5C6470);
  font-size: 0.92em;
  margin-bottom: 1.4em;
}

.fch-bloglist__grid {
  list-style: none;
  margin: 0 0 2em;
  padding: 0;
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.fch-bloglist__item {
  margin: 0;
  padding: clamp(18px, 3vw, 26px);
  background: var(--fch-bg, #F2F7F7);
  border-radius: var(--fch-radius, 4px);
  display: flex;
  flex-direction: column;
}

.fch-bloglist__cat {
  margin: 0 0 0.5em;
  color: var(--fch-accent-dk, #C4501F);
  font-family: var(--fch-font-head);
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fch-bloglist__title {
  margin: 0 0 0.5em;
  font-family: var(--fch-font-head);
  font-size: clamp(18px, 1.4vw + 14px, 21px);
  font-weight: 800;
  line-height: 1.3;
}

.fch-bloglist__title a {
  color: var(--fch-teal, #073933);
  text-decoration: none;
}

.fch-bloglist__title a:hover,
.fch-bloglist__title a:focus-visible {
  text-decoration: underline;
}

.fch-bloglist__excerpt {
  flex: 1 1 auto;
  margin: 0 0 1em;
  color: #5A6B68;
  font-size: 0.95em;
}

.fch-bloglist__meta {
  margin: 0;
  color: var(--fch-muted, #5C6470);
  font-size: 0.85em;
}

.fch-pagination__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.fch-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  background: var(--fch-bg, #F2F7F7);
  border-radius: var(--fch-radius, 4px);
  color: var(--fch-teal, #073933);
  font-weight: 700;
  text-decoration: none;
}

a.fch-pagination__link:hover,
a.fch-pagination__link:focus-visible {
  background: var(--fch-teal, #073933);
  color: #fff;
}

.fch-pagination__link--current {
  background: var(--fch-accent, #FE7F4C);
  color: #fff;
}

.fch-pagination__gap {
  display: inline-block;
  padding: 0 4px;
  color: var(--fch-muted, #5C6470);
}


/* ==========================================================================
   404 and 410 pages
   Both render inside the theme header and footer now, so they only need
   content styling.
   ========================================================================== */

.fch-errorpage__links {
  list-style: none;
  margin: 0 0 1.6em;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.fch-errorpage__links li {
  margin: 0;
}

.fch-errorpage__links a {
  display: inline-block;
  padding: 10px 18px;
  min-height: 44px;
  line-height: 24px;
  background: var(--fch-bg, #F2F7F7);
  border-radius: var(--fch-radius, 4px);
  color: var(--fch-teal, #073933);
  font-weight: 600;
  text-decoration: none;
}

.fch-errorpage__links a:hover,
.fch-errorpage__links a:focus-visible {
  background: var(--fch-teal, #073933);
  color: #fff;
}

.fch-errorpage form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 460px;
  margin-bottom: 1.4em;
}

.fch-errorpage form input[type="search"],
.fch-errorpage form input[type="text"] {
  flex: 1 1 200px;
  padding: 10px 12px;
  min-height: 44px;
}

.fch-errorpage form button,
.fch-errorpage form input[type="submit"] {
  min-height: 44px;
  padding: 10px 20px;
  background: var(--fch-accent, #FE7F4C);
  color: #fff;
  border: 0;
  border-radius: var(--fch-radius, 4px);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

/* 410 Gone page for removed demo content. */
.fch-gone-body {
  margin: 0;
  background: var(--fch-paper, #FFFFFF);
  color: var(--fch-ink, #14161A);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.fch-gone {
  box-sizing: border-box;
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(32px, 8vw, 80px) 20px;
}

.fch-gone h1 {
  margin: 0 0 16px;
  font-size: clamp(24px, 5vw, 34px);
  line-height: 1.25;
}

.fch-gone p {
  margin: 0 0 16px;
  color: #4A515C;
}

/* 44px minimum touch target, per the audit plan's accessibility section. */
.fch-gone-link {
  display: inline-block;
  min-height: 44px;
  padding: 11px 20px;
  background: var(--fch-accent, #1F6F5C);
  color: #fff;
  border-radius: var(--fch-radius, 4px);
  text-decoration: none;
  font-weight: 600;
}

.fch-gone-link:hover,
.fch-gone-link:focus {
  opacity: 0.9;
}

.fch-gone-contact a {
  color: var(--fch-accent, #1F6F5C);
}