/*
Theme Name: Majali Blog Theme
Theme URI: https://majalicompany.co.ke/blog
Author: Majali Company
Author URI: https://majalicompany.co.ke
Description: Official blog theme for Majali Company — matches the main website design system exactly (majali.css).
Version: 2.0
License: GNU General Public License v2 or later
Text Domain: majali-blog
Tags: blog, custom-menu, featured-images, threaded-comments, responsive-layout
*/

/*
 * ================================================================
 * IMPORTANT LOAD ORDER
 * ================================================================
 * This file (style.css) is loaded AFTER majali.css by functions.php.
 * majali.css defines all base tokens, typography, topbar, navbar,
 * hero sections, footer, buttons, and utilities.
 * This file adds ONLY blog-specific layout and component styles
 * that do not exist in majali.css.
 *
 * CSS VARIABLE OVERRIDE:
 * The variables below MATCH majali.css exactly (blue brand palette).
 * The old blog theme had green variables (#0a5c36) which conflicted
 * with the main site's blue palette (#0077b6). Fixed here.
 * ================================================================
 */

/* ================================================================
   CSS CUSTOM PROPERTIES — mirror majali.css exactly
   ================================================================ */
:root {
  /* Brand palette — matches New Folder/majali.css */
  --brand-primary:   #0077b6;
  --brand-dark:      #03045e;
  --brand-light:     #00b4d8;
  --brand-accent:    #d4a017;
  --brand-accent2:   #e8b84b;

  /* Text */
  --text-dark:       #000b43;
  --text-body:       #0d1b12;
  --text-muted:      #0077b6;

  /* Surfaces */
  --surface:         #ffffff;
  --surface-off:     #f6f8f6;
  --surface-tint:    #caf0f8;
  --border:          #ade8f4;

  /* Shadows */
  --shadow-sm:       0 2px 8px rgba(3,4,94,.07);
  --shadow-md:       0 6px 24px rgba(3,4,94,.11);
  --shadow-lg:       0 16px 48px rgba(3,4,94,.16);

  /* Radii */
  --radius:          10px;
  --radius-lg:       18px;
  --radius-xl:       28px;

  /* Transitions */
  --transition:      0.25s ease;
  --transition-slow: 0.45s cubic-bezier(.25,.46,.45,.94);

  /* Layout */
  --container:       1240px;

  /* Fonts — Syne (headings) + DM Sans (body) — loaded via functions.php */
  --font-heading:    'Syne', sans-serif;
  --font-body:       'DM Sans', sans-serif;
}

/* ================================================================
   GLOBAL BASE (supplementary — majali.css handles the main reset)
   ================================================================ */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  background: var(--brand-primary);
  color: white;
  padding: .5rem 1rem;
  border-radius: var(--radius);
  font-size: .85rem;
  font-weight: 600;
  z-index: 9999;
  transition: top .2s;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* ================================================================
   BREADCRUMB BAR (below hero, above content)
   ================================================================ */
.breadcrumb-bar {
  background: var(--surface-off);
  border-bottom: 1px solid var(--border);
  padding-block: .65rem;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  list-style: none;
  font-size: .82rem;
}
.breadcrumb li { color: var(--text-muted); }
.breadcrumb li a { color: var(--brand-primary); }
.breadcrumb li a:hover { color: var(--brand-dark); }
.breadcrumb-sep { opacity: .5; }

/* ================================================================
   BLOG HERO (listing + archive pages)
   majali.css defines .blog-hero background & padding.
   These add the inner content layout.
   ================================================================ */
.blog-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(0,180,216,.25) 0%, transparent 65%);
}
.blog-hero .container { position: relative; z-index: 1; }
.blog-hero__content { max-width: 640px; }
.blog-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand-accent2);
  background: rgba(212,160,23,.12);
  border: 1px solid rgba(212,160,23,.3);
  padding: .28rem .85rem;
  border-radius: 100px;
  margin-bottom: 1.25rem;
}
.blog-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 800;
  color: white;
  margin-bottom: .85rem;
}
.blog-hero__subtitle {
  color: rgba(255,255,255,.72);
  font-size: 1.05rem;
  max-width: 500px;
}

/* ================================================================
   SECTION LABELS (blog listing)
   ================================================================ */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand-primary);
  background: var(--surface-tint);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: .28rem .85rem;
  margin-bottom: .85rem;
}
.section-title {
  font-family: var(--font-heading);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 800;
  color: var(--text-dark);
}
.blog-section { padding-block: 4.5rem; }
.blog-section .section-header { margin-bottom: 2.75rem; }

