/*
Theme Name:  PritoX
Theme URI:   https://yoursite.com/pritox
Author:      Your Name
Author URI:  https://yoursite.com
Description: A fast, SEO-first WordPress article theme with built-in Bunny CDN, Google integrations, and AI-powered FAQ & quiz generation on publish.
Version:     1.94.51
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pritox
Tags:        blog, news, article, seo, cdn, ai, one-column, two-columns, custom-menu, featured-images, post-formats, sticky-post, threaded-comments

UPDATE RULE: Always upload to /wp-content/themes/pritox/ (same folder).
             Never create pritox-v2/, pritox-new/, or numbered sibling folders.
             Only bump the Version: line above on each release.
*/

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

:root {
    --color-primary:     #1a1a2e;
    --color-accent:      #7FB316;
    --color-accent-dark: #6A9A10;
    --color-accent-rgb:  127,179,22;
    --color-text:        #2d2d2d;
    --color-muted:       #6b7280;
    --color-border:      #e5e7eb;
    --color-bg:          #ffffff;
    --color-bg-alt:      #f9fafb;
    --color-bg-dark:     #111827;
    --font-sans:         'Noto Sans Devanagari', 'Inter', system-ui, -apple-system, sans-serif;
    --font-serif:        'Georgia', 'Times New Roman', serif;
    --font-mono:         'Fira Code', 'Courier New', monospace;
    --radius:            8px;
    --radius-lg:         12px;
    --shadow-sm:         0 1px 3px rgba(0,0,0,.08);
    --shadow-md:         0 4px 12px rgba(0,0,0,.10);
    --shadow-lg:         0 8px 24px rgba(0,0,0,.12);
    --max-width:         780px;
    --sidebar-width:     300px;
    --gap:               24px;
    --transition:        0.2s ease;
}

html { scroll-behavior: smooth; font-size: 16px; }

html, body { overflow-x: hidden; max-width: 100%; }

body {
    font-family: var(--font-sans);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

/* ===================================================================
   BLANK PAGE TEMPLATE (header-blank.php / footer-blank.php)
   Used by page-login.php and any other full-bleed template.
   =================================================================== */
body.pritox-blank-page {
    background: #eef0f4;
    min-height: 100vh;
}
body.pritox-blank-page .site-main {
    display: block;
}

/* ===================================================================
   TYPOGRAPHY
   =================================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-primary);
}

h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.35rem, 3vw, 1.875rem); }
h3 { font-size: clamp(1.15rem, 2.5vw, 1.5rem); }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }

p { margin-bottom: 1.25rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--color-accent); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-accent-dark); }

strong, b { font-weight: 700; }
em, i { font-style: italic; }
small { font-size: 0.875em; }
code { font-family: var(--font-mono); font-size: 0.875em; background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: 4px; padding: 0.1em 0.4em; }
pre { background: var(--color-primary); color: #e5e7eb; border-radius: var(--radius); padding: 1.25rem; overflow-x: auto; margin-bottom: 1.5rem; }
pre code { background: none; border: none; padding: 0; color: inherit; }
blockquote { border-left: 4px solid var(--color-accent); padding: 0.75rem 1.25rem; margin: 1.5rem 0; background: var(--color-bg-alt); border-radius: 0 var(--radius) var(--radius) 0; font-style: italic; color: var(--color-muted); }
ul, ol { padding-left: 1.5rem; margin-bottom: 1.25rem; }
li { margin-bottom: 0.35rem; }
hr { border: none; border-top: 1px solid var(--color-border); margin: 2rem 0; }
img { max-width: 100%; height: auto; display: block; }
.entry-content table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: 0.9rem; }
.entry-content th, .entry-content td { border: 1px solid var(--color-border); padding: 0.6rem 0.9rem; text-align: left; }
.entry-content th { background: var(--color-bg-alt); font-weight: 600; }
.entry-content tr:nth-child(even) td { background: var(--color-bg-alt); }

/* ===================================================================
   LAYOUT
   =================================================================== */
.site-wrapper { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { flex: 1; }

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--gap);
}

.content-area {
    display: grid;
    grid-template-columns: 1fr var(--sidebar-width);
    gap: 40px;
    align-items: stretch; /* sidebar column = article height; inner uses sticky */
    padding: 40px 0;
}

.content-area.no-sidebar {
    grid-template-columns: 1fr;
    max-width: var(--max-width);
    margin: 0 auto;
}

/* ===================================================================
   HEADER
   =================================================================== */
.site-header {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
    gap: var(--gap);
}

.site-branding { display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin-right: 24px; }
.site-branding a { color: var(--color-primary); font-size: 1.5rem; font-weight: 800; letter-spacing: -0.5px; }
.site-branding a:hover { color: var(--color-accent); }
/* the_custom_logo() with flex-height/flex-width doesn't crop the source
   image — without this, an oversized uploaded logo file renders at its
   full native pixel dimensions and can overflow/cover the page. */
.site-branding .custom-logo-link { display: flex; align-items: center; margin: 0; padding: 0; }
.site-branding .custom-logo { max-height: 44px; width: auto; height: auto; margin: 0; display: block; }
.site-description { font-size: 0.75rem; color: var(--color-muted); }

/* Nav */
.main-navigation { display: flex; align-items: center; gap: 4px; }
.main-navigation a { padding: 6px 12px; border-radius: var(--radius); color: var(--color-text); font-size: 0.9rem; font-weight: 500; transition: background var(--transition), color var(--transition); }
.main-navigation a:hover,
.main-navigation .current-menu-item > a { background: var(--color-bg-alt); color: var(--color-accent); }

.nav-toggle { display: none; background: none; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 8px 10px; cursor: pointer; font-size: 1.25rem; line-height: 1; color: var(--color-text); }

/* Search — centered */
.header-search { display: flex; align-items: center; flex: 1; justify-content: center; max-width: 400px; margin: 0 auto; }
.header-search form { display: flex; align-items: center; width: 100%; background: var(--color-bg-alt); border: 1.5px solid var(--color-border); border-radius: 24px; overflow: hidden; transition: border-color var(--transition), box-shadow var(--transition); }
.header-search form:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb,127,179,22),.1); }
.header-search input { flex: 1; border: none; background: transparent; padding: 8px 14px; font-size: 0.875rem; outline: none; color: var(--color-text); min-width: 0; }
.header-search input::placeholder { color: var(--color-muted); }
.header-search button { background: var(--color-accent); color: #fff; border: none; padding: 8px 14px; font-size: 1rem; cursor: pointer; transition: background var(--transition); flex-shrink: 0; line-height: 1; }
.header-search button:hover { background: var(--color-accent-dark); }

/* Login / Dashboard button */
.header-actions { display: flex; align-items: center; flex-shrink: 0; }
.header-login-btn { display: inline-flex; align-items: center; padding: 7px 18px; background: var(--color-accent); color: #fff !important; border-radius: 20px; font-size: 0.875rem; font-weight: 600; text-decoration: none; transition: background var(--transition), transform .1s; white-space: nowrap; }
.header-login-btn:hover { background: var(--color-accent-dark); transform: translateY(-1px); }

/* ===================================================================
   HERO / FEATURED
   =================================================================== */
.hero-post {
    background: linear-gradient(135deg, var(--color-primary) 0%, #2d2d4e 100%);
    color: #fff;
    padding: 60px 0;
    margin-bottom: 48px;
}

.hero-post .container { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.hero-content .post-categories { margin-bottom: 12px; }
.hero-content h1 { color: #fff; margin-bottom: 16px; }
.hero-content .excerpt { font-size: 1.05rem; opacity: 0.85; margin-bottom: 24px; }
.hero-image img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; object-fit: cover; aspect-ratio: 16/9; }

/* ===================================================================
   ARTICLE CARDS (archive/home)
   =================================================================== */
.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--gap);
    margin-bottom: 40px;
}

.post-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow var(--transition), transform var(--transition);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.post-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.post-card-thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--color-bg-alt); }
.post-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.post-card:hover .post-card-thumb img { transform: scale(1.04); }
.post-card-body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; }
.post-card-meta { display: flex; align-items: center; gap: 10px; font-size: 0.78rem; color: var(--color-muted); margin-bottom: 10px; }

.post-card-author {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--color-muted);
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
}
.post-card-author img { border-radius: 50%; width: 22px; height: 22px; }
.post-card-author .dot { opacity: 0.5; }
.post-card h2 { font-size: 1.1rem; line-height: 1.35; margin-bottom: 8px; }
.post-card h2 a { color: var(--color-primary); }
.post-card h2 a:hover { color: var(--color-accent); }
.post-card .excerpt { font-size: 0.875rem; color: var(--color-muted); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ===================================================================
   SINGLE ARTICLE
   =================================================================== */
.single-header { margin-bottom: 2rem; }
.single-header .post-categories { margin-bottom: 12px; }
.single-header h1 { margin-bottom: 1rem; }
.single-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; font-size: 0.85rem; color: var(--color-muted); padding-bottom: 1.25rem; border-bottom: 1px solid var(--color-border); margin-bottom: 1.5rem; }
.single-meta a { color: var(--color-muted); }
.single-meta a:hover { color: var(--color-accent); }
.reading-time { display: inline-flex; align-items: center; gap: 4px; }

.featured-image { border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 2rem; }
.featured-image img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; display: block; }
.featured-image figcaption { font-size: 0.8rem; color: var(--color-muted); text-align: center; padding: 8px 0; }

