/* ===========================================================================
 * Safe from Harm (SfH) theme — documentation site for Cercetașii României.
 *
 * A docs site, not a marketing site: page-tree sidebar TOC, in-page search,
 * comfortable reading measure, and purpose-built components for the SfH
 * procedure material (Micro/Mediu/Macro tables, org charts, response flows).
 *
 * Brand palette (SfH Romania brand guidelines):
 *   green  #12b24b  (SAFE)    blue   #20a0db  (FROM)
 *   red    #d2242a  (HARM)    purple #633092  (ROMANIA)
 * Plus neutrals: dark #2e2f3b text, cream #f8f6f1 page background.
 *
 * The four brand colours and the primary/secondary/accent/danger roles come
 * per-site from theme_config as CSS custom properties (--sfh-primary etc.,
 * injected in base_site.html). Everything below keys off those tokens so one
 * Site config change re-skins the whole site. Hard-coded brand hexes below
 * are the fallbacks the guidelines mandate.
 *
 * Fonts: Montserrat (headings, 500/600/700), Roboto (body) — loaded from
 * Google Fonts in base_site.html.
 * ========================================================================= */

:root {
    /* Fixed brand palette (the guidelines' exact hexes) */
    --sfh-green: #12b24b;
    --sfh-blue: #20a0db;
    --sfh-red: #d2242a;
    --sfh-purple: #633092;
    --sfh-dark: #2e2f3b;
    --sfh-cream: #f8f6f1;

    /* Configurable roles (overridden by base_site.html from theme_config) */
    --sfh-primary: var(--sfh-purple);
    --sfh-secondary: var(--sfh-blue);
    --sfh-accent: var(--sfh-green);
    --sfh-danger: var(--sfh-red);

    /* Derived neutrals */
    --sfh-paper: #ffffff;
    --sfh-line: #e6e1da;
    --sfh-muted: #6b6b75;
    --sfh-primary-dark: color-mix(in srgb, var(--sfh-primary) 80%, black);
    --sfh-primary-soft: color-mix(in srgb, var(--sfh-primary) 7%, white);
}

/* --- Base typography ----------------------------------------------------- */
body.sfh {
    font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--sfh-dark);
    background: var(--sfh-cream);
    line-height: 1.65;
}

body.sfh h1,
body.sfh h2,
body.sfh h3,
body.sfh h4,
body.sfh h5,
body.sfh h6,
body.sfh .sfh-brand-text {
    font-family: "Montserrat", system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--sfh-dark);
}

body.sfh a {
    color: var(--sfh-primary);
    text-decoration: none;
}

/* Without an underline, a link in running text is told apart by weight as well as colour. */
body.sfh .sfh-prose p a,
body.sfh .sfh-prose li a {
    font-weight: 600;
}

body.sfh a:hover {
    color: var(--sfh-accent);
}

/* Anchor-buttons: restore Bootstrap's button text vars (see nocrich note) */
body.sfh a.btn { color: var(--bs-btn-color); }
body.sfh a.btn:hover,
body.sfh a.btn:focus { color: var(--bs-btn-hover-color); }

body.sfh .btn-primary {
    --bs-btn-bg: var(--sfh-primary);
    --bs-btn-border-color: var(--sfh-primary);
    --bs-btn-hover-bg: var(--sfh-primary-dark);
    --bs-btn-hover-border-color: var(--sfh-primary-dark);
    --bs-btn-active-bg: var(--sfh-primary-dark);
    --bs-btn-disabled-bg: var(--sfh-primary);
    --bs-btn-disabled-border-color: var(--sfh-primary);
    font-weight: 600;
}

/* Secondary buttons in the SfH blue, not Bootstrap's. The text and the filled states use
   a darker shade of it: the brand blue itself is under 3:1 against white. */
body.sfh {
    --sfh-secondary-ink: color-mix(in srgb, var(--sfh-secondary) 68%, black);
}

body.sfh .btn-outline-primary {
    --bs-btn-color: var(--sfh-secondary-ink);
    --bs-btn-border-color: var(--sfh-secondary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--sfh-secondary-ink);
    --bs-btn-hover-border-color: var(--sfh-secondary-ink);
    --bs-btn-focus-shadow-rgb: 32, 160, 219;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--sfh-secondary-ink);
    --bs-btn-active-border-color: var(--sfh-secondary-ink);
    --bs-btn-disabled-color: var(--sfh-secondary-ink);
    --bs-btn-disabled-border-color: var(--sfh-secondary);
    font-weight: 600;
}

/* --- Brand stripe (4-colour bar) ----------------------------------------- *
 * A thin 4-segment bar (green / blue / red / purple). Used at the very top
 * of the page and above the footer. Markup: a .sfh-brandbar with four empty
 * <span> children, each given its colour inline. */
.sfh-brandbar {
    display: flex;
    height: 5px;
    width: 100%;
}

.sfh-brandbar > span {
    flex: 1 1 0;
}

.sfh-brandbar--footer {
    height: 4px;
}

/* --- Header / navbar ----------------------------------------------------- */
.sfh-header {
    background: var(--sfh-paper);
    border-bottom: 1px solid var(--sfh-line);
    box-shadow: 0 1px 3px rgba(46, 47, 59, 0.05);
    position: sticky;
    top: 0;
    z-index: 1020;
}

.sfh-header .navbar { padding-block: 0.55rem; }

.sfh-header .navbar-brand { color: var(--sfh-primary); }

.sfh-logo {
    height: 48px;
    width: auto;
    display: block;
}

.sfh-brand-text {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--sfh-primary);
    line-height: 1.05;
}

.sfh-header .navbar-nav .nav-link {
    color: var(--sfh-dark);
    font-weight: 500;
    font-size: 0.95rem;
}

