/*
Theme Name: Neon Hacker Blog
Theme URI: https://aathilducky.com
Author: aathilducky
Author URI: https://aathilducky.com
Description: A fast, modern, SEO-friendly blogging theme with a clean premium white look, responsive layout, and built-in ad slots (AdSense + custom). Perfect for tech/cybersecurity blogs.
Version: 1.5.31
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: neon-hacker-blog
Tags: blog, news, one-column, two-columns, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, accessibility-ready
*/

:root{
  /* Premium White */
  --bg0:#ffffff;
  --bg1:#ffffff;

  --card: rgba(255,255,255,0.96);
  --card2: rgba(255,255,255,0.96);
  --border: rgba(15,23,42,0.14);

  --text: #0f172a;
  --muted: rgba(15,23,42,0.72);
  --subtle: rgba(15,23,42,0.58);

  --accent:#2563eb;
  --accent2:#0f172a;
  --accent3:#7c3aed;

  /* Layout */
  --nav-h:56px;
  --logo-h:32px;
  --radius:14px;

  /* Sizing */
  --maxw: 1680px;
  --readw: 820px;
  --asidew: 340px;
  --asidegap: 28px;

  /* Needed vars referenced elsewhere */
  --radius2: 12px;
  --shadow: 0 14px 46px rgba(2,6,23,0.10);
}






/* =========================
   Neon Hacker Blog — CSS
   - Minimal gradient background
   - System font stack (fast)
   - Clear, readable typography
   ========================= */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(1100px 620px at 14% 8%, rgba(37,99,235,0.08), transparent 62%),
    radial-gradient(900px 520px at 86% 12%, rgba(124,58,237,0.06), transparent 62%),
    radial-gradient(900px 520px at 55% 92%, rgba(2,6,23,0.04), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }
pre, code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
::selection { background: rgba(37,99,235,0.18); }

/* Accessibility */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #fff;
  color: #000;
  padding: 10px 12px;
  border-radius: 10px;
  z-index: 9999;
}
.skip-link:focus { left: 12px; top: 12px; }

.container {
  width: min(var(--maxw), calc(100% - 32px));
  margin: 0 auto;
}

/* Home/landing pages: a little more breathing room on wide screens */
.container-home{
  width: min(var(--maxw), calc(100% - 56px));
}
@media (max-width: 680px){
  .container-home{ width: min(var(--maxw), calc(100% - 32px)); }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(255,255,255,0.90);
  border-bottom: 1px solid rgba(15,23,42,0.10);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 180px;
}
.brand-logo {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(37,99,235,0.90), rgba(124,58,237,0.86));
  box-shadow: 0 10px 26px rgba(0,0,0,0.35);
  display: grid;
  place-items: center;
  font-weight: 800;
  color: rgba(255,255,255,0.95);
}
.brand-title {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.site-title {
  font-size: 16px;
  letter-spacing: 0.2px;
  margin: 0;
}
.site-tagline {
  font-size: 12px;
  color: var(--muted);
  margin: 2px 0 0 0;
}

/* Nav */
.nav-toggle {
  display: none;
  border: 1px solid rgba(10,11,13,0.14);
  background: rgba(255,255,255,0.55);
  color: var(--text);
  border-radius: 14px;
  padding: 10px 12px;
  cursor: pointer;
}
.nav-toggle:focus { outline: 2px solid rgba(37,99,235,0.55); outline-offset: 2px; }

.primary-nav { display: flex; align-items: center; gap: 10px; }
.primary-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.primary-nav a {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 999px;
  color: rgba(10,11,13,0.72);
  border: 1px solid transparent;
  text-decoration: none;
  font-weight: 750;
  letter-spacing: .1px;
}
.primary-nav a:hover {
  color: var(--text);
  border-color: rgba(10,11,13,0.12);
  background: rgba(255,255,255,0.55);
  text-decoration: none;
}
.primary-nav .current-menu-item > a,
.primary-nav .current_page_item > a {
  color: var(--text);
  background: rgba(255,255,255,0.70);
  border-color: rgba(10,11,13,0.12);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-inline {
  position: relative;
  width: min(360px, 42vw);
}
.search-inline input[type="search"] {
  width: 100%;
  padding: 10px 12px 10px 38px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.55);
  color: var(--text);
}
.search-inline input[type="search"]::placeholder { color: rgba(10,11,13,0.45); }
.search-inline .icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.75;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.55);
  color: var(--muted);
  font-size: 13px;
}
.badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 0 18px rgba(51,255,153,0.35);
}

/* Hero */
.hero {
  padding: 36px 0 18px 0;
}
.hero-inner {
  border: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  box-shadow: var(--shadow);
  border-radius: var(--radius2);
  overflow: hidden;
  position: relative;
}
.hero-inner::before {
  content: "";
  position: absolute;
  inset: -120px;
  background:
    radial-gradient(420px 240px at 18% 30%, rgba(51,255,153,0.18), transparent 60%),
    radial-gradient(420px 240px at 72% 28%, rgba(77,163,255,0.22), transparent 60%);
  filter: blur(8px);
  opacity: 0.95;
  pointer-events: none;
}
.hero-content {
  position: relative;
  padding: 34px 26px;
  display: grid;
  gap: 14px;
}
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
}
.pill {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.18);
}
.hero-title {
  margin: 0;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.5px;
}
.hero-title .grad {
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-subtitle {
  margin: 0;
  font-size: 16px;
  color: var(--muted);
  max-width: 64ch;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.55);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}
.btn:hover {
  background: rgba(255,255,255,0.10);
  text-decoration: none;
}
.btn-primary {
  border-color: rgba(51,255,153,0.28);
  background: linear-gradient(135deg, rgba(51,255,153,0.22), rgba(77,163,255,0.18));
}
.btn-primary:hover {
  border-color: rgba(51,255,153,0.40);
  background: linear-gradient(135deg, rgba(51,255,153,0.28), rgba(77,163,255,0.22));
}

/* Layout */
.main {
  padding: 18px 0 56px 0;
}
.grid{display:block;}

.card {
  border: 1px solid rgba(255,255,255,0.10);
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: 0 14px 50px rgba(0,0,0,0.32);
}
.card-inner { padding: 18px; }

.section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 18px 0 12px 0;
}
.section-title h2 {
  margin: 0;
  font-size: 18px;
  letter-spacing: 0.2px;
}
.section-title a { color: var(--muted); font-size: 13px; }

.posts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}


/* Home feed: 4 cards per row on desktop */
.home .posts{
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1300px){
  .home .posts{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px){
  .home .posts{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px){
  .home .posts{ grid-template-columns: 1fr; }
}

.post-card {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.post-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.16);
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.05));
}
.post-thumb {
  display: block;
  aspect-ratio: 16/9;
  background: rgba(255,255,255,0.55);
}
.post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.post-body { padding: 14px 14px 16px 14px; }
.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  color: var(--subtle);
  font-size: 12px;
}
.post-meta a { color: var(--subtle); }
.post-meta .dot {
  width: 4px; height: 4px; border-radius: 99px;
  background: rgba(255,255,255,0.35);
}
.post-title {
  margin: 8px 0 8px 0;
  font-size: 16px;
  line-height: 1.25;
}
.post-excerpt {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

/* Reading */
.reading-wrap {
  width: min(var(--readw), 100%);
  margin: 0 auto;
}

/* Single post layout: fill left/right gaps with compact sidebars */
.single-grid{
  display: grid;
  grid-template-columns: var(--asidew) minmax(0, 1fr) var(--asidew);
  gap: var(--asidegap);
  align-items: start;
  padding: 18px 0 0 0;
}
.single-main{ min-width: 0; }
/* Keep article readable width while sidebars grow */
.single-main .reading-wrap{ width: min(var(--readw), 100%); margin: 0 auto; }
.single-aside{
  position: sticky;
  top: calc(var(--nav-h) + 14px);
  align-self: start;
}
.side-card{
  border: 1px solid var(--border);
  background: var(--card);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: none;
}
.side-card h3{
  margin: 0 0 10px 0;
  font-size: 15px;
  letter-spacing: .2px;
}
.side-list{ margin:0; padding:0; list-style:none; display:grid; gap:10px; }
.side-item a{
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 10px;
  align-items: center;
  text-decoration: none;
}
.side-thumb{
  width: 52px; height: 52px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: rgba(2,6,23,0.04);
}
.side-thumb img{ width:100%; height:100%; object-fit: cover; display:block; }
.side-title{ font-size: 14px; line-height: 1.25; margin:0; color: var(--text); }
.side-meta{ font-size: 12px; color: var(--muted); margin-top:2px; }
.toc{
  margin:0; padding:0; list-style:none; display:grid; gap:8px;
}
.toc a{ color: inherit; text-decoration: none; }
.toc a:hover{ text-decoration: underline; }
.toc li{ font-size: 13px; color: var(--muted); line-height:1.25; }
.toc li[data-level="3"]{ padding-left: 12px; }
.toc li[data-level="4"]{ padding-left: 22px; }
.share-row{ display:flex; flex-wrap:wrap; gap:8px; }
.share-row .btn{ padding:8px 10px; border-radius: 12px; font-size: 12px; }

/* Author card (right sidebar) */
.author-card{ padding: 14px 16px; }
.side-kicker{ margin:0 0 10px 0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.author-row{ display:flex; gap:12px; align-items:flex-start; }
.author-avatar img, .author-avatar .author-avatar-img{ border-radius: 999px; border: 1px solid var(--border); width:64px; height:64px; object-fit:cover; display:block; }
.author-meta{ min-width: 0; }
.author-name{ margin:0; font-weight: 700; font-size: 14px; color: var(--text); }
.author-bio{ margin:6px 0 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.35; }

.author-links{ display:flex; gap:8px; margin-top: 10px; flex-wrap:wrap; }
.author-ico{
  width: 34px; height: 34px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.55);
  color: var(--text);
  text-decoration:none;
}
.author-ico:hover{ text-decoration:none; border-color: rgba(37,99,235,0.24); background: rgba(2,6,23,0.06); }
.author-ico svg{ width: 16px; height: 16px; display:block; }

/* Sidebar tag chips */
.tag-chips--sidebar{ display:flex; flex-wrap:wrap; gap:8px; }
.tag-chips--sidebar .tag-chip{
  display:inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.55);
  font-size: 12px;
  text-decoration: none;
}
.tag-chips--sidebar .tag-chip:hover{ text-decoration: none; border-color: rgba(37,99,235,0.24); background: rgba(2,6,23,0.05); }

