/* AFS Stores — brand theme.
   Colors from afstores.com computed styles + AFS Brand Guide (PMS 1807 / PMS 1815).
   Font: Montserrat (loaded via <link> in the master template head). */
:root {
    --afs-red: #b52126;        /* primary — PMS 1807 web impl (rgb 181,33,38) */
    --afs-red-dark: #9b1b20;   /* hover / darker band */
    --afs-maroon: #6e2018;     /* PMS 1815 — wordmark / secondary accent */
    --afs-ink: #1b1b1b;
    --afs-body: #5f5f5f;
    --afs-line: #e6e8eb;
    --afs-bg-muted: #f6f7f9;
    --afs-max: 1200px;
}

* { box-sizing: border-box; }
html, body { margin: 0; font-family: 'Montserrat', Arial, Helvetica, sans-serif; color: var(--afs-body); line-height: 1.7; font-size: 17px; }
h1, h2, h3 { font-family: 'Montserrat', Arial, sans-serif; color: var(--afs-red); font-weight: 700; line-height: 1.15; }
a { color: var(--afs-red); text-decoration: none; }
a:hover { text-decoration: underline; }
.afs-container { width: 100%; max-width: var(--afs-max); margin: 0 auto; padding: 0 24px; }

/* Header */
.afs-header { background: #fff; border-bottom: 1px solid var(--afs-line); position: sticky; top: 0; z-index: 10; }
.afs-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; }
.afs-logo img { height: 34px; width: auto; display: block; }            /* shrunk so the menu no longer wraps */
.afs-nav { display: flex; flex-wrap: nowrap; align-items: center; gap: 18px; }
.afs-nav a { color: var(--afs-ink); font-weight: 600; font-size: 14px; white-space: nowrap; }
.afs-nav a:hover { color: var(--afs-red); text-decoration: none; }
.afs-nav a.afs-pill { background: var(--afs-red); color: #fff; padding: 9px 18px; border-radius: 999px; }
.afs-nav a.afs-pill:hover { background: var(--afs-red-dark); color: #fff; }

/* Buttons — red pill */
.afs-btn { display: inline-block; background: var(--afs-red); color: #fff; font-weight: 600; padding: 12px 28px; border-radius: 999px; font-size: 15px; }
.afs-btn:hover { background: var(--afs-red-dark); color: #fff; text-decoration: none; }
.afs-btn--outline { background: transparent; color: #fff; border: 2px solid #fff; }
.afs-btn--outline:hover { background: #fff; color: var(--afs-red); }

/* Hero — solid red, or (block "Background Image") a photo under a brand wash */
.afs-hero { position: relative; background: var(--afs-red); color: #fff; padding: 84px 0; text-align: center; }
.afs-hero--image { background-position: center; background-size: cover; }
.afs-hero--image::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(110,32,24,.6), rgba(155,27,32,.7)); }
.afs-hero .afs-container { position: relative; z-index: 1; }
.afs-hero__eyebrow { text-transform: uppercase; letter-spacing: 2px; font-size: 13px; opacity: .92; margin: 0 0 12px; }
.afs-hero__title { color: #fff; font-size: 46px; margin: 0 0 26px; font-weight: 800; }
.afs-hero .afs-btn { background: #fff; color: var(--afs-red); }
.afs-hero .afs-btn:hover { background: var(--afs-ink); color: #fff; }

/* Standard section */
.afs-section { padding: 60px 0; }
.afs-section h2 { font-size: 30px; margin: 0 0 16px; }

/* Story of AFS (history) — parallax band. A "Background Image (parallax)" on the block stays fixed
   under a brand-red wash as the page scrolls; otherwise the band is solid maroon. */
.afs-history { position: relative; background-color: var(--afs-red-dark); color: #fff; text-align: center; padding: 96px 0; }
.afs-history--image { background-position: center; background-size: cover; background-attachment: fixed; }
.afs-history--image::before { content: ""; position: absolute; inset: 0; background: rgba(155,27,32,.82); }
.afs-history .afs-container { position: relative; z-index: 1; }
.afs-history__eyebrow { text-transform: uppercase; letter-spacing: 2px; font-size: 13px; opacity: .9; margin: 0 0 10px; }
.afs-history h2 { color: #fff; font-size: 38px; margin: 0 0 18px; }
.afs-history p { max-width: 760px; margin: 0 auto 26px; color: #fff; font-size: 18px; }
@media (max-width: 620px) { .afs-history--image { background-attachment: scroll; } }

/* Recent News */
.afs-news { padding: 64px 0; }
.afs-news h2 { font-size: 30px; text-align: center; margin: 0 0 36px; }
.afs-news-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.afs-card { display: flex; flex-direction: column; }
.afs-card img { width: 100%; height: 180px; object-fit: cover; border-radius: 6px; }
/* 162 migrated posts have no featured image (including all 19 recipes). Without a stand-in those
   cards lose their 180px image band and the grid goes ragged. A quiet branded panel keeps the rows
   aligned without pretending there's a photo. */
.afs-card__ph {
    width: 100%; height: 180px; border-radius: 6px;
    background:
        linear-gradient(135deg, rgba(181,33,38,.10) 0%, rgba(181,33,38,.04) 55%, rgba(181,33,38,.10) 100%),
        var(--afs-wash, #f4f2f1);
    border: 1px solid rgba(181,33,38,.10);
    display: flex; align-items: center; justify-content: center;
}
.afs-card__ph::after {
    content: "AFS";
    font-weight: 800; font-size: 22px; letter-spacing: 3px;
    color: rgba(181,33,38,.22);
}
.afs-card h3 { font-size: 17px; margin: 14px 0 8px; line-height: 1.25; }
.afs-card h3 a { color: var(--afs-red); }
.afs-card p { font-size: 14px; margin: 0 0 14px; }
.afs-card .afs-btn { align-self: flex-start; padding: 8px 20px; font-size: 13px; }
.afs-news__more { text-align: center; margin-top: 38px; }
/* Newsroom search (2026-10-14): one box above the grid; results replace the listing. */
.afs-search { display: flex; justify-content: center; gap: 10px; max-width: 560px; margin: 0 auto 34px; }
.afs-search input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 16px; padding: 11px 16px; border: 1px solid var(--afs-line); border-radius: 999px; }
.afs-search input:focus { outline: 2px solid var(--afs-red); outline-offset: 1px; border-color: var(--afs-red); }
.afs-search .afs-btn { flex: 0 0 auto; }
.afs-search__status { text-align: center; margin: -14px 0 28px; font-size: 15px; }
.afs-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.afs-pager { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 44px; }
.afs-pager__status { font-size: 14px; color: var(--afs-body); }

/* Partner brand band */
.afs-banners { background: var(--afs-red-dark); padding: 30px 0; }
.afs-banners__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 46px; }
.afs-banners__row img { height: 44px; width: auto; }

/* Footer */
.afs-footer { background: var(--afs-red); color: #f4dcdc; }
.afs-footer__cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 40px; padding: 56px 24px; }
.afs-footer h4 { color: #fff; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 14px; }
.afs-footer__brand img { height: 40px; margin-bottom: 16px; }
.afs-footer__brand p { font-size: 14px; max-width: 46ch; }
.afs-footer address { font-style: normal; font-size: 14px; margin-top: 14px; line-height: 1.8; }
.afs-footer ul { list-style: none; margin: 0; padding: 0; }
.afs-footer li { margin: 0 0 9px; font-size: 14px; }
.afs-footer a { color: #fff; }
.afs-footer__bar { background: var(--afs-red-dark); }
.afs-footer__bar-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; font-size: 13px; color: #f0cccc; gap: 16px; flex-wrap: wrap; }
.afs-social { display: flex; gap: 16px; }
.afs-social a { color: #fff; font-size: 13px; }

/* Cookie consent banner */
.afs-cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; background: var(--afs-ink); color: #fff; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.afs-cookie-banner[hidden] { display: none; }
.afs-cookie-banner p { margin: 0; font-size: 14px; max-width: 72ch; }
.afs-cookie-banner a { color: #fff; text-decoration: underline; }
.afs-cookie-banner__actions { display: flex; gap: 12px; flex-shrink: 0; }
.afs-btn--ghost { background: transparent; border: 2px solid #fff; color: #fff; }
.afs-btn--ghost:hover { background: #fff; color: var(--afs-ink); }

@media (max-width: 980px) {
    .afs-news-grid { grid-template-columns: repeat(2, 1fr); }
    .afs-footer__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
    .afs-news-grid, .afs-footer__cols { grid-template-columns: 1fr; }
    .afs-hero__title { font-size: 32px; }
}

/* ── Skip link ── keyboard users reach the content without tabbing the whole nav. */
.afs-skiplink {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--afs-red, #b52126); color: #fff;
    padding: 10px 16px; border-radius: 0 0 6px 0; font-weight: 600;
}
.afs-skiplink:focus { left: 0; color: #fff; text-decoration: none; }
#main { scroll-margin-top: 90px; }

/* ── Mobile navigation ──
   Six links including the "Become a Member Retailer" pill wrapped to three or four rows inside a
   sticky header, which ate most of a phone screen. Collapse to a toggle below 860px. */
.afs-navtoggle {
    display: none;
    background: none; border: 0; cursor: pointer;
    width: 44px; height: 44px; padding: 10px;
    flex-direction: column; justify-content: space-between;
}
.afs-navtoggle__bar {
    display: block; height: 2px; width: 100%;
    background: var(--afs-ink, #222); border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
}
.afs-navtoggle[aria-expanded="true"] .afs-navtoggle__bar:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.afs-navtoggle[aria-expanded="true"] .afs-navtoggle__bar:nth-child(2) { opacity: 0; }
.afs-navtoggle[aria-expanded="true"] .afs-navtoggle__bar:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

/* Gated on .js (set by the script below): with JS off the nav must never be collapsed, or the site
   becomes unnavigable. Better a tall header than unreachable links. */
@media (max-width: 860px) {
    .js .afs-navtoggle { display: flex; }
    .afs-header__inner { flex-wrap: wrap; }
    .afs-nav {
        flex-basis: 100%; flex-direction: column; align-items: stretch;
        gap: 0; padding: 8px 0 4px;
        border-top: 1px solid var(--afs-rule, #e3e3e3); margin-top: 10px;
    }
    .js .afs-nav { display: none; }
    .js .afs-nav.is-open { display: flex; }
    .afs-nav a { padding: 13px 2px; font-size: 16px; }
    .afs-nav a.afs-pill { margin: 8px 0; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    .afs-navtoggle__bar { transition: none; }
}

/* ── Migrated article content: galleries, embeds, captions, media ──
   Generated by the WordPress shortcode conversion (migration/clean-shortcodes.py). */
.afs-container img,
.afs-container video,
.afs-container audio { max-width: 100%; height: auto; }
.afs-container figure { margin: 1.5rem 0; }
.afs-container figure img { display: block; width: 100%; }
.afs-container video { border-radius: 6px; }

.wp-caption { margin: 1.5rem 0; font-size: 14px; color: var(--afs-ink-soft, #646464); }
.wp-caption img { margin-bottom: .5rem; border-radius: 6px; }

.wp-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin: 1.75rem 0;
}
.wp-gallery figure { margin: 0; }
.wp-gallery img {
    width: 100%; height: 220px; object-fit: cover;
    border-radius: 6px; display: block;
}

.video-embed {
    position: relative; width: 100%; aspect-ratio: 16 / 9;
    margin: 1.75rem 0; border-radius: 6px; overflow: hidden; background: #000;
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── Article image alignment / text wrap ──
   Migrated WordPress content uses .alignleft / .alignright / .aligncenter (on the img or its
   wp-block-image wrapper); the Umbraco RTE applies an inline float. Both float the image so the
   article text wraps around it instead of it taking the full column. */
.afs-container img.alignleft,  .afs-container figure.alignleft,  .afs-container .wp-block-image.alignleft,
.afs-container img.align-left,  .afs-container img[style*="float: left"],  .afs-container img[style*="float:left"] {
    float: left;  max-width: 46%; height: auto; margin: .35rem 1.5rem .85rem 0;
}
.afs-container img.alignright, .afs-container figure.alignright, .afs-container .wp-block-image.alignright,
.afs-container img.align-right, .afs-container img[style*="float: right"], .afs-container img[style*="float:right"] {
    float: right; max-width: 46%; height: auto; margin: .35rem 0 .85rem 1.5rem;
}
.afs-container img.aligncenter, .afs-container figure.aligncenter, .afs-container .wp-block-image.aligncenter {
    display: block; margin: 1.25rem auto; max-width: 100%;
}
.afs-container figure.alignleft img, .afs-container figure.alignright img { width: 100%; }

/* The Umbraco rich-text editor has no float/wrap control: its alignment buttons emit
   `<p style="text-align:left|right">` with the <img> inline, which right-aligns the image but does
   NOT wrap the copy around it — the reported "single images aren't formatting great" problem. Treat
   an aligned paragraph that contains an image as a wrap request, which is what editors mean by it.
   Applies to Body Text and to every Rich Text block, on articles and pages alike, and matches what the
   editor shows while typing (App_Plugins/AfsTiptap/afs-image-resize.js uses the same rules). Up to 60%
   wide, so a size the editor dragged or typed shows. */
.afs-richtext p:is([style*="text-align: right"], [style*="text-align:right"]) img {
    float: right; max-width: 60%; height: auto; margin: .35rem 0 .85rem 1.5rem;
}
.afs-richtext p:is([style*="text-align: left"], [style*="text-align:left"]) img {
    float: left;  max-width: 60%; height: auto; margin: .35rem 1.5rem .85rem 0;
}
.afs-richtext p:is([style*="text-align: center"], [style*="text-align:center"]) img {
    display: block; margin: 1.25rem auto;
}
/* Text wraps across paragraphs. An image is usually inserted in a paragraph of its own, BETWEEN two
   paragraphs (Marketing call, 2026-10-13); this used to clear the float at the end of every paragraph,
   so the image floated beside nothing and the copy below it never wrapped. Floats now run on into the
   following paragraphs and are cleared by the next heading, gallery or embed, and by the article's end. */
.afs-richtext :is(h2, h3, h4, hr, blockquote, table, .wp-gallery, .video-embed) { clear: both; }
.afs-articlebody::after,
.afs-richtext .afs-container::after { content: ""; display: block; clear: both; }

/* A captioned image from the rich-text editor is a bare <figure> (migrated WordPress ones carry a
   class). Keep it at the width the editor gave the image instead of stretching it across the column. */
.afs-richtext figure:not([class]) { width: fit-content; max-width: 100%; }
.afs-richtext figure:not([class]) img { width: auto; max-width: 100%; height: auto; }

/* ── Blocks inserted inline in rich text (2026-10-14) ──
   An Image, Gallery, Image + Text, Embed or Call to Action dropped into a rich-text field renders the
   same partial as on a page grid, but inside the text column: no inner page gutter, a floated image
   above it is cleared first, and the inline Call to Action is a soft panel rather than a full band. */
.afs-richtext .afs-container .afs-container,
.afs-articlebody .afs-container { max-width: none; padding-inline: 0; }
.afs-richtext :is(.afs-imageblock, .afs-gallery, .afs-imagetext, .afs-embed, .afs-cta) { clear: both; margin-block: 1.5rem; }
.afs-richtext .afs-imagetext__inner { gap: 28px; }
.afs-richtext .afs-cta { padding: 32px 24px; border-radius: 8px; }

/* Nothing in an article may run past the text column: WordPress captions and embeds carry fixed
   inline widths (style="width: 1024px") that the column cannot hold. */
.afs-articlebody :is(figure, div, iframe, table)[style*="width"],
.afs-articlebody iframe { max-width: 100%; }

@media (max-width: 620px) {
    /* phones: stack rather than squeeze text beside a floated image */
    .afs-container .alignleft, .afs-container .alignright,
    .afs-container img.align-left, .afs-container img.align-right, .afs-container img[style*="float"] {
        float: none; max-width: 100%; margin: 1rem 0;
    }
    .afs-richtext p[style*="text-align"] img { float: none; max-width: 100%; margin: 1rem 0; }
}

/* ── Article prev/next navigation ──
   Sits at the foot of a news article, above the "Catch Up on Team News" strip. */
.afs-artnav {
    display: flex; gap: 16px; flex-wrap: wrap;
    margin: 2.5rem 0 0; padding-top: 1.5rem;
    border-top: 1px solid var(--afs-rule, #e3e3e3);
}
.afs-artnav__link {
    flex: 1 1 240px; min-width: 0;
    display: flex; flex-direction: column; gap: 4px;
    padding: 14px 16px; border: 1px solid var(--afs-rule, #e3e3e3); border-radius: 8px;
    text-decoration: none; color: inherit;
    transition: border-color .15s ease, background-color .15s ease;
}
.afs-artnav__link:hover, .afs-artnav__link:focus-visible {
    border-color: var(--afs-red, #b52126); background: #fafafa;
}
.afs-artnav__link--next { text-align: right; }
.afs-artnav__dir { font-size: 13px; font-weight: 600; color: var(--afs-red, #b52126); }
.afs-artnav__title { font-weight: 600; line-height: 1.35; }

@media (prefers-color-scheme: dark) {
    .afs-artnav__link:hover, .afs-artnav__link:focus-visible { background: rgba(255,255,255,.04); }
}

/* ── Scroll reveal: homepage blocks fade up as they enter the viewport (master.js adds .in-view) ── */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ── Homepage slideshow (Slideshow block; slides = nested Hero Slides). master.js drives rotation. ── */
.afs-slideshow { position: relative; height: 560px; overflow: hidden; background: var(--afs-red); }
.afs-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; display: flex; align-items: center; justify-content: center; text-align: center; background: var(--afs-red) center/cover no-repeat; }
.afs-slide.is-active { opacity: 1; }
.afs-slide::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(110,32,24,.62), rgba(155,27,32,.72)); }
.afs-slide__content { position: relative; color: #fff; max-width: 760px; padding: 0 24px; transform: translateY(18px); opacity: 0; transition: opacity .9s ease .25s, transform .9s ease .25s; }
.afs-slide.is-active .afs-slide__content { transform: none; opacity: 1; }
.afs-slide__eyebrow { text-transform: uppercase; letter-spacing: 2px; font-size: 13px; margin: 0 0 12px; font-weight: 600; }
.afs-slide__title { color: #fff; font-size: 46px; margin: 0 0 26px; font-weight: 800; line-height: 1.1; }
.afs-slide .afs-btn { background: #fff; color: var(--afs-red); }
.afs-slide .afs-btn:hover { background: var(--afs-ink); color: #fff; }

/* ── Slideshow transition ──
   The block's "Transition" setting used to do nothing at all; every slideshow crossfaded. Fade stays
   the default (and the Auto/unset behaviour). Slide moves the panel in horizontally instead — the JS
   only toggles .is-active, so the difference is entirely in what that class animates. */
.afs-slideshow--slide .afs-slide { transition: opacity .6s ease, transform .6s ease; transform: translateX(12%); }
.afs-slideshow--slide .afs-slide.is-active { transform: translateX(0); }
.afs-slideshow--slide .afs-slide__content { transform: none; transition: opacity .6s ease .1s; }

@media (prefers-reduced-motion: reduce) {
    /* Honour the OS setting regardless of which transition the editor picked. */
    .afs-slide, .afs-slide__content,
    .afs-slideshow--slide .afs-slide, .afs-slideshow--slide .afs-slide__content { transition: none; transform: none; }
}

/* ── Band text tone ──
   The "Text Color" setting on Hero and Feature Band was offered to editors and read by nothing.
   Auto (the default) leaves the existing light-on-brand treatment untouched; these force the other way
   when a background image demands it. */
.afs-tone--light, .afs-tone--light :where(h1, h2, h3, h4, h5, h6, p, li, blockquote) { color: #fff; }
.afs-tone--light a:not(.afs-btn) { color: #fff; text-decoration: underline; }
.afs-tone--dark, .afs-tone--dark :where(h1, h2, h3, h4, h5, h6, p, li, blockquote) { color: var(--afs-ink, #222); }
.afs-tone--dark a:not(.afs-btn) { color: var(--afs-red, #b52126); }
/* A dark-on-image band needs the image scrim lifted, or the text fights the overlay. */
.afs-tone--dark.afs-featureband--image::before,
.afs-tone--dark.afs-hero--image::before { background: rgba(255, 255, 255, .72); }
.afs-dots { position: absolute; left: 0; right: 0; bottom: 22px; display: flex; gap: 10px; justify-content: center; z-index: 5; }
.afs-dots button { width: 11px; height: 11px; border-radius: 50%; border: 0; background: rgba(255,255,255,.5); cursor: pointer; padding: 0; }
.afs-dots button.is-active { background: #fff; }
.afs-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; background: rgba(0,0,0,.22); color: #fff; border: 0; width: 46px; height: 46px; border-radius: 50%; font-size: 22px; cursor: pointer; line-height: 1; }
.afs-arrow:hover { background: rgba(0,0,0,.4); }
.afs-arrow--prev { left: 18px; } .afs-arrow--next { right: 18px; }
@media (max-width: 620px) { .afs-slideshow { height: 460px; } .afs-slide__title { font-size: 32px; } }

/* ── General content blocks (Content Pages / listing intros) ── */
.afs-cta { padding: 56px 0; text-align: center; background: var(--afs-bg-muted); }
.afs-cta h2 { font-size: 28px; margin: 0 0 12px; }
.afs-cta p { max-width: 640px; margin: 0 auto 22px; }
.afs-image-block { margin: 1.75rem auto; }
.afs-image-block img { width: 100%; height: auto; border-radius: 6px; display: block; }
.afs-image-block figcaption { font-size: 14px; color: var(--afs-body); margin-top: .5rem; text-align: center; }
.afs-embed { margin: 1.75rem auto; }
.afs-embed iframe { max-width: 100%; }

/* ── Fix: component images keep their fixed sizing ──
   The general ".afs-container img { height: auto }" rule earlier in this file (needed so migrated
   article images scale/keep aspect) has the SAME specificity as the component rules but comes later
   in source order, so it was flattening the header logo, news-card thumbnails, the partner brand
   strip, and the footer logo to their natural size. Re-assert them here so source order wins. */
.afs-logo img { height: 34px; width: auto; }
.afs-card img { width: 100%; height: 180px; object-fit: cover; }
.afs-banners__row img { height: 44px; width: auto; }
.afs-footer__brand img { height: 40px; width: auto; }

/* ===== Block Grid ===== */
/* Umbraco Block Grid for AFS content pages. default.cshtml sets --umb-block-grid--grid-columns on
   .umb-block-grid; items.cshtml wraps every block in .umb-block-grid__layout-item (the grid cell,
   which carries --umb-block-grid--item-column-span) plus an .afs-block element that carries the
   Section Settings classes (background / spacing / width / alignment / visibility / reveal / anchor).
   Per-block partials at blockgrid/Components/{alias}.cshtml render the components styled below. */

/* ── Grid engine (driven by the Umbraco custom properties) ── */
.umb-block-grid__layout-container {
    display: grid;
    grid-template-columns: repeat(var(--umb-block-grid--grid-columns, 12), minmax(0, 1fr));
    column-gap: 28px; row-gap: 0;     /* gap only between side-by-side columns; blocks stack flush so bands can bleed */
    align-items: start;
}
.umb-block-grid__layout-item {
    grid-column: span min(var(--umb-block-grid--item-column-span, 12), var(--umb-block-grid--grid-columns, 12));
    min-width: 0;                     /* let content shrink inside the track instead of overflowing */
}
@media (max-width: 800px) {
    .umb-block-grid__layout-container { grid-template-columns: 1fr; }
    .umb-block-grid__layout-item { grid-column: 1 / -1; }
}

/* ── Section wrapper (.afs-block) + Section Settings ── */
.afs-block { width: 100%; scroll-margin-top: 90px; }   /* scroll-margin clears the sticky header for #anchor links */

/* Background */
.afs-bg--white { background: transparent; }
.afs-bg--gray  { background: var(--afs-bg-muted); }
.afs-bg--red   { background: var(--afs-red); color: #fff; }
.afs-bg--dark  { background: var(--afs-ink); color: #fff; }

/* Legible light text on the red / dark bands (headings default to brand red, so re-assert them) */
.afs-bg--red :where(h1, h2, h3, h4, h5, h6),
.afs-bg--dark :where(h1, h2, h3, h4, h5, h6),
.afs-bg--red .afs-stat__number, .afs-bg--dark .afs-stat__number,
.afs-bg--red .afs-timeline__date, .afs-bg--dark .afs-timeline__date,
.afs-bg--red .afs-timeline__title, .afs-bg--dark .afs-timeline__title,
.afs-bg--red .afs-event__loc, .afs-bg--dark .afs-event__loc,
.afs-bg--red .afs-person__name, .afs-bg--dark .afs-person__name,
.afs-bg--red .afs-card h3 a, .afs-bg--dark .afs-card h3 a { color: #fff; }
.afs-bg--red a:not(.afs-btn):not(.afs-qlink),
.afs-bg--dark a:not(.afs-btn):not(.afs-qlink) { color: #fff; text-decoration: underline; }
.afs-bg--red .afs-stat__label, .afs-bg--dark .afs-stat__label,
.afs-bg--red .afs-person__title, .afs-bg--dark .afs-person__title { color: rgba(255, 255, 255, .85); }
/* Components that carry their own light panel keep their normal colours on a coloured band */
.afs-bg--red .afs-cta, .afs-bg--dark .afs-cta,
.afs-bg--red .afs-qlink, .afs-bg--dark .afs-qlink { color: var(--afs-body); }

/* Spacing — vertical padding on the wrapper. Transparent "content" blocks (rich text, image, image+text,
   embed, divider, cards, timeline, stats, quick links, people, events) get their vertical rhythm here. */
.afs-space--none   { padding-block: 0; }
.afs-space--sm     { padding-block: 1.5rem; }
.afs-space--normal { padding-block: 3rem; }       /* default — ~48px */
.afs-space--lg     { padding-block: 5rem; }

/* "Band" blocks (Hero, Feature Band, Slideshow, Call to Action, Recent News, Brand Logos) own their
   background + vertical padding and render full-bleed. items.cshtml gives them .afs-block--band INSTEAD of
   the background / spacing / width / alignment classes, so the wrapper contributes nothing — combined with
   row-gap:0 their background runs edge-to-edge and butts against the blocks above and below. */
.afs-block--band { padding-block: 0; }

/* Width — components render an inner .afs-container; these tune how wide it runs */
.afs-w--wide .afs-container { max-width: 1480px; }
.afs-w--full { width: 100%; }
.afs-w--full .afs-container { max-width: none; }  /* full-bleed: band fills the item, content runs its full width */
/* .afs-w--contain keeps the site default (var(--afs-max) = 1200px, centred) */

/* Alignment */
.afs-align--left   { text-align: left; }
.afs-align--center { text-align: center; }

/* Visibility */
@media (max-width: 800px) { .afs-hide-mobile  { display: none !important; } }
@media (min-width: 801px) { .afs-hide-desktop { display: none !important; } }

/* ── Buttons (extend the existing .afs-btn / .afs-btn--outline) ── */
/* The base .afs-btn--outline is white (for dark bands, e.g. history); on light bands use brand colours. */
.afs-bg--white .afs-btn--outline, .afs-bg--gray .afs-btn--outline {
    background: transparent; color: var(--afs-red); border: 2px solid var(--afs-red);
}
.afs-bg--white .afs-btn--outline:hover, .afs-bg--gray .afs-btn--outline:hover {
    background: var(--afs-red); color: #fff;
}
/* Link-style button — no box */
.afs-btn--text { background: transparent; color: var(--afs-red); padding: 10px 4px; border-radius: 0; }
.afs-btn--text:hover { background: transparent; color: var(--afs-red-dark); text-decoration: underline; }
.afs-bg--red .afs-btn--text, .afs-bg--dark .afs-btn--text,
.afs-bg--red .afs-btn--text:hover, .afs-bg--dark .afs-btn--text:hover { color: #fff; }

/* ── Rich text — fills the centred content column via its inner .afs-container, matching every other block ── */
/* The block partial puts a .afs-container between .afs-richtext and the content, so a `>` child
   selector never reaches the copy and the first heading stacked its margin on the wrapper padding. */
.afs-richtext > :first-child,
.afs-richtext > .afs-container > :first-child { margin-top: 0; }
.afs-richtext > :last-child { margin-bottom: 0; }
.afs-richtext h2 { font-size: 28px; margin: 1.6em 0 .5em; }
.afs-richtext h3 { font-size: 21px; margin: 1.4em 0 .4em; }
.afs-richtext p, .afs-richtext ul, .afs-richtext ol { margin: 0 0 1.1em; }
.afs-richtext img { max-width: 100%; height: auto; border-radius: 6px; }

/* ── Feature band (modelled on .afs-history) ── */
.afs-featureband { position: relative; background-color: var(--afs-red-dark); color: #fff; text-align: center; padding: 84px 0; }
.afs-featureband--image { background-position: center; background-size: cover; }
.afs-featureband--image::before { content: ""; position: absolute; inset: 0; background: rgba(155, 27, 32, .82); }
.afs-featureband .afs-container { position: relative; z-index: 1; }
.afs-featureband__eyebrow { text-transform: uppercase; letter-spacing: 2px; font-size: 13px; opacity: .9; margin: 0 0 10px; }
.afs-featureband h2 { color: #fff; font-size: 38px; margin: 0 0 18px; }
.afs-featureband p { color: #fff; max-width: 760px; margin: 0 auto 26px; font-size: 18px; }
/* Rich text inside a band inherits the global heading/link colour (brand red), which lands at roughly
   1.4:1 against the maroon band — unreadable. The h2/p rules above only cover those two tags, and the
   band's body is editor HTML that can contain any of these. */
.afs-featureband :where(h1, h2, h3, h4, h5, h6),
.afs-featureband :where(ul, ol, li, strong, em, blockquote) { color: #fff; }
.afs-featureband a:not(.afs-btn) { color: #fff; text-decoration: underline; }
.afs-featureband .afs-btn { background: #fff; color: var(--afs-red); }
.afs-featureband .afs-btn:hover { background: var(--afs-ink); color: #fff; }
/* Parallax (fixed) background — toggled per block on Hero / Feature Band. Falls back to normal scroll
   on small screens (mobile browsers ignore fixed attachment, and it can feel janky on touch). */
.afs-hero--fixed, .afs-featureband--fixed { background-attachment: fixed; }
@media (max-width: 620px) { .afs-hero--fixed, .afs-featureband--fixed { background-attachment: scroll; } }

/* ── Image block (distinct from the migrated-content .afs-image-block) ── */
.afs-imageblock { margin: 0 auto; }
.afs-imageblock figure { margin: 0; }
.afs-imageblock img { display: block; width: 100%; height: auto; border-radius: 6px; }
.afs-imageblock figcaption { margin-top: .6rem; font-size: 14px; color: var(--afs-body); }
.afs-imageblock.is-full      { max-width: 100%; }
.afs-imageblock.is-contained { max-width: 900px; }
.afs-imageblock.is-small     { max-width: 360px; }
.afs-imageblock.align-left   { margin-inline: 0 auto; }
.afs-imageblock.align-center { margin-inline: auto; }
.afs-imageblock.align-center figcaption { text-align: center; }
.afs-imageblock.align-right  { margin-inline: auto 0; }

/* ── Call to action (extends the existing .afs-cta panel) ── */
.afs-cta__heading { color: var(--afs-red); font-size: 28px; margin: 0 0 12px; }
.afs-cta__text { max-width: 640px; margin: 0 auto 22px; }

/* ── Embed (extends the existing .afs-embed) — responsive aspect-ratio frame ── */
.afs-embed__frame { position: relative; width: 100%; overflow: hidden; border-radius: 6px; background: #000; }
.afs-embed--16x9 .afs-embed__frame { aspect-ratio: 16 / 9; }
.afs-embed--4x3  .afs-embed__frame { aspect-ratio: 4 / 3; }
.afs-embed--1x1  .afs-embed__frame { aspect-ratio: 1 / 1; }
.afs-embed__frame iframe, .afs-embed__frame video, .afs-embed__frame object {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

/* ── Card grid (cards reuse .afs-card) ── */
.afs-cardgrid__head { text-align: center; margin-bottom: 34px; }
.afs-cardgrid__head h2 { font-size: 30px; margin: 0 0 10px; }
.afs-cardgrid__head p { max-width: 640px; margin: 0 auto; }
.afs-cardgrid__grid { display: grid; gap: 28px; grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ── Image + text (two column) ── */
.afs-imagetext__inner { display: grid; grid-template-columns: var(--afs-imagetext-cols, minmax(0, 1fr) minmax(0, 1fr)); gap: 40px; align-items: center; }
/* Image width: the image's share comes first, mirrored when the image is on the right. */
.afs-imagetext--third { --afs-imagetext-cols: minmax(0, 1fr) minmax(0, 2fr); }
.afs-imagetext--twothirds { --afs-imagetext-cols: minmax(0, 2fr) minmax(0, 1fr); }
.afs-imagetext--right.afs-imagetext--third { --afs-imagetext-cols: minmax(0, 2fr) minmax(0, 1fr); }
.afs-imagetext--right.afs-imagetext--twothirds { --afs-imagetext-cols: minmax(0, 1fr) minmax(0, 2fr); }
.afs-imagetext__media img { display: block; width: 100%; height: auto; border-radius: 6px; }
.afs-imagetext__body > :first-child { margin-top: 0; }
.afs-imagetext__body > :last-child { margin-bottom: 0; }
.afs-imagetext--right .afs-imagetext__media { order: 2; }
.afs-imagetext--right .afs-imagetext__body  { order: 1; }
@media (max-width: 800px) {
    .afs-imagetext__inner { grid-template-columns: 1fr; gap: 24px; }
    .afs-imagetext--right .afs-imagetext__media,
    .afs-imagetext--right .afs-imagetext__body { order: 0; }
}

/* ── Divider ── */
.afs-divider { border: 0; border-top: 1px solid var(--afs-line); margin: 0; }
.afs-divider--space { border: 0; height: 2.5rem; margin: 0; }
.afs-divider--label { display: flex; align-items: center; gap: 16px; margin: 0;
    color: var(--afs-body); font-size: 13px; text-transform: uppercase; letter-spacing: 1px; }
.afs-divider--label::before, .afs-divider--label::after { content: ""; flex: 1; border-top: 1px solid var(--afs-line); }

/* ── Timeline (left spine with a marker per item; date shown as a brand label) ── */
.afs-timeline { margin: 0; padding: 0; }
.afs-timeline__item { position: relative; padding: 0 0 30px 30px; border-left: 2px solid var(--afs-line); }
.afs-timeline__item:last-child { padding-bottom: 0; }
.afs-timeline__item::before { content: ""; position: absolute; left: -8px; top: 3px;
    width: 14px; height: 14px; border-radius: 50%; background: var(--afs-red); box-shadow: 0 0 0 4px #fff; }
.afs-timeline__date { display: block; color: var(--afs-red); font-weight: 700; font-size: 14px; letter-spacing: .3px; }
.afs-timeline__title { margin: .2rem 0 .4rem; color: var(--afs-ink); font-size: 19px; }
.afs-timeline__text { margin: 0; }
.afs-bg--red .afs-timeline__item, .afs-bg--dark .afs-timeline__item { border-left-color: rgba(255, 255, 255, .35); }
.afs-bg--red .afs-timeline__item::before, .afs-bg--dark .afs-timeline__item::before { background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .12); }

/* ── Stats ── */
.afs-stats__grid { display: grid; gap: 24px; grid-template-columns: repeat(4, minmax(0, 1fr)); text-align: center; }
.afs-stat__number { display: block; color: var(--afs-red); font-weight: 800; font-size: 46px; line-height: 1.05; }
.afs-stat__label { display: block; margin-top: 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--afs-body); }

/* ── Quick links ── */
.afs-quicklinks__grid { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.afs-qlink { display: flex; flex-direction: column; gap: 6px; padding: 24px; background: #fff;
    border: 1px solid var(--afs-line); border-radius: 8px; color: var(--afs-ink);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.afs-qlink:hover { border-color: var(--afs-red); box-shadow: 0 8px 24px rgba(27, 27, 27, .09); transform: translateY(-2px); text-decoration: none; }
.afs-qlink__icon { font-size: 30px; line-height: 1; color: var(--afs-red); }
.afs-qlink__label { font-weight: 700; font-size: 17px; color: var(--afs-ink); }
.afs-qlink__desc { font-size: 14px; color: var(--afs-body); }

/* ── People ── */
.afs-people__grid { display: grid; gap: 28px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.afs-person { text-align: center; }
.afs-person img, .afs-person__photo { display: block; width: 160px; height: 160px; max-width: 100%;
    margin: 0 auto 14px; object-fit: cover; border-radius: 50%; }
.afs-person__name { margin: 0 0 2px; color: var(--afs-ink); font-size: 18px; }
.afs-person__title { margin: 0 0 8px; color: var(--afs-red); font-weight: 600; font-size: 14px; }
.afs-person__bio { margin: 0; font-size: 14px; color: var(--afs-body); }

/* ── Events (date badge + body row) ── */
.afs-event { display: grid; grid-template-columns: 92px 1fr; column-gap: 20px; align-content: start;
    padding: 18px 0; border-bottom: 1px solid var(--afs-line); }
.afs-event:last-child { border-bottom: 0; }
.afs-event__date { grid-column: 1; grid-row: 1 / span 2; align-self: start;
    background: var(--afs-red); color: #fff; border-radius: 8px; padding: 10px 6px;
    text-align: center; font-weight: 700; line-height: 1.2; }
.afs-event__loc { grid-column: 2; grid-row: 1; margin: 0; color: var(--afs-red);
    font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; }
.afs-event__text { grid-column: 2; grid-row: 2; margin: .25rem 0 0; }
.afs-bg--red .afs-event__date, .afs-bg--dark .afs-event__date { background: #fff; color: var(--afs-red); }

/* ── Shared column-count modifiers for the block grids ── */
/* :is() scopes them to the four grids and out-specifies each grid's own default. */
:is(.afs-cardgrid__grid, .afs-stats__grid, .afs-quicklinks__grid, .afs-people__grid).cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:is(.afs-cardgrid__grid, .afs-stats__grid, .afs-quicklinks__grid, .afs-people__grid).cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
:is(.afs-cardgrid__grid, .afs-stats__grid, .afs-quicklinks__grid, .afs-people__grid).cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 800px) {
    .afs-cardgrid__grid, .afs-stats__grid, .afs-quicklinks__grid, .afs-people__grid,
    :is(.afs-cardgrid__grid, .afs-stats__grid, .afs-quicklinks__grid, .afs-people__grid).cols-3,
    :is(.afs-cardgrid__grid, .afs-stats__grid, .afs-quicklinks__grid, .afs-people__grid).cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 520px) {
    .afs-cardgrid__grid, .afs-people__grid,
    :is(.afs-cardgrid__grid, .afs-people__grid).cols-2,
    :is(.afs-cardgrid__grid, .afs-people__grid).cols-3,
    :is(.afs-cardgrid__grid, .afs-people__grid).cols-4 {
        grid-template-columns: 1fr;
    }
    .afs-event { grid-template-columns: 72px 1fr; column-gap: 14px; }
}

/* ── Respect reduced-motion for the interactive hovers added above ── */
@media (prefers-reduced-motion: reduce) {
    .afs-qlink { transition: none; }
    .afs-qlink:hover { transform: none; }
}

/* ── Article page: one text column, the header on the featured image (Marketing, 2026-10-13) ── */
.afs-article__column { max-width: 820px; }
.afs-arthead {
    position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center;
    text-align: center; aspect-ratio: 16 / 7; min-height: 260px; margin: 8px 0 30px; padding: 32px;
    border-radius: 8px; overflow: hidden; color: #fff;
    background-color: var(--afs-red-dark); background-size: cover; background-position: center;
}
/* The AFS red over the photo: makes white type readable on any picture and evens out mismatched
   photography, as the WordPress header did. Same tint as the Feature Band. */
.afs-arthead::before { content: ""; position: absolute; inset: 0; background: rgba(155, 27, 32, .78); }
.afs-arthead__text { position: relative; z-index: 1; max-width: 660px; }
.afs-arthead h1 { color: #fff; margin: 0; font-size: clamp(26px, 4vw, 38px); text-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.afs-arthead__date { margin: 12px 0 0; color: rgba(255, 255, 255, .92); font-size: 14px; letter-spacing: .4px; }
.afs-arthead--bottom { justify-content: flex-end; }
@media (max-width: 620px) {
    .afs-arthead { aspect-ratio: auto; min-height: 220px; padding: 24px 20px; }
}

/* Blocks inside an article sit in the same column as Body Text (they used to span the page). Their
   own inner container would add a second gutter, and page-sized spacing is too much between paragraphs. */
.afs-articleblocks { margin-top: 1.25rem; }
.afs-articleblocks .afs-container { max-width: none; padding-inline: 0; }
.afs-articleblocks .afs-space--normal { padding-block: 1.25rem; }
.afs-articleblocks .afs-space--lg { padding-block: 2rem; }

/* ── Gallery block ── */
.afs-gallery__heading { font-size: 28px; margin: 0 0 18px; }
.afs-gallery__grid { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.afs-gallery__grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.afs-gallery__grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.afs-gallery__grid.is-original { align-items: start; }
.afs-gallery__item { display: block; overflow: hidden; border-radius: 6px; background: var(--afs-bg-muted); }
.afs-gallery__item img { display: block; width: 100%; height: auto; transition: transform .25s ease; }
/* The crop already gives each tile its shape; this keeps a tile in line if one falls back uncropped. */
.afs-gallery__grid.is-landscape img { aspect-ratio: 3 / 2; object-fit: cover; }
.afs-gallery__grid.is-square img    { aspect-ratio: 1 / 1; object-fit: cover; }
.afs-gallery__grid.is-wide img      { aspect-ratio: 16 / 7; object-fit: cover; }
.afs-gallery__item:hover img, .afs-gallery__item:focus-visible img { transform: scale(1.03); }
@media (max-width: 620px) {
    .afs-gallery__grid, .afs-gallery__grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Click to enlarge: the viewer opened by data-afs-lightbox links (script in the master template) ── */
.afs-zoom { cursor: zoom-in; }
.afs-lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; }
.afs-lightbox[open] { display: flex; align-items: center; justify-content: center; }
.afs-lightbox::backdrop { background: rgba(12, 12, 12, .92); }
.afs-lightbox__fig { margin: 0; max-width: calc(100vw - 150px); display: flex; flex-direction: column; align-items: center; }
.afs-lightbox__img { display: block; max-width: 100%; max-height: calc(100vh - 140px); object-fit: contain; border-radius: 4px; }
.afs-lightbox__cap { margin-top: 12px; color: #eee; font-size: 14px; text-align: center; }
.afs-lightbox__count { position: absolute; top: 18px; left: 22px; margin: 0; color: #ccc; font-size: 13px; }
.afs-lightbox__btn {
    position: absolute; width: 48px; height: 48px; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .14); color: #fff; font-size: 30px; line-height: 1; cursor: pointer;
}
.afs-lightbox__btn:hover { background: rgba(255, 255, 255, .28); }
.afs-lightbox__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.afs-lightbox__close { top: 12px; right: 16px; }
.afs-lightbox__prev { left: 16px; top: 50%; transform: translateY(-50%); }
.afs-lightbox__next { right: 16px; top: 50%; transform: translateY(-50%); }
@media (max-width: 620px) {
    .afs-lightbox__fig { max-width: calc(100vw - 24px); }
    .afs-lightbox__img { max-height: calc(100vh - 160px); }
    .afs-lightbox__prev, .afs-lightbox__next { top: auto; bottom: 16px; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .afs-gallery__item img { transition: none; }
    .afs-gallery__item:hover img, .afs-gallery__item:focus-visible img { transform: none; }
}