/* Site-wide styles */
:root {
    --safi-brand: #16a34a;
    --safi-brand-mid: #15803d;
    --safi-brand-dark: #14532d;
    --safi-dark-bg: #161B26;
    --safi-light-bg: #EFEAE0;
    --safi-text: #1C2230;
    --safi-text-light: #F8F6F1;
    --safi-text-muted: #8A8275;
    --safi-text-dim: #4A5164;
    --safi-border: #E6DFD0;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
    font-size: 17px;
    line-height: 1.7;
    color: var(--safi-text);
    background: #fff;
}

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* Header */
.site-header {
    background: #ffffff;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--safi-border);
}
.header-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
}
.site-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--safi-text);
    text-decoration: none;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: -0.01em;
}
.site-logo img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}
.site-logo:hover { color: var(--safi-brand-mid); }
header nav { display: flex; gap: 28px; }
header nav a {
    color: var(--safi-text-dim);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    transition: color 0.15s;
}
header nav a:hover, header nav a.active { color: var(--safi-brand-mid); }
.header-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}
.theme-toggle,
.mobile-menu-toggle {
    background: none;
    border: none;
    color: var(--safi-text);
    cursor: pointer;
    padding: 4px;
    line-height: 0;
}
.theme-toggle { display: inline-flex; }
.mobile-menu-toggle { display: none; }
.theme-toggle .icon-moon,
.theme-toggle .icon-sun,
.theme-toggle .icon-auto { display: none; }
html[data-theme-mode="light"] .theme-toggle .icon-sun { display: block; }
html[data-theme-mode="dark"] .theme-toggle .icon-moon { display: block; }
html[data-theme-mode="auto"] .theme-toggle .icon-auto { display: block; }

/* Footer */
.site-footer {
    background: var(--safi-dark-bg);
    color: var(--safi-text-light);
    padding: 24px;
    margin-top: 60px;
    text-align: center;
    font-size: 0.85rem;
}
.footer-inner { max-width: 1100px; margin: 0 auto; }

/* Container */
.container {
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 24px;
}

/* WordPress preset spacing tokens used by the front-page template's inline
   styles; defined here so the template's var() references resolve. */
:root {
    --wp--preset--spacing--20: min(2.2rem, 5vw);
    --wp--preset--spacing--30: clamp(1.5rem, 5vw, 2rem);
    --wp--preset--spacing--40: clamp(1.8rem, 5vw, 3rem);
    --wp--preset--spacing--50: clamp(2.5rem, 8vw, 4rem);
    --wp--preset--spacing--60: clamp(3rem, 8vw, 4.5rem);
    /* The theme's ti- palette, resolved to SAFi's brand tokens. The DB stores
       blocks with has-ti-* classes; the static site defines them here. */
    --wp--preset--color--ti-bg: #FFFFFF;
    --wp--preset--color--ti-fg: #1C2230;
    --wp--preset--color--ti-accent: #16a34a;
    --wp--preset--color--ti-accent-secondary: #15803d;
    --wp--preset--color--ti-bg-inv: #161B26;
    --wp--preset--color--ti-bg-alt: #EFEAE0;
    --wp--preset--color--ti-fg-alt: #F8F6F1;
}

/* WordPress block palette classes (see token definitions above) */
.has-ti-bg-color { color: var(--wp--preset--color--ti-bg) !important; }
.has-ti-fg-color { color: var(--wp--preset--color--ti-fg) !important; }
.has-ti-accent-color { color: var(--wp--preset--color--ti-accent) !important; }
.has-ti-accent-secondary-color { color: var(--wp--preset--color--ti-accent-secondary) !important; }
.has-ti-bg-inv-color { color: var(--wp--preset--color--ti-bg-inv) !important; }
.has-ti-bg-alt-color { color: var(--wp--preset--color--ti-bg-alt) !important; }
.has-ti-fg-alt-color { color: var(--wp--preset--color--ti-fg-alt) !important; }
.has-ti-bg-background-color { background-color: var(--wp--preset--color--ti-bg) !important; }
.has-ti-fg-background-color { background-color: var(--wp--preset--color--ti-fg) !important; }
.has-ti-accent-background-color { background-color: var(--wp--preset--color--ti-accent) !important; }
.has-ti-accent-secondary-background-color { background-color: var(--wp--preset--color--ti-accent-secondary) !important; }
.has-ti-bg-inv-background-color { background-color: var(--wp--preset--color--ti-bg-inv) !important; }
.has-ti-bg-alt-background-color { background-color: var(--wp--preset--color--ti-bg-alt) !important; }
.has-ti-fg-alt-background-color { background-color: var(--wp--preset--color--ti-fg-alt) !important; }
.has-ti-fg-border-color { border-color: var(--wp--preset--color--ti-fg) !important; }
.has-ti-accent-border-color { border-color: var(--wp--preset--color--ti-accent) !important; }

