/*
Theme Name: Cutle Blog
Theme URI: https://cutle.co/
Author: Cutle
Author URI: https://cutle.co/
Description: A lightweight, responsive blog theme for the cutle.co ID card guides. The colour and type tokens deliberately mirror the landing page so the blog and the marketing site look like one product, without the blog depending on the landing page build.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cutle
Tags: blog, one-column, custom-logo, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks
*/

/* --------------------------------------------------------------------------
   Design tokens - intentionally the same values as site/assets/css/main.css
   -------------------------------------------------------------------------- */
:root {
  --c-accent: #0f766e;
  --c-accent-hover: #115e59;
  --c-accent-soft: #ccfbf1;
  --c-accent-tint: #f0fdfa;

  --c-bg: #ffffff;
  --c-bg-alt: #f8fafc;
  --c-bg-sunken: #f1f5f9;
  --c-ink: #0b1220;
  --c-ink-soft: #1e293b;
  --c-body: #475569;
  --c-muted: #64748b;
  --c-line: #e2e8f0;
  --c-line-strong: #cbd5e1;

  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --step--1: clamp(0.8125rem, 0.79rem + 0.11vw, 0.875rem);
  --step-0: clamp(0.9375rem, 0.91rem + 0.14vw, 1rem);
  --step-1: clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem);
  --step-2: clamp(1.25rem, 1.17rem + 0.4vw, 1.5rem);
  --step-3: clamp(1.5rem, 1.34rem + 0.8vw, 2rem);
  --step-4: clamp(1.875rem, 1.6rem + 1.35vw, 2.75rem);

  --radius-sm: 0.5rem;
  --radius: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.07), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 8px 20px -8px rgba(15, 23, 42, 0.16), 0 2px 6px rgba(15, 23, 42, 0.05);

  --container: 71.25rem;
  --container-narrow: 47.5rem;

  /* Spacing, motion and header height mirror site/assets/css/main.css so the
     two headers measure identically. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --header-h: 4.5rem;
  --dur: 220ms;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-body);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  color: var(--c-ink);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 { font-size: var(--step-4); letter-spacing: -0.03em; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }

p { margin: 0 0 1.15em; }

a { color: var(--c-accent); text-underline-offset: 0.18em; }
a:hover { color: var(--c-accent-hover); }

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1rem, 0.5rem + 2.2vw, 2rem);
}

.container--narrow { max-width: var(--container-narrow); }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 200;
  padding: 0.6rem 1rem;
  background: var(--c-ink);
  color: #fff;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus { top: 0.75rem; color: #fff; }

.visually-hidden {
  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;
}

/* --------------------------------------------------------------------------
   Header - identical to the landing page header in
   site/assets/css/main.css. Both headers use the same markup and classes, so
   a reader moving between the blog and the marketing site sees no change.
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--c-line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--c-ink);
  font-weight: 750;
  font-size: var(--step-1);
  letter-spacing: -0.03em;
  text-decoration: none;
  padding-block: var(--space-2);
}
.brand:hover { color: var(--c-ink); }

.brand__mark {
  width: 2rem;
  height: 2rem;
  border-radius: 0.6rem;
  flex: none;
  box-shadow: var(--shadow-xs);
}

.brand__text small {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-muted);
  line-height: 1;
  margin-top: 0.15rem;
  white-space: nowrap;
}

.nav { margin-left: auto; }

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__list li + li { margin-top: 0; }

.nav__link {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--c-ink-soft);
  font-size: var(--step-0);
  font-weight: 550;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav__link:hover { background: var(--c-bg-sunken); color: var(--c-ink); }
.nav__link[aria-current="page"],
.nav .current-menu-item > .nav__link { color: var(--c-accent); font-weight: 650; }

/* Second-level items, in case an editor adds one: a small dropdown. */
.nav .menu-item-has-children { position: relative; }
.nav .sub-menu {
  position: absolute;
  left: 0;
  top: 100%;
  display: none;
  min-width: 12rem;
  padding: var(--space-2);
  margin: 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  flex-direction: column;
}
.nav .sub-menu .nav__link { display: block; }
.nav .menu-item-has-children:hover .sub-menu,
.nav .menu-item-has-children:focus-within .sub-menu { display: flex; }

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: var(--space-2);
}

