/* ============================================================
   NajibulPress — Core layout (mobile-first, RTL-ready, dark/light)
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--njp-font-sans);background:var(--njp-bg);color:var(--njp-text);line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg,video{max-width:100%;height:auto}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.njp-skip-link{position:absolute;left:-9999px;top:0;z-index:100000;background:var(--njp-primary);color:#fff;padding:.75rem 1.25rem;border-radius:0 0 .5rem 0}
.njp-skip-link:focus{left:0}
a{color:var(--njp-primary);text-decoration:none}
a:hover{color:var(--njp-primary-hover);text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}

.grid-container{max-width:1180px;margin-inline:auto;padding-inline:clamp(.75rem,3vw,1.25rem)}
.site{display:flex;flex-direction:column;min-height:100vh}
.site-content{flex:1 0 auto}
.inside-container{max-width:none}

/* Header — new grid-area layout (desktop ≥992px / mobile ≤991px) */
.site-header {
  display: grid;
  grid-template-columns: 1fr minmax(480px, 640px) 1fr;
  grid-template-areas:
    "brand search actions"
    "nav   nav    nav";
  align-items: center;
  column-gap: 1rem;
  row-gap: .35rem;
  max-width: 1180px;
  margin-inline: auto;
  padding: .55rem clamp(.75rem, 3vw, 1.25rem);
  background: var(--njp-bg);
  border-bottom: 1px solid var(--njp-border);
  position: sticky; top: 0; z-index: 999;
}
.njp-brand { grid-area: brand; justify-self: start; display: flex; align-items: center; }
.njp-brand .site-title-link { display: flex; flex-direction: column; line-height: 1.1; text-decoration: none; color: inherit; }
.njp-brand .site-title { display: inline-flex; align-items: center; gap: .02em; white-space: nowrap; font-size: clamp(1.25rem, 2.2vw, 1.65rem); font-weight: 800; line-height: 1.2; letter-spacing: -.01em; text-decoration: none; margin: 0; padding: 0; color: inherit; }
.njp-brand .site-tagline { font-size: .68rem; color: var(--njp-text-muted); font-weight: 500; letter-spacing: .02em; }
.njp-header-search { grid-area: search; justify-self: center; width: 100%; max-width: 640px; min-width: 0; }
.njp-header-search form { width: 100%; }
.njp-header-search input.search-field,
.njp-header-search .search-field { width: 100%; }
.njp-top-actions { grid-area: actions; justify-self: end; display: flex; align-items: center; gap: 12px; }
.njp-top-actions .nfs-bell-wrapper { margin: 0 !important; }
.njp-top-actions .nfs-bell-trigger { margin: 0 !important; padding: .3rem !important; background: transparent !important; border: 0 !important; }
.njp-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid var(--njp-border); border-radius: 50%; background: var(--njp-card-subtle); cursor: pointer; transition: transform .2s, background .2s, color .2s; color: var(--njp-text); }
.njp-theme-toggle:hover { background: var(--njp-card); color: var(--njp-primary); }
.njp-theme-toggle:focus-visible { outline: 2px solid var(--njp-primary); outline-offset: 2px; }
.main-navigation { grid-area: nav; justify-self: center; max-width: 100%; }
.sf-menu { display: flex; align-items: center; gap: clamp(10px, 1.2vw, 18px); flex-wrap: nowrap; list-style: none; margin: 0; padding: .25rem 0 .35rem; justify-content: center; }
.sf-menu li { white-space: nowrap; position: relative; }
.sf-menu a { display: flex; align-items: center; padding: .45rem .55rem; border-radius: .5rem; font-size: clamp(13px, .92vw, 14.5px); font-weight: 600; letter-spacing: -.01em; color: var(--njp-text); text-decoration: none; transition: background .2s, color .2s; }
.sf-menu a:hover { background: var(--njp-card-subtle); color: var(--njp-primary); }
.sf-menu .current-menu-item > a,
.sf-menu .current_page_item > a { color: var(--njp-primary); }
.sf-menu ul.sub-menu { position: absolute; left: 0; top: 100%; min-width: 220px; background: var(--njp-card); border: 1px solid var(--njp-border); border-radius: .75rem; box-shadow: 0 12px 30px -8px rgba(2,6,23,.25); padding: .35rem; display: none; z-index: 1000; list-style: none; }
.sf-menu li:hover > ul.sub-menu { display: block; }
.menu-toggle { display: none; background: transparent; border: 0; padding: .45rem; cursor: pointer; border-radius: .5rem; color: var(--njp-text); }
.menu-toggle:hover { background: var(--njp-card-subtle); }
.menu-toggle-icon { font-size: 1.4rem; line-height: 1; }