.sfh-header .navbar-nav .nav-link:hover,
.sfh-header .navbar-nav .nav-link:focus,
.sfh-header .navbar-nav .nav-link.active {
    color: var(--sfh-primary);
}

.sfh-dropdown {
    --bs-dropdown-link-active-bg: var(--sfh-primary);
    --bs-dropdown-link-hover-bg: var(--sfh-primary-soft);
    --bs-dropdown-link-hover-color: var(--sfh-primary-dark);
    border: 1px solid var(--sfh-line);
    border-radius: 0.6rem;
    box-shadow: 0 8px 24px rgba(46, 47, 59, 0.12);
}

/* „Cuprins": a labelled button, so it is never mistaken for the menu's hamburger beside it. */
.sfh-toc-toggler {
    margin-left: auto;
    margin-right: 0.5rem;
    padding: 0.25rem 0.75rem;
}

/* Language switcher — uppercase pills */
.sfh-lang-switch {
    flex-direction: row;
    gap: 0.1rem;
    align-items: center;
}

.sfh-lang-switch .nav-link {
    padding: 0.2rem 0.45rem;
    text-transform: uppercase;
    font-size: 0.78rem;
    opacity: 0.7;
}

.sfh-lang-switch .nav-link.active { opacity: 1; color: var(--sfh-primary); }

/* --- Header search ------------------------------------------------------- */
.sfh-search {
    position: relative;
    max-width: 280px;
    width: 100%;
}

.sfh-search__icon {
    position: absolute;
    left: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--sfh-muted);
    pointer-events: none;
    font-size: 0.85rem;
}

.sfh-search .form-control {
    padding-left: 1.9rem;
    border-radius: 999px;
    border-color: var(--sfh-line);
}

.sfh-search .form-control:focus {
    border-color: var(--sfh-secondary);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--sfh-secondary) 25%, transparent);
}

.sfh-search__results {
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0.3rem;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    background: var(--sfh-paper);
    border: 1px solid var(--sfh-line);
    border-radius: 0.6rem;
    box-shadow: 0 10px 28px rgba(46, 47, 59, 0.18);
    max-height: 60vh;
    overflow-y: auto;
}

.sfh-search__results li { margin: 0; }

.sfh-search__results a {
    display: block;
    padding: 0.45rem 0.65rem;
    border-radius: 0.4rem;
    color: var(--sfh-dark);
    text-decoration: none;
    font-size: 0.92rem;
}

.sfh-search__results a:hover,
.sfh-search__results a:focus {
    background: var(--sfh-primary-soft);
    color: var(--sfh-primary-dark);
}

/* --- Docs layout --------------------------------------------------------- *
 * Single column by default (full-width content). The two-column grid with
 * the page-tree sidebar only kicks in when a section TOC applies (Policy,
 * Procedures, and other sections with sub-pages) — i.e. .sfh-layout--with-toc. */
.sfh-layout {
    display: block;
}

@media (min-width: 992px) {
    .sfh-layout--with-toc {
        display: grid;
        grid-template-columns: 260px minmax(0, 1fr);
        gap: 2.5rem;
        align-items: start;
    }
}

.sfh-sidebar {
    position: sticky;
    top: 5rem; /* clears the sticky header */
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    padding-right: 0.5rem;

    /* Slim, on-brand scrollbar that only asserts itself on hover. */
    scrollbar-width: thin;
    scrollbar-color: var(--sfh-line) transparent;
    scrollbar-gutter: stable;
}

.sfh-sidebar::-webkit-scrollbar {
    width: 6px;
}

.sfh-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.sfh-sidebar::-webkit-scrollbar-thumb {
    background-color: var(--sfh-line);
    border-radius: 99px;
}

.sfh-sidebar:hover {
    scrollbar-color: var(--sfh-primary-soft) transparent;
}

.sfh-sidebar:hover::-webkit-scrollbar-thumb {
    background-color: var(--sfh-primary-soft);
}

.sfh-sidebar::-webkit-scrollbar-thumb:hover {
    background-color: var(--sfh-primary);
}

.sfh-content {
    min-width: 0; /* allow the content column to shrink (tables/code) */
}

/* --- Sidebar TOC --------------------------------------------------------- */
.sfh-toc__list,
.sfh-toc__sublist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sfh-toc__sublist {
    margin-left: 0.85rem;
    border-left: 2px solid var(--sfh-line);
    padding-left: 0.6rem;
    margin-top: 0.15rem;
}

.sfh-toc__item { margin: 0.1rem 0; }

.sfh-toc__link {
    display: block;
    padding: 0.3rem 0.5rem;
    border-radius: 0.4rem;
    color: var(--sfh-dark);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    line-height: 1.35;
}

.sfh-toc__link--child {
    font-weight: 400;
    font-size: 0.9rem;
    color: var(--sfh-muted);
}

.sfh-toc__link:hover,
.sfh-toc__link:focus {
    background: var(--sfh-primary-soft);
    color: var(--sfh-primary-dark);
}

.sfh-toc__item.active > .sfh-toc__link {
    background: var(--sfh-primary-soft);
    color: var(--sfh-primary-dark);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--sfh-primary);
}

.sfh-section-list .sfh-toc__link {
    font-size: 1.05rem;
    padding: 0.55rem 0.75rem;
}

