/*
Theme Name: XayNhaMoi
Theme URI: https://xaynhamoi.com
Author: XayNhaMoi
Description: Theme hiện đại, chuẩn SEO cho trang chia sẻ kiến thức xây dựng nhà ở.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: xaynhamoi
Tags: blog, news, seo-friendly, responsive, custom-menu, featured-images
*/

/* ─────────────────────────────────────────
   TOKENS
───────────────────────────────────────── */
:root {
  --green:       #1a3d2b;
  --green-mid:   #2d6a4f;
  --green-light: #40916c;
  --gold:        #c9921a;
  --gold-light:  #e8b84b;

  --ink:    #0f1a14;
  --body:   #374151;
  --muted:  #6b7280;
  --border: #e5e7eb;
  --bg:     #f9fafb;
  --white:  #ffffff;

  --f-serif: 'Playfair Display', Georgia, serif;
  --f-sans:  'DM Sans', system-ui, sans-serif;

  --r: 10px;
  --r-lg: 16px;
  --t: 0.22s ease;
  --w: 1160px;
  --w-text: 780px;

  --shadow-sm: 0 1px 4px rgba(0,0,0,.07);
  --shadow:    0 4px 20px rgba(0,0,0,.09);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.13);
}

/* ─────────────────────────────────────────
   RESET
───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--f-sans);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }
ul { list-style: none; padding: 0; }

/* ─────────────────────────────────────────
   LAYOUT HELPERS
───────────────────────────────────────── */
.wrap        { max-width: var(--w);     margin-inline: auto; padding-inline: 1.25rem; }
.wrap--text  { max-width: var(--w-text); margin-inline: auto; padding-inline: 1.25rem; }
.site        { display: flex; flex-direction: column; min-height: 100vh; }
.site-main   { flex: 1; }

/* two-col: content + sidebar */
.layout-cols {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 3rem;
  align-items: start;
}

/* ─────────────────────────────────────────
   TYPOGRAPHY
───────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 {
  font-family: var(--f-serif);
  color: var(--ink);
  line-height: 1.3;
  font-weight: 700;
}
h1 { font-size: clamp(1.9rem, 3.5vw, 2.9rem); }
h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.1rem; }
p  { margin-bottom: 1.1em; }
p:last-child { margin-bottom: 0; }

.label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
}
.label::before {
  content: '';
  display: inline-block;
  width: 16px; height: 2px;
  background: var(--gold);
  border-radius: 2px;
}

/* ─────────────────────────────────────────
   HEADER
───────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--t);
}
.site-header.shadow { box-shadow: var(--shadow-sm); }

.header-inner {
  display: flex;
  align-items: center;
  height: 66px;
  gap: 2rem;
}

/* Logo */
.site-logo {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  flex-shrink: 0;
  margin-right: auto;
}
.site-logo .name {
  font-family: var(--f-serif);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--green);
}
.site-logo .name span { color: var(--gold); }
.site-logo .sub {
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Nav */
.primary-nav ul { display: flex; gap: .15rem; }
.primary-nav a {
  display: block;
  padding: .4rem .8rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--body);
  border-radius: 6px;
  transition: background var(--t), color var(--t);
  white-space: nowrap;
}
.primary-nav a:hover,
.primary-nav .current-menu-item > a,
.primary-nav .current-menu-ancestor > a {
  color: var(--green);
  background: rgba(26,61,43,.07);
}

/* Dropdown */
.primary-nav li { position: relative; }
.primary-nav ul ul {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 210px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: .4rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: all var(--t);
  z-index: 99;
  display: flex;
  flex-direction: column;
}
.primary-nav li:hover > ul {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.primary-nav ul ul a {
  padding: .45rem .75rem;
  border-radius: 6px;
  font-size: .85rem;
}

/* Header actions */
.header-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }

.btn-icon {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 8px;
  background: none; border: none;
  color: var(--muted);
  transition: background var(--t), color var(--t);
}
.btn-icon:hover { background: var(--bg); color: var(--ink); }

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
  background: none; border: none;
}
.hamburger span {
  display: block; width: 22px; height: 2px;
  background: var(--ink); border-radius: 2px;
  transition: all var(--t);
}

