/* cpp-newsletter-archive.css v0 — styles for the My Newsletters widget */
.cna { width: 100%; max-width: 100%; margin: 1em 0; padding: 0; font-family: inherit; color: #1f2937; line-height: 1.5; box-sizing: border-box; }
.cna .cna-subhead { color: #666; margin: 0 0 1.5em 0; font-size: 0.95rem; }
.cna #auth-status { padding: 0.75em 1em; margin: 1em 0; border-radius: 6px; font-size: 0.9em; }
.cna #auth-status.pending { background: #fffbe6; border: 1px solid #ffe58f; }
.cna #auth-status.success { background: #f6ffed; border: 1px solid #b7eb8f; }
.cna #auth-status.failure { background: #fff1f0; border: 1px solid #ffa39e; }
.cna #auth-status.info    { background: #e7f3ff; border: 1px solid #91caff; }
.cna .cna-loading, .cna .cna-empty-state, .cna .cna-error { text-align: center; padding: 3em 1em; color: #666; }
.cna .cna-error { color: #991b1b; }
/* --- Search input (noReGreps) — sits above the toolbar, full width --- */
.cna .cna-search { display: flex; align-items: center; gap: 0.5em; position: relative; margin: 1em 0 0.5em 0; background: #fff; border: 1px solid #d0d0d0; border-radius: 6px; padding: 0.45em 0.75em; transition: border-color 0.12s ease, box-shadow 0.12s ease; }
.cna .cna-search:focus-within { border-color: #4a6c9a; box-shadow: 0 0 0 3px rgba(74, 108, 154, 0.18); }
.cna .cna-search-icon { color: #888; font-size: 0.95rem; flex-shrink: 0; }
.cna .cna-search-input { flex-grow: 1; border: 0; outline: none; background: transparent; font: inherit; font-size: 0.95rem; color: #1a1a1a; padding: 0.15em 0; min-width: 0; }
.cna .cna-search-input::placeholder { color: #999; }
.cna .cna-search-input::-webkit-search-cancel-button { display: none; }     /* hide native clear; we render our own */
.cna .cna-search-clear { background: transparent; border: 0; color: #888; cursor: pointer; padding: 0 0.4em; font-size: 1.15rem; line-height: 1; border-radius: 4px; transition: background 0.12s ease, color 0.12s ease; display: none; }
.cna .cna-search-clear:hover { background: #ececec; color: #555; }
.cna .cna-search[data-cna-search-active="true"] .cna-search-clear { display: inline-flex; align-items: center; justify-content: center; }

/* --- Toolbar + two orthogonal toggles (Inbox/Publication × Compact/Expanded) --- */
.cna .cna-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1em; flex-wrap: wrap; margin: 1.5em 0 0.75em 0; }
.cna .cna-summary { color: #666; margin: 0; font-size: 0.95rem; }
.cna .cna-toolbar-toggles { display: inline-flex; gap: 0.5em; flex-wrap: wrap; align-items: center; }
.cna .cna-view-toggle { display: inline-flex; border: 1px solid #d0d0d0; border-radius: 6px; overflow: hidden; flex-shrink: 0; }
.cna .cna-view-btn { background: #fff; color: #4a6c9a; border: 0; padding: 0.45em 1em; font: inherit; font-size: 0.875rem; cursor: pointer; border-right: 1px solid #d0d0d0; transition: background 0.12s ease, color 0.12s ease; }
.cna .cna-view-btn:last-child { border-right: 0; }
.cna .cna-view-btn:hover { background: #f0f4fa; }
.cna .cna-view-btn[aria-pressed="true"] { background: #4a6c9a; color: #fff; }
.cna .cna-view-btn[aria-pressed="true"]:hover { background: #3d5a80; }

/* --- Publication-grouped layout (only active when [data-grouping="publication"]) --- */
.cna .cna-pub-group { display: flex; flex-direction: column; gap: 0.75em; margin-top: 1.25em; }
.cna .cna-pub-group:first-child { margin-top: 0; }
.cna .cna-pub-group-title { margin: 0 0 0.25em 0; font-size: 1.05rem; font-weight: 600; color: #1a1a1a; padding: 0.35em 0 0.45em 0; border-bottom: 2px solid #e0e0e0; }
.cna .cna-pub-group-count { color: #888; font-weight: 400; font-size: 0.875rem; margin-left: 0.25em; }
.cna .cna-pub-group-entries { display: flex; flex-direction: column; gap: 0.75em; }

/* --- Two-pane layout (sidebar + main) ----------------------------------- */
.cna .cna-layout { display: flex; gap: 1em; align-items: flex-start; }
.cna .cna-main { flex-grow: 1; min-width: 0; }

/* --- Sidebar (publication filter panel) --------------------------------- */
/* On desktop the sidebar is position:sticky so it stays pinned to the top of
   the viewport while the user scrolls through entries. The inner list scrolls
   internally if more publications than viewport-height can hold. The footer
   ("Collapse all messages") therefore stays visible at the bottom of the
   viewable rail regardless of how far the page has scrolled. */
.cna .cna-sidebar { width: 240px; flex-shrink: 0; background: #fafafa; border: 1px solid #e0e0e0; border-radius: 6px; padding: 0; transition: width 0.18s ease; overflow: hidden; position: sticky; top: 1em; max-height: calc(100vh - 2em); display: flex; flex-direction: column; }
.cna .cna-sidebar[data-collapsed="true"] { width: 56px; }
.cna .cna-sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 0.55em 0.75em 0.55em 0.875em; border-bottom: 1px solid #e8e8e8; flex-shrink: 0; }
.cna .cna-sidebar-title { font-size: 0.85rem; font-weight: 600; color: #555; margin: 0; text-transform: uppercase; letter-spacing: 0.03em; }
.cna .cna-sidebar[data-collapsed="true"] .cna-sidebar-title { display: none; }
.cna .cna-sidebar-collapse { background: transparent; border: 0; color: #666; cursor: pointer; padding: 0.25em 0.45em; font-size: 1rem; border-radius: 4px; line-height: 1; }
.cna .cna-sidebar-collapse:hover { background: #ececec; }
.cna .cna-sidebar-list { list-style: none; padding: 0.4em 0; margin: 0; flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.cna .cna-sidebar-item { display: flex; align-items: center; gap: 0.55em; padding: 0.45em 0.875em; cursor: pointer; user-select: none; border-left: 3px solid transparent; transition: background 0.12s ease, opacity 0.12s ease; background: transparent; border-top: 0; border-right: 0; border-bottom: 0; width: 100%; text-align: left; font: inherit; color: inherit; }
.cna .cna-sidebar-item:hover { background: #f0f4fa; }
.cna .cna-sidebar-item:focus-visible { outline: 2px solid #4a6c9a; outline-offset: -2px; }
.cna .cna-sidebar-item[data-hidden="false"] { border-left-color: #4a6c9a; }
.cna .cna-sidebar-item[data-hidden="true"] { opacity: 0.45; }
/* Pub-identity avatar: small 26x26 square with 4px rounded corners. Dual-layer:
   - .cna-sidebar-item-icon-letter (first-letter monogram) always renders as the
     base layer.
   - .cna-sidebar-item-icon-fa (FontAwesome icon overlay) is present only when
     the Publication has Image_Name set in MP. When present, it covers the
     letter underneath. Same colors, same dimensions.
   The host page is expected to load FontAwesome (Enfold ships it by default on
   the CPP-managed WordPress sites). Both `fa` and `fas` prefix classes are
   emitted on the <i> tag so FA 4 (`fa-newspaper-o`) and FA 5+ (`fa-newspaper`)
   icon names both render. */
.cna .cna-sidebar-item-icon { width: 26px; height: 26px; flex-shrink: 0; background: #4a6c9a; color: #fff; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 600; position: relative; overflow: hidden; }
.cna .cna-sidebar-item-icon-letter { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.cna .cna-sidebar-item-icon-fa { position: absolute; inset: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 0.9rem; line-height: 1; color: #fff; }
.cna .cna-sidebar-item[data-has-icon="true"] .cna-sidebar-item-icon-letter { display: none; }
.cna .cna-sidebar-item[data-hidden="true"] .cna-sidebar-item-icon { background: #aaa; }
.cna .cna-sidebar-item[data-hidden="true"] .cna-sidebar-item-icon-fa { opacity: 0.7; }
.cna .cna-sidebar-item-label { flex-grow: 1; font-size: 0.9rem; color: #1a1a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cna .cna-sidebar-item-count { font-size: 0.78rem; color: #777; flex-shrink: 0; }
.cna .cna-sidebar[data-collapsed="true"] .cna-sidebar-item-label,
.cna .cna-sidebar[data-collapsed="true"] .cna-sidebar-item-count { display: none; }
.cna .cna-sidebar[data-collapsed="true"] .cna-sidebar-item { justify-content: center; padding: 0.45em 0.25em; }
.cna .cna-sidebar-actions { padding: 0.5em 0.625em; border-top: 1px solid #e8e8e8; display: flex; gap: 0.4em; flex-shrink: 0; flex-wrap: wrap; }
.cna .cna-sidebar[data-collapsed="true"] .cna-sidebar-actions { display: none; }
.cna .cna-sidebar-action { flex-grow: 1; background: #fff; color: #4a6c9a; border: 1px solid #d0d0d0; padding: 0.35em 0.5em; font: inherit; font-size: 0.78rem; cursor: pointer; border-radius: 4px; transition: background 0.12s ease; }
.cna .cna-sidebar-action:hover { background: #f0f4fa; }
.cna .cna-sidebar-action[disabled] { opacity: 0.5; cursor: default; }
.cna .cna-sidebar-action[disabled]:hover { background: #fff; }

/* --- Sidebar footer (actions on main-content state, not sidebar state) --- */
.cna .cna-sidebar-footer { padding: 0.5em 0.625em; border-top: 1px solid #e8e8e8; flex-shrink: 0; }
.cna .cna-sidebar-footer-btn { display: flex; align-items: center; justify-content: center; gap: 0.5em; width: 100%; background: #fff; color: #4a6c9a; border: 1px solid #d0d0d0; padding: 0.5em 0.65em; font: inherit; font-size: 0.85rem; cursor: pointer; border-radius: 4px; transition: background 0.12s ease; }
.cna .cna-sidebar-footer-btn:hover { background: #f0f4fa; }
.cna .cna-sidebar-footer-btn-icon { font-size: 0.95rem; line-height: 1; }
.cna .cna-sidebar[data-collapsed="true"] .cna-sidebar-footer { padding: 0.5em 0.35em; }
.cna .cna-sidebar[data-collapsed="true"] .cna-sidebar-footer-btn-label { display: none; }
.cna .cna-sidebar[data-collapsed="true"] .cna-sidebar-footer-btn { padding: 0.5em 0.25em; }

/* --- Drag-to-reorder visual states (HTML5 drag-and-drop) --- */
.cna .cna-sidebar-item[draggable="true"] { cursor: grab; }
.cna .cna-sidebar-item[draggable="true"]:active { cursor: grabbing; }
.cna .cna-sidebar-item.cna-dragging { opacity: 0.4; }
/* Vertical layout (desktop): drop indicator above / below */
.cna .cna-sidebar-item.cna-drop-before { box-shadow: inset 0 3px 0 0 #4a6c9a; }
.cna .cna-sidebar-item.cna-drop-after  { box-shadow: inset 0 -3px 0 0 #4a6c9a; }
/* Horizontal layout (mobile pill row): drop indicator at leading / trailing edge */
@media (max-width: 800px) {
    .cna .cna-sidebar-item.cna-drop-before { box-shadow: inset 3px 0 0 0 #4a6c9a; }
    .cna .cna-sidebar-item.cna-drop-after  { box-shadow: inset -3px 0 0 0 #4a6c9a; }
}

/* Mobile: sidebar becomes a horizontal pill row above the entries.
   Sticky / flex-column behavior is dropped — the rail sits inline at the
   top of the content area and scrolls with the page. The footer collapse-
   all button is still present below the actions row. */
@media (max-width: 800px) {
    .cna .cna-layout { flex-direction: column; gap: 0.5em; }
    .cna .cna-sidebar { width: 100% !important; position: static; max-height: none; display: block; }
    .cna .cna-sidebar-header { padding: 0.45em 0.75em; }
    .cna .cna-sidebar-collapse { display: none; }
    .cna .cna-sidebar-list { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 0.4em; overflow-x: auto; overflow-y: hidden; padding: 0.4em 0.5em; -webkit-overflow-scrolling: touch; flex: initial; min-height: initial; }
    .cna .cna-sidebar-item { flex-shrink: 0; flex-direction: column; gap: 0.2em; border-left: 0; border-bottom: 3px solid transparent; padding: 0.45em 0.55em; min-width: 70px; max-width: 110px; align-items: center; }
    .cna .cna-sidebar-item[data-hidden="false"] { border-bottom-color: #4a6c9a; }
    .cna .cna-sidebar-item-label { font-size: 0.78rem; white-space: nowrap; max-width: 100%; }
    .cna .cna-sidebar-item-count { font-size: 0.7rem; }
    .cna .cna-sidebar-actions { padding: 0.4em 0.5em; }
    .cna .cna-sidebar-action { font-size: 0.75rem; }
    .cna .cna-sidebar-footer { padding: 0.4em 0.5em; }
    .cna .cna-sidebar-footer-btn { font-size: 0.8rem; }
}

/* --- Entries container --- */
.cna .cna-entries { display: flex; flex-direction: column; gap: 0.75em; }
.cna .cna-entry { border: 1px solid #e0e0e0; border-radius: 6px; background: #fff; overflow: hidden; transition: box-shadow 0.15s ease; }
.cna .cna-entry:hover { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07); }

/* --- Entry header (default = Compact view) --- */
.cna .cna-entry-header { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.25em 1em; padding: 1em 1.25em; cursor: pointer; user-select: none; background: transparent; border: 0; width: 100%; text-align: left; font: inherit; color: inherit; }
.cna .cna-entry-header:focus-visible { outline: 2px solid #4a6c9a; outline-offset: -2px; }
.cna .cna-entry-thumb { display: none; }                          /* Compact: thumb hidden */
.cna .cna-entry-headline-wrap { grid-column: 1; display: flex; flex-direction: column; gap: 0.2em; min-width: 0; }
.cna .cna-entry-subject { margin: 0; font-size: 1.05rem; font-weight: 600; color: #1a1a1a; word-wrap: break-word; overflow-wrap: anywhere; }
.cna .cna-entry-preview { display: none; }                        /* Compact: preview hidden */
.cna .cna-entry-meta { font-size: 0.875rem; color: #666; }
.cna .cna-entry-pub { color: #4a6c9a; font-weight: 500; }
.cna .cna-entry-divider { margin: 0 0.4em; color: #bbb; }
.cna .cna-entry-toggle { grid-column: 2; align-self: center; font-size: 1.25rem; color: #999; transition: transform 0.2s ease; }
.cna .cna-entry[data-expanded] .cna-entry-toggle { transform: rotate(180deg); }
.cna .cna-entry-body { padding: 0 1.25em 1.25em 1.25em; border-top: 1px solid #e8e8e8; }
.cna .cna-entry-body[hidden] { display: none; }
.cna .cna-entry-content { padding-top: 1em; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cna .cna-entry-content img { max-width: 100%; height: auto; }
.cna .cna-entry-content table { max-width: 100%; }

/* --- Expanded view overrides — show thumb + preview, 3-column header --- */
/* Thumb dimensions follow MP's canonical widget image ratio of 59:32 (≈1.84:1) —
   matches event finder / opportunity finder / group finder / mission trip finder.
   MP's intrinsic source is 800×433 px, rendered at 295×160; we use 148×80 (half).
   Also compatible with Facebook OG (1.91:1) and LinkedIn shared (1.91:1) — the
   ~3% ratio difference is absorbed by object-fit: cover with center focus. */
.cna .cna-entries[data-view-mode="expanded"] .cna-entry-header { grid-template-columns: 148px 1fr auto; align-items: start; gap: 0.25em 1.1em; }
.cna .cna-entries[data-view-mode="expanded"] .cna-entry-thumb { display: block; grid-column: 1; align-self: start; width: 148px; height: 80px; object-fit: cover; object-position: center; border-radius: 4px; background: #f0f0f0; }
.cna .cna-entries[data-view-mode="expanded"] .cna-entry-thumb-placeholder { border: 1px dashed #ddd; background: linear-gradient(135deg, #fafafa 0%, #f0f0f0 100%); }
.cna .cna-entries[data-view-mode="expanded"] .cna-entry-headline-wrap { grid-column: 2; gap: 0.3em; }
.cna .cna-entries[data-view-mode="expanded"] .cna-entry-preview { display: block; color: #555; font-size: 0.9rem; line-height: 1.45; }
.cna .cna-entries[data-view-mode="expanded"] .cna-entry-toggle { grid-column: 3; align-self: center; }

@media (max-width: 600px) {
    .cna .cna-entry-header { padding: 0.875em 1em; }
    .cna .cna-entry-body { padding: 0 1em 1em 1em; }
    /* Mobile thumb also 59:32, smaller — 96×52 keeps the same ratio */
    .cna .cna-entries[data-view-mode="expanded"] .cna-entry-header { grid-template-columns: 96px 1fr auto; gap: 0.25em 0.85em; }
    .cna .cna-entries[data-view-mode="expanded"] .cna-entry-thumb { width: 96px; height: 52px; }
    .cna .cna-toolbar { gap: 0.6em; }
    .cna .cna-summary { font-size: 0.875rem; }
}

/* --- Lightbox for inline images (bulletin page reads, etc.) --- */
.cna .cna-entry-content img { cursor: zoom-in; }
.cna-lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.92); z-index: 2147483647; display: flex; align-items: center; justify-content: center; padding: 1em; box-sizing: border-box; }
.cna-lightbox img { max-width: 95vw; max-height: 95vh; object-fit: contain; box-shadow: 0 4px 32px rgba(0, 0, 0, 0.5); cursor: zoom-out; }
.cna-lightbox-close, .cna-lightbox-prev, .cna-lightbox-next { position: absolute; background: rgba(255, 255, 255, 0.15); color: #fff; border: 0; cursor: pointer; line-height: 1; transition: background 0.15s ease; padding: 0; }
.cna-lightbox-close:hover, .cna-lightbox-prev:hover, .cna-lightbox-next:hover { background: rgba(255, 255, 255, 0.3); }
.cna-lightbox-close { top: 1em; right: 1em; width: 2.5em; height: 2.5em; border-radius: 50%; font-size: 1.5em; }
.cna-lightbox-prev, .cna-lightbox-next { top: 50%; transform: translateY(-50%); width: 3em; height: 4em; font-size: 2em; border-radius: 4px; }
.cna-lightbox-prev { left: 1em; }
.cna-lightbox-next { right: 1em; }
.cna-lightbox-counter { position: absolute; bottom: 1em; left: 50%; transform: translateX(-50%); color: #fff; background: rgba(0, 0, 0, 0.5); padding: 0.3em 0.9em; border-radius: 4px; font-size: 0.9em; }
@media (max-width: 600px) { .cna-lightbox-prev, .cna-lightbox-next { width: 2.5em; height: 3em; font-size: 1.5em; } .cna-lightbox-close { width: 2em; height: 2em; font-size: 1.2em; } }