/* --- Breadcrumb ---------------------------------------------------------- */
.sfh-breadcrumb .breadcrumb {
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

.sfh-breadcrumb .breadcrumb-item a {
    color: var(--sfh-muted);
    text-decoration: none;
}

.sfh-breadcrumb .breadcrumb-item a:hover { color: var(--sfh-primary); }
.sfh-breadcrumb .breadcrumb-item.active { color: var(--sfh-dark); }

/* --- Page title ---------------------------------------------------------- */
.sfh-page-title {
    font-size: clamp(1.7rem, 3.2vw, 2.3rem);
    margin-bottom: 1.1rem;
}

.sfh-page-title::after {
    content: "";
    display: block;
    width: 3rem;
    height: 4px;
    margin-top: 0.6rem;
    border-radius: 2px;
    background: var(--sfh-accent);
}

/* --- Prose (reading column) ---------------------------------------------- */
.sfh-prose {
    /* No cap of its own: the content area is the container minus the sidebar when there
       is one, so a page with a table of contents and one without share one total width. */
    max-width: none;
    font-size: 1.05rem;
    line-height: 1.75;
}

.sfh-prose h2 {
    font-size: 1.55rem;
    margin-top: 2.25rem;
    margin-bottom: 0.6rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--sfh-line);
}

.sfh-prose h3 {
    font-size: 1.25rem;
    margin-top: 1.75rem;
    margin-bottom: 0.5rem;
    color: var(--sfh-primary);
}

.sfh-prose h4 {
    font-size: 1.08rem;
    margin-top: 1.4rem;
    margin-bottom: 0.4rem;
}

.sfh-prose p { margin-bottom: 1rem; }

.sfh-prose ul,
.sfh-prose ol {
    margin-bottom: 1rem;
    padding-left: 1.4rem;
}

.sfh-prose li { margin-bottom: 0.3rem; }

.sfh-prose img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 0.6rem;
    margin: 1.25rem 0;
}

.sfh-prose blockquote {
    border-left: 4px solid var(--sfh-secondary);
    background: color-mix(in srgb, var(--sfh-secondary) 7%, white);
    margin: 1.25rem 0;
    padding: 0.75rem 1.1rem;
    border-radius: 0 0.5rem 0.5rem 0;
    color: var(--sfh-dark);
}

.sfh-prose blockquote > :last-child { margin-bottom: 0; }

.sfh-prose code {
    background: color-mix(in srgb, var(--sfh-dark) 7%, white);
    padding: 0.12em 0.4em;
    border-radius: 0.3rem;
    font-size: 0.9em;
    color: var(--sfh-primary-dark);
}

.sfh-prose pre {
    background: var(--sfh-dark);
    color: #f3f3f5;
    padding: 1rem 1.1rem;
    border-radius: 0.6rem;
    overflow-x: auto;
}

.sfh-prose pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

/* StreamField body spacing (bare blocks, no wrappers) */
.static-body > * + * { margin-top: 1.25rem; }

/* ===========================================================================
 * .sfh-table — clean, full-width documentation table.
 *
 * Markup contract:
 *   <div class="sfh-table-wrap">      (optional; CSS also makes the table itself
 *     <table class="sfh-table">        scroll, so the wrapper is belt-and-braces)
 *       <caption>…</caption>           (optional, small caption above the table)
 *       <thead><tr><th>…</th>…</tr></thead>
 *       <tbody><tr><td>…</td>…</tr>…</tbody>
 *     </table>
 *   </div>
 *
 * Header row uses --sfh-primary with white text; body rows zebra-striped.
 * The table scrolls horizontally on narrow screens.
 * ========================================================================= */
.sfh-table-wrap {
    overflow-x: auto;
    margin: 1.5rem 0;
    -webkit-overflow-scrolling: touch;
}

.sfh-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--sfh-paper);
    border: 1px solid var(--sfh-line);
    border-radius: 0.5rem;
    overflow: hidden;
    font-size: 0.96rem;
    /* allow the table itself to scroll even without the wrapper */
    display: table;
}

.sfh-table caption {
    caption-side: top;
    font-size: 0.85rem;
    color: var(--sfh-muted);
    padding-bottom: 0.4rem;
    text-align: left;
}

.sfh-table thead th {
    background: var(--sfh-primary);
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    text-align: left;
    padding: 0.7rem 0.85rem;
    vertical-align: bottom;
}

.sfh-table tbody td,
.sfh-table tbody th {
    padding: 0.65rem 0.85rem;
    border-top: 1px solid var(--sfh-line);
    vertical-align: top;
}

.sfh-table tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--sfh-primary) 4%, white);
}

/* A leading row-header column (scope="row") reads as a label */
.sfh-table tbody th[scope="row"] {
    font-weight: 600;
    background: color-mix(in srgb, var(--sfh-primary) 8%, white);
}

/* ===========================================================================
 * .sfh-matrix — Micro / Mediu / Macro procedure matrix.
 *
 * A variant of .sfh-table for the three-severity procedure tables. The three
 * severity columns are colour-accented at the top: Micro = green, Mediu =
 * blue, Macro = red. The first column (the row label) stays neutral.
 *
 * Markup contract — a <thead> whose row is: [label] | Micro | Mediu | Macro
 * (4 cells; the first is the corner/label cell), and <tbody> rows of the
 * same shape:
 *
 *   <table class="sfh-table sfh-matrix">
 *     <thead>
 *       <tr>
 *         <th scope="col">Aspect</th>
 *         <th scope="col">Micro</th>
 *         <th scope="col">Mediu</th>
 *         <th scope="col">Macro</th>
 *       </tr>
 *     </thead>
 *     <tbody>
 *       <tr><th scope="row">Cine decide</th><td>…</td><td>…</td><td>…</td></tr>
 *       …
 *     </tbody>
 *   </table>
 *
 * The 2nd/3rd/4th columns are coloured via nth-child, so keep exactly that
 * column order (label, Micro, Mediu, Macro).
 * ========================================================================= */
.sfh-matrix thead th { background: var(--sfh-dark); }

/* Severity column header accents — top border + tinted header cell */
.sfh-matrix thead th:nth-child(2) {
    border-top: 4px solid var(--sfh-green);
    background: color-mix(in srgb, var(--sfh-green) 80%, black);
}

