/*
Theme Name:  ManRADS
Theme URI:   https://mangroverestorationbydrone.com
Author:      Vitek Digital
Author URI:  https://vitekdigital.com
Description: Custom theme for the ManRADS — Mass and Precise Mangrove Restoration Using Aerial Drone Systems project. Funded by the Darwin Initiative.
Version:     1.0.0
License:     Private
Text Domain: manrads
*/

/* ============================================================
   CUSTOM PROPERTIES
============================================================ */
:root {
  --clr-forest:  #0d6b57;
  --clr-canopy:  #1D9E75;
  --clr-sand:    #F5F0E8;
  --clr-tidal:   #B8D4CE;
  --clr-ink:     #1A1A1A;
  --clr-muted:   #6B6B6B;
  --clr-white:   #FFFFFF;

  --ff-heading: 'Libre Baskerville', Georgia, serif;
  --ff-body:    'Source Sans 3', system-ui, sans-serif;

  --step--1: clamp(0.8rem,  0.78rem + 0.09vw, 0.875rem);
  --step-0:  clamp(1rem,    0.95rem + 0.22vw, 1.125rem);
  --step-1:  clamp(1.125rem, 1rem   + 0.56vw, 1.375rem);
  --step-2:  clamp(1.375rem, 1.15rem + 1vw,   2rem);
  --step-3:  clamp(1.75rem,  1.35rem + 1.78vw, 2.875rem);

  --space-xs:  0.5rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   clamp(2rem, 4vw, 3rem);
  --space-xl:  clamp(3.5rem, 7vw, 5.5rem);

  --measure: 66ch;
  --radius:  6px;
}

/* ============================================================
   RESET
============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--ff-body);
  font-size: var(--step-0);
  color: var(--clr-ink);
  background: var(--clr-white);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

ul { list-style: none; }

/* ============================================================
   SKIP LINK
============================================================ */
a[href="#main"] {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--clr-forest);
  color: var(--clr-white);
  font-family: var(--ff-body);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-110%);
  transition: transform 0.15s ease;
}

a[href="#main"]:focus {
  transform: translateY(0);
}

/* ============================================================
   FOCUS
============================================================ */
:focus-visible {
  outline: 3px solid var(--clr-canopy);
  outline-offset: 3px;
  border-radius: var(--radius);
}

/* ============================================================
   TYPOGRAPHY
============================================================ */
h1, h2, h3, h4 {
  font-family: var(--ff-heading);
  line-height: 1.2;
  color: var(--clr-forest);
}

h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }

p { max-width: var(--measure); }

a {
  color: var(--clr-forest);
  text-underline-offset: 3px;
}

a:hover { color: var(--clr-ink); }

em { font-style: italic; }

/* ============================================================
   HEADER
============================================================ */
header {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  background: var(--clr-white);
  border-block-end: 1px solid var(--clr-tidal);
}

header > div {
  max-width: 1200px;
  margin-inline: auto;
  padding: 1rem var(--space-m);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
}

header > div > a {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  flex-shrink: 0;
}

header nav { position: relative; }

header nav > button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  background: none;
  border: 1px solid var(--clr-tidal);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--clr-forest);
  line-height: 1;
}

header nav > button::before {
  content: '';
  display: block;
  width: 18px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: url('img/icon-menu.svg') no-repeat center / contain;
  mask: url('img/icon-menu.svg') no-repeat center / contain;
}

header nav > button:hover { background: var(--clr-sand); }

header nav > button[aria-expanded="false"] + ul { display: none; }

header nav > button[aria-expanded="true"] + ul {
  display: flex;
  flex-direction: column;
  position: absolute;
  inset-block-start: calc(100% + 1rem);
  inset-inline-end: 0;
  min-width: 180px;
  background: var(--clr-white);
  border: 1px solid var(--clr-tidal);
  border-radius: var(--radius);
  padding: var(--space-xs) 0;
  box-shadow: 0 8px 24px rgba(8, 80, 65, 0.1);
}

