/* Long-form content: blog posts, plain pages, the blog index and the 404 page (plan 2, 2B). Colours come from the --c-* tokens only.
   Where a rule has a colour and a shape in one shorthand, the colour is a separate longhand: a token that is missing would
   otherwise cancel the whole shorthand. Images are never cropped: no object-fit cover, no aspect-ratio. */

.post-main,
.page-main,
.blog-index,
.page-404 {
  padding: var(--sp-6) var(--gutter) var(--sp-8);
}

.post-main h1,
.page-main > h1,
.blog-index > h1,
.page-404 h1 {
  font-size: clamp(2.25rem, 7vw, 4rem);
  margin-bottom: var(--sp-5);
}

/* ---- post head ---- */
.post-head {
  margin-bottom: var(--sp-5);
}

.post-cat {
  margin: 0 0 var(--sp-3);
  font: 500 var(--fs-ui) / 1.4 var(--font-ui);
  color: var(--c-muted);
}

.post-cat a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--c-link);
  text-underline-offset: 3px;
}

.post-date {
  margin: 0;
  font: 400 var(--fs-ui) / 1.4 var(--font-ui);
  color: var(--c-muted);
}

.post-hero {
  margin: 0 0 var(--sp-5);
}

.post-hero img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- the body ---- */
.entry {
  overflow-wrap: anywhere;
  line-height: 1.7;
}

.entry > * + * {
  margin-block-start: var(--sp-4);
}

.entry > p,
.entry > ul,
.entry > ol,
.entry > h2,
.entry > h3,
.entry > h4,
.entry > details,
.entry > .wp-block-buttons,
.entry > .callout,
.entry > blockquote,
.entry .wp-block-group > p,
.entry .wp-block-column > p,
.entry .wp-block-group > ul,
.entry .wp-block-column > ul {
  max-width: 46rem;   /* paragraphs inside groups ran 1088 px wide, about 135 characters a line (responsive audit 2026-10-12) */
}

/* the core gallery's enlarge button was 20 px square */
.entry .lightbox-trigger {
  min-width: 44px;
  min-height: 44px;
}

.entry h2 {
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  margin-block: var(--sp-7) var(--sp-3);
  scroll-margin-top: var(--sp-5);
}

.entry h3 {
  font-size: clamp(1.375rem, 3.6vw, 1.75rem);
  margin-block: var(--sp-6) var(--sp-2);
}

.entry h4 {
  font: 600 var(--fs-body) / 1.4 var(--font-ui);
  margin-block: var(--sp-5) var(--sp-2);
}

.entry h1 {
  font-size: clamp(2.25rem, 7vw, 4rem);
  margin-bottom: var(--sp-4);
}

.entry .wp-block-group > * + * {
  margin-block-start: var(--sp-4);
}

.entry :is(h1, h2, h3, h4):first-child {
  margin-block-start: 0;
}

.entry ul,
.entry ol {
  padding-inline-start: 1.25em;
}

.entry li + li {
  margin-block-start: var(--sp-2);
}

.entry a {
  color: var(--c-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.entry strong {
  font-weight: 600;
}

.entry blockquote {
  margin-inline: 0;
  padding-inline-start: var(--sp-5);
  border-inline-start: 3px solid;
  border-inline-start-color: var(--c-accent);
  color: var(--c-muted);
}

.entry hr {
  border: 0;
  border-top: 1px solid;
  border-top-color: var(--c-rule);
  margin-block: var(--sp-6);
}

/* ---- columns: stacked on the phone, side by side from 782 px (core's block CSS is not loaded on these pages) ---- */
.entry .wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5) var(--sp-6);
  align-items: flex-start;
}

.entry .wp-block-column {
  flex: 1 1 100%;
  min-width: 0;
}

@media (max-width: 781px) {
  .entry .wp-block-column {
    flex-basis: 100% !important;
  }
}

@media (min-width: 782px) {
  .entry .wp-block-columns {
    flex-wrap: nowrap;
  }

  .entry .wp-block-column {
    flex: 1 1 0;
  }

  .entry .wp-block-column[style*="flex-basis"] {
    flex-grow: 0;
  }
}