.sfh-matrix thead th:nth-child(3) {
    border-top: 4px solid var(--sfh-blue);
    background: color-mix(in srgb, var(--sfh-blue) 80%, black);
}

.sfh-matrix thead th:nth-child(4) {
    border-top: 4px solid var(--sfh-red);
    background: color-mix(in srgb, var(--sfh-red) 80%, black);
}

/* Subtle column tints in the body to keep the severities visually grouped */
.sfh-matrix tbody td:nth-child(2) { background: color-mix(in srgb, var(--sfh-green) 7%, white); }
.sfh-matrix tbody td:nth-child(3) { background: color-mix(in srgb, var(--sfh-blue) 7%, white); }
.sfh-matrix tbody td:nth-child(4) { background: color-mix(in srgb, var(--sfh-red) 7%, white); }

.sfh-matrix tbody th[scope="row"] {
    background: var(--sfh-cream);
    color: var(--sfh-dark);
}

/* ===========================================================================
 * .sfh-orgchart — vertical/branching organisation chart, CSS-only.
 *
 * Markup contract (nested <div>s):
 *
 *   <div class="sfh-orgchart">
 *     <div class="sfh-orgchart__node">
 *       <div class="sfh-orgchart__box">Rol rădăcină</div>
 *       <div class="sfh-orgchart__children">
 *         <div class="sfh-orgchart__node">
 *           <div class="sfh-orgchart__box">Copil 1</div>
 *         </div>
 *         <div class="sfh-orgchart__node">
 *           <div class="sfh-orgchart__box">Copil 2</div>
 *           <div class="sfh-orgchart__children">
 *             <div class="sfh-orgchart__node">
 *               <div class="sfh-orgchart__box">Nepot</div>
 *             </div>
 *           </div>
 *         </div>
 *       </div>
 *     </div>
 *   </div>
 *
 * Boxes can carry a brand modifier: --safe / --from / --harm / --romania to
 * colour their top border. Connectors are drawn with ::before/::after lines.
 * On mobile the rows stack vertically (connectors become a simple left rail).
 * ========================================================================= */
.sfh-orgchart {
    margin: 1.75rem 0;
    text-align: center;
    overflow-x: auto;
}

/* A horizontal row of one or more boxes sharing the same hierarchy level. */
.sfh-orgchart-level {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
}

/* A role / unit box. Brand-coloured top border keyed by the level modifier. */
.sfh-orgbox {
    background: var(--sfh-paper);
    border: 1px solid var(--sfh-line);
    border-top: 4px solid var(--sfh-primary);
    border-radius: 0.5rem;
    padding: 0.55rem 0.9rem;
    font-weight: 600;
    font-size: 0.95rem;
    box-shadow: 0 1px 3px rgba(46, 47, 59, 0.08);
}

.sfh-orgbox--national { border-top-color: var(--sfh-purple); }
.sfh-orgbox--team     { border-top-color: var(--sfh-blue); }
.sfh-orgbox--regional { border-top-color: var(--sfh-green); }
.sfh-orgbox--local    { border-top-color: var(--sfh-green); }
.sfh-orgbox--leaf {
    border-top-color: var(--sfh-line);
    background: color-mix(in srgb, var(--sfh-line) 28%, white);
}

/* Vertical connector drawn between two consecutive levels. */
.sfh-orgchart-connector {
    width: 2px;
    height: 1.4rem;
    background: var(--sfh-line);
    margin: 0.35rem auto;
}

@media (max-width: 575.98px) {
    /* Stack the boxes within a level on narrow screens. */
    .sfh-orgchart-level { flex-direction: column; align-items: stretch; }
}

/* Caption beneath a diagram or table — small, muted, centred. */
.sfh-caption {
    margin: 0.5rem auto 1.5rem;
    max-width: 60ch;
    font-size: 0.85rem;
    font-style: italic;
    color: var(--sfh-muted, #6b6c78);
    text-align: center;
}

/* ===========================================================================
 * .sfh-flow — horizontal stepped flow with chevron connectors.
 *
 * Markup contract:
 *
 *   <div class="sfh-flow">
 *     <div class="sfh-flow-step">Sesizare</div>
 *     <div class="sfh-flow-step">Evaluare</div>
 *     <div class="sfh-flow-step">Decizie</div>
 *     <div class="sfh-flow-step">Acțiune</div>
 *   </div>
 *
 * Lanes (colour-coded Micro/Mediu/Macro response paths):
 *
 *   <div class="sfh-flow-lane sfh-flow-lane--micro">  (--micro / --mediu / --macro)
 *     <span class="sfh-flow-lane__label">Micro</span>
 *     <div class="sfh-flow">
 *       <div class="sfh-flow-step">…</div> …
 *     </div>
 *   </div>
 *
 * Chevrons are drawn between steps with ::after; steps wrap on mobile and the
 * chevron rotates to point downward when a step wraps to a new line.
 * ========================================================================= */
.sfh-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.75rem 1.6rem;
    margin: 1.5rem 0;
}

.sfh-flow-step {
    position: relative;
    background: var(--sfh-paper);
    border: 1px solid var(--sfh-line);
    border-radius: 999px;
    padding: 0.55rem 1.1rem;
    font-weight: 600;
    font-size: 0.95rem;
    box-shadow: 0 1px 3px rgba(46, 47, 59, 0.08);
}

/* Chevron between steps (not after the last one) */
.sfh-flow-step:not(:last-child)::after {
    content: "\F285"; /* bootstrap-icons chevron-right */
    font-family: "bootstrap-icons";
    position: absolute;
    right: -1.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--sfh-secondary);
    font-size: 0.9rem;
    font-weight: normal;
}