/* Tagline show/hide — Customizer controls (body classes) */
@media (min-width: 992px) {
  body.njp-tagline-desktop-off .njp-brand .site-tagline { display: none; }
}
@media (max-width: 991px) {
  body.njp-tagline-mobile-off .njp-brand .site-tagline { display: none; }
}

/* Offside (slideout) */
/* Offside (slideout) */
.offside{position:fixed;top:0;inset-inline-start:0;height:100vh;width:min(340px,90vw);background:var(--njp-card);z-index:1001;transform:translateX(-110%);transition:transform .35s cubic-bezier(.4,0,.2,1);box-shadow:0 0 40px rgba(2,6,23,.35);overflow-y:auto}
[dir="rtl"] .offside{transform:translateX(110%)}
.offside.open{transform:translateX(0)!important}
.offside-inner{padding:1rem 1rem 2rem}
.offside-header{font-weight:800;font-size:1.1rem;padding:.5rem .5rem 1rem;border-bottom:1px solid var(--njp-border);margin-bottom:.75rem}
.offside-close{position:absolute;top:.5rem;inset-inline-end:.75rem;background:transparent;border:0;font-size:1.6rem;cursor:pointer;color:var(--njp-text)}
.offside-menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.offside-menu a{display:block;padding:.6rem .7rem;border-radius:.5rem;color:var(--njp-text);font-weight:600}
.offside-menu a:hover{background:var(--njp-card-subtle);color:var(--njp-primary);text-decoration:none}
.offside-overlay{position:fixed;inset:0;background:rgba(2,6,23,.55);z-index:1000;opacity:0;pointer-events:none;transition:opacity .3s}
.offside-overlay.open{opacity:1;pointer-events:auto}

/* Grids */
.njp-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:clamp(.75rem,2vw,1.25rem);margin:1.25rem 0}
.njp-pagination{display:flex;justify-content:center;gap:.35rem;margin:2rem 0}
.njp-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:2.25rem;padding:.35rem .6rem;border:1px solid var(--njp-border);border-radius:.5rem;color:var(--njp-text);font-weight:600}
.njp-pagination .page-numbers.current{background:var(--njp-primary);border-color:var(--njp-primary);color:#fff}
.njp-empty{padding:4rem 1rem;text-align:center;color:var(--njp-text-muted)}

/* Cards */
.article-card{background:var(--njp-card);border:1px solid var(--njp-border);border-radius:.9rem;overflow:hidden;transition:transform .25s,box-shadow .25s;display:flex;flex-direction:column}
.article-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -18px rgba(37,99,235,.35)}
.responsive-thumbnail{aspect-ratio:16/10;object-fit:cover;width:100%}

/* Footer */
.site-footer{margin-top:3rem;background:var(--njp-card-subtle);border-top:1px solid var(--njp-border)}
.footer-widgets{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem;padding:2.5rem 0}
.footer-widget-title{font-size:.85rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--njp-text-muted);margin:0 0 .6rem}
.footer-bar{border-top:1px solid var(--njp-border);padding:1rem 0;font-size:.88rem;color:var(--njp-text-muted)}
.footer-bar-inner{display:flex;justify-content:center;align-items:center;text-align:center;gap:1rem;flex-wrap:wrap}
.footer-copyright{display:inline-flex;justify-content:center;align-items:center;padding:.15rem 0;letter-spacing:.01em}

/* Widget columns — counts driven by Customizer (.footer-cols-N) */
.footer-cols-1{grid-template-columns:1fr !important}
.footer-cols-2{grid-template-columns:repeat(2,1fr) !important}
.footer-cols-3{grid-template-columns:repeat(3,1fr) !important}
.footer-cols-4{grid-template-columns:repeat(4,1fr) !important}
@media (max-width:992px){.footer-cols-3,.footer-cols-4{grid-template-columns:repeat(2,1fr) !important}}
@media (max-width:600px){.footer-cols-2,.footer-cols-3,.footer-cols-4{grid-template-columns:1fr !important}}