/* Affiliate promo list (left sidebar) */
.aff-list{ display:grid; gap:10px; }
.aff-item{
  display:grid;
  grid-template-columns: 52px 1fr;
  gap: 10px;
  align-items:center;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(10,11,13,0.10);
  background: rgba(255,255,255,0.62);
  text-decoration:none;
}
.aff-item:hover{ text-decoration:none; border-color: rgba(37,99,235,0.24); background: rgba(2,6,23,0.05); }
.aff-thumb{
  width:52px; height:52px;
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.14);
  display:grid;
  place-items:center;
}
.aff-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.aff-thumb-fallback{ font-size: 18px; opacity:.9; }
.aff-body{ min-width:0; display:grid; gap:3px; }
.aff-title{ font-size: 13.5px; font-weight: 700; color: var(--text); }
.aff-desc{ font-size: 12px; color: var(--muted); }

/* After-tags latest posts (3 small cards row) */
.mini-posts{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mini-post{
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  background: rgba(255,255,255,0.05);
  overflow:hidden;
}
.mini-a{ display:grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 12px; align-items:center; text-decoration:none; }
.mini-a:hover{ text-decoration:none; }
.mini-thumb{ width:64px; height:64px; border-radius: 16px; overflow:hidden; border:1px solid rgba(255,255,255,0.12); background: rgba(0,0,0,0.14); display:grid; place-items:center; }
.mini-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.mini-thumb-fallback{ font-size: 18px; opacity:.9; }
.mini-body{ min-width:0; display:grid; gap: 6px; }
.mini-title{ font-size: 13.5px; font-weight: 700; color: var(--text); line-height: 1.25; }
.mini-meta{ font-size: 12px; color: var(--muted); display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
@media (max-width: 980px){
  .mini-posts{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .mini-posts{ grid-template-columns: 1fr; }
}

/* Bottom ads (after comments) */
.post-bottom-ads{ margin-top: 18px; display:grid; gap: 16px; }

/* Two related posts at the bottom */
.posts.posts-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Large screens: wider asides + roomy layout */
@media (min-width: 1400px){
  .single-grid{ gap: max(var(--asidegap), 28px); }
}

@media (max-width: 980px){
  .single-grid{ grid-template-columns: 1fr; }
  .single-aside{ position: static; }
  .posts.posts-2{ grid-template-columns: 1fr; }
}
.entry-header { margin-bottom: 12px; }
.entry-title {
  margin: 0 0 8px 0;
  font-size: clamp(26px, 3.5vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.4px;
}
.entry-submeta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  color: var(--subtle);
  font-size: 13px;
}
.entry-submeta a { color: var(--subtle); }
.entry-featured {
  margin: 14px 0 18px 0;
  border-radius: var(--radius2);
  overflow: hidden;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.05);
}
.entry-featured img { width: 100%; display: block; }
.entry-content {
  font-size: 17px;
  color: rgba(255,255,255,0.90);
}
.entry-content p { margin: 0 0 1.05em 0; }
.entry-content h2, .entry-content h3, .entry-content h4 {
  line-height: 1.2;
  margin: 1.4em 0 0.6em 0;
}
.entry-content h2 { font-size: 22px; }
.entry-content h3 { font-size: 19px; }
.entry-content h4 { font-size: 17px; color: rgba(15,23,42,0.88); }
.entry-content a { color: rgba(77,163,255,0.95); }
.entry-content a:hover { color: rgba(51,255,153,0.95); }
.entry-content blockquote {
  margin: 1.2em 0;
  padding: 14px 16px;
  border-left: 3px solid rgba(51,255,153,0.55);
  background: rgba(255,255,255,0.05);
  border-radius: 14px;
  color: rgba(255,255,255,0.86);
}
.entry-content pre{
  margin: 1.2em 0;
  padding: 14px 16px;
  overflow: auto;
  border: 1px solid rgba(0,0,0,0.75);
  background: #f8fafc;
  border-radius: 14px;
  color: #0f172a;
  position: relative;
}
.entry-content pre.has-copy{
  padding-top: 44px;
}

.entry-content code {
  background: rgba(0,0,0,0.22);
  padding: 0.15em 0.35em;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.10);
}
.entry-content pre code {
  background: transparent;
  border: none;
  padding: 0;
}
.wp-block-image img { border-radius: 16px; }
.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
  border-radius: 14px;
  overflow: hidden;
}
.wp-block-table td, .wp-block-table th {
  padding: 10px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.wp-block-table th { text-align: left; color: rgba(255,255,255,0.92); }

.breadcrumbs {
  font-size: 13px;
  color: var(--subtle);
  margin: 10px 0 0 0;
}
.breadcrumbs a { color: var(--subtle); }

/* Ads */
.ad-slot {
  border: 1px dashed rgba(255,255,255,0.18);
  border-radius: 18px;
  background: rgba(0,0,0,0.16);
  padding: 14px;
  margin: 16px 0;
}
.ad-label {
  font-size: 12px;
  color: var(--subtle);
  margin-bottom: 10px;
}

/* Widgets */
.site-footer .widget {
  padding: 0;
  border-radius: var(--radius);
  border: 0;
  background: transparent;
  margin-bottom: 14px;
}
.widget-title {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: rgba(255,255,255,0.92);
}
.widget-area a { color: rgba(77,163,255,0.95); }

/* Footer */
.site-footer {
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(11,12,14,0.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 26px 0;
  color: var(--muted);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 16px;
}
.footer-grid h3 {
  margin: 0 0 10px 0;
  color: rgba(255,255,255,0.92);
  font-size: 14px;
}
.footer-grid p { margin: 0; }
.footer-bottom {
  margin-top: 18px;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
}

/* Pagination */
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0 0;
}
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  padding: 9px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.55);
  color: var(--muted);
  text-decoration: none;
}
.pagination .page-numbers.current {
  color: var(--text);
  background: rgba(255,255,255,0.10);
}

/* Comments */
.comment-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.comment {
  margin: 12px 0;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(10,11,13,0.10);
  background: rgba(255,255,255,0.62);
}
.comment-meta { color: var(--subtle); font-size: 12px; }
.comment-content { color: rgba(255,255,255,0.90); }
.comment-reply-link { color: rgba(51,255,153,0.92); }

.comment-form input, .comment-form textarea {
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.55);
  color: var(--text);
  padding: 10px 12px;
}
.comment-form textarea { min-height: 140px; }

/* Responsive */
@media (max-width: 980px) {
  .grid { grid-template-columns: 1fr; }
  .posts { grid-template-columns: 1fr; }
  .search-inline { display: none; }
  .footer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .nav-toggle { display: inline-flex; }
  .primary-nav { position: relative; }
  .primary-nav ul {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    width: min(320px, calc(100vw - 32px));
    flex-direction: column;
    gap: 0;
    padding: 10px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: rgba(246,255,246,0.96);
    box-shadow: var(--shadow);
  }
  .primary-nav ul.is-open { display: flex; }
  .primary-nav a { padding: 10px 12px; }
}