/* Colour-coded lanes */
.sfh-flow-lane {
    margin: 1.25rem 0;
    padding: 0.75rem 1rem;
    border-radius: 0.6rem;
    border-left: 5px solid var(--sfh-secondary);
    background: color-mix(in srgb, var(--sfh-secondary) 6%, white);
}

.sfh-flow-lane__label,
.sfh-flow-lane-label {
    display: inline-block;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.8rem;
    margin-bottom: 0.35rem;
    color: var(--sfh-secondary);
}

.sfh-flow-lane .sfh-flow { margin: 0; }

.sfh-flow-lane--micro {
    border-left-color: var(--sfh-green);
    background: color-mix(in srgb, var(--sfh-green) 6%, white);
}
.sfh-flow-lane--micro .sfh-flow-lane__label,
.sfh-flow-lane--micro .sfh-flow-lane-label { color: var(--sfh-green); }
.sfh-flow-lane--micro .sfh-flow-step:not(:last-child)::after { color: var(--sfh-green); }

.sfh-flow-lane--mediu {
    border-left-color: var(--sfh-blue);
    background: color-mix(in srgb, var(--sfh-blue) 6%, white);
}
.sfh-flow-lane--mediu .sfh-flow-lane__label,
.sfh-flow-lane--mediu .sfh-flow-lane-label { color: var(--sfh-blue); }
.sfh-flow-lane--mediu .sfh-flow-step:not(:last-child)::after { color: var(--sfh-blue); }

.sfh-flow-lane--macro {
    border-left-color: var(--sfh-red);
    background: color-mix(in srgb, var(--sfh-red) 6%, white);
}
.sfh-flow-lane--macro .sfh-flow-lane__label,
.sfh-flow-lane--macro .sfh-flow-lane-label { color: var(--sfh-red); }
.sfh-flow-lane--macro .sfh-flow-step:not(:last-child)::after { color: var(--sfh-red); }

/* ===========================================================================
 * .sfh-callout — info / note box.
 *
 * Markup: <div class="sfh-callout">…</div>  (or --warning / --danger / --success)
 * ========================================================================= */
.sfh-callout {
    border: 1px solid var(--sfh-line);
    border-left: 5px solid var(--sfh-secondary);
    background: color-mix(in srgb, var(--sfh-secondary) 6%, white);
    border-radius: 0 0.5rem 0.5rem 0;
    padding: 0.9rem 1.1rem;
    margin: 1.5rem 0;
}

.sfh-callout > :last-child { margin-bottom: 0; }

.sfh-callout--success {
    border-left-color: var(--sfh-green);
    background: color-mix(in srgb, var(--sfh-green) 6%, white);
}

.sfh-callout--warning {
    border-left-color: #e0a800;
    background: color-mix(in srgb, #e0a800 9%, white);
}

.sfh-callout--danger {
    border-left-color: var(--sfh-danger);
    background: color-mix(in srgb, var(--sfh-danger) 7%, white);
}

/* --- Prev / next page navigation ----------------------------------------- */
.sfh-prevnext {
    display: flex;
    gap: 1rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--sfh-line);
}

.sfh-prevnext__cell { flex: 1 1 0; min-width: 0; }
.sfh-prevnext__cell--next { text-align: right; }

.sfh-prevnext__link {
    display: inline-flex;
    flex-direction: column;
    gap: 0.15rem;
    text-decoration: none;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--sfh-line);
    border-radius: 0.6rem;
    max-width: 100%;
}

.sfh-prevnext__link:hover { border-color: var(--sfh-primary); background: var(--sfh-primary-soft); }
.sfh-prevnext__link--next { align-items: flex-end; }

.sfh-prevnext__dir { font-size: 0.8rem; color: var(--sfh-muted); }
.sfh-prevnext__title { font-weight: 600; color: var(--sfh-primary); }

/* --- Footer -------------------------------------------------------------- */
.sfh-footer {
    background: var(--sfh-dark);
    color: rgba(255, 255, 255, 0.85);
}

body.sfh .sfh-footer a {
    color: #fff;
    text-decoration: none;
}