.entry-content { font-size: 1.05rem; line-height: 1.8; overflow-wrap: break-word; word-break: break-word; max-width: 100%; }

/* Headings — distinct sizes/weight inherited from the global h1-h6 rules
   above; this just adds article-appropriate spacing so they read as
   headings and not run-on paragraphs. */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 { margin: 2rem 0 0.75rem; }
.entry-content h1:first-child,
.entry-content h2:first-child,
.entry-content h3:first-child { margin-top: 0; }

.entry-content p { margin-bottom: 1.4rem; }
.entry-content p:last-child { margin-bottom: 0; }

/* Bold / italic — inherit weight/style from the global strong/b, em/i
   rules; explicitly re-affirmed here so nothing in this section can
   accidentally normalize them back to regular text. */
.entry-content strong,
.entry-content b { font-weight: 700; }
.entry-content em,
.entry-content i { font-style: italic; }

/* Links */
.entry-content a { text-decoration: underline; text-underline-offset: 3px; }

/* Lists — including nested lists, which the base ul/ol rule alone
   doesn't space correctly. */
.entry-content ul,
.entry-content ol { margin: 0 0 1.4rem; padding-left: 1.5rem; }
.entry-content li { margin-bottom: 0.5rem; }
.entry-content li > ul,
.entry-content li > ol { margin: 0.5rem 0 0; }
.entry-content li p { margin-bottom: 0.5rem; }

/* Blockquotes */
.entry-content blockquote { margin: 1.75rem 0; }
.entry-content blockquote p:last-child { margin-bottom: 0; }
.entry-content blockquote cite { display: block; margin-top: 0.5rem; font-style: normal; font-size: 0.85rem; color: var(--color-muted); }

/* Code & preformatted text */
.entry-content pre { margin-bottom: 1.5rem; white-space: pre-wrap; word-wrap: break-word; }
.entry-content code { word-break: break-word; }

/* Tables */
.entry-content table { margin: 0.5rem 0 1.75rem; display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.entry-content .wp-block-table { overflow-x: auto; margin-bottom: 1.75rem; max-width: 100%; }
.entry-content .wp-block-table table { margin-bottom: 0; display: table; }

/* Images, figures & captions */
.entry-content img { border-radius: var(--radius); margin: 1.5rem auto; max-width: 100% !important; width: auto; height: auto !important; display: block; }
/* Catch-all: nothing inside article content (embeds, shortcode wrappers,
   fixed-width divs pasted from elsewhere, twitter/instagram blockquotes,
   etc.) is allowed to force horizontal scroll on the page. Tables and
   pre/code keep their own overflow-x:auto scroll for content that
   genuinely needs it. */
.entry-content, .entry-content * { max-width: 100%; }
.entry-content table, .entry-content pre, .entry-content code { max-width: 100%; }
.entry-content figure { margin: 1.75rem 0; }
.entry-content figure img { margin: 0 auto; }
.entry-content figcaption,
.entry-content .wp-caption-text { text-align: center; font-size: 0.85rem; color: var(--color-muted); margin-top: 0.6rem; }

/* Horizontal rule / separator block */
.entry-content hr,
.entry-content .wp-block-separator { margin: 2rem 0; }

/* Gutenberg alignment classes — theme declares align-wide support, so
   make sure wide/full images and blocks actually break out of the
   ~780px reading column instead of silently doing nothing. */
.entry-content .alignleft { float: left; margin: 0.4rem 1.5rem 1rem 0; max-width: 50%; }
.entry-content .alignright { float: right; margin: 0.4rem 0 1rem 1.5rem; max-width: 50%; }
.entry-content .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.entry-content .alignwide { max-width: calc(var(--max-width) + 220px); margin-left: 50%; transform: translateX(-50%); width: 100%; }
.entry-content .alignfull { max-width: 100vw; margin-left: 50%; transform: translateX(-50%); width: 100vw; }
.entry-content .alignfull img { border-radius: 0; }

/* Buttons block */
.entry-content .wp-block-button__link {
    display: inline-block; padding: 0.65rem 1.4rem; border-radius: var(--radius);
    background: var(--color-accent); color: #fff; text-decoration: none; font-weight: 600;
}
.entry-content .wp-block-button__link:hover { background: var(--color-accent-dark); }

/* Columns block */
.entry-content .wp-block-columns { display: flex; flex-wrap: wrap; gap: 2rem; margin-bottom: 1.75rem; }
.entry-content .wp-block-column { flex: 1 1 0; min-width: 0; }

/* Embeds / iframes (video, etc.) stay responsive */
.entry-content .wp-block-embed__wrapper,
.entry-content iframe { max-width: 100%; }
.entry-content .wp-block-embed iframe { width: 100%; aspect-ratio: 16/9; height: auto; }

/* Table of Contents */
.toc-box {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    margin: 2rem 0;
}

.toc-box h3 { font-size: 0.95rem; margin-bottom: 0.75rem; color: var(--color-primary); }
.toc-box ol { padding-left: 1.25rem; margin: 0; }
.toc-box li { margin-bottom: 0.3rem; font-size: 0.9rem; }
.toc-box a { color: var(--color-text); text-decoration: none; }
.toc-box a:hover { color: var(--color-accent); }

/* Reading progress */
#reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: var(--color-accent);
    z-index: 9999;
    transition: width 0.1s linear;
}

/* ===================================================================
   CATEGORIES / BADGES
   =================================================================== */
