/* =====================================================================
   Blog: index, archives, and single posts.
   Loaded on is_home / is_archive / is_search / single posts.
   Colours come from the theme tokens in style.css, so dark mode is mostly
   automatic; the few dark panels are re-pinned at the bottom.
   ===================================================================== */

/* ---------- Shared header for index + archive ---------- */
.blog-index { padding: 56px 0 88px; }

.blog-header {
  max-width: 760px;
  margin: 0 auto 40px;
  text-align: center;
}
.blog-title {
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--forest-dark);
  margin: 6px 0 14px;
}
.blog-intro {
  color: var(--ink-soft);
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 0;
}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 18px;
}
.breadcrumbs a { color: var(--forest); }
.breadcrumbs a:hover { color: var(--terracotta-ink); }
.breadcrumbs .crumb-sep { margin: 0 8px; color: var(--line); }
.breadcrumbs [aria-current="page"] { color: var(--ink-soft); }

/* ---------- Card grid ---------- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
@media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .blog-grid { grid-template-columns: 1fr; } }

.post-card {
  position: relative; /* anchors the stretched title link that makes the whole card clickable */
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.post-card:hover {
  transform: translateY(-3px);
  border-color: var(--terracotta);
  box-shadow: 0 14px 34px rgba(42, 59, 39, 0.10);
}

.post-card-media {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: linear-gradient(135deg, #3a5033 0%, #2a3b27 100%);
}
.post-card-thumb { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.post-card:hover .post-card-thumb { transform: scale(1.04); }
.post-card-thumb--placeholder {
  display: block; width: 100%; height: 100%;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(143,179,161,0.35), transparent 60%),
    linear-gradient(135deg, #3a5033 0%, #2a3b27 100%);
}

.post-card-body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex-grow: 1; }
.post-card-cat {
  align-self: flex-start;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--terracotta-ink); margin-bottom: 12px;
  position: relative; z-index: 2; /* stays clickable above the stretched card link */
}
.post-card-cat:hover { text-decoration: underline; }
.post-card-title {
  font-size: 1.2rem; line-height: 1.3; margin: 0 0 12px;
}
.post-card-title a { color: var(--forest-dark); }
.post-card-title a:hover { color: var(--terracotta-ink); text-decoration: none; }
/* Stretch the title link over the whole card so anywhere on it opens the post. */
.post-card-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.post-card-date { color: var(--muted); font-size: 0.82rem; margin: 0 0 14px; }
.post-card-date .dot { margin: 0 7px; }
.post-card-excerpt { color: var(--ink-soft); font-size: 0.96rem; line-height: 1.6; margin: 0 0 18px; flex-grow: 1; }
.post-card-more { color: var(--terracotta-ink); font-weight: 600; font-size: 0.9rem; margin-top: auto; }

.blog-empty { text-align: center; color: var(--muted); padding: 40px 0; }

/* ---------- Pagination (classic the_posts_pagination) ---------- */
/* .nav-links is also used by the header menu, so scope + out-specify it here. */
.pagination { margin-top: 48px; }
.pagination .nav-links {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 8px; position: static; background: none; box-shadow: none; border: 0; padding: 0;
}
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink-soft); font-weight: 600; font-size: 0.95rem; background: var(--paper);
}
.pagination a.page-numbers:hover { border-color: var(--terracotta); color: var(--terracotta-ink); text-decoration: none; }
.pagination .page-numbers.current { background: var(--terracotta-ink); color: #fff; border-color: var(--terracotta-ink); }
.pagination .page-numbers.dots { border: 0; background: none; min-width: 0; }

/* ---------- Single post ---------- */
.single-post { padding-bottom: 8px; }

/* Standard pages reuse the reading layout but end without a CTA band. */
.page-wrap { padding-bottom: 88px; }

/* ---------- Team cards (About page) ---------- */
.team-member {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 26px;
  align-items: start;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px;
  margin: 22px 0;
}
.team-member img {
  width: 150px; height: 150px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--terracotta-soft);
}
.team-member h3 { font-size: 1.35rem; color: var(--forest-dark); margin: 0 0 2px; }
.team-member .team-role {
  color: var(--terracotta-ink);
  font-size: 0.8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  margin: 0 0 10px;
}
.team-member .team-cred { color: var(--muted); font-size: 0.88rem; line-height: 1.5; margin: 0 0 12px; }
.team-member p { font-size: 1rem; line-height: 1.65; }
.team-member p + p { margin-top: 0.9em; }

