/* ==========================================================================
   Scribd Clone — site.css
   ========================================================================== */

/* ── Base ─────────────────────────────────────────────────────────────────── */
body {
    background-color: #ffffff;
    color: #1a1a1a;
    /* `overflow-x: clip` (not `hidden`): clipping without creating a scroll container,
       so position:sticky sidebars/headers keep working on desktop. */
    overflow-x: clip;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ── Scrollbar hide (carousels) ───────────────────────────────────────────── */
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.hide-scrollbar::-webkit-scrollbar { display: none; }

/* ── Custom scrollbar (dropdowns) ────────────────────────────────────────── */
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 20px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background-color: #94a3b8; }

/* ── Carousel Navigation Buttons ─────────────────────────────────────────── */
/* Sharper, higher-contrast buttons with stronger shadow */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background-color: #ffffff;
    border: 1.5px solid #b0b7c0;          /* darker border → sharper */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18), 0 1px 4px rgba(0,0,0,0.12);
    cursor: pointer;
    z-index: 20;
    transition: all 0.15s ease;
    color: #1a1a1a;                        /* near-black icon → brighter */
    font-size: 13px;
    -webkit-font-smoothing: antialiased;
}
.carousel-btn:hover {
    background-color: #f3f4f6;
    color: #000000;
    border-color: #6b7280;
    box-shadow: 0 8px 20px rgba(0,0,0,0.22), 0 2px 6px rgba(0,0,0,0.14);
}
.carousel-btn.right { right: -22px; }
.carousel-btn.left  { left:  -22px; }

/* ── Document Card ───────────────────────────────────────────────────────── */
/*
   Responsive sizing via CSS custom property + clamp:
   - Mobile  (<640px):  2 cols  → each card ≈ (100vw − gaps) / 2
   - iPad    (768-1023): 3.5 cols visible → fixed ~200px with scroll
   - Desktop (≥1024px): 6 cols → fixed width in carousel
   In a CSS grid (taxonomy level4 / search) the grid-cols-* Tailwind classes
   handle columns; here we only control the carousel card fixed width.
*/
.doc-card {
    /* Carousel context: fixed width, snap */
    min-width: 160px;
    width: 160px;
    scroll-snap-align: start;
}
/* Mobile: slightly wider cards so 2 nearly fill the screen */
@media (max-width: 639px) {
    .doc-card {
        min-width: calc(50vw - 24px);
        width:     calc(50vw - 24px);
    }
}
/* Tablet 640–767px: 3 cards visible comfortably */
@media (min-width: 640px) and (max-width: 767px) {
    .doc-card { min-width: 180px; width: 180px; }
}
/* Tablet 768–1023px: ~3.5 cols — 200px cards let the 4th peek */
@media (min-width: 768px) and (max-width: 1023px) {
    .doc-card { min-width: 200px; width: 200px; }
}
/* Desktop ≥1024px: 6 columns visible in a 1200px container */
@media (min-width: 1024px) {
    .doc-card { min-width: 178px; width: 178px; }
}
@media (min-width: 1280px) {
    .doc-card { min-width: 186px; width: 186px; }
}

