:root {
  --background: #fdfcfb;
  --foreground: #3d3935;
  --card: #ffffff;
  --border: rgba(196, 19, 0, 0.2);
  --muted-foreground: #6b6560;
  --primary: #c41300;
  --primary-600: #970f00;
  --primary-700: #970f00;
  --radius-card: 28px;
  --radius-panel: 24px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--foreground);
  background: var(--background);
  line-height: 1.55;
}

.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

a { color: var(--primary-700); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- site chrome ---------- */
/* Real header/nav/footer markup + colors live in site-chrome.css, ported
   from the House Doctor landing page. This just sizes the content area. */

.site-main { padding: 0 0 40px; }

/* ---------- category filter chips + sort ---------- */

.category-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 28px 0 0; }
.chip {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(196, 19, 0, 0.08);
  color: var(--primary-700);
  font-size: 0.85rem;
  font-weight: 500;
}
.chip:hover { text-decoration: none; opacity: 0.85; }
.chip-active { background: var(--primary); color: #fff; }
.chip-count { opacity: 0.7; font-size: 0.85em; }

.sort-bar { display: flex; gap: 10px; align-items: center; color: var(--muted-foreground); font-size: 0.9rem; margin: 14px 0 0; }
.sort-bar a { color: var(--muted-foreground); }
.sort-active { color: var(--primary-700); font-weight: 600; }

/* ---------- "Curated articles" section + card grid ---------- */

.articles-section { padding: 64px 0; }
.section-heading { text-align: center; margin-bottom: 40px; }
.eyebrow {
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.4em;
  color: var(--primary);
  margin: 0 0 12px;
}
.section-title { font-size: 1.875rem; font-weight: 700; color: var(--foreground); margin: 0; }

.empty-state { color: var(--muted-foreground); text-align: center; }

.post-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .post-grid { grid-template-columns: repeat(2, 1fr); }
}

.post-card {
  display: block;
  color: var(--foreground);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.18);
  transition: transform 0.3s, box-shadow 0.3s;
}
.post-card:hover {
  text-decoration: none;
  transform: translateY(-4px);
  box-shadow: 0 25px 90px rgba(0, 0, 0, 0.25);
}
.post-card-image-wrap {
  position: relative;
  height: 240px;
  overflow: hidden;
  background: linear-gradient(135deg, #ece3d6, #ddd0ba);
}
.post-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s;
}
.post-card:hover .post-card-image { transform: scale(1.1); }
.post-card-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(196, 19, 0, 0.35);
  color: var(--primary-700);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}
.post-card-body { padding: 32px; }
.post-card-title {
  margin: 0 0 12px;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--foreground);
  transition: color 0.2s;
}
.post-card:hover .post-card-title { color: var(--primary-700); }
.post-card-excerpt {
  margin: 0 0 20px;
  color: rgba(61, 57, 53, 0.8);
  font-size: 1rem;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
  color: rgba(107, 101, 96, 0.8);
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.post-card-readtime { display: inline-flex; align-items: center; gap: 4px; }

.topic-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.topic-tag {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 10px;
}

/* Smaller variant used for the "related posts" row at the bottom of an article */
.post-card-compact .post-card-image-wrap { height: 140px; }
.post-card-compact .post-card-badge { padding: 4px 12px; font-size: 0.68rem; top: 14px; left: 14px; }
.post-card-compact .post-card-body { padding: 20px; }
.post-card-compact .post-card-title { font-size: 1.1rem; margin-bottom: 8px; }
.post-card-compact .post-card-excerpt { font-size: 0.85rem; margin-bottom: 14px; -webkit-line-clamp: 2; }
.post-card-compact .post-card-meta { font-size: 0.78rem; padding-top: 12px; }
.post-card-compact .topic-tag { font-size: 0.68rem; padding: 1px 8px; }

/* ---------- individual post: hero ---------- */

.post-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  min-height: 380px;
  background-color: #3d3935;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
}
.post-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.85));
}
.post-hero-content {
  position: relative;
  padding: 90px 20px 60px;
  text-align: center;
}
@media (min-width: 1024px) { .post-hero-content { text-align: left; } }

