/* ==========================================================================
   DotCommissar Publications — Frontend Styles  v3.0.0
   Sections:
     1. Device-visibility helpers
     2. App wrapper
     3. Search row
     4. Filter row
     5. Results info
     6. Issue grid (thumbnail cards)
     7. Pagination
     8. Flipbook modal
     9. Article rows (search mode)
    10. OCR section (search mode)
    11. In-modal PDF text search panel
    12. Utilities (spinner, empty state, version footer)
   ========================================================================== */

/* ── 1. Device-visibility helpers ──────────────────────────────────────────
   Controlled by "Display Settings" in plugin admin.
   Classes injected by the shortcode PHP based on stored options.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .dcp-hide-mobile  { display: none !important; }
}
@media (min-width: 768px) {
    .dcp-hide-desktop { display: none !important; }
}

/* ── 2. App wrapper ─────────────────────────────────────────────────────────
   ─────────────────────────────────────────────────────────────────────────── */
.dcp-app {
    font-family: inherit;
    box-sizing: border-box;
    max-width: 100%;
}
.dcp-app *, .dcp-app *::before, .dcp-app *::after {
    box-sizing: inherit;
}

/* ── 3. Search row (full width) ─────────────────────────────────────────────
   ─────────────────────────────────────────────────────────────────────────── */
.dcp-search-row {
    margin-bottom: 10px;
}
.dcp-search-wrap {
    position: relative;
    width: 100%;
}
.dcp-search-input {
    width: 100%;
    padding: 10px 72px 10px 18px;
    border: 1px solid #ddd;
    border-radius: 24px;
    font-size: 15px;
    line-height: 1.4;
    background: #f5f5f5;
    box-shadow: 0 1px 4px rgba(0,0,0,.10);
    transition: border-color .2s, box-shadow .2s, background .2s;
    box-sizing: border-box;
    /* hide the native browser X on type="search" */
    -webkit-appearance: none;
    appearance: none;
}
.dcp-search-input::-webkit-search-cancel-button { display: none; }
.dcp-search-input:focus {
    border-color: #2271b1;
    outline: none;
    background: #fff;
    box-shadow: 0 1px 6px rgba(34,113,177,.25);
}
/* Inline X clear button */
.dcp-search-clear-x {
    position: absolute;
    right: 38px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #888;
    font-size: 14px;
    line-height: 1;
    padding: 4px 5px;
    transition: color .15s;
}
.dcp-search-clear-x:hover { color: #333; }
/* Magnifying glass icon */
.dcp-search-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    pointer-events: none;
    display: flex;
    align-items: center;
}

/* ── 4. Filter row ──────────────────────────────────────────────────────────
   Contains: year / category / section / author / publication dropdowns,
   and the Clear Search button. Sort toggle lives in the pagination bar.
   ─────────────────────────────────────────────────────────────────────────── */
.dcp-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
}

/* Styled <select> — SVG chevron replaces the native dropdown arrow */
.dcp-select {
    padding: 8px 32px 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    min-width: 120px;
    cursor: pointer;
}
.dcp-select:focus {
    border-color: #2271b1;
    outline: none;
}

/* Pagination row: sort toggle + page numbers sit in one centred flex line */
.dcp-pager-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
    margin-bottom: 32px;
}
.dcp-pager-row .dcp-pagination {
    margin-bottom: 0;
    flex-wrap: wrap;
}
/* Sort toggle — sits at the left of the pager row */
.dcp-sort-btn {
    padding: 6px 14px;
    background: #f0f0f0 !important;
    color: #333 !important;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, color .15s;
    flex-shrink: 0;
}
.dcp-sort-btn:hover { background: #e0e0e0 !important; color: #111 !important; }
/* Thin separator between sort button and page numbers */
.dcp-pager-divider {
    display: inline-block;
    width: 1px;
    height: 28px;
    background: #ddd;
    margin: 0 8px;
    flex-shrink: 0;
}

/* Clear button — JS toggles display when search/filters are active */
.dcp-clear-btn {
    padding: 8px 14px;
    background: #e8f0f8 !important;
    color: #2271b1 !important;
    border: 1px solid #b3cde8;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, color .15s;
    flex-shrink: 0;
}
.dcp-clear-btn:hover { background: #d0e4f5 !important; color: #135e96 !important; }

/* ── 5. Results info ────────────────────────────────────────────────────────
   ─────────────────────────────────────────────────────────────────────────── */
.dcp-results-info {
    font-size: 13px;
    color: #666;
    margin-bottom: 12px;
    min-height: 20px;
}

/* ── 6. Issue grid (thumbnail cards) ───────────────────────────────────────
   ─────────────────────────────────────────────────────────────────────────── */
.dcp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 28px;
}

.dcp-card {
    cursor: pointer;
    text-align: center;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e0e0e0;
    transition: box-shadow .18s, transform .18s;
    list-style: none;
}
.dcp-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.14);
    transform: translateY(-2px);
}