header nav a {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--clr-ink);
  text-decoration: none;
  padding: 0.5rem var(--space-m);
  display: block;
  letter-spacing: 0.01em;
}

header nav a:hover { color: var(--clr-forest); }

header nav a[aria-current="page"] {
  color: var(--clr-forest);
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (min-width: 768px) {
  header nav > button { display: none; }

  header nav > button[aria-expanded="false"] + ul,
  header nav > button[aria-expanded="true"] + ul {
    display: flex !important;
    flex-direction: row;
    position: static;
    gap: 2rem;
    background: none;
    border: none;
    padding: 0;
    box-shadow: none;
    min-width: unset;
  }

  header nav a { padding: 0; }
}

/* ============================================================
   SECTION RHYTHM
============================================================ */
main > section { padding-block: var(--space-xl); }

main > section > div {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-m);
}

/* ============================================================
   HERO
============================================================ */
[data-section="hero"] {
  position: relative;
  padding-block: 0;
  min-height: min(88svh, 680px);
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--clr-forest);
}

[data-section="hero"] > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  z-index: 0;
}

[data-section="hero"]::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(4, 24, 16, 0.05) 0%,
    rgba(4, 24, 16, 0.18) 45%,
    rgba(4, 24, 16, 0.62) 100%
  );
}

[data-section="hero"] > div {
  position: relative;
  z-index: 2;
  padding: var(--space-l) var(--space-m);
}

[data-section="hero"] h1 {
  color: var(--clr-white);
  font-size: clamp(1.75rem, 5vw, 3.25rem);
  max-width: 18ch;
  line-height: 1.1;
  margin-block-end: var(--space-s);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

[data-section="hero"] > div > p {
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--step-1);
  max-width: 52ch;
  margin-block-end: var(--space-l);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

[data-section="hero"] nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

[data-section="hero"] nav a {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.375rem;
  border-radius: var(--radius);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

[data-section="hero"] nav a:first-child {
  background: var(--clr-white);
  color: var(--clr-forest);
}

[data-section="hero"] nav a:first-child:hover { background: var(--clr-sand); }

[data-section="hero"] nav a:last-child {
  background: transparent;
  color: var(--clr-white);
  border: 1.5px solid rgba(255, 255, 255, 0.6);
}

[data-section="hero"] nav a:last-child:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.9);
}

/* ============================================================
   MISSION
============================================================ */
[data-section="mission"] {
  background: var(--clr-white);
  text-align: center;
}

[data-section="mission"] > div { max-width: 780px; }

[data-section="mission"] h2 { margin-block-end: var(--space-s); }

[data-section="mission"] p {
  font-size: var(--step-1);
  color: var(--clr-ink);
  max-width: 60ch;
  margin-inline: auto;
}

/* ============================================================
   STATS
============================================================ */
[data-section="stats"] {
  background: var(--clr-forest);
  padding-block: var(--space-l);
}

[data-section="stats"] > div > h2 {
  font-family: var(--ff-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  margin-block-end: var(--space-m);
  max-width: unset;
}

[data-section="stats"] ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-s);
  max-width: unset;
  padding-inline: 0;
  margin-inline: auto;
}

[data-section="stats"] li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-m) var(--space-s);
  border: 1px solid rgba(184, 212, 206, 0.25);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
}

[data-section="stats"] li > strong {
  display: block;
  font-family: var(--ff-heading);
  font-size: clamp(2.5rem, 6vw, 3.75rem);
  font-weight: 700;
  color: var(--clr-white);
  line-height: 1;
}

[data-section="stats"] li > span {
  font-size: var(--step--1);
  color: rgba(255, 255, 255, 0.85);
  margin-block-start: 0.375rem;
}

