/*
Theme Name: Sarkari Job Exam
Theme URI: https://www.sarkarijobexam.site/
Author: Sarkari Job Exam
Author URI: https://www.sarkarijobexam.site/
Description: Custom WordPress theme for Sarkari Job Exam — a govt job / results / admit card / syllabus news portal. Converted from the site's original static PHP templates. No external CSS/JS frameworks: system fonts, one inline SVG icon sprite, one hand-written stylesheet. Uses native WordPress post categories to drive the colour-coded badges (Result / Admit Card / Syllabus / Answer Key / Jobs / Update).
Version: 1.8
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sarkari-job-exam
*/

/* ============================================================
   DESIGN TOKENS
============================================================ */
:root{
  --bg:#F3F5F8; --card:#FFFFFF; --text:#1B2635; --text-mute:#64748B;
  --border:#E3E7EE;

  /* Vibrant brand palette — solid, saturated colours used as real fills
     (badges, headers, buttons), not just faint accents. */
  --brand-yellow:#F2A93B; --brand-dark:#0D2B54; --brand-red:#E5384A;

  --blue:#C81E2F;   --blue-bg:#FBDADD;
  --purple:#8B3FE8; --purple-bg:#EDE0FF;
  --orange:#F2790B; --orange-bg:#FFE7CC;
  --green:#12A96B;  --green-bg:#CFF7E4;
  --red:#E5384A;    --red-bg:#FFE0E2;

  --r:0; --r-lg:0;
}
/* NOTE: --blue is intentionally a red value now (site-wide blue → red swap).
   The variable name is kept as --blue so every existing rule that
   references var(--blue) / var(--blue-bg) below doesn't need to be
   touched individually — it just renders red instead of blue. --red is
   a separate, slightly different shade used elsewhere (breaking bar tag,
   quicklink palette, etc.), so the two don't collide visually. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.5;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;border:none;background:none;cursor:pointer}
.icon{width:1em;height:1em;fill:currentColor;display:inline-block;vertical-align:-0.125em}

.wrap{max-width:1160px;margin:0 auto;padding:0 14px}
.screen-reader-text{position:absolute!important;left:-9999px;top:-9999px}

/* ---------- Header ---------- */
.site-header{
  background:#000; border-bottom:1px solid rgba(255,255,255,.12);
  position:sticky; top:0; z-index:50;
}
.site-header .bar{
  max-width:1160px; margin:0 auto; padding:14px 12px;
  display:flex; align-items:center; gap:16px;
  flex-wrap:nowrap;
}
.logo{display:flex; align-items:center; gap:9px; min-width:0; flex-shrink:0}
.logo-mark{
  width:38px;height:38px; border-radius:0; background:var(--brand-dark);
  color:#fff; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; font-size:16px; font-weight:800; overflow:hidden;
}
.logo-mark img{width:100%;height:100%;border-radius:0;object-fit:cover;display:block}
.logo-text{
  font-size:17.5px; font-weight:800; letter-spacing:.1px; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.logo-text span{color:var(--red)}
.bell-btn{
  width:36px;height:36px;border-radius:0; background:var(--bg);
  border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.bell-btn .icon{font-size:14px;color:var(--text-mute)}
.bell-btn:hover{ background:#fff; border-color:var(--brand-dark) }

.header-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; margin-left:auto }
.menu-btn{
  width:36px;height:36px;border-radius:0; background:var(--bg);
  border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.menu-btn .icon{font-size:14px;color:var(--text-mute)}

/* Mobile dropdown menu */
.mobile-menu{
  display:none; flex-direction:column; gap:2px;
  position:absolute; top:100%; left:0; right:0; background:var(--card);
  border-bottom:1px solid var(--border); padding:8px; max-height:0; overflow:hidden;
}
.mobile-menu.open{ display:flex; max-height:80vh; overflow-y:auto }
.mobile-menu a{
  display:flex; align-items:center; gap:10px; padding:10px 10px; border-radius:0;
  font-size:14px; font-weight:600; color:var(--text);
}
.mobile-menu a:hover{ background:var(--bg) }
.mobile-menu .icon{ width:16px; flex-shrink:0; color:var(--text-mute) }
.mobile-menu-divider{
  font-size:10.5px; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
  color:var(--text-mute); padding:10px 10px 2px;
}

/* Primary nav */
.desktop-nav{ display:none }

@media (min-width:900px){
  .menu-btn, .mobile-menu{ display:none !important }

  .site-header{ border-bottom-width:3px }
  .site-header .bar{ padding:18px 14px; gap:20px }
  .logo{ gap:10px }
  .logo-mark{ width:42px;height:42px; border-radius:0}
  .logo-mark .icon{ font-size:17px }
  .logo-text{ font-size:20px; letter-spacing:.5px }
  .bell-btn{ width:36px;height:36px }
  .bell-btn .icon{ font-size:15px }

  .desktop-nav{
    display:flex; align-items:center; gap:2px; flex-shrink:1; min-width:0;
  }
  .desktop-nav ul{ list-style:none; display:flex; align-items:center; gap:2px }
  .desktop-nav a{
    display:flex; align-items:center; gap:6px; padding:9px 13px; border-radius:0;
    font-size:13.5px; font-weight:600; color:#fff; white-space:nowrap; flex-shrink:0;
  }
  .desktop-nav a:hover{ background:rgba(255,255,255,.12); color:#fff }

  .nav-dropdown{ position:relative; flex-shrink:0 }
  .nav-dropdown-toggle{
    display:flex; align-items:center; gap:6px; padding:9px 13px; border-radius:0;
    font-size:13.5px; font-weight:600; color:#fff; white-space:nowrap;
  }
  .nav-dropdown-toggle:hover{ background:rgba(255,255,255,.12); color:#fff }
  .nav-dropdown-toggle .icon{ font-size:10px; transition:transform .15s }
  .nav-dropdown-menu{
    display:none; position:absolute; top:100%; left:0; margin-top:6px;
    background:var(--card); border:1px solid var(--border); border-radius:0;
    padding:6px; min-width:200px; z-index:60;
  }
  .nav-dropdown-menu ul{ list-style:none }
  .nav-dropdown.open .nav-dropdown-menu{ display:flex; flex-direction:column }
  .nav-dropdown.open .nav-dropdown-toggle .icon{ transform:rotate(180deg) }
  .nav-dropdown-menu a{
    display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:0;
    font-size:13px; font-weight:600; color:var(--text); white-space:nowrap;
  }
  .nav-dropdown-menu a:hover{ background:var(--bg) }
  .nav-dropdown-menu .icon{ font-size:13px; color:var(--text-mute) }
}

/* ---------- Breaking news bar (full-width, sits right below the header) ---------- */
.sje-breaking{
  display:flex; align-items:center; gap:10px; background:#D90000; color:#fff;
  padding:9px 14px; overflow:hidden; border-radius:0; width:100%;
}
.sje-breaking-tag{
  flex-shrink:0; font-size:11px; font-weight:800; text-transform:uppercase;
  letter-spacing:.4px; border-right:1px solid rgba(255,255,255,.4); padding-right:10px;
}
.sje-breaking-text{ font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sje-breaking-text a{ color:#fff }

/* ---------- Layout ---------- */
.page{ max-width:1160px; margin:0 auto; padding:16px 14px 24px;
  display:grid; gap:20px; grid-template-columns:1fr; }
@media (min-width:900px){ .page{ grid-template-columns:1fr 320px; align-items:start; } }
.page.no-sidebar{ grid-template-columns:1fr; max-width:820px; }

/* ---------- Feed ---------- */
.feed-header{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px }
.feed-title{ font-size:17px; font-weight:800 }
.feed-count{ font-size:12px; color:var(--text-mute) }

.post-card{
  display:flex; gap:12px; align-items:center; background:var(--card);
  border:1px solid var(--border); border-left:4px solid var(--border); border-radius:0;
  padding:10px; margin-bottom:8px; transition:border-color .15s ease;
}
.post-card:hover{}
.post-card:has(.cat-update):hover, .post-card:has(.cat-jobs):hover{ border-left-color:var(--blue) }
.post-card:has(.cat-result):hover{ border-left-color:var(--purple) }
.post-card:has(.cat-admit):hover{ border-left-color:var(--orange) }
.post-card:has(.cat-syllabus):hover{ border-left-color:var(--green) }
.post-card:has(.cat-key):hover{ border-left-color:var(--red) }
@media (min-width:900px){
  #postsContainer{
    display:grid; grid-template-columns:1fr 1fr; gap:10px;
  }
  .post-card{ margin-bottom:0; align-items:flex-start }
  #loadMoreBtn{ grid-column:1 / -1 }
}
.post-thumb{ width:82px;height:62px;flex-shrink:0; border-radius:0; overflow:hidden; background:var(--bg);
  display:flex; align-items:center; justify-content:center; }
.post-thumb img{ width:100%; height:100%; object-fit:cover }
.thumb-ph .icon{ font-size:22px }
.post-body{ min-width:0; display:flex; flex-direction:column; gap:5px }
.post-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.cat-badge{
  display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:800;
  padding:3px 9px; border-radius:0; letter-spacing:.3px; text-transform:uppercase;
  color:#fff; }
.cat-update, .cat-jobs { background:var(--blue) }
.cat-result   { background:var(--purple) }
.cat-admit    { background:var(--orange) }
.cat-syllabus { background:var(--green) }
.cat-key      { background:var(--red) }
.post-date{ font-size:11px; color:var(--text-mute); display:flex; align-items:center; gap:4px }
.post-title{
  font-size:14px; font-weight:700; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

#loadMoreBtn{
  width:100%; padding:12px; margin-top:6px; border-radius:0;
  background:var(--blue); color:#fff; font-weight:700; font-size:13px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  }
.loader-wrap{ display:none; justify-content:center; padding:16px 0 }
.loader-spin{
  width:22px;height:22px;border-radius:50%; border:3px solid var(--border);
  border-top-color:var(--brand-red); animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }
.end-note{ text-align:center; font-size:12px; color:var(--text-mute); padding:14px 0 }

/* ---------- Sidebar ---------- */
.sidebar{ display:none }
@media (min-width:900px){
  .sidebar{ display:flex; flex-direction:column; gap:14px; position:sticky; top:104px; }
}
.widget{
  background:var(--card); border:1px solid var(--border); border-radius:0; overflow:hidden;
  transition:border-color .15s ease;
}
.widget:hover{ border-color:#D6DCE5 }
.widget-header{
  padding:13px 16px; font-size:13px; font-weight:800; color:#fff;
  display:flex; align-items:center; gap:8px; background:var(--brand-dark);
}
.widget-header .icon{ color:var(--brand-yellow); font-size:14px }
.category-list{ list-style:none; padding:8px }
.category-list a{
  display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 8px; border-radius:0;
  font-size:13px; font-weight:600; color:var(--text);
}
.category-list a:hover{ background:var(--bg) }
.category-list .cat-name{ display:flex; align-items:center; gap:8px }
.category-list .icon{ width:16px; flex-shrink:0 }
.category-list .cat-count{ font-size:11px; color:var(--text-mute); font-weight:700 }

.trending-list{ list-style:none; padding:6px 8px }
.trending-list a{ display:flex; align-items:flex-start; gap:10px; padding:8px; border-radius:0}
.trending-list a:hover{ background:var(--bg) }
.trending-rank{
  flex-shrink:0; width:22px; height:22px; border-radius:0; background:var(--blue-bg);
  color:var(--blue); font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center;
}
.trending-list li:first-child .trending-rank{ background:var(--brand-yellow); color:#fff }
.trending-title{
  font-size:12.5px; font-weight:600; line-height:1.35; color:var(--text);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

.search-widget-form{ padding:12px 14px; position:relative }
.search-widget-form input[type="search"]{
  width:100%; border:1.5px solid var(--border); border-radius:0; padding:9px 12px 9px 34px;
  font-size:13px; font-family:inherit; background:var(--bg);
}
.search-widget-form input[type="search"]:focus{ outline:none; border-color:var(--brand-dark); background:#fff }
.search-widget-form .icon{ position:absolute; left:26px; top:50%; transform:translateY(-50%); font-size:13px; color:var(--text-mute) }
.search-widget-form button{ position:absolute; right:20px; top:50%; transform:translateY(-50%); }

/* ---------- Default WordPress widgets (auto-styled) ----------
   Any core widget — Archives, Categories, Recent Posts, Recent
   Comments, Pages, Meta, Text/Custom HTML, Search, Calendar — dropped
   into "Sidebar Extra" (Appearance → Widgets) picks up the same look
   as the hand-built widgets above automatically, no per-widget CSS
   classes required on the admin side. */
.widget_archive ul, .widget_categories ul, .widget_pages ul,
.widget_meta ul, .widget_recent_entries ul, .widget_recent_comments ul,
.widget_nav_menu ul{
  list-style:none; padding:8px;
}
.widget_archive li, .widget_categories li, .widget_pages li,
.widget_meta li, .widget_recent_entries li, .widget_recent_comments li,
.widget_nav_menu li{
  border-radius:0;
}
.widget_archive li > a, .widget_categories li > a, .widget_pages li > a,
.widget_meta li > a, .widget_recent_entries li > a, .widget_recent_comments li > a,
.widget_nav_menu li > a{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:8px 8px; border-radius:0; font-size:13px; font-weight:600; color:var(--text);
}
.widget_archive li > a:hover, .widget_categories li > a:hover, .widget_pages li > a:hover,
.widget_meta li > a:hover, .widget_recent_entries li > a:hover, .widget_recent_comments li > a:hover,
.widget_nav_menu li > a:hover{
  background:var(--bg); color:var(--blue);
}
/* Recent Comments' text isn't wrapped in its own <a> the same way, so
   style the row instead of assuming a link */
.widget_recent_comments li{
  font-size:12.5px; line-height:1.5; padding:8px; border-radius:0; color:var(--text-mute);
}
.widget_recent_comments li:hover{ background:var(--bg) }
.widget_recent_comments li a{ font-weight:700; color:var(--text) }
.widget_categories .cat-item span, .widget_archive li span{
  font-size:11px; color:var(--text-mute); font-weight:700;
}
/* Text / Custom HTML widgets */
.widget_text, .widget_custom_html{ padding:14px; font-size:13px; line-height:1.6; color:var(--text-mute) }
.widget_text img, .widget_custom_html img{ border-radius:0}
.widget_text a, .widget_custom_html a{ color:var(--blue); font-weight:600 }
/* Search widget (if the core Search widget is used instead of the custom one) */
.widget_search .search-form{ padding:12px 14px; display:flex; gap:8px }
.widget_search .search-form label{ flex:1 }
.widget_search .search-form input[type="search"]{
  width:100%; border:1.5px solid var(--border); border-radius:0; padding:9px 12px;
  font-size:13px; font-family:inherit;
}
.widget_search .search-form input[type="submit"]{
  background:var(--brand-dark); color:#fff; font-weight:700; padding:9px 14px; border-radius:0; font-size:12.5px;
}
/* Calendar widget, in case it's ever added */
.widget_calendar{ padding:12px 14px }
.widget_calendar table{ width:100%; border-collapse:collapse; font-size:11.5px; text-align:center }
.widget_calendar caption{ font-weight:700; padding-bottom:8px }
.widget_calendar th{ color:var(--text-mute); font-weight:700; padding:4px 0 }
.widget_calendar td{ padding:5px 0; border-radius:0}
.widget_calendar #today{ background:var(--bg); border:1px solid var(--brand-dark); font-weight:800; border-radius:0}
.widget_calendar a{ color:var(--blue); font-weight:700 }
/* Tag cloud, RSS widgets */
.widget_tag_cloud .tagcloud{ padding:12px 14px; display:flex; flex-wrap:wrap; gap:6px }
.widget_tag_cloud .tagcloud a{
  font-size:11.5px!important; font-weight:700; background:var(--bg); border:1px solid var(--border);
  padding:5px 10px; border-radius:0; color:var(--text);
}
.widget_tag_cloud .tagcloud a:hover{ background:var(--bg); border-color:var(--brand-dark); color:var(--brand-dark) }
.widget_rss ul{ list-style:none; padding:8px }
.widget_rss li{ padding:8px; border-bottom:1px solid var(--border); font-size:12.5px }
.widget_rss li:last-child{ border-bottom:none }
.widget_rss .rss-date{ display:block; font-size:11px; color:var(--text-mute) }
/* Select-based Archives/Categories dropdown ("Display as dropdown") */
.widget select{
  width:calc(100% - 28px); margin:14px; border:1.5px solid var(--border); border-radius:0;
  padding:8px 10px; font-family:inherit; font-size:13px; background:#fff;
}

/* ---------- Footer ---------- */
.site-footer{ background:#000; color:rgba(255,255,255,.85); margin-top:28px }
.footer-inner{
  max-width:1160px; margin:0 auto; padding:20px 14px 16px;
  display:grid; gap:18px; grid-template-columns:1fr 1fr;
}
.footer-inner .footer-brand{ grid-column:1 / -1 }
@media (min-width:700px){ .footer-inner{ grid-template-columns:1.2fr 1fr 1fr 1fr; gap:24px; padding:36px 14px 24px } .footer-inner .footer-brand{ grid-column:auto } }
@media (min-width:900px){ .footer-inner{ padding:44px 14px 28px } }
.footer-brand{ display:flex; flex-direction:column; gap:8px }
.footer-brand .logo{ display:flex; align-items:center; gap:8px }
.footer-brand .logo-text{ color:#fff }
.footer-brand .logo-text span{ color:var(--brand-yellow) }
.footer-brand .logo-mark{ background:#fff; color:var(--brand-dark) }
.footer-tagline{ font-size:11.5px; line-height:1.55; color:rgba(255,255,255,.55); max-width:320px }
.footer-col h3{
  font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
  color:var(--brand-yellow); margin-bottom:8px;
}
.footer-col ul{ list-style:none; display:flex; flex-direction:column; gap:6px }
.footer-col a{ font-size:12.5px; color:rgba(255,255,255,.75); transition:color .15s }
.footer-col a:hover{ color:var(--brand-yellow) }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12); padding:12px 14px;
  display:flex; flex-direction:column; gap:5px; align-items:center; text-align:center;
}
@media (min-width:900px){
  .footer-bottom{ flex-direction:row; justify-content:space-between; text-align:left; padding:18px 14px; max-width:1160px; margin:0 auto }
}
.footer-bottom p{ font-size:10.5px; line-height:1.5; color:rgba(255,255,255,.45); max-width:640px }
.footer-bottom .copyright{ font-size:11.5px; color:rgba(255,255,255,.6); font-weight:600; white-space:nowrap }

/* ---------- Scroll to top ---------- */
#scrollTop{
  position:fixed; bottom:20px; right:16px; width:38px;height:38px;
  background:#000; color:#fff; border:none;
  border-radius:0; display:none; align-items:center; justify-content:center; z-index:49;
  }
#scrollTop.visible{ display:flex }

/* ============================================================
   SINGLE POST / PAGE (article_template.html conversion)
============================================================ */
.breadcrumb{ display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--text-mute); margin-bottom:12px; flex-wrap:wrap }
.breadcrumb a:hover{ color:var(--blue) }
.breadcrumb .sep{ opacity:.5 }
.breadcrumb .current{ color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:280px }

.article{ background:var(--card); border:1px solid var(--border); border-radius:0; padding:18px; }
@media (min-width:700px){ .article{ padding:28px } }

.article-top-meta{ display:flex; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap }

.article-title{ font-size:22px; font-weight:800; line-height:1.3; color:var(--text); margin-bottom:16px }
@media (min-width:700px){ .article-title{ font-size:30px } }

.article-thumb{
  width:100%; aspect-ratio:16/9; background:var(--bg); border-radius:0;
  overflow:hidden; margin-bottom:18px; border:1px solid var(--border);
}
.article-thumb img{ width:100%; height:100%; object-fit:cover }

.article-authorbar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  border-bottom:1px solid var(--border); padding-bottom:14px; margin-bottom:18px; flex-wrap:wrap;
}
.author-chip{ display:flex; align-items:center; gap:8px }
.author-avatar{
  width:32px;height:32px;border-radius:50%; background:var(--brand-dark); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px;
  border:1px solid var(--border); overflow:hidden; flex-shrink:0;
}
.author-avatar img{ width:100%; height:100%; object-fit:cover }
.author-name{ font-size:12.5px; font-weight:700; color:var(--text) }
.author-role{ font-size:10.5px; color:var(--text-mute) }
.share-row{ display:flex; align-items:center; gap:8px }
.share-btn{
  width:32px;height:32px;border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--bg); color:var(--text-mute); border:1px solid var(--border);
}
.share-btn:hover{ background:var(--brand-dark); color:#fff; border-color:var(--brand-dark) }

/* Content typography */
.article-content{
  color:var(--text); font-size:15px; line-height:1.6;
  /* Neutralize WP's block-gap custom property at the root of the content
     so any nested block reading var(--wp--style--block-gap, ...) falls
     back to 0 instead of its own (often 2em+) default. */
  --wp--style--block-gap:0px;
}
.article-content > *:first-child{ margin-top:0 !important }
.article-content h2{
  font-weight:800; font-size:18px; margin:20px 0 8px !important; color:var(--text);
  padding-bottom:4px; border-bottom:3px solid var(--brand-yellow); display:inline-block;
}
.article-content h3{ font-weight:700; font-size:15.5px; margin:16px 0 6px !important; color:#374151 }
.article-content p{ margin-bottom:12px !important }

/* Guardrail: the block editor lets a heading/paragraph be bumped to a
   bigger size (a "has-*-font-size" class, or a literal inline
   style="font-size:...") independently of this stylesheet. Inline
   styles and WP's own preset classes both beat the rules above on
   specificity, so without this, one oversized block in the page editor
   is enough to make a short page like Contact Us look badly over-spaced
   even though every rule above is sane. Force content back to this
   theme's own scale. */
.article-content [style*="font-size"],
.article-content .has-small-font-size,
.article-content .has-medium-font-size,
.article-content .has-large-font-size,
.article-content .has-x-large-font-size,
.article-content .has-huge-font-size{ font-size:inherit !important; }

/* Guardrail: WordPress's own layout/blockGap support (and any manual
   "Block spacing" set in the editor's Advanced panel) writes margin
   straight onto a block via an inline style="margin-top:..." or a
   near-zero-specificity `.is-layout-flow > * + *` rule. That's why the
   h2/h3 top-margins above barely moved even after being edited: the
   injected spacing was winning the cascade and stacking on top of (or
   replacing) our own margin. !important on our rules forces this
   theme's own vertical rhythm to win regardless. */
.article-content .is-layout-flow > *,
.article-content .is-layout-constrained > *{ margin-top:0 !important; margin-bottom:0 !important; }
.article-content ul, .article-content ol{ margin:0 0 14px 1.1rem !important }
.article-content ul{ list-style:disc }
.article-content ol{ list-style:decimal }
.article-content li{ margin-bottom:4px }
.article-content blockquote{
  background:var(--bg); border-left:3px solid var(--brand-dark); padding:12px 14px;
  font-style:italic; margin:16px 0; border-radius:0; color:#4B5563;
}
.article-content img{
  width:100%; height:auto; border-radius:0; border:1px solid var(--border); margin:16px 0;
}
.article-content a{ color:var(--blue); text-decoration:underline; text-underline-offset:2px; font-weight:600 }
.article-content a:hover{ background:var(--blue-bg) }
.article-content table{ width:100%; border-collapse:collapse; margin:16px 0; font-size:13px; border:1px solid var(--border) }
.article-content th{ background:var(--bg); font-weight:700; text-align:left; padding:8px; border-bottom:2px solid #d1d5db }
.article-content td{ padding:8px; border-bottom:1px solid var(--border) }
.article-content tr:nth-child(even){ background:#fafafa }
.table-wrapper{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin-bottom:16px; border-radius:0; border:1px solid var(--border) }

.article-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; padding-top:18px; border-top:1px solid var(--border) }
.article-tags a{
  font-size:11.5px; font-weight:700; padding:5px 12px; border-radius:0;
  background:var(--bg); color:var(--text-mute); border:1px solid var(--border);
}
.article-tags a:hover{ background:var(--brand-yellow); color:var(--brand-dark); border-color:var(--brand-dark) }

/* Prev / Next adjacent post navigation */
.adjacent-nav{ display:grid; grid-template-columns:1fr; gap:10px; margin-top:14px }
@media (min-width:700px){ .adjacent-nav{ grid-template-columns:1fr 1fr } }
.adj-card{
  position:relative; display:flex; gap:10px; align-items:center; background:var(--card);
  border:1px solid var(--border); border-radius:0; padding:10px;
}
.adj-card.next{ flex-direction:row-reverse; text-align:right }
.adj-tag{
  position:absolute; top:-9px; font-size:9px; font-weight:800; letter-spacing:.3px;
  background:var(--brand-dark); color:var(--brand-yellow); padding:2px 8px; border-radius:0;
}
.adj-card.prev .adj-tag{ left:10px }
.adj-card.next .adj-tag{ right:10px }
.adj-thumb{ width:52px;height:52px;flex-shrink:0; border-radius:0; overflow:hidden; background:var(--bg) }
.adj-thumb img{ width:100%; height:100%; object-fit:cover }
.adj-title{ font-size:12.5px; font-weight:700; line-height:1.3; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden }
.adj-title:hover{ color:var(--blue) }

/* ---------- Comments ---------- */
.comments-area{
  margin-top:32px; padding-top:24px; border-top:1px solid var(--border);
}
.comments-title{
  font-size:16px; font-weight:800; margin-bottom:18px;
  display:flex; align-items:center; gap:9px;
}
.comments-title .icon{
  width:30px; height:30px; flex-shrink:0; border-radius:0;
  background:var(--blue); color:#fff; font-size:14px;
  display:flex; align-items:center; justify-content:center;
}
.comments-count{ color:var(--blue) }

/* Comment list — each comment is its own card */
.comment-list, .comment-list .children{ list-style:none }
.comment-list{ display:flex; flex-direction:column; gap:10px; margin-bottom:24px }
.comment-list .children{ display:flex; flex-direction:column; gap:10px; margin:10px 0 0; padding-left:18px; border-left:2px solid var(--border) }
@media (min-width:600px){ .comment-list .children{ padding-left:26px } }

.comment-card > .comment-body{
  background:var(--card); border:1px solid var(--border); border-radius:0;
  padding:16px; transition:border-color .15s ease;
}
.comment-card > .comment-body:hover{ border-color:#D6DCE5 }
.bypostauthor > .comment-body{ border-color:var(--blue); background:var(--blue-bg) }

.comment-head{ display:flex; align-items:flex-start; gap:11px; margin-bottom:10px }
.comment-head .author-avatar{
  width:42px; height:42px; border-radius:50%; overflow:hidden; flex-shrink:0;
  border:2px solid #fff; background:var(--bg);
  display:flex; align-items:center; justify-content:center;
}
.comment-head .author-avatar img{ width:100%; height:100%; object-fit:cover; display:block }
.comment-head-text{ min-width:0 }
.comment-author{
  font-size:14px; font-weight:700; display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  color:var(--text);
}
.comment-author-badge{
  font-size:9.5px; font-weight:700; letter-spacing:.3px; text-transform:uppercase;
  background:var(--brand-dark); color:#fff; padding:2px 8px; border-radius:0;
}
.comment-meta{ margin-top:3px }
.comment-meta a{
  font-size:11.5px; color:var(--text-mute); display:inline-flex; align-items:center; gap:4px;
}
.comment-meta a:hover{ color:var(--blue) }
.comment-meta .icon{ font-size:11px }

.comment-content{
  padding-left:53px; /* aligns with the text next to the 42px avatar + gap */
}
.comment-content p{ font-size:13.5px; line-height:1.7; color:var(--text); margin:0 0 8px }
.comment-content p:last-child{ margin-bottom:0 }
.comment-awaiting-moderation{
  display:flex; align-items:center; gap:7px; font-size:12px; font-weight:600;
  color:var(--orange); background:var(--orange-bg); padding:8px 11px; border-radius:0; margin-bottom:10px;
  border-left:3px solid var(--orange);
}

.comment-actions{ margin-top:10px; padding-left:53px }
.comment-reply-link{
  display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700;
  color:#fff; padding:6px 12px; border-radius:0; background:var(--blue);
  border:1px solid transparent; transition:background .15s ease;
}
.comment-reply-link:hover{ background:#A81826 }
.comment-reply-link .icon{ font-size:11px }

.no-comments{
  display:flex; align-items:center; gap:9px; font-size:13px; color:var(--text-mute);
  background:var(--bg); border:1px dashed var(--border); border-radius:0; padding:16px; margin-bottom:20px;
}

/* Comments on narrow screens: drop the avatar-width indent so text/actions
   use the full card width instead of a cramped column. */
@media (max-width:420px){
  .comment-head .author-avatar{ width:36px; height:36px }
  .comment-content, .comment-actions{ padding-left:0; margin-top:10px }
}

/* Reply / new-comment form — its own distinct, more clearly separated card */
#respond{
  background:var(--card); border:1px solid var(--border); border-radius:0;
  padding:22px; }
@media (max-width:480px){
  #respond{ padding:18px 16px; border-radius:0}
}
.comment-reply-title{
  font-size:16px; font-weight:800; margin-bottom:4px; color:var(--text);
  display:flex; align-items:center; gap:8px;
}
.comment-reply-title::before{
  content:""; display:inline-block; width:4px; height:16px; border-radius:0;
  background:var(--brand-dark);
}
.comment-reply-title small a{
  font-size:11px; font-weight:600; color:var(--brand-red); margin-left:8px;
}
.comment-notes{ font-size:12.5px; color:var(--text-mute); margin-bottom:16px; padding-left:12px }
.required-star{ color:var(--brand-red) }

.comment-form{ display:flex; flex-direction:column; gap:14px }
.comment-form-author,
.comment-form-email,
.comment-form-comment{ display:flex; flex-direction:column; gap:6px }
@media (min-width:560px){
  .comment-form-author, .comment-form-email{ display:inline-flex }
  .comment-form-author{ float:left; width:calc(50% - 7px) }
  .comment-form-email{ float:right; width:calc(50% - 7px) }
  .comment-form-comment{ clear:both }
}
.comment-form label{ font-size:12px; font-weight:700; color:var(--text) }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea{
  width:100%; border:1.5px solid var(--border); border-radius:0; padding:11px 13px;
  font-family:inherit; font-size:13.5px; background:var(--bg); color:var(--text);
  transition:border-color .15s ease, background .15s ease;
}
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus{
  outline:none; border-color:var(--brand-dark); background:#fff;
  }
.comment-form textarea{ min-height:130px; resize:vertical; line-height:1.6 }
.comment-form .comment-form-cookies-consent{ display:flex; flex-direction:row; align-items:center; gap:8px; font-size:12px; color:var(--text-mute) }
.comment-form .comment-form-cookies-consent input{ width:auto }
.comment-form .form-submit{ margin-top:4px }
.comment-form .form-submit button,
.comment-form .form-submit input[type="submit"]{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  background:var(--blue); color:#fff; font-weight:700; font-family:inherit;
  padding:12px 24px; border-radius:0; font-size:13.5px; cursor:pointer;
  transition:transform .1s ease;
  }
.comment-form .form-submit button:hover,
.comment-form .form-submit input[type="submit"]:hover{}
.comment-form .form-submit button:active,
.comment-form .form-submit input[type="submit"]:active{ transform:scale(.98) }
.comment-form .form-submit .icon{ font-size:13px }

.comments-pagination{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:22px; font-size:12.5px; font-weight:700;
}
.comments-pagination a{
  display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:0;
  border:1px solid var(--border); background:var(--card);
}
.comments-pagination a:hover{ border-color:var(--blue); color:var(--blue) }

/* Static WP page (no article meta / no comments styling needed) */
.static-page .article-title{ margin-bottom:18px }