/* ============================================================
   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 — premium app-grade slide-in drawer (2026-11-16 refresh)
   Direct #offside selectors — overrides anything the theme ships.
   ============================================================ */
#offside{
    position:fixed; top:0; inset-inline-start:0;
    height:100vh; width:min(360px,92vw);
    background:var(--njp-card);
    z-index:9999 !important;
    transform:translate3d(-111%,0,0);
    transition:transform .26s cubic-bezier(.22,1,.36,1);
    will-change:transform;
    box-shadow:0 0 0 1px var(--njp-border), -12px 0 44px rgba(2,6,23,.16);
    overflow-y:auto; overscroll-behavior:contain;
}
[dir="rtl"] #offside{transform:translate3d(111%,0,0); box-shadow:0 0 0 1px var(--njp-border), 12px 0 44px rgba(2,6,23,.16)}
#offside.open{transform:translate3d(0,0,0)!important}

#offside .offside-inner{padding:0 0 calc(1.5rem + env(safe-area-inset-bottom, 0)) !important}

/* Drawer header — Najibul LEFT, close button RIGHT, in ONE row */
#offside .offside-header{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px;
    padding:.85rem 1.15rem !important;
    border-bottom:1px solid var(--njp-border) !important;
    margin:0 !important;
    background:var(--njp-card) !important;
    position:sticky; top:0; z-index:1;
    font-size:1.1rem !important;
    font-weight:800 !important;
    letter-spacing:-.01em;
    color:var(--njp-text) !important;
}
#offside .offside-brand{color:var(--njp-text) !important; font-weight:800;}
#offside .offside-close{
    position:static !important;
    width:40px !important; height:40px !important;
    border-radius:50% !important;
    display:inline-flex !important;
    align-items:center; justify-content:center;
    margin-left:auto;
    background:var(--njp-card-subtle) !important;
    border:1px solid var(--njp-border) !important;
    color:var(--njp-text) !important;
    font-size:1.45rem !important; line-height:1 !important;
    cursor:pointer;
    transition:background .2s ease, color .2s ease, transform .2s ease;
}
#offside .offside-close:hover{background:var(--njp-primary) !important; color:#fff !important; border-color:var(--njp-primary) !important; transform:rotate(90deg)}
#offside .offside-close:focus-visible{outline:2px solid var(--njp-primary); outline-offset:2px}

/* Menu list — direct #offside ul/li selectors (no .offside-menu dependency) */
#offside ul{list-style:none !important; padding-left:0 !important; margin:0 !important;}
#offside > .offside-inner > ul{padding:.75rem .9rem 1rem !important;}

#offside li > a{
    display:flex !important;
    align-items:center;
    width:100%;
    min-height:42px;
    padding:9px 15px;
    border-radius:12px !important;
    border:1px solid transparent !important;
    color:var(--njp-text) !important;
    text-decoration:none !important;
    font-weight:500 !important;
    font-size:15.5px !important;
    letter-spacing:-.005em;
    background:transparent !important;
    transition:background .22s ease, color .22s ease, border-color .22s ease, transform .18s ease;
    gap:10px;
}
#offside li{margin:0 0 4px 0 !important;}
#offside li:last-child{margin-bottom:0 !important;}
#offside li > a:hover,
#offside li > a:focus-visible{
    background:rgba(59,130,246,.10) !important;
    color:var(--njp-primary) !important;
    border-color:rgba(59,130,246,.20) !important;
    transform:translateX(2px);
    outline:none;
}
#offside li.current-menu-item > a,
#offside li.current_page_item > a{
    background:rgba(59,130,246,.12) !important;
    color:var(--njp-primary) !important;
    border-inline-start:3px solid var(--njp-primary) !important;
    padding-left:14px !important;
    font-weight:700 !important;
}

/* Parent items — no pseudo-chevron (a real chevron button is injected by JS) */
#offside li.menu-item-has-children > a::after{ content:none; }

/* ── Accordion toggle button (injected via JS) ── */
#offside .offside-submenu-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:38px; min-height:38px;
    margin-left:auto;
    border:0; background:transparent;
    font-size:1.4rem; line-height:1; color:inherit;
    border-radius:8px; cursor:pointer;
    transition:background .2s ease, color .2s ease, transform .25s cubic-bezier(.22,1,.36,1);
}
#offside .offside-submenu-toggle:hover{
    background:rgba(59,130,246,.10);
    color:var(--njp-primary);
}
#offside .offside-submenu-toggle:focus-visible{
    outline:2px solid var(--njp-primary); outline-offset:2px;
}
#offside .offside-submenu-toggle > span{
    display:inline-block;
    transition:transform .25s cubic-bezier(.22,1,.36,1);
}
#offside li.sub-menu-open > a .offside-submenu-toggle > span{
    transform:rotate(90deg);
}

