/* ==========================================================================
   Safe Activism — "Bold Civic" theme
   Consolidated CSS — September 2026
   --------------------------------------------------------------------------
   REPLACEMENT for the site's custom CSS, not an additional layer.
   Keep GeneratePress / GenerateBlocks core styles loading as normal.
   No new HTML/classes, fonts, or JavaScript required — reuses the Noto
   fonts already loaded by the theme.

   Brochure layout revision — 24 September 2026.
   Covers, descriptions and downloads now occupy a stable grid instead
   of wrapping around a float. Narrow layouts stack in reading order.
   Existing colors, typography and other site sections are preserved.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   Single source of truth for the palette, radius and fonts. Everything
   below should reference these variables rather than hard-coded colors,
   so the palette can be re-tuned from one place.
   -------------------------------------------------------------------------- */
:root {
    --sa-blue: #182777;        /* primary brand blue */
    --sa-blue-dark: #101d5b;   /* deepest blue — hover/active states */
    --sa-ink: #18234c;         /* body text on light backgrounds */
    --sa-muted: #4d5570;       /* secondary/quiet text on light backgrounds */
    --sa-paper: #fff4df;       /* warm cream — page background */
    --sa-white: #ffffff;
    --sa-line: #c5bbab;        /* hairline borders on light backgrounds */
    --sa-tint: #f8e5cb;        /* warm tint — hover backgrounds on light UI */
    --sa-gold: #ef866d;        /* coral accent (kept the "gold" name from an
                                   earlier palette revision — it is coral,
                                   not gold, in this version) */
    --sa-radius: 0px;          /* Bold Civic uses sharp corners throughout */
    --sa-body: "Noto Naskh Arabic", Tahoma, serif;
    --sa-heading: "Noto Kufi Arabic", Tahoma, sans-serif;

    /* FIX (cleanup): earlier versions had a separate "--sa-turquoise" teal
       accent. The Bold Civic palette intentionally merged that accent into
       the primary blue, but the variable kept the old "turquoise" name,
       which no longer matched its color. Renamed to --sa-accent-line and
       kept as its own token (rather than reusing --sa-blue directly) so
       borders/focus rings can be retuned independently later without
       touching the primary brand blue. */
    --sa-accent-line: #182777;

    /* GeneratePress theme tokens, mapped to the palette above so that any
       core WP blocks/widgets this stylesheet doesn't explicitly style
       (default buttons, tables, etc.) still match the Bold Civic look
       instead of an earlier draft's colors. */
    --contrast: var(--sa-ink);
    --contrast-2: var(--sa-muted);
    --contrast-3: var(--sa-muted);
    --base: var(--sa-tint);
    --base-2: var(--sa-paper);
    --base-3: var(--sa-white);
    --accent: var(--sa-blue);
    --accent-1: var(--sa-blue-dark);
    --accent-2: var(--sa-gold);
    --accent-3: var(--sa-blue);
    --accent-4: var(--sa-gold);
    --accent-5: var(--sa-tint);
    --accent-6: var(--sa-blue-dark);
    --accent-7: var(--sa-gold);
    --accent-8: var(--sa-gold);
    --accent-9: var(--sa-blue);
    --accent-10: var(--sa-blue);
}

/* --------------------------------------------------------------------------
   2. Reset & base typography
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    direction: rtl;
    text-align: right;
    background: var(--sa-paper);
    color: var(--sa-ink);
    font-family: var(--sa-body);
    font-size: 19px;
    line-height: 1.95;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--sa-heading);
    color: var(--sa-ink);
    text-align: start;
    text-shadow: none;
    line-height: 1.8;
    letter-spacing: normal;
}
h1 { font-size: clamp(1.7rem, 3vw, 2.7rem); }
h2 {
    font-size: clamp(1.3rem, 2.25vw, 1.95rem);
    margin: 0 0 1.4rem;
    color: var(--sa-blue); /* h2/h3 default to the accent blue; specific
                               components below override this where they
                               sit on a colored background */
}
h3 {
    font-size: 1.15rem;
    color: var(--sa-blue);
}
p { margin-block: 0 1.1em; }