.breadcrumb-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.8);
  margin-bottom: 20px;
  max-width: 100%;
  overflow: hidden;
}
.breadcrumb-pill a,
.breadcrumb-pill .current {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 90px;
}
.breadcrumb-pill .current { max-width: 110px; }
.breadcrumb-pill a { color: rgba(255,255,255,0.8); }
.breadcrumb-pill a:hover { color: #fff; }
.breadcrumb-pill .current { color: #fff; font-weight: 600; }
.breadcrumb-pill span { color: rgba(255,255,255,0.4); flex: none; }
@media (min-width: 640px) {
  .breadcrumb-pill { font-size: 0.85rem; padding: 8px 20px; gap: 10px; }
  .breadcrumb-pill a,
  .breadcrumb-pill .current { max-width: 160px; }
}

.post-hero-title {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 12px;
  overflow-wrap: break-word;
  word-break: break-word;
}
@media (min-width: 640px) { .post-hero-title { font-size: 2rem; } }
@media (min-width: 1024px) { .post-hero-title { font-size: 2.625rem; } }

.post-hero-subtitle {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.9);
  margin: 0 auto 16px;
  max-width: 48rem;
  overflow-wrap: break-word;
  word-break: break-word;
}
@media (min-width: 1024px) { .post-hero-subtitle { margin: 0 0 16px; } }

.post-hero-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; font-size: 0.9rem; color: rgba(255,255,255,0.75); margin-bottom: 16px; }
@media (min-width: 1024px) { .post-hero-meta { justify-content: flex-start; } }
.post-hero-readtime { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- share icons: shared by the hero-meta row and the floating
   rail/bar below (see partials/share.ejs) — this wrapper just sets the
   context; .share-icon itself carries the button look. ---------- */
.post-hero-share {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-left: 16px;
  border-left: 1px solid rgba(255,255,255,0.25);
}
.post-hero-share .share-icon {
  width: 26px;
  height: 26px;
  border: none;
  background: rgba(255,255,255,0.15);
  color: #fff;
}
.post-hero-share .share-icon:hover { background: rgba(255,255,255,0.3); color: #fff; }
.post-hero-share .share-icon svg { width: 13px; height: 13px; }

.share-icon {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--primary-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.share-icon:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.share-icon svg { width: 14px; height: 14px; }

.share-icon.is-copied::after {
  content: "Copied!";
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--foreground);
  color: #fff;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

/* Mobile: full-width bar pinned to the bottom. Desktop: vertical rail
   pinned a fixed 16px from the right edge — close to the edge on every
   desktop width rather than drifting out into wide margins on large
   screens, so it overlaps the last bit of text on narrower windows the
   same way it does on wider ones. */
.share-float {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #fff;
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.1);
}
@media (min-width: 1024px) {
  .share-float {
    left: auto;
    right: 16px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    flex-direction: column;
    justify-content: flex-start;
    width: auto;
    padding: 10px 7px;
    border-top: none;
    border-radius: 24px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  }
}

.post-hero-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
@media (min-width: 1024px) { .post-hero-tags { justify-content: flex-start; } }
.post-hero-tag {
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 500;
}

/* ---------- individual post: sidebar + article ---------- */

.post-body-wrap { padding: 40px 0; }
.post-body-grid {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .post-body-grid { grid-template-columns: 320px minmax(0, 1fr); }
}

.post-sidebar { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 1024px) {
  .post-sidebar { position: sticky; top: 24px; align-self: start; }
}

.sidebar-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  background: rgba(255,255,255,0.9);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(4px);
}
.toc-card { padding: 16px; }
.toc-label { font-size: 0.8125rem; font-weight: 600; color: var(--foreground); margin: 0 0 10px; letter-spacing: 0.02em; }
.toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.toc-list a { display: flex; align-items: center; gap: 8px; color: var(--muted-foreground); font-size: 0.8rem; font-weight: 500; line-height: 1.3; }
.toc-list a:hover { color: var(--primary-600); text-decoration: none; }
.toc-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }

.article-cover {
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.16);
  margin-bottom: 32px;
}
.article-cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }

.post-cta-wrap { margin-top: 48px; }

/* The CTA card is duplicated: one copy sits in the sticky sidebar (desktop,
   right under the TOC) and one at the end of the article (mobile, where
   there is no separate sidebar column). Only one is ever visible at a time. */
.cta-desktop-only { display: none; }
.cta-mobile-only { display: block; }
@media (min-width: 1024px) {
  .cta-desktop-only { display: block; }
  .cta-mobile-only { display: none; }
}

.cta-card { padding: 24px; }
.cta-title { font-size: 1rem; font-weight: 600; color: var(--foreground); margin: 0 0 8px; }
.cta-body { font-size: 0.9rem; color: var(--muted-foreground); margin: 0 0 16px; }
.cta-list { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 0.9rem; color: var(--muted-foreground); }
.cta-list li { display: flex; align-items: flex-start; gap: 8px; }
.cta-list svg { flex: none; margin-top: 2px; color: var(--primary-700); }
.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--primary-600);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 10px 20px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.cta-button:hover { text-decoration: none; opacity: 0.92; }

.post-article { min-width: 0; }
.post-content { color: var(--foreground); line-height: 1.7; }
.post-content > *:first-child { margin-top: 0; }
.post-content p { margin: 0 0 16px; color: var(--muted-foreground); line-height: 1.7; }
.post-content h1, .post-content h2 { font-size: 1.5rem; font-weight: 700; color: var(--foreground); margin: 32px 0 16px; }
.post-content h3 { font-size: 1.2rem; font-weight: 700; color: var(--foreground); margin: 24px 0 12px; }
.post-content a { color: var(--primary-700); text-decoration: underline; }
.post-content a.cta-button { color: #fff; text-decoration: none; }
.post-content img { max-width: 100%; border-radius: 16px; margin: 8px 0; }
.post-content iframe { max-width: 100%; border-radius: 16px; margin: 8px 0; }
.post-content table { display: block; overflow-x: auto; border-collapse: collapse; margin: 8px 0 20px; font-size: 0.85rem; }
.post-content th, .post-content td { border: 1px solid var(--border); padding: 10px 12px; text-align: left; vertical-align: top; }
.post-content th { background: rgba(196,19,0,0.06); font-weight: 700; white-space: nowrap; }
.post-content ul, .post-content ol { margin: 0 0 16px; padding-left: 1.4em; color: var(--muted-foreground); }
.post-content li { margin-bottom: 8px; }
.post-content blockquote {
  margin: 24px 0;
  padding: 16px 20px;
  border-left: 3px solid var(--primary);
  background: rgba(196, 19, 0, 0.07);
  color: var(--foreground);
  border-radius: 0 12px 12px 0;
}
.post-content code { background: rgba(0,0,0,0.05); padding: 2px 6px; border-radius: 4px; font-size: 0.9em; }
.post-content pre { background: rgba(0,0,0,0.05); padding: 16px; border-radius: 12px; overflow-x: auto; }

.post-content .key-risks-table table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.post-content .key-risks-table th, .post-content .key-risks-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.post-content .key-risks-table th { font-weight: 700; }
.post-content .key-risks-table td ul { margin: 0; padding-left: 1.1em; }
.post-content .key-risks-table td li { line-height: 1.2; margin-bottom: 10px; }
.post-content .key-risks-table td li:last-child { margin-bottom: 0; }
.post-content .key-risks-table td:last-child { text-align: center; font-size: 1.5rem; font-weight: 700; color: var(--primary-700); }
.post-content .key-risks-table td:last-child:has(.cost-note) { line-height: 0.85; }
.post-content .key-risks-table td:last-child .cost-note { font-size: 0.85rem; font-style: italic; line-height: 0.85; }

.post-content details {
  margin: 20px 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  padding: 0 18px 16px 36px;
  color: var(--muted-foreground);
}
.post-content summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 -18px 0 -36px;
  padding: 14px 18px 14px 36px;
  cursor: pointer;
  font-weight: 600;
  color: var(--foreground);
  list-style: none;
}
.post-content summary::-webkit-details-marker { display: none; }
.post-content summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--primary-700);
  border-bottom: 2px solid var(--primary-700);
  transform: rotate(45deg);
  transition: transform 0.2s;
}
.post-content details[open] summary::after { transform: rotate(-135deg); }
.post-content details[open] summary { border-bottom: 1px solid var(--border); }
.post-content details p:last-child { margin-bottom: 0; }

