/* ==========================================================================
   Announcements — public styles
   Used by the home banner/carousel slide, the announcement pages, and the
   CMS builder canvas (so the editor matches what visitors see).
   ========================================================================== */
:root {
    --ann-blue: #447996;
    --ann-blue-dark: #356178;
    --ann-navy: #011842;
    --ann-brown: #655642;
    --ann-gold: #e6a149;
    --ann-gold-light: #f0bd76;
    --ann-cream: #fff2e1;
    --ann-ink: #2b2f36;
    --ann-muted: #6b7682;
    --ann-line: #d9e1e8;
}

/* --------------------------------------------------------------------------
   Content blocks
   -------------------------------------------------------------------------- */
.ann-content {
    container-type: inline-size;
    container-name: ann-root;
    color: var(--ann-ink);
    font-family: 'Poppins', sans-serif;
    line-height: 1.7;
    overflow-wrap: break-word;
}
.ann-content *,
.ann-content *::before,
.ann-content *::after { box-sizing: border-box; }

.ann-block { position: relative; }
.ann-block > :last-child { margin-bottom: 0; }

/* Section */
.ann-section { background-size: cover; background-position: center; }
.ann-section.ann-has-bg { color: #fff; }
.ann-section-overlay { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.ann-section-inner { position: relative; margin: 0 auto; width: 100%; }

/* Columns: each column is its own container so nested columns stack when narrow */
.ann-columns { display: grid; grid-template-columns: var(--ann-cols, minmax(0, 1fr)); }
.ann-column { container-type: inline-size; container-name: ann-col; min-width: 0; }
@container (max-width: 900px) {
    /* Wide rows drop to two even columns before stacking completely. */
    .ann-columns[data-count="4"],
    .ann-columns[data-count="5"],
    .ann-columns[data-count="6"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 600px) {
    .ann-columns { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Card */
.ann-card { overflow: hidden; }
.ann-shadow-sm { box-shadow: 0 2px 10px rgba(1, 24, 66, .08); }
.ann-shadow-md { box-shadow: 0 8px 24px rgba(1, 24, 66, .12); }
.ann-shadow-lg { box-shadow: 0 18px 48px rgba(1, 24, 66, .18); }

/* Accordion */
.ann-accordion { background: #fff; overflow: hidden; }
.ann-accordion > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1.1rem;
    font-weight: 600;
    color: var(--ann-navy);
}
.ann-accordion > summary::-webkit-details-marker { display: none; }
.ann-accordion > summary::after {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: .8rem;
    transition: transform .2s ease;
}
.ann-accordion[open] > summary::after { transform: rotate(180deg); }
.ann-accordion > summary:focus-visible { outline: 3px solid var(--ann-gold); outline-offset: -3px; }
.ann-accordion-body { padding: 0 1.1rem 1.1rem; }

/* Heading */
.ann-heading { margin-top: 0; font-weight: 700; line-height: 1.25; color: inherit; }
.ann-content h1.ann-heading { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.ann-content h2.ann-heading { font-size: clamp(1.5rem, 3vw, 2rem); }
.ann-content h3.ann-heading { font-size: clamp(1.25rem, 2.4vw, 1.55rem); }
.ann-content h4.ann-heading { font-size: 1.2rem; }
.ann-content h5.ann-heading { font-size: 1.05rem; }
.ann-content h6.ann-heading { font-size: .9rem; text-transform: uppercase; letter-spacing: .06em; }

/* Rich text (Quill output) */
.ann-text p { margin: 0 0 .85em; }
.ann-text > :last-child { margin-bottom: 0; }
.ann-text a { color: var(--ann-blue); text-decoration: underline; }
.ann-section.ann-has-bg .ann-text a { color: inherit; }
.ann-text ul, .ann-text ol { padding-left: 1.5em; margin: 0 0 .85em; }
.ann-text blockquote { border-left: 4px solid var(--ann-gold); margin: 0 0 .85em; padding: .25em 0 .25em 1em; }
.ann-text pre { background: #f3f5f7; padding: .75em 1em; border-radius: 6px; white-space: pre-wrap; }
.ann-text li[data-list="checked"], .ann-text li[data-list="unchecked"] { list-style: none; }
.ann-text li[data-list="checked"]::before { content: "\2611\00a0"; }
.ann-text li[data-list="unchecked"]::before { content: "\2610\00a0"; }
.ann-text .ql-align-center { text-align: center; }
.ann-text .ql-align-right { text-align: right; }
.ann-text .ql-align-justify { text-align: justify; }
.ann-text .ql-size-small { font-size: .8em; }
.ann-text .ql-size-large { font-size: 1.5em; }
.ann-text .ql-size-huge { font-size: 2.3em; }
.ann-text .ql-font-serif { font-family: Georgia, 'Times New Roman', serif; }
.ann-text .ql-font-monospace { font-family: Monaco, 'Courier New', monospace; }
.ann-text .ql-indent-1 { padding-left: 3em; }
.ann-text .ql-indent-2 { padding-left: 6em; }
.ann-text .ql-indent-3 { padding-left: 9em; }

/* Image */
.ann-image { margin-left: 0; margin-right: 0; }
.ann-image img { display: inline-block; max-width: 100%; height: auto; border-radius: inherit; vertical-align: middle; }
.ann-image figcaption { margin-top: .5rem; font-size: .85rem; color: var(--ann-muted); }
.ann-section.ann-has-bg .ann-image figcaption { color: inherit; opacity: .85; }
.ann-image-placeholder {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 160px; border: 2px dashed var(--ann-line); border-radius: 10px;
    color: var(--ann-muted); background: #f7f9fb;
}

/* Button */
.ann-btn-align-left { text-align: left; }
.ann-btn-align-center { text-align: center; }
.ann-btn-align-right { text-align: right; }
.ann-btn-align-justify { text-align: left; }
.ann-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    border: 2px solid transparent; border-radius: 10px;
    font-weight: 600; line-height: 1.2; text-decoration: none; text-align: center;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.ann-btn:hover { transform: translateY(-1px); }
.ann-btn:focus-visible { outline: 3px solid var(--ann-gold); outline-offset: 2px; }
.ann-btn-sm { padding: .4rem .9rem; font-size: .85rem; }
.ann-btn-md { padding: .65rem 1.35rem; font-size: 1rem; }
.ann-btn-lg { padding: .85rem 1.9rem; font-size: 1.15rem; }
.ann-btn-block { display: flex; width: 100%; }
.ann-btn-primary { background: var(--ann-blue); color: #fff; }
.ann-btn-primary:hover { background: var(--ann-blue-dark); color: #fff; }
.ann-btn-gold { background: var(--ann-gold); color: #3a2f1c; }
.ann-btn-gold:hover { background: var(--ann-gold-light); color: #3a2f1c; }
.ann-btn-outline { background: transparent; color: var(--ann-blue); border-color: var(--ann-blue); }
.ann-btn-outline:hover { background: var(--ann-blue); color: #fff; }
.ann-btn-light { background: #fff; color: var(--ann-navy); border-color: #fff; }
.ann-btn-light:hover { background: var(--ann-cream); color: var(--ann-navy); }
.ann-btn-link { background: transparent; color: var(--ann-blue); padding-left: 0; padding-right: 0; text-decoration: underline; }
.ann-btn-link:hover { color: var(--ann-blue-dark); transform: none; }

/* List */
.ann-list ul, .ann-list ol { margin: 0; padding-left: 1.4em; }
.ann-list li + li { margin-top: .35em; }
.ann-list-check ul, .ann-list-arrow ul { list-style: none; padding-left: 0; }
.ann-list-check li, .ann-list-arrow li { position: relative; padding-left: 1.8em; }
.ann-list-check li::before,
.ann-list-arrow li::before {
    position: absolute; left: 0; top: .1em;
    font-family: "Font Awesome 6 Free"; font-weight: 900;
    color: var(--ann-blue);
}
.ann-list-check li::before { content: "\f058"; }
.ann-list-arrow li::before { content: "\f061"; color: var(--ann-gold); }
.ann-section.ann-has-bg .ann-list li::before { color: inherit; }

/* Quote */
.ann-quote {
    margin-left: 0; margin-right: 0;
    border-left: 5px solid var(--ann-gold);
    padding: .4rem 0 .4rem 1.25rem;
    font-size: 1.15rem; font-style: italic;
}
.ann-quote p { margin: 0; }
.ann-quote footer {
    display: block; background: none; padding: 0; text-align: inherit;
    margin-top: .5rem; font-family: inherit; font-size: .9rem; font-style: normal; color: var(--ann-muted);
}
.ann-quote footer::before { content: "\2014\00a0"; }

/* Callout */
.ann-callout {
    display: flex; gap: .9rem; align-items: flex-start;
    border-left: 5px solid; border-radius: 10px;
    padding: 1rem 1.2rem;
}
.ann-callout-icon { font-size: 1.3rem; line-height: 1.4; }
.ann-callout-title { font-weight: 700; margin: 0 0 .15rem; }
.ann-callout p { margin: 0; }
.ann-callout-info { background: #eaf2f7; border-color: var(--ann-blue); color: #1f4254; }
.ann-callout-success { background: #e9f6ee; border-color: #2e8b57; color: #1d4d32; }
.ann-callout-warning { background: #fdf3e2; border-color: var(--ann-gold); color: #5e4312; }
.ann-callout-danger { background: #fbeaea; border-color: #c0392b; color: #6b1f17; }

/* Video */
.ann-video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; }
.ann-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ann-video figcaption { margin-top: .5rem; font-size: .85rem; color: var(--ann-muted); }

/* Divider */
.ann-divider hr { margin: 0; border: 0; display: inline-block; vertical-align: middle; opacity: 1; }
.ann-divider { line-height: 0; }

/* Visibility */
@container ann-root (max-width: 575px) {
    .ann-hide-mobile { display: none !important; }
}
@container ann-root (min-width: 576px) {
    .ann-hide-desktop { display: none !important; }
}

/* --------------------------------------------------------------------------
   Home page banner (below "Shape your future")
   -------------------------------------------------------------------------- */
.ann-home-banner {
    background: var(--ann-blue); /* #447996 */
    padding: clamp(2.5rem, 6vw, 4.5rem) 0;
    font-family: 'Poppins', sans-serif;
}
.ann-hb-card {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}
/* The image is always exactly 16:9 (e.g. 1600x900); when the text is taller it
   sits centered on the brand gradient instead of being cropped. */
.ann-hb-media {
    display: flex; align-items: center; position: relative; min-height: 100%; overflow: hidden;
    background: linear-gradient(135deg, var(--ann-blue), var(--ann-navy));
}
.ann-hb-media img {
    display: block; width: 100%; height: auto;
    aspect-ratio: 16 / 9; object-fit: cover;
    transition: transform .4s ease;
}
.ann-hb-media:hover img { transform: scale(1.03); }
.ann-hb-media-empty {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; min-height: 220px;
    background: linear-gradient(135deg, var(--ann-blue), var(--ann-navy));
    color: rgba(255, 255, 255, .7); font-size: 3rem;
}
.ann-hb-body {
    display: flex; flex-direction: column; justify-content: center;
    padding: clamp(1.5rem, 4vw, 3rem);
}
.ann-hb-eyebrow {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--ann-cream); color: var(--ann-brown);
    font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    padding: .35rem .8rem; border-radius: 999px;
}
.ann-hb-eyebrow i { color: var(--ann-gold); }
.ann-hb-title {
    margin: 1rem 0 .4rem;
    font-size: clamp(1.4rem, 2.6vw, 2.1rem);
    font-weight: 700; line-height: 1.2;
    color: var(--ann-navy);
}
.ann-hb-title a { color: inherit; text-decoration: none; }
.ann-hb-title a:hover { color: var(--ann-blue); }
.ann-hb-date { margin: 0 0 1rem; font-size: .85rem; color: var(--ann-muted); }
.ann-hb-date i { margin-right: .35rem; }
.ann-hb-summary { margin: 0 0 1.6rem; font-size: 1rem; line-height: 1.7; color: #4a525c; }
.ann-hb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
.ann-hb-all { color: var(--ann-blue); font-weight: 600; font-size: .92rem; text-decoration: none; }
.ann-hb-all:hover { color: var(--ann-navy); text-decoration: underline; }

/* Stacked below desktop: side by side, the text column would be much taller than the image. */
@media (max-width: 1199.98px) {
    .ann-hb-card { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Home carousel slide (carousel image as the first item)
   Always exactly 3:1, without the tablet min-height or the phone natural-size
   rules of the other slides, so a 1920x640 upload is never cropped.
   -------------------------------------------------------------------------- */
.ann-carousel-card { overflow: hidden; background: var(--ann-navy); }
.carousel-item img.ann-carousel-img { height: auto; aspect-ratio: 3 / 1; min-height: 0; object-fit: cover; }
.ann-carousel-link { position: absolute; inset: 0; z-index: 1; }
.ann-carousel-caption {
    position: absolute; left: 0; right: 0; bottom: 3.25rem; z-index: 2;
    display: flex; justify-content: center;
    pointer-events: none;
}
.ann-carousel-caption .carousel-button {
    pointer-events: auto;
    background: rgba(1, 24, 66, .55);
    backdrop-filter: blur(4px);
}
@media (max-width: 560px) {
    .ann-carousel-caption { bottom: 2.6rem; }
    .ann-carousel-caption .carousel-button { border-width: 2px; }
}

/* --------------------------------------------------------------------------
   Announcement pages
   -------------------------------------------------------------------------- */
.ann-page { background: var(--ann-cream); font-family: 'Poppins', sans-serif; padding-bottom: 4rem; }
.ann-hero {
    background: linear-gradient(135deg, var(--ann-blue) 0%, var(--ann-navy) 100%);
    color: #fff;
    padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(3.5rem, 8vw, 5.5rem);
}
.ann-hero .ann-crumbs { font-size: .85rem; margin-bottom: 1rem; opacity: .85; }
.ann-hero .ann-crumbs a { color: #fff; text-decoration: none; }
.ann-hero .ann-crumbs a:hover { text-decoration: underline; }
.ann-hero h1 { font-size: clamp(1.8rem, 4.5vw, 2.8rem); font-weight: 700; line-height: 1.2; margin: .75rem 0; }
.ann-hero .ann-hb-eyebrow { background: rgba(255, 255, 255, .15); color: #fff; }
.ann-hero-meta { font-size: .9rem; opacity: .85; }
.ann-hero-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.ann-search {
    display: flex; align-items: center;
    width: min(360px, 100%);
    background: #fff; border-radius: 999px;
    padding: .25rem .25rem .25rem 1.1rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
}
.ann-search:focus-within { outline: 3px solid var(--ann-gold); outline-offset: 2px; }
.ann-search input {
    flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
    font: inherit; font-size: .95rem; color: var(--ann-ink);
}
.ann-search input::-webkit-search-cancel-button { cursor: pointer; }
.ann-search button {
    flex: 0 0 auto; width: 40px; height: 40px; border: 0; border-radius: 50%;
    background: var(--ann-gold); color: #3a2f1c;
}
.ann-search button:hover { background: var(--ann-gold-light); }
.ann-results-bar {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
    padding-bottom: 1rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--ann-line);
    color: var(--ann-muted); font-size: .92rem;
}
.ann-results-bar strong { color: var(--ann-navy); }
.ann-results-bar a { color: var(--ann-blue); font-weight: 600; text-decoration: none; }
.ann-results-bar a:hover { text-decoration: underline; }
.ann-lead .ann-hb-card { box-shadow: 0 10px 30px rgba(1, 24, 66, .12); border: 1px solid var(--ann-line); }
.ann-hero-meta i { margin-right: .35rem; }

.ann-sheet {
    position: relative;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 12px 40px rgba(1, 24, 66, .1);
    padding: clamp(1.25rem, 4vw, 2.75rem);
    margin-top: -2.5rem;
}
.ann-sheet .ann-content > .ann-section:first-child { border-top-left-radius: 10px; border-top-right-radius: 10px; }

.ann-preview-notice {
    display: flex; align-items: center; gap: .75rem;
    background: #fdf3e2; color: #5e4312;
    border: 1px solid var(--ann-gold); border-radius: 12px;
    padding: .8rem 1.1rem; margin-bottom: 1.5rem; font-size: .92rem;
}

.ann-section-title { font-size: 1.35rem; font-weight: 700; color: var(--ann-navy); margin: 3rem 0 1.25rem; }

.ann-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
.ann-tile {
    display: flex; flex-direction: column;
    background: #fff; border-radius: 16px; overflow: hidden;
    box-shadow: 0 4px 18px rgba(1, 24, 66, .08);
    color: inherit; text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
}
.ann-tile:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(1, 24, 66, .16); color: inherit; }
.ann-tile:focus-visible { outline: 3px solid var(--ann-gold); outline-offset: 3px; }
/* overflow:hidden stops a taller image from stretching the 16:9 frame. */
.ann-tile-media { aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, var(--ann-blue), var(--ann-navy)); }
.ann-tile-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ann-tile-media .ann-tile-icon {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255, 255, 255, .7); font-size: 2.5rem;
}
.ann-tile-body { padding: 1.1rem 1.25rem 1.35rem; display: flex; flex-direction: column; flex: 1; }
.ann-tile-date { font-size: .78rem; color: var(--ann-muted); margin-bottom: .35rem; }
.ann-tile-title { font-size: 1.08rem; font-weight: 700; color: var(--ann-navy); line-height: 1.35; margin: 0 0 .5rem; }
.ann-tile-summary { font-size: .9rem; color: #4a525c; margin: 0 0 1rem; }
.ann-tile-more { margin-top: auto; font-size: .88rem; font-weight: 600; color: var(--ann-blue); }

.ann-empty { text-align: center; padding: 4rem 1rem; color: var(--ann-muted); }
.ann-empty i { font-size: 3rem; color: #c9d3dc; margin-bottom: 1rem; }

.ann-pagination { display: flex; justify-content: center; gap: .5rem; margin-top: 2.5rem; flex-wrap: wrap; }
.ann-pagination a, .ann-pagination span {
    min-width: 2.5rem; padding: .45rem .85rem; border-radius: 10px;
    text-align: center; text-decoration: none; font-weight: 600;
    background: #fff; color: var(--ann-blue); border: 1px solid var(--ann-line);
}
.ann-pagination .is-current { background: var(--ann-blue); color: #fff; border-color: var(--ann-blue); }

@media (prefers-reduced-motion: reduce) {
    .ann-btn, .ann-tile, .ann-hb-media img, .ann-accordion > summary::after { transition: none; }
    .ann-btn:hover, .ann-tile:hover, .ann-hb-media:hover img { transform: none; }
}