/* Thumbnail image — 8:11 aspect ratio (portrait magazine page) */
.dcp-card-thumb {
    width: 100%;
    aspect-ratio: 8 / 11;
    object-fit: cover;
    display: block;
    background: #f0f0f0;
}
.dcp-card-thumb-placeholder {
    width: 100%;
    aspect-ratio: 8 / 11;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8e8e8;
    color: #999;
    font-size: 13px;
}

.dcp-card-label {
    padding: 8px 6px;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    border-top: 1px solid #e8e8e8;
    line-height: 1.3;
}
/* Optional meta line — suppressed for Technically Speaking cards (see JS) */
.dcp-card-meta {
    padding: 4px 6px 6px;
    font-size: 11px;
    color: #777;
    border-top: 1px solid #f0f0f0;
    line-height: 1.4;
    text-align: left;
    word-break: break-word;
}

/* Skeleton loading animation */
.dcp-card-skeleton .dcp-card-thumb-placeholder {
    animation: dcp-pulse 1.4s ease-in-out infinite;
}
@keyframes dcp-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .5; }
}

/* ── 7. Pagination ──────────────────────────────────────────────────────────
   Rendered both above and below the grid.
   Button text forced to #333 — some themes override to white.
   ─────────────────────────────────────────────────────────────────────────── */
.dcp-pagination {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 32px;
}
.dcp-page-btn {
    padding: 6px 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff !important;
    color: #333 !important;
    cursor: pointer;
    font-size: 14px;
    transition: background .15s, color .15s;
}
.dcp-page-btn:hover    { background: #f0f0f0 !important; color: #333 !important; }
.dcp-page-btn.active   { background: #2271b1 !important; color: #fff !important; border-color: #2271b1; }
.dcp-page-btn:disabled { opacity: .4; cursor: default; color: #333 !important; }

/* ── 8. Flipbook modal ──────────────────────────────────────────────────────
   ─────────────────────────────────────────────────────────────────────────── */

.dcp-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dcp-modal[hidden] { display: none; }

.dcp-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.78);
    cursor: pointer;
}

/* Modal container: 90 vw × 90 vh, dark */
.dcp-modal-content {
    position: relative;
    z-index: 1;
    background: #1a1a1a;
    border-radius: 6px;
    width: 90vw;
    max-width: 90vw;
    height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.6);
}

/* Header: CSS grid — [search | title (centred) | actions]
   grid-template-columns: auto 1fr auto ensures the title truly centres
   regardless of the width of the left (search) and right (actions) groups. */