.entry .wp-block-columns > .wp-block-column > * + * {
  margin-block-start: var(--sp-4);
}

/* ---- images, figures, video, gallery ---- */
.entry img,
.entry video,
.entry iframe {
  max-width: 100%;
  height: auto;
}

.entry figure {
  margin-inline: 0;
}

.entry figcaption {
  margin-top: var(--sp-2);
  font: 400 var(--fs-small) / 1.5 var(--font-ui);
  color: var(--c-muted);
}

.entry .wp-block-image img {
  display: block;
}

.entry .wp-block-video video {
  display: block;
  width: 100%;
}

/* galleries: see "photo galleries" at the end of this file (2026-10-12 replaced the whole-picture grid, which left ragged rows) */

/* ---- tables: header row styled, a wide table scrolls inside its own box ---- */
.entry .wp-block-table {
  overflow-x: auto;
  max-width: 100%;
}

.entry .wp-block-table table {
  width: 100%;
  min-width: 28rem;
  border-collapse: collapse;
  font-size: var(--fs-ui);
  line-height: 1.5;
}

.entry .wp-block-table :is(th, td) {
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
  vertical-align: top;
  border: 1px solid;
  border-color: var(--c-rule);
}

.entry .wp-block-table thead th,
.entry .wp-block-table th {
  background: var(--c-surface);
  color: var(--c-text);
  font: 600 var(--fs-ui) / 1.4 var(--font-ui);
}

.entry .wp-block-table thead th {
  border-bottom-width: 2px;
  border-bottom-color: var(--c-field);
}

/* ---- quick answer box ---- */
.entry .callout {
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-surface);
  border-inline-start: 4px solid;
  border-inline-start-color: var(--c-accent);
}

.entry .callout > * + * {
  margin-block-start: var(--sp-2);
}

/* ---- buttons ---- */
.entry .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.entry .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--sp-5);
  background: var(--c-brand);
  color: var(--c-on-brand);
  border: 1px solid;
  border-color: var(--c-brand);
  border-radius: 0;
  font: 500 var(--fs-ui) / 1.1 var(--font-ui);
  text-decoration: none;
}

.entry .wp-block-button__link:hover {   /* the colour change is the sweep in buttons.css (2026-10-14) */
  border-color: var(--c-text);
  color: var(--c-page);
}

/* ---- FAQ list: core/details ---- */
.entry .wp-block-details {
  border-top: 1px solid;
  border-top-color: var(--c-rule);
}

.entry .wp-block-details:last-of-type {
  border-bottom: 1px solid;
  border-bottom-color: var(--c-rule);
}

.entry .wp-block-details + .wp-block-details {
  margin-block-start: 0;
}

.entry .wp-block-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 44px;
  padding-block: var(--sp-3);
  font: 600 var(--fs-body) / 1.4 var(--font-ui);
  cursor: pointer;
  list-style: none;
}

.entry .wp-block-details summary::-webkit-details-marker {
  display: none;
}

/* the marker is a glyph that changes (plus, then minus), so the state never rests on colour alone */
.entry .wp-block-details summary::after {
  content: "+";
  flex: none;
  width: 24px;
  text-align: center;
  font: 400 1.5rem / 1 var(--font-ui);
}

.entry .wp-block-details[open] > summary::after {
  content: "\2212";
}

.entry .wp-block-details summary:focus-visible {
  outline-width: 3px;
  outline-style: solid;
  outline-color: var(--c-focus);
  outline-offset: 2px;
}

.entry .wp-block-details > :not(summary) {
  padding-bottom: var(--sp-3);
}

/* ---- search (404 page and embedded) ---- */
.entry .wp-block-search,
.page-404 .wp-block-search {
  max-width: 34rem;
  margin-block: var(--sp-5);
}

.wp-block-search__label {
  display: block;
  margin-bottom: var(--sp-2);
  font: 500 var(--fs-ui) / 1.3 var(--font-ui);
}

.entry .wp-block-search__inside-wrapper,
.page-404 .wp-block-search__inside-wrapper {
  display: flex;
  gap: var(--sp-2);
}

