/*
Theme Name: Hookups For Kenyans
Theme URI: https://hookupsforkenyans.com
Description: Child theme of Astra for Hookups For Kenyans. All customisation lives here; the Astra parent is never modified.
Author: Hookups For Kenyans
Author URI: https://hookupsforkenyans.com
Template: astra
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hookups-child
*/

/* ==========================================================================
   1. Design tokens
   Brand colours are declared once, here. When the palette arrives only these
   lines change; nothing else in this stylesheet hardcodes a hue.
   ========================================================================== */
:root {
  --hfk-accent:        #00687a;  /* brand teal, sampled from the logo */
  --hfk-accent-strong: #004e5c;  /* darker teal for hover and active */
  --hfk-accent-soft:   #e6f0f3;  /* teal tint for quiet backgrounds */
  --hfk-orange:        #fb3a06;  /* brand orange, sampled from the logo */
  --hfk-orange-strong: #d42f03;
  --hfk-ink:           #14181c;
  --hfk-ink-soft:      #525c66;
  --hfk-line:          #e2e6ea;

  --hfk-bg:            #ffffff;
  --hfk-bg-sunken:     #f6f8f9;
  --hfk-radius:        14px;
  --hfk-radius-sm:     9px;
  --hfk-shadow:        0 1px 2px rgba(20,24,28,.06), 0 8px 24px -12px rgba(20,24,28,.18);
  --hfk-shadow-lift:   0 2px 6px rgba(20,24,28,.08), 0 18px 40px -16px rgba(20,24,28,.28);
  --hfk-gap:           clamp(16px, 2.4vw, 28px);
  --hfk-maxw:          1180px;
}

/* ==========================================================================
   2. Primitives
   ========================================================================== */
.hfk-wrap { width: min(100% - 32px, var(--hfk-maxw)); margin-inline: auto; }

.hfk-section { padding-block: clamp(32px, 5vw, 56px); }
.hfk-section--sunken { background: var(--hfk-bg-sunken); }

.hfk-section__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: clamp(16px, 2.5vw, 26px);
  border-bottom: 1px solid var(--hfk-line); padding-bottom: 12px;
}
.hfk-section__title { margin: 0; font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.2; }
.hfk-section__more { font-size: .9rem; font-weight: 600; text-decoration: none; color: var(--hfk-accent); white-space: nowrap; }
.hfk-section__more:hover { text-decoration: underline; }

.hfk-ico { width: 1em; height: 1em; flex: none; stroke: currentColor; fill: none;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.125em; }