@media (max-width: 620px) {
  .team-member { grid-template-columns: 1fr; text-align: center; justify-items: center; }
}

.team-cta { text-align: center; margin-top: 52px; }
.team-cta-sub { color: var(--muted); font-size: 0.95rem; margin-top: 16px; }

.single-head { max-width: 760px; margin: 0 auto; padding-top: 48px; text-align: center; }
.single-head .breadcrumbs { text-align: left; }
.single-cat {
  display: inline-block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--terracotta-ink); margin-bottom: 12px;
}
.single-cat:hover { text-decoration: underline; }
.single-title { font-size: clamp(2rem, 4vw, 3rem); color: var(--forest-dark); margin: 0 0 16px; }
.single-meta { color: var(--muted); font-size: 0.95rem; }
.single-meta .dot { margin: 0 8px; }

.single-hero { max-width: 920px; margin: 36px auto 0; }
.single-hero-img { width: 100%; height: auto; border-radius: 16px; display: block; }

.single-body { max-width: 720px; margin: 0 auto; padding-top: 40px; }

/* Readable long-form typography */
.entry-content { color: var(--ink); font-size: 1.12rem; line-height: 1.75; }
.entry-content > * + * { margin-top: 1.6em; }
.entry-content h2 { font-size: 1.7rem; color: var(--forest-dark); margin-top: 1.8em; }
.entry-content h3 { font-size: 1.32rem; color: var(--forest-dark); margin-top: 1.6em; }
.entry-content h4 { font-size: 1.1rem; color: var(--forest-dark); margin-top: 1.4em; }
/* Paragraph spacing lives on the <p> itself: this selector out-specifies the
   flow rule above (which is why margin:0 here used to leave the text with no
   paragraph gaps at all). Headings keep their larger margin-top via collapse. */
.entry-content p { margin: 0 0 1.2em; }
.entry-content p:last-child { margin-bottom: 0; }
.entry-content a { color: var(--terracotta-ink); text-decoration: underline; text-underline-offset: 2px; }
.entry-content a:hover { color: #3c4e45; }
/* Buttons in prose keep their button styling, not the inline-link colour, which
   was painting sage text on the sage button (invisible label). */
.entry-content a.btn { text-decoration: none; }
.entry-content a.btn-primary, .entry-content a.btn-primary:hover { color: #fff; }
.entry-content a.btn-secondary { color: var(--forest-dark); }
.entry-content ul, .entry-content ol { padding-left: 1.4em; }
.entry-content li { margin-top: 0.6em; }
/* Lists need a bottom margin too: the following paragraph has margin:0 (which
   out-specifies the flow rule), so without this the text sits flush against the
   last bullet. Matches the 1.6em space above the list. */
.entry-content ul, .entry-content ol { margin-top: 1.6em; margin-bottom: 1.6em; }
.entry-content li + li { margin-top: 0.55em; }
.entry-content img { border-radius: 12px; height: auto; }
.entry-content figure { margin: 1.6em 0; }

/* Cover illustration at the very top of a post: center it and normalize its
   size (imported posts have arbitrary left-aligned widths). Applies ONLY to
   the first element of the content; images mid-post stay as authored. */
.entry-content > figure.wp-block-image:first-child {
  margin: 0 auto 2em;
  text-align: center;
}
.entry-content > figure.wp-block-image:first-child img {
  display: block;
  margin: 0 auto;
  width: min(460px, 100%) !important; /* overrides per-post inline widths */
  height: auto !important;
}
.entry-content figcaption { color: var(--muted); font-size: 0.88rem; text-align: center; margin-top: 8px; }
.entry-content blockquote {
  margin: 1.6em 0; padding: 6px 0 6px 22px;
  border-left: 3px solid var(--terracotta);
  font-family: "Fraunces", Georgia, serif; font-style: italic;
  color: var(--forest-dark); font-size: 1.2rem;
}
.entry-content code {
  background: rgba(42,59,39,0.06); padding: 2px 6px; border-radius: 5px; font-size: 0.9em;
}
.entry-content hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }

/* Related services strip: quiet, matches the tag pills */
.single-services {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 26px; padding: 14px 18px;
  background: rgba(42,59,39,0.04); border: 1px solid var(--line); border-radius: 12px;
  font-size: 0.92rem;
}
.single-services-label { color: var(--muted); font-weight: 600; }
.single-services a {
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--forest); color: var(--forest-dark); font-weight: 500;
}
.single-services a:hover { background: var(--forest); color: #fff; text-decoration: none; }

/* Tags / share / author / nav */
.single-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; }
.single-tags .tag {
  font-size: 0.85rem; padding: 6px 12px; border-radius: 8px;
  background: rgba(42,59,39,0.06); color: var(--forest-dark); font-weight: 500;
}
.single-tags .tag:hover { background: rgba(75,96,86,0.12); color: var(--terracotta-ink); text-decoration: none; }

