/* ---------------------------------------------------------------------------
   Public notice listings.

   Extracted from home-v2.css when the archive page was added in T6: the home
   card and /public/notices render the same rows through
   fragments/notice-fragment, so the rows need one stylesheet rather than a copy
   per page. home-v2.css keeps only .home-notice-section, which positions the
   card within the home page's illustration band and is not shared.

   The custom properties are re-declared here with the same values home-v2.css
   uses, so the archive and detail pages, which do not link home-v2.css, still
   render correctly. On the home page this file is linked after home-v2.css and
   wins where both declare a property; the values are identical, so there is
   nothing to win.
   --------------------------------------------------------------------------- */

:root {
    --home-primary: #01573C;
    --home-primary-dark: #133D30;
    --home-teal: #1EE196;
    --home-lighter-green: #ECFDF8;
    --home-yellow: #E9FB19;
    --home-border: rgba(185, 204, 199, 1);
    --home-muted: #504b4b;
    --home-radius-lg: 10px;
}

/* Archive and detail background, matching the home page's illustration band
   (home-v2.css .home-band-v1): the same hexagon lattice under the same
   white-to-green wash, rather than the bare lattice public-page-hero-bg gives
   the other public pages. */
.public-page-hero-bg.notice-page-bg {
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(236, 253, 248, 0.62) 35%, rgba(216, 236, 228, 0.55) 70%, rgba(255, 255, 255, 0.88) 100%),
        url(/images/public-site-background.svg);
    background-repeat: repeat;
    background-position: center top;
    background-size: auto, 200px 201px;
    /* Short pages (one notice, an empty archive) would otherwise end the pattern
       at the content's edge and leave a white band above the footer. Approximates
       the header + nav + footer chrome. */
    min-height: calc(100vh - 220px);
}

.home-notice-card {
    background: #fff;
    border-radius: var(--home-radius-lg);
    overflow: hidden;
    border: 1px solid var(--home-border);
}

.home-notice-header {
    background: var(--home-primary);
    color: #fff;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.home-notice-header h3 {
    font-size: 17px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Was the header's static "New" chip; now marks a HIGH-priority notice, on both
   the listings and the detail page. */
.home-notice-badge {
    background: #FEF3E2;
    color: #8A4B08;
    border: 1px solid #F3D9AE;
    padding: 1px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
}

.home-notice-list {
    padding: 4px 0;
}

.home-notice-item {
    padding: 12px 24px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-bottom: 1px solid var(--home-border);
    transition: background 0.15s;
}

.home-notice-item:last-child {
    border-bottom: none;
}

.home-notice-item:hover {
    background: var(--home-lighter-green);
}

.home-notice-dot {
    width: 8px;
    height: 8px;
    background: var(--home-teal);
    border-radius: 50%;
    margin-top: 6px;
    flex-shrink: 0;
}

.home-notice-body {
    flex: 1;
    min-width: 0;
}

.home-notice-item h4 {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 2px;
}

.home-notice-item p {
    font-size: 14px;
    color: var(--home-muted);
}

.home-notice-date {
    font-size: 13px;
    color: var(--home-muted);
    margin-left: auto;
    white-space: nowrap;
}

/* The item title is a link now. It inherits the surrounding colour rather than
   turning browser-blue, so the card reads as it did with plain-text titles. */
.home-notice-link {
    color: inherit;
    text-decoration: none;
}

.home-notice-link:hover {
    color: var(--home-primary);
    text-decoration: underline;
}

/* "View all", sitting on the coloured header bar. */
.home-notice-viewall {
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.home-notice-viewall:hover {
    color: #fff;
    text-decoration: underline;
}

.home-notice-empty {
    padding: 24px;
    text-align: center;
    font-size: 14px;
    color: var(--home-muted);
}

/* --- Archive page --- */

.notice-pager-btn {
    display: inline-block;
    padding: 6px 16px;
    border: 1px solid var(--home-primary);
    border-radius: 6px;
    background: #fff;
    color: var(--home-primary);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.notice-pager-btn:hover,
.notice-pager-btn:focus-visible {
    background: var(--home-lighter-green);
    color: var(--home-primary-dark);
}

.notice-pager-btn:focus-visible {
    outline: 2px solid var(--home-teal);
    outline-offset: 2px;
}

.notice-pager-btn.disabled {
    border-color: var(--home-border);
    color: var(--home-muted);
    background: #fff;
    opacity: 0.6;
    pointer-events: none;
}

.notice-pager-status {
    font-size: 13px;
    color: var(--home-muted);
}

/* --- Detail page --- */

.notice-detail-card {
    background: #fff;
    border: 1px solid var(--home-border);
    border-radius: var(--home-radius-lg);
    padding: 24px 32px 28px;
}

.notice-attachment-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 6px;
    background: var(--home-primary);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s;
}

.notice-attachment-btn:hover,
.notice-attachment-btn:focus-visible {
    background: var(--home-primary-dark);
    color: #fff;
}

.notice-attachment-btn:focus-visible {
    outline: 2px solid var(--home-teal);
    outline-offset: 2px;
}

.notice-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border: 1px solid var(--home-primary);
    border-radius: 6px;
    background: #fff;
    color: var(--home-primary);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.notice-back:hover,
.notice-back:focus-visible {
    background: var(--home-lighter-green);
    color: var(--home-primary-dark);
}

.notice-back:focus-visible {
    outline: 2px solid var(--home-teal);
    outline-offset: 2px;
}

.notice-detail-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--home-primary-dark);
}

.notice-detail-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--home-muted);
}

.notice-detail-summary {
    font-size: 15px;
    color: var(--home-muted);
}

/* Operator-authored rich text, rendered with th:utext. The tag set is bounded by
   NoticeHtmlSanitizer's allowlist — p, br, strong, em, i, u, ul, ol, li, a,
   h3-h5 — so this covers everything that can reach the page. */
.notice-detail-body {
    font-size: 15px;
    line-height: 1.7;
}

.notice-detail-body h3,
.notice-detail-body h4,
.notice-detail-body h5 {
    font-weight: 600;
    margin-top: 20px;
    margin-bottom: 8px;
}

.notice-detail-body h3 { font-size: 19px; }
.notice-detail-body h4 { font-size: 17px; }
.notice-detail-body h5 { font-size: 15px; }

.notice-detail-body p {
    margin-bottom: 12px;
}

.notice-detail-body ul,
.notice-detail-body ol {
    margin-bottom: 12px;
    padding-left: 24px;
}

.notice-detail-body li {
    margin-bottom: 4px;
}

.notice-detail-body a {
    color: var(--home-primary);
    text-decoration: underline;
    /* Author-supplied URLs, so they can be long and unbroken. */
    word-break: break-word;
}

@media (max-width: 768px) {
    /* Dot in a fixed column; title, summary and date stack in the second, so
       everything left-aligns however long the title is. */
    .home-notice-item {
        display: grid;
        grid-template-columns: 8px minmax(0, 1fr);
        column-gap: 12px;
    }

    .home-notice-date {
        grid-column: 2;
        margin-left: 0;
        margin-top: 4px;
    }
}