.hfk-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 650; font-size: .95rem; line-height: 1; text-decoration: none;
  cursor: pointer; transition: background-color .16s, color .16s, border-color .16s, transform .16s;
}
.hfk-btn--primary { background: var(--hfk-accent); color: #fff; }
.hfk-btn--primary:hover { background: var(--hfk-accent-strong); color: #fff; transform: translateY(-1px); }
.hfk-btn--ghost { background: transparent; color: var(--hfk-accent); border-color: var(--hfk-line); }
.hfk-btn--ghost:hover { border-color: var(--hfk-accent); background: var(--hfk-accent-soft); }

/* ==========================================================================
   3. Post cards: two columns on desktop, one on mobile
   ========================================================================== */
.hfk-grid { display: grid; gap: var(--hfk-gap); grid-template-columns: 1fr; }
@media (min-width: 768px) { .hfk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.hfk-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--hfk-bg); border: 1px solid var(--hfk-line);
  border-radius: var(--hfk-radius); box-shadow: var(--hfk-shadow);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.hfk-card:hover { box-shadow: var(--hfk-shadow-lift); transform: translateY(-2px); border-color: #d2d8de; }
@media (prefers-reduced-motion: reduce) {
  .hfk-card.hfk-card:hover.hfk-btn.hfk-card__media img { transition: none; transform: none; }
}

/* Reserving the ratio stops the layout jumping while the image decodes. */
.hfk-card__media { position: relative; aspect-ratio: 16 / 10; background: var(--hfk-bg-sunken); overflow: hidden; }
.hfk-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.hfk-card:hover .hfk-card__media img { transform: scale(1.035); }
.hfk-card__media--empty { display: grid; place-items: center; color: #b4bcc4; }
.hfk-card__media--empty .hfk-ico { width: 34px; height: 34px; }

.hfk-card__cat {
  position: absolute; left: 12px; top: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(255,255,255,.94); color: var(--hfk-ink);
  font-size: .72rem; font-weight: 700; letter-spacing: .02em; text-decoration: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.14);
}
.hfk-card__cat:hover { background: #fff; color: var(--hfk-accent); }

.hfk-card__body { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 18px; flex: 1; }
/* Three lines then ellipsis, so long titles stay readable instead of cut mid-word. */
.hfk-card__title { margin: 0; font-size: 1.06rem; line-height: 1.35; font-weight: 700;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hfk-card__title a { color: var(--hfk-ink); text-decoration: none; }
.hfk-card__title a:hover { color: var(--hfk-accent); }
.hfk-card__excerpt { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--hfk-ink-soft);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hfk-card__meta { margin-top: auto; display: flex; align-items: center; gap: 14px;
  font-size: .8rem; color: var(--hfk-ink-soft); padding-top: 4px; }
.hfk-card__meta span { display: inline-flex; align-items: center; gap: 5px; }

/* ==========================================================================
   4. Search
   ========================================================================== */
.hfk-search { background: var(--hfk-bg); border: 1px solid var(--hfk-line);
  border-radius: var(--hfk-radius); box-shadow: var(--hfk-shadow); padding: clamp(16px, 2.6vw, 24px); }
.hfk-search__row { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .hfk-search__row { grid-template-columns: 2fr 1fr 1fr auto; align-items: end; } }
.hfk-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hfk-field > label { font-size: .78rem; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; color: var(--hfk-ink-soft); }
.hfk-field input[type="search"].hfk-field input[type="text"].hfk-field select {
  width: 100%; padding: 11px 13px; font-size: .95rem; color: var(--hfk-ink);
  background: var(--hfk-bg); border: 1px solid var(--hfk-line);
  border-radius: var(--hfk-radius-sm); appearance: none;
}
.hfk-field input:focus-visible.hfk-field select:focus-visible {
  outline: 2px solid var(--hfk-accent); outline-offset: 1px; border-color: var(--hfk-accent);
}
.hfk-search__submit { width: 100%; justify-content: center; }
@media (min-width: 860px) { .hfk-search__submit { width: auto; } }

/* ==========================================================================
   5. Trust band
   ========================================================================== */
.hfk-trust { display: grid; gap: var(--hfk-gap); grid-template-columns: 1fr; }
@media (min-width: 620px) { .hfk-trust { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .hfk-trust { grid-template-columns: repeat(3, 1fr); } }
.hfk-trust__item { display: flex; gap: 13px; padding: 18px;
  background: var(--hfk-bg); border: 1px solid var(--hfk-line); border-radius: var(--hfk-radius); }
.hfk-trust__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px;
  border-radius: 11px; background: var(--hfk-accent-soft); color: var(--hfk-accent); }
.hfk-trust__icon .hfk-ico { width: 21px; height: 21px; }
.hfk-trust__item h3 { margin: 0 0 5px; font-size: 1rem; line-height: 1.3; }
.hfk-trust__item p { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--hfk-ink-soft); }

/* ==========================================================================
   6. Quick links
   ========================================================================== */
.hfk-links { display: flex; flex-wrap: wrap; gap: 9px; list-style: none; margin: 0; padding: 0; }
.hfk-links a { display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: 999px; font-size: .88rem; font-weight: 600;
  text-decoration: none; color: var(--hfk-ink);
  background: var(--hfk-bg); border: 1px solid var(--hfk-line); }
.hfk-links a:hover { border-color: var(--hfk-accent); color: var(--hfk-accent); background: var(--hfk-accent-soft); }

/* ==========================================================================
   7. Single post additions
   ========================================================================== */
.hfk-share { display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  margin: 28px 0; padding-top: 18px; border-top: 1px solid var(--hfk-line); }
.hfk-share__label { font-size: .82rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--hfk-ink-soft); margin-right: 3px; }
.hfk-share a { display: inline-grid; place-items: center; width: 38px; height: 38px;
  border-radius: 50%; color: var(--hfk-ink); border: 1px solid var(--hfk-line); text-decoration: none; }
.hfk-share a:hover { border-color: var(--hfk-accent); color: var(--hfk-accent); background: var(--hfk-accent-soft); }
.hfk-share .hfk-ico { width: 17px; height: 17px; }

.hfk-report { display: inline-flex; align-items: center; gap: 7px; margin: 18px 0 28px;
  font-size: .88rem; font-weight: 600; color: var(--hfk-ink-soft); text-decoration: none; }
.hfk-report:hover { color: var(--hfk-accent); text-decoration: underline; }

.hfk-related { margin-top: 40px; }

/* ==========================================================================
   8. Modal. It renders after the article and is only ever revealed by script,
   so crawlers receive the page without it and nothing is content-blocking.
   ========================================================================== */
.hfk-modal[hidden] { display: none; }
.hfk-modal { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 20px; }
.hfk-modal__veil { position: absolute; inset: 0; background: rgba(12,16,20,.55); }
.hfk-modal__panel { position: relative; width: min(100%, 440px); background: var(--hfk-bg);
  border-radius: var(--hfk-radius); box-shadow: var(--hfk-shadow-lift); padding: 26px 24px 24px; }
.hfk-modal__panel h2 { margin: 0 0 9px; font-size: 1.2rem; }
.hfk-modal__panel p { margin: 0 0 18px; font-size: .94rem; line-height: 1.6; color: var(--hfk-ink-soft); }
.hfk-modal__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hfk-modal__close { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px;
  display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent;
  color: var(--hfk-ink-soft); cursor: pointer; }
.hfk-modal__close:hover { background: var(--hfk-bg-sunken); color: var(--hfk-ink); }

/* ==========================================================================
   9. Accessibility
   ========================================================================== */
.hfk-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; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--hfk-accent); outline-offset: 2px; }

/* Breadcrumbs ------------------------------------------------------------- */
.hfk-crumbs { font-size: .82rem; color: var(--hfk-ink-soft); padding: 14px 0 0; }
.hfk-crumbs a { color: var(--hfk-ink-soft); text-decoration: none; }
.hfk-crumbs a:hover { color: var(--hfk-accent); text-decoration: underline; }
.hfk-crumbs .breadcrumb_last { color: var(--hfk-ink); font-weight: 600; }

/* Content + sidebar shell ------------------------------------------------- */
/* The sidebar only becomes a column once there is room for two cards beside
   it; below that it stacks under the grid rather than squeezing the cards. */
.hfk-shell { max-width: var(--hfk-maxw); margin: 0 auto; padding: 0 16px;
  display: grid; gap: var(--hfk-gap); grid-template-columns: 1fr; }
@media (min-width: 1024px) {
  .hfk-shell { grid-template-columns: minmax(0, 1fr) 312px; align-items: start; }
}
.hfk-home__main.hfk-archive.hfk-search-page { min-width: 0; }
.hfk-archive__desc { max-width: 70ch; margin: -8px 0 24px;
  color: var(--hfk-ink-soft); line-height: 1.6; }

/* Sidebar ----------------------------------------------------------------- */
@media (min-width: 1024px) { :is(.hfk-side.sidebar-main) { position: sticky; top: 24px; } }
:is(.hfk-side.sidebar-main) .widget:is(.hfk-side.sidebar-main) section { background: var(--hfk-bg);
  border: 1px solid var(--hfk-line); border-radius: var(--hfk-radius);
  padding: 16px 16px 14px; margin: 0 0 18px; }
:is(.hfk-side.sidebar-main) .widget:last-child:is(.hfk-side.sidebar-main) section:last-child { margin-bottom: 0; }
:is(.hfk-side.sidebar-main) .widget-title:is(.hfk-side.sidebar-main) .wp-block-heading:is(.hfk-side.sidebar-main) h2 {
  font-size: .95rem; font-weight: 700; letter-spacing: .01em;
  margin: 0 0 12px; color: var(--hfk-ink); }
:is(.hfk-side.sidebar-main) ul { list-style: none; margin: 0; padding: 0; }
:is(.hfk-side.sidebar-main) li { padding: 6px 0; border-bottom: 1px solid var(--hfk-line); font-size: .9rem; }
:is(.hfk-side.sidebar-main) li:last-child { border-bottom: 0; padding-bottom: 0; }
:is(.hfk-side.sidebar-main) a { color: var(--hfk-ink); text-decoration: none; }
:is(.hfk-side.sidebar-main) a:hover { color: var(--hfk-accent); text-decoration: underline; }
/* The count WordPress prints after each category. */
:is(.hfk-side.sidebar-main) .cat-item a + span:is(.hfk-side.sidebar-main) li > span.count { color: var(--hfk-ink-soft); font-size: .8rem; }

.hfk-sidelinks li { display: flex; }
.hfk-sidelinks a { display: flex; align-items: center; gap: 9px; width: 100%; }
.hfk-sidelinks svg { width: 17px; height: 17px; flex: 0 0 17px; color: var(--hfk-accent); }

/* Tag cloud: WordPress sets inline font sizes, which the pills override. */
:is(.hfk-side.sidebar-main) .tagcloud { display: flex; flex-wrap: wrap; gap: 7px; }
:is(.hfk-side.sidebar-main) .tagcloud a { font-size: .78rem !important; background: var(--hfk-accent-soft);
  color: var(--hfk-accent-strong); border-radius: 999px; padding: 5px 11px; }
:is(.hfk-side.sidebar-main) .tagcloud a:hover { background: var(--hfk-accent); color: #fff; text-decoration: none; }

/* Popular posts, as rendered by WordPress Popular Posts. */
:is(.hfk-side.sidebar-main) .wpp-list li { display: block; }
:is(.hfk-side.sidebar-main) .wpp-post-title { font-weight: 600; display: block; }
:is(.hfk-side.sidebar-main) .wpp-meta:is(.hfk-side.sidebar-main) .post-stats { color: var(--hfk-ink-soft); font-size: .78rem; }

/* The search form sits flush inside its panel. */
:is(.hfk-side.sidebar-main) .hfk-search { border: 0; padding: 0; background: none; }

/* Footer ------------------------------------------------------------------ */
.hfk-foot { background: var(--hfk-bg-sunken); border-top: 1px solid var(--hfk-line);
  margin-top: 48px; padding: 40px 0 22px; font-size: .9rem; }
.hfk-foot__cols { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .hfk-foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .hfk-foot__cols { grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; } }
.hfk-foot__head { font-size: .82rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--hfk-ink-soft); margin: 0 0 12px; }
.hfk-foot__col ul { list-style: none; margin: 0; padding: 0; }
.hfk-foot__col li { margin: 0 0 8px; }
.hfk-foot a { color: var(--hfk-ink); text-decoration: none; }
.hfk-foot a:hover { color: var(--hfk-accent); text-decoration: underline; }
.hfk-foot__col--wide p { color: var(--hfk-ink-soft); line-height: 1.6; margin: 0 0 10px; }
.hfk-foot__col--wide .widget.hfk-foot__col--wide section { margin: 0 0 18px; }
.hfk-foot__col--wide .widget-title { font-size: .82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--hfk-ink-soft); margin: 0 0 12px; }
.hfk-foot__base { border-top: 1px solid var(--hfk-line); margin-top: 30px; padding-top: 18px;
  display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: space-between;
  color: var(--hfk-ink-soft); font-size: .84rem; }