.single-share {
  display: flex; align-items: center; gap: 14px;
  margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line);
  font-size: 0.92rem;
}
.single-share-label { color: var(--muted); font-weight: 600; }
.single-share a { color: var(--forest); font-weight: 600; }
.single-share a:hover { color: var(--terracotta-ink); }

.single-author {
  margin-top: 28px; padding: 22px 24px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
}
.single-author-name { display: block; font-weight: 700; color: var(--forest-dark); margin-bottom: 4px; }
.single-author p { color: var(--ink-soft); font-size: 0.95rem; margin: 0; }

.single-nav {
  display: flex; justify-content: space-between; gap: 16px;
  margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line);
  font-weight: 600;
}
.single-nav a { color: var(--forest); }
.single-nav a:hover { color: var(--terracotta-ink); }
.single-nav-next { text-align: right; margin-left: auto; }

/* Related posts */
.single-related { background: var(--cream); border-top: 1px solid var(--line); margin-top: 56px; padding: 64px 0; }
.single-related-title { font-size: 1.5rem; color: var(--forest-dark); margin-bottom: 28px; text-align: center; }

/* Booking CTA */
.single-cta { background: var(--forest-dark); color: var(--cream); text-align: center; padding: 72px 24px; }
.single-cta h2 { color: var(--cream); max-width: 640px; margin: 0 auto 14px; }
.single-cta p { color: rgba(250,248,243,0.8); max-width: 560px; margin: 0 auto 28px; font-size: 1.05rem; }
.single-cta .btn-primary { font-size: 1.05rem; padding: 14px 28px; }
.single-cta-sub { margin-top: 18px !important; font-size: 0.92rem; color: rgba(250,248,243,0.65) !important; }
.single-cta-sub a { color: var(--terracotta-soft); }

/* ---------- Dark mode: re-pin the always-dark CTA + tweaks ---------- */
@media (prefers-color-scheme: dark) {
  .single-cta { background: #0e140b; }
  .single-cta h2 { color: var(--ink); }
  .single-cta p { color: rgba(238,242,239,0.8); }
  .entry-content code { background: rgba(255,255,255,0.08); }
  /* Prose links use the dark sage ink in light mode; on the dark page that would
     read too low-contrast, so lift them to the light sage here. */
  .entry-content a { color: var(--terracotta-soft); }
  .entry-content a:hover { color: #b6d0c3; }
  .single-tags .tag { background: rgba(255,255,255,0.07); color: var(--ink); }
  .breadcrumbs .crumb-sep { color: var(--muted); }
}