.nav-toggle {
  display: none;
  margin-left: auto;
  padding: var(--space-2);
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-sm);
  color: var(--c-ink);
  cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 1.1rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: relative;
}

.nav-toggle__bars::before { top: -0.36rem; }
.nav-toggle__bars::after { top: 0.28rem; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(0.36rem) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-0.28rem) rotate(-45deg); }

.nav__actions-mobile {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--c-line);
}

/* The labels are nowrap, so the header drops the secondary button before the
   menu itself collapses. Same breakpoints as the landing page. */
@media (max-width: 68rem) {
  .header-actions .btn--secondary { display: none; }
}

@media (max-width: 56rem) {
  .nav-toggle { display: inline-flex; }

  .nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin: 0;
    background: #fff;
    border-bottom: 1px solid var(--c-line);
    box-shadow: var(--shadow-md);
    padding: var(--space-4) clamp(1rem, 0.5rem + 2.2vw, 2rem) var(--space-5);
    display: none;
  }

  .nav[data-open="true"] { display: block; }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__link {
    display: block;
    padding: var(--space-3) var(--space-2);
    font-size: var(--step-1);
  }

  .header-actions { display: none; }
}

@media (min-width: 56.0625rem) {
  .nav__actions-mobile { display: none; }
}

.search-form { display: flex; gap: 0.4rem; }
.search-form label { display: none; }
.search-form input[type="search"] {
  min-width: 10rem;
  padding: 0.45rem 0.7rem;
  font: inherit;
  font-size: var(--step--1);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--c-ink);
}
.search-form button {
  padding: 0.45rem 0.8rem;
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  color: #fff;
  background: var(--c-accent);
  border: 1px solid var(--c-accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.search-form button:hover { background: var(--c-accent-hover); border-color: var(--c-accent-hover); }

/* --------------------------------------------------------------------------
   Page furniture
   -------------------------------------------------------------------------- */
.page-header {
  padding-block: clamp(2rem, 1.5rem + 3vw, 3.5rem) clamp(1.25rem, 1rem + 1.5vw, 2rem);
  border-bottom: 1px solid var(--c-line);
  background: linear-gradient(180deg, var(--c-bg-alt), #fff);
}
.page-header p { max-width: 46rem; margin-bottom: 0; font-size: var(--step-1); }

.eyebrow {
  color: var(--c-accent);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
}

.breadcrumbs { font-size: var(--step--1); color: var(--c-muted); margin-bottom: 0.75rem; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.breadcrumbs li { margin: 0; display: flex; align-items: center; gap: 0.5rem; }
.breadcrumbs li + li::before { content: "/"; color: var(--c-line-strong); }
.breadcrumbs a { color: var(--c-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--c-accent); text-decoration: underline; }

.site-main { padding-block: clamp(2.5rem, 1.8rem + 3vw, 4rem); }

.section-title {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin: 0 0 1.25rem;
}

/* --------------------------------------------------------------------------
   Post grid and cards
   -------------------------------------------------------------------------- */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: clamp(1.25rem, 0.9rem + 1.6vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.post-grid > li { margin: 0; display: flex; }

.post-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms var(--ease);
}
.post-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--c-line-strong); }

.post-card__media {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--c-accent-soft), var(--c-bg-sunken));
  overflow: hidden;
}
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }

.post-card__body { padding: clamp(1rem, 0.85rem + 0.8vw, 1.4rem); display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }

.post-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin: 0;
  font-size: var(--step--1);
  color: var(--c-muted);
}
.post-card__meta a { color: var(--c-muted); text-decoration: none; }
.post-card__meta a:hover { color: var(--c-accent); text-decoration: underline; }

.post-card__title { font-size: var(--step-1); line-height: 1.3; margin: 0; }
.post-card__title a { color: var(--c-ink); text-decoration: none; }
.post-card__title a:hover { color: var(--c-accent); }