/* Filter bar */
.filterbar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  margin: 12px 0 16px 0;
}
.filterbar form{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.filterbar input[type="search"], .filterbar .select{
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.55);
  color: var(--text);
  padding: 10px 12px;
}
.filterbar .select{ padding-right: 34px; }
@media (max-width: 980px){
  .filterbar{ align-items:stretch; }
  .filterbar form{ width:100%; }
  .filterbar form > *{ flex:1; min-width: 160px; }
}




/* =========================
   Premium navbar + search
   ========================= */

.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  display:flex;
  align-items:center;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.site-header.is-hidden{
  transform: translateY(-110%);
  transition: transform .24s ease;
}
.site-header.is-shown{
  transform: translateY(0);
  transition: transform .24s ease;
}

/* Brand / logo */
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width: 220px;
}
.brand .custom-logo{
  max-height: var(--logo-h);
  width: auto;
  height: auto;
  object-fit: contain;
  display:block;
}
.brand .site-title a{
  font-weight: 900;
  letter-spacing: .2px;
}
.site-tagline{ display:none; } /* keep header clean */

/* Actions */
.header-actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.icon-btn{
  width: 40px;
  height: 40px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.55);
  color: var(--text);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition: transform .15s ease, background .15s ease;
}
.icon-btn:hover{ transform: translateY(-1px); }
.icon-btn svg{ width:18px; height:18px; }

/* Right icon (uploadable) */
.nav-right-icon img{
  max-height: 38px;
  width: auto;
  display:block;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.35);
}

/* Search panel */
.nav-search-panel{
  position:absolute;
  left:0; right:0;
  top: var(--nav-h);
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow:hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition: max-height .26s ease, opacity .18s ease, transform .18s ease;
}
.nav-search-panel.is-open{
  max-height: 320px;
  opacity: 1;
  transform: translateY(0);
}
.nav-search-inner{
  padding: 14px 0 16px 0;
}
.nav-search-form{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.nav-search-form input[type="search"], .nav-search-form select{
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.60);
  color: var(--text);
  padding: 11px 12px;
}
.nav-search-form input[type="search"]{ flex: 1; min-width: 220px; }
.nav-search-form select{ min-width: 180px; }
.nav-search-form .btn{ border-radius: 16px; }

/* Suggestions dropdown */
.suggest-box{
  position: relative;
  width: 100%;
}
.suggest-list{
  margin-top: 8px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.72);
  overflow:hidden;
}
.suggest-item{
  display:flex;
  gap:10px;
  align-items:center;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  text-decoration:none;
  color: var(--text);
}
.suggest-item:first-child{ border-top:none; }
.suggest-thumb{
  width:42px; height:42px; border-radius: 14px;
  overflow:hidden;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.08);
  flex: 0 0 auto;
}
.suggest-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.suggest-title{ font-weight: 750; font-size: 13px; line-height: 1.2; }
.suggest-meta{ font-size: 12px; color: var(--muted); }

/* Post cards: include tags */
.tag-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top: 10px; }
.tag-chip{
  border-radius: 999px;
  border: 1px solid var(--border);
  padding: 6px 10px;
  font-size: 12px;
  color: var(--muted);
  background: rgba(255,255,255,0.50);
}

/* Reduce hero shadows */
.hero, .hero-inner{ box-shadow: none !important; }
.hero{
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.45);
}

/* Comments: modern, minimal (no big shadows) */
.comments-area{
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.comment-list .comment{
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.45);
  border-radius: 18px;
  padding: 14px;
  margin: 12px 0;
  box-shadow: none;
}
.comment-author .avatar{ border-radius: 14px; }
.comment-metadata{ color: var(--muted); font-size: 12px; }
.comment-content{ color: var(--text); }
.comment-form input, .comment-form textarea{
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.55);
  color: var(--text);
}