/* Front page */
.front-page { overflow: hidden; }

/* Hero: the opening letter press band. Background is the SAFi brand green
   with a soft radial light; the white keyline gives the section edge. */
.front-page > .wp-block-group.has-background {
    position: relative;
    text-align: center;
    background-image:
        radial-gradient(1100px 520px at 50% -180px, rgba(255,255,255,0.28), transparent 62%),
        linear-gradient(180deg, #15803d 0%, #16a34a 100%);
    border-bottom: 4px solid rgba(248,246,241,0.35);
}
.front-page > .wp-block-group.has-background h1,
.front-page > .wp-block-group.has-background p,
.front-page > .wp-block-group.has-background a {
    color: var(--safi-text-light);
}
.front-page > .wp-block-group.has-background h1 {
    text-align: center;
    font-size: clamp(2.2rem, 6vw, 3.6rem);
    line-height: 1.08;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    letter-spacing: -0.015em;
    max-width: 860px;
    margin: 0 auto;
}
.front-page > .wp-block-group.has-background p {
    font-size: clamp(1.05rem, 2.2vw, 1.25rem);
    line-height: 1.6;
    color: rgba(248,246,241,0.82);
    max-width: 760px;
    margin: 1.1rem auto 0;
}
.front-page .wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    align-items: center;
}
.front-page .wp-block-button__link {
    display: inline-block;
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    padding: 15px 30px !important;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
    border: 2px solid var(--safi-brand);
    background: var(--safi-brand);
    color: #fff;
}
.front-page .wp-block-button__link:hover {
    background: var(--safi-brand-mid);
    border-color: var(--safi-brand-mid);
    color: #fff;
}
.front-page > .wp-block-group.has-background .wp-block-button__link {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--safi-brand-mid);
}
.front-page > .wp-block-group.has-background .wp-block-button__link:hover {
    background: var(--safi-text-light);
    border-color: var(--safi-text-light);
    color: var(--safi-brand-dark);
}
.front-page .wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent;
    border: 2px solid rgba(248,246,241,0.55);
    color: var(--safi-text-light);
}
.front-page .wp-block-button.is-style-outline .wp-block-button__link:hover {
    border-color: var(--safi-text-light);
    background: rgba(248,246,241,0.06);
}
.front-page > .wp-block-group.has-background .wp-block-button.is-style-outline .wp-block-button__link {
    /* White, identical to the primary hero button. !important on background
       beats the transparent background-color the markup carries inline, and
       on color beats the .has-ti-fg-color utility, which flips to near-white
       in dark mode and vanished on the white pill. */
    background: #ffffff !important;
    border-color: #ffffff;
    color: var(--safi-brand-mid) !important;
}
.front-page > .wp-block-group.has-background .wp-block-button.is-style-outline .wp-block-button__link:hover {
    background: var(--safi-text-light) !important;
    border-color: var(--safi-text-light);
    color: var(--safi-brand-dark) !important;
}

/* Body content below the hero */
.front-page main.wp-block-group {
    max-width: 840px;
    margin: 0 auto;
    padding: 0 24px;
}
.front-page main p {
    font-size: 1.05rem;
    line-height: 1.85;
    margin: 0 0 1.15rem;
    color: var(--safi-text);
}
.front-page main a:not(.wp-block-button__link) {
    color: var(--safi-brand-mid);
    text-decoration: none;
    border-bottom: 1px solid rgba(21,128,61,0.35);
    transition: border-color 0.15s, color 0.15s;
}
.front-page main a:not(.wp-block-button__link):hover {
    color: var(--safi-brand-dark);
    border-color: var(--safi-brand);
}
.front-page main h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: clamp(1.6rem, 3.4vw, 2rem);
    line-height: 1.2;
    color: var(--safi-text);
    margin: 3rem 0 1.1rem;
    padding-bottom: 0.55rem;
    border-bottom: 2px solid rgba(22,163,74,0.28);
}
.front-page main h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    color: var(--safi-text);
    margin: 2rem 0 0.75rem;
}
.front-page main ul {
    margin: 0 0 1.5rem;
    padding-left: 1.35rem;
    list-style: none;
}
.front-page main ul li {
    position: relative;
    padding-left: 1.1rem;
    margin-bottom: 0.55rem;
    line-height: 1.7;
    color: var(--safi-text);
}
.front-page main ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: var(--safi-brand);
}
/* Section separators are removed on the front page (owner request 2026-09-01).
   The hrs carried their own spacing, so sections get a top margin instead. */