.post-categories { display: flex; flex-wrap: wrap; gap: 6px; }
.cat-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 3px 10px;
    border-radius: 20px;
    background: var(--color-accent);
    color: #fff;
    transition: background var(--transition);
}
.cat-badge:hover { background: var(--color-accent-dark); color: #fff; }

/* ===================================================================
   AUTHOR BOX
   =================================================================== */
.author-box {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin: 2.5rem 0;
}

.author-avatar {
    flex: 0 0 auto;
    width: 90px;
    height: 90px;
    border-radius: 10px;
    overflow: hidden;
}
.author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.author-info h4 { margin: 0 0 6px; font-size: 1.1rem; color: var(--color-accent, #7FB316); }
.author-info h4 a { color: inherit; text-decoration: none; }
.author-info p { font-size: 0.875rem; color: var(--color-muted); margin: 0; }

/* ===================================================================
   FAQ SECTION (AI-generated)
   =================================================================== */
.pritox-faq {
    margin: 2.5rem 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.pritox-faq-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 1rem 1.25rem;
    background: var(--color-bg-alt);
    border-bottom: 1px solid var(--color-border);
}

.pritox-faq-header h3 { font-size: 1rem; margin: 0; color: var(--color-primary); }
.pritox-faq-badge { font-size: 0.7rem; background: var(--color-accent); color: #fff; padding: 2px 8px; border-radius: 20px; font-weight: 600; }

.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-item:last-child { border-bottom: none; }

.faq-question {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 1rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-primary);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    transition: background var(--transition);
}

.faq-question:hover { background: var(--color-bg-alt); }
.faq-question::after { content: '+'; font-size: 1.25rem; font-weight: 300; color: var(--color-muted); flex-shrink: 0; transition: transform var(--transition); }
.faq-item.open .faq-question::after { content: '−'; }

.faq-answer {
    display: none;
    padding: 0 1.25rem 1rem;
    font-size: 0.9rem;
    color: var(--color-muted);
    line-height: 1.7;
}

.faq-item.open .faq-answer { display: block; }

/* ===================================================================
   QUIZ SECTION (AI-generated)
   =================================================================== */
.pritox-quiz {
    margin: 2.5rem 0;
    background: linear-gradient(135deg, #f0f4ff 0%, #fff 100%);
    border: 1px solid #c7d2fe;
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    width: 100%;
    box-sizing: border-box;
}

.pritox-quiz-header { display: flex; align-items: center; gap: 10px; margin-bottom: 1.25rem; }
.pritox-quiz-header h3 { font-size: 1rem; margin: 0; color: var(--color-primary); flex: 1; }
.quiz-timer { display: none; align-items: center; gap: 5px; font-size: 0.88rem; font-weight: 700; color: var(--color-accent); background: rgba(220,38,38,0.08); border: 1px solid rgba(220,38,38,0.2); border-radius: 999px; padding: 3px 10px; white-space: nowrap; animation: quiz-timer-fadein 0.3s ease; }
.quiz-timer-icon { font-size: 0.95rem; }
.quiz-timer-display { font-variant-numeric: tabular-nums; letter-spacing: 0.03em; }
@keyframes quiz-timer-fadein { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
.pritox-sb-quiz-header-row { display: flex; justify-content: flex-end; margin-bottom: 6px; min-height: 26px; }
.sb-quiz-timer { display: none; align-items: center; gap: 5px; font-size: 0.82rem; font-weight: 700; color: var(--color-accent); background: rgba(220,38,38,0.08); border: 1px solid rgba(220,38,38,0.2); border-radius: 999px; padding: 2px 9px; white-space: nowrap; animation: quiz-timer-fadein 0.3s ease; }
.sb-quiz-timer-display { font-variant-numeric: tabular-nums; }

/* Progress bar */
.quiz-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 1.5rem; }
.quiz-progress-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--color-border); overflow: hidden; }
.quiz-progress-fill { height: 100%; width: 0%; background: var(--color-accent); border-radius: 999px; transition: width 0.3s ease; }
.quiz-progress-label { flex-shrink: 0; font-size: 0.8rem; font-weight: 600; color: var(--color-muted); white-space: nowrap; }

.quiz-question-block { margin-bottom: 0; }
.quiz-q { font-size: 0.95rem; font-weight: 600; color: var(--color-primary); margin-bottom: 0.75rem; }

.quiz-options { display: flex; flex-direction: column; gap: 8px; }
.quiz-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 0.875rem;
    transition: border-color var(--transition), background var(--transition);
}

.quiz-option:hover { border-color: var(--color-accent); background: #fff5f5; }
.quiz-option input[type="radio"] { accent-color: var(--color-accent); width: 18px; height: 18px; flex-shrink: 0; cursor: pointer; }
.quiz-option.correct input[type="radio"] { accent-color: #16a34a; }
.quiz-option.wrong   input[type="radio"] { accent-color: #dc2626; }
.quiz-option.correct { border-color: #16a34a; background: #f0fdf4; color: #166534; }
.quiz-option.wrong { border-color: #dc2626; background: #fef2f2; color: #991b1b; }
.quiz-option.is-locked { cursor: default; pointer-events: none; }
.quiz-option.is-locked:hover { background: var(--color-bg); }
.quiz-option.is-locked.correct:hover { background: #f0fdf4; }
.quiz-option.is-locked.wrong:hover { background: #fef2f2; }

.quiz-explanation { display: none; font-size: 0.85rem; color: var(--color-muted); margin-top: 10px; }

.quiz-feedback-row { display: flex; align-items: center; gap: 14px; margin-top: 1.25rem; flex-wrap: wrap; }
.quiz-feedback { font-size: 0.875rem; font-weight: 700; }
.quiz-feedback.is-correct { color: #166534; }
.quiz-feedback.is-wrong { color: #991b1b; }

.quiz-next {
    display: none;
    align-items: center;
    gap: 8px;
    color: #fff;
    border: none;
    border-radius: var(--radius);
    padding: 10px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition);
}
.quiz-next.is-correct { background: #16a34a; }
.quiz-next.is-correct:hover { background: #15803d; }
.quiz-next.is-wrong { background: var(--color-accent); }
.quiz-next.is-wrong:hover { background: var(--color-accent-dark); }

/* Results & review */
.quiz-score { font-size: 1.05rem; font-weight: 700; color: var(--color-primary); margin-bottom: 1.25rem; }
.quiz-review { display: flex; flex-direction: column; gap: 12px; margin-bottom: 1.5rem; }
.quiz-review-item {
    padding: 12px 14px;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    font-size: 0.875rem;
}
.quiz-review-item.is-correct { border-color: #16a34a; background: #f0fdf4; }
.quiz-review-item.is-wrong { border-color: #dc2626; background: #fef2f2; }
.quiz-review-q { font-weight: 600; color: var(--color-primary); margin-bottom: 6px; }
.quiz-review-a { color: var(--color-text); margin-bottom: 4px; }
.quiz-review-correct { color: #166534; font-weight: 600; }

.quiz-retake {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    padding: 10px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition);
}
.quiz-retake:hover { background: var(--color-accent-dark); }

/* ===================================================================
   HOMEPAGE HERO (tagline section)
   =================================================================== */
.pritox-homepage-hero {
    text-align: center;
    padding: 48px 0 28px;
    border-bottom: 1px solid var(--color-border);
}

.pritox-hero-badge {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-accent);
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 5px 14px;
    margin-bottom: 16px;
}

.pritox-hero-headline {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    margin-bottom: 10px;
}

.pritox-hero-subtitle {
    font-size: 1rem;
    color: var(--color-muted);
    max-width: 560px;
    margin: 0 auto;
}

/* ===================================================================
   CATEGORY / TOPIC PILLS — horizontal scroll strip
   =================================================================== */
.pritox-cat-pills-wrap {
    border-bottom: 1px solid var(--color-border);
    padding: 10px 0;
}

.pritox-cat-pills-outer {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pritox-cat-pills-scroll-btn {
    flex-shrink: 0;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--color-text);
    transition: background var(--transition), border-color var(--transition);
    padding: 0;
    line-height: 1;
}
.pritox-cat-pills-scroll-btn:hover { background: var(--color-bg-alt); border-color: var(--color-accent); color: var(--color-accent); }
.pritox-cat-pills-scroll-btn:disabled { opacity: 0.3; cursor: default; }

.pritox-cat-pills {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex: 1;
    min-width: 0;
}
.pritox-cat-pills::-webkit-scrollbar { display: none; }

.pritox-cat-pills-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-muted);
    white-space: nowrap;
    flex-shrink: 0;
    margin-right: 2px;
}

.pritox-pill {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text);
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 4px 14px;
    transition: all var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
}

.pritox-pill:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* ===================================================================
   HOMEPAGE LAYOUT (main + sidebar)
   =================================================================== */
.pritox-home-layout {
    display: grid;
    grid-template-columns: 1fr var(--sidebar-width);
    gap: 40px;
    align-items: stretch; /* sidebar column = article height; inner uses sticky */
    padding: 36px 0;
}

.pritox-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 8px 0 16px;
}

.pritox-section-head:not(:first-child) { margin-top: 36px; }

.pritox-section-head h2 { font-size: 1.15rem; margin: 0; }

.pritox-see-all {
    font-size: 0.85rem;
    font-weight: 500;
}

/* ===================================================================
   FEATURED POSTS GRID (2-column, homepage top)
   =================================================================== */
.pritox-featured-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
}

.pritox-recent-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
}

.pritox-featured-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow var(--transition);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.pritox-featured-card:hover { box-shadow: var(--shadow-md); }

.pritox-featured-thumb { display: block; aspect-ratio: 16/9; overflow: hidden; background: var(--color-bg-alt); }
.pritox-featured-thumb img { width: 100%; height: 100%; object-fit: cover; }

.pritox-featured-body { padding: 1.1rem 1.25rem 1.25rem; display: flex; flex-direction: column; flex: 1; }
.pritox-featured-body h3 { font-size: 1.15rem; margin: 10px 0 8px; }
.pritox-featured-body h3 a { color: var(--color-primary); }
.pritox-featured-body h3 a:hover { color: var(--color-accent); }
.pritox-featured-body .excerpt { font-size: 0.875rem; color: var(--color-muted); line-height: 1.6; margin-bottom: 12px; }

.pritox-card-stats {
    margin-top: auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--color-muted);
}

.pritox-card-stats .dot { opacity: 0.5; }

.pritox-card-author,
.post-card-stats .pritox-card-author {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}
.pritox-card-author:hover { color: var(--color-accent); }
.pritox-card-author img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: block;
}

/* Re-use stats row style on standard grid cards too */
.post-card-stats {
    margin-top: auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--color-muted);
    margin-top: 10px;
}
.post-card-stats .dot { opacity: 0.5; }

/* ===================================================================
   HOMEPAGE SIDEBAR
   =================================================================== */
/* Sidebar column: always fills full article height — no white gap */
.pritox-home-sidebar {
    position: relative;
    align-self: stretch; /* column fills full article height = scroll track for inner */
}

/* Inner sticky wrapper: pins to viewport top, never taller than viewport */
.pritox-home-sidebar-inner {
    /* position & top set by JS: absolute while scrolling, pinned when bottom reached */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 0;
    height: fit-content;
    overflow: visible;
}
.sidebar-inner {
    position: sticky;
    top: 80px;
}


.pritox-sb-box {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin: 0 16px;   /* horizontal breathing room inside sidebar column */
}

.pritox-recent-grid .pritox-inline-subscribe {
    grid-column: 1 / -1;   /* full-width row in the 3-col recent grid */
    margin: 4px 0 0;
}

.pritox-sb-title { font-size: 0.92rem; font-weight: 700; margin: 0 0 14px; color: var(--color-primary); }

.pritox-popular-list { list-style: none; padding: 0; margin: 0; }
.pritox-popular-list li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.85rem;
}
.pritox-popular-list li:last-child { border-bottom: none; padding-bottom: 0; }

.pritox-popular-rank {
    font-weight: 700;
    color: var(--color-accent);
    font-size: 0.85rem;
    flex-shrink: 0;
    width: 16px;
}

.pritox-popular-list a { color: var(--color-text); line-height: 1.4; }
.pritox-popular-list a:hover { color: var(--color-accent); }

.pritox-topic-pills { display: flex; flex-wrap: wrap; gap: 6px; }

.pritox-subscribe-box {
    background: var(--color-bg-alt);
    border-color: var(--color-border);
}

.pritox-inline-subscribe { display: none; }

.pritox-subscribe-form { display: flex; flex-direction: column; gap: 8px; }
.pritox-subscribe-form input {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 9px 12px;
    font-size: 0.875rem;
    outline: none;
    font-family: inherit;
}
.pritox-subscribe-form input:focus { border-color: var(--color-accent); }
.pritox-subscribe-form button {
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    padding: 10px 16px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition);
}
.pritox-subscribe-form button:hover { background: var(--color-accent); }
.pritox-subscribe-form button:disabled { opacity: 0.6; cursor: not-allowed; }
.pritox-subscribe-msg { font-size: 0.8rem; margin-top: 8px; min-height: 1em; }


.pritox-ticker {
    display: flex;
    align-items: center;
    background: var(--color-primary);
    color: #fff;
    overflow: hidden;
    height: 42px;
}

.pritox-ticker-label {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    background: var(--color-accent);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0 16px;
    height: 100%;
}

.pritox-ticker-track-wrap {
    flex: 1;
    overflow: hidden;
    position: relative;
    height: 100%;
}

.pritox-ticker-track {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
    white-space: nowrap;
    animation: pritox-marquee 35s linear infinite;
    will-change: transform;
}

.pritox-ticker-track li {
    flex-shrink: 0;
    padding: 0 28px;
    position: relative;
}

.pritox-ticker-track li::after {
    content: '•';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.3);
}