@media (min-width: 540px) {
  [data-section="stats"] ul { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   APPROACH
============================================================ */
[data-section="approach"] { background: var(--clr-white); }

[data-section="approach"] > div {
  display: grid;
  gap: var(--space-l);
  align-items: center;
}

[data-section="approach"] figure {
  border-radius: var(--radius);
  overflow: hidden;
}

[data-section="approach"] figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

[data-section="approach"] figcaption {
  padding: 0.5rem var(--space-s);
  font-size: var(--step--1);
  color: var(--clr-muted);
  font-style: italic;
  background: var(--clr-sand);
}

[data-section="approach"] h2 { margin-block-end: var(--space-s); }

[data-section="approach"] > div > div > p { margin-block-end: var(--space-s); }

[data-section="approach"] > div > div > a {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 600;
  font-size: var(--step-0);
  text-decoration: none;
  border-block-end: 2px solid var(--clr-tidal);
  padding-block-end: 2px;
  transition: border-color 0.15s ease, color 0.15s ease;
}

[data-section="approach"] > div > div > a:hover {
  color: var(--clr-ink);
  border-color: var(--clr-ink);
}

@media (min-width: 768px) {
  [data-section="approach"] > div { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   PARTNERS
============================================================ */
[data-section="partners"] { background: var(--clr-sand); }

[data-section="partners"] > div > header {
  text-align: center;
  margin-block-end: var(--space-l);
}

[data-section="partners"] > div > header h2 { margin-block-end: 0.5rem; }

[data-section="partners"] > div > header p {
  color: var(--clr-muted);
  margin-inline: auto;
}

[data-section="partners"] ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-s);
}

[data-section="partners"] li > article {
  background: var(--clr-white);
  border: 1px solid var(--clr-tidal);
  border-radius: var(--radius);
  padding: var(--space-m) var(--space-s);
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

[data-section="partners"] article > div {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--clr-tidal);
  background: var(--clr-sand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 700;
  font-family: var(--ff-body);
  color: var(--clr-forest);
  margin-block-end: var(--space-xs);
  flex-shrink: 0;
}

[data-section="partners"] article h3 {
  font-size: var(--step--1);
  font-family: var(--ff-body);
  font-weight: 600;
  margin-block-end: 0.125rem;
}

[data-section="partners"] article p {
  font-size: var(--step--1);
  color: var(--clr-muted);
  max-width: unset;
  line-height: 1.4;
}

[data-section="partners"] > div > p {
  text-align: center;
  margin-block-start: var(--space-l);
  max-width: unset;
}

[data-section="partners"] > div > p a { font-weight: 600; }

@media (min-width: 540px) {
  [data-section="partners"] ul { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) {
  [data-section="partners"] ul { grid-template-columns: repeat(5, 1fr); }
}

/* ============================================================
   UPDATES
============================================================ */
[data-section="updates"] { background: var(--clr-white); }

[data-section="updates"] > div > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-block-end: var(--space-l);
}

[data-section="updates"] > div > header h1,
[data-section="updates"] > div > header h2 { margin: 0; }

[data-section="updates"] > div > header a {
  font-size: var(--step--1);
  font-weight: 600;
  flex-shrink: 0;
}

[data-section="updates"] ul { display: grid; gap: var(--space-s); }

[data-section="updates"] article {
  border: 1px solid var(--clr-tidal);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--clr-white);
  display: grid;
  grid-template-columns: 88px 1fr;
}

[data-section="updates"] article img {
  width: 88px;
  height: 100%;
  min-height: 100px;
  object-fit: cover;
}

[data-section="updates"] article > div {
  padding: var(--space-s) var(--space-m) var(--space-s) var(--space-s);
}

[data-section="updates"] time {
  display: block;
  font-size: var(--step--1);
  color: var(--clr-muted);
  margin-block-end: 0.25rem;
}

[data-section="updates"] article h2,
[data-section="updates"] article h3 {
  font-size: var(--step-0);
  font-family: var(--ff-body);
  font-weight: 600;
  margin-block-end: 0.375rem;
  color: var(--clr-ink);
}

[data-section="updates"] article h2 a,
[data-section="updates"] article h3 a {
  text-decoration: none;
  color: inherit;
}

[data-section="updates"] article h2 a:hover,
[data-section="updates"] article h3 a:hover {
  color: var(--clr-forest);
  text-decoration: underline;
  text-underline-offset: 3px;
}

[data-section="updates"] article > div > p {
  font-size: var(--step--1);
  color: var(--clr-muted);
  max-width: unset;
}

@media (min-width: 680px) {
  [data-section="updates"] ul { grid-template-columns: repeat(3, 1fr); }

  [data-section="updates"] article {
    grid-template-columns: 1fr;
    grid-template-rows: 180px 1fr;
  }

  [data-section="updates"] article img {
    width: 100%;
    height: 180px;
    min-height: unset;
  }

  [data-section="updates"] article > div {
    padding: var(--space-s) var(--space-s) var(--space-m);
  }
}

/* ============================================================
   PAGINATION  (the_posts_pagination output)
============================================================ */
.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  justify-content: center;
  margin-block-start: var(--space-l);
  padding-inline: var(--space-m);
}

/* Scope button look to numbered pagination only */
.pagination .nav-links a,
.pagination .nav-links span {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--clr-tidal);
  color: var(--clr-forest);
  transition: background 0.15s ease;
}