a {
    color: var(--sa-blue);
    text-underline-offset: 0.22em;
}
/* FIX (regression): the old "hover = turquoise" rule relied on turquoise
   being a distinct teal. Now that --sa-accent-line equals --sa-blue, a
   hover color of --sa-accent-line would be identical to the link's own
   color, i.e. no visible hover feedback at all (these links are always
   underlined, so underline-on-hover isn't available as a fallback cue
   either). Using --sa-blue-dark instead restores a visible hover state
   while keeping excellent contrast on the cream background. */
a:hover {
    color: var(--sa-blue-dark);
}
:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid var(--sa-accent-line);
    outline-offset: 4px;
}

img {
    max-width: 100%;
    height: auto;
}

.entry-content {
    overflow-wrap: anywhere;
}
.entry-content ul,
.entry-content ol {
    margin-inline: 0;
    padding-inline-start: 1.6em;
}
.entry-content li {
    padding-inline-start: 0.25em;
    text-indent: 0;
}
.entry-content ol {
    list-style-type: persian; /* Persian/Farsi numerals, matching the
                                  site's RTL Dari/Farsi content */
}
.entry-content p a {
    text-decoration: underline;
}
.entry-content [dir="ltr"],
input[type="email"],
input[type="url"] {
    direction: ltr;
    text-align: left;
}
.gb-container {
    font-family: var(--sa-body);
}

/* --------------------------------------------------------------------------
   3. Header & primary navigation
   -------------------------------------------------------------------------- */
.site-header {
    background: var(--sa-paper);
    color: var(--sa-blue);
    border-top: 0;
    border-bottom: 0;
}
.site-header .inside-header {
    max-width: 1240px;
    margin-inline: auto;
    padding: 24px 28px;
    gap: 24px;
}
.site-header .site-branding-container {
    gap: 16px;
}
.site-header .header-image {
    width: 54px;
    height: auto;
    display: block;
    filter: none;
    background: transparent;
    border: 0;
    border-radius: 0;
}
.site-header .main-title {
    font-family: var(--sa-heading);
    font-size: clamp(1.35rem, 2.6vw, 2rem);
    padding: 0;
    line-height: 1.8;
}
.site-header .main-title a,
.site-header .main-title a:hover {
    color: var(--sa-blue);
}
.site-header .site-description {
    color: var(--sa-ink);
    font-size: 1rem;
}

.main-navigation,
.main-navigation .inside-navigation {
    background: var(--sa-paper);
}
.main-navigation {
    padding-inline: 0;
}
.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items {
    font-family: var(--sa-body);
    font-size: 1.05rem;
    text-align: start;
    color: var(--sa-blue);
}
.main-navigation .main-nav > ul > li > a {
    border-radius: 0;
}
.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul li.sfHover > a,
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
    background: var(--sa-tint);
    color: var(--sa-blue-dark);
}
.main-navigation .main-nav ul ul {
    background: var(--sa-paper);
    border: 1px solid var(--sa-line);
    border-radius: 0;
    box-shadow: 0 16px 40px rgb(25 38 62 / 0.14);
    width: 310px;
}
.main-navigation .main-nav ul ul li a {
    color: var(--sa-ink);
    padding: 12px 18px;
    font-size: 1rem;
    line-height: 1.8;
}
/* FIX (consistency): this nested flyout hover still used a leftover
   blue-white (#edf1fc) from an earlier palette instead of the warm
   cream --sa-tint used by the top-level nav hover. Unified both so
   hover states feel like one design language. */
.main-navigation .main-nav ul ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul ul li.sfHover > a,
.main-navigation .main-nav ul ul li[class*="current-menu-"] > a {
    color: var(--sa-blue-dark);
    background: var(--sa-tint);
}
.site-header a:focus-visible,
.main-navigation a:focus-visible,
.main-navigation button:focus-visible {
    outline-color: var(--sa-accent-line);
}

/* The live theme serves LTR navigation CSS even on this RTL page.
   Without this override, closed submenus get pushed 99,999px
   off-screen (the theme's own default), which causes horizontal
   overflow/scroll in RTL. This keeps closed submenus in place,
   hidden by the native opacity/height rules instead. */
