/* ============================================================
   Cloudpedia Announcements (announcements list, viewannouncement detail).
   Issue #426. Page rules are scoped to .cp-announcements-wrap (the wrapper
   added to the child copies of cloudx/announcements.tpl and
   cloudx/viewannouncement.tpl) plus the Announcements page actions row,
   which renders outside the wrapper from cp-ticket-tabs.tpl in
   .cp-section-tabs-actions. Shared list chrome (clientarea-list.css) is not
   loaded on these pages, so the list card is built here.
   Page identity is blue: --cp-primary-* only, no new tokens, no literals.
   ============================================================ */

.cp-announcements-wrap {
    width: 100%;
    max-width: var(--cp-content-max);
    min-width: 0;
    margin: 0 auto 40px;
    padding-top: 24px;
    color: var(--cp-gray-900);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    text-align: left;
}

/* The outer Bootstrap card is a plain wrapper: the bordered list is
   .announcements. */
.cp-announcements-wrap .announcement-card {
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.cp-announcements-wrap .announcement-section {
    padding: 0;
}

.cp-announcements-wrap .announcement-section > .row {
    margin: 0;
}

/* Section label (the card title in the real markup). */
.cp-announcements-wrap .announcement-section .card-title {
    margin: 0 0 12px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--cp-gray-600);
}

/* ---- List container: bordered card with the blue identity rule on the left ---- */
.cp-announcements-wrap .announcements {
    position: relative;
    padding: 0 16px;
    border: 1px solid var(--cp-border-neutral);
    border-radius: 12px;
    background: var(--cp-surface);
}

.cp-announcements-wrap .announcements::before {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 0;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--cp-primary-500);
}

/* ---- Entries: 1px bottom rule, none on the last ---- */
.cp-announcements-wrap .announcements .announcement {
    padding: 16px 0;
    border-bottom: 1px solid var(--cp-border-neutral);
}

.cp-announcements-wrap .announcements .announcement:last-child {
    border-bottom: 0;
}

/* Title link: 15px/600 near-black, blue on hover. CloudX forces
   h1..h6 to font-weight: normal with an important flag, so the weight
   below carries the marked override. */
.cp-announcements-wrap .announcements .announcement h1 {
    margin: 0 0 6px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600 !important; /* cloudx-override */
    letter-spacing: -0.01em;
    line-height: 1.4;
}

.cp-announcements-wrap .announcements .announcement h1 > a {
    border-radius: 4px;
    color: var(--cp-gray-900);
    text-decoration: none;
}

.cp-announcements-wrap .announcements .announcement h1 > a:hover {
    color: var(--cp-primary-500);
    text-decoration: none;
}

.cp-announcements-wrap .announcements .announcement h1 > a:focus-visible {
    outline: 2px solid var(--cp-primary-500);
    outline-offset: 2px;
}

/* Admin-only edit link (not in the approved mock): quiet outline, never the
   parent purple pill. */
.cp-announcements-wrap .announcements .announcement h1 > a.btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 2px 8px;
    border: 1px solid var(--cp-border-neutral);
    border-radius: 6px;
    background: transparent;
    color: var(--cp-gray-600);
    font-size: 12px;
    line-height: 1.4;
    vertical-align: middle;
    text-decoration: none;
}

.cp-announcements-wrap .announcements .announcement h1 > a.btn:hover {
    background: var(--cp-surface-muted);
    color: var(--cp-gray-900);
    text-decoration: none;
}

/* Date line: 13px muted, tabular figures. */
.cp-announcements-wrap .announcements .announcement .list-inline {
    margin: 0 0 8px;
    padding: 0;
}

.cp-announcements-wrap .announcements .announcement .list-inline-item {
    color: var(--cp-gray-600);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
}

/* Body: 14px near-black. */
.cp-announcements-wrap .announcements .announcement article {
    margin: 0 0 12px;
    color: var(--cp-gray-900);
    font-size: 14px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.cp-announcements-wrap .announcements .announcement article p {
    margin: 0 0 12px;
}

.cp-announcements-wrap .announcements .announcement article p:last-child {
    margin-bottom: 0;
}

/* Continue reading: tinted blue, not filled. */
.cp-announcements-wrap .announcements .announcement > a.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--cp-primary-300);
    border-radius: 8px;
    background: var(--cp-primary-50);
    color: var(--cp-primary-600);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    text-decoration: none;
}

.cp-announcements-wrap .announcements .announcement > a.btn:hover {
    border-color: var(--cp-primary-300);
    background: var(--cp-primary-100);
    color: var(--cp-primary-600);
    text-decoration: none;
}

.cp-announcements-wrap .announcements .announcement > a.btn:focus-visible {
    outline: 2px solid var(--cp-primary-500);
    outline-offset: 2px;
}

/* ---- Empty state: WHMCS includes/alert.tpl info alert, restyled in place.
   The list container steps aside so the alert is the card. ---- */