.pagination .nav-links a:hover { background: var(--clr-sand); }

.pagination .nav-links .current {
  background: var(--clr-forest);
  color: var(--clr-white);
  border-color: var(--clr-forest);
}

/* ============================================================
   SUPPORT CTA
============================================================ */
[data-section="support"] {
  background: var(--clr-forest);
  text-align: center;
}

[data-section="support"] > div { max-width: 640px; }

[data-section="support"] h2 {
  color: var(--clr-white);
  margin-block-end: var(--space-s);
}

[data-section="support"] > div > p {
  color: rgba(255, 255, 255, 0.82);
  margin: 0 auto var(--space-l);
  max-width: 52ch;
}

[data-section="support"] nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs);
}

[data-section="support"] nav a {
  display: inline-flex;
  align-items: center;
  padding: 0.875rem 1.75rem;
  border-radius: var(--radius);
  font-size: var(--step-0);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

[data-section="support"] nav a:first-child {
  background: var(--clr-white);
  color: var(--clr-forest);
}

[data-section="support"] nav a:first-child:hover { background: var(--clr-sand); }

[data-section="support"] nav a:last-child {
  background: transparent;
  color: var(--clr-white);
  border: 1.5px solid rgba(255, 255, 255, 0.5);
}

[data-section="support"] nav a:last-child:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.85);
}

/* ============================================================
   FOOTER
============================================================ */
footer {
  background: var(--clr-ink);
  color: rgba(255, 255, 255, 0.7);
  padding-block: var(--space-xl);
}

footer > div {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-m);
}

footer > div > div:first-child {
  display: grid;
  gap: var(--space-l);
  margin-block-end: var(--space-l);
  border-block-end: 1px solid rgba(255, 255, 255, 0.08);
  padding-block-end: var(--space-l);
}

footer strong {
  display: block;
  font-family: var(--ff-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--clr-white);
  letter-spacing: -0.02em;
  margin-block-end: 0.5rem;
}

footer > div > div:first-child > div > p {
  font-size: var(--step--1);
  max-width: 38ch;
}

/* wp_nav_menu() wraps items in a <ul> */
footer nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-content: start;
  list-style: none;
  padding: 0;
  margin: 0;
}

footer nav a {
  font-size: var(--step--1);
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
}

footer nav a:hover { color: var(--clr-white); }

footer > div > div:last-child {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-s);
}

footer > div > div:last-child > p {
  font-size: var(--step--1);
  color: rgba(255, 255, 255, 0.60);
  max-width: 50ch;
}

footer small {
  font-size: var(--step--1);
  color: rgba(255, 255, 255, 0.55);
}

footer small a {
  color: inherit;
  text-underline-offset: 3px;
}

@media (min-width: 768px) {
  footer > div > div:first-child {
    grid-template-columns: 1fr auto;
    align-items: start;
  }
}

/* ============================================================
   POST — single update (single.php)
============================================================ */
[data-section="post"] {
  padding-block-end: var(--space-xl);
}

[data-section="post"] > figure {
  margin: 0;
  overflow: hidden;
  max-height: 480px;
}