/* ================================================================
   POST CARDS GRID
   ================================================================ */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.75rem;
}

/* First card spans 2 columns and uses a side-by-side layout on wide screens */
@media (min-width: 900px) {
  .posts-grid > .post-card:first-child {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 0;
    align-items: stretch;
  }
  .posts-grid > .post-card:first-child .post-card__image-wrap {
    aspect-ratio: unset;
    min-height: 320px;
  }
}

.post-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease;
  display: flex;
  flex-direction: column;
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.post-card__image-wrap {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--surface-off);
  flex-shrink: 0;
}
.post-card__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
  display: block;
}
.post-card:hover .post-card__image-wrap img { transform: scale(1.04); }

.post-card__no-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 180px;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-light));
}
.post-card__category {
  position: absolute;
  top: .85rem;
  left: .85rem;
  background: rgba(3,4,94,.82);
  color: white;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: .25rem .65rem;
  border-radius: 100px;
  backdrop-filter: blur(6px);
}

.post-card__body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.post-card__meta {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: .65rem;
}
.post-card__meta-item {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .78rem;
  color: var(--text-muted);
}
.post-card__title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: .65rem;
  line-height: 1.35;
}
.post-card__title a { color: var(--text-dark); transition: color var(--transition); }
.post-card__title a:hover { color: var(--brand-primary); }
.post-card__excerpt {
  font-size: .9rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 1.25rem;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  margin-top: auto;
}
.post-card__read-time { font-size: .78rem; color: var(--text-muted); }

/* ================================================================
   BUTTONS — blog variants (supplement majali.css .btn-primary)
   ================================================================ */
.btn--primary,
.btn.btn--primary {
  background: var(--brand-primary);
  color: white;
  border-color: var(--brand-primary);
  font-family: var(--font-heading);
  font-weight: 600;
  border-radius: 100px;
  border: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  text-decoration: none;
  transition: all var(--transition);
}
.btn--primary:hover,
.btn.btn--primary:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(3,4,94,.22);
}
.btn--sm { font-size: .82rem; padding: .4rem 1rem; }
.btn--md { font-size: .9rem;  padding: .6rem 1.4rem; }
.btn--lg { font-size: 1rem;   padding: .85rem 2rem; }
.btn--outline {
  background: transparent;
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}
.btn--outline:hover { background: var(--brand-primary); color: white; }

/* ================================================================
   PAGINATION
   ================================================================ */
.pagination-wrap {
  margin-top: 3rem;
  display: flex;
  justify-content: center;
}
.pagination {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}
.page-numbers {
  font-family: var(--font-heading);
  font-size: .88rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  color: var(--text-body);
  border: 1.5px solid var(--border);
  transition: all var(--transition);
  text-decoration: none;
}
.page-numbers:hover { border-color: var(--brand-primary); color: var(--brand-primary); background: var(--surface-tint); }
.page-numbers.current { background: var(--brand-primary); border-color: var(--brand-primary); color: white; }
.page-numbers.dots { border: none; cursor: default; }
.page-numbers.prev,
.page-numbers.next { width: auto; padding: 0 1rem; }

/* ================================================================
   NO POSTS / EMPTY STATE
   ================================================================ */
.no-posts {
  text-align: center;
  padding: 5rem 2rem;
  background: var(--surface-off);
  border-radius: var(--radius-xl);
  border: 1px dashed var(--border);
}
.no-posts__icon  { font-size: 3rem; margin-bottom: 1rem; }
.no-posts__title { font-size: 1.4rem; margin-bottom: .5rem; }
.no-posts__text  { color: var(--text-muted); }

/* ================================================================
   SINGLE POST — HEADER TEXT (force white on dark background)
   .post-header uses var(--brand-dark) background (deep navy/blue).
   Global h1/h2 and link rules produce dark/blue text that is
   unreadable on this background. Every text element is overridden
   to white or near-white here.
   ================================================================ */

/* Container above radial gradient overlay */
.post-header .container { position: relative; z-index: 1; }
.post-header .post-header__inner { max-width: 760px; }

/* ── Breadcrumb inside post header ── */
.post-header .breadcrumb li,
.post-header .breadcrumb-sep        { color: rgba(255,255,255,.5); opacity: 1; }
.post-header .breadcrumb li a       { color: rgba(255,255,255,.72); text-decoration: none; }
.post-header .breadcrumb li a:hover { color: var(--brand-accent2); }