.main-navigation .main-nav ul ul {
    left: auto;
    right: 0;
    text-align: right;
    max-height: 70vh;
    max-height: 70dvh;
    overflow-y: auto;
}
.main-navigation:not(.toggled) .main-nav ul ul li:hover > ul,
.main-navigation:not(.toggled) .main-nav ul ul li.sfHover > ul {
    left: auto;
    right: 100%;
}
.main-navigation:not(.toggled) .main-nav ul li:focus-within > ul {
    left: auto;
    right: 0;
    opacity: 1;
    pointer-events: auto;
    height: auto;
    overflow: visible;
}
.main-navigation:not(.toggled) .main-nav ul ul li:focus-within > ul {
    right: 100%;
}
.main-navigation:not(.toggled) .main-nav ul li:hover > ul,
.main-navigation:not(.toggled) .main-nav ul li.sfHover > ul,
.main-navigation:not(.toggled) .main-nav ul li:focus-within > ul {
    overflow-y: auto;
}

/* --------------------------------------------------------------------------
   4. Page shell
   -------------------------------------------------------------------------- */
body .site.grid-container {
    max-width: 1240px;
}
body .site-main .inside-article {
    background: var(--sa-paper);
    padding: clamp(18px, 3vw, 44px) clamp(16px, 3vw, 32px);
}
body.home .site-main .inside-article {
    /* Home page removes the top/bottom padding here because the hero
       block (.home .Item-Container, below) supplies its own spacing. */
    padding: 0 clamp(16px, 3vw, 32px);
}
body.home .site-content {
    max-width: 1240px;
    margin-inline: auto;
}
body.home .entry-content {
    margin-top: 0;
}
body.home .gb-element-210b1676 {
    padding: 0;
    background: transparent;
    min-width: 0;
}
body.home #MainWrapper {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: none;
    min-width: 0;
}
#MainWrapper > .wp-block-spacer {
    height: 0 !important;
}
#MainWrapper > .wp-block-spacer:first-child {
    display: none;
}

/* Shared card geometry for the main content sections. */
.Item-Container,
.BookContainerFP,
.BookContainer,
.Resources {
    padding: clamp(22px, 3.5vw, 44px);
    border-radius: var(--sa-radius);
    margin: 0;
}

/* --------------------------------------------------------------------------
   5. Homepage editorial introduction
   .Item-Container is a plain white card with a blue top accent on
   non-home pages. On the homepage it becomes a full solid-blue hero
   block instead (the ".home" rules below).
   -------------------------------------------------------------------------- */
.Item-Container {
    background: var(--sa-white);
    border: 1px solid var(--sa-line);
    border-block-start: 4px solid var(--sa-blue);
}
.Item-Container > p:last-child {
    margin-bottom: 0;
}

.home .Item-Container {
    display: block;
    background: var(--sa-blue);
    color: var(--sa-paper);
    border: 0;
    border-radius: 0;
    padding: clamp(28px, 4vw, 56px);
}
.home .Item-Container > h2 {
    color: var(--sa-paper);
    border-inline-start: 6px solid var(--sa-gold);
    padding-inline-start: 24px;
    font-size: clamp(1.7rem, 3.5vw, 3rem);
    margin-block: 0 24px;
}
.home .Item-Container > p {
    color: var(--sa-paper);
    max-width: 950px;
}
.home .Item-Container a {
    color: #ffb29b; /* light coral tint of --sa-gold, for legible links on
                        the dark-blue hero background */
}
.home .Item-Container a:hover {
    color: var(--sa-white);
}
.home .Item-Container a:focus-visible {
    outline-color: var(--sa-gold);
}

/* --------------------------------------------------------------------------
   6. Handbook feature, chapter catalogue & cover/download layout
   -------------------------------------------------------------------------- */
.BookContainerFP,
.BookContainer {
    background: var(--sa-paper);
    color: var(--sa-ink);
    border: 0;
    padding: clamp(28px, 4vw, 56px);
}
.BookContainerFP > h2,
.BookContainer > h2 {
    font-size: clamp(1.5rem, 2.8vw, 2.3rem);
}

