/*
Theme Name: NewsPress
Theme URI: https://example.com/newspress
Author: NewsPress
Author URI: https://example.com
Description: A lightweight, SEO-friendly newspaper theme with full customizer options. Optimized for Core Web Vitals.
Version: 1.7.4
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: newspress
Tags: news, newspaper, blog, grid, custom-colors, custom-logo, custom-menu, featured-images, post-formats, rtl-language-support, sticky-post, threaded-comments, wide-blocks
*/

/* ============================================================
   FONT DISPLAY — prevent invisible text during font load (FOIT)
   Swap ensures text renders in fallback font immediately.
   Applied globally so any @font-face injected by Google Fonts
   or WordPress inherits this behaviour.
   ============================================================ */
* { font-display: swap; } /* cascade-level hint — browsers honour this */
@font-face { font-display: swap; } /* explicit @font-face default */

/* ============================================================
   CLS PREVENTION — stable dimensions for media containers
   Explicit aspect-ratio on every image container means the
   browser reserves space before the image loads, keeping
   Cumulative Layout Shift (CLS) at zero.
   ============================================================ */
/* Hero images — fixed heights match JS/CSS expectations */
.np-hero-main { aspect-ratio: 16/9; min-height: 0; }
.np-hero-side { aspect-ratio: 16/9; min-height: 0; }

/* Site logo — prevent height jump while logo image loads */
.np-site-logo { display: block; min-height: 60px; }

/* Sidebar widgets — reserve minimum height to prevent jump */
.np-widget { min-height: 2rem; }

/* Embed containers — 16:9 aspect-ratio before JS loads */
.wp-block-embed__wrapper,
.wp-video,
.fluid-width-video-wrapper { position: relative; aspect-ratio: 16/9; }
.wp-block-embed__wrapper iframe,
.wp-video video,
.fluid-width-video-wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Touch targets — all interactive elements min 44×44px (WCAG 2.5.5) */
.np-menu-toggle,
.np-sub-toggle,
#np-back-top,
.np-share a,
.np-pagination a,
.np-pagination span { min-height: 44px; min-width: 44px; }

/* Prevent nav height jump before fonts load — nav links use display:flex in nav CSS */

/* ============================================================
   CSS CUSTOM PROPERTIES (set by Customizer via inline styles)
   ============================================================ */
:root {
    --np-primary:       #d32f2f;
    --np-secondary:     #1565c0;
    --np-accent:        #f57c00;
    --np-text:          #212121;
    --np-text-muted:    #757575;
    --np-bg:            #ffffff;
    --np-bg-alt:        #f5f5f5;
    --np-border:        #e0e0e0;
    --np-header-bg:     #ffffff;
    --np-topbar-bg:     #212121;
    --np-topbar-text:   #ffffff;
    --np-footer-bg:     #1a1a1a;
    --np-footer-text:   #cccccc;
    --np-nav-bg:        #d32f2f;
    --np-nav-text:      #ffffff;
    --np-font-body:     'Georgia', serif;
    --np-font-heading:  'Arial', sans-serif;
    --np-font-size:     16px;
    --np-container:     1200px;
    --np-sidebar-width: 300px;
    --np-radius:        4px;
    --np-shadow:        0 1px 4px rgba(0,0,0,.1);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Overflow bleed prevention ── */
html { overflow-x: clip; } /* clip = no scroll container, truly prevents horizontal scroll */
body { overflow-x: clip; }
.np-container { overflow-x: clip; } /* clip: no scroll container, shadows/transforms not clipped vertically */

/* ── Flex children: prevent bleed from default min-width:auto ── */
.np-card,
.np-list-body,
.np-hero-side,
.np-hero-main,
.np-main,
.np-sidebar,
.np-section-card,
.np-magazine-main,
.np-magazine-side,
.np-breaking-text { min-width: 0; }

html {
    font-size: var(--np-font-size);
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--np-font-body);
    color: var(--np-text);
    background: var(--np-bg);
    line-height: var(--np-lh-body, 1.7);
    font-size: var(--np-font-size, 16px); /* overflow-x set on body rule above */
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
img { loading: lazy; }

/* Page wrapper fills full viewport — prevents dark body bg showing on sides */
#np-page, .np-page-wrapper { width: 100%; min-height: 100vh; }

a { color: var(--np-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--np-primary); outline-offset: 2px; }

h1,h2,h3,h4,h5,h6 {
    font-family: var(--np-font-heading);
    line-height: 1.3;
    color: var(--np-text);
    font-weight: 700;
}
h1 { font-size: var(--np-h1-size, 2rem); }
h2 { font-size: var(--np-h2-size, 1.6rem); }
h3 { font-size: var(--np-h3-size, 1.35rem); }
h4 { font-size: var(--np-h4-size, 1.15rem); }

p { margin-bottom: 1.2em; }
ul, ol { padding-left: 1.5em; margin-bottom: 1.2em; }
blockquote {
    border-left: 4px solid var(--np-primary);
    padding: .75em 1.25em;
    margin: 1.5em 0;
    background: var(--np-bg-alt);
    font-style: italic;
    color: var(--np-text-muted);
}

table { border-collapse: collapse; width: 100%; margin-bottom: 1.2em; }
th, td { border: 1px solid var(--np-border); padding: .6em .9em; text-align: left; }
th { background: var(--np-bg-alt); font-weight: 700; }

hr { border: 0; border-top: 1px solid var(--np-border); margin: 2em 0; }

/* ============================================================
   LAYOUT
   ============================================================ */
.np-container {
    max-width: var(--np-container);
    width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
}

.np-site-content {
    display: grid;
    grid-template-columns: 1fr var(--np-sidebar-width);
    grid-template-areas: "main sidebar";
    gap: 2rem;
    padding: 2rem 0;
}
/* Assign children to named areas — works regardless of DOM order */
.np-site-content .np-main    { grid-area: main; }
.np-site-content .np-sidebar { grid-area: sidebar; }

/* No sidebar: single column, both areas stacked */
.np-site-content.np-no-sidebar {
    grid-template-columns: 1fr;
    grid-template-areas: "main";
}
.np-site-content.np-no-sidebar .np-sidebar { display: none; }

/* Left sidebar: flip the template areas — sidebar column comes first */
.np-site-content.np-left-sidebar {
    grid-template-columns: var(--np-sidebar-width) 1fr;
    grid-template-areas: "sidebar main";
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
.screen-reader-text {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}
.skip-link {
    position: absolute; top: -999px; left: 1rem; z-index: 9999;
    padding: .75em 1.5em;
    background: var(--np-primary); color: #fff;
    font-weight: 700; border-radius: 0 0 var(--np-radius) var(--np-radius);
}
.skip-link:focus { top: 0; }

/* ============================================================
   TOP BAR
   ============================================================ */
.np-topbar {
    background: var(--np-topbar-bg);
    color: var(--np-topbar-text);
    font-family: var(--np-font-heading);
    font-size: .75rem;
    line-height: 1;
}
.np-topbar .np-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
}
.np-topbar a { color: var(--np-topbar-text); opacity: .8; }
.np-topbar a:hover { opacity: 1; text-decoration: none; }

.np-breaking-news {
    display: flex;
    align-items: center;
    gap: .75rem;
    overflow: hidden;
    max-width: 60%;
}
.np-breaking-label {
    background: var(--np-primary);
    color: #fff;
    padding: .3em .6em;
    font-weight: 700;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    flex-shrink: 0;
}
/* ══════════════════════════════════════════════════════════════════
   UNIFIED TICKER SYSTEM  v1.6.9
   ══════════════════════════════════════════════════════════════════
   HTML structure (both tickers use this exactly):
     .np-ticker-viewport   ← overflow:hidden, clips the scroll
       .np-ticker-track    ← animated element, 2× wide (2 sets of items)
         .np-ticker-item   ← individual headline (set 1, keyboard-accessible)
         .np-ticker-item   ← individual headline (set 2, aria-hidden duplicate)

   CRITICAL RULES:
   • animation-duration is set DIRECTLY on each track, not via parent selector
   • track uses inline-flex + flex-shrink:0 so flex layout never squishes it
   • translateX(-50%) works because track = exactly 2 sets = 2× the loop distance
   ══════════════════════════════════════════════════════════════════ */

@keyframes np-ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Viewport — the clipping window */
.np-ticker-viewport {
    overflow: hidden;      /* CRITICAL: clips the moving track */
    flex: 1;
    min-width: 0;          /* prevents flex overflow */
    position: relative;
}

/* Track — THE animated element. Must be wider than the viewport. */
.np-ticker-track {
    /* inline-flex renders the track at exactly its natural content width.
       flex-shrink:0 prevents the parent flex layout from squishing it. */
    display: inline-flex;
    flex-shrink: 0;
    flex-wrap: nowrap;          /* NEVER wrap — all items stay on one line */
    align-items: center;
    white-space: nowrap;
    /* Animation — duration set per-ticker below */
    animation-name: np-ticker-scroll;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
    will-change: transform;
}

/* Paused — JS adds this class; no CSS :hover to avoid conflict */
.np-ticker-track.np-paused {
    animation-play-state: paused !important;
}

/* Reduced motion — disable completely */
@media (prefers-reduced-motion: reduce) {
    .np-ticker-track {
        animation: none !important;
        display: flex;
        flex-wrap: wrap;
        overflow-x: auto;
    }
}

/* Item — individual headline link */
.np-ticker-item {
    display: inline-block;
    flex-shrink: 0;       /* never shrink */
    text-decoration: none;
    white-space: nowrap;
    transition: opacity .15s;
}
.np-ticker-item:hover { opacity: .75; text-decoration: underline; }

/* ════════════════════════════════════════════════════════════════
   BREAKING NEWS TICKER (header topbar)
   animation-duration set directly — no parent selector dependency
   ════════════════════════════════════════════════════════════════ */
.np-breaking-news {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.np-breaking-label {
    padding: .2em .7em;
    font-size: .6875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    flex-shrink: 0;
    border-radius: 2px;
    line-height: 1.8;
    background: var(--np-breaking-bg, #d32f2f);
    color: var(--np-breaking-color, #fff);
    margin-right: .75rem;
}
/* Duration set DIRECTLY on the breaking track element */
.np-breaking-news .np-ticker-track {
    gap: 2.5rem;
    animation-duration: 35s; /* fallback — overridden by newspress-vars inline block */
    animation-duration: var(--np-ticker-dur, 35s);
}
.np-breaking-news .np-ticker-item {
    color: var(--np-topbar-text, #fff);
    font-size: .8125rem;
}

.np-topbar-right { display: flex; align-items: center; gap: 1rem; }
.np-social-links { display: flex; gap: .35rem; align-items: center; }
.np-social-links a {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    opacity: .75;
    color: var(--np-topbar-text);
    border-radius: 50%;
    transition: opacity .2s, background .2s;
    flex-shrink: 0;
}
.np-social-links a:hover { opacity: 1; background: rgba(255,255,255,.15); }
.np-social-links a svg { display: block; width: 16px; height: 16px; }

/* ============================================================
   HEADER
   ============================================================ */
.np-site-header {
    background: var(--np-header-bg);
    border-bottom: 1px solid var(--np-border);
    position: sticky; top: 0; z-index: 100;
    box-shadow: var(--np-shadow);
}
.np-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* ── Logo ── */
.np-site-branding { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }
.np-site-branding.np-logo-center { justify-content: center; }
.np-site-branding.np-logo-right  { justify-content: flex-end; }

/* Logo image sizing — driven entirely by CSS vars set from Customizer */
.np-site-logo img,
.np-site-logo a img {
    max-width: var(--np-logo-max-width, 200px);
    max-height: var(--np-logo-max-height, auto);
    width: auto;
    height: auto;
    display: block;
    transition: opacity .2s;
}
/* Retina: halve the rendered size so 2× image looks crisp */
body.np-retina-logo .np-site-logo img,
body.np-retina-logo .np-site-logo a img {
    max-width: calc(var(--np-logo-max-width, 200px) / 2);
}
.np-site-logo a:hover img { opacity: .88; }

/* Site title */
.np-site-title {
    font-family: var(--np-font-heading);
    font-size: var(--np-site-title-size, 1.75rem);
    font-weight: 900;
    color: var(--np-text);
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: -.02em;
}
.np-site-title a:hover { text-decoration: none; color: var(--np-primary); }

/* Tagline */
.np-site-tagline {
    font-size: var(--np-tagline-size, .75rem);
    color: var(--np-text-muted);
    font-style: italic;
    line-height: 1.3;
}

/* Hide site title / tagline when toggled off */
body.np-hide-site-title .np-site-title { display: none; }
body.np-hide-tagline    .np-site-tagline { display: none; }

/* Mobile overrides */
@media (max-width: 480px) {
    .np-site-logo img,
    .np-site-logo a img {
        max-width: var(--np-mobile-logo-max-width, 140px);
    }
    body.np-retina-logo .np-site-logo img {
        max-width: calc(var(--np-mobile-logo-max-width, 140px) / 2);
    }
    body.np-hide-tagline-mobile .np-site-tagline { display: none; }
    body.np-hide-title-mobile   .np-site-title   { display: none; }
}

/* Header Search */
.np-header-search { position: relative; }
.np-header-search form {
    display: flex;
    border: 1px solid var(--np-border);
    border-radius: var(--np-radius);
    overflow: hidden;
}
.np-header-search input[type="search"] {
    border: 0; padding: .5em .75em; width: 220px; font-size: .875rem;
    background: var(--np-bg-alt); outline: none;
}
.np-header-search button {
    background: var(--np-primary); border: 0; color: #fff;
    padding: .5em .75em; cursor: pointer;
}
.np-header-search button:hover { opacity: .9; }

/* ============================================================
   NAVIGATION
   ============================================================ */

/* ── Desktop nav bar ─────────────────────────────────────────── */
.np-main-nav {
    background: var(--np-nav-bg);
    position: relative;
    z-index: 400; /* above content, below modals */
}
/* Container must NOT have overflow:hidden — that clips the dropdown panel */
.np-main-nav .np-container {
    position: relative;
    overflow: visible; /* explicit override of global overflow-x:hidden */
}

.np-nav-menu {
    display: flex;
    list-style: none;
    padding: 0; margin: 0;
    gap: 0;
}
.np-nav-menu > li { position: relative; }
.np-nav-menu > li > a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 1.1em;
    color: var(--np-nav-text);
    font-family: var(--np-font-heading);
    font-size: .875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    transition: background .2s;
    white-space: nowrap;
    text-decoration: none;
}
.np-nav-menu > li > a:hover,
.np-nav-menu > li.current-menu-item > a {
    background: rgba(0,0,0,.2);
    text-decoration: none;
}

/* ── Desktop dropdown ────────────────────────────────────────── */
.np-nav-menu .sub-menu {
    position: absolute;
    top: 100%; left: 0;
    background: #fff;
    min-width: 210px;
    list-style: none;
    box-shadow: 0 6px 20px rgba(0,0,0,.15);
    z-index: 500; /* above everything on page */
    display: none;
    border-top: 3px solid var(--np-primary);
    border-radius: 0 0 var(--np-radius) var(--np-radius);
}
/* Only show hover dropdowns when using a fine pointer (mouse/trackpad) */
/* Touch devices use the JS toggle instead */
.np-pointer-fine .np-nav-menu li:hover > .sub-menu,
.np-nav-menu li:focus-within > .sub-menu { display: block; }

.np-nav-menu .sub-menu li { position: relative; }
.np-nav-menu .sub-menu li a {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 0 1em;
    color: var(--np-text);
    font-size: .8125rem;
    border-bottom: 1px solid var(--np-border);
    text-decoration: none;
    transition: background .15s, color .15s;
}
.np-nav-menu .sub-menu li a:hover {
    background: var(--np-bg-alt);
    color: var(--np-primary);
    text-decoration: none;
}
.np-nav-menu .sub-menu li:last-child a { border-bottom: 0; }

/* ── Hamburger toggle button ─────────────────────────────────── */
/* Hidden on desktop; shown via media query on mobile */
.np-menu-toggle {
    display: none;
    align-items: center;
    gap: .5rem;
    background: transparent;
    border: 2px solid var(--np-nav-text);
    color: var(--np-nav-text);
    padding: .35em .75em;
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    font-size: .875rem;
    font-weight: 700;
    border-radius: var(--np-radius);
    line-height: 1;
    transition: background .15s, color .15s, border-color .15s;
    user-select: none;
}
.np-menu-toggle:hover,
.np-toggle-active {
    background: rgba(255,255,255,.15);
}
.np-menu-toggle:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
.np-toggle-icon { display: flex; align-items: center; flex-shrink: 0; }
.np-toggle-icon svg { display: block; }
.np-toggle-label { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }

/* ── Sub-menu toggle button (mobile only) ────────────────────── */
.np-sub-toggle {
    display: none; /* shown in mobile media query */
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0; top: 0;
    width: 48px; height: 48px;
    background: rgba(255,255,255,.08);
    border: none;
    border-left: 1px solid rgba(255,255,255,.12);
    color: var(--np-nav-text);
    cursor: pointer;
    font-size: .85rem;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s;
    z-index: 1;
}
.np-sub-toggle:hover,
.np-sub-toggle:focus-visible {
    background: rgba(255,255,255,.2);
    outline: none;
}
.np-sub-toggle span {
    display: inline-block;
    transition: transform .2s ease;
    line-height: 1;
}
.np-menu-item-has-children.np-sub-open > .np-sub-toggle span,
.menu-item-has-children.np-sub-open > .np-sub-toggle span {
    transform: rotate(180deg);
}

/* ── Backdrop overlay ────────────────────────────────────────── */
.np-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 399; /* just below nav (400) */
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity .25s ease;
}
.np-nav-overlay.np-overlay-visible {
    display: block;
    opacity: 1;
}

/* ── Body scroll lock ────────────────────────────────────────── */
body.np-menu-open {
    overflow: hidden;
    /* Prevent width jump from scrollbar disappearing */
    padding-right: var(--np-scrollbar-width, 0px);
}

/* ── Nav close button (inside off-canvas panel) ──────────── */
.np-menu-close-item {
    position: absolute;
    top: 0; right: 0;
    border-bottom: none !important;
    z-index: 1;
}
.np-menu-close {
    display: none; /* shown in mobile media query */
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    background: rgba(255,255,255,.1);
    border: none;
    color: var(--np-nav-text);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s;
    border-radius: 0 0 0 var(--np-radius);
}
.np-menu-close:hover,
.np-menu-close:focus-visible {
    background: rgba(255,255,255,.2);
    outline: none;
}
.np-menu-close svg { display: block; }

/* ============================================================
   SECONDARY NAV (Category bar)
   ============================================================ */
.np-secondary-nav {
    background: var(--np-bg-alt);
    border-bottom: 1px solid var(--np-border);
    font-size: .8125rem;
}
.np-secondary-nav ul { display: flex; flex-wrap: wrap; list-style: none; gap: 0; }
.np-secondary-nav ul li a {
    display: block;
    padding: .5em .9em;
    color: var(--np-text-muted);
    font-family: var(--np-font-heading);
}
.np-secondary-nav ul li a:hover { color: var(--np-primary); text-decoration: none; }

/* ============================================================
   FEATURED / HERO SECTION
   ============================================================ */
.np-featured-section { padding: 1.5rem 0 1rem; }
.np-hero-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto auto;
    gap: var(--np-hero-gap, 1rem);
}

.np-hero-main {
    grid-row: span 2; position: relative; overflow: hidden;
    border-radius: var(--np-hero-radius, var(--np-radius));
    margin-top: var(--np-hero-img-mt, 0px);
    margin-bottom: var(--np-hero-img-mb, 0px);
}
.np-hero-main img { width: 100%; height: 400px; object-fit: cover; transition: transform 220ms ease; }
.np-hero-main .np-post-overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,.85));
    padding: 2rem 1.25rem 1.25rem;
    color: #fff;
}
.np-hero-side { border-radius: var(--np-radius); overflow: hidden; position: relative; }
.np-hero-side img { width: 100%; height: 188px; object-fit: cover; transition: transform 220ms ease; }
.np-hero-side .np-post-overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,.8));
    padding: 1.5rem 1rem 1rem;
    color: #fff;
}