.post-card__excerpt { margin: 0; font-size: var(--step-0); color: var(--c-body); }

.post-card__more { margin-top: auto; padding-top: 0.5rem; font-size: var(--step--1); font-weight: 650; }
.post-card__more a { text-decoration: none; }
.post-card__more a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Single post and pages
   -------------------------------------------------------------------------- */
.entry { max-width: 42rem; margin-inline: auto; }

.entry__header { margin-bottom: 2rem; }
.entry__meta { font-size: var(--step--1); color: var(--c-muted); display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin: 0; }
.entry__meta a { color: var(--c-muted); text-decoration: none; }
.entry__meta a:hover { color: var(--c-accent); }

.entry-thumbnail { margin: 0 0 2rem; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--c-line); }
.entry-thumbnail img { width: 100%; }

.entry-content { font-size: var(--step-1); color: var(--c-body); }
.entry-content > * + * { margin-top: 1.15em; }
.entry-content h2 { font-size: var(--step-3); margin-top: 1.8em; }
.entry-content h3 { font-size: var(--step-2); margin-top: 1.6em; }
.entry-content ul, .entry-content ol { padding-left: 1.35rem; }
.entry-content li + li { margin-top: 0.4rem; }
.entry-content blockquote {
  margin: 1.6em 0;
  padding: 0.2em 0 0.2em 1.25em;
  border-left: 3px solid var(--c-accent-soft);
  color: var(--c-ink-soft);
  font-style: italic;
}
.entry-content code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--c-bg-sunken);
  padding: 0.15em 0.4em;
  border-radius: 4px;
}
.entry-content pre {
  background: var(--c-bg-sunken);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  overflow-x: auto;
  font-size: var(--step-0);
}
.entry-content pre code { background: none; padding: 0; }
.entry-content img { border-radius: var(--radius); }
.entry-content table { width: 100%; border-collapse: collapse; font-size: var(--step-0); }
.entry-content th, .entry-content td { border: 1px solid var(--c-line); padding: 0.6rem 0.8rem; text-align: left; vertical-align: top; }
.entry-content th { background: var(--c-bg-alt); color: var(--c-ink); }

/* A wide comparison table must scroll on a phone rather than push the whole
   page sideways. Wrapping the table in a block with its own scrollbar keeps
   the page layout intact; the table's internal display values still apply, so
   the columns stay aligned. */
@media (max-width: 44rem) {
  .entry-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .entry-content th, .entry-content td { min-width: 9rem; }
}

.entry-tags { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; font-size: var(--step--1); }
.entry-tags a {
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--c-ink-soft);
  text-decoration: none;
  font-weight: 600;
}
.entry-tags a:hover { border-color: var(--c-accent); color: var(--c-accent); }

.author-box {
  margin-top: 2.5rem;
  padding: 1.25rem 1.4rem;
  background: var(--c-bg-alt);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  font-size: var(--step-0);
}
.author-box h2 { font-size: var(--step-1); margin-bottom: 0.4rem; }
.author-box p { margin: 0; color: var(--c-body); }

/* --------------------------------------------------------------------------
   Related posts and pagination
   -------------------------------------------------------------------------- */
.related { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.related h2 { font-size: var(--step-2); }

.pagination { margin-top: clamp(2rem, 1.6rem + 2vw, 3rem); }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.pagination .page-numbers {
  display: inline-block;
  min-width: 2.4rem;
  padding: 0.45rem 0.7rem;
  text-align: center;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--c-ink-soft);
  text-decoration: none;
  font-weight: 600;
}
.pagination .page-numbers:hover { border-color: var(--c-accent); color: var(--c-accent); }
.pagination .page-numbers.current { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }

/* --------------------------------------------------------------------------
   Comments
   -------------------------------------------------------------------------- */