/* ─────────────────────────────────────────
   SEARCH OVERLAY
───────────────────────────────────────── */
.search-overlay {
  position: fixed; inset: 0;
  background: rgba(15,26,20,.82);
  backdrop-filter: blur(6px);
  z-index: 500;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 14vh;
  opacity: 0; visibility: hidden;
  transition: all var(--t);
}
.search-overlay.open { opacity: 1; visibility: visible; }
.search-overlay-box { width: min(640px, 100% - 2.5rem); }
.search-overlay input {
  width: 100%;
  padding: 1.1rem 1.4rem;
  font-size: 1.1rem;
  font-family: var(--f-sans);
  border: none; border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  outline: none;
  background: var(--white);
  color: var(--ink);
}
.search-overlay-hint {
  margin-top: .75rem;
  text-align: center;
  font-size: .8rem;
  color: rgba(255,255,255,.45);
}
.search-overlay-close {
  position: absolute; top: 1.25rem; right: 1.25rem;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.12); border: none; color: white;
  font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t);
}
.search-overlay-close:hover { background: rgba(255,255,255,.22); }

/* ─────────────────────────────────────────
   BUTTONS
───────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .6rem 1.3rem;
  font-size: .875rem; font-weight: 600;
  border-radius: var(--r);
  transition: all var(--t);
  border: none;
  cursor: pointer;
}
.btn-primary {
  background: var(--green); color: var(--white);
}
.btn-primary:hover {
  background: var(--green-mid); color: var(--white);
  transform: translateY(-1px); box-shadow: 0 6px 20px rgba(26,61,43,.3);
}
.btn-ghost {
  background: transparent; color: var(--green);
  border: 1.5px solid var(--border);
}
.btn-ghost:hover { border-color: var(--green); background: rgba(26,61,43,.04); }

/* ─────────────────────────────────────────
   HERO
───────────────────────────────────────── */
.hero {
  background: var(--green);
  padding: 4rem 0 3.5rem;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 70% 50%, rgba(201,146,26,.18) 0%, transparent 70%);
  pointer-events: none;
}
.hero-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold-light);
  border: 1px solid rgba(232,184,75,.35);
  background: rgba(232,184,75,.1);
  padding: .3rem .8rem; border-radius: 100px;
  margin-bottom: 1rem;
}
.hero-title {
  font-family: var(--f-serif);
  font-size: clamp(1.8rem,3.5vw,2.7rem);
  color: var(--white); line-height: 1.25;
  margin-bottom: .9rem;
}
.hero-title em { font-style: normal; color: var(--gold-light); }
.hero-desc { color: rgba(255,255,255,.7); font-size: 1rem; margin-bottom: 1.75rem; }
.hero-stats {
  display: flex; gap: 2rem;
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: 1.5rem;
  margin-top: 1.5rem;
}
.hero-stat-num {
  font-family: var(--f-serif); font-size: 1.6rem; font-weight: 700;
  color: var(--gold-light); display: block;
}
.hero-stat-label { font-size: .78rem; color: rgba(255,255,255,.55); }

/* Hero post card */
.hero-card {
  background: var(--white);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transform: perspective(800px) rotateY(-3deg) translateY(-4px);
  transition: transform .4s ease;
}
.hero-card:hover { transform: perspective(800px) rotateY(0deg) translateY(-4px); }
.hero-card-img { aspect-ratio: 16/9; overflow: hidden; }
.hero-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.hero-card:hover .hero-card-img img { transform: scale(1.04); }
.hero-card-body { padding: 1.25rem 1.4rem; }
.hero-card-cat {
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--green); background: rgba(26,61,43,.08);
  padding: .2rem .55rem; border-radius: 100px;
  display: inline-block; margin-bottom: .6rem;
}
.hero-card-title {
  font-family: var(--f-serif); font-size: 1.05rem;
  color: var(--ink); line-height: 1.4;
}
.hero-card-meta {
  display: flex; gap: .75rem; align-items: center;
  font-size: .75rem; color: var(--muted); margin-top: .6rem;
}

/* ─────────────────────────────────────────
   SECTION HEADER
───────────────────────────────────────── */
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.6rem;
}
.section-head .label { margin-bottom: .35rem; }
.section-head h2 { font-size: 1.5rem; margin: 0; }
.view-all {
  display: flex; align-items: center; gap: .25rem;
  font-size: .82rem; font-weight: 600; color: var(--green);
  flex-shrink: 0; white-space: nowrap;
  transition: gap var(--t);
}
.view-all:hover { gap: .5rem; }

/* ─────────────────────────────────────────
   POST CARDS
───────────────────────────────────────── */
.card {
  background: var(--white);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: transparent;
}