/* Responsive: 3 cols desktop, 2 tablet, 1 mobile */
.posts{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 1024px){
  .posts{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px){
  .posts{ grid-template-columns: 1fr; }
  .nav-search-form select{ min-width: 0; flex: 1; }
}

/* Markdown output */
.nhb-md{
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 18px;
  background: rgba(255,255,255,0.45);
}
.nhb-md h1,.nhb-md h2,.nhb-md h3{ margin-top: 14px; }
.nhb-md pre{ margin-top: 14px; }



/* =========================
   v1.2.3 UX fixes
   ========================= */

/* Hero: no outer container padding artifacts */
.hero{ margin-left: 0; margin-right: 0; }

/* Post cards: stable layout even with tags */
.post-card{
  position: relative;
  height: 100%;
  border: 1px solid var(--border);
  background: var(--card);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.post-card:hover{
  transform: translateY(-2px);
  border-color: rgba(77,163,255,0.30);
}

.post-card-link{
  position:absolute;
  inset:0;
  z-index:1;
  border-radius: inherit;
}
/* keep internal elements clickable and on top */
.post-card > *{
  position: relative;
  z-index: 2;
}

.post-body{
  display:flex;
  flex-direction:column;
  gap: 10px;
  padding: 14px 14px 16px 14px;
  min-height: 0;
}
.post-title{
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-excerpt{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tag-chips{
  margin-top: 2px;
  max-height: 46px; /* keeps card heights consistent */
  overflow: hidden;
}

/* Markdown block: no horizontal scroll, wrap lines */
.nhb-md pre{
  overflow-x: hidden !important;
  white-space: pre-wrap;
  word-break: break-word;
}
.nhb-md pre code{
  white-space: inherit;
}

/* Markdown block should look like "content", not a widget */
.nhb-md{
  box-shadow: none !important;
}


/* =========================
   v1.2.4 Search modal + mobile nav + no horizontal scroll
   ========================= */
html, body { overflow-x: hidden; }
img, video, iframe { max-width: 100%; height: auto; }

/* Hero outer gradient */
.hero{
  background: radial-gradient(900px 240px at 20% 15%, rgba(77,163,255,0.18), transparent 55%),
              radial-gradient(700px 240px at 80% 20%, rgba(148,77,255,0.14), transparent 55%),
              linear-gradient(180deg, rgba(0,0,0,0.00), rgba(0,0,0,0.00));
}

/* Post cards: slightly larger typography */
.post-meta{ font-size: 13px; }
.post-title{ font-size: 20px; line-height: 1.25; }
.post-excerpt{ font-size: 14px; line-height: 1.55; }

/* Footer always dark (even in light mode) */
.site-footer{
  background: #ffffff;
  color: rgba(15,23,42,0.88);
  border-top: 1px solid rgba(15,23,42,0.10);
}
.site-footer a{ color: var(--accent); }
.site-footer a:hover{ text-decoration: underline; }
.site-footer h3{ color: var(--text); }
.site-footer .footer-bottom{
  border-top: 1px solid rgba(15,23,42,0.10);
  color: rgba(15,23,42,0.72);
}

/* Search modal popup */
html.modal-open{ overflow: hidden; }
.search-modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}
.search-modal.is-open{ display: block; }
.search-backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: nhbFade .14s ease-out both;
}
.search-dialog{
  position: relative;
  width: min(720px, calc(100vw - 24px));
  margin: 10vh auto 0 auto;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 14px;
  box-shadow: 0 30px 120px rgba(0,0,0,0.25);
  animation: nhbPop .16s ease-out both;
}
.search-head{ display:flex; align-items:center; justify-content: space-between; gap: 10px; padding: 4px 2px 10px 2px; }
.search-title{ margin: 0; font-size: 16px; }
.search-form{ display:flex; flex-direction:column; gap: 10px; }
.search-input{
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  outline: none;
}
.search-input:focus{ border-color: rgba(77,163,255,0.6); box-shadow: 0 0 0 3px rgba(77,163,255,0.15); }
.search-filters{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.search-filters select{
  width: 100%;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}
.search-actions{ display:flex; gap: 10px; align-items:center; }
@keyframes nhbFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes nhbPop{ from{ transform: translateY(-8px) scale(.98); opacity:0; } to{ transform: translateY(0) scale(1); opacity:1; } }

/* Suggestions list inside modal */
.suggest-box{
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,0.80);
}
.suggest-item{ display:flex; gap: 10px; padding: 10px; align-items:center; }
.suggest-item:hover{ background: rgba(77,163,255,0.08); }
.suggest-item img{ width: 40px; height: 40px; border-radius: 10px; object-fit: cover; }

/* Mobile nav: burger on right, actions inside dropdown */
@media (max-width: 820px){
  .header-actions{ display:none !important; }
  .primary-nav{ margin-left: auto; }
  .nav-toggle{ margin-left: auto; }
  [data-nav-menu] + .mobile-menu-actions{ display:none; }
  [data-nav-menu].is-open + .mobile-menu-actions{ display:flex; flex-direction: column; gap: 8px; padding: 10px 10px 12px 10px; }
  .menu-action{
    width:100%;
    text-align:left;
    padding: 12px 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.70);
    color: var(--text);
  }
  }


/* =========================
   v1.2.6 Navbar + click fixes
   ========================= */

/* Post card anchor fills whole card */
.post-card-a{
  display:block;
  color: inherit;
  text-decoration: none;
  height: 100%;
}
.post-card-a:focus{
  outline: 2px solid rgba(77,163,255,0.55);
  outline-offset: 2px;
}
.post-thumb-fallback{
  width:100%;height:100%;
  display:grid;place-items:center;
  background:rgba(0,0,0,0.06);
  font-weight:900;
  font-size:18px;
  color:var(--muted);
}

/* Stronger blur when search modal open */
html.modal-open .site-header,
html.modal-open .main,
html.modal-open .site-footer{
  filter: blur(6px);
  pointer-events: none;
}
html.modal-open .search-modal{
  pointer-events: auto;
}

/* Ensure no horizontal scroll anywhere */
*{ max-width: 100%; }
pre, code { max-width: 100%; }
.search-dialog{ max-width: 720px; }

/* Desktop vs Mobile: avoid duplicate search/theme buttons */
@media (min-width: 761px){
  .mobile-menu-actions{ display:none !important; }
  .nav-backdrop{ display:none !important; }
  .header-actions{ display:flex !important; }
}
@media (max-width: 760px){
  .header-actions{ display:none !important; } /* so search/theme not duplicated */
}

/* Mobile full-width dropdown + animations */
@media (max-width: 760px){
  .primary-nav ul{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: var(--nav-h) !important;
    width: 100vw !important;
    max-height: calc(100vh - var(--nav-h)) !important;
    overflow: auto !important;
    display: none;
    flex-direction: column;
    gap: 6px;
    padding: 14px 14px 18px 14px;
    border-radius: 0 0 18px 18px;
    border: 1px solid var(--border);
    background: rgba(246,255,246,0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transform: translateY(-10px);
    opacity: 0;
    transition: transform .16s ease, opacity .16s ease;
    z-index: 70;
  }
  .primary-nav ul.is-open{
    display: flex;
    transform: translateY(0);
    opacity: 1;
  }

  .nav-backdrop{
    position: fixed;
    inset: 0;
    top: var(--nav-h);
    background: rgba(0,0,0,0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display:none;
    z-index: 60;
  }
  .nav-backdrop.is-open{ display:block; }

  /* Menu items - full width buttons */
  .primary-nav ul a{
    display:block;
    padding: 12px 12px;
    border-radius: 14px;
  }
  .primary-nav ul a:hover{
    background: rgba(77,163,255,0.10);
  }

  /* Put burger on the far right */
  .primary-nav{ margin-left: auto; }
  .nav-toggle{ margin-left: auto; }

  /* Mobile actions appear only when menu open (existing rule) */
}

/* Search modal: backdrop blur more */
.search-backdrop{
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}


/* =========================
   v1.2.8 Header actions + markdown colors + card hover
   ========================= */

/* Header layering & clickability */
.site-header{ position: sticky; top: 0; z-index: 3000; }
.header-actions{ display:flex; align-items:center; gap:10px; position: relative; z-index: 3100; }
.header-actions .icon-btn{ cursor:pointer; }
.icon-img img{ display:block; max-height: 28px; width:auto; }

/* Desktop: keep actions visible */
@media (min-width: 761px){
  .header-actions{ display:flex !important; }
}

/* Mobile: show actions on the right: 1) menu 2) toggle 3) search */
@media (max-width: 760px){
  .header-actions{ display:flex !important; margin-left:auto; }
}

/* Full-width dropdown should not cover header buttons */
.nav-backdrop{ z-index: 2500; }
.primary-nav ul{ z-index: 2600; }

/* Post cards: never underline text on hover */
.post-card-a, .post-card-a *{ text-decoration:none !important; }
.post-card-a:hover, .post-card-a:hover *{ text-decoration:none !important; }

/* Markdown syntax colors (GitHub-like) */
.tok-kw{ color: #b06cff; font-weight: 700; }
.tok-str{ color: #22c55e; }
.tok-num{ color: #f59e0b; }
.tok-com{ color: rgba(127, 127, 127, 0.95); font-style: italic; }
.tok-fn{ color: #4da3ff; }
.tok-op{ color: rgba(120, 120, 120, 0.95); }
.tok-tag{ color: #ff5ea8; }


@media (min-width: 981px){ .nav-toggle{ display:none !important; } }


/* =========================================
   v1.5.18 — Premium white overrides
   - No gradients
   - Simple navbar (no pill container)
   - Post text is BLACK / readable
   ========================================= */

:root{
  /* Match inspiration: flat lime + black typography */
  --bg0:#6CFF66;
  --bg1:#6CFF66;

  --card: rgba(255,255,255,0.72);
  --card2: rgba(255,255,255,0.86);
  --border: rgba(0,0,0,0.18);

  --text: rgba(0,0,0,0.92);
  --muted: rgba(0,0,0,0.62);
  --subtle: rgba(0,0,0,0.52);

  --accent:#6CFF66;
  --accent2:#6B004B;
  --accent3:#000000;

  --shadow: 0 10px 24px rgba(0,0,0,0.10);
}

body{
  /* Flat background (no gradients) */
  background: var(--accent) !important;
  color: var(--text);
  /* Slightly tighter, premium typography feel */
  letter-spacing: -0.01em;
}

/* Header / navbar (simple, no “container pill”) */
.site-header{
  background: rgba(108,255,102,0.94) !important;
  border-bottom: 1px solid rgba(0,0,0,0.12) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.primary-nav ul{
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  gap: 16px !important;
}

.primary-nav a{
  padding: 8px 6px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(0,0,0,0.78) !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
  text-decoration: none !important;
}

.primary-nav a:hover{ text-decoration: underline !important; }

.primary-nav .current-menu-item > a,
.primary-nav .current_page_item > a{
  color: var(--text) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* Mobile menu: still clean + readable */
@media (max-width: 760px){
  .primary-nav ul{
    background: rgba(108,255,102,0.98) !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  .primary-nav li{ border-top: 1px solid rgba(0,0,0,0.12); }
  .primary-nav li:first-child{ border-top: 0; }
}

/* Remove any remaining gradient-ish effects */
.hero, .hero-inner, .brand-logo{ box-shadow: none !important; }

/* Content readability (black text) */
.entry-content{
  color: var(--text) !important;
}
.entry-content h2, .entry-content h3, .entry-content h4{
  color: var(--text) !important;
  letter-spacing: -0.02em;
}
.entry-content a{
  color: var(--text) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.entry-content a:hover{ opacity: 0.85; }

.entry-content blockquote{
  background: rgba(255,255,255,0.62) !important;
  color: var(--text) !important;
  border-left-color: rgba(0,0,0,0.55) !important;
}

/* Code blocks remain dark for contrast */
.entry-content pre{
  background: rgba(0,0,0,0.92) !important;
  border-color: rgba(0,0,0,0.20) !important;
}
.entry-content pre code{ color: rgba(255,255,255,0.92) !important; }
.entry-content code{
  background: rgba(255,255,255,0.55) !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  color: rgba(0,0,0,0.90) !important;
}

.wp-block-table table{
  border: 1px solid rgba(0,0,0,0.14) !important;
  background: rgba(255,255,255,0.62) !important;
}
.wp-block-table td, .wp-block-table th{
  border-bottom: 1px solid rgba(0,0,0,0.12) !important;
  color: var(--text) !important;
}
.wp-block-table th{ color: var(--text) !important; }

.ad-slot{
  border: 1px dashed rgba(0,0,0,0.22) !important;
  background: rgba(255,255,255,0.55) !important;
}

.widget-title{ color: var(--text) !important; }
.widget-area a{
  color: var(--text) !important;
  text-decoration: underline !important;
}

.comment-content{ color: var(--text) !important; }

.site-footer{
  background: rgba(255,255,255,0.52) !important;
  border-top: 1px solid rgba(0,0,0,0.12) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.site-footer a, .footer-grid h3, .footer-bottom{ color: var(--text) !important; }

body{
  background: var(--accent);
  color: var(--text);
}

/* Header / navbar: simple (no pill container) */
.site-header{
  background: rgba(108,255,102,0.92);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid rgba(0,0,0,0.12);
}

.primary-nav ul{
  padding: 0;
  border: none;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  gap: 16px;
}
.primary-nav a{
  padding: 8px 6px;
  border: none;
  background: transparent;
  border-radius: 0;
  color: rgba(0,0,0,0.78);
  font-weight: 780;
}
.primary-nav a:hover{
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
.primary-nav .current-menu-item > a,
.primary-nav .current_page_item > a{
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

@media (max-width: 760px){
  .primary-nav ul{
    background: rgba(108,255,102,0.96);
    border: 0;
    box-shadow: none;
  }
  .primary-nav li + li{ border-top: 1px solid rgba(0,0,0,0.10); }
  .primary-nav a{ padding: 12px 10px; }
}

/* Brand chip: flat (no gradient) */
.brand-logo{
  background: rgba(0,0,0,0.92);
  box-shadow: none;
  color: var(--accent);
}

/* Make post/article text BLACK */
.entry-content{
  color: var(--text);
}
.entry-content h2,
.entry-content h3,
.entry-content h4{
  color: var(--text);
}
.entry-content a{
  color: var(--text);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.entry-content a:hover{
  color: var(--text);
}
.entry-content blockquote{
  background: rgba(255,255,255,0.62);
  color: var(--text);
  border-left-color: rgba(0,0,0,0.45);
}

/* Code blocks: keep premium contrast */
.entry-content pre{
  background: rgba(0,0,0,0.92);
  border-color: rgba(0,0,0,0.22);
}
.entry-content pre code{ color: rgba(255,255,255,0.92); }
.entry-content code{
  background: rgba(255,255,255,0.60);
  border-color: rgba(0,0,0,0.10);
  color: rgba(0,0,0,0.90);
}

/* Tables */
.wp-block-table table{
  border-color: rgba(0,0,0,0.14);
  background: rgba(255,255,255,0.65);
}
.wp-block-table td, .wp-block-table th{
  border-bottom-color: rgba(0,0,0,0.12);
  color: var(--text);
}
.wp-block-table th{ color: var(--text); }

/* Ads */
.ad-slot{
  border: 1px dashed rgba(0,0,0,0.22);
  background: rgba(255,255,255,0.55);
}

/* Widgets + footer: readable on lime */
.widget-title{ color: var(--text); }
.widget-area a{ color: var(--text); }

.site-footer{
  background: rgba(255,255,255,0.52);
  border-top: 1px solid rgba(0,0,0,0.12);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--muted);
}
.footer-grid h3,
.footer-bottom,
.site-footer a{ color: var(--text); }

/* Comments */
.comment-content{ color: var(--text); }


/* =========================
   v1.2.10 Readability fixes
   ========================= */

/* Light theme: ensure single post/page content is dark and readable */


/* Light theme: meta text slightly muted but still visible */

/* 2) Search modal: remove blur effect, keep background non-interactive */
html.modal-open .site-header,
html.modal-open .main,
html.modal-open .site-footer{
  filter: none !important;
  pointer-events: none;
}
html.modal-open .search-modal{
  pointer-events: auto;
}


/* =========================
   v1.2.11 Sticky footer + code blocks (copy + languages)
   ========================= */

/* Sticky footer: keep footer at bottom on short pages (search/no results, 404, etc.) */
html, body { height: 100%; }
body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.main{ flex: 1 0 auto; }
.site-footer{ margin-top: auto; flex-shrink: 0; }

/* Code blocks (WP + Markdown) */
.entry-content pre,
.nhb-md pre,
.wp-block-code,
pre{
  position: relative;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(11,18,32,0.06);
  padding: 14px 14px 14px 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.entry-content pre code,
.nhb-md pre code,
.wp-block-code code,
pre code{
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  line-height: 1.65;
  white-space: pre;
}

/* Inline code */
.entry-content code:not(pre code),
.nhb-md code:not(pre code){
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.95em;
  padding: 0.12em 0.35em;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(11,18,32,0.05);
}

/* Copy button */
.copy-btn{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.85);
  color: var(--text);
  cursor: pointer;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.copy-btn:hover{ border-color: rgba(77,163,255,0.35); }
.copy-btn:active{ transform: translateY(1px); }

/* Syntax colors (applies for ```lang fences and regular code blocks) */
.tok-kw{ color: #b06cff; font-weight: 700; }
.tok-str{ color: #16a34a; }
.tok-num{ color: #f59e0b; }
.tok-com{ color: rgba(100, 116, 139, 0.95); font-style: italic; }
.tok-fn{ color: #2563eb; }
.tok-op{ color: rgba(71, 85, 105, 0.95); }
.tok-tag{ color: #db2777; }



/* =========================
   v1.2.12 Search glass + per-language syntax colors
   ========================= */

/* Default token palette (fallback) */
pre, .wp-block-code, .nhb-md pre{
  --kw: #b06cff;
  --str: #16a34a;
  --num: #f59e0b;
  --com: rgba(100, 116, 139, 0.95);
  --fn: #2563eb;
  --op: rgba(71, 85, 105, 0.95);
  --tag: #db2777;
}

/* Per-language accents (subtle, readable) */
pre[data-lang="bash"], pre.lang-bash { --kw:#0ea5e9; --str:#22c55e; --fn:#38bdf8; }
pre[data-lang="sql"],  pre.lang-sql  { --kw:#f59e0b; --str:#22c55e; --fn:#fb7185; }
pre[data-lang="python"], pre.lang-python { --kw:#8b5cf6; --str:#22c55e; --fn:#3b82f6; }
pre[data-lang="php"],  pre.lang-php  { --kw:#a78bfa; --str:#34d399; --fn:#60a5fa; }
pre[data-lang="js"],   pre.lang-js   { --kw:#22c55e; --str:#f59e0b; --fn:#0ea5e9; }
pre[data-lang="cpp"],  pre.lang-cpp  { --kw:#f97316; --str:#22c55e; --fn:#3b82f6; }
pre[data-lang="c"],    pre.lang-c    { --kw:#f97316; --str:#22c55e; --fn:#60a5fa; }
pre[data-lang="html"], pre.lang-html { --kw:#0ea5e9; --str:#22c55e; --tag:#ff5ea8; }

/* Token classes use vars */
.tok-kw{ color: var(--kw); font-weight: 700; }
.tok-str{ color: var(--str); }
.tok-num{ color: var(--num); }
.tok-com{ color: var(--com); font-style: italic; }
.tok-fn{ color: var(--fn); }
.tok-op{ color: var(--op); }
.tok-tag{ color: var(--tag); }

/* Inline <code> can opt-in to highlighting by adding class="language-xxx" */
code[class*="language-"]:not(pre code){
  border: 1px solid var(--border);
  background: rgba(11,18,32,0.05);
}


/* =========================
   v1.2.13 Search popup solid (non-transparent)
   ========================= */
.search-dialog{
  background: #ffffff !important;
}


/* =========================
   v1.2.16 Hero thin border
   ========================= */
.hero{
  border-bottom: 1px solid var(--border);
}


/* =========================
   v1.2.17 Hero content container (border + minimal shadow)
   ========================= */
.hero .hero-inner{
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255,255,255,0.60);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Tighten hero spacing for a cleaner, premium look */
.hero .hero-kicker{ margin-bottom: 10px; }
.hero .hero-title{ margin-top: 8px; margin-bottom: 10px; }
.hero .hero-subtitle{ margin-bottom: 10px; }
.hero .hero-cta{ margin-top: 14px; }

@media (max-width: 760px){
  .hero .hero-inner{ padding: 14px; border-radius: 16px; }
}


/* =========================
   v1.2.18 Light theme polish (keep dark as-is)
   ========================= */

/* Background: slightly richer but still minimal */

/* Cards: cleaner glass + crisp border */

/* Post cards: premium feel in light mode */

/* Hero container: slightly brighter in light mode */

/* Primary button: subtle gradient in light mode */


/* =========================
   v1.2.19 Hero container transparent (no border, no gradient/bg)
   ========================= */

/* Remove hero section border and any background layers */
.hero{
  border-bottom: none !important;
  background: transparent !important;
}

/* Make the hero text container fully transparent */
.hero .hero-inner{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important; /* keep it clean, uses existing content spacing */
}

/* Keep typography spacing readable without card styling */
.hero .hero-content{
  padding: 8px 0 0 0;
}


/* =========================
   v1.2.20 Remove body gradients from hero area + liquid glass CTA button
   ========================= */

/* Hero: solid background so body gradients don't show through */

/* Hero container stays fully transparent */
.hero .hero-inner{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Liquid-glass effect for the Hero CTA button */
.hero .btn-primary{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(2,6,23,0.14);
  background: rgba(255,255,255,0.70);
  color: rgba(2,6,23,0.92);
  box-shadow: 0 10px 26px rgba(2,6,23,0.10);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.hero .btn-primary::before{
  content:"";
  position:absolute;
  inset:-40% -30%;
  background: linear-gradient(120deg, rgba(255,255,255,0.80), rgba(255,255,255,0.00) 55%, rgba(255,255,255,0.22));
  transform: rotate(10deg) translateX(-30%);
  opacity: 0.55;
  pointer-events:none;
}
.hero .btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(2,6,23,0.14);
}
.hero .btn-primary:active{
  transform: translateY(0px);
}



/* =========================
   v1.2.21 Hero: remove ALL gradient/transparent layers (pure background)
   ========================= */

/* Force hero section to be fully solid (prevents body gradients showing through) */

/* Force hero inner to be fully transparent and flat */
.hero .hero-inner,
.hero-inner{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}


/* =========================
   v1.2.22 Hero: remove decorative gradient overlay layers
   ========================= */
.hero-inner::before,
.hero-inner::after,
.hero::before,
.hero::after{
  content: none !important;
  display: none !important;
  background: none !important;
}


/* =========================
   v1.2.23 Hero CTA: subtle transparent liquid-glass
   ========================= */
.hero .btn-primary{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(2,6,23,0.14);
  background: rgba(255,255,255,0.52) !important;
  color: rgba(2,6,23,0.92);
  box-shadow: 0 10px 26px rgba(2,6,23,0.10);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.hero .btn-primary::before{
  content:"";
  position:absolute;
  inset:-40% -30%;
  background: linear-gradient(120deg, rgba(255,255,255,0.70), rgba(255,255,255,0.00) 55%, rgba(255,255,255,0.18));
  transform: rotate(10deg) translateX(-30%);
  opacity: 0.60;
  pointer-events:none;
}
.hero .btn-primary::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background: radial-gradient(120px 60px at 20% 20%, rgba(255,255,255,0.22), transparent 70%);
  opacity: .9;
  pointer-events:none;
}
.hero .btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(2,6,23,0.14);
  background: rgba(255,255,255,0.58) !important;
}
.hero .btn-primary:active{
  transform: translateY(0px);
  background: rgba(255,255,255,0.50) !important;
}



/* =========================
   v1.2.24 Navbar polish + desktop auto-hide + comment button + light premium bg
   ========================= */

/* Navbar icons: slightly bigger, theme-aware colors */
.header-actions .icon-btn{
  font-size: 16px;
  width: 38px;
  height: 38px;
}

/* WooCommerce cart icon in navbar actions (black icon, subtle count badge) */
.header-actions .nhb-wc-cart-btn{
  position: relative;
  color: #000;
}
.header-actions .nhb-wc-cart-btn svg{
  width: 18px;
  height: 18px;
}
.header-actions .nhb-wc-cart-badge{
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #000;
  color: #fff;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  padding: 0 5px;
  border: 2px solid rgba(255,255,255,0.7);
}

/* Nav items: subtle pill background + radius */
.primary-nav ul a{
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(2,6,23,0.04);
}
.primary-nav ul a:hover{
  background: rgba(77,163,255,0.10);
}

/* Desktop: hide header on scroll down, show on scroll up */
@media (min-width: 761px){
  .site-header{
    transition: transform .18s ease, box-shadow .18s ease;
    will-change: transform;
  }
  .site-header.header-hidden{
    transform: translateY(-110%);
  }
}

/* "Post comment" (comment submit) liquid-glass minimal gradient */
.comment-form input[type="submit"],
#commentform input[type="submit"],
#respond input[type="submit"],
#submit{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(2,6,23,0.14);
  background: linear-gradient(90deg, rgba(77,163,255,0.22), rgba(51,255,153,0.18)) !important;
  color: rgba(2,6,23,0.92);
  padding: 10px 14px;
  box-shadow: 0 10px 24px rgba(2,6,23,0.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.comment-form input[type="submit"]::before,
#commentform input[type="submit"]::before,
#respond input[type="submit"]::before,
#submit::before{
  content:"";
  position:absolute;
  inset:-40% -30%;
  background: linear-gradient(120deg, rgba(255,255,255,0.70), rgba(255,255,255,0.00) 55%, rgba(255,255,255,0.18));
  transform: rotate(10deg) translateX(-30%);
  opacity: 0.55;
  pointer-events:none;
}
.comment-form input[type="submit"]:hover,
#commentform input[type="submit"]:hover,
#respond input[type="submit"]:hover,
#submit:hover{
  filter: brightness(1.03);
  transform: translateY(-1px);
}
.comment-form input[type="submit"]:active,
#commentform input[type="submit"]:active,
#respond input[type="submit"]:active,
#submit:active{
  transform: translateY(0px);
}


/* Light theme: premium subtle background (body only) */


/* Prev/Next pager */
.pager{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  margin: 22px 0 10px;
}
.pager a{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.05);
  text-decoration:none;
  color: var(--text);
}
.pager a:hover{ background: rgba(255,255,255,0.70); }
.pager .is-disabled{ opacity:.45; pointer-events:none; }



/* Cohesive aside container (no 'separate box' look) */
.single-aside{
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-radius: 16px;
}
.single-aside .side-card{
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0 0 18px 0;
}
.single-aside .side-card:last-child{ margin-bottom: 0; }


/* =========================
   NHB Blocks (Gutenberg)
   ========================= */
.nhb-block{
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 18px;
  padding: 14px 14px;
  margin: 0 0 16px 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.nhb-block-title{
  margin: 0 0 10px 0;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .2px;
  text-transform: uppercase;
  color: rgba(10,11,13,0.78);
}
.nhb-block-body{ margin: 0; }

/* Author box */
.nhb-author-row{ display:flex; gap:12px; align-items:flex-start; }
.nhb-author-avatar{
  width: 54px;
  height: 54px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid var(--border);
  background: rgba(2,6,23,0.05);
}
.nhb-author-name{ font-weight: 900; margin-bottom: 4px; }
.nhb-author-bio{ font-size: 13px; color: var(--muted); line-height: 1.45; }
.nhb-author-links{ display:flex; gap:8px; margin-top: 10px; }
.nhb-icon-link{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.65);
  display:grid;
  place-items:center;
}
.nhb-icon-link:hover{
  background: rgba(2,6,23,0.07);
  border-color: rgba(37,99,235,0.24);
}
.nhb-icon-link svg{ width: 16px; height: 16px; }

/* Mini post list */
.nhb-mini-list{ display:flex; flex-direction:column; gap:10px; }
.nhb-mini-post{
  display:flex; gap:10px; align-items:center;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(10,11,13,0.10);
  background: rgba(255,255,255,0.62);
}
.nhb-mini-post:hover{ background: rgba(2,6,23,0.06); border-color: rgba(37,99,235,0.20); }
.nhb-mini-thumb{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  overflow:hidden;
  border: 1px solid rgba(10,11,13,0.10);
  flex: 0 0 auto;
}
.nhb-mini-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.nhb-mini-title{ font-weight: 800; font-size: 13px; color: rgba(10,11,13,0.92); display:block; }
.nhb-mini-meta{ font-size: 12px; color: rgba(10,11,13,0.60); display:block; margin-top: 2px; }

/* Latest 3 grid */
.nhb-latest-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 980px){
  .nhb-latest-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
  .nhb-latest-grid{ grid-template-columns: 1fr; }
}
.nhb-latest-card{
  border-radius: 16px;
  border: 1px solid rgba(10,11,13,0.10);
  background: rgba(255,255,255,0.62);
  overflow:hidden;
  display:block;
}
.nhb-latest-card:hover{ border-color: rgba(37,99,235,0.24); background: rgba(2,6,23,0.05); }
.nhb-latest-thumb{ width:100%; height: 120px; object-fit:cover; display:block; }
.nhb-latest-title{ padding: 10px 10px 12px 10px; font-weight: 800; font-size: 13px; }

/* Tags chips */
.nhb-tag-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.nhb-tag-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(10,11,13,0.12);
  background: rgba(255,255,255,0.65);
  font-size: 13px;
  font-weight: 700;
}
.nhb-tag-chip:hover{ background: rgba(2,6,23,0.06); border-color: rgba(37,99,235,0.24); }

/* Social row */
.nhb-social-row{ display:flex; flex-wrap:wrap; gap:10px; }
.nhb-social-pill{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.68);
  display:grid;
  place-items:center;
}
.nhb-social-pill:hover{ background: rgba(2,6,23,0.07); border-color: rgba(37,99,235,0.24); }
.nhb-social-pill svg{ width: 18px; height: 18px; }

/* Ad slot */
.nhb-ad{
  border-radius: 16px;
  border: 1px dashed rgba(10,11,13,0.18);
  background: rgba(255,255,255,0.60);
  padding: 12px;
  overflow:hidden;
}

/* Newsletter */
.nhb-note{
  border: 1px solid rgba(10,11,13,0.14);
  background: rgba(255,255,255,0.70);
  padding: 10px 12px;
  border-radius: 14px;
  margin-bottom: 10px;
  font-size: 13px;
}
.nhb-newsletter-desc{ margin: 0 0 10px 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.nhb-newsletter-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:stretch; }
.nhb-newsletter-input{
  flex: 1 1 auto;
  min-width: 0;
  border-radius: 14px;
  border: 1px solid rgba(10,11,13,0.14);
  background: rgba(255,255,255,0.68);
  padding: 10px 12px;
  font-size: 14px;
}
.nhb-newsletter-btn{
  border-radius: 14px;
  border: 1px solid rgba(10,11,13,0.18);
  background: #fff;
  color: #000;
  font-weight: 900;
  padding: 10px 12px;
  cursor: pointer;

  flex: 0 0 auto;
  white-space: nowrap;
  max-width: 100%;
}
.nhb-newsletter-btn:hover{ background: rgba(2,6,23,0.06); border-color: rgba(37,99,235,0.24); }
.nhb-newsletter-privacy{ margin-top: 8px; font-size: 12px; color: rgba(10,11,13,0.62); }



@media (max-width: 420px){
  .nhb-newsletter-row{ flex-direction: column; }
  .nhb-newsletter-btn{ width: 100%; }
}
/* Categories */
.nhb-cats{ list-style: none; padding: 0; margin: 0; display:flex; flex-direction:column; gap:6px; }
.nhb-cats li{ font-size: 13px; color: var(--muted); }
.nhb-cats a{ color: inherit; text-decoration: none; font-weight: 800; }
.nhb-cats a:hover{ text-decoration: underline; }

/* CTA */
.nhb-cta-text{ margin: 0 0 10px 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.nhb-cta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 14px;
  border: 1px solid rgba(10,11,13,0.18);
  background: #fff;
  color:#000;
  font-weight: 900;
  padding: 10px 12px;
}
.nhb-cta-btn:hover{ background: rgba(2,6,23,0.06); border-color: rgba(37,99,235,0.24); }


/* === NHB v1.5.18 Color System Overrides (premium white) === */
:root{
  --bg0:#ffffff;
  --bg1:#ffffff;
  --text:#0f172a;
  --muted:rgba(15,23,42,.72);
  --subtle:rgba(15,23,42,.58);
  --border:rgba(15,23,42,.14);
  --card:rgba(255,255,255,.96);
  --card2:rgba(255,255,255,.96);
}

body{
  background: var(--bg0) !important;
  color: var(--text);
  font-family: "Space Grotesk", "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

/* Header / Navbar — simple items, no container pill */
.site-header{
  background: var(--bg0) !important;
  border-bottom: 1px solid var(--border) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.primary-nav ul{
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  gap: 16px !important;
}
.primary-nav a{
  padding: 6px 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: #000 !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}
.primary-nav a:hover{
  text-decoration: underline !important;
}
.primary-nav .current-menu-item > a,
.primary-nav .current_page_item > a{
  text-decoration: underline !important;
}

/* Buttons — flat black */
.btn{
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: #000 !important;
  box-shadow: none !important;
}
.btn-primary{
  background: #000 !important;
  border-color: #000 !important;
  color: var(--bg0) !important;
}
.btn-primary:hover{
  background: rgba(0,0,0,0.85) !important;
}

/* Cards — minimal */
.card,
.post-card,
.side-card,
.widget{
  background: transparent !important;
  box-shadow: none !important;
  border-color: var(--border) !important;
}
.post-card{
  transition: border-color .15s ease !important;
}
.post-card:hover{
  transform: none !important;
  border-color: #000 !important;
}

/* Ensure all post/content text is black */
.entry-content,
.entry-content p,
.entry-content li,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content blockquote,
.post-excerpt,
.post-meta,
.toc li,
.author-bio{
  color: #000 !important;
}

/* Icon buttons (search/menu) — flat and black */
.icon-btn{
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: #000 !important;
  box-shadow: none !important;
}

/* Search modal */
.search-modal .search-dialog{
  background: var(--bg0) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}
.search-input,
.search-filters select{
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: #000 !important;
}

/* =========================================
   v1.5.3 — Requested micro-fixes ONLY
   - Comment buttons text black
   - Hero CTA text black
   - Tablet/mobile sidebar visibility
   - Tablet/mobile nav dropdown background
   - Simpler search on small screens
   - Smaller tag chips on mobile
   - Responsive typography on mobile
   ========================================= */

/* Comments: make Reply link look like a small button with BLACK text */
.comment-reply-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.22);
  background: transparent;
  color: #000 !important;
  font-weight: 800;
  font-size: 12px;
  text-decoration: none !important;
}
.comment-reply-link:hover{
  background: rgba(0,0,0,0.06);
}

/* Comment submit (Post Comment): BLACK text */
#respond .form-submit .btn-primary,
.comment-form .form-submit .btn-primary,
.comment-form .submit.btn-primary{
  background: transparent !important;
  border-color: rgba(0,0,0,0.35) !important;
  color: #000 !important;
}
#respond .form-submit .btn-primary:hover,
.comment-form .form-submit .btn-primary:hover,
.comment-form .submit.btn-primary:hover{
  background: rgba(0,0,0,0.06) !important;
}

/* Front page CTA: "Read latest posts →" text BLACK */
.hero-cta .btn-primary{
  background: transparent !important;
  border-color: rgba(0,0,0,0.35) !important;
  color: #000 !important;
}
.hero-cta .btn-primary:hover{
  background: rgba(0,0,0,0.06) !important;
}

/* Tablet: hide LEFT sidebar only */
@media (max-width: 980px) and (min-width: 761px){
  .single-grid .single-aside-left{ display: none !important; }
}

/* Mobile: hide BOTH sidebars */
@media (max-width: 760px){
  .single-grid .single-aside{ display: none !important; }
}

/* Tablet + Mobile nav: use hamburger and solid white dropdown background */
@media (max-width: 980px){
  .nav-toggle{ display: inline-flex !important; }
  .primary-nav{ position: relative; }
  .primary-nav ul{
    display: none !important;
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    width: min(340px, calc(100vw - 32px));
    flex-direction: column;
    gap: 0;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.18) !important;
    background: rgba(255,255,255,0.98) !important; /* white */
    box-shadow: none !important;
  }
  .primary-nav ul.is-open{ display: flex !important; }
  .primary-nav li + li{ border-top: 1px solid rgba(0,0,0,0.12); }
  .primary-nav a{ padding: 12px 10px !important; }
}

/* Keep full menu on desktop */
@media (min-width: 981px){
  .primary-nav ul{ display: flex !important; position: static !important; }
}

/* Search: keep it simple on tablet/mobile (hide filters, keep search input) */
@media (max-width: 980px){
  .search-filters{ display: none !important; }
  .search-actions{ justify-content: flex-start; }
  .search-actions .btn-primary{ background: #000 !important; color: var(--bg0) !important; }
}

/* Mobile tag chips: smaller */
@media (max-width: 560px){
  .badge{ padding: 5px 8px; font-size: 12px; gap: 6px; }
  .tag-chips--sidebar .tag-chip,
  .tag-chip{ padding: 5px 8px !important; font-size: 11px !important; }
}

/* Mobile typography: responsive font size (desktop/tablet unchanged) */
@media (max-width: 560px){
  body{ font-size: 15px; }
  .entry-content{ font-size: 16px !important; }
  .hero-title{ font-size: clamp(26px, 8vw, 38px); }
}


/* =========================
   WooCommerce — Shop UI only
   - Modern, tight product cards
   - Responsive grid (3 desktop / 2 tablet / 2 mobile)
   ========================= */

/* Keep Woo pages aligned with theme container (tighter max width for better UX) */
.woocommerce .container,
.woocommerce-page .container{ width: min(1240px, calc(100% - 32px)); }

/* Bigger shop title (matches bold theme look) */
.woocommerce .woocommerce-products-header__title,
.woocommerce-page .woocommerce-products-header__title{
  font-size: clamp(34px, 3.2vw, 48px);
  font-weight: 950;
  letter-spacing: -0.03em;
  margin: 8px 0 10px;
}

/* Layout: search left, ordering right */
.woocommerce .woocommerce-result-count{ margin: 6px 0; }
.woocommerce .woocommerce-ordering{ margin: 6px 0 6px auto; }

/* Make search + ordering sit nicely on one row when possible */
.woocommerce .woocommerce-ordering,
.woocommerce .woocommerce-result-count,
.woocommerce .nhb-wc-product-search,
.woocommerce form.woocommerce-product-search{
  max-width: 100%;
}

/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.62);
  color: var(--text);
  padding: 12px 14px;
}

/* Shop toolbar */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering{
  color: rgba(10,11,13,0.72);
}
.woocommerce .woocommerce-ordering select{
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.72);
  padding: 10px 12px;
}

/* Simple shop search bar (single form, no extra containers)
   Style both our override AND WC default class to avoid cache/plugin issues.
*/
.woocommerce .nhb-wc-product-search,
.woocommerce form.woocommerce-product-search{
  margin: 14px 0 10px;
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  max-width: 520px;
}
.woocommerce .nhb-wc-product-search .search-field,
.woocommerce form.woocommerce-product-search .search-field{
  flex: 1;
  min-width: 0;
  border-radius: 12px;
  border: 2px solid #000;
  background: rgba(255,255,255,0.72);
  padding: 12px 14px;
  height: 46px;
  font-size: 15px;
}
.woocommerce .nhb-wc-product-search button,
.woocommerce form.woocommerce-product-search button{
  border-radius: 999px;
  border: 2px solid #000;
  background: #000;
  color: var(--bg0);
  font-weight: 850;
  padding: 12px 18px;
  height: 46px;
  cursor: pointer;
}
.woocommerce .nhb-wc-product-search button:hover,
.woocommerce form.woocommerce-product-search button:hover{
  filter: brightness(1.05);
}

/* Product grid */
.woocommerce ul.products{
  list-style: none;
  margin: 18px 0 0 0;
  padding: 0;
  display: grid;
  /* Fixed 3-column grid on desktop for consistent alignment */
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
@media (max-width: 980px){
  .woocommerce ul.products{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .woocommerce ul.products{ gap: 12px; }
}



/* Force proper Woo grid layout (override Woo defaults that use floats/widths) */
.woocommerce ul.products{
  width: 100% !important;
  display: grid !important;
  align-items: stretch;
  justify-items: stretch;
  justify-content: stretch;
  grid-auto-flow: row dense;
}

/* Defensive grid fixes: remove any clearfix pseudo-elements and force first item to start at col 1 */
.woocommerce ul.products::before,
.woocommerce ul.products::after{
  content: none !important;
  display: none !important;
}
.woocommerce ul.products li.product:first-child{
  grid-column-start: 1 !important;
}
.woocommerce ul.products li.product{
  float: none !important;
  width: auto !important;
  clear: none !important;
  display: block !important;
  /* Some Woo themes add positioning to .first/.last; neutralize for grid */
  grid-column: auto !important;
  grid-row: auto !important;
  max-width: none !important;
}
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last{
  clear: none !important;
}
/* Card */
.woocommerce ul.products li.product.nhb-product-card,
.woocommerce ul.products li.product{
  margin: 0;
}
.woocommerce ul.products li.product.nhb-product-card{
  border: 2px solid #000;
  border-radius: calc(var(--radius) + 2px);
  background: rgba(255,255,255,0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.woocommerce ul.products li.product.nhb-product-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.14);
}

/* Card link wrapper */
.woocommerce ul.products li.product.nhb-product-card .nhb-prod-link{
  display: block;
  text-decoration: none;
  color: inherit;
}
.woocommerce ul.products li.product.nhb-product-card .nhb-prod-media{
  position: relative;
  aspect-ratio: 1 / 1;
  background: rgba(0,0,0,0.04);
  display: grid;
  place-items: center;
  padding: 10px;
}
.woocommerce ul.products li.product.nhb-product-card .nhb-prod-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 2px solid #000;
  border-radius: 14px;
}

/* Sale badge */
.woocommerce span.onsale{
  position: absolute;
  top: 12px;
  left: 12px;
  min-height: 0;
  min-width: 0;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 800;
  background: #000;
  color: var(--bg0);
  border: 1px solid rgba(255,255,255,0.25);
}

/* Body */
.woocommerce ul.products li.product.nhb-product-card .nhb-prod-body{
  padding: 18px 18px 12px;
}
.woocommerce ul.products li.product.nhb-product-card .nhb-prod-title{
  margin: 0 0 6px;
  font-size: 19px;
  line-height: 1.25;
  font-weight: 850;
  letter-spacing: .1px;
  color: rgba(10,11,13,0.90);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.woocommerce ul.products li.product.nhb-product-card .nhb-prod-meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

/* Rating */
.woocommerce ul.products li.product.nhb-product-card .star-rating{
  margin: 0;
  font-size: 12px;
}

/* Price */
.woocommerce ul.products li.product.nhb-product-card .price{
  margin: 0;
  font-weight: 900;
  color: #000;
  font-size: 17px;
}
.woocommerce ul.products li.product.nhb-product-card .price del{
  opacity: .55;
  font-weight: 800;
}
.woocommerce ul.products li.product.nhb-product-card .price ins{
  text-decoration: none;
}

/* Actions */
.woocommerce ul.products li.product.nhb-product-card .nhb-prod-actions{
  padding: 0 18px 18px;
}

/* Single product page: better side gaps + readable typography */
.woocommerce div.product,
.woocommerce-page div.product{
  margin-top: 8px;
}
.woocommerce div.product .product_title,
.woocommerce-page div.product .product_title{
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 950;
  letter-spacing: -0.03em;
}
.woocommerce div.product p.price,
.woocommerce-page div.product p.price{
  font-size: 20px;
  font-weight: 950;
  color: #000;
}

/* Gallery images: bigger + black border */
.woocommerce div.product div.images img,
.woocommerce-page div.product div.images img{
  border: 2px solid #000;
  border-radius: 16px;
}

/* Tabs spacing */
.woocommerce div.product .woocommerce-tabs,
.woocommerce-page div.product .woocommerce-tabs{
  margin-top: 34px;
}
.woocommerce ul.products li.product.nhb-product-card .button,
.woocommerce ul.products li.product.nhb-product-card .added_to_cart,
.woocommerce-page .button,
.woocommerce-page button.button,
.woocommerce-page input.button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 999px;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,0.18);
  background: #000;
  color: var(--bg0);
  font-weight: 850;
  text-decoration: none;
  cursor: pointer;
}
.woocommerce ul.products li.product.nhb-product-card .button:hover,
.woocommerce-page .button:hover,
.woocommerce-page button.button:hover,
.woocommerce-page input.button:hover{
  filter: brightness(1.05);
}

/* Pagination */
.woocommerce nav.woocommerce-pagination ul{
  border: 0;
  display: flex;
  gap: 8px;
}
.woocommerce nav.woocommerce-pagination ul li{
  border: 0;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,0.62);
  padding: 8px 12px;
  color: rgba(10,11,13,0.80);
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover{
  background: #000;
  color: var(--bg0);
}

/* Cart/Checkout inputs */
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce textarea,
.woocommerce select{
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.72);
  padding: 10px 12px;
}

/* Bigger thumbnails & cleaner layout on Cart / Checkout */
.woocommerce-cart .product-thumbnail img,
.woocommerce-checkout .product-thumbnail img,
.woocommerce-checkout-review-order-table img{
  width: 110px;
  height: auto;
  border-radius: 12px;
  border: 2px solid #000;
}
.woocommerce-cart table.shop_table td,
.woocommerce-checkout table.shop_table td{
  vertical-align: middle;
}
.woocommerce-cart .woocommerce-cart-form__contents td.product-name a{
  font-weight: 850;
  color: rgba(10,11,13,0.92);
}

/* Single product page — tighter width + bigger typography + black-bordered media */
.single-product.woocommerce .container,
.single-product.woocommerce-page .container{ width: min(1240px, calc(100% - 40px)); }

.woocommerce div.product{ margin-top: 14px; }
.woocommerce div.product .product_title{
  font-size: clamp(30px, 3.2vw, 46px);
  font-weight: 950;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  color: #000;
  font-weight: 950;
  font-size: 20px;
}
.woocommerce div.product div.images img,
.woocommerce div.product div.images .woocommerce-product-gallery__image img{
  border: 2px solid #000;
  border-radius: 14px;
}
.woocommerce div.product div.images .flex-control-thumbs img{
  border: 2px solid #000;
  border-radius: 12px;
}
.woocommerce div.product form.cart .quantity .qty{
  min-width: 76px;
  height: 46px;
  border-radius: 12px;
  border: 2px solid #000;
  background: rgba(255,255,255,0.72);
  font-weight: 900;
}
.woocommerce div.product form.cart .single_add_to_cart_button{
  height: 46px;
  border: 2px solid #000;
}


/* WooCommerce - Button styling (loop) */
.woocommerce a.button.nhb-btn,
.woocommerce button.button.nhb-btn,
.woocommerce input.button.nhb-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 700;
  border: 1px solid rgba(0,255,255,0.22);
  background: rgba(0,0,0,0.35);
  color: rgba(255,255,255,0.92);
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.woocommerce a.button.nhb-btn:hover,
.woocommerce button.button.nhb-btn:hover,
.woocommerce input.button.nhb-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(0,255,255,0.45);
  box-shadow: 0 14px 40px rgba(0,0,0,0.45);
}


/* WooCommerce - Nav Shop + Cart */
.nhb-wc-menu-cart .nhb-wc-cart-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nhb-wc-cart-count{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid rgba(0,255,255,0.25);
  background: rgba(0,0,0,0.45);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}