.BookDownloadSection {
    /* The existing brochure markup has one cover, two paragraphs and
       two download links. Reserve four content rows beside the cover.
       Unlike a float, the text column stays the same width below it. */
    display: grid;
    grid-template-columns: minmax(0, 28%) minmax(0, 1fr);
    grid-template-rows: repeat(4, auto);
    column-gap: clamp(24px, 3vw, 40px);
    row-gap: 16px;
    align-items: start;
    align-content: start;
    margin-block-end: 28px;
    color: var(--sa-ink);
}
.BookDownloadSection > * {
    grid-column: 2;
    min-width: 0;
    margin-block: 0;
}
.BookDownloadSection p,
.BookDownloadSection h2,
.BookDownloadSection h3 {
    color: var(--sa-ink);
}
.BookDownloadSection a:focus-visible {
    outline-color: var(--sa-accent-line);
}

.BookCover {
    display: block;
    float: none;
    width: 100%;
    max-width: 280px;
    height: auto;
    object-fit: contain;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: 0 8px 18px rgb(20 40 80 / 0.12);
}
.BookDownloadSection > .BookCover {
    grid-column: 1;
    grid-row: 1 / -1;
    justify-self: center;
}

/* On the homepage the two links already share a wrapper, so they
   occupy one grid row. Keep that wrapper; no HTML edits are required. */
.BookDownloadSection:has(> div > .DownloadLink) {
    grid-template-rows: repeat(3, auto);
}
.BookDownloadSection > div:has(> .DownloadLink) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    width: 100%;
    min-width: 0;
    margin: 0;
}

.entry-content a.DownloadLink,
.entry-content a.wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px; /* comfortable touch target */
    max-width: 100%;
    padding: 12px 24px;
    margin-block: 12px;
    background: var(--sa-blue);
    color: var(--sa-paper);
    border: 0;
    border-inline-start: 7px solid var(--sa-gold); /* coral accent bar,
        echoed on pull-quotes and the accordion buttons below for a
        consistent "Bold Civic" motif */
    border-radius: 0;
    font: 700 1.05rem/1.8 var(--sa-body);
    text-decoration: none;
    text-align: center;
}
.entry-content a.DownloadLink:hover,
.entry-content a.wp-block-button__link:hover {
    background: var(--sa-blue-dark);
    color: var(--sa-white);
}

/* Compact brochure buttons stay stacked and align to the RTL start
   edge. Each button fits its label; long labels wrap within the
   available column on smaller screens. Applies to direct links and
   the homepage's existing download wrapper. */
.entry-content .BookDownloadSection a.DownloadLink {
    display: flex;
    width: fit-content;
    min-width: 0;
    max-width: 100%;
    justify-self: start;
    margin: 0;
    padding: 10px 22px;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
}
.entry-content .BookDownloadSection a.DownloadLink > * {
    min-width: 0;
}

/* Use the actual available section width as well as the viewport.
   This also handles narrow WordPress columns on large screens. */
.BookContainerFP,
.BookContainer {
    container-type: inline-size;
    container-name: sa-brochure;
}
@container sa-brochure (max-width: 42rem) {
    .BookDownloadSection,
    .BookDownloadSection:has(> div > .DownloadLink) {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        row-gap: 20px;
    }
    .BookDownloadSection > *,
    .BookDownloadSection > .BookCover {
        grid-column: 1;
        grid-row: auto;
    }
    .BookDownloadSection > .BookCover {
        width: min(65%, 230px);
        max-width: 100%;
        margin-inline: auto;
    }
}
/* Viewport fallback and an explicit tablet/phone layout. */
@media (max-width: 900px) {
    .BookDownloadSection,
    .BookDownloadSection:has(> div > .DownloadLink) {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        row-gap: 20px;
    }
    .BookDownloadSection > *,
    .BookDownloadSection > .BookCover {
        grid-column: 1;
        grid-row: auto;
    }
    .BookDownloadSection > .BookCover {
        width: min(65%, 230px);
        max-width: 100%;
        margin-inline: auto;
    }
}