/* Thumbnail */
.card-img {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--bg);
  position: relative;
  flex-shrink: 0;
}
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.card:hover .card-img img { transform: scale(1.04); }
.card-img .tag {
  position: absolute; bottom: .65rem; left: .65rem;
  font-size: .65rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  background: var(--green); color: var(--white);
  padding: .18rem .55rem; border-radius: 4px;
}

/* Body */
.card-body { padding: 1.1rem 1.2rem; flex: 1; display: flex; flex-direction: column; }
.card-meta {
  display: flex; align-items: center; gap: .6rem;
  font-size: .75rem; color: var(--muted); margin-bottom: .55rem;
}
.card-meta span { display: flex; align-items: center; gap: .2rem; }
.card-title {
  font-family: var(--f-serif); font-size: 1rem; font-weight: 700;
  color: var(--ink); line-height: 1.45;
  flex: 1; margin-bottom: .5rem;
  display: -webkit-box;
  -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.card-title:hover { color: var(--green); }
.card-excerpt {
  font-size: .82rem; color: var(--muted); line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Footer */
.card-footer {
  padding: .75rem 1.2rem;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.card-author { display: flex; align-items: center; gap: .45rem; font-size: .78rem; font-weight: 500; color: var(--muted); }
.card-author img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.card-read { font-size: .78rem; font-weight: 600; color: var(--green); display: flex; align-items: center; gap: .2rem; }

/* Card sizes */
.card--hero {
  grid-column: span 2;
  flex-direction: row;
}
.card--hero .card-img { aspect-ratio: auto; flex: 1; min-height: 260px; }
.card--hero .card-body { flex: 1; padding: 1.75rem 2rem; justify-content: center; }
.card--hero .card-title { font-size: 1.4rem; -webkit-line-clamp: 4; }
.card--hero .card-excerpt { -webkit-line-clamp: 3; }

.card--sm { flex-direction: row; }
.card--sm .card-img { width: 110px; aspect-ratio: auto; min-height: 100px; flex-shrink: 0; }
.card--sm .card-body { padding: .8rem .9rem; }
.card--sm .card-title { font-size: .875rem; -webkit-line-clamp: 2; }
.card--sm .card-meta { display: none; }
.card--sm .card-excerpt { display: none; }
.card--sm .card-footer { display: none; }

/* Grid layouts */
.grid     { display: grid; gap: 1.25rem; }
.grid-3   { grid-template-columns: repeat(3, 1fr); }
.grid-2   { grid-template-columns: repeat(2, 1fr); }
.grid-4   { grid-template-columns: repeat(4, 1fr); }

/* ─────────────────────────────────────────
   CATEGORY PILLS
───────────────────────────────────────── */
.cat-row {
  display: flex; gap: .6rem; flex-wrap: wrap;
}
.cat-pill {
  display: flex; align-items: center; gap: .55rem;
  padding: .55rem 1rem;
  background: var(--white); border: 1px solid var(--border);
  border-radius: 100px;
  font-size: .82rem; font-weight: 500; color: var(--body);
  transition: all var(--t);
}
.cat-pill:hover { border-color: var(--green); color: var(--green); background: rgba(26,61,43,.04); }
.cat-pill .icon { font-size: 1rem; line-height: 1; }
.cat-pill .count { font-size: .7rem; color: var(--muted); }

/* ─────────────────────────────────────────
   BREADCRUMB
───────────────────────────────────────── */
.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
  font-size: .8rem; color: var(--muted); padding: .9rem 0;
}
.breadcrumb a { color: var(--muted); transition: color var(--t); }
.breadcrumb a:hover { color: var(--green); }
.breadcrumb-sep { color: var(--border); }
.breadcrumb span:last-child { color: var(--ink); font-weight: 500; }

/* ─────────────────────────────────────────
   SIDEBAR & WIDGETS
───────────────────────────────────────── */
.sidebar { display: flex; flex-direction: column; gap: 1.5rem; position: sticky; top: 86px; }

.widget {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.widget-head {
  padding: .85rem 1.15rem;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: .45rem;
  font-size: .85rem; font-weight: 700; color: var(--ink);
}
.widget-head .ico { font-size: 1rem; }
.widget-body { padding: 1.15rem; }
.widget-body-flush { padding: 0 1.15rem; }

/* Popular list */
.pop-list { display: flex; flex-direction: column; gap: .85rem; }
.pop-item { display: flex; gap: .7rem; align-items: flex-start; }
.pop-num {
  font-family: var(--f-serif); font-size: 1.3rem; font-weight: 900;
  color: var(--border); line-height: 1; flex-shrink: 0; width: 26px;
}
.pop-title {
  font-size: .84rem; font-weight: 600; color: var(--ink);
  line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pop-title:hover { color: var(--green); }
.pop-meta { font-size: .73rem; color: var(--muted); margin-top: .15rem; }

/* Category list */
.cat-list { display: flex; flex-direction: column; }
.cat-list a {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem 0;
  border-bottom: 1px solid var(--border);
  font-size: .85rem; color: var(--body);
  transition: color var(--t), padding-left var(--t);
}
.cat-list li:last-child a { border-bottom: none; }
.cat-list a:hover { color: var(--green); padding-left: .35rem; }
.cat-count {
  font-size: .7rem; background: var(--bg); color: var(--muted);
  padding: .1rem .45rem; border-radius: 100px; flex-shrink: 0;
}

/* Tags */
.tag-cloud { display: flex; flex-wrap: wrap; gap: .4rem; }
.tag-cloud a {
  font-size: .75rem; font-weight: 500;
  padding: .25rem .65rem;
  border-radius: 100px;
  border: 1px solid var(--border);
  color: var(--muted);
  transition: all var(--t);
}
.tag-cloud a:hover { background: var(--green); color: var(--white); border-color: var(--green); }

/* ─────────────────────────────────────────
   SINGLE POST
───────────────────────────────────────── */
.post-head { padding: 2rem 0 1.5rem; }
.post-cats { display: flex; gap: .4rem; margin-bottom: .8rem; }
.post-cat {
  font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(26,61,43,.08); color: var(--green);
  padding: .22rem .65rem; border-radius: 100px;
}
.post-h1 { font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.25; margin-bottom: 1rem; }
.post-meta-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  font-size: .82rem; color: var(--muted);
  padding-bottom: 1.25rem; border-bottom: 1px solid var(--border);
}
.post-meta-row span { display: flex; align-items: center; gap: .3rem; }
.post-author { display: flex; align-items: center; gap: .55rem; }
.post-author img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.post-author-name { font-weight: 600; color: var(--ink); }

/* Featured image */
.post-thumb {
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 16/7;
  margin-bottom: 2.25rem;
}
.post-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Article content */
.entry-content {
  font-size: 1.025rem; line-height: 1.85; color: var(--body);
}
.entry-content > * + * { margin-top: 1.1em; }
.entry-content h2 { font-size: 1.5rem; margin-top: 2rem; }
.entry-content h3 { font-size: 1.2rem; margin-top: 1.75rem; }
.entry-content h4 { font-size: 1.05rem; margin-top: 1.5rem; }
.entry-content a { color: var(--green); border-bottom: 1px solid rgba(26,61,43,.25); transition: border-color var(--t); }
.entry-content a:hover { border-bottom-color: var(--green); }
.entry-content ul, .entry-content ol { padding-left: 1.4em; }
.entry-content li { margin-bottom: .35em; }
.entry-content img { border-radius: var(--r); width: 100%; }
.entry-content blockquote {
  border-left: 3px solid var(--gold);
  padding: .9rem 1.25rem;
  background: rgba(201,146,26,.05);
  border-radius: 0 var(--r) var(--r) 0;
  font-style: italic; color: var(--body);
}
.entry-content code {
  font-size: .85em; background: var(--bg);
  padding: .1em .35em; border-radius: 4px;
}
.entry-content pre {
  background: var(--ink); color: #d4d4d4;
  padding: 1.25rem; border-radius: var(--r);
  overflow-x: auto; font-size: .875rem;
}
.entry-content pre code { background: none; padding: 0; color: inherit; }
.entry-content table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.entry-content th { background: var(--bg); padding: .65rem .9rem; text-align: left; font-weight: 700; border-bottom: 2px solid var(--border); }
.entry-content td { padding: .6rem .9rem; border-bottom: 1px solid var(--border); }

/* TOC */
.toc {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}
.toc-toggle {
  font-size: .875rem; font-weight: 700; color: var(--ink);
  display: flex; align-items: center; gap: .4rem; cursor: pointer;
  user-select: none;
}
.toc ol { padding-left: 1.2em; margin-top: .65rem; }
.toc li { margin-bottom: .3em; }
.toc a { font-size: .84rem; color: var(--muted); transition: color var(--t); border: none !important; }
.toc a:hover { color: var(--green); }

/* Share bar */
.share-bar {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: 1.25rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 2rem 0;
}
.share-label { font-size: .82rem; font-weight: 700; color: var(--ink); margin-right: .15rem; }
.share-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem .9rem; border-radius: 6px;
  font-size: .78rem; font-weight: 600;
  transition: opacity var(--t);
  border: none;
}
.share-btn:hover { opacity: .85; }
.share-fb   { background: #1877f2; color: white; }
.share-tw   { background: #000; color: white; }
.share-zalo { background: #006af5; color: white; }
.share-copy { background: var(--bg); color: var(--body); border: 1px solid var(--border); }

/* Post tags */
.post-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 1.25rem 0; }
.post-tags-label { font-size: .78rem; font-weight: 700; color: var(--muted); }

/* Author box */
.author-box {
  display: flex; gap: 1.25rem; align-items: flex-start;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  margin: 2rem 0;
}
.author-box img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid var(--border); }
.author-name { font-weight: 700; color: var(--ink); margin-bottom: .15rem; }
.author-role { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--green); margin-bottom: .5rem; }
.author-bio { font-size: .85rem; color: var(--muted); line-height: 1.6; }
.author-link { font-size: .8rem; font-weight: 600; color: var(--green); margin-top: .5rem; display: inline-block; }

/* Related posts */
.related h3 { font-size: 1.2rem; margin-bottom: 1.15rem; padding-bottom: .65rem; border-bottom: 2px solid var(--green); display: inline-block; }

/* ─────────────────────────────────────────
   COMMENTS
───────────────────────────────────────── */
.comments-section { margin-top: 2.5rem; }
.comments-title { font-size: 1.25rem; margin-bottom: 1.25rem; }
.comment-list { display: flex; flex-direction: column; gap: 1rem; }
.comment-item { background: var(--white); border: 1px solid var(--border); border-radius: var(--r); padding: 1.1rem; }
.comment-meta-row { display: flex; align-items: center; gap: .6rem; margin-bottom: .65rem; }
.comment-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.comment-author-name { font-weight: 700; font-size: .875rem; color: var(--ink); }
.comment-date { font-size: .75rem; color: var(--muted); }
.comment-text { font-size: .875rem; line-height: 1.65; color: var(--body); }
.comment-reply { font-size: .78rem; font-weight: 600; color: var(--green); margin-top: .5rem; display: inline-block; }
.children { margin-left: 2rem; margin-top: .75rem; list-style: none; padding: 0; display: flex; flex-direction: column; gap: .75rem; }

/* Comment form */
.comment-form-title { font-size: 1.15rem; margin-bottom: 1.15rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; margin-bottom: .85rem; }
.form-group { display: flex; flex-direction: column; gap: .3rem; }
.form-group label { font-size: .82rem; font-weight: 600; color: var(--ink); }
.form-group input,
.form-group textarea {
  padding: .6rem .85rem;
  border: 1px solid var(--border);
  border-radius: var(--r);
  font-family: var(--f-sans); font-size: .9rem;
  color: var(--ink);
  transition: border-color var(--t), box-shadow var(--t);
  background: var(--white); width: 100%;
}
.form-group input:focus,
.form-group textarea:focus {
  outline: none; border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(26,61,43,.1);
}
.form-group textarea { resize: vertical; min-height: 120px; margin-bottom: .85rem; }

/* ─────────────────────────────────────────
   ARCHIVE HEADER
───────────────────────────────────────── */
.arch-header {
  background: linear-gradient(135deg, var(--green) 0%, var(--green-mid) 100%);
  padding: 2.5rem 0;
  color: white;
}
.arch-label { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: .3rem; }
.arch-title { font-family: var(--f-serif); font-size: 2rem; color: white; }
.arch-desc { color: rgba(255,255,255,.7); font-size: .95rem; margin-top: .4rem; }
.arch-pill {
  display: inline-block;
  background: rgba(255,255,255,.14); color: rgba(255,255,255,.8);
  padding: .2rem .7rem; border-radius: 100px; font-size: .75rem; margin-top: .65rem;
}

/* ─────────────────────────────────────────
   PAGINATION
───────────────────────────────────────── */
.pagination {
  display: flex; justify-content: center; gap: .4rem; flex-wrap: wrap; margin-top: 2.5rem;
}
.pagination a,
.pagination span {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 8px; font-size: .875rem; font-weight: 600;
  background: var(--white); border: 1px solid var(--border); color: var(--body);
  transition: all var(--t);
}
.pagination a:hover { background: var(--green); color: white; border-color: var(--green); }
.pagination .current { background: var(--green); color: white; border-color: var(--green); }
.pagination .prev,
.pagination .next { width: auto; padding: 0 .85rem; gap: .25rem; font-size: .82rem; }

/* ─────────────────────────────────────────
   LOAD MORE
───────────────────────────────────────── */
.load-more { text-align: center; margin-top: 1.75rem; }
.load-more-btn {
  background: var(--white); border: 1.5px solid var(--green);
  color: var(--green); padding: .65rem 2rem;
  border-radius: var(--r); font-weight: 700; font-size: .875rem;
  transition: all var(--t);
}
.load-more-btn:hover { background: var(--green); color: white; }
.load-more-btn:disabled { opacity: .5; cursor: default; }

/* ─────────────────────────────────────────
   NEWSLETTER STRIP
───────────────────────────────────────── */
.newsletter {
  background: linear-gradient(135deg, var(--ink) 0%, var(--green) 100%);
  border-radius: var(--r-lg);
  padding: 2.5rem;
  text-align: center;
  position: relative; overflow: hidden;
  margin: 3rem 0;
}
.newsletter::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 80% at 80% 30%, rgba(201,146,26,.15) 0%, transparent 60%);
}
.newsletter > * { position: relative; }
.newsletter h3 { font-family: var(--f-serif); font-size: 1.6rem; color: white; margin-bottom: .4rem; }
.newsletter p { color: rgba(255,255,255,.65); font-size: .9rem; margin-bottom: 1.25rem; }
.nl-form { display: flex; gap: .6rem; max-width: 460px; margin: 0 auto; }
.nl-form input {
  flex: 1; padding: .7rem 1.1rem; border-radius: var(--r);
  border: none; font-family: var(--f-sans); font-size: .9rem; outline: none;
}
.nl-form button {
  background: var(--gold); color: var(--ink);
  border: none; padding: .7rem 1.25rem; border-radius: var(--r);
  font-weight: 700; font-size: .875rem; white-space: nowrap;
  transition: all var(--t);
}
.nl-form button:hover { background: var(--gold-light); transform: translateY(-1px); }
.nl-note { font-size: .72rem; color: rgba(255,255,255,.38); margin-top: .65rem; }