.front-page hr.wp-block-separator {
    display: none;
}
.front-page main h2 {
    margin-top: 3rem;
}

@media (max-width: 640px) {
    .front-page > .wp-block-group.has-background h1 { font-size: 2rem; }
    .front-page .wp-block-button__link { width: 100%; text-align: center; }
    .front-page > .wp-block-group.has-background {
        padding-left: 20px;
        padding-right: 20px;
    }
    .front-page main.wp-block-group { padding: 0 20px; }
}

/* Article listing */
.articles-header {
    text-align: center;
    padding-top: 1.75rem;
    margin-bottom: 2.25rem;
}
.articles-title {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    letter-spacing: -0.015em;
    font-size: clamp(2rem, 4.5vw, 2.6rem);
    line-height: 1.15;
    margin: 0 0 0.75rem;
    color: var(--safi-text);
}
.page-subtitle {
    margin: 0 auto;
    max-width: 640px;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 500;
    font-size: clamp(1.05rem, 2.2vw, 1.3rem);
    line-height: 1.55;
    color: var(--safi-text-dim);
}
.page-subtitle .brand-accent { color: var(--safi-brand-mid); }
.page-subtitle::after {
    content: '';
    display: block;
    width: 56px;
    height: 3px;
    margin: 1.25rem auto 0;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--safi-brand), transparent);
}
/* Header search */
.site-search {
    position: relative;
}
.mobile-menu-search { display: none; }
.site-search input[type="search"] {
    width: 190px;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid rgba(128,128,128,0.4);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.8rem;
    line-height: 1.6;
    transition: border-color 0.15s;
}
.site-search input[type="search"]:focus {
    outline: 2px solid var(--safi-brand);
    outline-offset: 2px;
    border-color: var(--safi-brand);
}
.search-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 340px;
    max-height: 60vh;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--safi-border);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(28,34,48,0.14);
    padding: 6px;
    display: none;
    z-index: 300;
}
.search-dropdown.open { display: block; }
.search-result {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--safi-text);
}
.search-result:hover { background: rgba(22,163,74,0.08); }
.search-result-title { display: block; font-weight: 600; }
.search-result-meta {
    display: block;
    font-size: 0.72rem;
    color: var(--safi-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 2px;
}
.search-dropdown-empty {
    padding: 10px 12px;
    font-size: 0.85rem;
    color: var(--safi-text-muted);
}

/* Article rows */
.articles-list { margin-bottom: 2rem; }
.article-row {
    display: flex;
    gap: 1.25rem;
    align-items: stretch;
    padding: 1.4rem 0;
    border-bottom: 1px solid rgba(22,163,74,0.14);
}
.article-row-thumb {
    flex: 0 0 200px;
    max-width: 200px;
}
.article-row-thumb img {
    display: block;
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--safi-border);
}
.article-row-body { flex: 1 1 auto; min-width: 0; }
.article-row-meta {
    display: flex;
    gap: 0.45rem;
    margin: 0.55rem 0 0;
    color: var(--safi-text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-weight: 600;
}
.article-category { color: var(--safi-brand); }
.article-row-title {
    margin: 0 0 0.45rem;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 900;
    font-size: 1.4rem;
    line-height: 1.2;
    letter-spacing: -0.005em;
    overflow-wrap: break-word;
}
.article-row-title a {
    color: var(--safi-text);
    text-decoration: none;
}
.article-row-title a:hover {
    color: var(--safi-brand);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.article-row-excerpt {
    margin: 0;
    color: var(--safi-text-dim);
    font-size: 0.95rem;
    line-height: 1.55;
}

/* Post page */
.post-page {
    max-width: 740px;
    margin: 0 auto;
    padding: 40px 24px 0;
}
.post-header { margin-bottom: 2rem; }
.post-header h1 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 2.2rem;
    line-height: 1.2;
    margin-bottom: 0.75rem;
}
.post-meta {
    color: var(--safi-text-muted);
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.meta-sep { opacity: 0.5; }
.post-categories { color: var(--safi-brand); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.72rem; }
.post-author-link { color: var(--safi-text); font-weight: 600; text-decoration: none; }
.post-author-link:hover { color: var(--safi-brand-mid); text-decoration: underline; text-underline-offset: 2px; }
.post-content { line-height: 1.75; }
.post-content h2, .page-content h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 1.6rem;
    margin: 2rem 0 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(22,163,74,0.2);
}
.post-content h3, .page-content h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 1.25rem;
    margin: 1.5rem 0 0.5rem;
}
.post-content h4, .page-content h4 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    margin: 1.25rem 0 0.5rem;
}
.post-content p, .page-content p { margin-bottom: 1em; }
.post-content ul, .page-content ul,
.post-content ol, .page-content ol { margin-bottom: 1em; padding-left: 1.5em; }
.post-content li, .page-content li { margin-bottom: 0.3em; }
.post-content code, .page-content code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.86em;
    background: rgba(22,163,74,0.09);
    color: var(--safi-brand-dark);
    padding: 0.14em 0.42em;
    border-radius: 5px;
    border: 1px solid rgba(22,163,74,0.14);
    word-break: break-word;
}
.post-content pre, .page-content pre {
    background: var(--safi-dark-bg);
    color: var(--safi-text-light);
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.9rem;
    line-height: 1.65;
    padding: 1.1rem 1.25rem;
    margin: 1.5em 0;
    border-radius: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid rgba(22,163,74,0.28);
    border-left: 4px solid var(--safi-brand);
}
.post-content pre code, .page-content pre code {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font-size: inherit;
    border-radius: 0;
}
.post-content pre::-webkit-scrollbar,
.page-content pre::-webkit-scrollbar { height: 8px; }
.post-content pre::-webkit-scrollbar-thumb,
.page-content pre::-webkit-scrollbar-thumb { background: rgba(248,246,241,0.25); border-radius: 4px; }
.post-content blockquote, .page-content blockquote {
    border-left: 3px solid var(--safi-brand);
    padding-left: 1.25rem;
    margin: 1.5em 0;
    font-style: italic;
    color: var(--safi-text-dim);
}
.post-content blockquote p { margin-bottom: 0.5em; }
.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
    margin: 1.5em auto;
}
.post-content figure { margin: 1.5em 0; }
.post-content figcaption { text-align: center; font-size: 0.85rem; color: var(--safi-text-muted); margin-top: 0.5rem; }
.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: 0.92rem;
}
.post-content th, .post-content td {
    border: 1px solid var(--safi-border);
    padding: 10px 14px;
    text-align: left;
}
.post-content th { background: var(--safi-light-bg); font-weight: 600; }
.post-content hr {
    border: none;
    height: 3px;
    background: var(--safi-brand);
    margin: 3rem 0 1rem;
}
.post-content a { color: var(--safi-brand-mid); }
.post-content a:hover { text-decoration: underline; text-underline-offset: 3px; }
.post-content strong { font-weight: 600; color: var(--safi-text); }
.post-footer {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--safi-border);
}
.back-link {
    color: var(--safi-brand);
    text-decoration: none;
    font-weight: 600;
}
.back-link:hover { text-decoration: underline; }