.pritox-ticker-track a {
    color: #fff;
    font-size: 0.85rem;
    font-weight: 500;
}

.pritox-ticker-track a:hover { color: var(--color-accent); }

.pritox-ticker:hover .pritox-ticker-track,
.pritox-ticker:focus-within .pritox-ticker-track {
    animation-play-state: paused;
}

@keyframes pritox-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .pritox-ticker-track {
        animation: none;
        overflow-x: auto;
    }
}


/* Mobile quiz slot — hidden on desktop, visible only on mobile */
.pritox-mobile-quiz-slot { display: none; }
.pritox-mobile-quiz-slot > aside { position: static; width: 100%; }

@media (max-width: 768px) {
    .pritox-ticker-label span { display: none; }
}


.sidebar { height: 100%; }
.sidebar-widget { margin-bottom: 28px; }
.widget-title { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-muted); border-bottom: 2px solid var(--color-accent); padding-bottom: 8px; margin-bottom: 14px; }

.recent-post-item { display: flex; gap: 12px; margin-bottom: 14px; align-items: flex-start; }
.recent-post-item img { width: 68px; height: 52px; object-fit: cover; border-radius: var(--radius); flex-shrink: 0; }
.recent-post-item h4 { font-size: 0.85rem; line-height: 1.35; margin-bottom: 4px; }
.recent-post-item h4 a { color: var(--color-primary); }
.recent-post-item h4 a:hover { color: var(--color-accent); }
.recent-post-item .meta { font-size: 0.75rem; color: var(--color-muted); }

.tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-cloud a { font-size: 0.78rem; padding: 4px 10px; border: 1px solid var(--color-border); border-radius: 20px; color: var(--color-muted); transition: all var(--transition); }
.tag-cloud a:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* ===================================================================
   PAGINATION
   =================================================================== */
.pagination { display: flex; justify-content: center; gap: 6px; padding: 2rem 0; }
.pagination a,
.pagination span:not(.pritox-page-info):not(.pritox-prev-btn):not(.pritox-next-btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text);
    transition: all var(--transition);
}
.pagination a:hover { border-color: var(--color-accent); color: var(--color-accent); }
.pagination .current { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

/* Prev / Next pagination */
.pritox-prevnext {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 16px;
    padding: 1rem 0;
    border-top: 1px solid var(--color-border);
    margin-top: 8px;
}
/* Plain text — no border, no background, no fixed size */
.pritox-page-info {
    display: block !important;
    width: auto !important;
    height: auto !important;
    border: none !important;
    background: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--color-muted);
    white-space: nowrap;
    flex: 1 1 auto;
    text-align: left;
    line-height: 1.5;
}
.pritox-prevnext-btns {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.pritox-prev-btn,
.pritox-next-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px;
    min-width: 90px;
    width: auto !important;
    height: auto !important;
    padding: 7px 20px !important;
    border-radius: 6px !important;
    border: 1px solid var(--color-accent) !important;
    background: transparent !important;
    color: var(--color-accent) !important;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.5;
    box-sizing: border-box;
    transition: background var(--transition), color var(--transition);
    cursor: pointer;
}
.pritox-prev-btn:hover,
.pritox-next-btn:hover {
    background: var(--color-accent) !important;
    color: #fff !important;
}
.pritox-btn-disabled {
    border-color: var(--color-border) !important;
    color: var(--color-muted) !important;
    background: transparent !important;
    cursor: not-allowed !important;
    opacity: 0.45;
    pointer-events: none;
}
@media (max-width: 480px) {
    .pritox-prevnext {
        flex-wrap: wrap;
        gap: 12px;
    }
    .pritox-page-info {
        width: 100% !important;
        text-align: center;
    }
    .pritox-prevnext-btns {
        width: 100%;
        justify-content: center;
    }
    .pritox-prev-btn,
    .pritox-next-btn {
        flex: 1;
    }
}

/* Infinite scroll (assets/js/infinite-scroll.js) — numbered pagination
   stays in the DOM (for SEO / no-JS visitors) but is visually hidden
   once JS takes over navigation via auto-loading. */
