/* ============================================================
   Agency Financial Audit Reports
   Styles for the audit reports section rendered by the
   AuditReports view component.

   The section sits on the brand blue band, so every colour is
   stated against one of two backgrounds and nothing is left to
   inherit: the band, or the white card.

   !important on the paragraph colours below is required, not
   stylistic. dist/styles.min.css ships:

       body label, body p { color: #101010 !important; }

   a site-wide important rule on every paragraph. It is why the
   intro rendered near-black on blue regardless of the class it
   carried, and why text-white on an ancestor did not help -
   inheritance cannot beat an important declaration set directly
   on the element. An important declaration with higher
   specificity can, which is what these rules are.

   Everything else is scoped under .ar-section so the section
   neither leaks styles into the landing page nor inherits
   surprises from it.
   ============================================================ */

/* Icon vertical alignment fix - matches the treatment in procurement.css */
.ar-section i {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    line-height: 1;
}

/* ---------- Section heading ---------- */

.ar-section .ar-section-icon {
    display: block;
    font-size: 2.25rem;
    line-height: 1;
    color: #ffffff;
    margin-bottom: 1rem;
}

.ar-section .ar-section-title {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
    margin: 0 0 1rem;
}

.ar-section .ar-rule {
    width: 80px;
    height: 2px;
    background: #ffffff;
    margin: 0 auto 1.25rem;
}

/* Pure white, not a dimmed tint. The band composites to roughly #2f74b5, where
   white measures ~4.8:1 - it clears AA for normal text with little to spare, so
   a softer #dce9f4 would land near 3.9:1 and fail. Hierarchy between the
   heading and this line is carried by size and weight instead of by contrast. */
.ar-section .ar-intro {
    font-size: 1.0625rem;
    line-height: 1.5;
    color: #ffffff !important;
    margin: 0;
}

/* ---------- Report card ----------
   One card per report, with the year as its own label. The whole card is the
   anchor, so the text-decoration reset is doing real work - the theme
   underlines anchors globally. */

.ar-section .ar-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-top: 3px solid #065D8F;
    border-radius: 0.5rem;
    padding: 1.25rem;
    text-decoration: none;
    /* No transform and no shadow: the card does not lift, grow or cast on
       hover. Only the border and a faint tint change, which reads as a state
       rather than as movement. */
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ar-section .ar-card-external {
    border-top-color: #6b7684;
}

.ar-section .ar-card:hover,
.ar-section .ar-card:focus {
    background: #f8fbfd;
    border-color: #b9cfe1;
    border-top-color: #065D8F;
    text-decoration: none;
}

.ar-section .ar-card-external:hover,
.ar-section .ar-card-external:focus {
    border-top-color: #6b7684;
}

/* The band behind the cards is dark, so a dark focus ring disappears into it
   and a white one disappears into the card. Ring in white with an offset so it
   lands on the band, which is where the contrast is. */
.ar-section .ar-card:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .ar-section .ar-card {
        transition: none;
    }
}

/* ---------- Card head: year + type chip ---------- */

.ar-section .ar-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid #eaeff4;
}

/* The year is the scannable anchor now that there is no year heading above the
   card, so it carries the visual weight the heading used to. */
.ar-section .ar-card-year {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #10395B;
}

.ar-section .ar-card-type {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    /* line-height 1 so the chip is optically centred against the year rather
       than merely centred in a taller flex row. */
    line-height: 1;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    /* 5.9:1 on #eaf1f7 */
    color: #0f4c75;
    background: #eaf1f7;
    border-radius: 999px;
    padding: 0.3125rem 0.625rem;
}

.ar-section .ar-card-external .ar-card-type {
    /* 5.4:1 on #f0f1f3 */
    color: #4c5560;
    background: #f0f1f3;
}

.ar-section .ar-card-title {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.45;
    color: #1f3a52;
    margin-bottom: 1.125rem;
    /* Headlines vary in length; the action stays pinned to the bottom so a row
       of cards lines up regardless. */
    flex-grow: 1;
}

/* No underline, on the text or the arrow - this is a card action, not an
   inline prose link, so the card itself is the affordance.
   #065D8F on #ffffff = 6.4:1. */
.ar-section .ar-card-action {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #065D8F;
    text-decoration: none;
}

.ar-section .ar-card:hover .ar-card-action,
.ar-section .ar-card:focus .ar-card-action {
    color: #10395B;
    text-decoration: none;
}

.ar-section .ar-card-action i {
    font-size: 0.875rem;
}

/* ---------- Empty state ----------
   Both paragraphs here need the same important override as the intro. */

.ar-section .ar-empty {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 0.5rem;
    padding: 1.75rem;
    text-align: center;
}

.ar-section .ar-empty p {
    color: #ffffff !important;
}

.ar-section .ar-empty-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #ffffff !important;
    margin-bottom: 0.5rem;
}

/* This one keeps its underline on purpose: it is an inline link inside a
   sentence, where colour alone is not a sufficient affordance (1.4.1). */
.ar-section .ar-empty-link {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.ar-section .ar-empty-link:hover,
.ar-section .ar-empty-link:focus {
    color: #e4eef7;
}

.ar-section .ar-empty-link:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
}

/* ---------- Small screens ---------- */

@media (max-width: 575.98px) {
    .ar-section .ar-section-title {
        font-size: 1.625rem;
    }
}