/* ─────────────────────────────────────────
   FOOTER
───────────────────────────────────────── */
.site-footer { background: var(--ink); color: rgba(255,255,255,.65); }
.footer-top { padding: 3.5rem 0 2.5rem; border-bottom: 1px solid rgba(255,255,255,.07); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; }

.footer-brand .name { font-family: var(--f-serif); font-size: 1.6rem; color: white; }
.footer-brand .name span { color: var(--gold-light); }
.footer-brand .sub { font-size: .68rem; color: rgba(255,255,255,.4); letter-spacing: .06em; text-transform: uppercase; }
.footer-desc { font-size: .84rem; line-height: 1.7; margin: .85rem 0; color: rgba(255,255,255,.55); }
.footer-social { display: flex; gap: .45rem; }
.footer-social a {
  width: 34px; height: 34px; border-radius: 8px;
  background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.6); font-size: .85rem;
  transition: all var(--t);
}
.footer-social a:hover { background: var(--gold); color: var(--ink); }

.footer-col-title { font-family: var(--f-serif); font-size: .95rem; font-weight: 700; color: white; margin-bottom: 1rem; }
.footer-links { display: flex; flex-direction: column; gap: .45rem; }
.footer-links a {
  font-size: .84rem; color: rgba(255,255,255,.55);
  display: flex; align-items: center; gap: .3rem;
  transition: color var(--t);
}
.footer-links a:hover { color: var(--gold-light); }
.footer-links a::before { content: '›'; color: var(--gold); opacity: .6; }