.dcp-modal-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding: 10px 16px;
    background: #111;
    border-bottom: 1px solid #333;
    flex-shrink: 0;
}
.dcp-modal-search-left {
    grid-column: 1;
    margin-right: 6px;
    flex-shrink: 0;
}
.dcp-modal-title {
    grid-column: 2;
    color: #ddd;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 8px;
}
.dcp-modal-actions {
    grid-column: 3;
    display: flex;
    align-items: center;
    gap: 4px;
}
.dcp-modal-action-btn {
    background: none;
    border: none;
    color: #aaa;
    cursor: pointer;
    padding: 5px 7px;
    line-height: 1;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .15s, background .15s;
}
.dcp-modal-action-btn:hover { color: #fff; background: rgba(255,255,255,.1); }
.dcp-modal-close {
    background: none;
    border: none;
    color: #aaa;
    font-size: 22px;
    cursor: pointer;
    padding: 2px 6px;
    line-height: 1;
    border-radius: 3px;
    transition: color .15s, background .15s;
    margin-left: 4px;
}
.dcp-modal-close:hover { color: #fff; background: rgba(255,255,255,.1); }

/* Fullscreen */
.dcp-modal-content:-webkit-full-screen { width: 100%; height: 100%; max-width: none; border-radius: 0; }
.dcp-modal-content:-moz-full-screen    { width: 100%; height: 100%; max-width: none; border-radius: 0; }
.dcp-modal-content:fullscreen          { width: 100%; height: 100%; max-width: none; border-radius: 0; }

/* Flipbook canvas area.
   overflow:auto enables native scroll for pan when canvas overflows at zoom > 1.
   Pointer-event drag (JS) handles mouse click-drag. */
.dcp-flipbook-wrap {
    flex: 1;
    position: relative;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background: #2a2a2a;
    user-select: none;
}
.dcp-flipbook {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12px 0 16px;
    min-width: 100%;
    min-height: 100%;
}

/* Individual page container — sized to its canvas by JS */
.dcp-page {
    position: relative;
    flex-shrink: 0;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0,0,0,.5);
    display: flex;
    align-items: center;
    justify-content: center;
}
.dcp-page canvas {
    display: block;
    max-width: 100%;
    max-height: 100%;
    pointer-events: none;
}

/* Loading state */
.dcp-page-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    color: #999;
    font-size: 13px;
}

/* Footer bar: ‹ prev | Page N of M | next ›
   Arrows live here (not inside the scrollable wrap) so they remain
   visible at all zoom levels. */
.dcp-flipbook-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 4px 16px;
    background: #111;
    border-top: 1px solid #333;
    color: #888;
    font-size: 13px;
    flex-shrink: 0;
}