/* Post footer card: share buttons and author bio. Recreates the WordPress
   post-footer block the static build replaced. Hairlines and soft fills are
   the text colour at low alpha so they follow the light/dark swap. */
/* Subscribe card: the MailerLite embed wrapped to match the post footer.
   The injected form brings its own styles; the card only frames it. */
.subscribe-card {
    margin: 40px 0 0;
    padding: 28px 24px 16px;
    border: 1px solid var(--safi-border);
    border-radius: 14px;
    text-align: center;
    background: #ffffff;
}
.subscribe-kicker {
    font-size: 0.78rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--safi-brand);
    font-weight: 600;
    margin: 0 0 8px;
}
.subscribe-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.5rem;
    line-height: 1.2;
    margin: 0 0 6px;
    color: var(--safi-text);
}
.subscribe-sub {
    font-size: 0.95rem;
    color: var(--safi-text-dim);
    margin: 0 0 14px;
}
.subscribe-card .ml-embedded {
    max-width: 420px;
    margin: 0 auto;
}
/* The injected form ships MailerLite's default look (gray box, Open Sans,
   black button, its own title copying ours). These overrides bend it to the
   site's design. MailerLite scopes its own rules to #mlb2-<builder id> with
   !important, so these carry the same id to win the cascade. If the form is
   ever recreated the id changes: submission, double opt-in and the success
   state keep working regardless, only the polish reverts. */