/* Sub-menus — collapsed by default, expand on .sub-menu-open */
#offside li.menu-item-has-children > ul.sub-menu{
    display:none;
    list-style:none;
    margin-left:14px;
    margin-top:6px;
    margin-bottom:6px;
    padding-left:12px;
    padding-block:2px;
    border-left:2px solid var(--njp-border);
    flex-direction:column;
    gap:4px;
}
#offside li.menu-item-has-children.sub-menu-open > ul.sub-menu{
    display:flex;
}

/* Sub-menu — empire-style left indent guide line */
/* Sub-menu styles unified inside accordion block above */

/* Overlay — soft blur + explicit z-index & pointer-events */
#offside-overlay{
    position:fixed !important;
    inset:0 !important;
    z-index:9998 !important;
    background:rgba(15,23,42,.45) !important;
    -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
    opacity:0;
    pointer-events:none;
    transition:opacity .26s cubic-bezier(.22,1,.36,1);
}
#offside-overlay.open{
    opacity:1 !important;
    pointer-events:auto !important;
    cursor:pointer;
}

/* Tiny mobile viewports (≤360px): keep padding comfortable */
@media (max-width: 360px) {
    #offside li > a{padding:12px 14px; font-size:15px;}
}
@media (max-width: 767px) { .menu-toggle { margin-right: 12px !important; } }

/* ============================================================
   STICKY HEADER V2 — Zero-Jitter Hysteresis Collapse (2026-11-15)
   Replaces previous "STICKY HIDE" block: dual thresholds (110 / 25),
   280 ms toggle cooldown, document-height guard, focus-protected.
   GPU hints: transform + opacity + will-change.
   Header background intentionally stays var(--njp-bg) at all times
   (no color flash); only a whisper-soft elevation + border-tone
   is added while collapsed.
   ============================================================ */
.site-header {
    background: var(--njp-bg) !important;
    border-bottom: 1px solid var(--njp-border);
    box-shadow: none;
    transition: box-shadow .3s ease, border-color .3s ease;
    grid-template-rows: max-content auto;
    transition: grid-template-rows .34s cubic-bezier(.4, 0, .2, 1), box-shadow .3s ease;
}
.njp-header-search {
    max-height: 160px;
    opacity: 1;
    transform: translateY(0);
    overflow: hidden;
    will-change: max-height, opacity, transform;
    transition: max-height .34s cubic-bezier(.4, 0, .2, 1),
                opacity .24s ease,
                transform .34s cubic-bezier(.4, 0, .2, 1),
                margin .3s ease, padding .3s ease;
}
.njp-brand,
.njp-top-actions {
    max-height: 160px; opacity: 1; overflow: visible;
    transition: max-height .34s cubic-bezier(.4, 0, .2, 1), opacity .24s ease;
}

/* Desktop (≥992px): keep only the nav bar sticky-on-scroll */
@media (min-width: 992px) {
    html.is-scrolled .site-header {
        grid-template-rows: 0fr auto;
        row-gap: 0;
        padding-block: .4rem;
        box-shadow: 0 4px 20px rgba(15, 23, 42, .06);
        border-bottom-color: var(--njp-border);
    }
    html.is-scrolled .njp-brand,
    html.is-scrolled .njp-header-search,
    html.is-scrolled .njp-top-actions {
        max-height: 0 !important; opacity: 0 !important;
        overflow: hidden !important; margin: 0 !important; padding: 0 !important;
        pointer-events: none !important; border: 0 !important;
        transform: translateY(-.3rem) !important;
    }
}

/* Mobile (≤991px): search row collapses; logo + actions remain one line */
@media (max-width: 991px) {
    html.is-scrolled .site-header {
        row-gap: 0;
        padding-block: .35rem;
        box-shadow: 0 4px 20px rgba(15, 23, 42, .06);
    }
    html.is-scrolled .njp-header-search {
        max-height: 0 !important; opacity: 0 !important;
        transform: translateY(-.3rem) !important;
        overflow: hidden !important; margin: 0 !important; padding: 0 !important;
        pointer-events: none !important; border: 0 !important;
    }
    html.is-scrolled .njp-top-actions { gap: 14px; }
    html.is-scrolled .njp-theme-toggle,
    html.is-scrolled .nfs-bell-trigger,
    html.is-scrolled .menu-toggle {
        min-width: 44px; min-height: 44px;
    }
    html.is-scrolled .menu-toggle { padding: .55rem; }
}

/* ============================================================
   THEME SWITCHER V2 — 3-state premium dropdown (2026-11-16)
   ============================================================ */
.njp-theme-switcher { position: relative; display: inline-flex; overflow: visible !important; }

/* Button — 40px desktop, 36px mobile — crisp 20px icon */
#njp-theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--njp-card-subtle);
    border: 1.5px solid var(--njp-border);
    cursor: pointer; color: var(--njp-text);
    position: relative; overflow: hidden;
    transition: color .22s ease, background .22s ease, transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