.cp-announcements-wrap .announcements:has(> .alert) {
    padding: 0;
    border: 0;
    background: transparent;
}

.cp-announcements-wrap .announcements:has(> .alert)::before {
    content: none;
}

.cp-announcements-wrap .announcements > .alert {
    margin: 0;
    padding: 32px 16px;
    border: 1px solid var(--cp-border-neutral);
    border-radius: 12px;
    background: var(--cp-surface);
    color: var(--cp-gray-600);
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}

/* ---- Pagination: quiet ghost, current page tinted ---- */
.cp-announcements-wrap .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.cp-announcements-wrap .pagination .page-item {
    margin: 0;
}

.cp-announcements-wrap .pagination .page-link {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--cp-primary-600);
    font-size: 13px;
    line-height: 1.4;
    text-decoration: none;
}

.cp-announcements-wrap .pagination .page-link:hover {
    border-color: var(--cp-border-neutral);
    background: var(--cp-surface-muted);
    color: var(--cp-gray-900);
    text-decoration: none;
}

.cp-announcements-wrap .pagination .page-link:focus-visible {
    outline: 2px solid var(--cp-primary-500);
    outline-offset: 2px;
}

.cp-announcements-wrap .pagination .page-item.active .page-link {
    border-color: var(--cp-primary-300);
    background: var(--cp-primary-50);
    color: var(--cp-primary-600);
    font-weight: 600;
}

.cp-announcements-wrap .pagination .page-item.disabled .page-link {
    color: var(--cp-gray-600);
    opacity: 0.4;
}

/* ---- Single announcement: tinted-border card, 20px/700 title, meta, body ---- */
.cp-announcements-wrap .view-announcement-20i {
    padding: 16px;
    border: 1px solid var(--cp-primary-300);
    border-radius: 12px;
    background: var(--cp-surface);
    box-shadow: none;
}

.cp-announcements-wrap .view-announcement-20i > .card-body {
    padding: 0;
}

.cp-announcements-wrap .view-announcement-20i h1 {
    margin: 0 0 8px;
    font-family: inherit;
    font-size: 20px;
    font-weight: 700 !important; /* cloudx-override */
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.cp-announcements-wrap .view-announcement-20i .list-inline {
    margin: 0 0 16px;
    padding: 0;
}

.cp-announcements-wrap .view-announcement-20i .list-inline-item {
    color: var(--cp-gray-600);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
}

.cp-announcements-wrap .view-announcement-20i .text-description-20i {
    margin: 0 0 20px;
    color: var(--cp-gray-900);
    font-size: 14px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.cp-announcements-wrap .view-announcement-20i .text-description-20i p {
    margin: 0 0 12px;
}

.cp-announcements-wrap .view-announcement-20i .text-description-20i p:last-child {
    margin-bottom: 0;
}

/* Back / edit: tinted like the Continue reading button. */
.cp-announcements-wrap .btn-back-20i,
.cp-announcements-wrap .btn-edit-20i {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--cp-primary-300);
    border-radius: 8px;
    background: var(--cp-primary-50);
    color: var(--cp-primary-600);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    text-decoration: none;
}

.cp-announcements-wrap .btn-back-20i {
    margin-top: 16px;
}

.cp-announcements-wrap .btn-back-20i:hover,
.cp-announcements-wrap .btn-edit-20i:hover {
    border-color: var(--cp-primary-300);
    background: var(--cp-primary-100);
    color: var(--cp-primary-600);
    text-decoration: none;
}

.cp-announcements-wrap .btn-back-20i:focus-visible,
.cp-announcements-wrap .btn-edit-20i:focus-visible {
    outline: 2px solid var(--cp-primary-500);
    outline-offset: 2px;
}

/* ---- Announcements page actions (Older Announcements / View RSS Feed).
   They render from cp-ticket-tabs.tpl outside the wrapper, in
   .cp-section-tabs-actions, which only exists on the announcements page, so
   the Network Status page's chips row is untouched. ---- */
.cp-section-tabs-actions {
    /* The tab bar is capped to the content width by section-tabs.css; this row
       lives outside it, so it needs the same cap or the buttons sit at the page
       edge while the tabs and the list start at the content edge. */
    width: 100%;
    max-width: var(--cp-content-max);
    margin: 0 auto 16px;
}

.cp-section-tabs-actions .cp-page-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--cp-primary-300);
    border-radius: 8px;
    background: var(--cp-primary-50);
    color: var(--cp-primary-600);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    text-decoration: none;
}

.cp-section-tabs-actions .cp-page-action:hover {
    border-color: var(--cp-primary-500);
    background: var(--cp-primary-100);
    color: var(--cp-primary-600);
    text-decoration: none;
}

.cp-section-tabs-actions .cp-page-action:focus-visible {
    outline: 2px solid var(--cp-primary-500);
    outline-offset: 2px;
}

@media (max-width: 767.98px) {
    .cp-announcements-wrap {
        padding-top: 16px;
    }
}