.subscribe-card #mlb2-45460881.ml-form-embedContainer .ml-form-embedWrapper {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}
.subscribe-card #mlb2-45460881.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent h4,
.subscribe-card #mlb2-45460881.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent p {
    /* The form's own title and subtitle duplicate the card's. The success
       message (ml-form-successBody) keeps its content. */
    display: none !important;
}
.subscribe-card #mlb2-45460881 h4,
.subscribe-card #mlb2-45460881 p,
.subscribe-card #mlb2-45460881 span,
.subscribe-card #mlb2-45460881 button,
.subscribe-card #mlb2-45460881 input {
    font-family: 'Inter', sans-serif !important;
}
.subscribe-card #mlb2-45460881.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input.form-control {
    border: 1.5px solid var(--safi-border) !important;
    border-radius: 8px !important;
    padding: 11px 14px !important;
    font-size: 0.98rem !important;
    color: var(--safi-text) !important;
    background: #ffffff !important;
    height: auto !important;
}
.subscribe-card #mlb2-45460881.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input.form-control:focus {
    border-color: var(--safi-brand) !important;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12) !important;
    outline: none !important;
}
.subscribe-card #mlb2-45460881.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button.primary {
    background: var(--safi-brand) !important;
    border: none !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 0.98rem !important;
    padding: 12px 20px !important;
    width: 100% !important;
    cursor: pointer;
}
.subscribe-card #mlb2-45460881.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button.primary:hover {
    background: var(--safi-brand-mid) !important;
}
.subscribe-card #mlb2-45460881.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent h4 {
    color: var(--safi-brand) !important;
    font-size: 1.15rem !important;
}
.subscribe-card #mlb2-45460881.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p {
    color: var(--safi-text-dim) !important;
    font-size: 0.95rem !important;
}
html[data-theme="dark"] .subscribe-card #mlb2-45460881.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input.form-control {
    background: #111111 !important;
    border-color: rgba(248, 246, 241, 0.18) !important;
    color: #f5f5f5 !important;
}
html[data-theme="dark"] .subscribe-card #mlb2-45460881.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p {
    color: #b9b9b9 !important;
}
html[data-theme="dark"] .subscribe-card {
    background: #1a1a1a;
    border-color: rgba(248, 246, 241, 0.12);
}
html[data-theme="dark"] .subscribe-title { color: #f5f5f5; }
html[data-theme="dark"] .subscribe-sub { color: #b9b9b9; }

.safi-pf {
    margin: 56px 0 0;
    padding-top: 32px;
    border-top: 1px solid var(--safi-border);
}
.safi-pf-h {
    font-size: 0.78rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    opacity: 0.6;
    margin: 0 0 14px;
    font-weight: 600;
}
.safi-pf-share-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0; }
.safi-pf-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    width: auto; min-width: 42px; height: 42px; padding: 0 12px;
    border: 1px solid var(--safi-border);
    border-radius: 999px;
    background: transparent;
    color: var(--safi-text);
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}
.safi-pf-btn:hover, .safi-pf-btn:focus-visible {
    border-color: var(--safi-brand);
    color: var(--safi-brand-mid);
    background: rgba(22,163,74,0.08);
}
.safi-pf-btn svg { width: 18px; height: 18px; fill: currentColor; display: block; }
.safi-pf-copied { font-size: 0.8rem; font-weight: 600; line-height: 1; }
.safi-pf-copied:empty { display: none; }

.safi-pf-author {
    margin-top: 36px;
    padding: 26px;
    border: 1px solid var(--safi-border);
    border-radius: 14px;
    background: #fbfaf6;
}
.safi-pf-author-head { display: flex; gap: 18px; align-items: flex-start; }
.safi-pf-avatar { border-radius: 50%; flex: 0 0 auto; width: 64px; height: 64px; }
.safi-pf-kicker {
    font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase;
    opacity: 0.55; margin: 0 0 2px; font-weight: 600;
}
.safi-pf-name { font-size: 1.12rem; font-weight: 700; margin: 0 0 6px; line-height: 1.2; }
.safi-pf-bio { margin: 0; font-size: 0.95rem; line-height: 1.55; opacity: 0.85; }
.safi-pf-socials { display: flex; flex-wrap: wrap; gap: 16px; margin: 12px 0 0; }
.safi-pf-socials a {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.85rem; font-weight: 600; text-decoration: none;
    color: inherit; opacity: 0.7;
    transition: opacity 0.15s, color 0.15s;
}
.safi-pf-socials a:hover, .safi-pf-socials a:focus-visible {
    opacity: 1; color: var(--safi-brand-mid);
}
.safi-pf-socials svg { width: 16px; height: 16px; fill: currentColor; display: block; }

.safi-pf-ctas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 22px;
}
.safi-pf-cta {
    display: block;
    padding: 14px 16px;
    border: 1px solid var(--safi-border);
    border-radius: 11px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, transform 0.15s;
}
.safi-pf-cta:hover, .safi-pf-cta:focus-visible {
    border-color: var(--safi-brand);
    transform: translateY(-1px);
}
.safi-pf-cta-label {
    display: block; font-weight: 650; font-size: 0.95rem; line-height: 1.3;
    color: var(--safi-brand-mid);
}
.safi-pf-cta-blurb {
    display: block; margin-top: 5px; font-size: 0.83rem; line-height: 1.45; opacity: 0.75;
}
@media (max-width: 781px) {
    .safi-pf-ctas { grid-template-columns: 1fr; }
    .safi-pf-author { padding: 20px; }
    .safi-pf-author-head { gap: 14px; }
    .safi-pf-avatar { width: 52px; height: 52px; }
}