.np-post-overlay a { color: #fff; }
.np-post-overlay a:hover { text-decoration: underline; }
.np-post-overlay .np-post-title { font-size: 1.2rem; margin-bottom: .25rem; }
.np-hero-main .np-post-overlay .np-post-title { font-size: 1.7rem; }
.np-post-overlay .np-post-meta { font-size: .75rem; opacity: .8; }

/* ============================================================
   CATEGORY BADGE
   ============================================================ */
.np-category-badge {
    display: inline-block !important;
    background: var(--np-primary);
    color: #fff;
    font-family: var(--np-font-heading);
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .25em .7em;
    border-radius: 3px;
    margin-bottom: .4rem;
    width: auto !important;
    max-width: fit-content !important;
    white-space: nowrap;
    align-self: flex-start !important;
    line-height: 1.6;
}
/* Badge — shrink-wrap to text, never stretch */
.np-card-body > .np-category-badge,
.np-card-body .np-category-badge {
    display: inline-block !important;
    width: auto !important;
    max-width: fit-content !important;
    align-self: flex-start !important; /* critical: override flex stretch */
}
/* Title and excerpt must still span full width */
.np-card-body .np-card-title,
.np-card-body .np-card-excerpt,
.np-card-body .np-card-meta {
    align-self: stretch;
    width: 100%;
}
.np-category-badge:hover { background: var(--np-secondary); color: #fff; text-decoration: none; }

/* ============================================================
   SECTION HEADING
   ============================================================ */
.np-section-heading {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.25rem;
    border-bottom: 3px solid var(--np-border, #e5e5e5);
    padding-bottom: 0;
}
.np-section-heading h2 {
    font-family: var(--np-font-heading);
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #fff;
    background: var(--np-primary);
    padding: .45rem .9rem;
    margin: 0;
    line-height: 1;
    position: relative;
    top: 3px; /* sits on the border */
}
.np-section-heading a {
    color: var(--np-text-muted);
    font-size: .75rem;
    margin-left: auto;
    text-decoration: none;
}
.np-section-heading a:hover { color: var(--np-primary); }

/* ============================================================
   POST CARDS (Grid)
   ============================================================ */
.np-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.np-posts-grid.np-col-2 { grid-template-columns: repeat(2, 1fr); }
.np-posts-grid.np-col-4 { grid-template-columns: repeat(4, 1fr); }
/* Fill phantom cells so orphan cards on last row keep card width */
.np-posts-grid::after      { content: ''; }
.np-posts-grid.np-col-2::after { content: none; } /* 2-col doesn't need it */

.np-card {
    background: var(--np-bg);
    border-radius: var(--np-radius);
    overflow: hidden;
    border: 1px solid var(--np-border);
    transition: box-shadow 220ms ease, transform 220ms ease;
    display: flex;
    flex-direction: column;
}
/* Default hover — overridden by float effect CSS when enabled */
.np-card:hover {
    /* shadow applied by newspress_customizer_css() */
}

.np-card-thumb.np-card-thumb-has-badge { position: relative; }
.np-card-thumb-badge {
    position: absolute;
    top: .6rem;
    left: .6rem;
    z-index: 2;
}
.np-card-thumb-badge .np-category-badge {
    box-shadow: 0 1px 4px rgba(0,0,0,.3);
}

.np-card-thumb { overflow: hidden; aspect-ratio: 16/9;
    margin-top:    var(--np-card-img-mt, 0px);
    margin-bottom: var(--np-card-img-mb, 0px);
    margin-left:   var(--np-card-img-ml, 0px);
    margin-right:  var(--np-card-img-mr, 0px);
    /* Background shows when image is in contain mode (letterbox fill) */
    background-color: var(--np-bg-alt);
}
.np-card-thumb img {
    width: 100%; height: 100%;
    object-fit:      var(--np-card-img-fit, cover);
    object-position: var(--np-card-img-pos, center center);
    transition: transform 220ms ease;
    display: block;
}
.np-card-thumb.np-no-image { background: var(--np-bg-alt); display: flex; align-items: center; justify-content: center; color: var(--np-text-muted); font-size: 2rem; }

/* Text-only card — no image, no blank space */
.np-card.np-card-no-thumb { display: flex; flex-direction: column; }
.np-card.np-card-no-thumb .np-card-body { flex: 1; border-left: 3px solid var(--np-primary); padding-left: 1rem; }
.np-card.np-card-no-thumb .np-card-title { font-size: var(--np-font-size-card-title, 1rem); }
.np-card.np-card-no-thumb .np-card-excerpt { font-size: var(--np-font-size-card-excerpt, 0.8125rem); }

/* Image ratio variants */
.np-card-thumb { overflow: hidden; }
.np-ratio-16-9 { aspect-ratio: 16/9; }
.np-ratio-4-3  { aspect-ratio: 4/3; }
.np-ratio-3-2  { aspect-ratio: 3/2; }
.np-ratio-1-1  { aspect-ratio: 1/1; }
/* Duplicate rule removed — vars already set above on the canonical .np-card-thumb img rule */

.np-card-body {
    padding: var(--np-card-body-pt, 9px) var(--np-card-body-px, 9px) var(--np-card-body-pb, 9px);
    flex: 1; display: flex; flex-direction: column; align-items: flex-start;
}
.np-card-title {
    font-family: var(--np-font-heading);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: .4rem;
    line-height: 1.3;
}
.np-card-title a { color: var(--np-text); }
.np-card-title a:hover { color: var(--np-primary); text-decoration: none; }

.np-card-excerpt { font-size: .875rem; color: var(--np-text-muted); line-height: 1.5; flex: 1; }
.np-card-meta { font-size: var(--np-font-size-card-meta, 0.75rem); color: var(--np-text-muted); margin-top: .75rem; display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.np-card-meta a { color: var(--np-text-muted); }
.np-card-meta a:hover { color: var(--np-primary); }

/* ============================================================
   LIST STYLE POSTS
   ============================================================ */
.np-posts-list { list-style: none; padding: 0; margin: 0 0 2rem; }
.np-list-item {
    display: flex;
    gap: .75rem;
    padding: .75rem 0;
    border-bottom: 1px solid var(--np-border);
    align-items: flex-start;
}
.np-list-item:last-child { border-bottom: 0; }
.np-list-thumb { flex-shrink: 0; width: 90px; height: 68px; border-radius: var(--np-radius); overflow: hidden; }
.np-list-thumb img { width: 100%; height: 100%; object-fit: cover; }
.np-list-body { flex: 1; min-width: 0; }
.np-list-title { font-family: var(--np-font-heading); font-size: .9rem; font-weight: 700; line-height: 1.3; margin-bottom: .25rem; }
.np-list-title a { color: var(--np-text); }
.np-list-title a:hover { color: var(--np-primary); text-decoration: none; }
.np-list-meta { font-size: .7rem; color: var(--np-text-muted); }

/* ============================================================
   NUMBERED LIST (Top Stories)
   ============================================================ */
.np-numbered-list { list-style: none; padding: 0; counter-reset: np-counter; }
.np-numbered-item {
    counter-increment: np-counter;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--np-border);
}
.np-numbered-item::before {
    content: counter(np-counter);
    flex-shrink: 0;
    width: 28px; height: 28px;
    background: var(--np-primary);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--np-font-heading);
    font-weight: 700; font-size: .8rem;
    border-radius: 50%;
}
.np-numbered-item a { font-family: var(--np-font-heading); font-size: .875rem; font-weight: 700; color: var(--np-text); line-height: 1.3; }
.np-numbered-item a:hover { color: var(--np-primary); text-decoration: none; }

/* ============================================================
   TABBED SECTION
   ============================================================ */
.np-tabs { margin-bottom: 2rem; }
.np-tab-nav {
    display: flex;
    border-bottom: 3px solid var(--np-primary);
    list-style: none;
    gap: 0; flex-wrap: wrap;
}
.np-tab-nav li a {
    display: block;
    padding: .5em 1em;
    font-family: var(--np-font-heading);
    font-size: .8125rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--np-text-muted);
}
.np-tab-nav li.np-active a,
.np-tab-nav li a:hover { background: var(--np-primary); color: #fff; text-decoration: none; }
.np-tab-pane { display: none; padding: 1rem 0; }
.np-tab-pane.np-active { display: block; }

/* ============================================================
   TICKER / SCROLL TICKER
   ============================================================ */

@keyframes np-scroll-x {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ============================================================
   AD PLACEHOLDER
   ============================================================ */
.np-ad-slot {
    display: block;
    width: 100%;
    text-align: center;
    overflow: hidden;
}
/* Reserve exact space for each position — prevents CLS */
.np-ad-header        { min-height: 90px; padding: 4px 0; }
.np-ad-footer        { min-height: 90px; padding: 4px 0; background: var(--np-bg-alt); }
.np-ad-sidebar       { min-height: 250px; margin-bottom: 1.5rem; }
.np-ad-infeed        { min-height: 90px; margin: 1.5rem 0; }
.np-ad-mobile_banner {
    position: fixed;
    bottom: 0; left: 0;
    width: 100%;
    min-height: 50px;
    z-index: 900;
    background: var(--np-bg);
    border-top: 1px solid var(--np-border);
    text-align: center;
    padding: 4px 0;
}
/* When cookie banner is active, push mobile ad up OR hide it so it never
   blocks cookie bar touch/click events */
body:not(.np-cookie-done) .np-ad-mobile_banner {
    pointer-events: none !important;
    visibility: hidden !important;
}
/* Empty slots take no space */
.np-ad-slot:empty { display: none; min-height: 0; }
/* Legacy size classes */
.np-ad-slot.np-ad-728x90 { height: 90px; }
.np-ad-slot.np-ad-300x250 { height: 250px; }

/* ============================================================
   SINGLE POST
   ============================================================ */
.np-single-header { margin-bottom: 1.5rem; }
.np-single-title { font-size: clamp(1.5rem, 4vw, 2.5rem); line-height: 1.2; margin-bottom: .75rem; }
.np-single-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    font-size: .8125rem;
    color: var(--np-text-muted);
    padding: .75rem 0;
    border-top: 1px solid var(--np-border);
    border-bottom: 1px solid var(--np-border);
    margin-bottom: 1.5rem;
}
.np-single-meta a { color: var(--np-text-muted); }
.np-single-meta a:hover { color: var(--np-primary); }
.np-author-avatar { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; }
.np-author-avatar img { width: 100%; height: 100%; object-fit: cover; }

.np-featured-image { margin-bottom: var(--np-featured-img-mb, 1.5rem); border-radius: var(--np-radius); }
/* overflow:hidden removed — it clips the translateY lift effect on the img */
.np-featured-image img { width: 100%; max-height: 500px; object-fit: cover; border-radius: var(--np-radius); display: block; }
.np-featured-image figcaption { font-size: .75rem; color: var(--np-text-muted); padding: .4em .5em; background: var(--np-bg-alt); border-radius: 0 0 var(--np-radius) var(--np-radius); }

.np-entry-content {
    font-size: var(--np-font-size-post, 1rem);
    line-height: var(--np-lh-post, 1.8);
    /* Prevent any content (tables, pre, wide images) from overflowing viewport */
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
}
/* Ensure pre/code blocks scroll instead of pushing layout wide */
.np-entry-content pre {
    overflow-x: auto;
    max-width: 100%;
    white-space: pre-wrap;
}
/* Tables: scroll horizontally within content, not the page */
.np-entry-content table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
}
.np-entry-content h2 { font-size: 1.5rem; margin: 1.75em 0 .75em; }
.np-entry-content h3 { font-size: 1.25rem; margin: 1.5em 0 .6em; }
.np-entry-content h4 { font-size: 1.1rem; margin: 1.25em 0 .5em; }

/* Content image containers — must NOT clip the lift/shadow effect */
.np-entry-content figure,
.np-entry-content .wp-block-image,
.np-entry-content .wp-block-gallery,
.np-entry-content .wp-caption {
    margin-top:    var(--np-single-img-mt, 1.5em);
    margin-bottom: var(--np-single-img-mb, 1.5em);
    margin-left:   var(--np-single-img-ml, 0px);
    margin-right:  var(--np-single-img-mr, 0px);
    overflow: visible; /* do NOT use overflow:hidden — clips lift transform */
}

/* Gutenberg image block styles */
.np-entry-content .wp-block-image { text-align: center; }
.np-entry-content .wp-block-image img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: var(--np-single-img-radius, var(--np-radius));
}
/* Gutenberg alignment classes */
.np-entry-content .wp-block-image.alignleft  { float: left;  margin-right: 1.5em; }
.np-entry-content .wp-block-image.alignright { float: right; margin-left:  1.5em; }
.np-entry-content .wp-block-image.aligncenter,
.np-entry-content .wp-block-image.alignwide,
.np-entry-content .wp-block-image.alignfull  { float: none; margin-left: auto; margin-right: auto; }