[data-section="post"] > figure img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  object-position: center;
}

[data-section="post"] > div {
  max-width: 780px;
  margin-inline: auto;
  padding-inline: var(--space-m);
}

[data-section="post"] > div > header {
  padding-block: var(--space-l) var(--space-m);
  border-block-end: 1px solid var(--clr-tidal);
  margin-block-end: var(--space-l);
}

[data-section="post"] > div > header > a {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--clr-muted);
  text-decoration: none;
  margin-block-end: var(--space-m);
}

[data-section="post"] > div > header > a:hover { color: var(--clr-forest); }

[data-section="post"] > div > header time {
  display: block;
  font-size: var(--step--1);
  color: var(--clr-muted);
  margin-block-end: 0.5rem;
}

[data-section="post"] > div > header h1 {
  font-size: var(--step-3);
  line-height: 1.15;
  max-width: 22ch;
}

/* Post prev/next navigation */
.post-navigation {
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-l);
  border-block-start: 1px solid var(--clr-tidal);
}

.post-navigation .nav-links {
  justify-content: space-between;
  margin-block-start: 0;
  padding-inline: 0;
}

.post-navigation .nav-previous,
.post-navigation .nav-next { max-width: 46%; }

.post-navigation .nav-links a {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-decoration: none;
  color: inherit;
}

.post-navigation .nav-links a > span:first-child {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--clr-forest);
}

.post-navigation .nav-links a > span:last-child {
  font-size: var(--step-0);
  color: var(--clr-ink);
  font-weight: 400;
  line-height: 1.3;
}

.post-navigation .nav-links a:hover > span:first-child { color: var(--clr-canopy); }

/* ============================================================
   PAGE — generic pages (page.php)
============================================================ */
[data-section="page"] {
  padding-block-end: var(--space-xl);
}

[data-section="page"] > figure {
  margin: 0;
  overflow: hidden;
  max-height: 360px;
}

[data-section="page"] > figure img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  object-position: center;
}

[data-section="page"] > div {
  max-width: 780px;
  margin-inline: auto;
  padding-inline: var(--space-m);
}

[data-section="page"] > div > header {
  padding-block: var(--space-l) var(--space-m);
  border-block-end: 1px solid var(--clr-tidal);
  margin-block-end: var(--space-l);
}

[data-section="page"] > div > header h1 {
  font-size: var(--step-3);
  line-height: 1.15;
}

/* ============================================================
   ENTRY CONTENT — Gutenberg + classic editor output
============================================================ */
.entry-content > * + * { margin-block-start: var(--space-s); }

.entry-content p { max-width: var(--measure); }

.entry-content h2,
.entry-content h3,
.entry-content h4 {
  margin-block-start: var(--space-l);
  margin-block-end: 0.5rem;
}

.entry-content ul,
.entry-content ol {
  padding-inline-start: 1.5em;
  max-width: var(--measure);
}

/* Restore list markers (global reset removes list-style) */
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }

.entry-content li + li { margin-block-start: 0.375rem; }

.entry-content blockquote {
  border-inline-start: 3px solid var(--clr-tidal);
  padding-inline-start: var(--space-m);
  color: var(--clr-muted);
  font-style: italic;
  max-width: var(--measure);
}

.entry-content blockquote cite {
  display: block;
  font-size: var(--step--1);
  font-style: normal;
  margin-block-start: 0.5rem;
}

.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
  overflow-x: auto;
  display: block;
}

.entry-content th,
.entry-content td {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--clr-tidal);
  text-align: left;
}

.entry-content th {
  background: var(--clr-sand);
  font-weight: 600;
}

.entry-content hr {
  border: none;
  border-block-start: 1px solid var(--clr-tidal);
  margin-block: var(--space-l);
}

.entry-content pre {
  background: var(--clr-sand);
  border: 1px solid var(--clr-tidal);
  border-radius: var(--radius);
  padding: var(--space-m);
  overflow-x: auto;
  font-size: var(--step--1);
  line-height: 1.6;
  white-space: pre-wrap;
}