/* Back to top button */
.njp-back-to-top{position:fixed;bottom:24px;right:24px;width:56px;height:56px;border-radius:50%;border:0;background:linear-gradient(135deg,#2563eb 0%,#7c3aed 100%);color:#fff;font-size:1.45rem;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;box-shadow:0 14px 30px -8px rgba(37,99,235,.55),0 6px 14px rgba(124,58,237,.4);z-index:999;opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity .3s ease,transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s ease}
.njp-back-to-top.visible{opacity:1;pointer-events:auto;transform:translateY(0)}
.njp-back-to-top:hover{transform:translateY(-4px);box-shadow:0 20px 40px -8px rgba(37,99,235,.6),0 8px 18px rgba(124,58,237,.45)}
.njp-back-to-top:focus-visible{outline:3px solid rgba(124,58,237,.65);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.njp-back-to-top{transition:none}}

@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ============================================================
   NajibulPress — Theme toggle button + dark/light color-schemes
   ============================================================ */
.njp-theme-toggle { display:inline-flex; align-items:center; justify-content:center; width:2.25rem; height:2.25rem; border:1px solid var(--njp-border); border-radius:.5rem; background:var(--njp-card-subtle); cursor:pointer; transition:transform .2s,background .2s,color .2s; color:var(--njp-text); margin-inline-start:.35rem }
.njp-theme-toggle:hover { transform:translateY(-1px); color:var(--njp-primary) }
.njp-theme-toggle:focus-visible { outline:2px solid var(--njp-primary); outline-offset:2px }
.njp-theme-icon { display:none }
html[data-njp-theme="light"] .njp-theme-icon-sun { display:inline-flex; color:#f59e0b }
html[data-njp-theme="dark"] .njp-theme-icon-moon { display:inline-flex; color:#93c5fd }
html[data-njp-theme="auto"] .njp-theme-icon-auto { display:inline-flex }
@media (prefers-color-scheme: dark) { .njp-theme-icon-auto { color:#93c5fd } }
@media (prefers-color-scheme: light) { .njp-theme-icon-auto { color:#f59e0b } }

/* Explicit dark variables (outrank OS preference when user toggled) */
html.njp-theme-dark { --njp-bg:#0f172a; --njp-text:#e2e8f0; --njp-text-muted:#94a3b8; --njp-card:#1e293b; --njp-card-subtle:#1f2937; --njp-border:rgba(226,232,240,.08); color-scheme:dark }
html.njp-theme-light { --njp-bg:#ffffff; --njp-text:#0f172a; --njp-text-muted:#475569; --njp-card:#ffffff; --njp-card-subtle:#f8fafc; --njp-border:rgba(15,23,42,.08); color-scheme:light }
html[data-njp-theme="dark"] { --njp-bg:#0f172a; --njp-text:#e2e8f0; --njp-text-muted:#94a3b8; --njp-card:#1e293b; --njp-card-subtle:#1f2937; --njp-border:rgba(226,232,240,.08); color-scheme:dark }
html[data-njp-theme="light"] { --njp-bg:#ffffff; --njp-text:#0f172a; --njp-text-muted:#475569; --njp-card:#ffffff; --njp-card-subtle:#f8fafc; --njp-border:rgba(15,23,42,.08); color-scheme:light }

/* Accent gradient helper used by brand buttons */
.njp-brand-accent { background:var(--njp-brand-gradient, linear-gradient(135deg,#2563eb 0%,#7c3aed 100%)); color:#fff !important; border:0 }
.njp-brand-accent:hover { filter:brightness(1.08) }

/* Legacy Select Category button row (kept visually consistent) */
.njp-category-bar { max-width: 1180px; margin-inline: auto; padding: .35rem clamp(.75rem, 3vw, 1.25rem); }

/* ============================================================
   Mobile (≤991px) — full-width search; mobile brand+actions row
   ============================================================ */
@media (max-width: 991px) {
  .site-header {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "search search"
      "brand   actions";
    padding: .45rem clamp(.5rem, 3vw, .75rem);
    column-gap: .65rem;
    row-gap: .35rem;
    position: sticky; top: 0;
  }
  .njp-header-search { width: 100%; max-width: 100%; }
  .njp-header-search form { display:block; width: 100%; }
  .njp-header-search input.search-field,
  .njp-header-search .search-field { display:block; width: 100%; max-width: 100%; }
  .main-navigation { display: none !important; }
  .sf-menu { display: none !important; }
  .menu-toggle { display: inline-flex !important; }
  .site-title { font-size: 1.15rem !important; }
  .site-tagline { font-size: .66rem !important; }
}

/* ============================================================
   NajibulPress — Brand Title (language-aware, non-overlapping)
   Latin → per-char stagger; non-Latin → whole-word glow.
   CLS = 0; transform + opacity only.
   ============================================================ */
.njp-char,
.njp-word-inner {
  display: inline-block;
  background-image: linear-gradient(135deg, var(--njp-g1) 0%, var(--njp-g2) 45%, var(--njp-g3) 100%);
  background-size: 220% 220%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  will-change: transform, opacity;
  animation-duration: .72s;
  animation-timing-function: cubic-bezier(.4,0,.2,1);
  animation-fill-mode: forwards;
  animation-delay: calc(var(--i, 0) * 55ms);
}
.njp-char-space { width: .32em; }
.njp-brand .site-title-link { text-decoration: none !important; color: inherit; }

html[data-njp-persona="1"] .njp-char, html[data-njp-persona="1"] .njp-word-inner { --njp-g1:#10b981; --njp-g2:#f59e0b; --njp-g3:#fde68a; }
html[data-njp-persona="2"] .njp-char, html[data-njp-persona="2"] .njp-word-inner { --njp-g1:#6366f1; --njp-g2:#22d3ee; --njp-g3:#38bdf8; }
html[data-njp-persona="3"] .njp-char, html[data-njp-persona="3"] .njp-word-inner { --njp-g1:#f43f5e; --njp-g2:#f59e0b; --njp-g3:#fb7185; }
html[data-njp-persona="4"] .njp-char, html[data-njp-persona="4"] .njp-word-inner { --njp-g1:#8b5cf6; --njp-g2:#2dd4bf; --njp-g3:#a78bfa; }
html[data-njp-persona="5"] .njp-char, html[data-njp-persona="5"] .njp-word-inner { --njp-g1:#06b6d4; --njp-g2:#f472b6; --njp-g3:#93c5fd; }

html[data-njp-motion="1"] .njp-char, html[data-njp-motion="1"] .njp-word-inner { animation-name: njp-m1; }
html[data-njp-motion="1"] .njp-char:nth-child(odd)  { --sx: -60px; }
html[data-njp-motion="1"] .njp-char:nth-child(even) { --sx: 60px;  }
@keyframes njp-m1 { 0%{transform:translate3d(var(--sx,0),-120px,420px) rotate3d(1,1,0,270deg);opacity:0} 55%{opacity:1} 100%{transform:none;opacity:1} }

html[data-njp-motion="2"] .njp-char, html[data-njp-motion="2"] .njp-word-inner { animation-name: njp-m2; animation-duration:.18s; animation-timing-function: steps(1,end); }
html[data-njp-motion="2"] .njp-chars::after { content:'|'; display:inline-block; margin-inline-start:2px; color:var(--njp-text); animation: njp-caret 1s step-end infinite; }
@keyframes njp-m2 { 0%,99%{opacity:0} 100%{opacity:1} }
@keyframes njp-caret { 0%,100%{opacity:1} 50%{opacity:0} }

html[data-njp-motion="3"] .njp-char, html[data-njp-motion="3"] .njp-word-inner { animation-name: njp-m3; animation-timing-function: cubic-bezier(.34,1.56,.64,1); }
@keyframes njp-m3 { 0%{transform:perspective(600px) rotateY(90deg);opacity:0} 100%{transform:perspective(600px) rotateY(0);opacity:1} }

html[data-njp-motion="4"] .njp-char, html[data-njp-motion="4"] .njp-word-inner { animation-name: njp-m4; animation-timing-function: cubic-bezier(.34,1.56,.64,1); }
@keyframes njp-m4 { 0%{transform:translateY(-90px);opacity:0} 55%{transform:translateY(8px);opacity:1} 75%{transform:translateY(-4px)} 100%{transform:none;opacity:1} }

html[data-njp-motion="5"] .njp-char, html[data-njp-motion="5"] .njp-word-inner { animation-name: njp-m5; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
@keyframes njp-m5 { 0%{transform:scale(1.9);opacity:0} 60%{opacity:.85} 100%{transform:none;opacity:1} }

html[data-njp-motion="6"] .njp-char, html[data-njp-motion="6"] .njp-word-inner { animation-name: njp-m6; animation-duration:.9s; animation-timing-function: cubic-bezier(.45,.05,.55,.95); }
@keyframes njp-m6 { 0%,100%{transform:translateY(0)} 30%{transform:translateY(-14px)} 60%{transform:translateY(4px)} }

.njp-brand .site-title-link:hover .njp-char,
.njp-brand .site-title-link:active .njp-char,
.njp-brand .site-title-link:focus-visible .njp-char,
.njp-brand .site-title-link:hover .njp-word-inner {
  transform: scale(1.035) translateY(-1px);
  filter: drop-shadow(0 2px 10px rgba(99,102,241,.4)) drop-shadow(0 0 22px rgba(45,212,191,.35));
}

@media (prefers-reduced-motion: reduce) {
  .njp-char, .njp-word-inner, .njp-chars::after { animation:none !important; transition:none !important; transform:none !important; opacity:1 !important; }
  .njp-brand .site-title-link:hover .njp-char { transform:none !important; filter:none !important; }
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .njp-char, .njp-word-inner { color: var(--njp-primary) !important; -webkit-text-fill-color: var(--njp-primary) !important; background-image: none !important; animation: none !important; }
}

html[data-njp-motion="7"] .njp-char, html[data-njp-motion="7"] .njp-word-inner {
  animation-name: njp-m7;
  animation-timing-function: cubic-bezier(.2,.7,.4,1);
  animation-fill-mode: forwards;
}
@keyframes njp-m7 {
  0%   { clip-path: inset(0 100% 0 0); opacity: 0; }
  55%  { clip-path: inset(0 0 0 0);    opacity: 1; }
  100% { clip-path: inset(0 0 0 0);    opacity: 1; }
}


/* ============================================================
   NajibulPress — Section dropdown (ultra-premium blue-violet pill)
   Used site-wide by the dropdown partial; the homepage skips the
   visible <label> (a11y screen-reader-text only) and centers this.
   ============================================================ */
.dropdown-filter-wrapper.glass-effect {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 460px;
  margin: 16px auto;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.dropdown-filter-wrapper.glass-effect:hover { border-color: transparent; box-shadow: none; transform: none; }
.dropdown-filter-wrapper .dropdown-label {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .9rem; font-weight: 800; color: var(--njp-text, #0f172a);
  letter-spacing: -.01em; white-space: nowrap;
  margin-right: .65rem; padding-right: .65rem;
  border-right: 1px dashed var(--njp-border, rgba(15,23,42,.12));
}
.dropdown-filter-wrapper .dropdown-label .label-icon { font-size: 1.05rem; }
.dropdown-filter-wrapper .select-wrapper { display: inline-flex; align-items: center; max-width: 100%; }
.dropdown-filter-wrapper .dropdown-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: min(380px, 100%);
  max-width: 100%;
  line-height: 1.35;
  text-align: center;
  text-align-last: center;
  padding: 15px 48px 15px 28px;
  font-size: .97rem;
  font-weight: 700;
  border-radius: 50px;
  border: 2px solid transparent;
  color: #1e3a8a;
  cursor: pointer;
  outline: none;
  background-color: #ffffff;
  background-image:
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="%234f46e5" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>'),
      linear-gradient(135deg, #ffffff 0%, #eef2ff 100%),
      linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  background-origin: padding-box, padding-box, border-box;
  background-clip: padding-box, padding-box, border-box;
  background-repeat: no-repeat;
  background-position: right 18px center, 0 0, 0 0;
  background-size: 19px 19px, 100% 100%, 100% 100%;
  box-shadow: 0 10px 26px rgba(37, 99, 235, .16), 0 2px 8px rgba(124, 58, 237, .10);
  transition: transform .28s cubic-bezier(.4,0,.2,1), box-shadow .28s cubic-bezier(.4,0,.2,1);
}
.dropdown-filter-wrapper .dropdown-select:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(37, 99, 235, .22), 0 4px 12px rgba(124, 58, 237, .14);
}
.dropdown-filter-wrapper .dropdown-select:focus-visible {
  outline: 3px solid rgba(124, 58, 237, .55);
  outline-offset: 3px;
  border-radius: 50px;
}
html[data-njp-theme="dark"] .dropdown-filter-wrapper .dropdown-select,
html.njp-theme-dark .dropdown-filter-wrapper .dropdown-select {
  color: #e2e8f0;
  background-color: #141d2e;
  background-image:
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="%23a5b4fc" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>'),
      linear-gradient(135deg, #1b2537 0%, #0f172a 100%),
      linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  background-origin: padding-box, padding-box, border-box;
  background-clip: padding-box, padding-box, border-box;
  background-repeat: no-repeat;
  background-position: right 18px center, 0 0, 0 0;
  background-size: 19px 19px, 100% 100%, 100% 100%;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45), 0 0 0 1px rgba(90, 117, 235, .12) inset;
}
html[data-njp-theme="dark"] .dropdown-filter-wrapper .dropdown-select:hover,
html.njp-theme-dark .dropdown-filter-wrapper .dropdown-select:hover {
  background-color: #1e293b;
  box-shadow: 0 18px 42px rgba(37, 99, 235, .35), 0 4px 14px rgba(124, 58, 237, .25);
}
html[data-njp-theme="dark"] .dropdown-filter-wrapper .dropdown-label,
html.njp-theme-dark .dropdown-filter-wrapper .dropdown-label { color: var(--njp-text, #e2e8f0); border-right-color: rgba(226,232,240,.15); }

/* ============================================================
   CUSTOMIZER DESIGN TOKENS — static defaults (light & dark)
   Consumed by inline narrow overrides (Typography → :root,
   Colors → html[data-njp-theme="light"]) from the customizer-tokens module.
   High specificity wins the cascade against legacy base rules.
   ============================================================ */
:root{
    --njp-h1-size-desktop: 2.35rem;
    --njp-h1-size-tablet: 1.85rem;
    --njp-h1-size-mobile: 1.45rem;
    --njp-h1-weight: 800;
    --njp-h1-line-height: 1.18;
    --njp-card-title-desktop: 1.05rem;
    --njp-card-title-tablet: 1.00rem;
    --njp-card-title-mobile: 0.95rem;
    --njp-card-title-weight: 800;
    --njp-h2-desktop: 1.75rem;
    --njp-h2-tablet: 1.5rem;
    --njp-h2-mobile: 1.35rem;
    --njp-h2-weight: 800;
    --njp-h3-desktop: 1.4rem;
    --njp-h3-tablet: 1.25rem;
    --njp-h3-mobile: 1.15rem;
    --njp-h3-weight: 700;
    --njp-h4-desktop: 1.15rem;
    --njp-h4-tablet: 1.08rem;
    --njp-h4-mobile: 1.02rem;
    --njp-h4-weight: 700;
    --njp-body-size: 1rem;
    --njp-body-line-height: 1.8;
    --njp-nav-size: 0.875rem;
}
html[data-njp-theme="light"]{
    --njp-h1-color: #0f172a;
    --njp-card-title-color: #0f172a;
    --njp-card-title-hover: #2563eb;
    --njp-h2-color: #0f172a;
    --njp-h3-color: #1e293b;
    --njp-h4-color: #334155;
    --njp-link-color: #2563eb;
    --njp-readmore-color: #ef4444;
    --njp-readmore-hover-bg: #dc2626;
    --njp-readmore-hover-text: #ffffff;
    --njp-accent: #7c3aed;
    --njp-heading: #0f172a;
    --njp-link-hover: #2563eb;
}
html[data-njp-theme="dark"]{
    --njp-h1-color: #f8fafc;
    --njp-card-title-color: #f8fafc;
    --njp-card-title-hover: #60a5fa;
    --njp-h2-color: #e2e8f0;
    --njp-h3-color: #8b5cf6;
    --njp-h4-color: #cbd5e1;
    --njp-link-color: #60a5fa;
    --njp-readmore-color: #f87171;
    --njp-readmore-hover-bg: #ef4444;
    --njp-readmore-hover-text: #0f172a;
    --njp-accent: #8b5cf6;
    --njp-heading: #f8fafc;
    --njp-link-hover: #60a5fa;
}

/* ── Typography consumption ── */
body{ font-size: var(--njp-body-size); line-height: var(--njp-body-line-height); }
.njp-single-title{ font-size: var(--njp-h1-size-desktop); font-weight: var(--njp-h1-weight); line-height: var(--njp-h1-line-height); letter-spacing: -.012em; color: var(--njp-h1-color); margin: 0 0 .75rem; }
@media (max-width: 992px){ .njp-single-title{ font-size: var(--njp-h1-size-tablet); } }
@media (max-width: 600px){ .njp-single-title{ font-size: var(--njp-h1-size-mobile); } }
body .article-title, .njp-card-title, body .njp-card-title{ font-size: var(--njp-card-title-desktop) !important; font-weight: var(--njp-card-title-weight) !important; color: var(--njp-card-title-color); }
@media (max-width: 992px){ body .article-title, body .njp-card-title{ font-size: var(--njp-card-title-tablet) !important; } }
@media (max-width: 600px){ body .article-title, body .njp-card-title{ font-size: var(--njp-card-title-mobile) !important; } }
.article-card:hover .article-title,
.article-card:focus-within .article-title,
.article-link:hover .article-title,
body .article-card:hover .article-title{ color: var(--njp-card-title-hover) !important; }
body .entry-content h2, .njp-single-content h2{ font-size: var(--njp-h2-desktop) !important; font-weight: var(--njp-h2-weight) !important; color: var(--njp-h2-color); border-left-color: var(--njp-accent); }
@media (max-width: 992px){ body .entry-content h2, body .njp-single-content h2{ font-size: var(--njp-h2-tablet) !important; } }
@media (max-width: 600px){ body .entry-content h2, body .njp-single-content h2{ font-size: var(--njp-h2-mobile) !important; } }
body .entry-content h3, .njp-single-content h3{ font-size: var(--njp-h3-desktop) !important; font-weight: var(--njp-h3-weight) !important; color: var(--njp-h3-color); }
@media (max-width: 992px){ body .entry-content h3, body .njp-single-content h3{ font-size: var(--njp-h3-tablet) !important; } }
@media (max-width: 600px){ body .entry-content h3, body .njp-single-content h3{ font-size: var(--njp-h3-mobile) !important; } }
body .entry-content h4, .njp-single-content h4{ font-size: var(--njp-h4-desktop) !important; font-weight: var(--njp-h4-weight) !important; color: var(--njp-h4-color); }
@media (max-width: 992px){ body .entry-content h4, body .njp-single-content h4{ font-size: var(--njp-h4-tablet) !important; } }
@media (max-width: 600px){ body .entry-content h4, body .njp-single-content h4{ font-size: var(--njp-h4-mobile) !important; } }
.entry-content p, .njp-single-content p, .article-excerpt, .njp-card-excerpt, .post-excerpt{ line-height: var(--njp-body-line-height); }
.sf-menu a{ font-size: var(--njp-nav-size); }

/* ── Element colors consumption ── */
.entry-content a, .njp-single-content a, .njp-card-excerpt a, .post-excerpt a{ color: var(--njp-link-color); }
.entry-content a:hover, .njp-single-content a:hover{ color: var(--njp-link-hover); }
body a.read-more.button{ color: var(--njp-readmore-color); border-color: var(--njp-readmore-color); }
body a.read-more.button:hover, body a.read-more.button:focus-visible{
    background: linear-gradient(135deg, var(--njp-readmore-color), var(--njp-readmore-hover-bg));
    border-color: var(--njp-readmore-hover-bg);
    color: var(--njp-readmore-hover-text);
    box-shadow: 0 8px 30px color-mix(in srgb, var(--njp-readmore-color) 38%, transparent);
}