/* ── Category badge pills ── */
.post-header .post-header__categories {
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.post-header .post-header__cat {
  background: rgba(212,160,23,.15);
  color: var(--brand-accent2) !important;
  border: 1px solid rgba(212,160,23,.35);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .25rem .75rem;
  border-radius: 100px;
  text-decoration: none;
  transition: all var(--transition);
  display: inline-block;
}
.post-header .post-header__cat:hover {
  background: rgba(212,160,23,.3);
  color: var(--brand-accent2) !important;
}

/* ── Post title ──
   majali.css sets bare `h1 { color: var(--brand-primary); }` (blue #0077b6).
   We need a higher-specificity selector AND !important to win the cascade.     */
.post-header .post-header__title,
.post-header h1.post-header__title,
header.post-header .post-header__title {
  font-family: var(--font-heading) !important;
  font-size: clamp(1.8rem, 4vw, 3rem) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin-bottom: 1.25rem;
  line-height: 1.2;
}

/* ── Post meta row (author · date · read time · comments) ── */
.post-header .post-meta {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
}
.post-header .post-meta__item {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .85rem;
  color: rgba(255,255,255,.72) !important;
}
.post-header .post-meta__item a             { color: rgba(255,255,255,.88) !important; text-decoration: none; }
.post-header .post-meta__item a:hover       { color: var(--brand-accent2) !important; }
.post-header .post-meta__item svg           { color: rgba(255,255,255,.5) !important; flex-shrink: 0; }
.post-header .post-meta__divider            { color: rgba(255,255,255,.3) !important; font-size: .85rem; }

/* ── Catch-all: any remaining text inside post-header ──
   Ensures no dark text leaks through from global p/span/time rules.           */
.post-header .post-header__inner p,
.post-header .post-header__inner span,
.post-header .post-header__inner time       { color: rgba(255,255,255,.72); }

/* ================================================================
   SINGLE POST — FEATURED IMAGE
   Pulls image up to overlap the post-header bottom edge
   ================================================================ */
.post-featured-image {
  max-width: 960px;
  margin-inline: auto;
  padding: 0 1.5rem;
  transform: translateY(-2.5rem);
  margin-bottom: -1rem;
}
.post-featured-image img {
  width: 100%;
  aspect-ratio: 16/7;
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

/* ================================================================
   SINGLE POST — LAYOUT (content + sidebar grid)
   ================================================================ */
.single-layout { padding-block: 3.5rem; }
.single-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 3.5rem;
  align-items: start;
}
.main-content { min-width: 0; }

/* ================================================================
   ENTRY CONTENT (post body typography)
   ================================================================ */
.entry-content {
  font-size: 1.06rem;
  line-height: 1.82;
  color: var(--text-body);
}
.entry-content h2,
.entry-content h3,
.entry-content h4 {
  font-family: var(--font-heading);
  margin-top: 2.25rem;
  margin-bottom: .85rem;
  color: var(--text-dark);
}
.entry-content h2 { font-size: 1.65rem; }
.entry-content h3 { font-size: 1.35rem; }
.entry-content p  { margin-bottom: 1.35rem; }
.entry-content ul,
.entry-content ol {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.entry-content ul li { list-style: disc; }
.entry-content ol li { list-style: decimal; }
.entry-content a { color: var(--brand-primary); text-decoration: underline; text-underline-offset: 2px; }
.entry-content a:hover { color: var(--brand-dark); }
.entry-content blockquote {
  border-left: 4px solid var(--brand-primary);
  background: var(--surface-tint);
  padding: 1.25rem 1.5rem;
  margin-block: 1.75rem;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  font-style: italic;
  color: var(--text-dark);
  font-size: 1.08rem;
}
.entry-content blockquote p { margin: 0; }
.entry-content img { border-radius: var(--radius-lg); margin-block: 1.5rem; box-shadow: var(--shadow-sm); }
.entry-content code { font-family: monospace; background: var(--surface-off); border: 1px solid var(--border); padding: .15em .4em; border-radius: 4px; font-size: .9em; }
.entry-content pre { font-family: monospace; background: var(--surface-off); border: 1px solid var(--border); padding: 1.25rem; border-radius: var(--radius-lg); overflow-x: auto; margin-block: 1.5rem; }
.entry-content pre code { background: none; border: none; padding: 0; }
.entry-content hr { border: none; border-top: 1px solid var(--border); margin-block: 2.5rem; }
.entry-content table { width: 100%; border-collapse: collapse; margin-block: 1.5rem; font-size: .95rem; }
.entry-content table th,
.entry-content table td { padding: .65rem 1rem; border: 1px solid var(--border); text-align: left; }
.entry-content table th { background: var(--surface-tint); font-weight: 600; }

/* ================================================================
   POST TAGS
   ================================================================ */
.post-tags {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
  margin-top: 2.5rem;
}
.post-tags__label { font-size: .82rem; font-weight: 600; color: var(--text-muted); }
.post-tag {
  font-size: .78rem;
  font-weight: 600;
  background: var(--surface-tint);
  color: var(--brand-primary);
  border: 1px solid var(--border);
  padding: .25rem .7rem;
  border-radius: 100px;
  transition: all var(--transition);
  text-decoration: none;
}
.post-tag:hover { background: var(--brand-primary); color: white; border-color: var(--brand-primary); }

/* ================================================================
   SHARE BUTTONS
   ================================================================ */
.share-section { margin-top: 2rem; }
.share-section__title { font-size: .88rem; font-weight: 600; color: var(--text-muted); margin-bottom: .75rem; }
.share-buttons { display: flex; gap: .5rem; flex-wrap: wrap; }
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem 1rem;
  border-radius: 100px;
  font-size: .8rem;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  font-family: var(--font-body);
}
.share-btn--twitter  { background: #000;    color: white; }
.share-btn--facebook { background: #1877f2; color: white; }
.share-btn--linkedin { background: #0077b5; color: white; }
.share-btn--whatsapp { background: #25d366; color: white; }
.share-btn--copy     { background: var(--surface-off); color: var(--text-body); border: 1px solid var(--border); }
.share-btn:hover { transform: translateY(-1px); opacity: .9; }
.share-btn--copy:hover { background: var(--brand-primary); color: white; border-color: var(--brand-primary); }

/* ================================================================
   AUTHOR BOX
   ================================================================ */
.author-box {
  display: flex;
  gap: 1.25rem;
  background: var(--surface-off);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 1.75rem;
  margin-top: 2.5rem;
  align-items: flex-start;
}
.author-box__avatar { flex-shrink: 0; }
.author-box__avatar img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--border);
  display: block;
}
.author-box__label { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .25rem; }
.author-box__name  { font-size: 1rem; font-family: var(--font-heading); font-weight: 700; margin-bottom: .35rem; }
.author-box__bio   { font-size: .9rem; color: var(--text-muted); line-height: 1.65; }

/* ================================================================
   POST NAVIGATION (prev / next)
   ================================================================ */
.post-navigation {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}
.post-nav-link {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  text-decoration: none;
  color: var(--text-body);
  transition: all var(--transition);
  display: block;
}
.post-nav-link:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.post-nav-link.next-post { text-align: right; }
.post-nav-direction {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .35rem;
  display: flex;
  align-items: center;
  gap: .35rem;
}
.next-post .post-nav-direction { justify-content: flex-end; }
.post-nav-title {
  font-family: var(--font-heading);
  font-size: .95rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.35;
}

/* ================================================================
   SIDEBAR
   ================================================================ */
.sidebar {
  position: sticky;
  top: 80px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.sidebar-widget {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}
.sidebar-widget__title {
  font-family: var(--font-heading);
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--border);
}

/* Search form */
.search-form { display: flex; gap: .5rem; }
.search-form input {
  flex: 1;
  padding: .6rem .9rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: .88rem;
  outline: none;
  background: var(--surface-off);
  transition: border-color var(--transition), background var(--transition);
}
.search-form input:focus { border-color: var(--brand-primary); background: white; }
.search-form button {
  padding: .6rem .9rem;
  background: var(--brand-primary);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-size: .85rem;
  transition: background var(--transition);
  cursor: pointer;
}
.search-form button:hover { background: var(--brand-dark); }

/* Recent posts */
.recent-post-item {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding-block: .75rem;
  border-bottom: 1px solid var(--border);
}
.recent-post-item:last-child { border-bottom: none; padding-bottom: 0; }
.recent-post-img { width: 60px; height: 60px; border-radius: var(--radius); object-fit: cover; flex-shrink: 0; }
.recent-post-title {
  font-family: var(--font-heading);
  font-size: .88rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.35;
  transition: color var(--transition);
  text-decoration: none;
  display: block;
}
.recent-post-title:hover { color: var(--brand-primary); }
.recent-post-date { font-size: .75rem; color: var(--text-muted); margin-top: .2rem; }

/* Categories */
.category-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .45rem 0;
  border-bottom: 1px solid var(--border);
  font-size: .9rem;
}
.category-list-item:last-child { border-bottom: none; }
.category-list-item a { color: var(--text-body); font-weight: 500; transition: color var(--transition); text-decoration: none; }
.category-list-item a:hover { color: var(--brand-primary); }
.category-count { background: var(--surface-tint); color: var(--text-muted); font-size: .72rem; font-weight: 700; padding: .15rem .5rem; border-radius: 100px; }

/* CTA sidebar widget */
.cta-widget {
  background: linear-gradient(135deg, var(--brand-dark), var(--brand-primary));
  border: none;
  text-align: center;
}
.cta-widget .sidebar-widget__title { color: rgba(255,255,255,.65); border-color: rgba(255,255,255,.15); }
.cta-widget h3 { color: white; font-size: 1rem; margin-bottom: .5rem; }
.cta-widget p { color: rgba(255,255,255,.7); font-size: .85rem; margin-bottom: 1.1rem; }

/* ================================================================
   RELATED POSTS SECTION
   ================================================================ */
.related-posts { padding-block: 3.5rem; }
.related-posts .section-title { margin-bottom: 2rem; }
.related-posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}

/* ================================================================
   COMMENTS
   ================================================================ */
.comments-area { padding-top: 2.5rem; margin-top: 2.5rem; border-top: 1px solid var(--border); }
.comments-title { font-size: 1.25rem; margin-bottom: 1.75rem; }
.comment-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 1.5rem; }
.comment-body { background: white; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; }
.comment-author { display: flex; align-items: center; gap: .65rem; margin-bottom: .75rem; }
.comment-author img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.comment-author .fn { font-weight: 700; font-size: .95rem; color: var(--text-dark); font-style: normal; }
.comment-meta { font-size: .78rem; color: var(--text-muted); }
.comment-content p { font-size: .93rem; line-height: 1.7; }
.reply { margin-top: .75rem; }
.comment-reply-link { font-size: .8rem; font-weight: 600; color: var(--brand-primary); text-decoration: none; transition: color var(--transition); }
.comment-reply-link:hover { color: var(--brand-dark); }
.comment-respond { margin-top: 2.5rem; }
.comment-reply-title { font-size: 1.2rem; margin-bottom: 1.25rem; }
.comment-form { display: flex; flex-direction: column; gap: 1rem; }
.comment-form p { display: flex; flex-direction: column; gap: .35rem; }
.comment-form label { font-size: .85rem; font-weight: 600; color: var(--text-dark); }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  padding: .7rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: .92rem;
  background: var(--surface-off);
  outline: none;
  transition: border-color var(--transition), background var(--transition);
  width: 100%;
}
.comment-form input:focus,
.comment-form textarea:focus { border-color: var(--brand-primary); background: white; }
.comment-form textarea { min-height: 120px; resize: vertical; }
.comment-form .submit input {
  background: var(--brand-primary);
  color: white;
  border: none;
  border-radius: 100px;
  padding: .65rem 1.75rem;
  font-family: var(--font-heading);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
}
.comment-form .submit input:hover { background: var(--brand-dark); }