.entry-content code {
  background: var(--clr-sand);
  border: 1px solid var(--clr-tidal);
  border-radius: 3px;
  padding: 0.1em 0.4em;
  font-size: 0.9em;
  word-break: break-word;
}

.entry-content pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
}

/* Clearfix for floated images */
.entry-content::after {
  content: '';
  display: table;
  clear: both;
}

/* --- Figures and captions --- */
.entry-content figure { max-width: 100%; }

.entry-content figcaption,
.entry-content .wp-block-image figcaption,
.entry-content .wp-caption-text {
  font-size: var(--step--1);
  color: var(--clr-muted);
  font-style: italic;
  text-align: center;
  margin-block-start: 0.5rem;
}

.entry-content .wp-caption { max-width: 100%; }

/* --- Alignment helpers --- */
.entry-content .aligncenter {
  display: block;
  margin-inline: auto;
  text-align: center;
}

.entry-content .alignleft {
  float: left;
  margin-inline-end: var(--space-m);
  margin-block-end: var(--space-xs);
  max-width: 50%;
}

.entry-content .alignright {
  float: right;
  margin-inline-start: var(--space-m);
  margin-block-end: var(--space-xs);
  max-width: 50%;
}

.entry-content .alignwide {
  width: min(100%, 1060px);
  margin-inline: auto;
}

.entry-content .alignfull {
  width: 100vw;
  margin-inline-start: calc(50% - 50vw);
}

/* --- Gutenberg: image block --- */
.entry-content .wp-block-image img {
  border-radius: var(--radius);
  height: auto;
}

/* --- Gutenberg: separator --- */
.entry-content .wp-block-separator {
  border: none;
  border-block-start: 1px solid var(--clr-tidal);
  margin-block: var(--space-l);
}

/* --- Gutenberg: quote --- */
.entry-content .wp-block-quote {
  border-inline-start: 3px solid var(--clr-tidal);
  padding-inline-start: var(--space-m);
  color: var(--clr-muted);
  font-style: italic;
  max-width: var(--measure);
}

.entry-content .wp-block-quote cite,
.entry-content .wp-block-quote footer {
  font-size: var(--step--1);
  font-style: normal;
  display: block;
  margin-block-start: 0.5rem;
}

/* --- Gutenberg: pullquote --- */
.entry-content .wp-block-pullquote {
  border-block: 2px solid var(--clr-tidal);
  padding-block: var(--space-m);
  text-align: center;
}

.entry-content .wp-block-pullquote blockquote {
  border: none;
  padding: 0;
  color: var(--clr-forest);
  font-family: var(--ff-heading);
  font-size: var(--step-2);
  font-style: italic;
  max-width: 52ch;
  margin-inline: auto;
}

.entry-content .wp-block-pullquote cite {
  font-size: var(--step--1);
  font-style: normal;
  color: var(--clr-muted);
  display: block;
  margin-block-start: 0.75rem;
}

/* --- Gutenberg: buttons --- */
.entry-content .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-block: var(--space-m);
}

.entry-content .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  font-size: var(--step-0);
  font-weight: 600;
  text-decoration: none;
  background: var(--clr-forest);
  color: var(--clr-white);
  transition: background 0.15s ease;
}

.entry-content .wp-block-button__link:hover {
  background: var(--clr-canopy);
  color: var(--clr-white);
}

.entry-content .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--clr-forest);
  border: 1.5px solid var(--clr-forest);
}

.entry-content .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--clr-sand);
  color: var(--clr-forest);
}

/* --- Gutenberg: columns --- */
.entry-content .wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  margin-block: var(--space-m);
}

.entry-content .wp-block-column { flex: 1 1 min(260px, 100%); }

@media (min-width: 680px) {
  .entry-content .wp-block-column { flex: 1 1 0; }
}

/* --- Gutenberg: cover block --- */
.entry-content .wp-block-cover {
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 320px;
}

/* --- Gutenberg: group block --- */
.entry-content .wp-block-group {
  padding: var(--space-m);
  border-radius: var(--radius);
}