.footer-bottom {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: .75rem; padding: 1.1rem 0;
  font-size: .78rem; color: rgba(255,255,255,.35);
}
.footer-bottom a { color: rgba(255,255,255,.4); }
.footer-bottom a:hover { color: var(--gold-light); }
.footer-bottom-links { display: flex; gap: 1.25rem; }

/* ─────────────────────────────────────────
   MISC
───────────────────────────────────────── */
/* Reading progress */
#progress-bar {
  position: fixed; top: 0; left: 0; height: 3px; z-index: 999;
  background: linear-gradient(90deg, var(--green), var(--gold));
  width: 0%; transition: width .1s linear;
}

/* Back to top */
#btt {
  position: fixed; bottom: 1.75rem; right: 1.75rem;
  width: 42px; height: 42px;
  background: var(--green); color: white;
  border: none; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: all var(--t); z-index: 100;
}
#btt.show { opacity: 1; visibility: visible; transform: translateY(0); }
#btt:hover { background: var(--green-mid); transform: translateY(-2px); }

/* Toast */
.toast {
  position: fixed; bottom: 5rem; right: 1.75rem;
  background: var(--ink); color: white;
  padding: .55rem 1.1rem; border-radius: var(--r);
  font-size: .84rem; font-weight: 500;
  box-shadow: var(--shadow); z-index: 300;
  opacity: 0; transform: translateY(6px);
  transition: all .25s ease; pointer-events: none;
}
.toast.show { opacity: 1; transform: translateY(0); }