.hfk-foot__base p { margin: 0; }

/* Top categories list ----------------------------------------------------- */
.hfk-catlist li { display: flex; justify-content: space-between; gap: 10px; }
.hfk-catlist__n { color: var(--hfk-ink-soft); font-size: .8rem; flex: 0 0 auto; }
:is(.hfk-side.sidebar-main) .hfk-side__more { margin: 12px 0 0; font-size: .85rem; }
:is(.hfk-side.sidebar-main) .hfk-side__more a { color: var(--hfk-accent); font-weight: 600; }

/* Brand accent -----------------------------------------------------------
   The logo leans on teal and uses orange only for the small node marks, so
   orange is kept for the category pill and focus rings rather than large
   fills, which would overpower the page. */
.hfk-card__cat { background: var(--hfk-orange); color: #fff; }
.hfk-card__cat:hover { background: #fff; color: var(--hfk-orange-strong); }
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible { outline: 2px solid var(--hfk-orange); outline-offset: 2px; }
.hfk-foot__base { border-top-color: var(--hfk-line); }

/* ==========================================================================
   Premium pass: depth, rhythm and a dark footer.
   ========================================================================== */
:root {
  --hfk-ink-deep:  #06181d;   /* footer and dark surfaces */
  --hfk-shadow:    0 1px 2px rgba(6,24,29,.06), 0 8px 24px rgba(6,24,29,.07);
  --hfk-shadow-lg: 0 2px 4px rgba(6,24,29,.07), 0 18px 44px rgba(6,24,29,.12);
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Cards lift rather than sit flat, and the image eases in on hover. */
.hfk-card { box-shadow: var(--hfk-shadow); border-color: transparent; overflow: hidden; }
.hfk-card:hover { box-shadow: var(--hfk-shadow-lg); }
.hfk-card__media img { transition: transform .5s cubic-bezier(.2,.6,.2,1); }
.hfk-card:hover .hfk-card__media img { transform: scale(1.04); }
.hfk-card__cat { box-shadow: 0 2px 8px rgba(251,58,6,.35); letter-spacing: .02em; }

/* Section headings get a short brand rule instead of a plain label. */
.hfk-section__title { position: relative; }
.hfk-section__head .hfk-section__title::after {
  content: ""; display: block; width: 42px; height: 3px; border-radius: 3px;
  margin-top: 9px; background: linear-gradient(90deg, var(--hfk-accent), var(--hfk-orange));
}

/* Single post ------------------------------------------------------------- */
/* Astra's own widths are percentage based; these pin the reading column and
   the sidebar to fixed, comfortable sizes once there is room for both. */
@media (min-width: 1024px) {
  .single-post #primary  { width: calc(100% - 348px); }
  .single-post #secondary { width: 312px; padding-left: 0; }
}
.single-post .ast-container { max-width: var(--hfk-maxw); }
.single-post .entry-title { font-size: clamp(1.6rem, 3.2vw, 2.3rem); line-height: 1.22; letter-spacing: -.01em; }
.single-post .entry-content { font-size: 1.03rem; line-height: 1.75; color: #22303a; }
.single-post .entry-content > p { max-width: 68ch; }
.single-post .entry-content h2 { font-size: 1.35rem; margin: 1.8em 0 .6em; letter-spacing: -.01em; }
.single-post .entry-content h3 { font-size: 1.12rem; margin: 1.5em 0 .5em; }
.single-post .entry-content a { color: var(--hfk-accent-strong); text-underline-offset: 2px; }

.hfk-hero { margin: 0 0 26px; }
.hfk-hero__img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--hfk-radius); background: var(--hfk-bg-sunken); box-shadow: var(--hfk-shadow);
}

/* Pagination -------------------------------------------------------------- */
/* The numbers were rendering as bare text; these make them real targets. */
.ast-pagination.navigation.pagination { margin-top: 32px; }
.ast-pagination .page-numbers.navigation.pagination .page-numbers,
.hfk-home__main .page-numbers.hfk-archive .page-numbers.hfk-search-page .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 13px; margin: 0 4px 8px 0;
  border: 1px solid var(--hfk-line); border-radius: 10px;
  background: var(--hfk-bg); color: var(--hfk-ink);
  font-size: .92rem; font-weight: 600; text-decoration: none;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.page-numbers:hover { border-color: var(--hfk-accent); color: var(--hfk-accent); background: var(--hfk-accent-soft); }
.page-numbers.current { background: var(--hfk-accent); border-color: var(--hfk-accent); color: #fff; }
.page-numbers.dots { border-color: transparent; background: none; }
.navigation.pagination .nav-links { display: flex; flex-wrap: wrap; align-items: center; }
.navigation.pagination .screen-reader-text { position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Dark footer ------------------------------------------------------------- */
.hfk-foot {
  background: var(--hfk-ink-deep); border-top: 0; color: #c6d4d8;
  /* A thin brand rule reads as deliberate where a hard edge reads as a seam. */
  box-shadow: inset 0 3px 0 0 var(--hfk-accent);
}
.hfk-foot a { color: #e4ecee; }
.hfk-foot a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--hfk-orange); }
.hfk-foot__head { color: #7f98a0; }
.hfk-foot__col--wide p.hfk-foot__col--wide .widget-title { color: #9fb3b9; }
.hfk-foot__base { border-top: 1px solid rgba(255,255,255,.10); color: #8ba3aa; }
/* Any widget the owner adds to the footer area inherits the dark surface. */
.hfk-foot input[type="text"].hfk-foot input[type="email"] {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  color: #fff; border-radius: 9px; padding: 9px 12px; max-width: 100%;
}
.hfk-foot input::placeholder { color: #8ba3aa; }
.hfk-foot button.hfk-foot input[type="submit"] {
  background: var(--hfk-orange); border: 0; color: #fff; border-radius: 9px;
  padding: 10px 16px; font-weight: 600; cursor: pointer;
}
.hfk-foot button:hover.hfk-foot input[type="submit"]:hover { background: var(--hfk-orange-strong); }

/* Sidebar panels on single posts share the card treatment. */
:is(.hfk-side.sidebar-main) .widget { box-shadow: var(--hfk-shadow); border-color: transparent; }

/* Header: logo and menu on one line ---------------------------------------- */
/* The site title is switched off in the theme options; this also hides it if
   the option is ever turned back on, so the logo never stacks again. */
.site-header .site-title { display: none !important; }
.site-branding { display: flex; align-items: center; }
.site-header .custom-logo-link,
.site-header .site-logo-img { display: flex; align-items: center; line-height: 0; }
.site-header .custom-logo { display: block; height: auto; }
#masthead .ast-builder-grid-row { align-items: center; }
.site-header-primary-section-left,
.site-header-primary-section-right { align-items: center; }

/* Menu icons --------------------------------------------------------------- */
.hfk-mi {
  font-family: 'Material Symbols Outlined';
  font-weight: normal; font-style: normal;
  font-size: 19px; line-height: 1; letter-spacing: normal;
  text-transform: none; display: inline-block; white-space: nowrap;
  direction: ltr; word-wrap: normal;
  /* Ligatures are what turn the word "home" into the glyph. */
  -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  color: var(--hfk-accent);
  margin-right: 7px; flex: 0 0 auto;
}
.main-header-menu .menu-link.main-header-menu a { display: inline-flex; align-items: center; }
.main-header-menu .menu-item:hover > .menu-link .hfk-mi,
.main-header-menu .current-menu-item > .menu-link .hfk-mi { color: var(--hfk-orange); }
.hfk-mi-label { display: inline-block; }

/* The mobile panel stacks, so the icons act as a left rail. */
.ast-mobile-popup-drawer .hfk-mi.ast-mobile-header-wrap .hfk-mi { font-size: 20px; margin-right: 10px; }

/* Image framing ------------------------------------------------------------
   These are photographs of people. A wide crop cut faces off, so the card
   frame is portrait and anchored at the top where faces sit, and the single
   post shows the whole photo rather than cropping it at all. */
.hfk-card__media { aspect-ratio: 4 / 5; }
.hfk-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

.hfk-hero__img {
  aspect-ratio: auto;
  max-height: 560px;
  object-fit: contain;
  background: var(--hfk-bg-sunken);
}
@media (max-width: 600px) { .hfk-hero__img { max-height: 420px; } }

/* Keep the empty-state mark centred in the taller frame. */
.hfk-card__media--empty svg { width: 34px; height: 34px; }

/* Keeping the nine menu items on one line beside the logo ------------------
   Measured on the live header: nine items wanted 1109px of a 970px column,
   so two wrapped to a second row and the row grew to 160px. 16px side padding
   and a 16px label were the bulk of it. */
#masthead .main-header-menu > li > .menu-link,
#masthead .main-header-menu > li > a {
  padding-left: 9px;
  padding-right: 9px;
  font-size: 15px;
}
.main-header-menu .hfk-mi { margin-right: 5px; }

/* Between the mobile breakpoint and a roomy desktop there is not enough room
   for icon and label both, so the label wins and the icons step aside. */
@media (min-width: 922px) and (max-width: 1150px) {
  #masthead .main-header-menu > li > .menu-link,
  #masthead .main-header-menu > li > a { padding-left: 6px; padding-right: 6px; font-size: 14px; }
  #masthead .main-header-menu > li > a > .hfk-mi { display: none; }
}

/* Report form --------------------------------------------------------------
   The report page linked from the sidebar, the footer and every post had no
   form on it at all. This is that form. */
.hfk-reportform { max-width: 620px; margin: 0; }
.hfk-field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 18px; }
.hfk-field label { font-weight: 600; color: var(--hfk-ink); }
.hfk-req { color: var(--hfk-orange); }
.hfk-opt { font-weight: 400; color: var(--hfk-ink-soft); }
.hfk-hint { font-size: .86em; color: var(--hfk-ink-soft); }
.hfk-reportform input[type="url"],
.hfk-reportform input[type="email"],
.hfk-reportform select,
.hfk-reportform textarea {
  width: 100%; padding: 11px 13px;
  border: 1px solid var(--hfk-line); border-radius: var(--hfk-radius-sm);
  background: var(--hfk-bg); color: var(--hfk-ink);
  font: inherit; line-height: 1.45;
}
.hfk-reportform textarea { resize: vertical; min-height: 130px; }
.hfk-reportform :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--hfk-accent); outline-offset: 1px; border-color: var(--hfk-accent);
}
.hfk-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 22px; border: 0; border-radius: var(--hfk-radius-sm);
  background: var(--hfk-accent); color: #fff;
  font: inherit; font-weight: 600; cursor: pointer;
}
.hfk-btn:hover { background: var(--hfk-accent-strong); }
.hfk-btn:focus-visible { outline: 2px solid var(--hfk-ink); outline-offset: 2px; }

/* Off-screen rather than display:none, so bots that skip hidden fields still
   fill it in. */
.hfk-pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.hfk-note { padding: 14px 16px; border-radius: var(--hfk-radius-sm); margin: 0 0 22px; }
.hfk-note p { margin: 0; }
.hfk-note--ok { background: var(--hfk-accent-soft); border-left: 3px solid var(--hfk-accent); }
.hfk-note--warn { background: #fdeeea; border-left: 3px solid var(--hfk-orange); }
.hfk-reportform__legal { margin-top: 4px; }

/* Clickable card image -----------------------------------------------------
   The photo is what people aim at, so it opens the post. The category pill
   sits above it and keeps its own destination. */
.hfk-card__link { display: block; width: 100%; height: 100%; }
.hfk-card__link img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.hfk-card__media--empty .hfk-card__link {
  display: flex; align-items: center; justify-content: center; color: var(--hfk-ink-soft);
}
.hfk-card__cat { position: relative; z-index: 2; }
.hfk-card:hover .hfk-card__link img { transform: scale(1.03); }
.hfk-card__link img { transition: transform .35s ease; }
@media (prefers-reduced-motion: reduce) { .hfk-card__link img { transition: none; } }

/* Single post image --------------------------------------------------------
   object-fit: contain drew grey bars down both sides of every portrait
   photo. Sizing the image to its own proportions removes them and shows the
   picture at full resolution. */
.hfk-hero { margin: 0 0 24px; text-align: center; }
.hfk-hero__img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 660px;
  margin-inline: auto;
  object-fit: initial;
  aspect-ratio: auto;
  background: none;
  border-radius: var(--hfk-radius);
  box-shadow: var(--hfk-shadow);
}
@media (max-width: 600px) { .hfk-hero__img { max-height: none; width: 100%; } }

/* Sidebar search -----------------------------------------------------------
   The four-column layout was behind a viewport media query, so a 312px
   sidebar on a wide screen still got four columns and the labels collided.
   In the sidebar it always stacks, whatever the window is doing. */
.hfk-search--side .hfk-search__row { grid-template-columns: 1fr; gap: 10px; }
.hfk-search--side .hfk-search__submit { width: 100%; }
.hfk-search--side .hfk-field label { font-size: .82em; letter-spacing: .02em; text-transform: none; }

/* Belt and braces for the byline: if a layout we have not met renders the
   author anyway, it still does not show. The date stays. */
.ast-article-single .post-author,
.ast-article-post .post-author,
.entry-meta .posted-by,
.entry-meta .author { display: none !important; }

/* Quick access rail --------------------------------------------------------
   Six destinations as large tap targets, so a phone user is not reading a
   nine-item menu to find the safety guide. Scrolls sideways rather than
   wrapping into a tall block. */
.hfk-quicknav__wrap { border-bottom: 1px solid var(--hfk-line); background: var(--hfk-bg); }
.hfk-quicknav ul {
  display: flex; gap: 8px; margin: 0; padding: 12px 0; list-style: none;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.hfk-quicknav ul::-webkit-scrollbar { display: none; }
.hfk-quicknav li { flex: 0 0 auto; }
.hfk-quicknav a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border: 1px solid var(--hfk-line); border-radius: 999px;
  background: var(--hfk-bg); color: var(--hfk-ink);
  font-size: .93rem; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.hfk-quicknav a:hover { border-color: var(--hfk-accent); color: var(--hfk-accent); background: var(--hfk-accent-soft); }
.hfk-quicknav a:focus-visible { outline: 2px solid var(--hfk-accent); outline-offset: 2px; }
.hfk-quicknav svg { width: 17px; height: 17px; flex: 0 0 auto; }

/* App download -------------------------------------------------------------
   Rendered only when the APK is really on disk, and it states the real size. */
.hfk-appdl {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 18px; border-radius: var(--hfk-radius-sm);
  background: var(--hfk-accent); color: #fff; text-decoration: none;
}
.hfk-appdl:hover { background: var(--hfk-accent-strong); color: #fff; }
.hfk-appdl svg { width: 21px; height: 21px; flex: 0 0 auto; }
.hfk-appdl__text { display: flex; flex-direction: column; line-height: 1.25; }
.hfk-appdl__text small { opacity: .85; font-size: .78em; }
.hfk-appdl--foot { margin-top: 18px; background: var(--hfk-orange); }
.hfk-appdl--foot:hover { background: var(--hfk-orange-strong); }

/* Trust panel --------------------------------------------------------------
   Four statements about how the service runs. No counts, no badges. */
.hfk-section--sunken { background: var(--hfk-bg-sunken); border-top: 1px solid var(--hfk-line); }
.hfk-trust { padding: 10px 0 4px; }
.hfk-trust__h { margin: 0 0 22px; font-size: clamp(1.35rem, 2.4vw, 1.7rem); }
.hfk-trust__grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 680px) { .hfk-trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .hfk-trust__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hfk-trust__item {
  background: var(--hfk-bg); border: 1px solid var(--hfk-line);
  border-radius: var(--hfk-radius); padding: 20px;
}
.hfk-trust__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 11px;
  background: var(--hfk-accent-soft); color: var(--hfk-accent); margin-bottom: 12px;
}
.hfk-trust__icon svg { width: 21px; height: 21px; }
.hfk-trust__item h3 { margin: 0 0 8px; font-size: 1.02rem; line-height: 1.35; }
.hfk-trust__item p { margin: 0; font-size: .93rem; color: var(--hfk-ink-soft); line-height: 1.6; }
.hfk-trust__links { display: flex; flex-wrap: wrap; gap: 18px; margin: 22px 0 0; }
.hfk-trust__links a { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.hfk-trust__links svg { width: 17px; height: 17px; }

/* Footer about -------------------------------------------------------------
   The standing description of the business. */
.hfk-about__logo img { max-width: 190px; height: auto; margin-bottom: 14px; }
.hfk-about__lead { font-size: 1.02rem; color: #fff; }
.hfk-about p { margin: 0 0 12px; line-height: 1.65; }
.hfk-about__marks { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 9px; }
.hfk-about__marks li { display: flex; align-items: flex-start; gap: 9px; font-size: .9rem; }
.hfk-about__marks svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 2px; color: var(--hfk-orange); }
.hfk-foot__base { display: grid; gap: 4px; }
.hfk-foot__copy { font-weight: 600; }
.hfk-foot__mark.hfk-foot__age { font-size: .86rem; opacity: .78; }
.hfk-foot__age { display: inline-flex; align-items: center; gap: 7px; }
.hfk-foot__age svg { width: 15px; height: 15px; }

/* Connect block ------------------------------------------------------------
   The connect plugin ships its own inline styling. Rather than edit the
   plugin, where an update would wipe the change, its block is restyled here
   to match the rest of the site. */
.gscb-wrap.gscb-cta {
  background: var(--hfk-bg) !important;
  border: 1px solid var(--hfk-line) !important;
  border-radius: var(--hfk-radius) !important;
  box-shadow: var(--hfk-shadow);
  padding: 22px !important;
  margin: 28px 0 !important;
}
.gscb-btn {
  border-radius: var(--hfk-radius-sm) !important;
  font-weight: 600 !important;
  padding: 11px 16px !important;
}

/* ---------------------------------------------------------------------------
   Page content
   A small set of components the written pages are built from. Deliberately
   restrained: hairline rules and whitespace rather than tinted panels, because
   stacked grey boxes were what made the old pages read as a template demo.
   --------------------------------------------------------------------------- */

.hfk-doc { max-width: 74ch; }
.hfk-doc > * + * { margin-top: 1.15em; }
.hfk-doc h2 {
	margin-top: 2.2em;
	font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem);
	line-height: 1.25;
	letter-spacing: -0.01em;
	scroll-margin-top: 90px;
}
.hfk-doc h3 {
	margin-top: 1.7em;
	font-size: clamp(1.02rem, 0.96rem + 0.35vw, 1.17rem);
	line-height: 1.3;
}
.hfk-doc p,
.hfk-doc li { line-height: 1.72; }
.hfk-doc ul,
.hfk-doc ol { padding-left: 1.25em; }
.hfk-doc li + li { margin-top: 0.5em; }

/* The opening paragraph: larger, quieter, never a coloured band. */
.hfk-lede {
	font-size: clamp(1.03rem, 0.98rem + 0.3vw, 1.18rem);
	line-height: 1.62;
	opacity: 0.9;
}

/* Section lead-in with an icon. The icon is decorative; the text carries it. */
.hfk-doc h2 .hfk-ico,
.hfk-doc h3 .hfk-ico {
	width: 1em;
	height: 1em;
	margin-right: 0.45em;
	vertical-align: -0.1em;
	opacity: 0.6;
	flex: none;
}

/* Key/value rows, used for "what we do / what we do not", definitions, scope. */
.hfk-kv { margin: 1.4em 0; border-top: 1px solid var(--hfk-rule, rgba(128,128,128,0.22)); }
.hfk-kv__row {
	display: grid;
	grid-template-columns: minmax(10rem, 14rem) 1fr;
	gap: 0.4em 1.6em;
	padding: 0.95em 0;
	border-bottom: 1px solid var(--hfk-rule, rgba(128,128,128,0.22));
}
.hfk-kv__row > dt { font-weight: 700; }
.hfk-kv__row > dd { margin: 0; opacity: 0.92; }
@media (max-width: 640px) {
	.hfk-kv__row { grid-template-columns: 1fr; gap: 0.25em; }
}

/* A short aside. One hairline on the leading edge, no fill. */
.hfk-note {
	margin: 1.6em 0;
	padding: 0.1em 0 0.1em 1.1em;
	border-left: 2px solid currentColor;
}
.hfk-note > p { margin: 0.6em 0; }
.hfk-note strong { font-weight: 700; }

/* Numbered process. The counter is drawn, so the list stays semantic. */
.hfk-steps { list-style: none; padding: 0; margin: 1.5em 0; counter-reset: hfkstep; }
.hfk-steps > li {
	counter-increment: hfkstep;
	position: relative;
	padding-left: 3rem;
	min-height: 2rem;
}
.hfk-steps > li + li { margin-top: 1.3em; }
.hfk-steps > li::before {
	content: counter(hfkstep);
	position: absolute;
	left: 0;
	top: -0.1em;
	width: 2rem;
	height: 2rem;
	display: grid;
	place-items: center;
	border: 1px solid var(--hfk-rule, rgba(128,128,128,0.35));
	border-radius: 50%;
	font-size: 0.82rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.hfk-steps > li > strong { display: block; margin-bottom: 0.2em; }

/* Two-up facts. Collapses to one column well before the sidebar does. */
.hfk-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 1.1em 2em;
	margin: 1.5em 0;
}
.hfk-cols > * { margin: 0; }
.hfk-cols h3 { margin-top: 0; }

/* Inline list of page links, used at the end of a section. */
.hfk-jump { display: flex; flex-wrap: wrap; gap: 0.55em; margin: 1.6em 0; padding: 0; list-style: none; }
.hfk-jump > li { margin: 0; }
.hfk-jump a {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding: 0.5em 0.95em;
	border: 1px solid var(--hfk-rule, rgba(128,128,128,0.3));
	border-radius: 999px;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}
.hfk-jump a:hover,
.hfk-jump a:focus-visible { border-color: currentColor; }
.hfk-jump .hfk-ico { width: 1.05em; height: 1.05em; flex: none; opacity: 0.75; }

/* On-page contents. Only used where a page is long enough to need one. */
.hfk-toc {
	margin: 1.8em 0 2.4em;
	padding: 1.1em 1.3em;
	border: 1px solid var(--hfk-rule, rgba(128,128,128,0.22));
	border-radius: 10px;
}
.hfk-toc > p { margin: 0 0 0.6em; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }
.hfk-toc ol { margin: 0; padding-left: 1.2em; }
.hfk-toc li + li { margin-top: 0.35em; }
.hfk-toc a { text-decoration: none; }
.hfk-toc a:hover { text-decoration: underline; }

/* Last-reviewed line at the foot of a policy. */
.hfk-revised { margin-top: 2.4em; padding-top: 1em; border-top: 1px solid var(--hfk-rule, rgba(128,128,128,0.22)); font-size: 0.86rem; opacity: 0.72; }

/* Legacy classes from the previous copy, so nothing is left unstyled while
   pages are rewritten one batch at a time. */
.hfk-page-lede { font-size: clamp(1.03rem, 0.98rem + 0.3vw, 1.18rem); line-height: 1.62; opacity: 0.9; }
.hfk-page-boost > * + * { margin-top: 1.15em; }
.hfk-contact-actions { display: flex; flex-wrap: wrap; gap: 0.55em; margin: 1.6em 0; }
.hfk-contact-actions a {
	display: inline-flex; align-items: center; gap: 0.45em;
	padding: 0.5em 0.95em; border: 1px solid var(--hfk-rule, rgba(128,128,128,0.3));
	border-radius: 999px; font-size: 0.9rem; font-weight: 600; text-decoration: none;
}

/* Live indexes (topics page, site menu). */
.hfk-index { list-style: none; padding: 0; margin: 1.2em 0; }
.hfk-index > li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1em;
	padding: 0.6em 0;
	border-bottom: 1px solid var(--hfk-rule, rgba(128,128,128,0.18));
}
.hfk-index > li + li { margin-top: 0; }
.hfk-index a { text-decoration: none; font-weight: 600; }
.hfk-index a:hover { text-decoration: underline; }
.hfk-index__n { font-size: 0.8rem; font-variant-numeric: tabular-nums; opacity: 0.6; flex: none; }

.hfk-tagcloud { display: flex; flex-wrap: wrap; gap: 0.5em; list-style: none; padding: 0; margin: 1.2em 0; }
.hfk-tagcloud > li { margin: 0; }
.hfk-tagcloud a {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4em;
	padding: 0.38em 0.8em;
	border: 1px solid var(--hfk-rule, rgba(128,128,128,0.28));
	border-radius: 999px;
	font-size: 0.86rem;
	text-decoration: none;
	line-height: 1.35;
}
.hfk-tagcloud a:hover { border-color: currentColor; }

.hfk-sitemap {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1.6em 2.2em;
	margin: 1.6em 0;
}
.hfk-sitemap__group h3 {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0 0 0.6em;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.72;
}
.hfk-sitemap__group h3 .hfk-ico { width: 1.1em; height: 1.1em; flex: none; opacity: 0.7; }
.hfk-sitemap__group ul { list-style: none; padding: 0; margin: 0; }
.hfk-sitemap__group li + li { margin-top: 0.45em; }
.hfk-sitemap__group a { text-decoration: none; }
.hfk-sitemap__group a:hover { text-decoration: underline; }

/* Jetpack's subscribe form, brought into line with the page components. */
.hfk-doc .wp-block-jetpack-subscriptions__container input[type="email"],
.hfk-doc #subscribe-email input[type="email"] {
	width: 100%;
	max-width: 24rem;
	padding: 0.7em 0.9em;
	border: 1px solid var(--hfk-rule, rgba(128,128,128,0.35));
	border-radius: 8px;
	font: inherit;
}
.hfk-doc #subscribe-submit button,
.hfk-doc .wp-block-jetpack-subscriptions__container button {
	margin-top: 0.7em;
	padding: 0.7em 1.4em;
	border-radius: 999px;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}


/* trust section layout fix */
/* .hfk-trust is used two ways. As a <div> it holds the cards directly and
   must stay a grid. As a <section> it wraps a heading, .hfk-trust__grid and
   a links row, so it must be a plain block, otherwise the inner grid is
   given a single narrow column and the cards collapse on top of each other. */
section.hfk-trust {
	display: block;
	grid-template-columns: none;
	gap: 0;
}

/* Never let a card go narrower than its content can read at. */
.hfk-trust__grid {
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

@media (max-width: 679px) {
	.hfk-trust__grid { grid-template-columns: 1fr; }
}


/* pagination */
.navigation.pagination,
.ast-pagination {
	margin: 32px 0 8px;
}

.navigation.pagination .nav-links,
.ast-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.navigation.pagination .page-numbers,
.ast-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 13px;
	border: 1px solid var(--hfk-line, #e2e6ea);
	border-radius: var(--hfk-radius, 10px);
	background: var(--hfk-bg, #fff);
	color: var(--hfk-ink, #16202a);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.navigation.pagination a.page-numbers:hover,
.navigation.pagination a.page-numbers:focus-visible,
.ast-pagination a.page-numbers:hover,
.ast-pagination a.page-numbers:focus-visible {
	background: var(--hfk-accent-soft, #e6f2f4);
	border-color: var(--hfk-accent, #00687a);
	color: var(--hfk-accent, #00687a);
}

.navigation.pagination .page-numbers.current,
.ast-pagination .page-numbers.current {
	background: var(--hfk-accent, #00687a);
	border-color: var(--hfk-accent, #00687a);
	color: #fff;
}

/* The ellipsis is not a control, so it gets no box. */
.navigation.pagination .page-numbers.dots,
.ast-pagination .page-numbers.dots {
	min-width: 0;
	padding: 0 4px;
	border: 0;
	background: none;
	color: var(--hfk-ink-soft, #5a6872);
}

/* Previous and next read as words, so they need room for them. */
.navigation.pagination .prev.page-numbers,
.navigation.pagination .next.page-numbers,
.ast-pagination .prev.page-numbers,
.ast-pagination .next.page-numbers {
	padding: 0 18px;
}

@media (max-width: 520px) {
	.navigation.pagination .page-numbers,
	.ast-pagination .page-numbers {
		min-width: 38px;
		height: 38px;
		padding: 0 10px;
	}
}