/* Page content (for safi, license, get-involved).
   element also carries .container; this rule overrides its padding (same
   specificity, later), so horizontal padding must be included here. */
.page-content {
    padding: 48px 24px 40px;
    max-width: 840px;
    margin: 0 auto;
}
.page-content h1 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 700;
    font-size: clamp(2rem, 4.5vw, 2.6rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 2.5rem 0 1rem;
}
.page-content h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: clamp(1.55rem, 3vw, 1.85rem);
    line-height: 1.2;
    margin: 2.6rem 0 0.9rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid rgba(22,163,74,0.2);
}
.page-content h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 1.3rem;
    line-height: 1.3;
    margin: 2rem 0 0.75rem;
}
.page-content h4 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 1.1rem;
    margin: 1.5rem 0 0.6rem;
}
.page-content p { margin-bottom: 1.1em; }
.page-content ul, .page-content ol { margin-bottom: 1.1em; padding-left: 1.5em; }
.page-content li { margin-bottom: 0.35em; line-height: 1.7; }
.page-content blockquote {
    border-left: 3px solid var(--safi-brand);
    padding-left: 1.25rem;
    margin: 1.5em 0;
    font-style: italic;
    color: var(--safi-text-dim);
}
.page-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: 0.92rem;
}
.page-content th, .page-content td {
    border: 1px solid var(--safi-border);
    padding: 10px 14px;
    text-align: left;
}
.page-content th { background: var(--safi-light-bg); font-weight: 600; }
.page-content hr {
    border: none;
    height: 3px;
    background: var(--safi-brand);
    margin: 3rem 0 1rem;
}
.page-content img { max-width: 100%; height: auto; border-radius: 8px; }
.page-content a { color: var(--safi-brand-mid); }
.page-content a:hover { text-decoration: underline; text-underline-offset: 3px; }
.page-content strong { font-weight: 600; }
.page-content iframe { max-width: 100%; border: none; border-radius: 8px; }

/* Contact form on the get-involved page. Replaces the dead Forminator
   shortcode with a FormSubmit form styled to the theme. */
.contact-form {
    margin: 2rem 0 1rem;
    padding: 1.75rem 1.5rem;
    background: #fbfaf6;
    border: 1px solid var(--safi-border);
    border-left: 3px solid var(--safi-brand);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.contact-form-title {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 1.35rem;
    margin: 0;
}
.contact-form-intro {
    margin: 0 0 0.25rem;
    color: var(--safi-text-dim);
    font-size: 0.95rem;
    line-height: 1.55;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
    font-family: inherit;
    font-size: 0.95rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--safi-border);
    border-radius: 8px;
    background: #fff;
    color: var(--safi-text);
    width: 100%;
}
.contact-form input:focus,
.contact-form textarea:focus {
    outline: 2px solid var(--safi-brand);
    outline-offset: 1px;
    border-color: var(--safi-brand);
}
.contact-form textarea { min-height: 130px; resize: vertical; }
.contact-form-submit {
    align-self: flex-start;
    padding: 0.7rem 1.4rem;
    border: none;
    border-radius: 8px;
    background: var(--safi-brand);
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color 0.15s;
}
.contact-form-submit:hover { background: var(--safi-brand-mid); }

/* Link cards: the "Read the guide / Run the demo" blocks on the
   get-involved page, upgraded from bare paragraphs in the converter. */