.pritox-pagination-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.pritox-infinite-sentinel { height: 1px; }
.pritox-infinite-status {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 2rem 0; font-size: 0.875rem; color: var(--color-muted, #888);
    text-align: center; flex-wrap: wrap;
}
.pritox-infinite-spinner {
    display: inline-block; width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid var(--color-border); border-top-color: var(--color-accent);
    animation: pritox-infinite-spin 0.7s linear infinite;
}
@keyframes pritox-infinite-spin { to { transform: rotate(360deg); } }
.pritox-infinite-end { color: var(--color-muted, #888); }
.pritox-infinite-error { color: #a32d2d; }
.pritox-infinite-retry {
    border: 1px solid var(--color-border); border-radius: var(--radius, 6px);
    background: #fff; padding: 6px 14px; font-size: 0.8125rem; font-weight: 600;
    color: var(--color-text); cursor: pointer;
}
.pritox-infinite-retry:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* ===================================================================
   COMMENTS
   =================================================================== */
.comments-section { margin-top: 3rem; border-top: 1px solid var(--color-border); padding-top: 2rem; }
.comments-section h2 { font-size: 1.25rem; margin-bottom: 1.5rem; }
.comment-body { background: var(--color-bg-alt); border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem; }
.comment-author { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.comment-author img { border-radius: 50%; }
.comment-meta { font-size: 0.8rem; color: var(--color-muted); }
.comment-content { font-size: 0.9rem; }

.comment-form input,
.comment-form textarea {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 10px 14px;
    font-size: 0.9rem;
    font-family: inherit;
    margin-bottom: 12px;
    outline: none;
    transition: border-color var(--transition);
}

.comment-form input:focus,
.comment-form textarea:focus { border-color: var(--color-accent); }
.comment-form textarea { min-height: 120px; resize: vertical; }
.comment-form .submit { background: var(--color-accent); color: #fff; border: none; border-radius: var(--radius); padding: 10px 24px; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: background var(--transition); }
.comment-form .submit:hover { background: var(--color-accent-dark); }

/* ===================================================================
   FOOTER
   =================================================================== */
.site-footer {
    background: var(--color-primary);
    color: #e5e7eb;
    padding: 48px 0 24px;
    margin-top: auto;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 24px;
}

.footer-brand .site-name { font-size: 1.375rem; font-weight: 800; color: #fff; margin-bottom: 10px; }
.footer-brand p { font-size: 0.875rem; opacity: 0.7; line-height: 1.6; }
.footer-brand .footer-tagline { font-size: 0.8rem; opacity: 0.55; line-height: 1.7; margin-top: 10px; font-style: italic; }
.footer-col h4 { color: #fff; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 12px; }
.footer-col ul { list-style: none; padding: 0; }
.footer-col ul li { margin-bottom: 8px; }
.footer-col ul li a { color: #9ca3af; font-size: 0.875rem; transition: color var(--transition); }
.footer-col ul li a:hover { color: #fff; }
.pritox-footer-social { display: flex; flex-wrap: wrap; gap: 10px; }
.pritox-footer-social-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.08); color: #9ca3af; transition: background .15s, color .15s; }
.pritox-footer-social-btn:hover { background: var(--color-accent, #7FB316); color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; color: #6b7280; }
.footer-bottom a { color: #9ca3af; }

/* Footer Bottom Nav — Links column ke neeche separator ke saath */
.footer-bottom-nav {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.footer-bottom-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
}
.footer-bottom-nav ul li { margin-bottom: 0; }
.footer-bottom-nav ul li a {
    display: inline-block;
    color: #9ca3af;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    transition: background var(--transition), color var(--transition), border-color var(--transition);
    white-space: nowrap;
}
.footer-bottom-nav ul li a:hover {
    color: #fff;
    background: rgba(var(--color-accent-rgb,127,179,22),0.18);
    border-color: var(--color-accent);
}

/* ===================================================================
   BREADCRUMBS
   =================================================================== */
.breadcrumbs { font-size: 0.82rem; color: var(--color-muted); padding: 14px 0; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.breadcrumbs a { color: var(--color-muted); }
.breadcrumbs a:hover { color: var(--color-accent); }
.breadcrumbs .sep { opacity: 0.5; }
.breadcrumbs .current { color: var(--color-text); }

/* ===================================================================
   BACK TO TOP
   =================================================================== */
#back-to-top {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 42px;
    height: 42px;
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition);
    z-index: 999;
}
#back-to-top.visible { opacity: 1; pointer-events: auto; }

/* ===================================================================
   LOADING SKELETON
   =================================================================== */
.skeleton { background: linear-gradient(90deg, var(--color-bg-alt) 25%, #f0f0f0 50%, var(--color-bg-alt) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--radius); }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ===================================================================
   DARK MODE — DISABLED
   The site is forced to always render in light mode. To re-enable
   automatic dark mode based on visitor device settings, uncomment
   the block below.

@media (prefers-color-scheme: dark) {
    :root {
        --color-primary:  #f1f5f9;
        --color-text:     #e2e8f0;
        --color-muted:    #94a3b8;
        --color-border:   #1e293b;
        --color-bg:       #0f172a;
        --color-bg-alt:   #1e293b;
        --color-bg-dark:  #020617;
    }
    .site-header { background: #0f172a; }
    .post-card { background: #1e293b; }
    .pritox-quiz { background: linear-gradient(135deg, #1e1b4b 0%, #1e293b 100%); border-color: #3730a3; }
}
*/

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 1024px) {
    .content-area { grid-template-columns: 1fr; }
    .pritox-home-layout { grid-template-columns: 1fr; }
    .pritox-home-sidebar { position: static; }
    .pritox-recent-grid { grid-template-columns: 1fr 1fr; }
    .sidebar { position: static; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}

@media (max-width: 768px) {
    :root { --gap: 16px; }
    .hero-post .container { grid-template-columns: 1fr; }
    .hero-image { display: none; }
    .posts-grid { grid-template-columns: 1fr; }
    .pritox-featured-grid { grid-template-columns: 1fr; }
    .pritox-recent-grid { grid-template-columns: 1fr; }
    .nav-toggle { display: flex; }
    .main-navigation { display: none; flex-direction: column; position: absolute; top: 64px; left: 0; right: 0; background: var(--color-bg); border-bottom: 1px solid var(--color-border); padding: 12px var(--gap); box-shadow: var(--shadow-md); z-index: 999; }
    .main-navigation.is-open { display: flex; }
    .header-search { display: none; }

    /* Logo left-aligned on mobile */
    .site-header .container { position: relative; display: flex; align-items: center; justify-content: space-between; }
    .site-branding { position: static; transform: none; display: flex; align-items: center; flex: 1; pointer-events: auto; max-width: none; }
    .site-branding .custom-logo { max-height: 40px; }
    /* Hide nav-toggle when no menu is assigned */
    .nav-toggle.no-menu { display: none !important; }
    .header-actions { margin-left: 12px; flex-shrink: 0; }
    .header-login-btn { padding: 6px 12px; font-size: 0.8rem; }
    .author-box { flex-direction: column; }
    .author-avatar { flex-basis: auto; width: 30%; max-width: 90px; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
}


/* Hide article-level quiz on desktop — sidebar quiz handles it there */
@media (min-width: 769px) {
    .pritox-post-extras--mobile-only { display: none !important; }
}

@media (max-width: 768px) {
    /* Single article page: force Quiz to render AFTER FAQ on mobile only.
       .pritox-post-extras wraps two child divs:
         .pritox-post-extras__faq  (order 1 — FAQ always first)
         .pritox-post-extras__quiz (order 2 — Quiz always after FAQ)
       Desktop/tablet are unaffected (no flex here outside this query). */
    .pritox-post-extras {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .pritox-post-extras__faq  { order: 1; }
    .pritox-post-extras__quiz { order: 2; }

    /* Ensure quiz box is fully visible — override any inherited display:none */
    .pritox-post-extras__quiz { display: block !important; }
    .pritox-post-extras__quiz .pritox-quiz { display: block !important; }

    /* Spacing between FAQ and Quiz blocks on mobile */
    .pritox-post-extras__faq  { margin-bottom: 1.5rem; }

    /* Legacy selectors kept for backward-compat if hook still outputs
       .pritox-faq / .pritox-quiz as direct children of the wrapper */
    .pritox-post-extras > .pritox-faq  { order: 1; }
    .pritox-post-extras > .pritox-quiz { order: 2; }

    /* Mobile quiz slot: show only the quiz box, hide rest of sidebar content */
    .pritox-mobile-quiz-slot { display: block; margin-top: 16px; margin-bottom: 0; }
    .pritox-mobile-quiz-slot .pritox-sb-box:not(.pritox-sb-quiz-inline) { display: none; }
    .pritox-mobile-quiz-slot script { display: none; }
    /* Hide quiz from actual sidebar on mobile so it doesn't duplicate */
    .pritox-home-sidebar .pritox-sb-quiz-inline { display: none; }

    /* Mobile: quiz box — same width & style as article cards */
    .pritox-mobile-quiz-slot {
        display: block;
        margin-top: 16px;
        margin-bottom: 0;
        width: 100%;
    }
    .pritox-mobile-quiz-slot .pritox-sb-box {
        background: #ffffff;
        border: 1px solid var(--color-border) !important;
        border-radius: var(--radius-lg);
        padding: 1.4rem !important;
        width: 100%;
        box-sizing: border-box;
        margin: 0;   /* override base .pritox-sb-box { margin: 0 16px } — sidebar breathing room not needed here */
    }
    .pritox-mobile-quiz-slot .pritox-sb-quiz-inline {
        border: none;
        box-shadow: none;
        background: transparent;
        padding: 0;
    }

    /* Inner pritox-quiz ka apna box/background/border strip karo —
       outer .pritox-sb-box hi ek box hai */
    .pritox-mobile-quiz-slot .pritox-sb-quiz-inline .pritox-quiz {
        margin: 0;
        padding: 0;
        background: transparent !important;
        border: none !important;
        border-radius: 0;
        width: 100%;
        box-sizing: border-box;
    }

    /* Title row: round icon badge + wrapped title text, like a card header */
    .pritox-mobile-quiz-slot .pritox-sb-title {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin: 0 0 12px 0;
        padding: 0 0 12px 0;
        border-bottom: 1px solid var(--color-border);
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--color-primary);
    }
    .pritox-mobile-quiz-slot .pritox-sb-quiz-icon {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: rgba(220,38,38,0.08);
        font-size: 1.05rem;
        line-height: 1;
    }
    .pritox-mobile-quiz-slot .pritox-sb-quiz-title-text {
        flex: 1;
        line-height: 1.45;
        padding-top: 2px;
    }

    /* Quiz ka inner header row apna duplicate TITLE hide karo, lekin
       header ko display:none mat karo — timer (.quiz-timer) bhi isi
       header ke andar hai, poora header hide karne se timer bhi
       gayab ho raha tha */
    .pritox-mobile-quiz-slot .pritox-quiz-header {
        justify-content: flex-end;
        margin-bottom: 0.75rem;
    }
    .pritox-mobile-quiz-slot .pritox-quiz-header h3 {
        display: none;
    }

    /* Topic aur timer row hide */
    .pritox-mobile-quiz-slot .pritox-sb-quiz-topic { display: none; }
    .pritox-mobile-quiz-slot .pritox-sb-quiz-header-row { display: none; }

    /* Progress bar (sidebar-widget markup: sb-quiz-*) */
    .pritox-mobile-quiz-slot .sb-quiz-progress {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 6px;
        margin-bottom: 16px;
    }
    .pritox-mobile-quiz-slot .sb-quiz-progress-label {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--color-muted);
        text-align: right;
    }
    .pritox-mobile-quiz-slot .sb-quiz-progress-bar { height: 5px; }

    /* Question text — larger, like the reference card */
    .pritox-mobile-quiz-slot .sb-qq {
        font-size: 0.98rem;
        font-weight: 700;
        margin-bottom: 14px;
    }

    /* Options — rounded rectangle cards instead of pills */
    .pritox-mobile-quiz-slot .sb-qopts { gap: 10px; }
    .pritox-mobile-quiz-slot .sb-qopt {
        border-radius: 12px;
        padding: 12px 14px;
        font-size: 0.88rem;
    }

    /* Progress bar (article-quiz markup: quiz.php's plain quiz-* classes —
       this is what actually renders in the homepage mobile quiz slot) */
    .pritox-mobile-quiz-slot .quiz-progress {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 6px;
        margin-bottom: 16px;
    }
    .pritox-mobile-quiz-slot .quiz-progress-label {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--color-muted);
        text-align: right;
    }
    .pritox-mobile-quiz-slot .quiz-progress-bar { height: 5px; }

    .pritox-mobile-quiz-slot .quiz-q {
        font-size: 0.98rem;
        font-weight: 700;
        margin-bottom: 14px;
    }

    .pritox-mobile-quiz-slot .quiz-options { gap: 10px; }
    .pritox-mobile-quiz-slot .quiz-option {
        border-radius: 12px;
        padding: 12px 14px;
        font-size: 0.88rem;
        background: #ffffff;
    }

    /* "See all quizzes" footer link — clearer separation from the card */
    .pritox-mobile-quiz-slot .pritox-sb-all-quizzes {
        margin-top: 14px;
        padding-top: 12px;
        border-top: 1px solid var(--color-border);
        font-size: 0.85rem;
    }

    /* Mobile only: hide "Most Popular" and "Topics" sidebar boxes on the homepage */
    .pritox-home-sidebar .pritox-popular-box,
    .pritox-home-sidebar .pritox-topics-box,
    .pritox-home-sidebar .pritox-subscribe-box {
        display: none !important;
    }

    /* Inline "Daily updates" box shown after the 5th recent article */
    .pritox-inline-subscribe {
        display: block;
        grid-column: 1 / -1;
        margin: 6px 0 4px;
    }


}

/* ===================================================================
   MOBILE — Article Quiz (.pritox-quiz) Fix
   Title box ke andar, width article ke barabar, proper spacing
   =================================================================== */
@media (max-width: 768px) {
    .pritox-quiz {
        margin: 1.75rem 0;
        padding: 1.1rem 1.1rem 1.25rem;
        width: 100%;
        box-sizing: border-box;
        border-radius: var(--radius-lg);
    }

    /* Title ANDAR hi rahega — display ensure karo */
    .pritox-quiz-header {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 1rem;
        padding: 0;
    }

    .pritox-quiz-header h3 {
        font-size: 0.92rem;
        margin: 0;
        color: var(--color-primary);
        flex: 1;
    }

    /* Progress bar spacing */
    .quiz-progress {
        margin-bottom: 1.1rem;
    }

    /* Question text */
    .quiz-q {
        font-size: 0.9rem;
        margin-bottom: 0.65rem;
    }

    /* Options */
    .quiz-option {
        padding: 9px 12px;
        font-size: 0.84rem;
        gap: 8px;
    }

    /* Feedback row */
    .quiz-feedback-row {
        margin-top: 1rem;
        gap: 10px;
    }

    /* Next button full width on small screens */
    .quiz-next,
    .quiz-retake {
        padding: 9px 16px;
        font-size: 0.875rem;
    }
}

/* ===================================================================
   RELATED POSTS — MOBILE HORIZONTAL SCROLL WITH ‹ › ARROW CONTROLS
   JS (main.js → initRelatedPostsScroll) adds .pritox-related-scroll
   and .pritox-related-scroll-wrap at runtime on ≤768 px only.
   Desktop multi-column grid layout is completely untouched.
   =================================================================== */
@media (max-width: 768px) {

    /* Outer wrapper — positions arrow buttons absolutely over the strip */
    .pritox-related-scroll-wrap {
        position: relative;
        margin: 0 0 8px;
    }

    /* The scroll strip itself */
    .pritox-related-scroll {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 14px !important;
        padding: 4px 2px 14px !important;
        margin-bottom: 0 !important;
        grid-template-columns: unset !important;
        /* Smooth momentum on iOS */
        scroll-behavior: smooth;
    }

    /* Hide scrollbar track everywhere */
    .pritox-related-scroll {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .pritox-related-scroll::-webkit-scrollbar { display: none; }

    /* Each card — 72 vw wide so next card peeks in from the right */
    .pritox-related-scroll .post-card,
    .pritox-related-scroll .pritox-featured-card {
        flex: 0 0 72vw !important;
        max-width: 280px !important;
        min-width: 200px !important;
        width: 72vw !important;
        height: auto !important;
        scroll-snap-align: start;
    }

    /* ── Arrow buttons ───────────────────────────────────────────── */
    .pritox-rscroll-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-60%);   /* slightly above centre (cards have body below thumb) */
        z-index: 10;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: 1.5px solid var(--color-border);
        background: #fff;
        color: var(--color-primary);
        font-size: 1.4rem;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(0,0,0,0.10);
        transition: background var(--transition), color var(--transition), opacity .2s;
        padding: 0;
    }
    .pritox-rscroll-btn:hover {
        background: var(--color-accent);
        color: #fff;
        border-color: var(--color-accent);
    }
    .pritox-rscroll-prev { left:  2px; }
    .pritox-rscroll-next { right: 2px; }
}

@media print {
    .site-header, .sidebar, .site-footer, #back-to-top, #reading-progress, .pritox-quiz, .comments-section { display: none !important; }
    .content-area { display: block; }
    .entry-content { font-size: 12pt; }
}

/* ==========================================================================
   Quiz Archive Page  (page-quizzes.php)
   ========================================================================== */

.pritox-quizzes-page { padding-top: 2rem; padding-bottom: 4rem; }

.pritox-quizzes-hero-head { text-align: center; margin-bottom: 2.5rem; }
.pritox-quizzes-page-title { font-size: clamp(1.6rem, 4vw, 2.4rem); color: var(--color-primary); margin-bottom: 0.4rem; }
.pritox-quizzes-page-sub { color: var(--color-muted); font-size: 1rem; }

/* ---- Last Generated Quiz hero card ---- */
.pritox-quizzes-last-section { margin-bottom: 3rem; }

.pritox-quiz-hero-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}
.pritox-quiz-hero-img { display: block; overflow: hidden; max-height: 340px; }
.pritox-quiz-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
.pritox-quiz-hero-img:hover img { transform: scale(1.03); }

.pritox-quiz-hero-body {
    padding: 2rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.75rem;
}
.pritox-quiz-badge {
    display: inline-block;
    background: var(--color-accent);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 10px;
    border-radius: 999px;
    width: fit-content;
}
.pritox-quiz-hero-title { font-size: 1.3rem; line-height: 1.35; margin: 0; }
.pritox-quiz-hero-title a { color: var(--color-primary); text-decoration: none; }
.pritox-quiz-hero-title a:hover { color: var(--color-accent); }
.pritox-quiz-hero-topic { font-size: 0.88rem; color: var(--color-muted); margin: 0; }
.pritox-quiz-hero-meta { font-size: 0.82rem; color: var(--color-muted); margin: 0; }
.pritox-quiz-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 10px 22px;
    background: var(--color-accent);
    color: #fff;
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    width: fit-content;
    transition: background 0.18s;
}
.pritox-quiz-hero-btn:hover { background: var(--color-accent-dark); }

/* No thumbnail — full width body */
.pritox-quiz-hero-card:not(:has(.pritox-quiz-hero-img)) { grid-template-columns: 1fr; }

/* ---- Most Popular Quizzes ---- */
.pritox-quizzes-popular-section { margin-bottom: 3rem; }

.pritox-popular-quiz-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; }
.pritox-popular-quiz-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--color-border);
}
.pritox-popular-quiz-item:last-child { border-bottom: none; }
.pritox-popular-quiz-rank {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pritox-popular-quiz-thumb { flex-shrink: 0; display: block; width: 80px; height: 45px; border-radius: var(--radius); overflow: hidden; }
.pritox-popular-quiz-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pritox-popular-quiz-info { display: flex; flex-direction: column; gap: 4px; }
.pritox-popular-quiz-title { font-size: 0.92rem; font-weight: 700; color: var(--color-primary); text-decoration: none; line-height: 1.35; }
.pritox-popular-quiz-title:hover { color: var(--color-accent); }
.pritox-popular-quiz-meta { font-size: 0.77rem; color: var(--color-muted); }

/* ---- All Quizzes grid ---- */
.pritox-quizzes-all-section { margin-bottom: 2rem; }

.pritox-quiz-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 2rem;
}
.pritox-quiz-card {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.18s, transform 0.18s;
}
.pritox-quiz-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.pritox-quiz-card-img { display: block; overflow: hidden; height: 160px; background: var(--color-border); background-size: cover; background-position: center; }
.pritox-quiz-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s; }
.pritox-quiz-card-img:hover img { transform: scale(1.04); }
.pritox-quiz-card-img--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-accent) 0%, #7c3aed 100%);
    font-size: 3rem;
}

.pritox-quiz-card-body { padding: 1rem 1rem 1.25rem; display: flex; flex-direction: column; flex: 1; gap: 6px; }
.pritox-quiz-card-topic { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-accent); }
.pritox-quiz-card-title { font-size: 0.95rem; font-weight: 700; margin: 0; line-height: 1.35; flex: 1; }
.pritox-quiz-card-title a { color: var(--color-primary); text-decoration: none; }
.pritox-quiz-card-title a:hover { color: var(--color-accent); }
.pritox-quiz-card-meta { font-size: 0.78rem; color: var(--color-muted); }
.pritox-quiz-card-btn {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    background: transparent;
    color: var(--color-accent);
    border: 1.5px solid var(--color-accent);
    border-radius: var(--radius);
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    width: fit-content;
    margin-top: 8px;
    transition: background 0.18s, color 0.18s;
}
.pritox-quiz-card-btn:hover { background: var(--color-accent); color: #fff; }

.pritox-no-quizzes { text-align: center; padding: 3rem; color: var(--color-muted); font-size: 0.95rem; }

/* ---- Sidebar: Inline playable Daily Quiz ---- */
.pritox-sb-quiz-inline {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.1rem 1rem;
    box-shadow: var(--shadow-sm);
}
.pritox-sb-quiz-topic {
    font-size: 0.75rem;
    color: var(--color-muted);
    margin: -2px 0 10px;
    font-style: italic;
    line-height: 1.4;
}

/* progress bar — full width strip at top of quiz area */
.sb-quiz-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.sb-quiz-progress-bar {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: #e8eaf6;
    overflow: hidden;
}
.sb-quiz-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #7c83f5 0%, #a78bfa 100%);
    border-radius: 999px;
    transition: width 0.35s ease;
}
.sb-quiz-progress-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* question text */
.sb-qq {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.45;
    margin: 0 0 12px;
}

/* options — large pill style like the screenshot */
.sb-qopts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}
.sb-qopt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1.5px solid #e0e0e0;
    background: #ffffff;
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--color-primary);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    line-height: 1.35;
    user-select: none;
}
.sb-qopt:hover {
    border-color: #a78bfa;
    background: #f5f3ff;
    box-shadow: 0 0 0 3px rgba(167,139,250,0.1);
}
/* Hide native radio — replaced by custom circle */
.sb-qopt input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Custom radio circle indicator */
.sb-qopt::before {
    content: '';
    display: block;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #c0bfff;
    background: #fff;
    transition: border-color 0.15s, background 0.15s;
    box-sizing: border-box;
}
.sb-qopt:hover::before {
    border-color: #a78bfa;
    background: #f5f3ff;
}
.sb-qopt.correct::before {
    border-color: #16a34a;
    background: #16a34a;
    box-shadow: inset 0 0 0 3px #f0fdf4;
}
.sb-qopt.wrong::before {
    border-color: #dc2626;
    background: #dc2626;
    box-shadow: inset 0 0 0 3px #fef2f2;
}
.sb-qopt.is-locked::before {
    border-color: #d1d5db;
    background: #f9fafb;
}
.sb-qopt.is-locked.correct::before {
    border-color: #16a34a;
    background: #16a34a;
    box-shadow: inset 0 0 0 3px #f0fdf4;
}
.sb-qopt.is-locked.wrong::before {
    border-color: #dc2626;
    background: #dc2626;
    box-shadow: inset 0 0 0 3px #fef2f2;
}
.sb-qopt.correct {
    border-color: #16a34a;
    background: #f0fdf4;
    color: #166534;
}
.sb-qopt.wrong {
    border-color: #dc2626;
    background: #fef2f2;
    color: #991b1b;
}
.sb-qopt.is-locked { cursor: default; pointer-events: none; }
.sb-qopt.is-locked:hover { background: #ffffff; border-color: #e0e0e0; box-shadow: none; }
.sb-qopt.is-locked.correct:hover { background: #f0fdf4; border-color: #16a34a; }
.sb-qopt.is-locked.wrong:hover   { background: #fef2f2; border-color: #dc2626; }

/* explanation */
.sb-qexpl {
    font-size: 0.75rem;
    color: var(--color-muted);
    background: #f9fafb;
    border-left: 3px solid #a78bfa;
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 6px 10px;
    margin-bottom: 8px;
    line-height: 1.45;
}

/* feedback + next row */
.sb-qfb-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
    flex-wrap: wrap;
}
.sb-qfb { font-size: 0.8rem; font-weight: 700; }
.sb-qfb.is-correct { color: #16a34a; }
.sb-qfb.is-wrong   { color: #dc2626; }

/* next button */
.sb-qnext {
    padding: 6px 18px;
    border: none;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    color: #fff;
    background: #7c83f5;
    transition: background 0.18s, transform 0.1s;
    letter-spacing: 0.01em;
}
.sb-qnext:hover { background: #6366f1; transform: translateY(-1px); }
.sb-qnext.is-correct { background: #16a34a; }
.sb-qnext.is-correct:hover { background: #15803d; }
.sb-qnext.is-wrong { background: #7c83f5; }
.sb-qnext.is-wrong:hover { background: #6366f1; }

/* results panel */
.sb-quiz-score {
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 10px;
    text-align: center;
    padding: 10px;
    background: #f5f3ff;
    border-radius: var(--radius);
}
.sb-quiz-review { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.sb-rv-item {
    padding: 7px 10px;
    border-radius: var(--radius);
    border-left: 3px solid #e0e0e0;
    font-size: 0.77rem;
    background: #f9fafb;
}
.sb-rv-item.is-correct { border-color: #16a34a; background: #f0fdf4; }
.sb-rv-item.is-wrong   { border-color: #dc2626; background: #fef2f2; }
.sb-rv-q   { font-weight: 600; color: var(--color-primary); margin-bottom: 3px; line-height: 1.35; }
.sb-rv-ans { color: #166534; font-weight: 600; font-size: 0.74rem; }

/* retake button */
.sb-quiz-retake {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 8px 16px;
    background: #7c83f5;
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s;
    margin-bottom: 10px;
}
.sb-quiz-retake:hover { background: #6366f1; }


/* ---- Quiz login gate ---- */
.quiz-login-gate { text-align: center; padding: 36px 24px; }
.quiz-login-gate-inner { display: inline-flex; flex-direction: column; align-items: center; gap: 12px; max-width: 360px; }
.quiz-login-gate-icon { font-size: 40px; line-height: 1; }
.quiz-login-gate-title { font-size: 1.1rem; font-weight: 800; color: #1a1a2e; margin: 0; }
.quiz-login-gate-sub { font-size: 0.88rem; color: #666; margin: 0; line-height: 1.5; }
.quiz-login-gate-btn { display: inline-block; margin-top: 4px; background: var(--color-accent, #7c3aed); color: #fff; font-size: 0.9rem; font-weight: 700; text-decoration: none; padding: 11px 28px; border-radius: 99px; transition: background 0.2s, transform 0.15s; }
.quiz-login-gate-btn:hover { background: #6d28d9; transform: translateY(-1px); color: #fff; }
.sb-quiz-login-gate { text-align: center; padding: 20px 12px; }
.sb-quiz-login-gate-icon { font-size: 28px; line-height: 1; display: block; margin-bottom: 6px; }
.sb-quiz-login-gate-title { font-size: 0.92rem; font-weight: 800; color: #1a1a2e; margin: 0 0 10px; }
.sb-quiz-login-gate-btn { display: inline-block; background: var(--color-accent, #7c3aed); color: #fff; font-size: 0.82rem; font-weight: 700; text-decoration: none; padding: 8px 20px; border-radius: 99px; transition: background 0.2s; }
.sb-quiz-login-gate-btn:hover { background: #6d28d9; color: #fff; }
/* see all link */
.pritox-sb-all-quizzes {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: #7c83f5;
    text-decoration: none;
    margin-top: 8px;
    text-align: center;
}
.pritox-sb-all-quizzes:hover { text-decoration: underline; color: #6366f1; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .pritox-quiz-grid { grid-template-columns: repeat(2, 1fr); }
    .pritox-quiz-hero-card { grid-template-columns: 1fr; }
    .pritox-quiz-hero-img { max-height: 220px; }
}
@media (max-width: 600px) {
    .pritox-quiz-grid { grid-template-columns: 1fr; }
    .pritox-quiz-hero-body { padding: 1.25rem; }
    .pritox-quiz-hero-title { font-size: 1.1rem; }
}

/* ===================================================================
   INDEPENDENT COLUMN SCROLL — no layout changes, pure JS wheel magic
   CSS here does nothing structural; JS intercepts wheel events.
   =================================================================== */




/* Quiz h3 — icon + title gap */
.pritox-quiz-h3 { display: flex; align-items: center; gap: 8px; }
.pritox-quiz-h3-text { display: inline; }
.pritox-sb-title .pritox-sb-quiz-icon { margin-right: 6px; }
/* ===== Pritox SVG Icon System ===== */
.pritox-icon {
    display: inline-block;
    vertical-align: -0.15em;
    flex-shrink: 0;
    line-height: 1;
}

/* ===================================================================
   GLOBAL DASHBOARD MODAL — used across every tab (categories, planner,
   team, settings/updates, etc). Previously this was only defined inline
   inside a handful of specific tabs, so any modal rendered on a tab
   that didn't include one of those inline <style> blocks (e.g. the
   Settings → Updates confirm dialog) fell back to unstyled markup with
   no overlay/centering. Defining it once here, globally, fixes that.
   =================================================================== */
.pritox-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(20,20,30,.45);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.pritox-modal-box {
    background: #fff;
    border-radius: 12px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    overflow: hidden;
}
.pritox-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
    gap: 10px;
}
.pritox-modal-close {
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: #888;
    padding: 0;
}
.pritox-modal-close:hover { color: #333; }
.pritox-modal-body {
    padding: 18px 20px;
    max-height: 75vh;
    overflow-y: auto;
}
.pritox-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid #eee;
    background: #fafafa;
}
.pritox-modal-error {
    color: #a32d2d;
    font-size: 12.5px;
    margin-top: 8px;
}

/* ===================================================================
   SINGLE POST — MOBILE RESPONSIVE FIXES
   v1.67.89: full-width article, tighter heading + meta, image height
   =================================================================== */
@media (max-width: 768px) {

    /* Article takes full width — sidebar already collapses at 1024px */
    .single-article {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    /* Layout padding trim on mobile */
    .pritox-home-layout {
        padding: 20px 0;
        gap: 24px;
    }

    /* H1 — tighter on narrow screens */
    .single-header h1 {
        font-size: clamp(1.35rem, 5.5vw, 1.75rem);
        line-height: 1.35;
        word-break: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    /* Header spacing */
    .single-header {
        margin-bottom: 1.25rem;
    }

    /* Meta row — smaller gap, tighter font */
    .single-meta {
        gap: 10px;
        font-size: 0.78rem;
        padding-bottom: 1rem;
        margin-bottom: 1.1rem;
        flex-wrap: wrap;
    }

    /* Featured image — reduce tall height on mobile */
    .featured-image {
        margin-bottom: 1.25rem;
        border-radius: var(--radius);
    }
    .featured-image img {
        width: 100%;
        height: auto;
        aspect-ratio: 16/9;
        object-fit: cover;
    }

    /* Entry content — readable but not oversized */
    .entry-content {
        font-size: 0.97rem;
        line-height: 1.75;
    }

    /* Prevent any wide child from overflowing */
    .entry-content img,
    .entry-content iframe,
    .entry-content video,
    .entry-content embed,
    .entry-content object,
    .entry-content .wp-block-embed__wrapper {
        max-width: 100% !important;
        width: 100% !important;
        height: auto;
    }

    /* Alignwide / alignfull — contain within viewport on mobile */
    .entry-content .alignwide,
    .entry-content .alignfull {
        max-width: 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
        transform: none !important;
    }

    /* Float images — stack on mobile */
    .entry-content .alignleft,
    .entry-content .alignright {
        float: none;
        display: block;
        max-width: 100%;
        margin: 1rem auto;
    }

    /* Tags cloud on mobile */
    .entry-tags.tag-cloud {
        gap: 6px;
    }
    .entry-tags.tag-cloud a {
        font-size: 0.75rem;
        padding: 4px 9px;
    }

    /* Author box stacked */
    .author-box {
        padding: 1rem;
    }

    /* Related posts — single column */
    .related-posts-grid {
        grid-template-columns: 1fr;
    }

    /* After-post widgets full width */
    .after-post-widgets {
        width: 100%;
        box-sizing: border-box;
    }

    /* Comments form inputs full width */
    .comment-form input,
    .comment-form textarea {
        font-size: 1rem; /* prevent iOS zoom on focus */
    }
}


/* ===================================================================
   COLOR THEMES  (v1.68.0)
   Apply by adding data-theme="THEME_NAME" to <html> or <body>.
   Each theme overrides the CSS custom properties in :root.

   Available themes:
     default  — Deep navy + crimson (built-in, no attribute needed)
     ocean    — Teal + electric-blue
     forest   — Dark green + amber
     slate    — Mid-grey + violet
     rose     — Dusty rose + coral
     midnight — Pure black + gold
     saffron  — Warm white + saffron-orange
     sky      — Light blue + indigo

   Dark variants: append "-dark" suffix, e.g. data-theme="ocean-dark"
   =================================================================== */

/* ── OCEAN ──────────────────────────────────────────────────────── */
[data-theme="ocean"] {
    --color-primary:     #0c3547;
    --color-accent:      #0891b2;
    --color-accent-dark: #0e7490;
    --color-text:        #1e3a4a;
    --color-muted:       #64748b;
    --color-border:      #bae6fd;
    --color-bg:          #f0f9ff;
    --color-bg-alt:      #e0f2fe;
    --color-bg-dark:     #082f49;
}
[data-theme="ocean-dark"] {
    --color-primary:     #e0f2fe;
    --color-accent:      #22d3ee;
    --color-accent-dark: #06b6d4;
    --color-text:        #bae6fd;
    --color-muted:       #7dd3fc;
    --color-border:      #164e63;
    --color-bg:          #082f49;
    --color-bg-alt:      #0c4a6e;
    --color-bg-dark:     #020c14;
}
[data-theme="ocean-dark"] .site-header { background: #082f49; }
[data-theme="ocean-dark"] .post-card   { background: #0c4a6e; }

/* ── FOREST ─────────────────────────────────────────────────────── */
[data-theme="forest"] {
    --color-primary:     #14532d;
    --color-accent:      #d97706;
    --color-accent-dark: #b45309;
    --color-text:        #1c3a26;
    --color-muted:       #6b7280;
    --color-border:      #bbf7d0;
    --color-bg:          #f0fdf4;
    --color-bg-alt:      #dcfce7;
    --color-bg-dark:     #052e16;
}
[data-theme="forest-dark"] {
    --color-primary:     #d1fae5;
    --color-accent:      #fbbf24;
    --color-accent-dark: #f59e0b;
    --color-text:        #a7f3d0;
    --color-muted:       #6ee7b7;
    --color-border:      #065f46;
    --color-bg:          #022c22;
    --color-bg-alt:      #064e3b;
    --color-bg-dark:     #000d09;
}
[data-theme="forest-dark"] .site-header { background: #022c22; }
[data-theme="forest-dark"] .post-card   { background: #064e3b; }

/* ── SLATE ──────────────────────────────────────────────────────── */
[data-theme="slate"] {
    --color-primary:     #1e293b;
    --color-accent:      #7c3aed;
    --color-accent-dark: #6d28d9;
    --color-text:        #334155;
    --color-muted:       #64748b;
    --color-border:      #e2e8f0;
    --color-bg:          #f8fafc;
    --color-bg-alt:      #f1f5f9;
    --color-bg-dark:     #0f172a;
}
[data-theme="slate-dark"] {
    --color-primary:     #f1f5f9;
    --color-accent:      #a78bfa;
    --color-accent-dark: #8b5cf6;
    --color-text:        #e2e8f0;
    --color-muted:       #94a3b8;
    --color-border:      #1e293b;
    --color-bg:          #0f172a;
    --color-bg-alt:      #1e293b;
    --color-bg-dark:     #020617;
}
[data-theme="slate-dark"] .site-header { background: #0f172a; }
[data-theme="slate-dark"] .post-card   { background: #1e293b; }
[data-theme="slate-dark"] .pritox-quiz { background: linear-gradient(135deg,#1e1b4b 0%,#1e293b 100%); border-color: #3730a3; }

/* ── ROSE ───────────────────────────────────────────────────────── */
[data-theme="rose"] {
    --color-primary:     #4a1020;
    --color-accent:      #f43f5e;
    --color-accent-dark: #e11d48;
    --color-text:        #3b1219;
    --color-muted:       #9f8a8e;
    --color-border:      #fecdd3;
    --color-bg:          #fff1f2;
    --color-bg-alt:      #ffe4e6;
    --color-bg-dark:     #270a12;
}
[data-theme="rose-dark"] {
    --color-primary:     #ffe4e6;
    --color-accent:      #fb7185;
    --color-accent-dark: #f43f5e;
    --color-text:        #fecdd3;
    --color-muted:       #fda4af;
    --color-border:      #881337;
    --color-bg:          #4c0519;
    --color-bg-alt:      #881337;
    --color-bg-dark:     #1a0009;
}
[data-theme="rose-dark"] .site-header { background: #4c0519; }
[data-theme="rose-dark"] .post-card   { background: #881337; }

/* ── MIDNIGHT ───────────────────────────────────────────────────── */
[data-theme="midnight"] {
    --color-primary:     #0a0a0a;
    --color-accent:      #d4a017;
    --color-accent-dark: #b8880f;
    --color-text:        #1a1a1a;
    --color-muted:       #6b6b6b;
    --color-border:      #e8e0cc;
    --color-bg:          #fefdf9;
    --color-bg-alt:      #f9f5e9;
    --color-bg-dark:     #050505;
}
[data-theme="midnight-dark"] {
    --color-primary:     #fef9e7;
    --color-accent:      #fbbf24;
    --color-accent-dark: #f59e0b;
    --color-text:        #f5f0d5;
    --color-muted:       #a89060;
    --color-border:      #292218;
    --color-bg:          #111007;
    --color-bg-alt:      #1c1a0f;
    --color-bg-dark:     #000000;
}
[data-theme="midnight-dark"] .site-header { background: #111007; }
[data-theme="midnight-dark"] .post-card   { background: #1c1a0f; }

/* ── SAFFRON ────────────────────────────────────────────────────── */
[data-theme="saffron"] {
    --color-primary:     #431407;
    --color-accent:      #ea580c;
    --color-accent-dark: #c2410c;
    --color-text:        #3c1407;
    --color-muted:       #92400e;
    --color-border:      #fed7aa;
    --color-bg:          #fff7ed;
    --color-bg-alt:      #ffedd5;
    --color-bg-dark:     #1c0700;
}
[data-theme="saffron-dark"] {
    --color-primary:     #ffedd5;
    --color-accent:      #fb923c;
    --color-accent-dark: #ea580c;
    --color-text:        #fed7aa;
    --color-muted:       #fdba74;
    --color-border:      #7c2d12;
    --color-bg:          #431407;
    --color-bg-alt:      #7c2d12;
    --color-bg-dark:     #150500;
}
[data-theme="saffron-dark"] .site-header { background: #431407; }
[data-theme="saffron-dark"] .post-card   { background: #7c2d12; }

/* ── SKY ────────────────────────────────────────────────────────── */
[data-theme="sky"] {
    --color-primary:     #0f2044;
    --color-accent:      #3b82f6;
    --color-accent-dark: #2563eb;
    --color-text:        #172554;
    --color-muted:       #6b7280;
    --color-border:      #bfdbfe;
    --color-bg:          #eff6ff;
    --color-bg-alt:      #dbeafe;
    --color-bg-dark:     #060f1c;
}
[data-theme="sky-dark"] {
    --color-primary:     #dbeafe;
    --color-accent:      #60a5fa;
    --color-accent-dark: #3b82f6;
    --color-text:        #bfdbfe;
    --color-muted:       #93c5fd;
    --color-border:      #1e3a5f;
    --color-bg:          #0f1f3d;
    --color-bg-alt:      #1e3a5f;
    --color-bg-dark:     #020812;
}
[data-theme="sky-dark"] .site-header { background: #0f1f3d; }
[data-theme="sky-dark"] .post-card   { background: #1e3a5f; }

/* ── DEFAULT DARK (system-default kept commented above, manual below) */
[data-theme="default-dark"] {
    --color-primary:     #f1f5f9;
    --color-accent:      #e94560;
    --color-accent-dark: #c73652;
    --color-text:        #e2e8f0;
    --color-muted:       #94a3b8;
    --color-border:      #1e293b;
    --color-bg:          #0f172a;
    --color-bg-alt:      #1e293b;
    --color-bg-dark:     #020617;
}
[data-theme="default-dark"] .site-header { background: #0f172a; }
[data-theme="default-dark"] .post-card   { background: #1e293b; }
[data-theme="default-dark"] .pritox-quiz { background: linear-gradient(135deg,#1e1b4b 0%,#1e293b 100%); border-color: #3730a3; }


/* Sidebar uses natural sticky — no inner scrollbar */

/* -----------------------------------------------------------------------
   Article Update — count badge
   Additive only: scoped to the .pritox-nav-count element that exists on
   the Article Update sidebar link and page title. No existing sidebar or
   Content Library rule is modified. Inherits the dashboard accent so it
   follows the Settings → Appearance colours like everything else.
   -------------------------------------------------------------------- */
.pritox-nav-count {
    display: inline-block;
    min-width: 18px;
    padding: 1px 6px;
    margin-left: 6px;
    border-radius: 999px;
    background: var(--pritox-accent, #7FB316);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    vertical-align: middle;
}
.pritox-dash-navlink.active .pritox-nav-count {
    background: var(--pritox-accent, #7FB316);
}