body.sfh .sfh-footer a:hover { color: #fff; opacity: 0.8; }

.sfh-footer__heading {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.35rem;
}

.sfh-footer__links li { margin: 0.1rem 0; }

.sfh-footer__rule {
    border-color: rgba(255, 255, 255, 0.18);
    margin: 1.25rem 0 1rem;
}

/* --- Inline edit FAB (signed-in editors only) ---------------------------- */
body.sfh .sfh-edit-fab {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1030;
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    background: var(--sfh-primary);
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

body.sfh .sfh-edit-fab:hover,
body.sfh .sfh-edit-fab:focus {
    background: var(--sfh-primary-dark);
    color: #fff;
}

/* --- Coloured link cards (link_cards block) ------------------------------ *
 * A card grid for landing-page shortcuts. Each card is tinted with one of
 * the four SfH brand colours via a thick top accent bar + matching icon. */
body.sfh .link-card {
    --lc-color: var(--sfh-primary);
    position: relative;
    background: var(--sfh-paper);
    border: 1px solid var(--sfh-line);
    border-top: 4px solid var(--lc-color);
    border-radius: 0.7rem;
    padding: 1.25rem 1.25rem 1.35rem;
    box-shadow: 0 1px 3px rgba(46, 47, 59, 0.06);
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

body.sfh .link-card--primary   { --lc-color: var(--sfh-primary); }
body.sfh .link-card--secondary { --lc-color: var(--sfh-secondary); }
body.sfh .link-card--accent    { --lc-color: var(--sfh-accent); }
body.sfh .link-card--danger    { --lc-color: var(--sfh-danger); }
body.sfh .link-card--dark      { --lc-color: var(--sfh-dark); }

body.sfh .link-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(46, 47, 59, 0.14);
}

body.sfh .link-card__icon {
    display: inline-block;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--lc-color);
    margin-bottom: 0.6rem;
}

body.sfh .link-card__title { margin: 0 0 0.35rem; }

body.sfh .link-card__link {
    color: var(--sfh-dark);
    text-decoration: none;
}

body.sfh .link-card:hover .link-card__link { color: var(--lc-color); }

body.sfh .link-card__text {
    color: var(--sfh-muted);
    font-size: 0.95rem;
}

/* ===========================================================================
 * Help & contact chrome (improve-sfh-public-site)
 *
 * „Cere ajutor" is a header button from lg up and a fixed bottom bar below it.
 * The bar reserves its own height (plus the iOS safe area) as body padding, so
 * it never covers the footer or the last line of content.
 * ========================================================================= */
body.sfh .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

body.sfh .btn-sm { min-height: 44px; }

.sfh-header .navbar-nav .nav-link {
    min-height: 44px;
    display: flex;
    align-items: center;
}

/* Only below lg: from lg up the menu is expanded, and Bootstrap hides the toggler with
   a rule of the same specificity this one would override. */
@media (max-width: 991.98px) {
    .sfh-header .navbar-toggler {
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.sfh-cta-help {
    font-weight: 600;
    white-space: nowrap;
    background: var(--sfh-danger);
    border-color: var(--sfh-danger);
}

body.sfh a.sfh-cta-help { color: #fff; }

body.sfh a.sfh-cta-help:hover,
body.sfh a.sfh-cta-help:focus {
    color: #fff;
    background: color-mix(in srgb, var(--sfh-danger) 85%, black);
    border-color: color-mix(in srgb, var(--sfh-danger) 85%, black);
}

.sfh-help-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1035;
    padding: 0.5rem 1rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--sfh-paper) 92%, transparent);
    border-top: 1px solid var(--sfh-line);
    box-shadow: 0 -2px 10px rgba(46, 47, 59, 0.12);
}

.sfh-help-bar .sfh-cta-help--bottom {
    width: 100%;
    min-height: 48px;
    font-size: 1.05rem;
}

@media (max-width: 991.98px) {
    body.sfh.sfh--has-help-cta {
        padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
    }

    /* Keep the editors' floating edit button above the help bar. */
    body.sfh.sfh--has-help-cta .sfh-edit-fab {
        bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    }
}

/* Footer: owner logo on a light chip (any logo stays legible on the dark footer). */
body.sfh .sfh-footer__org {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    text-decoration: none;
    min-height: 44px;
}

.sfh-footer__org-logo {
    height: 56px;
    width: auto;
    max-width: 100%;
    background: #fff;
    padding: 0.35rem 0.55rem;
    border-radius: 0.5rem;
}

.sfh-footer__org-text {
    font-size: 0.9rem;
    max-width: 22rem;
}

.sfh-footer__contact li { margin: 0.15rem 0; }

body.sfh .sfh-footer__contact-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
}

/* ===========================================================================
 * Mobile: no horizontal page scroll at 360px.
 * Media fit the column; documentation tables scroll inside their own box.
 * ========================================================================= */
.sfh-content img,
.sfh-content video,
.sfh-content iframe {
    max-width: 100%;
}

.sfh-content .ratio > iframe,
.sfh-content .leaflet-container img { max-width: none; }

.sfh-prose table:not(.sfh-table) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 767.98px) {
    .sfh-prose .sfh-table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .sfh-prose { font-size: 1rem; }
    .sfh-prose pre { max-width: 100%; }
    .sfh-content { overflow-wrap: anywhere; }
}

/* --- Embeds (publishing.blocks.ResponsiveEmbedBlock) --------------------- */
.publishing-embed.ratio {
    border-radius: 0.6rem;
    overflow: hidden;
    background: var(--sfh-dark);
}

.publishing-embed--rich { max-width: 100%; overflow-x: auto; }

/* ===========================================================================
 * Safe from Harm team and officer directory (sfh_team block)
 * ========================================================================= */
.sfh-team__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    margin-bottom: 1rem;
}

body.sfh .sfh-team__role-link {
    font-weight: 600;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.sfh-team__card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem 1.25rem;
    justify-content: space-between;
    background: var(--sfh-paper);
    border: 1px solid var(--sfh-line);
    border-top: 4px solid var(--sfh-secondary);
    border-radius: 0.7rem;
    padding: 1rem;
}

.sfh-team__card--responsabil { border-top-color: var(--sfh-primary); }

@media (min-width: 576px) {
    .sfh-team__card {
        flex-direction: row;
        align-items: center;
    }
}

.sfh-team__card-top {
    display: flex;
    gap: 1rem;
    align-items: center;
    min-width: 0;
}

.sfh-team__card-body { min-width: 0; }

/* `.sfh-prose img` would otherwise give the photo its own margins, radius and height. */
body.sfh .sfh-team__photo,
.sfh-team__avatar {
    flex: 0 0 112px;
    width: 112px;
    height: 112px;
    margin: 0;
    border-radius: 50%;
}

body.sfh .sfh-team__photo { object-fit: cover; }

.sfh-team__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--sfh-primary-soft);
    color: var(--sfh-primary);
    font-family: "Montserrat", system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.4rem;
}

.sfh-team__name { overflow-wrap: anywhere; }

.sfh-team__role {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.4;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--sfh-secondary) 12%, white);
    color: var(--sfh-dark);
}

.sfh-team__role--responsabil {
    background: var(--sfh-primary);
    color: #fff;
}

.sfh-team__centre {
    font-size: 0.9rem;
    color: var(--sfh-muted);
    margin-top: 0.3rem;
}