/* Prev / Next navigation arrows */
.dcp-flip-nav {
    background: rgba(255,255,255,.1);
    color: #ccc;
    border: none;
    font-size: 26px;
    line-height: 1;
    padding: 2px 10px 4px;
    cursor: pointer;
    border-radius: 4px;
    transition: background .15s, color .15s;
    user-select: none;
    flex-shrink: 0;
}
.dcp-flip-nav:hover    { background: rgba(255,255,255,.22); color: #fff; }
.dcp-flip-nav:disabled { opacity: .25; cursor: default; }

/* ── 9. Article rows (search mode) ─────────────────────────────────────────
   ─────────────────────────────────────────────────────────────────────────── */
.dcp-article-rows {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 24px;
}
.dcp-article-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    transition: background .15s;
}
.dcp-article-row:hover { background: #f8f8f8; }

.dcp-open-btn {
    flex-shrink: 0;
    padding: 5px 12px;
    background: #2271b1 !important;
    color: #fff !important;
    border: none;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
    align-self: center;
}
.dcp-open-btn:hover { background: #135e96 !important; color: #fff !important; }

.dcp-article-info {
    flex: 1;
    min-width: 0;
}
.dcp-article-title {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #2271b1;
    text-decoration: none;
    margin-bottom: 3px;
    line-height: 1.4;
}
.dcp-article-title:hover { text-decoration: underline; color: #135e96; }

.dcp-article-meta {
    font-size: 12px;
    color: #666;
    line-height: 1.4;
}

/* ── 10. OCR section ────────────────────────────────────────────────────────
   ─────────────────────────────────────────────────────────────────────────── */
.dcp-ocr-section {
    margin-top: 24px;
    margin-bottom: 24px;
    border-top: 2px solid #e0e0e0;
    padding-top: 16px;
}
.dcp-access-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fff8e1;
    border: 1px solid #f0a500;
    border-left: 4px solid #c00;
    border-radius: 4px;
    padding: 14px 16px;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.5;
}
.dcp-access-alert-msg {
    flex: 1;
    color: #333;
}
.dcp-access-alert-msg a {
    color: #0073aa;
    text-decoration: underline;
}
.dcp-access-alert-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: #888;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
}
.dcp-access-alert-close:hover { color: #333; }
.dcp-section-heading {
    font-size: 13px;
    font-weight: 600;
    color: #555;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e0e0e0;
}
.dcp-page-warning {
    color: #c00;
    font-size: 13px;
    margin: 0 0 12px;
}
.dcp-ocr-heading {
    font-size: 13px;
    font-weight: 600;
    color: #555;
    margin-bottom: 10px;
    padding-top: 8px;
}
.dcp-ocr-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dcp-ocr-item {
    display: flex;
    align-items: center;
    gap: 10px;
}
.dcp-ocr-label {
    font-size: 13px;
    color: #333;
}

/* ── 11. In-modal PDF text search panel ────────────────────────────────────
   ─────────────────────────────────────────────────────────────────────────── */
.dcp-pdf-search-panel {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 300px;
    background: #fff;
    border-right: 1px solid #ddd;
    z-index: 20;
    display: flex;
    flex-direction: column;
    box-shadow: 4px 0 16px rgba(0,0,0,.3);
    overflow: hidden;
}
.dcp-pdf-search-panel-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 10px 10px 12px;
    background: #f5f5f5;
    border-bottom: 1px solid #ddd;
    flex-shrink: 0;
}
.dcp-pdf-search-input {
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
    background: #fff;
}
.dcp-pdf-search-input:focus {
    border-color: #2271b1;
    outline: none;
    box-shadow: 0 0 0 2px rgba(34,113,177,.2);
}
.dcp-pdf-search-go-btn {
    flex-shrink: 0;
    padding: 6px 12px;
    background: #2271b1 !important;
    color: #fff !important;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.dcp-pdf-search-go-btn:hover { background: #135e96 !important; }
.dcp-pdf-search-panel-close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: #666;
    font-size: 16px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 3px;
    line-height: 1;
}
.dcp-pdf-search-panel-close:hover { background: #e0e0e0; color: #333; }

.dcp-pdf-search-results {
    flex: 1;
    overflow-y: auto;
    padding: 10px 0;
}
.dcp-pdf-search-hint,
.dcp-pdf-search-count,
.dcp-pdf-search-searching {
    padding: 10px 14px;
    font-size: 13px;
    color: #666;
}
.dcp-pdf-search-searching {
    display: flex;
    align-items: center;
    gap: 10px;
}
.dcp-pdf-search-searching .dcp-spinner {
    width: 20px;
    height: 20px;
    border-width: 2px;
    flex-shrink: 0;
    margin: 0;
}
.dcp-pdf-search-count {
    font-weight: 600;
    color: #2271b1;
    padding-bottom: 6px;
    border-bottom: 1px solid #eee;
    margin-bottom: 4px;
}
.dcp-pdf-search-hit {
    padding: 10px 14px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background .12s;
}
.dcp-pdf-search-hit:hover { background: #f0f6ff; }
.dcp-pdf-search-hit:focus { outline: 2px solid #2271b1; outline-offset: -2px; }
.dcp-pdf-search-hit-page {
    font-size: 12px;
    font-weight: 700;
    color: #2271b1;
    margin-bottom: 3px;
}
.dcp-pdf-search-hit-snip {
    font-size: 12px;
    color: #444;
    line-height: 1.5;
    word-break: break-word;
}
.dcp-pdf-search-hit-snip mark {
    background: #fff176;
    color: inherit;
    border-radius: 2px;
    padding: 0 1px;
}

/* ── 12. Utilities ──────────────────────────────────────────────────────────
   ─────────────────────────────────────────────────────────────────────────── */

/* Spinner */
.dcp-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid #ddd;
    border-top-color: #2271b1;
    border-radius: 50%;
    animation: dcp-spin .8s linear infinite;
    margin: auto;
}
@keyframes dcp-spin { to { transform: rotate(360deg); } }

/* Empty / error state */
.dcp-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 48px 16px;
    color: #555;
    font-size: 18px;
    line-height: 1.6;
}
.dcp-empty a {
    color: #2271b1;
    font-weight: 600;
    text-decoration: underline;
}
.dcp-empty a:hover { color: #135e96; }

/* Plugin version badge — lower-right, subtle */
.dcp-version-footer {
    text-align: right;
    font-size: 11px;
    color: #bbb;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid #eee;
}