.BookContainerFP > div > ol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 30px;
    margin: 24px 0 0;
    padding-inline-start: 1.9em;
}
.BookContainerFP > div > ol > li {
    padding: 0 0 0 0.4em;
    border-block-end: 1px solid var(--sa-blue);
    color: var(--sa-blue);
}
.BookContainerFP > div > ol > li::marker {
    font-weight: bold;
}
.BookContainerFP > div > ol > li > a {
    display: block;
    padding: 15px 4px;
    color: var(--sa-blue-dark);
    line-height: 1.8;
    text-decoration: none;
    font-weight: 700;
}
.BookContainerFP > div > ol > li > a:hover {
    color: var(--sa-accent-line);
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   7. Resources grid
   -------------------------------------------------------------------------- */
.Resources {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    background: var(--sa-gold);
    color: var(--sa-blue-dark);
}
.Resources > h2,
.Resources > .Cover {
    grid-column: 1 / -1;
}
.Resources > h2 {
    color: var(--sa-blue-dark);
    margin-block-end: 24px;
    font-size: clamp(1.4rem, 2.6vw, 2rem);
}
.Resources > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 14px;
    background: transparent;
    color: var(--sa-blue-dark);
    border: 0;
    border-inline-start: 1px solid var(--sa-blue); /* vertical dividers
        between cards, since they now share one background instead of
        sitting in individual panels */
    border-radius: 0;
    text-align: center;
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.Resources > a:last-child {
    border-inline-end: 1px solid var(--sa-blue);
}
.Resources > a:hover {
    background: #f6a48e; /* lighter tint of --sa-gold */
    color: var(--sa-blue-dark);
}
.Resources > a h3 {
    color: inherit;
    text-align: center;
    font-size: 1.05rem;
    margin: 0;
    line-height: 1.8;
}
.Resources .ImageSVG {
    display: block;
    width: 52px;
    height: 52px;
    object-fit: contain;
    margin: 0 auto;
    filter: none;
}
.Resources .Cover {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    filter: none;
}

/* --------------------------------------------------------------------------
   8. Impact ("About") cards & testimonial
   -------------------------------------------------------------------------- */
.About {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    padding: clamp(28px, 4vw, 48px);
}
.About > h2 {
    grid-column: 1 / -1;
    margin-bottom: 4px;
    border-inline-start: 5px solid var(--sa-gold);
    padding-inline-start: 20px;
}
.About > div {
    padding: 12px 22px;
    background: transparent;
    border: 0;
    border-inline-start: 1px solid var(--sa-line);
    border-radius: 0;
    box-shadow: none;
}
.About > div > img {
    display: block;
    width: 60px;
    height: 60px;
    object-fit: contain;
    margin: 0 0 22px;
}
.About > div > p {
    margin: 0;
    color: var(--sa-ink);
}

.Testimonial {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    padding: clamp(28px, 4vw, 48px);
    background: var(--sa-blue);
    color: var(--sa-paper);
    border-radius: 0;
}
.Testimonial > h2 {
    grid-column: 1 / -1;
    margin-bottom: 4px;
    color: var(--sa-paper);
    border-inline-start: 5px solid var(--sa-gold);
    padding-inline-start: 20px;
}
.Testimonial .wp-block-pullquote {
    position: relative;
    margin: 0;
    padding: 14px 24px;
    text-align: start;
    background: transparent;
    color: var(--sa-paper);
    border: 0;
    border-inline-start: 1px solid var(--sa-gold);
    border-radius: 0;
}
.Testimonial .wp-block-pullquote::before {
    content: none;
}
.Testimonial blockquote {
    margin: 0;
    padding: 0;
    border: 0;
    font: 400 1.15rem/2 var(--sa-body);
}
.Testimonial .wp-block-pullquote p {
    font-size: inherit;
    line-height: inherit;
    color: var(--sa-paper);
}
.Testimonial cite {
    display: block;
    margin-top: 18px;
    color: #f6c8b9; /* light tint of --sa-gold, for muted text on the
                        dark-blue background */
    font: 400 1rem/1.8 var(--sa-body);
}
.Testimonial a {
    color: #ffb29b;
}
/* FIX (regression): as with the generic a:hover rule above, this section
   had no explicit hover color, so it fell back to the site-wide
   a:hover rule. Now that --sa-accent-line equals --sa-blue — the exact
   background color of this section — that fallback would make hovered
   links invisible. Explicit white hover restores visibility. */
.Testimonial a:hover {
    color: var(--sa-white);
}
.Testimonial a:focus-visible {
    outline-color: var(--sa-gold);
}

/* Existing choice to hide this section, preserved. */
.FollowUS {
    display: none;
}

/* --------------------------------------------------------------------------
   9. Digital-security accordions
   (Includes the site's existing "DigitalSecurityIntagram" class spelling.)
   -------------------------------------------------------------------------- */
:is(.DigitalSecurity, .DigitalSecurityIntagram) {
    font-family: var(--sa-body);
}
:is(.DigitalSecurity, .DigitalSecurityIntagram) details {
    margin-bottom: 16px;
    background: var(--sa-white);
    border: 1px solid var(--sa-blue);
    border-radius: 0;
    box-shadow: none;
}
:is(.DigitalSecurity, .DigitalSecurityIntagram) summary {
    display: list-item;
    list-style: disclosure-closed inside;
    cursor: pointer;
    padding: 18px 22px;
    border-radius: 0;
    background: var(--sa-blue);
    color: var(--sa-paper);
    border-inline-start: 5px solid var(--sa-gold);
    font-size: 1.1rem;
    font-weight: bold;
    word-spacing: normal;
}
/* FIX (accessibility bug): this focus outline was hard-coded to a dark
   red-brown (#9d3f2a) against this summary's own dark-blue background —
   only ~2:1 contrast, well under WCAG's 3:1 minimum for focus
   indicators, so keyboard users could barely see it. --sa-gold (the
   coral accent already used elsewhere on this same element) gives
   ~5.7:1 against the blue background instead. */
:is(.DigitalSecurity, .DigitalSecurityIntagram) summary:focus-visible {
    outline-color: var(--sa-gold);
}
:is(.DigitalSecurity, .DigitalSecurityIntagram) details[open] > summary {
    list-style-type: disclosure-open;
    border-bottom: 1px solid var(--sa-line);
    border-radius: 0;
}
:is(.DigitalSecurity, .DigitalSecurityIntagram) summary::before {
    content: none;
}
:is(.DigitalSecurity, .DigitalSecurityIntagram) .wp-block-details .gb-text {
    color: var(--sa-ink);
    text-align: start;
    font-size: 1.1rem;
    line-height: 2;
    margin: 18px 22px;
    animation: none;
}
:is(.DigitalSecurity, .DigitalSecurityIntagram) .wp-block-details .Visual {
    display: block;
    width: 160px;
    max-width: 65%;
    height: auto;
    object-fit: contain;
    margin: 24px auto;
    border-radius: 8px;
}
:is(.DigitalSecurity, .DigitalSecurityIntagram) .wp-block-details a.gb-text {
    display: block;
    width: fit-content;
    max-width: calc(100% - 44px);
    padding: 12px 24px;
    margin: 24px auto;
    background: var(--sa-blue);
    color: var(--sa-white);
    border-radius: 0;
    border-inline-start: 6px solid var(--sa-gold);
    text-align: center;
    text-decoration: none;
}
:is(.DigitalSecurity, .DigitalSecurityIntagram) .wp-block-details a.gb-text:hover {
    background: var(--sa-blue-dark);
}

/* --------------------------------------------------------------------------
   10. Forms, tables, footer
   -------------------------------------------------------------------------- */
input, select, textarea, button {
    font-family: inherit;
}
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    max-width: 100%;
    border-radius: 8px;
}
.wp-block-table {
    overflow-x: auto;
}