.sfh-team__write { align-self: flex-start; flex: 0 0 auto; }

@media (min-width: 576px) {
    .sfh-team__card .sfh-team__write { align-self: center; }
}

/* ---------------------------------------------------------------------------
   Stacked panels. Every block that lists cards is a <ul>/<ol> inside .sfh-prose, whose
   reading-text rules (a 1.4rem indent, 0.3rem under each item) used to win over the
   block's own spacing and leave the cards touching. One rule now owns the stacking:
   no indent, no item margins, a 1rem gap — the same on a phone and on a desktop.
   --------------------------------------------------------------------------- */
.sfh-prose .sfh-team__cards,
.sfh-prose .sfh-team__regional,
.sfh-prose .sfh-directory__list > ul,
.sfh-prose .sfh-help__list,
.sfh-prose .sfh-emergency__list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-left: 0;
    margin-bottom: 0;
}

.sfh-prose .sfh-team__cards > li,
.sfh-prose .sfh-team__regional > li,
.sfh-prose .sfh-directory__list > ul > li,
.sfh-prose .sfh-help__list > li,
.sfh-prose .sfh-emergency__list > li {
    margin: 0;
}

/* Officers inside one centre's panel: a compact list, not a stack of cards. */
.sfh-prose .sfh-directory__group ul {
    padding-left: 0;
    margin-bottom: 0;
}

.sfh-prose .sfh-directory__group li { margin-bottom: 0; }

/* A block's own heading opens its panel; the prose heading margin is for running text. */
.sfh-prose .sfh-hotline > h2:first-child,
.sfh-prose .sfh-help > h2:first-child,
.sfh-prose .sfh-emergency > h2:first-child {
    margin-top: 0;
}

/* Blocks follow each other with room to breathe. */
.sfh-prose .sfh-team__section + .sfh-team__section { margin-top: 3rem; }

.sfh-prose .sfh-team__name,
.sfh-prose .sfh-directory__centre,
.sfh-prose .sfh-help__option-title {
    margin-top: 0;
}

.sfh-prose .sfh-team__name { font-size: 1.2rem; color: var(--sfh-dark); }

/* Map marker: the site's logo in a pin. */
.sfh-map-pin { background: none; border: 0; }

.sfh-map-pin__body {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background: #fff;
    border: 3px solid var(--sfh-primary);
    box-shadow: 0 2px 6px rgba(46, 47, 59, 0.35);
}

/* A group of centres: the same pin, with the count in a badge on its shoulder. */
.sfh-map-pin--group { cursor: pointer; }

.sfh-map-pin__count {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--sfh-danger);
    color: #fff;
    border: 2px solid #fff;
    font: 700 0.75rem/18px "Roboto", system-ui, sans-serif;
    text-align: center;
    box-shadow: 0 1px 3px rgba(46, 47, 59, 0.35);
}

body.sfh .sfh-map-pin__logo {
    width: 26px;
    height: 26px;
    margin: 0;
    border-radius: 50%;
    object-fit: contain;
    transform: rotate(45deg);
}

.sfh-team__regional-item,
.sfh-directory__group {
    background: var(--sfh-paper);
    border: 1px solid var(--sfh-line);
    border-radius: 0.6rem;
    padding: 0.75rem 1rem;
    margin-bottom: 0.6rem;
}

.sfh-team__regional-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

.sfh-team__regional-main { min-width: 0; flex: 1 1 16rem; }

.sfh-team__covers {
    font-size: 0.9rem;
    margin-top: 0.15rem;
}

.sfh-directory__toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    margin-bottom: 1rem;
}

.sfh-directory__filter {
    flex: 1 1 14rem;
    min-width: 0;
}

.sfh-directory__filter .form-control { min-height: 44px; }

.sfh-directory__centre {
    margin: 0 0 0.35rem;
    color: var(--sfh-primary);
}

.sfh-directory__officer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem 1rem;
    padding: 0.2rem 0;
}

.sfh-directory__map {
    width: 100%;
    height: 460px;
    max-height: 70vh;
    border-radius: 0.6rem;
    border: 1px solid var(--sfh-line);
}

.sfh-directory__popup-officer { margin-top: 0.2rem; }

/* ===========================================================================
 * Hotline, emergency numbers, help options, document downloads
 * ========================================================================= */
.sfh-hotline {
    background: var(--sfh-paper);
    border: 1px solid var(--sfh-line);
    border-left: 5px solid var(--sfh-primary);
    border-radius: 0.7rem;
    padding: 1.25rem;
}

.sfh-hotline__call { margin-bottom: 1rem; }

.sfh-hotline__number {
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 0.6rem;
    max-width: 100%;
}

.sfh-hotline__shift {
    border-top: 1px solid var(--sfh-line);
    padding-top: 0.85rem;
    margin-top: 0.25rem;
}

.sfh-hotline__shift-group + .sfh-hotline__shift-group { margin-top: 0.6rem; }

.sfh-hotline__people {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

.sfh-hotline__person {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

body.sfh .sfh-hotline__photo,
.sfh-hotline__avatar {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    margin: 0;
    border-radius: 50%;
}

body.sfh .sfh-hotline__photo { object-fit: cover; }

.sfh-hotline__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--sfh-primary-soft);
    color: var(--sfh-primary);
    font-family: "Montserrat", system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
}

.sfh-hotline__person-name {
    font-weight: 600;
    overflow-wrap: anywhere;
}

body.sfh .sfh-hotline__link,
.sfh-hotline__link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 44px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.sfh-emergency__row {
    display: flex;
    gap: 0.75rem 1rem;
    align-items: flex-start;
    flex-wrap: wrap;
    background: var(--sfh-paper);
    border: 1px solid var(--sfh-line);
    border-radius: 0.6rem;
    padding: 0.75rem 1rem;
    margin-bottom: 0.6rem;
}

