/* ==========================================================================
   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.

   This file replaces an earlier version that had grown into three
   stacked "layers" (an original draft, an approved revision, and a
   final "Bold Civic" pass), each overriding pieces of the one before
   it. That worked, but left a lot of dead/overridden rules and a few
   accidental regressions where later overrides clashed with earlier
   ones. This version keeps only the FINAL, visually-live result of
   that cascade, fixes the couple of bugs that had crept in along the
   way, and comments every section for future maintainers. See the
   "Fixes applied in this pass" notes inline below (search "FIX:").
   ========================================================================== */

/* --------------------------------------------------------------------------
   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 {
    display: flow-root; /* contains the floated cover image so this
                            section wraps fully around it */
    margin-block-end: 28px;
    color: var(--sa-ink);
}
.BookDownloadSection p,
.BookDownloadSection h2,
.BookDownloadSection h3 {
    color: var(--sa-ink);
}
.BookDownloadSection a:focus-visible {
    outline-color: var(--sa-accent-line);
}

/* FIX (requested): the cover previously jumped straight from a fixed
   400px on desktop to a fixed 170px at ≤768px, with nothing in between.
   On mid-size screens (roughly 768–1000px) that 400px cover could take
   up more than half the content width and crowd the download button
   into a narrow, awkward column. A fluid clamp() width scales smoothly
   at every size instead, and max-width caps it relative to its
   container as a safety net. */
.BookCover {
    display: block;
    float: inline-start; /* sits on the right in RTL; text/button wrap
                             to its left */
    width: clamp(170px, 32vw, 360px);
    max-width: 45%;
    height: auto;
    object-fit: cover;
    margin: 0;
    margin-inline-end: 32px;
    margin-block-end: 16px;
    border: 0;
    border-radius: 0;
    box-shadow: 0 8px 18px rgb(20 40 80 / 0.12);
}

.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);
}

.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;
    }
}