/* Cookie banner */
.cookie-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: white; border-top: 1px solid var(--border);
  padding: .85rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  z-index: 150; box-shadow: var(--shadow);
  transform: translateY(100%); transition: transform var(--t);
}
.cookie-bar.show { transform: translateY(0); }
.cookie-bar p { font-size: .82rem; color: var(--muted); }
.cookie-bar p a { color: var(--green); }
.cookie-ok {
  padding: .45rem 1.1rem; background: var(--green); color: white;
  border: none; border-radius: 6px; font-weight: 600; font-size: .82rem;
  flex-shrink: 0; transition: background var(--t);
}
.cookie-ok:hover { background: var(--green-mid); }

/* Utilities */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.section-gap { padding: 3.5rem 0; }
.section-gap-sm { padding: 2rem 0; }
.mb-gap { margin-bottom: 3.5rem; }
.no-thumb .card-img { display: none; }

/* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */
@media (max-width: 1024px) {
  .layout-cols { grid-template-columns: 1fr 290px; gap: 2.25rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-card { transform: none; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .card--hero { grid-column: span 1; flex-direction: column; }
  .card--hero .card-img { min-height: unset; aspect-ratio: 16/10; }
  .card--hero .card-body { padding: 1.1rem 1.2rem; }
  .card--hero .card-title { font-size: 1.1rem; }
  .layout-cols { grid-template-columns: 1fr; }
  .sidebar { position: static; display: none; }
  .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .primary-nav, .header-actions .btn-icon { display: none; }
  .hamburger { display: flex; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-bottom-links { flex-wrap: wrap; justify-content: center; gap: .75rem; }
  .nl-form { flex-direction: column; }
  .hero { padding: 2.5rem 0; }
  .hero-stats { gap: 1.25rem; }
  .author-box { flex-direction: column; }
  .share-bar { flex-wrap: wrap; }
  .cat-row { overflow-x: auto; flex-wrap: nowrap; padding-bottom: .25rem; scrollbar-width: none; }
  .cat-row::-webkit-scrollbar { display: none; }

  /* Mobile menu open */
  body.nav-open .primary-nav {
    display: flex; flex-direction: column;
    position: fixed; top: 66px; left: 0; right: 0; bottom: 0;
    background: white; padding: 1.25rem;
    overflow-y: auto; z-index: 199;
  }
  body.nav-open .primary-nav ul { flex-direction: column; }
  body.nav-open .primary-nav > ul > li > a {
    padding: .75rem .9rem; font-size: .95rem;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
  }
  body.nav-open .primary-nav ul ul {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; background: var(--bg);
    padding-left: 1rem; border-radius: 0;
  }
}

@media (max-width: 400px) {
  .hero-title { font-size: 1.6rem; }
  .hero-stats { flex-wrap: wrap; gap: 1rem; }
  .share-btn span { display: none; }
}

/* ─────────────────────────────────────────
   PRINT
───────────────────────────────────────── */
@media print {
  .site-header, .sidebar, .site-footer, .share-bar,
  .related, #btt, #progress-bar { display: none !important; }
  body { color: #000; font-size: 12pt; }
  .entry-content a::after { content: " (" attr(href) ")"; font-size: .85em; }
}