body.sfh .sfh-emergency__number {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    min-width: 9rem;
    font-family: "Montserrat", system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--sfh-danger);
    text-decoration: none;
}

.sfh-emergency__details { flex: 1 1 12rem; min-width: 0; }

.sfh-help__option {
    --help-color: var(--sfh-secondary);
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    background: var(--sfh-paper);
    border: 1px solid var(--sfh-line);
    border-left: 5px solid var(--help-color);
    border-radius: 0.7rem;
    padding: 1rem;
    margin-bottom: 0.75rem;
}

.sfh-help__option--danger  { --help-color: var(--sfh-danger); }
.sfh-help__option--primary { --help-color: var(--sfh-primary); }
.sfh-help__option--accent  { --help-color: var(--sfh-accent); }

.sfh-help__icon {
    flex: 0 0 auto;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--help-color);
}

.sfh-help__option-title { line-height: 1.5rem; }

.sfh-help__body { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }

.sfh-help__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.document-download { border-color: var(--sfh-line); border-radius: 0.7rem; }

.document-download__inner {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem;
}

.document-download__cover {
    flex: 0 0 auto;
    width: 80px;
    height: auto;
    border-radius: 0.4rem;
    box-shadow: 0 1px 4px rgba(46, 47, 59, 0.18);
}

.document-download__icon {
    flex: 0 0 auto;
    font-size: 2.4rem;
    color: var(--sfh-primary);
}

.document-download__body { min-width: 0; }

/* Public SfH forms (anonymous report, officer contact) */
.sfh-form .form-control,
.sfh-form .form-select { min-height: 44px; }

.sfh-receipt__secrets code {
    display: inline-block;
    font-size: 1.15rem;
    padding: 0.35rem 0.6rem;
    word-break: break-all;
    user-select: all;
}

/* ---------------------------------------------------------------------------
   Brand pattern behind the main content (Read_SFH Brand Guidelines, the purple
   variant), drawn monochrome and very faint. The SVG is a mask, not an image, so
   the colour is --sfh-primary and follows the site configuration. Switched off
   with the theme config key `hide_content_pattern`. Never printed.
   --------------------------------------------------------------------------- */
.sfh-main--pattern {
    position: relative;
    isolation: isolate;
}

.sfh-main--pattern::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: var(--sfh-primary);
    opacity: 0.09;
    -webkit-mask-image: url("../img/sfh-pattern.svg");
    mask-image: url("../img/sfh-pattern.svg");
    -webkit-mask-repeat: repeat;
    mask-repeat: repeat;
    -webkit-mask-size: 600px auto;
    mask-size: 600px auto;
}

@media (max-width: 575.98px) {
    .sfh-main--pattern::before {
        -webkit-mask-size: 340px auto;
        mask-size: 340px auto;
    }
}

@media print {
    .sfh-main--pattern::before {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
   „Cele mai noi articole": cards with the cover on top. Titles read as headings, in the
   text colour, never as a purple body link that looks already visited.
   --------------------------------------------------------------------------- */
body.sfh .latest-articles__card {
    border: 1px solid var(--sfh-line);
    border-radius: 0.8rem;
    overflow: hidden;
    background: var(--sfh-paper);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

body.sfh .latest-articles__card:hover,
body.sfh .latest-articles__card:focus-within {
    box-shadow: 0 6px 18px rgba(46, 47, 59, 0.12);
    transform: translateY(-2px);
}

body.sfh .latest-articles__cover {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin: 0;
    border-radius: 0;
}

body.sfh .latest-articles__title {
    font-size: 1.1rem;
    line-height: 1.35;
    margin-top: 0;
}

body.sfh .latest-articles__title a,
body.sfh .latest-articles__title a:visited {
    color: var(--sfh-dark);
    text-decoration: none;
}

body.sfh .latest-articles__title a:hover,
body.sfh .latest-articles__title a:focus {
    color: var(--sfh-primary);
}

body.sfh .latest-articles__excerpt {
    color: var(--sfh-muted);
    font-size: 0.95rem;
    line-height: 1.55;
}

body.sfh .latest-articles__card:not(.latest-articles__card--cover) {
    border-top: 4px solid var(--sfh-secondary);
}

@media (prefers-reduced-motion: reduce) {
    body.sfh .latest-articles__card { transition: none; }
    body.sfh .latest-articles__card:hover,
    body.sfh .latest-articles__card:focus-within { transform: none; }
}

/* --- Certification path (certification_path block) ----------------------- *
 * „Cum funcționează” steps and one card per certification, in the link-card
 * look: paper cards with a brand accent bar. */
body.sfh .cert-path__step {
    background: var(--sfh-primary-soft);
    border-color: var(--sfh-line) !important;
}

body.sfh .cert-path__step-number {
    background: var(--sfh-primary) !important;
}

body.sfh .cert-path__step-icon {
    color: var(--sfh-primary);
    font-size: 1.25rem;
}

body.sfh .cert-path__card {
    background: var(--sfh-paper);
    border: 1px solid var(--sfh-line);
    border-top: 4px solid var(--sfh-secondary);
    border-radius: 0.7rem;
    box-shadow: 0 1px 3px rgba(46, 47, 59, 0.06);
}

body.sfh .cert-path__validity {
    background: var(--sfh-accent) !important;
}

body.sfh .cert-path__facts dt {
    color: var(--sfh-muted);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-top: 0.75rem;
}

body.sfh .cert-path__facts dd {
    margin-bottom: 0;
}

body.sfh .cert-path__competency summary {
    cursor: pointer;
    color: var(--sfh-primary);
}

body.sfh .cert-path__member {
    color: var(--sfh-muted);
}