/* ================================================================
   PAGE LAYOUT (static pages — page.php)
   ================================================================ */
.page-layout { padding-block: 4rem; }
.page-content-wrap { max-width: 820px; margin-inline: auto; }

/* ================================================================
   ERROR PAGE (404.php)
   ================================================================ */
.error-page { padding: 8rem 0; text-align: center; }
.error-code { font-family: var(--font-heading); font-size: 8rem; font-weight: 800; color: var(--surface-tint); line-height: 1; margin-bottom: 1.5rem; }
.error-title { font-size: 2rem; margin-bottom: .85rem; }
.error-desc { color: var(--text-muted); font-size: 1.05rem; max-width: 480px; margin: 0 auto 2rem; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1024px) {
  .single-grid { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .related-posts-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .posts-grid { grid-template-columns: 1fr; }
  .posts-grid > .post-card:first-child { grid-template-columns: 1fr; grid-column: span 1; }
  .post-navigation { grid-template-columns: 1fr; }
  .blog-hero { padding: 3.5rem 0 2.5rem; padding-top: 6.5rem; }
  .related-posts-grid { grid-template-columns: 1fr; }
  .author-box { flex-direction: column; }
}

@media (max-width: 480px) {
  .post-featured-image { transform: translateY(-1.5rem); }
  .share-buttons { flex-wrap: wrap; }
  .post-navigation { grid-template-columns: 1fr; }
}