.site-footer .site-info {
    margin-top: 0;
    padding-block: 24px;
    background: var(--sa-paper);
    color: var(--sa-ink);
    border-top: 3px solid var(--sa-gold);
}
.site-footer .copyright-bar a {
    color: var(--sa-blue);
    font-size: 1rem;
    text-decoration: underline;
}
.site-footer a:focus-visible {
    outline-color: var(--sa-accent-line);
}

/* --------------------------------------------------------------------------
   11. Responsive breakpoints
   FIX (dead code / gap): the previous file's ≤420px and ≤350px rules for
   .Resources were overridden by a later, unconditional ≤768px rule
   positioned further down the old stylesheet — so between roughly
   350–420px wide, resource cards actually rendered as 2 columns
   instead of collapsing to 1 as originally intended, and card text
   stayed centered instead of switching to start-aligned next to the
   icon. Consolidating into one clean ≤420px tier below removes that
   gap; a separate ≤350px tier is no longer needed since nothing in it
   was distinct once the gap is closed.
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
    .Resources {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    body { font-size: 18px; }

    /* Header */
    .site-header .inside-header { padding: 16px; gap: 14px; }
    .site-header .header-image { width: 42px; }
    .site-header .site-branding-container { gap: 10px; }

    /* Navigation */
    .main-navigation .main-nav ul ul {
        width: auto;
        border: 0;
        box-shadow: none;
        border-radius: 0;
    }
    #site-navigation.toggled .main-nav > ul {
        max-height: 70vh;
        max-height: 70dvh; /* dvh accounts for mobile browser chrome */
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .main-navigation .menu-toggle { min-height: 48px; } /* touch target */

    /* Homepage hero */
    .home .Item-Container { padding: 28px 20px; }
    .home .Item-Container > h2 { padding-inline-start: 16px; }

    /* Handbook section */
    .BookContainerFP, .BookContainer { padding: 28px 20px; }
    .BookContainerFP > div > ol {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }
    .entry-content a.DownloadLink { width: 100%; }

    /* Resources */
    .Resources { padding: 28px 20px; gap: 16px 0; }

    /* About / Testimonial stack to one column */
    .About, .Testimonial {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        padding: 28px 20px;
    }
    .About > div {
        display: flex;
        align-items: center;
        gap: 20px;
        border-inline-start: 0;
        border-block-start: 1px solid var(--sa-line);
    }
    .About > div > img {
        flex: 0 0 60px;
        width: 60px;
        height: 60px;
        margin: 0;
    }
    .About > div > p { min-width: 0; }
}