.page-link-card {
    background: #ffffff;
    border: 1px solid var(--safi-border);
    border-left: 3px solid var(--safi-brand);
    border-radius: 10px;
    padding: 14px 18px;
    margin: 14px 0;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.page-link-card:hover {
    border-left-color: var(--safi-brand-mid);
    border-color: rgba(22,163,74,0.35);
    box-shadow: 0 2px 10px rgba(28,34,48,0.06);
}
.page-link-card-title {
    display: inline-block;
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--safi-brand-mid);
    text-decoration: none;
    margin-bottom: 2px;
}
.page-link-card-title:hover { text-decoration: underline; }
.page-link-card-desc {
    margin: 0;
    color: var(--safi-text-dim);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Full-width banner band from the block content (wp-block-cover). The safi
   page opens with one: a headline, description, buttons and a demo image.
   No background, so the page canvas shows through. */
.page-content .wp-block-cover {
    margin: 0 -24px;
    padding: 48px clamp(20px, 6vw, 64px) 24px;
}
/* The demo gif sits inside the banner; at full 960px width it pushed the
   first section far down the page. Cap it and drop the figure's default
   2.5rem vertical margins so the banner stays compact. */
.page-content .wp-block-cover figure.wp-block-image {
    margin: 20px auto 0;
    max-width: 720px;
}
.page-content .wp-block-cover figure.wp-block-image img {
    width: 100%;
    height: auto;
}
.page-content .wp-block-cover .wp-block-cover__background { display: none; }
.page-content .wp-block-cover h3 {
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    line-height: 1.18;
    letter-spacing: -0.012em;
    max-width: 720px;
    margin: 0 0 1rem;
}
.page-content .wp-block-cover p {
    font-size: 1.08rem;
    line-height: 1.7;
    color: var(--safi-text-dim);
    max-width: 680px;
}
.page-content .wp-block-cover .wp-block-button {
    display: inline-block;
    margin: 0.5rem 0.75rem 0.5rem 0;
}
.page-content .wp-block-cover .wp-block-buttons {
    text-align: center;
}
.page-content .wp-block-button__link {
    display: inline-block;
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1;
    padding: 13px 26px !important;
    border-radius: 8px;
    text-decoration: none;
    border: 2px solid transparent;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.page-content .wp-block-button.is-style-fill .wp-block-button__link {
    background: var(--safi-brand);
    color: #fff;
}
.page-content .wp-block-button.is-style-fill .wp-block-button__link:hover {
    background: var(--safi-brand-mid);
}
.page-content .wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent;
    border-color: var(--safi-brand);
    color: var(--safi-brand-mid);
}
.page-content .wp-block-button.is-style-outline .wp-block-button__link:hover {
    background: rgba(22,163,74,0.08);
}
.page-content figure.wp-block-image {
    margin: 2.5rem 0;
    text-align: center;
}
.page-content figure.wp-block-image img {
    border: 1px solid var(--safi-border);
    box-shadow: 0 1px 4px rgba(28,34,48,0.06);
}

/* Dark mode. The html[data-theme] attribute is set by the inline script in
   the page head: a saved choice wins, otherwise it follows the OS setting.
   The theme toggle button in the header flips it and stores the choice. */
html[data-theme="dark"] {
    color-scheme: dark;
}
html[data-theme="dark"] body { background: #0a0a0a; color: #e5e5e5; }
html[data-theme="dark"] .site-header { background: #111111; border-bottom-color: #2a2a2a; }
html[data-theme="dark"] .site-logo,
html[data-theme="dark"] header nav a,
html[data-theme="dark"] header nav.open a {
    color: #f5f5f5;
}
html[data-theme="dark"] .mobile-menu-toggle { color: #f5f5f5; }
html[data-theme="dark"] .theme-toggle { color: #f5f5f5; }
html[data-theme="dark"] .article-row-title a { color: #f5f5f5; }
html[data-theme="dark"] .article-row-excerpt { color: #a3a3a3; }
html[data-theme="dark"] .articles-title,
html[data-theme="dark"] .page-subtitle { color: #c9c9c9; }
html[data-theme="dark"] .page-subtitle .brand-accent { color: #4ade80; }
html[data-theme="dark"] .post-author-link { color: #f5f5f5; }
html[data-theme="dark"] .post-author-link:hover { color: #4ade80; }
html[data-theme="dark"] .safi-pf-btn,
html[data-theme="dark"] .safi-pf-cta,
html[data-theme="dark"] .safi-pf-socials a { color: #e5e5e5; }
html[data-theme="dark"] .safi-pf-btn:hover,
html[data-theme="dark"] .safi-pf-btn:focus-visible,
html[data-theme="dark"] .safi-pf-socials a:hover,
html[data-theme="dark"] .safi-pf-socials a:focus-visible { color: #4ade80; }
html[data-theme="dark"] .safi-pf-cta-label { color: #4ade80; }
html[data-theme="dark"] .safi-pf-cta:hover,
html[data-theme="dark"] .safi-pf-cta:focus-visible { border-color: #4ade80; }
html[data-theme="dark"] .safi-pf-author { background: #161b26; }
html[data-theme="dark"] .safi-pf-cta { background: #1a1a1a; }
html[data-theme="dark"] .post-content,
html[data-theme="dark"] .page-content { color: #e5e5e5; }
html[data-theme="dark"] .front-page main p,
html[data-theme="dark"] .front-page main h2,
html[data-theme="dark"] .front-page main h3,
html[data-theme="dark"] .front-page main ul li { color: #e5e5e5; }
html[data-theme="dark"] .post-content th,
html[data-theme="dark"] .page-content th { background: #1f1f1f; }
html[data-theme="dark"] .post-content th,
html[data-theme="dark"] .post-content td,
html[data-theme="dark"] .page-content th,
html[data-theme="dark"] .page-content td { border-color: #333; }
html[data-theme="dark"] .post-content code,
html[data-theme="dark"] .page-content code {
    background: rgba(22,163,74,0.16);
    color: #6ee7a0;
}
html[data-theme="dark"] .site-search input[type="search"] {
    color: #f5f5f5;
    border-color: rgba(248,246,241,0.35);
}
html[data-theme="dark"] .search-dropdown { background: #1a1a1a; border-color: #333; }
html[data-theme="dark"] .search-result { color: #f5f5f5; }
html[data-theme="dark"] .search-result:hover { background: rgba(22,163,74,0.15); }
html[data-theme="dark"] .search-result-meta,
html[data-theme="dark"] .search-dropdown-empty { color: #a3a3a3; }

/* Page banner (the safi cover) and its links recolor for dark */
html[data-theme="dark"] .page-content .wp-block-cover h3 { color: #f5f5f5; }
html[data-theme="dark"] .page-content .wp-block-cover p { color: #b9b9b9; }

/* Link cards get a dark surface instead of white */
html[data-theme="dark"] .page-link-card {
    background: #1a1a1a;
    border-color: #333;
    border-left-color: var(--safi-brand);
}
html[data-theme="dark"] .page-link-card:hover {
    background: #202020;
    border-color: rgba(22,163,74,0.45);
}
html[data-theme="dark"] .page-link-card-desc { color: #b9b9b9; }
html[data-theme="dark"] .contact-form { background: #161b26; border-color: #333; }
html[data-theme="dark"] .contact-form-intro { color: #b9b9b9; }
html[data-theme="dark"] .contact-form input[type="text"],
html[data-theme="dark"] .contact-form input[type="email"],
html[data-theme="dark"] .contact-form input[type="tel"],
html[data-theme="dark"] .contact-form textarea {
    background: #1a1a1a;
    border-color: #333;
    color: #e5e5e5;
}

/* Remap the theme tokens so any block that used a light palette value
   (white background, light alternate surface) flips to a dark surface.
   Defined on html so the descendant palette classes pick them up. */
html[data-theme="dark"] {
    --wp--preset--color--ti-bg: #161B26;
    --wp--preset--color--ti-fg: #F8F6F1;
    --wp--preset--color--ti-bg-alt: #1f2733;
    --wp--preset--color--ti-fg-alt: #0a0a0a;
    --wp--preset--color--ti-bg-inv: #232B38;
}

/* Mobile */
@media (max-width: 768px) {
    header nav { display: none; }
    .mobile-menu-toggle { display: block; }
    header nav.open {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        background: #ffffff;
        padding: 16px 24px;
        gap: 16px;
        border-bottom: 1px solid var(--safi-border);
        box-shadow: 0 8px 16px rgba(28,34,48,0.08);
    }
    header nav.open a { color: var(--safi-text); }
    .header-controls { gap: 6px; }
    .header-controls .site-search { display: none; }
    .mobile-menu-search { display: block; width: 100%; }
    .mobile-menu-search input[type="search"] { width: 100%; }
    .mobile-menu-search .search-dropdown { width: 100%; right: auto; left: 0; }
    .article-row { flex-direction: column; gap: 0.75rem; }
    .article-row-thumb,
    .article-row-thumb img { flex: none; width: 100%; max-width: none; }
    .article-row-thumb img { height: 180px; }
    .article-row-title { font-size: 1.18rem; }
    .post-header h1 { font-size: 1.6rem; }
    .post-page { padding-top: 24px; }
    .page-content { padding-top: 32px; }
    .header-inner { padding: 0 16px; }
    .site-logo { gap: 7px; font-size: 0.98rem; }
    .site-logo img { width: 26px; height: 26px; }
    .theme-toggle, .mobile-menu-toggle { margin-left: 2px; }

    /* Page banner and its buttons on phones */
    .page-content .wp-block-cover {
        margin: 0 -24px;
        padding: 36px 22px 20px;
    }
    .page-content .wp-block-cover .wp-block-buttons {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .page-content .wp-block-cover .wp-block-button { margin: 0; }
    .page-content .wp-block-button__link {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }
}

/* Mobile + dark: the dropdown menu must not stay white in dark mode. */
@media (max-width: 768px) {
    html[data-theme="dark"] header nav.open { background: #1a1a1a; border-bottom-color: #333; }
    html[data-theme="dark"] header nav.open a { color: #f5f5f5; }
}