#njp-theme-toggle:hover {
    color: var(--njp-primary);
    border-color: var(--njp-primary);
    box-shadow: 0 4px 14px rgba(37,99,235,.25);
    transform: translateY(-1px);
}
#njp-theme-toggle:focus-visible {
    outline: 2px solid var(--njp-primary); outline-offset: 2px;
}
@media (max-width: 767px) { #njp-theme-toggle{ width: 36px; height: 36px; } }

/* Stacked icons — one visible per [data-state] */
#njp-theme-toggle .njp-theme-icon {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transform: scale(.4) rotate(-90deg);
    transition: opacity .3s cubic-bezier(.4,0,.2,1), transform .38s cubic-bezier(.34,1.56,.64,1);
    pointer-events: none;
}
#njp-theme-toggle[data-state="light"] .njp-theme-icon-sun,
#njp-theme-toggle[data-state="dark"] .njp-theme-icon-moon,
#njp-theme-toggle[data-state="auto"] .njp-theme-icon-auto {
    opacity: 1; transform: scale(1) rotate(0);
}

/* ── Dropdown — frosted glassmorphism ── */
.njp-theme-dropdown {
    position: absolute; top: calc(100% + 10px); right: 0;
    z-index: 1200;
    min-width: 200px; max-width: calc(100vw - 24px);
    background: linear-gradient(160deg, rgba(255,255,255,.95) 0%, rgba(248,250,252,.9) 100%);
    border: 1px solid rgba(226,232,240,.85);
    border-radius: 18px;
    padding: 8px;
    display: flex; flex-direction: column; gap: 4px;
    box-shadow: 0 16px 36px -6px rgba(15,23,42,.18), 0 0 0 1px rgba(255,255,255,.6) inset;
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    transform-origin: top right;
    opacity: 0; transform: translateY(-8px) scale(.92); pointer-events: none;
    transition: opacity .28s cubic-bezier(.34,1.56,.64,1), transform .28s cubic-bezier(.34,1.56,.64,1);
    will-change: opacity, transform;
}
html[data-njp-theme="dark"] .njp-theme-dropdown,
html.njp-theme-dark .njp-theme-dropdown {
    background: linear-gradient(160deg, rgba(30,41,59,.96) 0%, rgba(15,23,42,.92) 100%);
    border-color: rgba(51,65,85,.85);
    box-shadow: 0 16px 36px -6px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.njp-theme-dropdown.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
[hidden].njp-theme-dropdown { display: none !important; }

/* ── Dropdown options — icon badge + label ── */
.njp-theme-option {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    padding: 8px 10px; border-radius: 13px;
    background: transparent; border: 1px solid transparent;
    cursor: pointer; text-align: left; color: var(--njp-text);
    transition: background .22s ease, border-color .22s ease, transform .22s cubic-bezier(.34,1.56,.64,1);
}
.njp-theme-option:hover, .njp-theme-option:focus-visible {
    background: rgba(59,130,246,.08);
    border-color: rgba(59,130,246,.22);
    transform: translateX(2px); outline: none;
}
.njp-theme-option.is-pressed { transform: scale(.96); }

/* Glowing icon badges */
.njp-theme-option-icon {
    flex-shrink: 0;
    width: 36px; height: 36px; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,.12), 0 0 0 1px rgba(255,255,255,.35) inset;
}
.njp-theme-option-icon--auto  { background: linear-gradient(135deg,#0ea5e9,#6366f1); box-shadow: 0 4px 14px rgba(14,165,233,.35); }
.njp-theme-option-icon--day   { background: linear-gradient(135deg,#f59e0b,#f97316); box-shadow: 0 4px 14px rgba(245,158,11,.4); }
.njp-theme-option-icon--night { background: linear-gradient(135deg,#6366f1,#a855f7); box-shadow: 0 4px 14px rgba(99,102,241,.42); }

.njp-theme-option-text { display: flex; flex-direction: column; line-height: 1.15; }
.njp-theme-option-title { font-size: 14px; font-weight: 700; letter-spacing: -.005em; }
.njp-theme-option-sub   { font-size: 11.5px; color: var(--njp-text-muted); font-weight: 500; }

/* RTL safe positioning */
[dir="rtl"] .njp-theme-dropdown { right: auto; left: 0; }


/* Back to Top — premium gradient floating action, light & dark */
.njp-back-to-top{
    position:fixed; bottom:24px; right:24px;
    width:56px; height:56px; border-radius:50%;
    border:1.5px solid rgba(255,255,255,.35);
    background:linear-gradient(135deg,#2563eb 0%,#7c3aed 100%);
    color:#fff; font-size:1.45rem; line-height:1;
    cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center;
    box-shadow:0 14px 30px -8px rgba(37,99,235,.55),0 6px 14px rgba(124,58,237,.4),0 0 0 1px rgba(255,255,255,.18) inset;
    z-index:999;
    opacity:0; pointer-events:none; transform:translateY(14px);
    transition:opacity .3s ease, transform .32s cubic-bezier(.22,1,.36,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 42px -8px rgba(37,99,235,.6),0 8px 20px rgba(124,58,237,.45),0 0 0 1px rgba(255,255,255,.22) inset}
.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:opacity .15s ease; transform:none}}