@media (max-width: 420px) {
    /* Resource cards collapse to one column and switch to a horizontal
       icon+text layout; vertical dividers become horizontal ones since
       cards now stack instead of sitting side by side. */
    .Resources { grid-template-columns: minmax(0, 1fr); }
    .Resources > a {
        flex-direction: row;
        padding: 18px;
        border-inline-start: 0;
        border-block-start: 1px solid var(--sa-blue);
    }
    .Resources > a:first-of-type { border-block-start: 0; }
    .Resources > a:last-child { border-inline-end: 0; }
    .Resources > a h3 { text-align: start; }
    .Resources .ImageSVG { margin: 0; width: 48px; height: 48px; }

    .Item-Container, .BookContainerFP, .BookContainer, .Resources {
        padding: 20px 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .Resources > a { transition: none; }
}

/* --------------------------------------------------------------------------
   12. Print
   -------------------------------------------------------------------------- */
@media print {
    .site-header, .main-navigation, .site-footer {
        display: none !important;
    }
    body,
    body .site-main .inside-article {
        background: white;
        color: black;
    }
    .BookDownloadSection {
        background: white;
        color: black;
        border: 1px solid #999;
    }
    .BookDownloadSection p { color: black; }
    .home .Item-Container,
    .Testimonial,
    .Resources {
        background: white;
        color: black;
        box-shadow: none;
    }
    .home .Item-Container > h2,
    .home .Item-Container > p,
    .Testimonial > h2,
    .Testimonial blockquote,
    .Testimonial .wp-block-pullquote p,
    .Testimonial cite {
        color: black;
    }
    .Item-Container, .BookContainerFP, .BookContainer, .Resources {
        box-shadow: none;
    }
}