/* ── Category Card (homepage explore carousel) ────────────────────────────── */
.category-card:hover { border-color: #d1d5db; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }
.category-card:hover .view-all-text { color: #008560; }
.category-card:hover .view-all-icon { transform: translateX(4px); color: #008560; }

/* ── Stacked-paper graphic (Explore subcategory cards) ───────────────────── */
.stacked-paper-graphic {
    position: absolute;
    right: -15px;
    top: 50%;
    transform: translateY(-50%) rotate(8deg);
    width: 100px;
    height: 120px;
    background: #ffffff;
    border: 1px solid #d1d5db;            /* slightly darker border */
    box-shadow: -2px 4px 14px rgba(0,0,0,0.10);
    border-radius: 4px;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 1;
}
.stacked-paper-graphic::before,
.stacked-paper-graphic::after {
    content: '';
    position: absolute;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 4px;
}
.stacked-paper-graphic::before {
    top: 4px; left: -4px; right: 4px; bottom: -4px;
    z-index: -1;
    transform: rotate(-3deg);
    box-shadow: -1px 2px 8px rgba(0,0,0,0.06);
}
.stacked-paper-graphic::after {
    top: 8px; left: -8px; right: 8px; bottom: -8px;
    z-index: -2;
    transform: rotate(-6deg);
}
/* Paper lines — brighter/darker for sharp visibility */
.paper-line          { height: 4px; background: #d1d5db; border-radius: 2px; width: 100%; }
.paper-line.medium   { width: 80%; }
.paper-line.short    { width: 60%; }

/* Hover rotate animation */
.group\/cat:hover .stacked-paper-graphic { transform: translateY(-50%) rotate(12deg); }

/* ── Tab states ──────────────────────────────────────────────────────────── */
.tab-active   { border-bottom: 2px solid #111827; color: #111827; font-weight: 700; }
.tab-inactive { color: #374151; border-bottom: 2px solid transparent; }   /* was #6b7280 → darker */
.tab-inactive:hover { color: #111827; }

/* ── PDF Viewer ──────────────────────────────────────────────────────────── */
/* NOTE: body.single-pdf-layout no longer locks body height/overflow.
   The sticky sidebars (h-[calc(100vh-64px)]) handle their own scroll
   independently, so the body scrolls freely and the footer is always reachable. */

.pdf-toolbar-btn {
    padding: 0.5rem; color: #374151; border-radius: 0.375rem;
    transition: background-color 0.2s; display: flex; align-items: center; justify-content: center;
}
.pdf-toolbar-btn:hover { background-color: #f3f4f6; }

.pdf-sidebar-btn {
    width: 2.5rem; height: 2.5rem; display: flex; flex-direction: column;
    align-items: center; justify-content: center; color: #374151;
    border-radius: 0.375rem; transition: background-color 0.2s;
    margin-bottom: 0.5rem; margin-left: auto; margin-right: auto;
}
.pdf-sidebar-btn:hover { background-color: #f3f4f6; }
.pdf-sidebar-btn.active { background-color: #e5e7eb; color: #000; }

.pdf-page-container { box-shadow: 0 2px 10px rgba(0,0,0,0.1); }

/* ── Action grid buttons (single-doc sidebar) ────────────────────────────── */
.action-grid-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 0.75rem; border-radius: 0.5rem; border: 1px solid transparent;
    transition: all 0.2s; font-size: 0.875rem; color: #374151;
    background-color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.action-grid-btn:hover { border-color: #e5e7eb; background-color: #f9fafb; }

/* ── Sticky PDF floating controls (mobile) ───────────────────────────────── */
.sticky-pdf-controls { position: sticky; top: 130px; float: right; }

/* ── Comments ────────────────────────────────────────────────────────────── */
.comment-list { list-style: none; padding: 0; margin: 0; }
.comment-list .comment { margin-bottom: 2rem; }
.comment-list .children { list-style: none; padding-left: 2rem; margin-top: 1.5rem; border-left: 2px solid #e5e7eb; }
.comment-body { display: flex; gap: 1rem; background: #f9fafb; padding: 1.5rem; border-radius: 0.5rem; border: 1px solid #f3f4f6; }
.comment-author .avatar { border-radius: 50%; width: 48px; height: 48px; object-fit: cover; }
.comment-meta { font-size: 0.875rem; color: #6b7280; margin-bottom: 0.5rem; }
.comment-meta a { color: #6b7280; }
.comment-meta a:hover { color: #111827; text-decoration: underline; }
.comment-content p { margin-bottom: 1rem; color: #374151; line-height: 1.6; }
.comment-content p:last-child { margin-bottom: 0; }
.reply { margin-top: 0.5rem; }
.bypostauthor > .comment-body { border-color: #d1fae5; background: #ecfdf5; }

/* ── Legal / FAQ / Contact pages ─────────────────────────────────────────── */
/* Prevent heading text from overflowing narrow mobile screens */
article.max-w-\[860px\] {
    overflow-x: hidden;      /* contain any overflow inside the card */
}
article.max-w-\[860px\] header h1 {
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}
.legal-content {
    word-break:      break-word;
    overflow-wrap:   break-word;
    overflow-x:      hidden;
    box-sizing:      border-box;
    width:           100%;
    max-width:       100%;
    min-width:       0;
}
.legal-content p    { margin-bottom: 1.25rem; font-size: 15px; color: #374151; line-height: 1.75; }
.legal-content h2   {
    font-size: 1.15rem; font-weight: 700; color: #111827;
    margin-top: 2.5rem; margin-bottom: 1rem;
    padding-bottom: 0.5rem; border-bottom: 1px solid #f3f4f6;
    word-break: break-word; overflow-wrap: break-word;
    box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; display: block;
}
.legal-content h3   {
    font-size: 1.05rem; font-weight: 700; color: #111827;
    margin-top: 1.75rem; margin-bottom: 0.75rem;
    word-break: break-word; overflow-wrap: break-word;
    box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; display: block;
}
.legal-content ul,
.legal-content ol   { margin-bottom: 1.25rem; padding-left: 1.5rem; color: #374151; font-size: 15px; line-height: 1.75; }
.legal-content ul   { list-style-type: disc; }
.legal-content ol   { list-style-type: decimal; }
.legal-content li   { margin-bottom: 0.5rem; }
.legal-content a    { color: #008560; text-decoration: underline; font-weight: 500; word-break: break-all; }
.legal-content a:hover { color: #006c4d; }
.legal-content strong { color: #111827; }

/* Reduce padding on very small screens for legal article containers */
@media (max-width: 480px) {
    article.max-w-\[860px\] { padding: 1.5rem !important; }
    article.max-w-\[860px\] header h1 { font-size: 1.5rem !important; }
}

/* =========================================================================
   PDF VIEWER — Scroll, Zoom, Fullscreen, Print
   ========================================================================= */

/* ── Issue 8: Proper page-by-page scrolling ─────────────────────────────── */
#pdf-render-area {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* Page width: the page fills the frame edge to edge on every screen, up to this maximum
   (1240px = native width of a page image rendered at the default 150 DPI; wider only looks soft).
   Raise it for an even wider page on big desktop screens; secure-viewer.js reads the same value. */
:root { --sv-page-max: 1240px; }

/* GAPS around the PDF pages (change these three numbers to tune them):
     --sv-frame-x   left / right gap between a page and the grey frame on phones and tablets
     --sv-frame-top gap above the first page (all screens; replaces Tailwind's p-2 / lg:p-8 = 8px / 32px)
     --sv-page-gap  grey space above and below each page (the space between two pages is 2x this + 3px line)
   (The fullscreen rule below has a higher specificity and keeps its own padding.) */
:root { --sv-frame-x: 6px; --sv-frame-top: 6px; --sv-page-gap: 6px; }
#pdf-scroll-container { padding-left: var(--sv-frame-x, 6px); padding-right: var(--sv-frame-x, 6px); padding-top: var(--sv-frame-top, 6px); }

/* Desktop: a slightly wider grey frame on the left AND right, so the page never touches the icon rail or the
   "You might also like" column. Set either value to 0 for no frame on that side. */
:root { --sv-frame-left: 16px; --sv-frame-right: 16px; }
@media (min-width: 1024px) {
    #pdf-scroll-container {
        padding-left:  var(--sv-frame-left, 16px);
        padding-right: var(--sv-frame-right, 16px);
        padding-bottom: 12px;
    }
}

#pdf-render-area > [data-page] {
    width: 100%;
    display: flex;
    justify-content: flex-start;   /* + auto margins on .sv-page-box: centred when it fits, reachable from its left edge when zoomed */
    background: #e5e5e5;
    padding: var(--sv-page-gap, 6px) 0;
    border-bottom: 3px solid #d1d5db;  /* clear visual page separator */
}
#pdf-render-area > [data-page]:last-child { border-bottom: none; }

/* Page images/canvases */
#pdf-render-area .pdf-page-canvas {
    display: block;
    width: 100%;
    max-width: var(--sv-page-max, 1240px);
    background: #fff;
    box-shadow: 0 2px 16px rgba(0,0,0,0.12);
    border: 1px solid #e5e7eb;
}

/* ── Issue 1: Zoom wrapper — allows transform without clipping ───────────── */
#pdf-zoom-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform-origin: top center;
    transition: transform 0.2s ease;
}

/* ── Issue 5: Fullscreen — proper scroll inside fullscreen element ───────── */
#pdf-scroll-container {
    overflow-y: auto;        /* allows scroll inside fullscreen */
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;  /* smooth on iOS */
}
#pdf-scroll-container:fullscreen,
#pdf-scroll-container:-webkit-full-screen,
#pdf-scroll-container:-moz-full-screen {
    overflow-y: auto !important;
    background: #323639;
    padding: 24px;
}
#pdf-scroll-container:fullscreen #pdf-render-area,
#pdf-scroll-container:-webkit-full-screen #pdf-render-area,
#pdf-scroll-container:-moz-full-screen #pdf-render-area {
    max-width: 900px;
    margin: 0 auto;
}

/* ── Issue 2: Print — only PDF pages, nothing else ──────────────────────── */
@media print {
    /* Hide everything */
    header,
    footer,
    aside,
    nav,
    .lg\\:flex.w-14,           /* inner left toolbar */
    .lg\\:flex.h-14,           /* top toolbar */
    #panel-related,
    #sheet-overview,
    #sheet-more,
    #sheet-overview-backdrop,
    #sheet-more-backdrop,
    #embed-modal,
    .fixed.bottom-0,           /* mobile bottom bar */
    .lg\\:hidden.bg-white.px-4, /* mobile top info block */
    #mobile-share-block,
    .xl\\:hidden.bg-white,     /* inline related docs */
    [id^="btn-"],              /* all buttons */
    .carousel-btn              { display: none !important; }

    /* Show only PDF render area */
    body, html                 { background: #fff !important; overflow: visible !important; }
    main                       { display: block !important; padding: 0 !important; margin: 0 !important; }
    #pdf-scroll-container      { overflow: visible !important; padding: 0 !important; }
    #pdf-render-area           { display: block !important; }
    #pdf-render-area > [data-page] {
        padding: 0 !important;
        border: none !important;
        background: #fff !important;
        page-break-after: always;
        break-after: page;
        display: block !important;
    }
    #pdf-render-area .pdf-page-canvas {
        width: 100% !important;
        max-width: 100% !important;
        box-shadow: none !important;
        border: none !important;
        page-break-inside: avoid;
        break-inside: avoid;
    }
    /* Remove transform zoom for print */
    #pdf-zoom-wrapper          { transform: none !important; }
}

/* =========================================================================
   PDF TEXT LAYER — transparent text overlay for R2 WebP viewer
   Enables text selection/copy over image-based pages, same as Scribd.
   ========================================================================= */

/* Text layer container — absolutely positioned over each page image */
.pdf-text-layer {
    position:         absolute;
    top:              0;
    left:             0;
    overflow:         hidden;
    line-height:      1;
    pointer-events:   auto;
    user-select:      text;
    -webkit-user-select: text;
    z-index:          2;
}

/* Text spans rendered by PDF.js — transparent by default, visible when selected */
.pdf-text-layer span,
.pdf-text-layer br {
    color:            transparent;
    position:         absolute;
    white-space:      pre;
    cursor:           text;
    transform-origin: 0 0;
    /* Transparent fill — text is invisible until selected */
    -webkit-text-fill-color: transparent;
}

/* Show dark highlight when user selects text */
.pdf-text-layer span::selection,
.pdf-text-layer ::selection {
    background:            rgba(0, 133, 96, 0.25); /* brand-green highlight */
    -webkit-text-fill-color: transparent;
}

/* Ensure each page wrapper allows the text layer to overflow correctly */
#pdf-render-area > [data-page] {
    position: relative; /* text layer uses position:absolute inside this */
}

/* =========================================================================
   DOWNLOAD SHEET — radio button styling
   ========================================================================= */
#dl-format-options label {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f3f4f6;
}
#dl-format-options label:last-child {
    border-bottom: none;
}

/* =========================================================================
   WORD-LEVEL TEXT LAYER (secure-viewer v3)
   Appended by PyMuPDF pipeline upgrade. No visual changes to existing UI.
   ========================================================================= */

/* Page box: relative container for image + text layer */
.sv-page-box {
    position: relative;
    display: inline-block;
    max-width: var(--sv-page-max, 1240px);
    width: 100%;
    background: #fff;
    box-shadow: 0 2px 14px rgba(0,0,0,0.18);
}

/* Image fills the box */
.sv-page-box .pdf-page-img {
    display: block;
    width: 100%;
    height: auto;
}

/* Text layer: absolutely covers the image */
.sv-text-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none; /* enabled by JS once spans are built */
    /* transparent text — visible only when selected */
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* Each word span — font-size set in px by JS (ResizeObserver) */
.sv-text-layer span {
    position: absolute;
    cursor: text;
    pointer-events: all;
    user-select: text;
    -webkit-user-select: text;
    white-space: nowrap;
    overflow: hidden;
    /* Text is transparent so image shows through, but selectable */
    color: transparent;
    -webkit-text-fill-color: transparent;
    line-height: 1;
    /* font-size set dynamically by JS to match word height in px */
    font-size: 12px; /* initial fallback — overwritten immediately by ResizeObserver */
}

/* Browser selection highlight — brand-green tint */
.sv-text-layer span::selection {
    background: rgba(0, 133, 96, 0.40);
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.sv-text-layer span::-moz-selection {
    background: rgba(0, 133, 96, 0.40);
    color: transparent;
}

/* Scale wrapper — used instead of CSS zoom (Issue 5 fix) */
#sv-scale-wrap {
    transform-origin: top center;
    width: 100%;
    will-change: transform;
}


/* =========================================================================
   PAGE CONTENT — page.php (.page-content) and singlel.php (.entry-content)
   Moved from inline <style> blocks — no PHP values, pure static CSS.
   ========================================================================= */
.page-content p,
.entry-content p                { margin-bottom: 1.5rem; }
.page-content h1, .page-content h2, .page-content h3, .page-content h4,
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4 {
    color: #111827; font-weight: 700;
    margin-top: 2.5rem; margin-bottom: 1.25rem; line-height: 1.2;
}
.page-content h2  { font-size: 2rem;    border-bottom: 1px solid #e5e7eb; padding-bottom: 0.5rem; }
.page-content h3  { font-size: 1.5rem; }
.entry-content h2 { font-size: 1.875rem; }
.entry-content h3 { font-size: 1.5rem; }
.page-content ul, .entry-content ul  { list-style-type: disc;    padding-left: 1.5rem; margin-bottom: 1.5rem; }
.page-content ol, .entry-content ol  { list-style-type: decimal; padding-left: 1.5rem; margin-bottom: 1.5rem; }
.page-content li, .entry-content li  { margin-bottom: 0.75rem; }
.page-content a,  .entry-content a   { color: #008560; text-decoration: underline; font-weight: 500; transition: color 0.2s; }
.page-content a:hover, .entry-content a:hover { color: #006c4d; }
.page-content blockquote  { border-left: 4px solid #e5e7eb; padding-left: 1.25rem; margin-left: 0; color: #4b5563; font-size: 1.125rem; }
.entry-content blockquote { border-left: 4px solid #008560; padding-left: 1rem;    margin-left: 0; font-style: italic; color: #4b5563; }
.page-content table  { width: 100%; border-collapse: collapse; margin-bottom: 2rem; }
.page-content th, .page-content td { border: 1px solid #e5e7eb; padding: 0.75rem 1rem; text-align: left; }
.page-content th { background-color: #f9fafb; font-weight: 600; color: #111827; }
.page-content img, .entry-content img { border-radius: 0.375rem; max-width: 100%; height: auto; margin: 2rem 0; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.entry-content figure    { margin: 2rem 0; }
.entry-content figcaption { text-align: center; font-size: 0.875rem; color: #6b7280; margin-top: 0.5rem; }

/* =========================================================================
   CATEGORY PICKER WIDGET — scribd_render_cat_picker() in functions.php
   Moved from inline <style> per-render — one copy is enough.
   ========================================================================= */
.scp-wrap     { position: relative; }
.scp-input    { width: 100%; padding: 10px 14px; border: 1.5px solid #d1d5db; border-radius: 8px; font-size: 15px; box-sizing: border-box; outline: none; font-family: inherit; transition: border-color .15s; }
.scp-input:focus { border-color: #008560; }
.scp-dropdown { display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #fff; border: 1.5px solid #d1d5db; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); z-index: 99999; max-height: 320px; overflow-y: auto; }
@media (max-width: 768px) { .scp-dropdown { z-index: 999999; max-height: 200px; position: fixed; left: 16px; right: 16px; width: auto; } }
.scp-wrap.open .scp-dropdown { display: block; }
.scp-item     { padding: 9px 14px 9px 28px; font-size: 14px; color: #374151; cursor: pointer; transition: background .1s; }
.scp-item.scp-parent { padding-left: 14px; font-weight: 700; color: #111; }
.scp-item:hover, .scp-item.focused { background: #f0fdf4; color: #008560; }
.scp-item.selected { background: #f0fdf4; color: #008560; font-weight: 700; }
.scp-empty    { padding: 16px 14px; font-size: 14px; color: #9ca3af; text-align: center; }
.scp-clear    { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #9ca3af; cursor: pointer; font-size: 14px; padding: 4px; }

/* =========================================================================
   DASHBOARD — page-dashboard.php (.ds-wrap, .ds-card, etc.)
   Moved from inline <style> block at top of dashboard template.
   ========================================================================= */
.ds-wrap    { display: flex; min-height: calc(100vh - 130px); background: #f3f4f6; }
.ds-side    { width: 240px; flex-shrink: 0; background: #fff; border-right: 1px solid #e5e7eb; padding: 24px 0; display: flex; flex-direction: column; }
.ds-main    { flex: 1; padding: 32px 28px; min-width: 0; overflow-x: hidden; }
.ds-nav-a   { display: flex; align-items: center; gap: 10px; padding: 10px 20px; font-size: 14px; font-weight: 500; color: #374151; text-decoration: none; border-left: 3px solid transparent; transition: all .12s; }
.ds-nav-a:hover { background: #f9fafb; color: #111; }
.ds-nav-a.on    { background: #f0fdf4; color: #008560; border-left-color: #008560; font-weight: 700; }
.ds-nav-a i { width: 18px; text-align: center; font-size: 14px; }
.ds-card    { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 24px; margin-bottom: 24px; }
.ds-input   { width: 100%; padding: 10px 14px; border: 1.5px solid #d1d5db; border-radius: 8px; font-size: 15px; box-sizing: border-box; outline: none; font-family: inherit; transition: border-color .15s; }
.ds-input:focus { border-color: #008560; }
.ds-label   { display: block; font-size: 14px; font-weight: 600; color: #374151; margin-bottom: 6px; }
.ds-btn     { background: #008560; color: #fff; font-weight: 700; font-size: 15px; padding: 11px 24px; border: none; border-radius: 9px; cursor: pointer; transition: background .15s; }
.ds-btn:hover { background: #006b4e; }
.ds-btn-sm  { font-size: 13px; padding: 7px 14px; border-radius: 7px; }
.ds-btn-red { background: #dc2626; }
.ds-btn-red:hover { background: #b91c1c; }
.ds-btn-gray { background: #f3f4f6; color: #374151; border: 1px solid #d1d5db; }
.ds-btn-gray:hover { background: #e5e7eb; }
.ds-empty   { text-align: center; padding: 52px 24px; color: #9ca3af; }
.ds-empty i { font-size: 44px; margin-bottom: 14px; display: block; }
.ds-dropzone { border: 2.5px dashed #d1d5db; border-radius: 12px; padding: 36px 24px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; background: #fafafa; }
.ds-dropzone.drag     { border-color: #008560; background: #f0fdf4; }
.ds-dropzone.has-file { border-color: #008560; border-style: solid; background: #f0fdf4; }
.ds-progress-wrap { height: 8px; background: #e5e7eb; border-radius: 99px; overflow: hidden; margin: 10px 0; }
.ds-progress-bar  { height: 100%; background: #008560; border-radius: 99px; width: 0%; transition: width .3s; }
.ds-step    { display: none; }
.ds-step.active { display: block; }
@media (max-width: 640px) {
    .ds-wrap  { flex-direction: column; }
    .ds-side  { width: 100%; flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid #e5e7eb; padding: 8px 0; }
    .ds-nav-a { flex: 1; min-width: 0; border-left: none; border-bottom: 3px solid transparent; justify-content: center; flex-direction: column; align-items: center; padding: 8px 4px; font-size: 11px; text-align: center; gap: 3px; }
    .ds-nav-a.on { border-bottom-color: #008560; border-left: none; }
    .ds-nav-a span.ds-label-text { display: block; font-size: 10px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60px; }
    .ds-nav-a i { width: auto; font-size: 16px; margin: 0; }
    .ds-main  { padding: 18px 14px; }
}

/* =========================================================================
   META FIELDS — inc/meta-fields.php admin sidebar box
   Moved from inline <style> inside the meta box render function.
   ========================================================================= */
.sm-row  { margin-bottom: 10px; font-size: 13px; line-height: 1.6; }
.sm-ok   { color: #008560; font-weight: 600; }
.sm-warn { color: #b45309; font-weight: 600; }
.sm-bad  { color: #b91c1c; font-weight: 600; }
.sm-dim  { color: #6b7280; font-size: 12px; display: block; margin-top: 2px; }
.sm-pill { display: inline-block; padding: 2px 8px; border-radius: 9999px; font-size: 11px; font-weight: 700; letter-spacing: .3px; }
.sm-pill-blue  { background: #dbeafe; color: #1d4ed8; }
.sm-pill-green { background: #dcfce7; color: #15803d; }
.sm-pill-red   { background: #fee2e2; color: #b91c1c; }
.sm-pill-gray  { background: #f3f4f6; color: #6b7280; }
.sm-pill-amber { background: #fef3c7; color: #92400e; }
#sm-btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
#sm-log { margin-top: 8px; font-size: 12px; color: #555; font-family: monospace; min-height: 16px; }
.sm-progress-wrap { background: #e5e7eb; border-radius: 4px; height: 6px; margin: 6px 0 2px; overflow: hidden; }
.sm-progress-bar  { height: 6px; background: #2563eb; border-radius: 4px; transition: width .4s ease; }





/* Mobile nav close button visibility */
#mobile-nav-close {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f3f4f6;
}

/* Tablet header search (640–1023px): fills the free space between the logo and the
   icons, instead of a fixed 256–280px box that overflowed narrow tablets. */
.tablet-search-form {
    flex: 1 1 0;
    min-width: 140px;
    max-width: 480px;
    margin-inline: auto;          /* centred in the free space on wide tablets */
}
.tablet-search-form input[type="search"] { font-size: 14px; }
@media (min-width: 640px) and (max-width: 767.98px) {
    .tablet-search-form { min-width: 120px; margin-inline: 0; }
}


/* Single-document page — every top-level container must not overflow right */
.single-document body,
body.single-document,
body.posttype-document {
    /* clip, not hidden: `hidden` made <body> a scroll container and broke the
       sticky desktop sidebars on single-document pages. */
    overflow-x: clip;
    max-width: 100vw;
}

/* Issue 6: title break-words safety net for any missed selectors */
.single-document h1,
body.posttype-document h1 {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}


@media (max-width: 640px) {
    .single-document h1,
    body.posttype-document h1 {
        font-size: 17px !important;
        line-height: 1.3 !important;
    }
}

/* Ensure PDF render area has bottom padding = bottom bar height
   so last page isn't hidden behind the fixed bar */
@media (max-width: 1024px) {
    #pdf-render-area,
    #pdf-scroll-container {
        padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
    }
}


/* Issue 2a: Desktop find panel — positioned as floating modal from sidebar */
@media (min-width: 1024px) {
    #panel-find {
        position: fixed !important;
        /* BUG FIX: was top:60px with the default z-90, i.e. BEHIND the sticky header
           (z-300, taller than 60px) — its title and close button were hidden under it.
           Now sits below the real header height (set by site.js) and above it in z-order. */
        top: calc(var(--scribd-header-h, 64px) + 12px) !important;
        z-index: 400 !important;
        right: 16px !important;
        left: auto !important;
        width: 420px !important;
        max-height: calc(100vh - var(--scribd-header-h, 64px) - 28px) !important;
        border-radius: 12px !important;
        box-shadow: 0 8px 40px rgba(0,0,0,0.18) !important;
        border: 1px solid #e5e7eb !important;
        transform: none !important;
        pointer-events: auto !important;
        display: none; /* hidden by default; JS shows/hides with display:flex */
        flex-direction: column !important;
    }
    #panel-find.panel-open {
        display: flex !important;
    }
}


/* Issue 7: bottom bar — force fixed with GPU compositing to prevent
   stacking context issues caused by parent transforms (translate-y etc).
   transform:translateZ(0) creates its own compositing layer so fixed
   children work correctly even when parent has a CSS transform. */
#doc-bottom-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 200 !important;
    transform: translateZ(0);
    will-change: transform;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    -webkit-transform: translateZ(0);
}


/* ==========================================================================
   Mobile single-document panels + horizontal overflow
   --------------------------------------------------------------------------
   ROOT CAUSE of the "close icon hidden under the header" bug: the full-screen
   panels (#panel-related, #panel-pageview, #panel-find) are `fixed inset-0` with
   z-index 60-90, but the sticky site header is z-[300]. The header was painted
   over the top bar of the panel, hiding its title and close button.
   Fix = stack the panels/sheets above the header (no layout hacks needed).

   The old workaround `html, body { overflow-x: hidden }` is what broke desktop:
   hidden on html AND body turns them into scroll containers, so every
   `position: sticky` element (header, sidebars) stops sticking. Use it on
   mobile only, and prefer `clip` where supported.
   ========================================================================== */
@media (max-width: 1023.98px) {
    #panel-related,
    #panel-pageview,
    #panel-find           { z-index: 400 !important; }

    #sheet-overview-backdrop,
    #sheet-more-backdrop,
    #sheet-download-backdrop { z-index: 390 !important; }
    #sheet-overview,
    #sheet-more,
    #sheet-download          { z-index: 400 !important; }

    /* Top bars of the full-screen panels respect the iPhone notch / status bar. */
    #panel-related > div:first-child,
    #panel-pageview > div:first-child,
    #panel-find > div:first-child {
        padding-top: max(0.75rem, env(safe-area-inset-top, 0px));
    }

    html, body { max-width: 100%; overflow-x: hidden; }
    @supports (overflow: clip) {
        html, body { overflow-x: clip; }
    }
}


/* ==========================================================================
   Desktop (and all-size) modals: Report / Embed
   --------------------------------------------------------------------------
   They were z-100, i.e. under the sticky header (z-300), so on desktop the
   header was drawn over the top of the dialog (title + close icon). Stack them
   above the header and let tall dialogs scroll instead of overflowing.
   ========================================================================== */
#report-modal,
#embed-modal { z-index: 400 !important; overflow-y: auto; }
#report-modal > div,
#embed-modal  > div {
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    margin: auto;
}


/* ==========================================================================
   In-document search highlights (words are transparent spans in .sv-text-layer)
   ========================================================================== */
.sv-text-layer span.sv-hl {
    background: rgba(255, 214, 0, 0.45);
    border-radius: 2px;
    mix-blend-mode: multiply;            /* page text stays readable underneath */
}
.sv-text-layer span.sv-hl.sv-hl-current {
    background: rgba(255, 140, 0, 0.60);
    outline: 2px solid rgba(255, 120, 0, 0.95);
    outline-offset: 0;
}
/* keep the hit clear of the sticky header when scrolled into view */
.sv-page-wrap { scroll-margin-top: 84px; }


/* ==========================================================================
   Crawlable page text (written into the HTML source by single-document.php)
   --------------------------------------------------------------------------
   Same idea as the viewer's own text layer: the page's real text sits over the page area,
   invisible (transparent) and not selectable until the positioned word layer replaces it.
   It is NOT display:none and NOT moved off-screen.
   ========================================================================== */
.sv-seo-text {
    position: absolute;
    inset: 0;
    overflow: hidden;
    padding: 16px;
    color: transparent;
    font-size: 14px;
    line-height: 1.5;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}
.sv-seo-text p { margin: 0; color: transparent; }


/* Home hero: space above the in-flow site title (the precompiled Tailwind build has no pt-14 / md:pt-16 / lg:pt-20). */
.hero-title-wrap { padding-top: 56px; }
@media (min-width: 768px)  { .hero-title-wrap { padding-top: 64px; } }
@media (min-width: 1024px) { .hero-title-wrap { padding-top: 80px; } }


/* Document cover: in the HTML source for search engines, not shown in the layout.
   Visually-hidden (clip) pattern — not display:none. */
.doc-cover-seo {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   RESPONSIVE LAYER  (v8.4.0)  — found with a real-browser audit at 16 screen widths (320–2560px)
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* 1. Utility classes the templates use but the pre-built tailwind.min.css does not contain
      (without these the class silently did nothing). z-[300] on <header> is deliberately NOT defined:
      it would put the header on top of the full-screen mobile panels. */
.align-middle { vertical-align: middle; }
.w-auto       { width: auto; }
.pr-4         { padding-right: 1rem; }
.px-0\.5      { padding-left: .125rem; padding-right: .125rem; }
.gap-x-3      { column-gap: .75rem; }
.gap-y-1      { row-gap: .25rem; }
.bg-yellow-200 { background-color: #fef08a; }
.bg-brand-green\/10 { background-color: rgba(0, 133, 96, .1); background-color: color-mix(in srgb, var(--color-brand-green, #008560) 10%, transparent); }
.max-w-\[34vw\] { max-width: 34vw; }
.shadow-\[-2px_0_10px_rgba\(0\,0\,0\,0\.05\)\] { box-shadow: -2px 0 10px rgba(0,0,0,.05); }
.shadow-\[0_-4px_20px_rgba\(0\,0\,0\,0\.08\)\] { box-shadow: 0 -4px 20px rgba(0,0,0,.08); }
.shadow-\[0_2px_10px_rgba\(0\,0\,0\,0\.1\)\] { box-shadow: 0 2px 10px rgba(0,0,0,.1); }
@media (min-width: 768px)  { .md\:gap-3 { gap: .75rem; } .md\:text-\[22px\] { font-size: 22px; } }
@media (min-width: 1280px) { .xl\:pb-10 { padding-bottom: 2.5rem; } }

/* 2. Long words / file names without spaces (SSC_CGL_2024_Tier1_Paper_Solutions.pdf) wrapped instead of
      being cut off at the card edge. Only breaks when the word would otherwise overflow. */
h1, h2, h3, h4, .line-clamp-1, .line-clamp-2, .line-clamp-3, .ds-uploads-table td { overflow-wrap: anywhere; }

/* 3. Document page, desktop. The "You might also like" column shows from 1440px, 20rem wide (24rem from
      1700px), and is STICKY like the left column. Below 1440px the same list is shown under the viewer, so the
      PDF page never gets squeezed on smaller laptops. (To show it earlier/later change the two 1440px values.) */
.single-doc-aside-right { display: none; width: var(--sv-related-w, 20rem); }
:root { --sv-related-w: 20rem; }                     /* related-docs column: 320px (same as the left column) ... */
@media (min-width: 1700px) { :root { --sv-related-w: 24rem; } }   /* ... and 384px on big screens. Change these two numbers to resize it. */
@media (min-width: 1440px) {
    .single-doc-aside-right { display: block; }
    .single-doc-related-below { display: none; }
}
@media (min-width: 1024px) { .single-doc-related-below { padding-bottom: 2.5rem; } }
/* the title in the left column scales with the screen instead of staying at 30px */
.single-doc-aside-left .text-3xl { font-size: clamp(22px, 1.9vw, 30px); }

/* 4. Touch screens ───────────────────────────────────────────────────────────────────────────── */
@media (pointer: coarse) {
    /* iOS Safari zooms the whole page when a field with text under 16px is focused */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
    select, textarea { font-size: 16px !important; }

    /* footer link lists: 32px tall touch rows instead of 20px */
    #site-footer li > a { display: inline-flex; align-items: center; min-height: 32px; }

    /* small icon buttons keep their size but get an invisible 10px extra touch area on every side */
    .scribd-bookmark-btn:not(.absolute):not(.fixed),
    button.text-gray-400.transition-colors:not(.absolute):not(.fixed),
    #btn-mobile-readmore { position: relative; }
    .scribd-bookmark-btn::after,
    button.text-gray-400.transition-colors::after,
    button.absolute.right-3.text-gray-500::after,
    #btn-mobile-readmore::after { content: ""; position: absolute; inset: -10px; }
    header a.flex.items-center.gap-1\.5 { min-height: 40px; }
    /* native checkboxes / radios (13px) are hard to hit with a finger */
    input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }
}

/* 5. Search results (list view) on phones: smaller cover + smaller title so the text column is usable */
@media (max-width: 639px) {
    #search-view-list article { padding: 12px; }
    #search-view-list article .w-\[120px\] { width: 84px; height: 112px; margin-right: 12px; }
    #search-view-list article h2 { font-size: 16px; line-height: 1.3; padding-right: 0; }
}

/* 6. Dashboard "My Uploads": a 540px-wide table forced a hidden sideways scroll on phones (Status, Views,
      Date and the Actions column were off-screen). Under 640px every row becomes a card. */
@media (max-width: 639px) {
    .ds-uploads-table { min-width: 0 !important; display: block; }
    .ds-uploads-table thead { display: none; }
    .ds-uploads-table tbody { display: block; }
    .ds-uploads-table tr { display: block; margin-bottom: 12px; border: 1px solid #e5e7eb !important; border-radius: 10px; padding: 4px 0; background: #fff; }
    .ds-uploads-table td { display: flex !important; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 14px !important; border: 0; text-align: right; }
    .ds-uploads-table td::before { content: attr(data-label); flex: 0 0 auto; font-size: 12px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .03em; text-align: left; }
    .ds-uploads-table td:first-child { display: block !important; text-align: left; padding-top: 12px !important; border-bottom: 1px solid #f3f4f6; }
    .ds-uploads-table td:first-child::before { display: none; }
    .ds-uploads-table td:last-child > div { justify-content: flex-end; }
}

/* 7. Phones held sideways (≈667×375): the fixed header + two-row bottom bar + stacked floating controls left
      ~200px for reading. Bottom bar becomes ONE row, floating controls ONE row, intro text is trimmed. */
@media (max-width: 1023px) and (orientation: landscape) and (max-height: 520px) {
    :root { --sv-bb-h: 52px; }
    .pb-\[112px\] { padding-bottom: var(--sv-bb-h); }
    .sv-bottombar { flex-direction: row !important; align-items: center; }
    .sv-bb-tabs { border-bottom: 0 !important; background: transparent !important; padding: 6px 8px !important; flex: 1 1 auto; min-width: 0; }
    .sv-bb-actions { padding: 4px 8px !important; gap: 6px !important; flex: 0 0 auto; }
    .sv-bb-actions button.w-11 { width: 40px; height: 40px; }
    .sv-bb-actions .scribd-open-download-sheet { flex: 0 0 auto !important; padding: 8px 14px !important; font-size: 14px !important; }
    #mobile-page-counter-bar { flex-direction: row !important; align-items: center !important; gap: 6px !important; }
    .sv-m-intro { padding-top: 8px; padding-bottom: 8px; }
    .sv-m-intro h1 { font-size: 17px; line-height: 1.25; margin-bottom: 4px; }
    .sv-m-intro #mobile-desc-short, .sv-m-intro #btn-mobile-readmore { display: none; }
}

/* 8. The PDF frame: nothing may ever spill sideways over the left / right columns (wide ad units, long
      placeholders, zoomed pages). Zoomed in, the frame becomes a sideways scroller instead. */
#pdf-scroll-container { overflow-x: clip; }
#pdf-scroll-container.sv-zoomed { overflow-x: auto; }
.sv-page-box { margin-left: auto; margin-right: auto; flex: 0 0 auto; }
#pdf-render-area .pdf-page-canvas { margin-left: auto; margin-right: auto; flex: 0 0 auto; }

/* The viewer has its own pinch / zoom buttons. Telling the browser this area scrolls but does not pinch-zoom
   natively stops the two zooms fighting each other (the zoom value used to jump around during a pinch). */
#pdf-scroll-container { touch-action: pan-x pan-y; }