.comments-area { max-width: 42rem; margin: clamp(2.5rem, 2rem + 2vw, 4rem) auto 0; }
.comments-title, .comment-reply-title { font-size: var(--step-2); }
.comment-list { list-style: none; margin: 0 0 2rem; padding: 0; }
.comment-list ol.children { list-style: none; margin: 1.25rem 0 0; padding-left: 1.25rem; }
.comment-body {
  padding: 1rem 1.25rem;
  background: var(--c-bg-alt);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  margin-bottom: 1.25rem;
}
.comment-meta { font-size: var(--step--1); color: var(--c-muted); margin-bottom: 0.5rem; }
.comment-author img { border-radius: 50%; margin-right: 0.5rem; }
.comment-content { font-size: var(--step-0); }
.comment-content p:last-child { margin-bottom: 0; }

.comment-form { display: grid; gap: 1rem; }
.comment-form label { display: block; font-size: var(--step--1); font-weight: 650; color: var(--c-ink); margin-bottom: 0.3rem; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  padding: 0.6rem 0.8rem;
  font: inherit;
  font-size: var(--step-0);
  color: var(--c-ink);
  background: #fff;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-sm);
}
.comment-form textarea { min-height: 9rem; resize: vertical; }
.comment-form .submit {
  justify-self: start;
  padding: 0.7rem 1.4rem;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--c-accent);
  border: 1px solid var(--c-accent);
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.comment-form .submit:hover { background: var(--c-accent-hover); border-color: var(--c-accent-hover); }
.comment-notes, .logged-in-as { font-size: var(--step--1); color: var(--c-muted); }

/* Cookies-consent checkbox: keep the label readable instead of styled as a
   bold field label, and stop the checkbox from stretching to full width. */
.comment-form .comment-form-cookies-consent {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}
.comment-form .comment-form-cookies-consent label {
  font-weight: 400;
  font-size: var(--step--1);
  color: var(--c-body);
  margin: 0;
}
.comment-form input[type="checkbox"] {
  width: auto;
  flex: none;
  margin-top: 0.3rem;
  accent-color: var(--c-accent);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.78em 1.35em;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--c-ink);
  font: inherit;
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.btn:hover { border-color: var(--c-ink); background: var(--c-bg-alt); color: var(--c-ink); }
.btn--primary {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--c-accent-hover); border-color: var(--c-accent-hover); color: #fff; }
.btn--secondary { background: #fff; border-color: var(--c-line-strong); color: var(--c-ink); box-shadow: var(--shadow-xs); }
.btn--secondary:hover { border-color: var(--c-ink); background: var(--c-bg-alt); }

/* --------------------------------------------------------------------------
   Empty states
   -------------------------------------------------------------------------- */
.empty-state {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  text-align: center;
  background: var(--c-bg-alt);
  border: 1px dashed var(--c-line-strong);
  border-radius: var(--radius-lg);
}
.empty-state p { color: var(--c-body); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  margin-top: clamp(3rem, 2rem + 4vw, 5rem);
  padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem) 1.5rem;
  background: var(--c-bg-alt);
  border-top: 1px solid var(--c-line);
  font-size: var(--step--1);
}
.site-footer__grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
.site-footer h2 {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 0.75rem;
}
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer li + li { margin-top: 0.5rem; }
.site-footer a { color: var(--c-ink-soft); text-decoration: none; }
.site-footer a:hover { color: var(--c-accent); text-decoration: underline; }
.site-footer__bottom {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--c-line);
  color: var(--c-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
}
.site-footer__bottom p { margin: 0; }

/* --------------------------------------------------------------------------
   Block editor / WordPress core output
   -------------------------------------------------------------------------- */
.alignwide { max-width: calc(var(--container-narrow) + 8rem); margin-inline: auto; }
.alignfull { max-width: none; }
.alignleft { float: left; margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { margin-inline: auto; }

.wp-block-image figcaption,
.wp-caption-text { font-size: var(--step--1); color: var(--c-muted); text-align: center; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.screen-reader-text:focus {
  position: static !important;
  width: auto; height: auto;
  clip: auto;
  clip-path: none;
  padding: 0.5rem 1rem;
  background: var(--c-ink);
  color: #fff;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .post-card:hover { transform: none; }
}