/* Image captions — Gutenberg and classic */
.np-entry-content .wp-element-caption,
.np-entry-content figcaption,
.np-entry-content .wp-caption-text {
    font-size: .8125rem;
    color: var(--np-text-muted);
    margin-top: .4em;
    text-align: center;
    font-style: italic;
    line-height: 1.4;
}

/* Clearfix after floated images */
.np-entry-content::after { content: ''; display: table; clear: both; }

/* Share buttons */
.np-share {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    padding: 1rem 0;
    border-top: 1px solid var(--np-border);
    margin-top: 1.5rem;
}
.np-share-label { font-family: var(--np-font-heading); font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
/* Unified base — applies to both <a> and <button> */
.np-share-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4em .85em;
    border-radius: var(--np-radius);
    font-size: .8125rem;
    font-weight: 700;
    font-family: inherit;
    color: #fff;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    line-height: 1.4;
    transition: opacity .15s;
}
.np-share-btn:hover { opacity: .82; color: #fff; }
.np-fb   { background: #1877f2; }
.np-tw   { background: #1da1f2; }
.np-wa   { background: #25d366; }
.np-li   { background: #0a66c2; }
.np-copy { background: #64748b; }

/* Tags */
.np-post-tags { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.np-post-tags .np-tag-label { font-family: var(--np-font-heading); font-size: .75rem; font-weight: 700; color: var(--np-text-muted); }
.np-tag {
    display: inline-block;
    padding: .3em .7em;
    border: 1px solid var(--np-border);
    border-radius: 2px;
    font-size: .75rem;
    color: var(--np-text-muted);
}
.np-tag:hover { background: var(--np-primary); border-color: var(--np-primary); color: #fff; text-decoration: none; }

/* Author Box */
.np-author-box {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--np-border);
    border-radius: var(--np-radius);
    margin: 2rem 0;
    background: var(--np-bg-alt);
}
.np-author-box img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.np-author-box h4 { font-size: 1rem; margin-bottom: .25rem; }
.np-author-box p { font-size: .875rem; color: var(--np-text-muted); margin: 0; }

/* Related Posts */
.np-related { margin: 2rem 0; }

/* ============================================================
   PAGINATION
   ============================================================ */
.np-pagination,
.navigation.pagination .nav-links {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
    justify-content: center;
    margin: 2rem 0;
    list-style: none;
    padding: 0;
}

/* Individual page numbers — .np-pagination uses <a>/<span>, WP native uses .page-numbers */
.np-pagination a,
.np-pagination span,
.navigation.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 .75em;
    border: 1px solid var(--np-border);
    border-radius: var(--np-radius);
    font-family: var(--np-font-heading);
    font-size: .8125rem;
    font-weight: 700;
    color: var(--np-text);
    text-decoration: none;
    line-height: 1;
    transition: background .15s, color .15s, border-color .15s;
}
.np-pagination a:hover,
.navigation.pagination .page-numbers:hover {
    background: var(--np-primary);
    border-color: var(--np-primary);
    color: #fff;
    text-decoration: none;
}
.np-pagination .current,
.navigation.pagination .page-numbers.current {
    background: var(--np-primary);
    border-color: var(--np-primary);
    color: #fff;
}
.np-pagination .dots,
.navigation.pagination .page-numbers.dots {
    border-color: transparent;
    background: none;
    pointer-events: none;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.np-sidebar { min-width: 0; }
.np-widget {
    background: var(--np-bg);
    border: 1px solid var(--np-border);
    border-radius: var(--np-radius);
    padding: 1.1rem;
    margin-bottom: 1.5rem;
}
.np-widget { font-size: var(--np-font-size-widget, 14px); }
.np-widget-title {
    font-family: var(--np-font-heading);
    font-size: .875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--np-text);
    margin-bottom: .9rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--np-primary);
}
.np-widget ul { list-style: none; padding: 0; margin: 0; }
.np-widget ul li { border-bottom: 1px solid var(--np-border); }
.np-widget ul li:last-child { border-bottom: 0; }
.np-widget ul li a { display: block; padding: .45rem 0; font-size: .875rem; color: var(--np-text); }
.np-widget ul li a:hover { color: var(--np-primary); text-decoration: none; }

/* ============================================================
   COMMENTS
   ============================================================ */
.np-comments-area { margin-top: 2.5rem; }
.np-comments-title { font-size: 1.25rem; margin-bottom: 1.5rem; }
.comment-list { list-style: none; padding: 0; }
.comment { padding: 1rem 0; border-bottom: 1px solid var(--np-border); }
.comment .children { margin-left: 2rem; list-style: none; border-left: 2px solid var(--np-border); padding-left: 1rem; }
.comment-meta { display: flex; gap: .75rem; align-items: center; margin-bottom: .5rem; font-size: .8125rem; color: var(--np-text-muted); }
.comment-author img { width: 40px; height: 40px; border-radius: 50%; }
.comment-body p { font-size: .9rem; margin-bottom: .5rem; }
.reply a { font-size: .75rem; color: var(--np-primary); }

.np-comment-form { margin-top: 2rem; }
.np-comment-form h3 { font-size: 1.1rem; margin-bottom: 1rem; }
.np-comment-form label { display: block; font-size: .8125rem; font-weight: 700; margin-bottom: .25rem; }
.np-comment-form input[type="text"],
.np-comment-form input[type="email"],
.np-comment-form input[type="url"],
.np-comment-form textarea {
    width: 100%;
    padding: .6em .9em;
    border: 1px solid var(--np-border);
    border-radius: var(--np-radius);
    font-family: var(--np-font-body);
    font-size: .9rem;
    margin-bottom: 1rem;
    background: var(--np-bg);
    color: var(--np-text);
}
.np-comment-form input:focus,
.np-comment-form textarea:focus { outline: 2px solid var(--np-primary); border-color: transparent; }
.np-comment-form textarea { min-height: 140px; resize: vertical; }
.np-btn {
    background: var(--np-primary);
    color: #fff;
    border: 0;
    padding: .65em 1.5em;
    border-radius: var(--np-radius);
    font-family: var(--np-font-heading);
    font-weight: 700;
    font-size: .9rem;
    cursor: pointer;
    transition: opacity .2s;
}
.np-btn:hover { opacity: .85; }
.np-btn-secondary { background: var(--np-secondary); }

/* ============================================================
   FOOTER
   ============================================================ */
.np-footer {
    background: var(--np-footer-bg);
    color: var(--np-footer-text);
    margin-top: auto;
}
.np-footer-top { padding: 3rem 0 2rem; }
.np-footer-widgets {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}
.np-footer-cols-1 { grid-template-columns: 1fr; }
.np-footer-cols-2 { grid-template-columns: repeat(2, 1fr); }
.np-footer-cols-3 { grid-template-columns: repeat(3, 1fr); }
.np-footer-cols-4 { grid-template-columns: repeat(4, 1fr); }
.np-footer-widget .np-widget-title,
.np-footer-widget h3 {
    font-family: var(--np-font-heading);
    font-size: .875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #fff;
    margin-bottom: .9rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--np-primary);
}
/* Footer widgets: reset box styling — dark bg handles visual grouping */
.np-footer-widget .np-widget {
    background: transparent;
    border: none;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 0;
}

.np-footer-widget ul { list-style: none; padding: 0; margin: 0; }
.np-footer-widget ul li { border-bottom: 1px solid rgba(255,255,255,.08); }
.np-footer-widget ul li:last-child { border-bottom: 0; }
.np-footer-widget ul li a { display: block; padding: .4rem 0; font-size: .8125rem; color: var(--np-footer-text); opacity: .8; }
.np-footer-widget ul li a:hover { opacity: 1; color: #fff; text-decoration: none; }
.np-footer-widget p { font-size: .8125rem; color: var(--np-footer-text); opacity: .7; }

.np-footer-bottom {
    border-top: 1px solid rgba(255,255,255,.1);
    padding: 1rem 0;
}
.np-footer-bottom .np-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: .75rem;
    color: var(--np-footer-text);
    opacity: .7;
    flex-wrap: wrap;
}
.np-footer-bottom a { color: var(--np-footer-text); opacity: .9; }
.np-footer-bottom a:hover { opacity: 1; }
.np-footer-social { display: flex; gap: .75rem; }
.np-footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; font-size: .8rem; opacity: 1; }
.np-footer-social a:hover { background: var(--np-primary); }

/* Footer horizontal nav — targets any ul WP outputs */
.np-footer-bottom nav ul,
.np-footer-bottom .np-footer-nav {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: .25rem 0;
    align-items: center;
    justify-content: center;
}
.np-footer-bottom nav ul li,
.np-footer-bottom .np-footer-nav li { display: inline-flex; align-items: center; }
.np-footer-bottom nav ul li + li::before,
.np-footer-bottom .np-footer-nav li + li::before {
    content: '·';
    margin: 0 .5rem;
    color: var(--np-footer-text);
    opacity: .4;
}
.np-footer-bottom nav a,
.np-footer-bottom .np-footer-nav a {
    font-size: .75rem;
    color: var(--np-footer-text);
    opacity: .8;
    white-space: nowrap;
    text-decoration: none;
}
.np-footer-bottom nav a:hover,
.np-footer-bottom .np-footer-nav a:hover { opacity: 1; color: #fff; }

/* Load more wrap */
.np-load-more-wrap { text-align: center; margin: 1.5rem 0; }

/* ============================================================
   DARK MODE
   ============================================================ */
.np-dark-mode {
    --np-text:       #e0e0e0;
    --np-text-muted: #9e9e9e;
    --np-bg:         #121212;
    --np-bg-alt:     #1e1e1e;
    --np-border:     #2c2c2c;
    --np-header-bg:  #1a1a1a;
    color-scheme: dark;
}

/* ============================================================
   UTILITY
   ============================================================ */
.np-text-primary { color: var(--np-primary) !important; }
.np-bg-primary   { background: var(--np-primary) !important; }
.np-mt-1 { margin-top: .5rem; }
.np-mt-2 { margin-top: 1rem; }
.np-mb-1 { margin-bottom: .5rem; }
.np-mb-2 { margin-bottom: 1rem; }
.np-flex   { display: flex; }
.np-hidden { display: none !important; }

/* Loading Skeleton */
.np-skeleton { background: linear-gradient(90deg, var(--np-bg-alt) 25%, var(--np-border) 50%, var(--np-bg-alt) 75%); background-size: 200%; animation: np-skeleton 1.5s infinite; border-radius: var(--np-radius); }
@keyframes np-skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.np-breadcrumbs {
    margin: .75rem 0 1rem;
    font-size: .8125rem;
    color: var(--np-text-muted);
}
.np-breadcrumbs ol {
    list-style: none !important;
    counter-reset: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
}
.np-breadcrumbs ol li {
    list-style: none !important;
    display: flex !important;
    align-items: center;
    padding: 0 !important;
    margin: 0 !important;
}
/* Remove any auto-generated counters or markers */
.np-breadcrumbs ol li::marker,
.np-breadcrumbs ol li::-webkit-details-marker {
    display: none !important;
    content: '' !important;
}
.np-breadcrumbs a {
    color: var(--np-text-muted);
}
.np-breadcrumbs a:hover {
    color: var(--np-primary);
    text-decoration: none;
}
.np-breadcrumbs [aria-current="page"] {
    color: var(--np-text);
    font-weight: 600;
}
.np-bc-sep {
    margin: 0 .4em;
    color: var(--np-border);
}

/* Reading progress bar */
#np-read-progress {
    position: fixed; top: 0; left: 0; height: 3px;
    background: var(--np-primary);
    z-index: 9999; width: 0;
    transition: width .1s linear;
}

/* Back to top */
#np-back-top {
    position: fixed;
    bottom: var(--np-btt-bottom, 24px);
    right: var(--np-btt-right, 24px);
    z-index: 500;
    width: var(--np-btt-size, 40px);
    height: var(--np-btt-size, 40px);
    background: var(--np-btt-bg, var(--np-primary));
    color: var(--np-btt-color, #fff);
    border: 0;
    border-radius: var(--np-btt-radius, 50px);
    cursor: var(--np-btt-cursor, pointer);
    display: flex; /* always flex — visibility via opacity+pointer-events */
    align-items: center;
    justify-content: center;
    font-size: var(--np-btt-icon, 18px);
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .25s, transform .25s;
}
#np-back-top.np-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .np-footer-widgets,
    .np-footer-cols-3,
    .np-footer-cols-4 { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
    .np-posts-grid.np-col-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    :root { --np-font-size: 15px; --np-sidebar-width: 100%; }

    .np-site-content,
    .np-site-content.np-left-sidebar {
        grid-template-columns: 1fr;
        grid-template-areas: "main" "sidebar";
    }
    .np-site-content.np-no-sidebar {
        grid-template-areas: "main";
    }

    .np-hero-grid { grid-template-columns: 1fr; }
    .np-hero-main { grid-row: span 1; }
    .np-hero-main img { height: 240px; }
    .np-hero-side img { height: 160px; }

    .np-posts-grid,
    .np-posts-grid.np-col-2,
    .np-posts-grid.np-col-3,
    .np-posts-grid.np-col-4 { grid-template-columns: 1fr 1fr; }

    .np-footer-widgets,
    .np-footer-cols-1,
    .np-footer-cols-2,
    .np-footer-cols-3,
    .np-footer-cols-4 { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
    .np-footer-top { padding: 2rem 0 1.5rem; }
    .np-footer-widget h3 { font-size: .8rem; }

    .np-header-inner { flex-wrap: wrap; }
    .np-header-search input[type="search"] { width: 160px; }

    /* ── Mobile Navigation ─────────────────────────────────────── */

    /* Show hamburger button */
    .np-menu-toggle { display: flex; }

    /* Show close button inside panel */
    .np-menu-close { display: flex; }

    /*
     * Off-canvas panel — slides in from the left.
     * IMPORTANT: positioned FIXED on the viewport, NOT inside .np-container.
     * This avoids the overflow:hidden clipping that was hiding the menu.
     *
     * Visibility is controlled by transform (not display:none) so:
     *  - CSS transitions work
     *  - Screen readers can find the element (visibility:hidden handles SR)
     *  - No CLS from display toggle
     */
    .np-nav-menu {
        /* Reset desktop flex-row */
        display: flex !important; /* override display:none from desktop hidden state */
        flex-direction: column;
        list-style: none;
        padding: 0; margin: 0;
        gap: 0;

        /* Fixed panel — escapes all overflow:hidden ancestors */
        position: fixed;
        top: 0;
        left: 0;
        width: min(85vw, 320px);
        height: 100dvh; /* dvh accounts for mobile browser chrome */
        height: 100vh;  /* fallback for older browsers */
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;

        background: var(--np-nav-bg);
        z-index: 9000; /* above overlay (399), header (100), everything */
        box-shadow: 4px 0 24px rgba(0,0,0,.3);
        padding-top: 60px; /* space for close button area at top */

        /* Hidden state — slid off to the left */
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform .28s cubic-bezier(.4,0,.2,1),
                    visibility 0s linear .28s; /* delay visibility so transition plays */
    }

    /* Open state — slide in */
    .np-nav-menu.np-open {
        transform: translateX(0);
        visibility: visible;
        transition: transform .28s cubic-bezier(.4,0,.2,1),
                    visibility 0s linear 0s; /* no delay when opening */
    }

    /* Each top-level item takes full width */
    .np-nav-menu > li {
        position: relative;
        border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .np-nav-menu > li:last-child { border-bottom: 0; }

    .np-nav-menu > li > a {
        display: flex;
        align-items: center;
        min-height: 52px;
        padding: 0 3rem 0 1.25rem; /* right padding for sub-toggle button */
        font-size: .9rem;
        border-bottom: none;
        letter-spacing: .04em;
    }

    /* Show sub-menu toggle buttons */
    .np-nav-menu .menu-item-has-children { position: relative; }
    .np-nav-menu .np-sub-toggle { display: flex; }

    /* Sub-menu — accordion style */
    .np-nav-menu .sub-menu {
        position: static;
        display: none;
        box-shadow: none;
        border-top: none;
        border-radius: 0;
        background: rgba(0,0,0,.2);
        min-width: 0;
        z-index: auto;
        padding: 0;
    }
    .np-nav-menu .menu-item-has-children.np-sub-open > .sub-menu {
        display: block;
    }
    .np-nav-menu .sub-menu li {
        border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .np-nav-menu .sub-menu li:last-child { border-bottom: 0; }
    .np-nav-menu .sub-menu li a {
        min-height: 46px;
        padding: 0 1.25rem 0 2rem;
        color: rgba(255,255,255,.85);
        font-size: .85rem;
        border-bottom: none;
        background: none;
    }
    .np-nav-menu .sub-menu li a:hover {
        background: rgba(255,255,255,.1);
        color: #fff;
    }
}

@media (max-width: 480px) {
    .np-posts-grid,
    .np-posts-grid.np-col-2,
    .np-posts-grid.np-col-4 { grid-template-columns: 1fr; }
    .np-footer-widgets,
    .np-footer-cols-1,
    .np-footer-cols-2,
    .np-footer-cols-3,
    .np-footer-cols-4 { grid-template-columns: 1fr !important; gap: 1rem; }
    .np-footer-top { padding: 1.5rem 0 1rem; }
    .np-footer-bottom .np-container { flex-direction: column; align-items: flex-start; gap: .5rem; }
    .np-footer-nav { gap: .2rem 0; }
    .np-footer-social { flex-wrap: wrap; }
    .np-topbar { display: none; }
}


/* ============================================================
   COOKIE CONSENT — HIDDEN STATE (mobile-safe override)
   ============================================================ */
.np-cookie-hidden,
#cookie-banner.np-cookie-hidden,
#cookie-preferences.np-cookie-hidden {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Cookie banner responsive CSS is now inline in cookie-consent.php */

/* Print */
@media print {
    .np-topbar, .np-main-nav, .np-secondary-nav, .np-sidebar, .np-footer, .np-share, .np-comments-area, #np-read-progress, #np-back-top { display: none !important; }
    .np-site-content { display: block; }
    body { font-size: 12pt; color: #000; }
    a { color: #000; }
}



/* ══════════════════════════════════════════════════════════════
   FEATURE: AUTHOR BOX (enhanced)
══════════════════════════════════════════════════════════════ */
.np-author-box {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    border: 1px solid var(--np-border, #e5e5e5);
    border-radius: 4px;
    padding: 1.25rem;
    margin: 2rem 0;
}
.np-author-box-avatar img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    flex-shrink: 0;
    display: block;
    object-fit: cover;
}
.np-author-info { flex: 1; min-width: 0; }
.np-author-box-label {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--np-text-muted);
    display: block;
    margin-bottom: .3rem;
}
.np-author-info h4 { margin: 0 0 .1rem; font-size: 1rem; font-weight: 700; }
.np-author-info h4 a { color: var(--np-text); text-decoration: none; }
.np-author-info h4 a:hover { color: var(--np-primary); }
.np-author-website { font-size: .8rem; color: var(--np-text-muted); display: block; margin-bottom: .4rem; }
.np-author-bio { font-size: .875rem; color: var(--np-text-muted); margin: 0 0 .5rem; line-height: 1.6; }
.np-author-social { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.np-author-social-link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .8rem;
    padding: .25rem .65rem;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 20px;
    text-decoration: none;
    color: var(--np-text);
    transition: background .15s, color .15s;
}
.np-author-social-link:hover { background: var(--np-primary); color: #fff; border-color: var(--np-primary); }
.np-author-posts-link {
    font-size: .8rem;
    color: var(--np-primary);
    text-decoration: none;
    font-weight: 600;
}
.np-author-posts-link:hover { text-decoration: underline; }
@media (max-width: 480px) {
    .np-author-box { flex-direction: column; align-items: center; text-align: center; }
    .np-author-social { justify-content: center; }
}



/* ══════════════════════════════════════════════════════════════
   FEATURE: ADVERTISEMENT SLOTS
══════════════════════════════════════════════════════════════ */
.np-ad-label {
    text-align: center;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--np-text-muted);
    margin-bottom: 4px;
}
.np-ad-slot {
    text-align: center;
    margin: 1.5rem auto;
    overflow: hidden;
}
.np-ad-in-article {
    padding: 1rem;
    background: var(--np-bg-alt);
    border-radius: var(--np-radius);
}




/* ══════════════════════════════════════════════════════════════
   FEATURE: SINGLE POST LAYOUTS
══════════════════════════════════════════════════════════════ */
/* Narrow reading layout */
.np-narrow .np-entry-content,
.np-narrow .np-single-header,
.np-narrow .np-featured-image,
.np-narrow .np-author-box,
.np-narrow .np-related,
.np-narrow .np-share {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

/* Banner hero strip (full bleed above container) */
.np-banner-hero-img {
    width: 100%;
    max-height: 480px;
    object-fit: cover;
    display: block;
    margin-bottom: 0;
}

/* Inset featured image */
.np-featured-inset {
    max-width: 840px;
    margin: 1.5rem auto 2rem;
    border-radius: var(--np-radius);
    overflow: hidden;
}
.np-featured-inset img { display: block; width: 100%; }

/* Full-width featured image (default) */
.np-featured-full { margin: 0 0 2rem; border-radius: var(--np-radius); overflow: hidden; }
.np-featured-full img { width: 100%; display: block; }

/* ══════════════════════════════════════════════════════════════
   FEATURE: ARCHIVE HEADER
══════════════════════════════════════════════════════════════ */
.np-archive-cover {
    width: 100%;
    height: 180px;
    background-size: cover;
    background-position: center;
    border-radius: var(--np-radius);
    margin-bottom: 1rem;
}
.np-archive-count {
    font-size: .85rem;
    color: var(--np-text-muted);
    margin: .3rem 0 0;
}

/* ══════════════════════════════════════════════════════════════
   FEATURE: MASONRY LAYOUT
══════════════════════════════════════════════════════════════ */
.np-posts-masonry {
    columns: 3;
    column-gap: 1.5rem;
}
.np-posts-masonry .np-card {
    break-inside: avoid;
    margin-bottom: 1.5rem;
}
@media (max-width: 900px) { .np-posts-masonry { columns: 2; } }
@media (max-width: 600px) { .np-posts-masonry { columns: 1; } }

/* ══════════════════════════════════════════════════════════════
   WIDGET STYLE VARIANTS
   Class applied to <body> — each targets .np-widget children
══════════════════════════════════════════════════════════════ */

/* ── Boxed (default) — border + background, already in base CSS ── */

/* ── Shadowed — lifted card, no border ── */
.np-widget-style-shadowed .np-widget {
    border: none;
    box-shadow: 0 4px 20px rgba(0,0,0,.10);
    background: var(--np-bg);
}

/* ── Flat — no border, no background, flush with page ── */
.np-widget-style-flat .np-widget {
    border: none;
    background: transparent;
    padding: 1rem 0;
    border-radius: 0;
    border-top: 2px solid var(--np-primary);
}

/* ── Minimal — no box at all, just the title and content ── */
.np-widget-style-minimal .np-widget {
    border: none;
    background: transparent;
    padding: 0 0 1.5rem;
    border-radius: 0;
}
.np-widget-style-minimal .np-widget-title {
    font-size: .95rem;
    font-weight: 700;
    border-bottom: 1px solid var(--np-border);
    padding-bottom: .5rem;
    margin-bottom: 1rem;
}

/* ══════════════════════════════════════════════════════════════
   WIDGET TITLE STYLE VARIANTS
══════════════════════════════════════════════════════════════ */

/* ── Underline (default) — colored bottom border, base CSS handles it ── */

/* ── Filled background — primary colour header bar ── */
.np-widget-title-background .np-widget-title {
    background: var(--np-primary);
    color: #fff;
    padding: .55rem .85rem;
    margin: -1.1rem -1.1rem 1rem;
    border-radius: var(--np-radius) var(--np-radius) 0 0;
    border-bottom: none;
}

/* ── Left border accent — clean left stripe ── */
.np-widget-title-left-border .np-widget-title {
    border-bottom: none;
    border-left: 4px solid var(--np-primary);
    padding-left: .75rem;
    background: transparent;
}

/* ── Plain text — no decoration ── */
.np-widget-title-plain .np-widget-title {
    border-bottom: none;
    text-transform: none;
    letter-spacing: 0;
    font-size: 1rem;
}

/* ══════════════════════════════════════════════════════════════
   FEATURE: SOCIAL SHARE — improved
══════════════════════════════════════════════════════════════ */
.np-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: 1rem 0;
    border-top: 1px solid rgba(0,0,0,.07);
    border-bottom: 1px solid rgba(0,0,0,.07);
    margin: 1.5rem 0;
}
.np-share-label { font-weight: 700; font-size: .85rem; margin-right: .25rem; }
.np-share a, .np-share button {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .4rem .9rem;
    border-radius: 20px;
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    border: 1.5px solid;
    cursor: pointer;
    transition: background .15s, color .15s;
    background: transparent;
}
.np-fb  { color: #1877f2; border-color: #1877f2; }
.np-tw  { color: #000;    border-color: #000;    }
.np-wa  { color: #25d366; border-color: #25d366; }
.np-li  { color: #0a66c2; border-color: #0a66c2; }
.np-copy{ color: var(--np-text); border-color: rgba(0,0,0,.2); }
.np-share a:hover, .np-share button:hover { background: currentColor; color: #fff !important; }
@media (max-width: 480px) { .np-share { gap: .35rem; } .np-share a, .np-share button { padding: .35rem .65rem; font-size: .75rem; } }


/* Single post meta */
.np-meta-updated { color: var(--np-text-muted); font-size: .8rem; }
.np-meta-author { display: flex; align-items: center; gap: .4rem; }
.np-author-avatar { border-radius: 50%; vertical-align: middle; }

/* ══════════════════════════════════════════════════════════════
   HOMEPAGE BUILDER
══════════════════════════════════════════════════════════════ */
.np-homepage-builder { display: flex; flex-direction: column; gap: var(--np-section-gap, 3rem); }
.np-home-section {
    width: 100%;
    margin-top:    var(--np-section-mt, 0px);
    margin-bottom: var(--np-section-mb, 0px);
}
.np-home-ad-row { text-align: center; padding: 1rem 0; }
.np-section-divider { border: none; border-top: 2px solid var(--np-primary); opacity: .15; margin: 0; }

/* Magazine block: 1 large + stacked list */
.np-magazine-block {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 1.5rem;
    align-items: start;
}
.np-magazine-main .np-card { height: 100%; }
.np-magazine-side { display: flex; flex-direction: column; gap: .75rem; }

/* Featured-list block: hero top + horizontal scrollable list */
.np-featured-list-block { display: flex; flex-direction: column; gap: 1rem; }
.np-featured-list-hero .np-card { max-width: 100%; }
.np-featured-list-rest {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .75rem;
}

/* List-style card */
.np-card-list {
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    padding: .6rem 0;
    border-bottom: 1px solid rgba(0,0,0,.06);
}
.np-card-list:last-child { border-bottom: none; }
.np-card-list-thumb {
    width: 90px;
    height: 68px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: calc( var(--np-radius) / 2 );
    display: block;
}
.np-card-list-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.np-card-list-body { flex: 1; min-width: 0; }
.np-card-list .np-card-title { font-size: var(--np-font-size-card-title, .95rem); margin: .2rem 0 .3rem; line-height: 1.3; }
.np-card-list .np-card-title a { color: var(--np-text); text-decoration: none; }
.np-card-list .np-card-title a:hover { color: var(--np-primary); }

/* Responsive magazine */
@media (max-width: 900px) {
    .np-magazine-block { grid-template-columns: 1fr; }
    .np-magazine-side { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
}
@media (max-width: 600px) {
    .np-magazine-side { grid-template-columns: 1fr; }
    .np-featured-list-rest { grid-template-columns: 1fr; }
}

/* Sticky sidebar */
#np-sidebar.np-sticky {
    position: sticky;
    top: 80px;
    align-self: flex-start;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    scrollbar-width: thin;
}

/* ============================================================
   STAY CONNECTED / SOCIAL COUNTER WIDGET
   ============================================================ */
.np-social-counter { display: flex; flex-direction: column; gap: .5rem; }
.np-social-counter-item {
    display: flex; align-items: center; gap: .75rem;
    padding: .6rem .75rem; border-radius: 4px; overflow: hidden;
    position: relative;
}
.np-social-counter-item::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: 4px;
}
.np-social-counter-item.np-sc-fb  { background: #f0f4ff; }
.np-social-counter-item.np-sc-fb::before  { background: #1877f2; }
.np-social-counter-item.np-sc-tw  { background: #f0faff; }
.np-social-counter-item.np-sc-tw::before  { background: #000; }
.np-social-counter-item.np-sc-yt  { background: #fff4f4; }
.np-social-counter-item.np-sc-yt::before  { background: #ff0000; }
.np-sc-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; }
.np-sc-fb .np-sc-icon { background: #1877f2; color: #fff; }
.np-sc-tw .np-sc-icon { background: #000; color: #fff; }
.np-sc-yt .np-sc-icon { background: #ff0000; color: #fff; }
.np-sc-icon svg { width: 14px; height: 14px; fill: currentColor; }
.np-sc-meta { flex: 1; min-width: 0; }
.np-sc-count { font-size: .95rem; font-weight: 700; line-height: 1; color: var(--np-text); }
.np-sc-label { font-size: .7rem; color: var(--np-text-muted); text-transform: uppercase; letter-spacing: .05em; }
.np-sc-btn {
    font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    padding: .3rem .6rem; border-radius: 3px; text-decoration: none; white-space: nowrap;
    flex-shrink: 0;
}
.np-sc-fb .np-sc-btn { background: #1877f2; color: #fff; }
.np-sc-tw .np-sc-btn { background: #000; color: #fff; }
.np-sc-yt .np-sc-btn { background: #ff0000; color: #fff; }
.np-sc-btn:hover { opacity: .85; }

/* ============================================================
   CATEGORY FILTER TABS (on sections)
   ============================================================ */
.np-section-tabs { display: flex; align-items: center; gap: .15rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.np-section-tab {
    font-size: .75rem; font-weight: 600; padding: .3rem .75rem;
    border: 1px solid var(--np-border, #e5e5e5); border-radius: 3px;
    cursor: pointer; background: #fff; color: var(--np-text-muted);
    text-decoration: none; transition: all .15s;
}
.np-section-tab:hover,
.np-section-tab.np-tab-active { background: var(--np-primary); color: #fff; border-color: var(--np-primary); }

/* ============================================================
   AD LABEL / ADVERTISEMENT NOTICE
   ============================================================ */
.np-ad-label {
    text-align: center; font-size: .65rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--np-text-muted);
    margin-bottom: .35rem; opacity: .7;
}
.np-widget.widget_np_ad_widget .np-ad-label,
.np-widget.widget_text .np-ad-label,
.np-ad-wrap { text-align: center; }
.np-ad-wrap .np-ad-label { margin-bottom: .5rem; }

/* ============================================================
   SECTION HEADING WITH SUB-TABS (Lifestyle News with All/Travel/etc)
   ============================================================ */
.np-section-heading-tabs {
    display: flex; align-items: center; gap: .5rem;
    border-bottom: 3px solid var(--np-border, #e5e5e5);
    margin-bottom: 1.25rem; flex-wrap: wrap;
}
.np-section-heading-tabs .np-section-title {
    font-size: .8rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: #fff; background: var(--np-primary);
    padding: .45rem .9rem; position: relative; top: 3px;
    white-space: nowrap;
}
.np-section-heading-tabs .np-tab-filters {
    display: flex; gap: 0; flex-wrap: wrap;
}
.np-section-heading-tabs .np-tab-filters a {
    font-size: .75rem; color: var(--np-text-muted); padding: .45rem .7rem;
    text-decoration: none; border-bottom: 3px solid transparent;
    position: relative; top: 3px; transition: color .15s;
    white-space: nowrap;
}
.np-section-heading-tabs .np-tab-filters a:hover,
.np-section-heading-tabs .np-tab-filters a.active { color: var(--np-primary); }
.np-section-heading-tabs .np-tab-filters .np-tabs-more {
    font-size: .75rem; color: var(--np-text-muted); padding: .45rem .5rem;
    cursor: pointer; position: relative; top: 3px;
}
.np-section-heading-tabs .np-view-all {
    margin-left: auto; font-size: .7rem; color: var(--np-text-muted);
    text-decoration: none; padding: .45rem 0; white-space: nowrap;
}
.np-section-heading-tabs .np-view-all:hover { color: var(--np-primary); }

/* ============================================================
   SECTION ROW PAGINATION (arrows on magazine sections)
   ============================================================ */
.np-section-footer {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: .75rem;
}
.np-section-pager { display: flex; gap: .25rem; }
.np-section-pager button {
    width: 26px; height: 26px; border: 1px solid var(--np-border, #ddd);
    background: #fff; cursor: pointer; display: flex; align-items: center;
    justify-content: center; font-size: .75rem; color: var(--np-text-muted);
    transition: all .15s; padding: 0;
}
.np-section-pager button:hover { background: var(--np-primary); color: #fff; border-color: var(--np-primary); }

/* ============================================================
   RELATED ARTICLES (2-col on single)
   ============================================================ */
.np-related { margin: 2rem 0; }
.np-related-heading {
    font-size: .8rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: #fff; background: var(--np-primary);
    padding: .45rem .9rem; display: inline-block;
    border-bottom: 3px solid var(--np-primary);
    margin-bottom: 1rem;
}
.np-related-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem;
}
@media (max-width: 600px) { .np-related-grid { grid-template-columns: 1fr; } }

/* ============================================================
   AUTHOR BOX (single post) — social links row
   ============================================================ */
.np-author-box-social { display: flex; gap: .5rem; margin-top: .6rem; }
.np-author-box-social a {
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--np-bg-alt); color: var(--np-text-muted); font-size: .7rem;
    text-decoration: none; transition: all .15s;
}
.np-author-box-social a:hover { background: var(--np-primary); color: #fff; }
.np-author-box-social svg { width: 12px; height: 12px; fill: currentColor; }

/* ============================================================
   NUMBERED LIST WIDGET (Most Popular)
   ============================================================ */
.np-numbered-posts { list-style: none; padding: 0; margin: 0; }
.np-numbered-posts li {
    display: flex; align-items: flex-start; gap: .75rem;
    padding: .75rem 0; border-bottom: 1px solid var(--np-border, #f0f0f0);
}
.np-numbered-posts li:last-child { border-bottom: none; }
.np-numbered-posts .np-num {
    font-size: 1.4rem; font-weight: 900; line-height: 1;
    color: var(--np-border, #e0e0e0); flex-shrink: 0; width: 24px;
    text-align: right; font-family: var(--np-font-heading);
}
.np-numbered-posts .np-num-thumb {
    width: 72px; height: 54px; object-fit: cover; flex-shrink: 0; border-radius: 3px;
}
.np-numbered-posts .np-num-body { flex: 1; min-width: 0; }
.np-numbered-posts .np-num-title {
    font-size: .825rem; font-weight: 600; line-height: 1.4;
    margin: 0 0 .2rem; color: var(--np-text);
}
.np-numbered-posts .np-num-title a { color: inherit; text-decoration: none; }
.np-numbered-posts .np-num-title a:hover { color: var(--np-primary); }
.np-numbered-posts .np-num-date { font-size: .7rem; color: var(--np-text-muted); }
.np-numbered-posts .np-load-more-link {
    display: block; text-align: center; margin-top: .5rem;
    font-size: .75rem; padding: .4rem; border: 1px solid var(--np-border, #ddd);
    color: var(--np-text-muted); text-decoration: none; transition: all .15s;
}
.np-numbered-posts .np-load-more-link:hover { border-color: var(--np-primary); color: var(--np-primary); }

/* ============================================================
   FOOTER — logo + about + follow columns
   ============================================================ */
.np-footer-logo-col img,
.np-footer-logo-col .np-footer-logo-text {
    max-width: 160px; height: auto; display: block; margin-bottom: .75rem;
}
.np-footer-logo-text { font-size: 1.4rem; font-weight: 900; color: #fff; text-decoration: none; }
.np-footer-about { font-size: .825rem; line-height: 1.6; color: rgba(255,255,255,.65); }
.np-footer-contact { font-size: .8rem; margin-top: .5rem; color: rgba(255,255,255,.5); }
.np-footer-contact a { color: var(--np-primary); }
.np-footer-social-icons { display: flex; gap: .4rem; margin-top: .75rem; }
.np-footer-social-icons a {
    width: 32px; height: 32px; border-radius: 3px;
    display: flex; align-items: center; justify-content: center;
    font-size: .7rem; font-weight: 700; text-decoration: none; color: #fff;
}
.np-footer-social-icons .np-fsi-fb { background: #1877f2; }
.np-footer-social-icons .np-fsi-tw { background: #000; }
.np-footer-social-icons .np-fsi-ig { background: #e1306c; }
.np-footer-social-icons .np-fsi-yt { background: #ff0000; }
.np-footer-social-icons a:hover { opacity: .8; }

/* Popular Category widget in footer */
.np-popular-cats { list-style: none; padding: 0; margin: 0; }
.np-popular-cats li {
    display: flex; justify-content: space-between; align-items: center;
    padding: .5rem 0; border-bottom: 1px solid rgba(255,255,255,.08);
    font-size: .825rem;
}
.np-popular-cats li:last-child { border-bottom: none; }
.np-popular-cats a { color: rgba(255,255,255,.75); text-decoration: none; }
.np-popular-cats a:hover { color: #fff; }
.np-popular-cats .np-cat-count { color: rgba(255,255,255,.4); font-size: .75rem; }

/* ============================================================
   FOOTER INFO ROW (logo + about + follow us)
   ============================================================ */
.np-footer-info-row {
    background: var(--np-footer-bg, #1a1a2e);
    padding: 2.5rem 0 2rem;
    border-top: 1px solid rgba(255,255,255,.08);
}
.np-footer-info-cols {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    align-items: start;
}
.np-footer-col-title {
    font-size: .8rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: rgba(255,255,255,.5);
    margin: 0 0 .75rem;
}
@media (max-width: 700px) {
    .np-footer-info-cols { grid-template-columns: 1fr; }
}

/* Make footer top widget headings match the section badge style */
.np-footer-widget .np-widget-title {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: .35rem .75rem;
    background: transparent;
    color: rgba(255,255,255,.9);
    border-bottom: 2px solid rgba(255,255,255,.15);
    margin-bottom: .75rem;
}

/* "- Advertisement -" label in sidebar widgets */
.np-widget-ad-label {
    text-align: center;
    font-size: .65rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--np-text-muted);
    opacity: .7;
    display: block;
    margin-bottom: .4rem;
}

/* VK icon */
.np-footer-social-icons .np-fsi-vk { background: #4c75a3; }

/* ============================================================
   RECENT COMMENTS WIDGET STYLING
   ============================================================ */
.np-widget.widget_recent_comments ul { list-style: none; padding: 0; margin: 0; }
.np-widget.widget_recent_comments li {
    padding: .55rem 0; border-bottom: 1px solid var(--np-border, #f0f0f0);
    font-size: .825rem; line-height: 1.5;
}
.np-widget.widget_recent_comments li:last-child { border-bottom: none; }
.np-widget.widget_recent_comments .comment-author-link { font-weight: 600; }
.np-widget.widget_recent_comments a { color: var(--np-text); text-decoration: none; }
.np-widget.widget_recent_comments a:hover { color: var(--np-primary); }

/* ============================================================
   PREV / NEXT POST NAVIGATION (single)
   ============================================================ */
.np-post-nav {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 1rem; margin: 2rem 0;
    border-top: 1px solid var(--np-border, #e5e5e5);
    padding-top: 1.25rem;
}
.np-post-nav-item { display: flex; flex-direction: column; gap: .25rem; }
.np-post-nav-item.np-prev { align-items: flex-start; }
.np-post-nav-item.np-next { align-items: flex-end; text-align: right; }
.np-post-nav-label {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .1em;
    color: var(--np-text-muted); font-weight: 600;
}
.np-post-nav-title {
    font-size: .9rem; font-weight: 600; line-height: 1.4;
    color: var(--np-text); text-decoration: none;
}
.np-post-nav-title:hover { color: var(--np-primary); }
@media (max-width: 480px) {
    .np-post-nav { grid-template-columns: 1fr; }
    .np-post-nav-item.np-next { align-items: flex-start; text-align: left; }
}

/* ============================================================
   ARCHIVE PAGE — category card grid
   ============================================================ */
.np-archive-header { margin-bottom: 1.5rem; }
.np-archive-header h1 { font-size: 1.4rem; font-weight: 800; margin: 0 0 .25rem; }
.np-archive-header .np-archive-desc { font-size: .9rem; color: var(--np-text-muted); }

/* ============================================================
   COMPREHENSIVE MOBILE + LAYOUT FIX — v1.3.9
   Addresses: overflow, back-to-top overlap, sticky header offset,
   admin bar, TOC, share buttons, related grid, single post layout,
   typography scaling, tap targets, header/nav stacking.
   ============================================================ */

/* ── 1. SAFE AREA + ADMIN BAR OFFSET ───────────────────────── */
/* Sticky header respects WP admin bar */
.np-site-header.np-scrolled {
    box-shadow: 0 2px 16px rgba(0,0,0,.1);
}
.np-site-header.np-sticky {
    top: 0;
}
.admin-bar .np-site-header.np-sticky {
    top: 32px; /* WP admin bar desktop height */
}
@media screen and (max-width: 782px) {
    .admin-bar .np-site-header.np-sticky {
        top: 46px; /* WP admin bar mobile height */
    }
}
/* CSS variable for total offset — used by scroll-margin, TOC, etc. */
:root {
    --np-header-h:       60px;   /* approx header height */
    --np-scroll-offset:  72px;   /* header + a little breathing room */
    --np-btt-safe-right: max(24px, env(safe-area-inset-right, 24px));
    --np-btt-safe-bottom:max(24px, env(safe-area-inset-bottom, 24px));
}
.admin-bar { --np-scroll-offset: 104px; } /* 32px bar + 72px header */
@media screen and (max-width: 782px) {
    .admin-bar { --np-scroll-offset: 118px; }
}

/* ── 2. BACK-TO-TOP — never overlaps content ────────────────── */
#np-back-top {
    /* Move to bottom-left on mobile so it never covers TOC / share */
    right:  var(--np-btt-safe-right);
    bottom: var(--np-btt-safe-bottom);
    /* Slightly smaller on mobile to reduce overlap footprint */
    width:  var(--np-btt-size, 44px);
    height: var(--np-btt-size, 44px);
    /* Stays above cookie banner (z 999999) but below modals */
    z-index: 600;
    /* Subtle border so it's visible on white backgrounds */
    box-shadow: 0 2px 12px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.15);
    /* Hardware-accelerate the show/hide */
    will-change: transform, opacity;
    transition: opacity .2s, transform .2s;
    transform: translateY(0);
}
#np-back-top:not(.np-visible) {
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
}
/* On narrow phones move to left side to clear right-side share stack */
@media (max-width: 480px) {
    #np-back-top {
        right: auto;
        left:  max(16px, env(safe-area-inset-left, 16px));
        bottom: max(80px, env(safe-area-inset-bottom, 80px)); /* above cookie banner */
    }
}

/* ── 3. STICKY HEADER STACKING ──────────────────────────────── */
/* Header and nav form a single sticky unit without overlap */
.np-site-header,
.np-main-nav {
    position: sticky;
    z-index: 400;
}
.np-site-header {
    top: 0;
    z-index: 401; /* header above nav */
}
.np-main-nav {
    top: 0; /* will naturally sit below header in DOM flow */
    z-index: 400;
}
.admin-bar .np-site-header { top: 32px; }
.admin-bar .np-main-nav    { top: 32px; }
@media screen and (max-width: 782px) {
    .admin-bar .np-site-header { top: 46px; }
    .admin-bar .np-main-nav    { top: 46px; }
}

/* ── 4. SCROLL-MARGIN FOR ANCHOR LINKS (TOC) ────────────────── */
/* Every heading in post content gets automatic offset so sticky header
   doesn't cover the target when a TOC link is clicked */
.np-entry-content h1,
.np-entry-content h2,
.np-entry-content h3,
.np-entry-content h4,
.np-entry-content h5,
.np-entry-content h6,
[id] {
    scroll-margin-top: var(--np-scroll-offset, 72px);
}

/* ── 5. CONTAINER & CONTENT WIDTH SYSTEM ───────────────────── */
/* Ensure container never causes horizontal scroll */
.np-container {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--np-container, 1200px);
    padding-inline: clamp(12px, 4vw, 24px); /* fluid padding — more on mobile */
}
/* All direct children of container box-size correctly */
.np-container > * {
    box-sizing: border-box;
    max-width: 100%;
}
/* Prevent any single element from pushing page width */
.np-site-content,
.np-main,
.np-sidebar,
.np-single-article,
.np-entry-content {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
}

/* ── 6. SINGLE POST TYPOGRAPHY & SPACING ────────────────────── */
/* Fluid type scale — improves readability on all screen sizes */
.np-single-title {
    font-size: clamp(1.35rem, 5vw, 2.5rem);
    line-height: 1.2;
    letter-spacing: -.02em;
    margin-bottom: .75rem;
    overflow-wrap: break-word;
}
.np-single-header { margin-bottom: 1.25rem; }

.np-entry-content {
    font-size: clamp(15px, 2.5vw, 18px);
    line-height: 1.75;
    /* Hyphenate long words on mobile */
    hyphens: auto;
    -webkit-hyphens: auto;
}
.np-entry-content p   { margin-bottom: 1.25em; }
.np-entry-content h2  { font-size: clamp(1.2rem, 3.5vw, 1.6rem); margin-top: 2em; margin-bottom: .6em; }
.np-entry-content h3  { font-size: clamp(1.05rem, 3vw, 1.3rem);  margin-top: 1.75em; margin-bottom: .5em; }
.np-entry-content ul,
.np-entry-content ol  { padding-left: 1.4em; margin-bottom: 1.25em; }
.np-entry-content li  { margin-bottom: .4em; }

/* ── 7. TABLE OF CONTENTS (plugin-generated & theme) ───────── */
/* Target common TOC plugin wrappers */
.wp-block-table-of-contents,
.ez-toc-container,
.rank-math-toc,
.wp-toc,
[class*="table-of-contents"],
.np-toc {
    background: var(--np-bg-alt);
    border-left: 4px solid var(--np-primary);
    border-radius: 0 var(--np-radius) var(--np-radius) 0;
    padding: 1rem 1.25rem;
    margin: 1.5em 0;
    max-width: 100%;
    box-sizing: border-box;
    /* Keep below sticky header so title is always visible */
    scroll-margin-top: var(--np-scroll-offset, 72px);
}
/* TOC links — larger tap targets */
.ez-toc-list li a,
.rank-math-toc ul li a,
[class*="table-of-contents"] a,
.np-toc a {
    display: block;
    padding: .3em .1em;
    min-height: 36px;
    display: flex;
    align-items: center;
    font-size: .9rem;
    text-decoration: none;
    color: var(--np-text);
    border-radius: 3px;
}
.ez-toc-list li a:hover,
.rank-math-toc ul li a:hover,
[class*="table-of-contents"] a:hover,
.np-toc a:hover {
    color: var(--np-primary);
    text-decoration: underline;
}

/* ── 8. SHARE BUTTONS — mobile-safe ────────────────────────── */
.np-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: 1rem 0;
    border-top: 1px solid var(--np-border);
    margin-top: 1.5rem;
    /* Ensure share area is clear of floating back-to-top */
    padding-right: 0;
}
.np-share-btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .45em .9em;
    border-radius: var(--np-radius, 4px);
    font-size: .8125rem;
    font-weight: 700;
    min-height: 44px; /* WCAG tap target */
    white-space: nowrap;
    border: 1.5px solid currentColor;
    background: transparent;
    cursor: pointer;
    transition: background .15s, color .15s;
    text-decoration: none;
    box-sizing: border-box;
}
.np-share-btn:hover {
    opacity: .85;
}
@media (max-width: 480px) {
    .np-share { gap: .4rem; }
    .np-share-btn { font-size: .75rem; padding: .4em .7em; min-height: 40px; }
    .np-share-label { font-size: .75rem; width: 100%; margin-bottom: .2rem; }
}

/* ── 9. RELATED ARTICLES ────────────────────────────────────── */
.np-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    gap: 1.25rem;
    align-items: start; /* no stretching to equal height */
}
.np-related-item {
    display: flex;
    flex-direction: column;
    border-radius: var(--np-radius);
    overflow: hidden;
    background: var(--np-bg);
    border: 1px solid var(--np-border);
    height: 100%; /* consistent card height within row */
}
.np-related-item img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    object-position: center;
    display: block;
}
.np-related-item .np-related-content {
    padding: .75rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.np-related-item .np-card-title {
    font-size: .9375rem;
    line-height: 1.35;
    overflow-wrap: break-word;
}
@media (max-width: 480px) {
    .np-related-grid { grid-template-columns: 1fr; }
    .np-related-item img { aspect-ratio: 16/7; } /* slightly shorter on phones */
}

/* ── 10. FEATURED IMAGE — single post ───────────────────────── */
.np-featured-image {
    margin-bottom: var(--np-featured-img-mb, 1.5rem);
    border-radius: var(--np-radius);
    /* NO overflow:hidden — would clip float effect shadows */
}
.np-featured-image img {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: min(500px, 60vw); /* never taller than viewport width × 0.6 */
    object-fit: cover;
    border-radius: var(--np-radius);
    display: block;
}
figcaption,
.wp-element-caption,
.wp-caption-text {
    font-size: .8125rem;
    color: var(--np-text-muted);
    margin-top: .4em;
    text-align: center;
    font-style: italic;
    line-height: 1.5;
}

/* ── 11. HEADER + SEARCH BAR ────────────────────────────────── */
.np-header-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    padding-top: .75rem;
    padding-bottom: .75rem;
    min-height: 60px; /* prevent height jump while loading */
}
.np-site-branding { flex-shrink: 0; min-width: 0; }
.np-site-title    { font-size: clamp(1.1rem, 4vw, 1.75rem); }

/* Header search: collapse to icon on small screens */
@media (max-width: 600px) {
    .np-header-search input[type="search"] {
        width: clamp(90px, 28vw, 160px);
        font-size: .8125rem;
    }
    .np-header-search button { padding: .4em .6em; }
}
@media (max-width: 400px) {
    /* On very small screens, allow search to shrink further */
    .np-header-search input[type="search"] { width: 80px; }
}

/* ── 12. MOBILE MENU BAR STACKING ───────────────────────────── */
@media (max-width: 768px) {
    /* Nav bar must NOT overlap header — they stack in DOM order */
    .np-main-nav { position: static; } /* remove sticky on mobile — prevents overlap */
    /* Toggle button — safe spacing from edge */
    .np-menu-toggle {
        margin-inline-start: auto; /* push to far right */
    }
    /* Ensure the nav container doesn't clip the toggle */
    .np-main-nav .np-container {
        display: flex;
        align-items: center;
        min-height: 48px;
        padding-block: .5rem;
    }
}

/* ── 13. GENERAL MOBILE POLISH ──────────────────────────────── */
/* Prevent iOS font-boost from breaking layouts */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Improve readability on small screens */
@media (max-width: 480px) {
    body { font-size: 15px; }
    h1 { font-size: clamp(1.3rem, 7vw, 2rem); }
    h2 { font-size: clamp(1.1rem, 5.5vw, 1.5rem); }
    h3 { font-size: clamp(1rem, 4.5vw, 1.25rem); }

    .np-container { padding-inline: 14px; }
    .np-site-content { padding: 1.25rem 0; gap: 1.5rem; }

    /* Cards: single column, reasonable image height */
    .np-card-thumb { aspect-ratio: 16/8; } /* slightly shorter on phones */
    .np-card-body  { padding: .75rem; }

    /* Pagination — full-width tap targets */
    .np-pagination { gap: .4rem; justify-content: center; flex-wrap: wrap; }
    .np-pagination a,
    .np-pagination span { min-width: 40px; min-height: 40px; font-size: .875rem; }

    /* Section headings */
    .np-section-heading { margin-bottom: .75rem; }
    .np-section-heading h2 { font-size: 1rem; }
}

/* ── 14. SMOOTH ANCHOR SCROLLING ────────────────────────────── */
/* Smooth anchor scrolling — only when user has no reduced-motion preference */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    /* Do NOT set animation-duration globally — it breaks per-element animation:none overrides */
}


/* ============================================================
   NEW CUSTOMIZER CONTROLS — CSS WIRING  v1.5.3
   Logo, hero overlay, mobile settings, dropdown animation,
   disable-animations mode, sticky share, mobile card cols.
   ============================================================ */

/* ── Hero height + overlay ── */
.np-hero-main img {
    height: var(--np-hero-height, 400px);
}
.np-hero-main .np-post-overlay,
.np-hero-side .np-post-overlay {
    background: linear-gradient(
        transparent,
        rgba(0,0,0, var(--np-hero-overlay-opacity, 0.45)) 100%
    );
}

/* ── Dropdown animation styles ── */
.np-main-nav .sub-menu {
    transition: opacity .18s ease, transform .18s ease;
}
body.np-dropdown-slide .np-main-nav .sub-menu {
    transform-origin: top center;
    transform: scaleY(0.92) translateY(-6px);
    opacity: 0;
}
body.np-dropdown-slide .np-nav-menu > li:hover > .sub-menu,
body.np-dropdown-slide .np-nav-menu > li.np-sub-open > .sub-menu {
    transform: scaleY(1) translateY(0);
    opacity: 1;
}
body.np-dropdown-none .np-main-nav .sub-menu {
    transition: none !important;
}

/* ── Mobile settings ── */
@media (max-width: 480px) {
    /* Font scale */
    body { font-size: var(--np-mobile-font-scale, 94%); }

    /* Mobile logo size */
    .np-site-logo img { max-width: var(--np-mobile-logo-max-width, 140px); }

    /* Mobile card columns — 2-col option */
    body.np-mobile-cols-2 .np-posts-grid,
    body.np-mobile-cols-2 .np-posts-grid.np-col-2,
    body.np-mobile-cols-2 .np-posts-grid.np-col-3,
    body.np-mobile-cols-2 .np-posts-grid.np-col-4 {
        grid-template-columns: 1fr 1fr;
    }
    body.np-mobile-cols-2 .np-card-body { padding: .5rem; }
    body.np-mobile-cols-2 .np-card-title { font-size: .8rem; }

    /* Hide related posts on mobile when setting enabled */
    body.np-mobile-hide-related .np-related { display: none; }

    /* Disable float effects on touch */
    body.np-mobile-no-float .np-card:hover { transform: none; box-shadow: none; }
    body.np-mobile-no-float .np-card:hover .np-card-thumb img { transform: none; }
}

/* ── Disable all animations mode ── */
body.np-no-animations *,
body.np-no-animations *::before,
body.np-no-animations *::after {
    animation: none !important;
    transition: none !important;
}

/* ── Sticky share bar ── */
.np-sticky-share {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: .35rem;
    z-index: 200;
    padding: .5rem .35rem;
    background: var(--np-bg, #fff);
    border: 1px solid var(--np-border, #e0e0e0);
    border-right: 0;
    border-radius: var(--np-radius, 4px) 0 0 var(--np-radius, 4px);
    box-shadow: -2px 2px 12px rgba(0,0,0,.08);
}
.np-sticky-share a,
.np-sticky-share button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 4px;
    border: 1.5px solid currentColor;
    background: transparent;
    font-size: .7rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.np-sticky-share a:hover,
.np-sticky-share button:hover { opacity: .8; }
@media (max-width: 768px) { .np-sticky-share { display: none; } }

/* ── Footer ad zone ── */
.np-footer-ad {
    text-align: center;
    padding: 1rem 0;
    background: var(--np-bg-alt, #f5f5f5);
    border-bottom: 1px solid var(--np-border, #e0e0e0);
}
.np-footer-ad::before {
    content: attr(data-label);
    display: block;
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--np-text-muted, #9e9e9e);
    margin-bottom: .4rem;
}

/* ── In-content ad mobile hide ── */
body.np-hide-infeed-mobile .np-ad-infeed {
    display: none;
}
@media (min-width: 481px) {
    body.np-hide-infeed-mobile .np-ad-infeed { display: block; }
}

/* ============================================================
   AUTO TOC  v1.5.6
   ============================================================ */
.np-toc {
    background: var(--np-bg-alt, #f5f5f5);
    border: 1px solid var(--np-border, #e0e0e0);
    border-left: 4px solid var(--np-primary, #d32f2f);
    border-radius: 0 var(--np-radius, 4px) var(--np-radius, 4px) 0;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    max-width: 100%;
    scroll-margin-top: var(--np-scroll-offset, 72px);
}
.np-toc-title {
    font-family: var(--np-font-heading);
    font-size: .875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .6rem;
    color: var(--np-text);
}
.np-toc-list {
    margin: 0;
    padding-left: 1.25rem;
    font-size: .875rem;
    line-height: 1.6;
}
.np-toc-list ol { padding-left: 1.1rem; margin-top: .2rem; }
.np-toc-list li { margin-bottom: .2rem; }
.np-toc-list a {
    color: var(--np-text-muted, #757575);
    text-decoration: none;
    transition: color .12s;
    display: block;
    padding: .15em 0;
    min-height: 32px;
    display: flex;
    align-items: center;
}
.np-toc-list a:hover { color: var(--np-primary, #d32f2f); }
.np-toc-list a.np-toc-active {
    color: var(--np-primary, #d32f2f);
    font-weight: 700;
}

/* ============================================================
   HERO OVERLAY — use CSS var for dynamic color  v1.5.6
   ============================================================ */
.np-hero-main .np-post-overlay,
.np-hero-side .np-post-overlay {
    background: linear-gradient(
        transparent 30%,
        color-mix(in srgb, var(--np-hero-overlay-color, #000) calc(var(--np-hero-overlay-opacity, 0.45) * 100%), transparent) 100%
    );
    /* Fallback for browsers without color-mix */
}
/* Fallback gradient using rgba */
@supports not (color: color-mix(in srgb, black 50%, transparent)) {
    .np-hero-main .np-post-overlay,
    .np-hero-side .np-post-overlay {
        background: linear-gradient(transparent 30%, rgba(0,0,0,var(--np-hero-overlay-opacity, 0.45)) 100%);
    }
}

/* ============================================================
   MOBILE MENU OVERLAY STYLE  v1.5.6
   ============================================================ */
body.np-menu-overlay .np-nav-menu {
    width: 100% !important;
    background: rgba(0,0,0,.92) !important;
}
body.np-menu-overlay .np-nav-menu > li > a {
    font-size: 1.1rem;
    min-height: 60px;
    justify-content: center;
    letter-spacing: .05em;
}

/* ============================================================
   HERO AUTO-ROTATE  v1.5.6
   ============================================================ */
.np-hero-grid.np-hero-rotating {
    position: relative;
}
.np-hero-slide {
    transition: opacity .5s ease;
}
.np-hero-slide.np-slide-hidden {
    opacity: 0;
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
}
.np-hero-rotate-dots {
    position: absolute;
    bottom: .75rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: .4rem;
    z-index: 10;
}
.np-hero-rotate-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.5);
    border: 0;
    cursor: pointer;
    padding: 0;
    transition: background .2s, transform .2s;
}
.np-hero-rotate-dot.np-dot-active {
    background: #fff;
    transform: scale(1.3);
}

/* ============================================================
   HEADER EXTRAS — CTA button + layout presets  v1.5.8
   ============================================================ */

/* ── CTA Button ── */
.np-header-cta {
    display: inline-flex;
    align-items: center;
    padding: .45em 1.1em;
    font-family: var(--np-font-heading);
    font-size: .8125rem;
    font-weight: 700;
    border-radius: var(--np-radius, 4px);
    text-decoration: none;
    white-space: nowrap;
    transition: opacity .15s, background .15s, color .15s;
    flex-shrink: 0;
    letter-spacing: .03em;
}
.np-cta-filled {
    background: var(--np-primary, #d32f2f);
    color: #fff;
    border: 2px solid transparent;
}
.np-cta-filled:hover { opacity: .88; color: #fff; text-decoration: none; }

.np-cta-outlined {
    background: transparent;
    color: var(--np-primary, #d32f2f);
    border: 2px solid var(--np-primary, #d32f2f);
}
.np-cta-outlined:hover {
    background: var(--np-primary, #d32f2f);
    color: #fff;
    text-decoration: none;
}

.np-cta-pill {
    background: var(--np-primary, #d32f2f);
    color: #fff;
    border: 2px solid transparent;
    border-radius: 999px;
    padding: .45em 1.4em;
}
.np-cta-pill:hover { opacity: .88; color: #fff; text-decoration: none; }

/* ── Header layout presets ── */
/* Centered — logo + branding centered, search floats right */
.np-header-centered .np-header-inner {
    justify-content: center;
    text-align: center;
}
.np-header-centered .np-site-branding { margin: 0 auto; }
.np-header-centered .np-header-search { position: absolute; right: 0; }

/* Compact — smaller padding */
.np-header-compact .np-header-inner { min-height: 48px; padding-block: .375rem; }
.np-header-compact .np-site-title   { font-size: 1.2rem; }
.np-header-compact .np-site-tagline { display: none; }

/* Minimal — logo only, title and tagline hidden (unless custom logo not set) */
.np-header-minimal .np-site-name { display: none; }

/* ============================================================
   PANELS 5-9 WIRING  v1.6.1
   ============================================================ */

/* ── Link color ── */
a { color: var(--np-link, var(--np-primary)); }
a:hover { color: var(--np-link, var(--np-primary)); opacity: .82; }
.np-entry-content a { color: var(--np-link, var(--np-primary)); }

/* ── Card style variants ── */
.np-cards-shadow .np-card {
    border: none !important;
    box-shadow: var(--np-card-shadow, 0 4px 12px rgba(0,0,0,.08));
}
.np-cards-shadow .np-card:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,.13);
    transform: translateY(-2px);
}
.np-cards-flat .np-card {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}
.np-cards-filled .np-card {
    border: none !important;
    background: var(--np-bg-alt, #f5f5f5) !important;
    box-shadow: none !important;
}
/* .np-cards-border = default, uses existing border rules */

/* ── Container type: full width ── */
body.np-fullwidth .np-container {
    max-width: 100%;
    padding-inline: clamp(1rem, 3vw, 2.5rem);
}

/* ── Footer width: full ── */
body.np-footer-fullwidth .np-footer .np-container {
    max-width: 100%;
    padding-inline: clamp(1rem, 3vw, 2.5rem);
}

/* ── Post views counter ── */
.np-meta-views {
    font-size: .8125rem;
    color: var(--np-text-muted, #757575);
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

/* ── Mobile spacing vars ── */
@media (max-width: 768px) {
    .np-container {
        padding-inline: var(--np-mobile-container-px, 14px);
    }
    .np-posts-grid,
    .np-home-grid {
        gap: var(--np-mobile-card-gap, 12px);
    }
    .np-homepage-builder > * + * {
        margin-top: var(--np-mobile-section-gap, 24px);
    }
    .np-entry-content {
        padding-inline: var(--np-mobile-post-px, 0px);
    }
}