/* ---------- admin form ---------- */

/* No max-width here — this wrap now just inherits .wrap's page-width (1280px
   with 20px side padding), so the Posts list below can use nearly the full
   screen. The New Post/Edit Post card opts back into a narrower width via
   .admin-section--form so it's unaffected. */
.admin-form-wrap { padding: 32px 0; }

.admin-section {
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  padding: 24px;
  margin-bottom: 24px;
}
.admin-section h2 { margin-top: 0; }
.admin-section--form { max-width: 640px; }
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; margin-bottom: 0; font-size: 0.9rem; }
.admin-table th, .admin-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.admin-table th { color: #000; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; }
/* The flex layout lives on this inner wrapper, not the <td> itself —
   overriding a table cell's display away from table-cell (e.g. to flex)
   pulls it out of the row's normal height-matching, leaving it shorter
   than its sibling cells. Keeping the <td> a plain table-cell avoids that. */
.admin-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.admin-filter-chip {
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted-foreground);
}
.admin-filter-chip span { opacity: 0.65; font-weight: 400; }
.admin-filter-chip:hover { border-color: var(--primary); color: var(--primary-700); text-decoration: none; }
.admin-filter-chip.is-active { background: var(--primary-600); border-color: var(--primary-600); color: #fff; }
.admin-filter-chip.is-active:hover { color: #fff; }

.lang-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(196, 19, 0, 0.1);
  color: var(--primary-700);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.admin-table-actions-inner { display: flex; align-items: center; gap: 14px; }
.admin-table-actions-inner form { margin: 0; }
.admin-table-actions-inner a,
.admin-table-actions-inner button {
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
}
.admin-table-actions-inner button { color: #a12a22; }
.admin-table-actions-inner a:hover,
.admin-table-actions-inner button:hover { text-decoration: underline; }

@media (max-width: 640px) {
  /* table-layout:fixed + explicit column widths — the default 'auto' layout
     sized the Actions cell to fit "Edit"/"Delete" side by side (its
     min-content width) even though they're stacked, leaving the cell wider
     than the viewport and forcing an internal scroll the row didn't need. */
  .admin-table { font-size: 0.78rem; table-layout: fixed; }
  .admin-table th, .admin-table td { padding: 6px 6px; }
  .admin-table th, .admin-table td:not(.admin-table-actions) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .admin-table th:nth-child(1), .admin-table td:nth-child(1) { width: 30%; }
  .admin-table th:nth-child(2), .admin-table td:nth-child(2) { width: 24%; }
  .admin-table th:nth-child(3), .admin-table td:nth-child(3) { width: 18%; }
  .admin-table th:nth-child(4), .admin-table td:nth-child(4) { width: 10%; }
  .admin-table th:nth-child(5), .admin-table td:nth-child(5) { width: 18%; }
  .admin-table-actions-inner { flex-direction: column; align-items: flex-start; gap: 6px; }
}

.admin-form-actions { display: flex; align-items: center; gap: 16px; }
.button-link { font-weight: 600; color: var(--muted-foreground); }
.button-link:hover { color: var(--foreground); }

.admin-form { display: flex; flex-direction: column; gap: 16px; }
.admin-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 0.9rem; }
.admin-form .hint { font-weight: 400; color: var(--muted-foreground); }
.admin-form input, .admin-form textarea, .admin-form select {
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.admin-form select { align-self: flex-start; min-width: 120px; }
.admin-form button {
  align-self: flex-start;
  padding: 10px 22px;
  background: var(--primary-600);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 1rem;
  cursor: pointer;
}
.form-error { background: #fdeceb; color: #a12a22; padding: 10px 14px; border-radius: 6px; }

/* ---------- 404 ---------- */
.not-found { padding: 80px 0; text-align: center; }