.entry .wp-block-search__input,
.page-404 .wp-block-search__input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 0 var(--sp-4);
  background: var(--c-mat);
  color: var(--c-text);
  border: 1px solid;
  border-color: var(--c-field);
  border-radius: 0;
  font: 400 var(--fs-body) / 1.2 var(--font-ui);
}

.entry .wp-block-search__button,
.page-404 .wp-block-search__button {
  min-height: 48px;
  padding: 0 var(--sp-5);
  background: var(--c-brand);
  color: var(--c-on-brand);
  border: 1px solid;
  border-color: var(--c-brand);
  border-radius: 0;
  font: 500 var(--fs-ui) / 1.1 var(--font-ui);
  cursor: pointer;
}

/* ---- table of contents ---- */
.sarabi-toc {
  margin-block: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-surface);
}

.sarabi-toc .toc-title {
  margin: 0 0 var(--sp-2);
  font: 600 var(--fs-ui) / 1.3 var(--font-ui);
}

.sarabi-toc ol {
  margin: 0;
  padding-inline-start: 1.5em;
}

.sarabi-toc a {
  display: block;   /* inline-block put each number beside the last line of a wrapped title (phone audit 2026-10-13) */
  padding-block: var(--sp-2);
  color: var(--c-link);
  text-underline-offset: 3px;
}

/* ---- related posts and previous / next ---- */
.related-posts {
  margin-block-start: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid;
  border-top-color: var(--c-rule);
}

.related-posts h2 {
  margin-bottom: var(--sp-3);
  font-size: clamp(1.5rem, 4vw, 2rem);
}

.related-posts ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.related-posts a,
.post-nav a {
  display: inline-block;
  padding-block: var(--sp-3);
  color: var(--c-link);
  text-underline-offset: 3px;
}

.post-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-5);
  margin-block: var(--sp-6) 0;
  padding-top: var(--sp-4);
  border-top: 1px solid;
  border-top-color: var(--c-rule);
}

.post-nav .wp-block-post-navigation-link {
  flex: 1 1 14rem;
  margin: 0;
}

.post-nav .post-navigation-link-next {
  text-align: end;
}

.post-navigation-link__label {
  display: block;
  font: 400 var(--fs-small) / 1.4 var(--font-ui);
  color: var(--c-muted);
}

/* ---- blog index ---- */
.blog-index .entry {
  margin-bottom: var(--sp-6);
}

.blog-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: var(--sp-6) var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.blog-list > li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: 0;
}

.blog-list .wp-block-post-featured-image {
  margin: 0;
}

.blog-list .wp-block-post-featured-image img {
  display: block;
  width: 100%;
  height: auto;
}

.blog-list h2 {
  font-size: clamp(1.25rem, 3.2vw, 1.5rem);
  line-height: 1.2;
  margin: 0;
}

/* the whole card is the title's link; the image carries no link of its own */
.blog-list h2 a {
  text-decoration: none;
}

.blog-list h2 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.blog-list h2 a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.blog-list .wp-block-post-date {
  font: 400 var(--fs-small) / 1.4 var(--font-ui);
  color: var(--c-muted);
}

.blog-list .wp-block-post-excerpt {
  margin: 0;
  font-size: var(--fs-ui);
  color: var(--c-muted);
}

.blog-list .wp-block-post-excerpt p {
  margin: 0;
}

.blog-index .wp-block-query-pagination {
  gap: var(--sp-3);
  margin-top: var(--sp-7);
  font: 500 var(--fs-ui) / 1.2 var(--font-ui);
}

.blog-index .wp-block-query-pagination a,
.blog-index .wp-block-query-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--sp-2);
}

.blog-index .wp-block-query-pagination a {
  color: var(--c-link);
}

.blog-index .wp-block-query-pagination .current {
  color: var(--c-brand);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* ---- 404 ---- */
.page-404 .page-404-links {
  margin: var(--sp-5) 0;
  padding: 0;
  list-style: none;
}

.page-404 .page-404-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--c-link);
  text-underline-offset: 3px;
}

.page-404 p a {
  color: var(--c-link);
}

@media (min-width: 1100px) {
  .post-main,
  .page-main,
  .blog-index,
  .page-404 {
    padding-top: var(--sp-8);
  }
}