/*
Theme Name: TheNigerian
Theme URI: https://thenigerian.com.ng
Author: TheNigerian
Author URI: https://thenigerian.com.ng
Description: Bold Nigerian news portal WordPress theme — three-row header with prominent search bar and coloured category navigation, image-led hero with overlay titles, dense magazine-style feed, dark utility footer. System fonts throughout (zero external font requests). Five-mode SEO/schema engine (standalone, Yoast enhance, Rank Math enhance, auto, off) with unified @graph JSON-LD. Ships with WCAG AAA dark mode, reading progress bar, collapsible TOC, sticky share rail, last-updated badge, reading time, AJAX live search, mega-menu support, and LiteSpeed Cache compatibility. Mobile-first with 44px AAA touch targets throughout. All theme options live in a single autoloaded wp_options row (Appearance → TheNigerian Settings) with ten tabs and JSON import/export.
Version: 2.3.10
Requires at least: 6.3
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: thenigerian
Tags: blog, news, editorial, two-columns, custom-menu, featured-images, translation-ready, wide-blocks, block-styles, threaded-comments
*/

/* =====================================================================
   BOLD NIGERIAN NEWS PORTAL — design language v2.2.0
   ---------------------------------------------------------------------
   Breakpoints (all min-width):
     480px — large phone
     600px — tablet portrait
     768px — tablet landscape
     960px — desktop (2-row header)
     1200px — wide desktop / share rail
   Typography: system sans-serif only. No serifs. No Google Fonts.
   Palette: bright white pages, Nigerian green primary, red accent for hot,
   dense image-forward cards with overlay titles, dark charcoal footer.
   ===================================================================== */

:root {
    /* Nigerian green — primary brand */
    --fl-primary: #085A1D;            /* 7.82:1 on white — AAA */
    --fl-primary-dark: #053E14;       /* 12.7:1 */
    --fl-primary-hover: #0B7026;      /* for interactive surfaces */
    --fl-primary-light: #E8F0E9;      /* soft background */
    --fl-on-primary: #FFFFFF;         /* text on primary surface */

    /* Hot / breaking accent */
    --fl-accent: #C62828;             /* 5.88:1 on white — AA */
    --fl-accent-dark: #A01D1D;
    --fl-amber: #B45309;              /* trending — 4.84:1 AA */

    /* v2.3.0 — WCAG AAA semantic tokens */
    --fl-accent-strong: #7F1D1D;      /* 10:1 on white — AAA for pills */
    --fl-on-accent-strong: #FFFFFF;
    --fl-on-primary: #FFFFFF;         /* shifts to #0F0F0F in dark mode */

    /* v2.3.1 — CTA gradient (newsletter card). Decoupled from --fl-primary
       because primary brightens to #4ADE80 in dark mode, where #FFF text
       would be 1.74:1 (FAIL). CTA keeps dark green in BOTH modes for AAA
       white text, dim slightly in dark mode for a softer aesthetic. */
    --fl-cta-bg: #085A1D;             /* light mode: 8.43:1 on #FFF */
    --fl-cta-bg-dark: #053E14;        /* gradient second stop: 12.31:1 */
    --fl-on-cta: #FFFFFF;

    /* Ink scale */
    --fl-ink: #0F0F0F;                /* 19.9:1 on white */
    --fl-text: #2A2A2A;                /* 13.2:1 */
    --fl-text-light: #525252;          /* 7.85:1 */
    --fl-text-muted: #555555;          /* 7.45:1 AAA small — v2.3.0 */

    /* Surfaces — bright, clean */
    --fl-paper: #FFFFFF;
    --fl-paper-alt: #F7F7F7;
    --fl-card-bg: #FFFFFF;
    --fl-border: #E5E5E5;
    --fl-border-strong: #CFCFCF;

    /* Links */
    --fl-link: var(--fl-primary);
    --fl-link-hover: var(--fl-primary-dark);

    /* Footer (dark) */
    --fl-footer-bg: #111827;
    --fl-footer-bg-alt: #0B1220;
    --fl-footer-text: #D1D5DB;
    --fl-footer-text-dim: #9CA3AF;
    --fl-footer-border: #1F2937;

    /* Typography — system sans only, no external fonts */
    --fl-font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --fl-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    /* Heart */
    --fl-heart: #9CA3AF;
    --fl-heart-active: #C62828;

    /* Metrics */
    --fl-header-utility-h: 36px;
    --fl-header-mast-h: 64px;
    --fl-header-cat-h: 44px;
    --fl-header-h: calc(var(--fl-header-mast-h) + var(--fl-header-cat-h)); /* sticky portion */
    --fl-max-w: 1200px;
    --fl-content-max-w: 760px;

    --fl-radius-xs: 2px;
    --fl-radius-sm: 4px;
    --fl-radius-md: 6px;
    --fl-radius-lg: 10px;

    --fl-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --fl-shadow-md: 0 2px 8px rgba(0,0,0,0.08);
    --fl-shadow-lg: 0 8px 30px rgba(0,0,0,0.12);

    --fl-safe-top: env(safe-area-inset-top, 0px);
    --fl-safe-bottom: env(safe-area-inset-bottom, 0px);
    --fl-safe-left: env(safe-area-inset-left, 0px);
    --fl-safe-right: env(safe-area-inset-right, 0px);

    --fl-focus-ring: 0 0 0 3px rgba(8,90,29,0.4);
}

html[data-fl-theme="dark"] {
    /* Dark mode — brighter green for AA contrast on near-black */
    --fl-primary: #4ADE80;
    --fl-primary-dark: #86EFAC;
    --fl-primary-hover: #22C55E;
    --fl-primary-light: #0F2416;
    --fl-on-primary: #0F0F0F;

    --fl-accent: #F87171;
    --fl-accent-dark: #FCA5A5;
    --fl-amber: #FBBF24;

    /* v2.3.0 — AAA semantic token overrides */
    --fl-accent-strong: #FCA5A5;      /* 9.99:1 with #0F0F0F text — AAA */
    --fl-on-accent-strong: #0F0F0F;
    --fl-on-primary: #0F0F0F;         /* dark text on bright-green primary */

    /* v2.3.1 — CTA gradient shifts darker in dark mode for a softer card.
       #FFF text on #0D2F17 = 14.62:1, on #08200F = 17.16:1 — both AAA. */
    --fl-cta-bg: #0D2F17;
    --fl-cta-bg-dark: #08200F;
    --fl-on-cta: #FFFFFF;

    --fl-ink: #F9FAFB;
    --fl-text: #E5E7EB;
    --fl-text-light: #D1D5DB;
    --fl-text-muted: #B5BCC8;         /* v2.3.0 — was #9CA3AF; now 9.1:1 AAA */

    --fl-paper: #0F0F0F;
    --fl-paper-alt: #171717;
    --fl-card-bg: #171717;
    --fl-border: #262626;
    --fl-border-strong: #404040;

    --fl-link: var(--fl-primary);
    --fl-link-hover: var(--fl-primary-dark);

    --fl-footer-bg: #050505;
    --fl-footer-bg-alt: #000000;
    --fl-footer-text: #D1D5DB;
    --fl-footer-text-dim: #B5BCC8;    /* v2.3.0 AAA on #050505 */
    --fl-footer-border: #1F1F1F;

    --fl-heart: #6B7280;
    --fl-heart-active: #F87171;

    --fl-shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
    --fl-shadow-md: 0 2px 8px rgba(0,0,0,0.6);
    --fl-shadow-lg: 0 8px 30px rgba(0,0,0,0.7);

    --fl-focus-ring: 0 0 0 3px rgba(74,222,128,0.5);
    color-scheme: dark;
}


/* =====================================================================
   RESET + BASE
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    overflow-y: scroll; overflow-x: hidden;
    scroll-padding-top: calc(var(--fl-header-h) + 16px);
}
body {
    font-family: var(--fl-font);
    color: var(--fl-text);
    background: var(--fl-paper);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 100%; min-height: 100vh; min-height: 100dvh;
    transition: background 0.2s ease, color 0.2s ease;
}
body.fl-drawer-open { position: fixed; width: 100%; overflow: hidden; }

a {
    color: var(--fl-link);
    text-decoration: none;
    transition: color 0.15s;
}
a:hover { color: var(--fl-link-hover); }

/* v2.3.4 — WCAG 1.4.1 "use of color".
   Prose-area links need a non-colour distinguisher because link green vs
   body grey is 1.41–1.70:1 contrast (needs 3:1). Underline applied only
   inside long-form content areas so nav menus, card titles, pagination,
   breadcrumbs, tags, buttons and other chrome links stay un-underlined. */
.fl-single-content a,
.fl-page-content a,
.fl-comment-text a,
.fl-newsletter p a,
.fl-toc a,
.fl-404 p a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-skip-ink: auto;
}
.fl-single-content a:hover,
.fl-page-content a:hover,
.fl-comment-text a:hover,
.fl-newsletter p a:hover,
.fl-toc a:hover,
.fl-404 p a:hover {
    text-decoration-thickness: 2px;
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: none;
    box-shadow: var(--fl-focus-ring);
    border-radius: 3px;
}

img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; }

.screen-reader-text {
    clip: rect(1px,1px,1px,1px); position: absolute !important;
    height: 1px; width: 1px; overflow: hidden; word-wrap: normal !important;
}
.screen-reader-text:focus {
    background: #F1F1F1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0,0,0,.6);
    clip: auto !important; color: #21759B; display: block; font-size: 14px; font-weight: 700;
    height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px;
    text-decoration: none; top: 5px; width: auto; z-index: 100000;
}

/* Skip link */
.fl-skip-link {
    position: absolute; top: -40px; left: 8px;
    background: var(--fl-primary); color: var(--fl-on-primary);
    padding: 10px 16px; font-weight: 700; font-size: 13px;
    z-index: 100001; border-radius: 0 0 6px 6px;
    transition: top 0.2s;
}
.fl-skip-link:focus { top: 0; color: var(--fl-on-primary); }

/* Reading progress bar */
.fl-progress {
    position: fixed; top: 0; left: 0; height: 3px;
    /* v2.3.6: accent-strong gives cleaner contrast on both paper colours
       (10:1 light / 9.45:1 dark) — was --fl-accent (soft red, 6.93:1 dark). */
    background: var(--fl-accent-strong); z-index: 9998;
    width: 0; transition: width 0.1s linear;
    box-shadow: 0 0 8px rgba(198, 40, 40, 0.4);
}


/* =====================================================================
   TOP UTILITY BAR — dark strip with date + social + subscribe
   ===================================================================== */
.fl-utility {
    /* v2.3.1: decoupled from --fl-ink (which flips to near-white in dark mode).
       Utility strip keeps a persistent dark chrome surface in both modes —
       AAA 15.48:1 with #E5E7EB text, AAA 9.40:1 with #B0B6C0 muted. */
    background: #0F0F0F;
    color: #E5E7EB;
    font-size: 12.5px;
    height: var(--fl-header-utility-h);
    padding: 0 16px;
    padding-top: var(--fl-safe-top);
    padding-left: max(16px, var(--fl-safe-left));
    padding-right: max(16px, var(--fl-safe-right));
    display: flex; align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.fl-utility-inner {
    max-width: var(--fl-max-w); margin: 0 auto;
    width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
}
.fl-utility-date {
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 11.5px;
    white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.fl-utility-right {
    display: flex; align-items: center; gap: 4px;
    flex-shrink: 0;
}
.fl-utility-social {
    display: none; gap: 2px;
}
.fl-utility-social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    /* v2.3.1: #B0B6C0 → AAA 9.40:1 on the #0F0F0F utility strip. */
    color: #B0B6C0;
    border-radius: 3px;
    transition: color 0.15s, background 0.15s;
}
.fl-utility-social a:hover { color: #FFF; background: rgba(255,255,255,0.08); }
.fl-utility-social svg { width: 13px; height: 13px; fill: currentColor; }
.fl-utility-subscribe {
    display: inline-flex; align-items: center; gap: 5px;
    height: 26px; padding: 0 12px;
    background: var(--fl-accent-strong); color: var(--fl-on-accent-strong);
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.6px;
    border-radius: 3px;
    transition: background 0.15s;
}
.fl-utility-subscribe:hover { background: var(--fl-accent-dark); color: var(--fl-on-accent-strong); }
.fl-utility-subscribe svg { width: 11px; height: 11px; fill: currentColor; }

@media (min-width: 600px) {
    .fl-utility-social { display: inline-flex; }
}


/* =====================================================================
   ANNOUNCEMENT BAR — sits above utility, can be dismissed
   ===================================================================== */
.fl-announce {
    background: var(--fl-primary);
    color: var(--fl-on-primary);
    font-size: 13px; font-weight: 500;
    padding: 8px 16px;
    padding-left: max(16px, var(--fl-safe-left));
    padding-right: max(16px, var(--fl-safe-right));
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
/* v2.3.1: inherit on-primary so announce links keep AAA in both modes.
   Light: #FFF on #085A1D = 8.43:1. Dark: #0F0F0F on #4ADE80 = 11.00:1. */
.fl-announce a { color: inherit; text-decoration: underline; text-underline-offset: 2px; font-weight: 700; }
.fl-announce a:hover { color: inherit; opacity: 0.8; }


/* =====================================================================
   MASTHEAD — logo + big search bar + actions
   ===================================================================== */
.fl-header {
    position: sticky; top: 0; z-index: 1000;
    background: var(--fl-paper);
    box-shadow: 0 1px 0 var(--fl-border);
    transition: box-shadow 0.2s;
}
.fl-header.fl-scrolled { box-shadow: 0 2px 12px rgba(0,0,0,0.08); }

.fl-masthead {
    height: var(--fl-header-mast-h);
    padding: 0 14px;
    padding-left: max(14px, var(--fl-safe-left));
    padding-right: max(14px, var(--fl-safe-right));
    display: flex; align-items: center;
    gap: 8px;
    max-width: var(--fl-max-w); margin: 0 auto;
}

.fl-menu-toggle, .fl-theme-toggle, .fl-search-mobile-toggle {
    background: none; border: none; cursor: pointer;
    width: 44px; height: 44px;                /* v2.3.0 — WCAG 2.5.5 AAA */
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--fl-ink);
    border-radius: 5px;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
}
.fl-menu-toggle:hover, .fl-theme-toggle:hover, .fl-search-mobile-toggle:hover {
    background: var(--fl-paper-alt);
}
.fl-menu-toggle svg, .fl-theme-toggle svg, .fl-search-mobile-toggle svg {
    width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.fl-theme-toggle .fl-icon-sun { display: none; }
html[data-fl-theme="dark"] .fl-theme-toggle .fl-icon-moon { display: none; }
html[data-fl-theme="dark"] .fl-theme-toggle .fl-icon-sun { display: block; }

.fl-site-brand {
    flex: 1; text-align: center;
    min-width: 0;
    display: flex; align-items: center; justify-content: center;
}
.fl-site-name {
    font-size: 22px; font-weight: 900;
    color: var(--fl-primary);
    letter-spacing: -0.02em;
    line-height: 1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-decoration: none;
}
.fl-site-name:hover { color: var(--fl-primary-dark); }
.fl-site-brand .custom-logo { max-height: 40px; width: auto; display: block; }
.fl-site-brand .custom-logo-link { display: inline-flex; }

.fl-masthead-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }

/* Desktop: search bar occupies middle */
.fl-masthead-search { display: none; }
.fl-search-mobile-toggle { display: inline-flex; }

@media (min-width: 600px) {
    .fl-masthead { padding: 0 20px; gap: 14px; }
    .fl-site-name { font-size: 24px; }
}

@media (min-width: 960px) {
    :root { --fl-header-mast-h: 76px; }
    .fl-masthead { padding: 0 28px; gap: 24px; }
    .fl-menu-toggle { display: none; }
    .fl-search-mobile-toggle { display: none; }
    .fl-site-brand { flex: 0 0 auto; text-align: left; }
    .fl-site-name { font-size: 28px; letter-spacing: -0.025em; }
    .fl-site-brand .custom-logo { max-height: 48px; }

    /* Inline search — prominent, wide */
    .fl-masthead-search {
        display: block;
        flex: 1;
        max-width: 560px;
        margin: 0 auto;
        position: relative;
    }
    .fl-masthead-search-form {
        display: flex;
        background: var(--fl-paper-alt);
        border: 2px solid transparent;
        border-radius: 999px;
        overflow: hidden;
        transition: border-color 0.15s, background 0.15s;
        width: 100%;
    }
    .fl-masthead-search-form:focus-within {
        border-color: var(--fl-primary);
        background: var(--fl-paper);
    }
    .fl-masthead-search-icon {
        display: flex; align-items: center; justify-content: center;
        width: 44px; flex-shrink: 0;
        color: var(--fl-text-muted);
    }
    .fl-masthead-search-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
    .fl-masthead-search input[type="search"] {
        flex: 1; min-width: 0;
        border: none; background: transparent;
        padding: 10px 16px 10px 0;
        font-size: 14.5px;
        font-family: var(--fl-font);
        color: var(--fl-ink);
        outline: none;
        -webkit-appearance: none; appearance: none;
        height: 40px;
    }
    .fl-masthead-search input::placeholder { color: var(--fl-text-muted); }
    .fl-masthead-search input::-webkit-search-cancel-button,
    .fl-masthead-search input::-webkit-search-decoration { -webkit-appearance: none; }
    .fl-masthead-search-submit {
        background: var(--fl-primary); color: var(--fl-on-primary);
        border: none; cursor: pointer;
        padding: 0 20px; font-size: 13px; font-weight: 700;
        letter-spacing: 0.5px; text-transform: uppercase;
        height: 40px;
        transition: background 0.15s;
    }
    .fl-masthead-search-submit:hover { background: var(--fl-primary-hover); }
    .fl-masthead-search-results {
        position: absolute; top: calc(100% + 8px); left: 0; right: 0;
        background: var(--fl-card-bg);
        border: 1px solid var(--fl-border);
        border-radius: var(--fl-radius-md);
        box-shadow: var(--fl-shadow-lg);
        max-height: 70vh; overflow-y: auto;
        z-index: 100;
        display: none;
    }
    .fl-masthead-search-results.active { display: block; }
}


/* =====================================================================
   MOBILE SEARCH — full-width row below masthead, drops on toggle
   ===================================================================== */
.fl-search-mobile {
    display: block;
    padding: 10px 14px;
    padding-left: max(14px, var(--fl-safe-left));
    padding-right: max(14px, var(--fl-safe-right));
    background: var(--fl-primary);
    /* v2.3.1: black-alpha separator is visible on both light-mode dark green
       and dark-mode bright green. */
    border-bottom: 1px solid rgba(0,0,0,0.18);
    position: relative;
}
.fl-search-mobile-inner {
    max-width: var(--fl-max-w); margin: 0 auto;
    display: flex; align-items: center;
    background: #FFF;
    border-radius: 999px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    position: relative;
}
.fl-search-mobile-icon {
    display: flex; align-items: center; justify-content: center;
    width: 40px; flex-shrink: 0;
    color: var(--fl-text-muted);
}
.fl-search-mobile-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.fl-search-mobile input[type="search"] {
    flex: 1; min-width: 0;
    border: none; background: transparent;
    padding: 9px 8px 9px 0;
    font-size: 16px;                         /* v2.3.0 — mobile no-zoom */
    font-family: var(--fl-font);
    color: #0F0F0F;
    outline: none;
    -webkit-appearance: none; appearance: none;
    /* v2.3.0 mobile-first: 44px meets WCAG 2.5.5 AAA. */
    height: 44px;
}
.fl-search-mobile input::placeholder { color: #6B6B6B; }
.fl-search-mobile input::-webkit-search-cancel-button,
.fl-search-mobile input::-webkit-search-decoration { -webkit-appearance: none; }
.fl-search-mobile-submit {
    /* v2.3.0: switched to accent-strong pair so text/bg keeps AAA contrast
       in BOTH light (#FFF on #7F1D1D = 10:1) and dark (#0F0F0F on #FCA5A5 = 9.99:1) modes. */
    background: var(--fl-accent-strong); color: var(--fl-on-accent-strong);
    border: none; cursor: pointer;
    padding: 0 18px;
    font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
    /* v2.3.0 mobile-first: 44px min height meets WCAG 2.5.5 (AAA). */
    height: 44px; flex-shrink: 0;
    transition: background 0.15s;
}
.fl-search-mobile-submit:hover { background: var(--fl-accent-dark); }
.fl-search-mobile-results {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0;
    background: var(--fl-card-bg);
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius-md);
    box-shadow: var(--fl-shadow-lg);
    max-height: 65vh; overflow-y: auto;
    z-index: 100;
    display: none;
    color: var(--fl-text);
}
.fl-search-mobile-results.active { display: block; }

@media (min-width: 960px) {
    .fl-search-mobile { display: none; }
}


/* =====================================================================
   LIVE SEARCH RESULT ITEMS (shared between desktop + mobile)
   ===================================================================== */
.fl-live-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    color: var(--fl-text);
    border-bottom: 1px solid var(--fl-border);
    text-decoration: none;
    transition: background 0.12s;
    -webkit-tap-highlight-color: transparent;
}
.fl-live-item:last-child { border-bottom: none; }
.fl-live-item:hover, .fl-live-item:focus { background: var(--fl-paper-alt); color: var(--fl-ink); }
.fl-live-thumb { width: 44px; height: 44px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
.fl-live-no-thumb {
    display: flex; align-items: center; justify-content: center;
    background: var(--fl-paper-alt); color: var(--fl-text-muted);
}
.fl-live-text { flex: 1; min-width: 0; }
.fl-live-title {
    display: block; font-size: 14px; font-weight: 600;
    color: var(--fl-ink); line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fl-live-cat {
    display: block; font-size: 10.5px; color: var(--fl-accent-strong);
    margin-top: 2px; text-transform: uppercase; letter-spacing: 0.7px; font-weight: 700;
}
.fl-live-all {
    display: block; padding: 11px 14px;
    text-align: center;
    font-size: 12.5px; font-weight: 700;
    color: var(--fl-on-primary); background: var(--fl-primary);
    text-transform: uppercase; letter-spacing: 0.5px;
    border-top: 1px solid var(--fl-border);
    transition: background 0.15s;
    text-decoration: none;
}
.fl-live-all:hover { background: var(--fl-primary-hover); color: var(--fl-on-primary); }
.fl-live-empty { padding: 22px 14px; text-align: center; font-size: 13px; color: var(--fl-text-muted); }
.fl-live-loading { display: flex; justify-content: center; align-items: center; gap: 5px; padding: 22px; }
.fl-live-loading span {
    width: 6px; height: 6px; background: var(--fl-text-muted);
    border-radius: 50%; animation: flDot 1.1s infinite ease-in-out;
}
.fl-live-loading span:nth-child(2) { animation-delay: 0.15s; }
.fl-live-loading span:nth-child(3) { animation-delay: 0.3s; }
@keyframes flDot {
    0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1); }
}


/* =====================================================================
   CATEGORY NAV BAND — green, horizontal, scrollable on mobile
   ===================================================================== */
.fl-catnav {
    background: var(--fl-primary);
    height: var(--fl-header-cat-h);
    position: relative;
    border-bottom: 3px solid var(--fl-accent);
    /* v2.2.1: overflow handled by inner scroll container on mobile;
       switches to visible at 960px so dropdowns + mega menus can render. */
}
.fl-catnav-scroll {
    max-width: var(--fl-max-w); margin: 0 auto;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.fl-catnav-scroll::-webkit-scrollbar { display: none; }
.fl-catnav-menu {
    list-style: none; padding: 0 14px;
    padding-left: max(14px, var(--fl-safe-left));
    padding-right: max(14px, var(--fl-safe-right));
    margin: 0;
    height: 100%;
    display: flex; align-items: stretch; gap: 0;
    white-space: nowrap;
    width: max-content;
    min-width: 100%;
}
.fl-catnav-menu > li { position: relative; display: flex; }
.fl-catnav-menu > li > a {
    display: flex; align-items: center;
    padding: 0 16px; height: 100%;
    /* v2.3.1: on-primary auto-flips — #FFF on #085A1D (light, 8.43:1) → #0F0F0F on #4ADE80 (dark, 11.00:1). Both AAA. */
    color: var(--fl-on-primary); font-size: 13.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.8px;
    text-decoration: none;
    /* Black-alpha separators render on both dark-green and bright-green primary surfaces. */
    border-right: 1px solid rgba(0,0,0,0.15);
    transition: background 0.15s;
}
.fl-catnav-menu > li:first-child > a { border-left: 1px solid rgba(0,0,0,0.15); }
.fl-catnav-menu > li > a:hover,
.fl-catnav-menu > li.current-menu-item > a,
.fl-catnav-menu > li.current-menu-parent > a {
    background: rgba(0,0,0,0.18);
    color: var(--fl-on-primary);
}
.fl-catnav-menu > li.current-menu-item > a::after,
.fl-catnav-menu > li.current-menu-parent > a::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: -3px;
    height: 3px;
    /* v2.3.1: currentColor follows the adapted text, so the active-page
       underline is white in light mode and dark ink in dark mode. */
    background: currentColor;
}

/* Desktop dropdowns */
@media (min-width: 960px) {
    /* v2.2.1: allow sub-menus + mega-menus to extend below the 44px catnav band */
    .fl-catnav        { overflow: visible; }
    .fl-catnav-scroll { overflow: visible; }

    .fl-catnav-menu > li > a { padding: 0 18px; font-size: 13px; }
    .fl-catnav-menu .sub-menu {
        list-style: none;
        position: absolute; top: 100%; left: 0; right: auto;
        min-width: 220px;
        /* v2.3.2: was hardcoded #FFF → broke in dark mode (near-white text
           on white panel = invisible, 1.08:1). --fl-card-bg auto-flips:
           #FFFFFF in light, #171717 in dark. Border-top switched to
           --fl-accent-strong so the 3px rule stays visible and AAA on both
           paper colours (#7F1D1D light, #FCA5A5 dark). */
        background: var(--fl-card-bg);
        border: 1px solid var(--fl-border);
        border-top: 3px solid var(--fl-accent-strong);
        box-shadow: var(--fl-shadow-md);
        padding: 6px 0;
        opacity: 0; visibility: hidden; transform: translateY(-4px);
        transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
        z-index: 100;
    }
    /* Open on focus-within (keyboard) + when JS adds .fl-dd-open (touch) */
    .fl-catnav-menu > li:focus-within > .sub-menu,
    .fl-catnav-menu > li.fl-dd-open > .sub-menu {
        opacity: 1; visibility: visible; transform: translateY(0);
    }
    .fl-catnav-menu .sub-menu li a {
        /* v2.3.2: 44px min-height meets WCAG 2.5.5 AAA touch target. */
        display: flex; align-items: center;
        padding: 10px 16px;
        min-height: 44px;
        font-size: 13.5px; font-weight: 500;
        /* Light: #2A2A2A on #FFFFFF = 14.35:1 AAA.
           Dark:  #E5E7EB on #171717 = 14.48:1 AAA. */
        color: var(--fl-text);
        text-transform: none; letter-spacing: normal;
        text-decoration: none;
        transition: background 0.12s, color 0.12s;
    }
    .fl-catnav-menu .sub-menu li a:hover,
    .fl-catnav-menu .sub-menu li.current-menu-item a {
        /* Light: #085A1D on #E8F0E9 =  8.07:1 AAA.
           Dark:  #4ADE80 on #0F2416 =  9.38:1 AAA. */
        background: var(--fl-primary-light);
        color: var(--fl-primary);
    }
    .fl-catnav-menu > .menu-item-has-children > a::after {
        content: '';
        display: inline-block;
        margin-left: 6px;
        width: 0; height: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        /* v2.3.2: currentColor follows --fl-on-primary → white caret on
           dark-green (light mode) / dark caret on bright-green (dark mode).
           Both ≥8.4:1. */
        border-top: 4px solid currentColor;
        transform: translateY(1px);
        opacity: 0.9;
    }

    /* Mega menu — inherits the dark-mode-safe sub-menu bg/border tokens
       above, so it adapts automatically. 2-column on tablet/desktop keeps
       each row ≥44px for touch. */
    .fl-catnav-menu > li.fl-mega { position: static; }
    .fl-catnav-menu > li.fl-mega > .sub-menu {
        left: 0; right: 0; width: auto;
        max-width: var(--fl-max-w); margin: 0 auto;
        display: grid; grid-template-columns: repeat(2, 1fr);
        gap: 2px 20px; padding: 14px 20px;
    }
    .fl-catnav-menu > li.fl-mega > .sub-menu li a {
        padding: 8px 12px; border-radius: 3px;
        /* min-height inherits from the generic sub-menu rule above */
    }
}

/* v2.2.1: only mouse-capable devices get hover-to-open. Touch devices use
   the JS click handler (.fl-dd-open) to avoid the "sticky hover" bug where a
   single tap opens the dropdown AND fires click simultaneously. */
@media (hover: hover) and (min-width: 960px) {
    .fl-catnav-menu > li:hover > .sub-menu {
        opacity: 1; visibility: visible; transform: translateY(0);
    }
}


/* =====================================================================
   NAV DRAWER (mobile)
   ===================================================================== */
.fl-nav-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 2000; opacity: 0; transition: opacity 0.22s;
    -webkit-tap-highlight-color: transparent;
}
.fl-nav-overlay.active { display: block; opacity: 1; }

.fl-nav-drawer {
    position: fixed; top: 0; left: 0;
    width: 300px; max-width: 85vw;
    height: 100%; height: 100dvh;
    background: var(--fl-paper);
    z-index: 2001;
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain;
    box-shadow: 4px 0 30px rgba(0,0,0,0.2);
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
    padding-top: var(--fl-safe-top);
    padding-bottom: var(--fl-safe-bottom);
    padding-left: var(--fl-safe-left);
}
.fl-nav-drawer.active { transform: translateX(0); }
.fl-nav-drawer.dragging { transition: none !important; }

.fl-nav-drawer-header {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 60px;
    padding: 12px 18px;
    background: var(--fl-primary);
    color: var(--fl-on-primary);
}
.fl-nav-drawer-header .fl-site-name { color: var(--fl-on-primary); font-size: 18px; }
.fl-nav-close {
    background: none; border: none; cursor: pointer;
    /* v2.3.0 mobile-first: 44px meets WCAG 2.5.5 AAA. */
    width: 44px; height: 44px; border-radius: 4px;
    /* v2.3.1: on-primary so close-X keeps AAA on light (#FFF on #085A1D) and dark (#0F0F0F on #4ADE80). */
    color: var(--fl-on-primary);
    display: flex; align-items: center; justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
}
.fl-nav-close:hover { background: rgba(0,0,0,0.18); }
.fl-nav-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.fl-nav-drawer .menu { list-style: none; padding: 8px 0; }
.fl-nav-drawer .menu li { border-bottom: 1px solid var(--fl-border); }
.fl-nav-drawer .menu li:last-child { border-bottom: none; }
.fl-nav-drawer .menu li a {
    display: flex; align-items: center;
    padding: 0 20px;
    color: var(--fl-ink); font-size: 15px; font-weight: 600;
    min-height: 48px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
    -webkit-tap-highlight-color: transparent;
}
.fl-nav-drawer .menu li a:hover, .fl-nav-drawer .menu li.current-menu-item a {
    background: var(--fl-primary-light);
    color: var(--fl-primary);
}
.fl-nav-drawer .menu .sub-menu { list-style: none; padding-left: 16px; background: var(--fl-paper-alt); }
.fl-nav-drawer .menu .sub-menu li { border-bottom: none; }
.fl-nav-drawer .menu .sub-menu li a { font-size: 13px; font-weight: 500; color: var(--fl-text); min-height: 44px; text-transform: none; letter-spacing: normal; }


/* =====================================================================
   BREADCRUMBS — pills-ish, ink text
   ===================================================================== */
.fl-breadcrumbs {
    width: 100%; max-width: var(--fl-max-w);
    margin: 16px auto 0;
    padding: 0 14px;
    padding-left: max(14px, var(--fl-safe-left));
    padding-right: max(14px, var(--fl-safe-right));
    font-size: 12px;
    color: var(--fl-text-muted);
    text-transform: uppercase; letter-spacing: 0.8px;
    overflow: hidden;
    white-space: nowrap; text-overflow: ellipsis;
    font-weight: 600;
}
.fl-breadcrumbs a { color: var(--fl-text-muted); }
.fl-breadcrumbs a:hover { color: var(--fl-primary); }
.fl-bc-sep { margin: 0 7px; opacity: 0.5; }
.fl-bc-current { color: var(--fl-text); }

@media (min-width: 600px) { .fl-breadcrumbs { padding: 0 20px; margin-top: 20px; } }
@media (min-width: 960px) { .fl-breadcrumbs { padding: 0 28px; } }


/* =====================================================================
   HERO — image-forward with title overlay
   ===================================================================== */
.fl-hero {
    width: 100%; max-width: var(--fl-max-w);
    margin: 16px auto 0;
    padding: 0 14px;
}
.fl-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

/* Lead — large overlay card */
.fl-hero-lead {
    position: relative;
    display: block;
    aspect-ratio: 16/10;
    overflow: hidden;
    border-radius: var(--fl-radius-md);
    color: #FFF;
    background: var(--fl-ink);
    text-decoration: none;
}
.fl-hero-lead-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.fl-hero-lead:hover .fl-hero-lead-img { transform: scale(1.04); }
.fl-hero-lead-gradient {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.85) 100%);
    pointer-events: none;
}
.fl-hero-lead-body {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 16px;
    z-index: 2;
}
.fl-hero-kicker {
    display: inline-block;
    background: var(--fl-accent-strong);
    color: var(--fl-on-accent-strong);
    font-size: 10.5px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.9px;
    padding: 4px 10px;
    border-radius: 2px;
    margin-bottom: 10px;
    text-decoration: none;
}
.fl-hero-lead-title {
    font-size: 22px; font-weight: 800;       /* v2.3.0 — more mobile weight */
    line-height: 1.18;
    color: #FFF;
    letter-spacing: -0.015em;
    margin-bottom: 8px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.fl-hero-meta {
    display: flex; align-items: center; gap: 8px;
    font-size: 11.5px;
    color: rgba(255,255,255,0.9);
    text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600;
}
.fl-hero-meta .fl-meta-dot { opacity: 0.5; }

/* Side cards — compact with thumb + text */
.fl-hero-side {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
.fl-hero-side-card {
    display: grid; grid-template-columns: 112px 1fr;
    gap: 12px;
    background: var(--fl-card-bg);
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius-sm);
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.fl-hero-side-card:hover {
    transform: translateY(-1px);
    border-color: var(--fl-border-strong);
    box-shadow: var(--fl-shadow-md);
}
.fl-hero-side-thumb {
    position: relative;
    width: 112px; height: 100%;
    aspect-ratio: 1/1;
    background: var(--fl-paper-alt);
    overflow: hidden;
    flex-shrink: 0;
}
.fl-hero-side-thumb img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.fl-hero-side-body { padding: 10px 12px 10px 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.fl-hero-side-kicker {
    font-size: 10px; font-weight: 800;
    color: var(--fl-accent-strong);
    text-transform: uppercase; letter-spacing: 0.9px;
    margin-bottom: 5px;
}
.fl-hero-side-title {
    font-size: 14.5px; font-weight: 700;
    line-height: 1.25;
    color: var(--fl-ink);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
    letter-spacing: -0.005em;
}
.fl-hero-side-card:hover .fl-hero-side-title { color: var(--fl-primary); }

@media (min-width: 600px) {
    .fl-hero { margin-top: 20px; padding: 0 20px; }
    .fl-hero-lead-title { font-size: 24px; }
    .fl-hero-lead-body { padding: 20px; }
}
@media (min-width: 768px) {
    .fl-hero-lead-title { font-size: 30px; }
    .fl-hero-lead-body { padding: 24px; }
    .fl-hero-grid { gap: 18px; }
}
@media (min-width: 960px) {
    .fl-hero { padding: 0 28px; margin-top: 24px; }
    .fl-hero-grid { grid-template-columns: 1.65fr 1fr; gap: 20px; }
    .fl-hero-lead { aspect-ratio: 16/11; }
    .fl-hero-lead-title { font-size: 28px; }
    .fl-hero-side { gap: 14px; }
    .fl-hero-side-card { grid-template-columns: 130px 1fr; }
    .fl-hero-side-thumb { width: 130px; }
}
@media (min-width: 1200px) {
    .fl-hero-lead-title { font-size: 34px; }
    .fl-hero-lead-body { padding: 28px; }
}


/* =====================================================================
   SECTION HEADS — bold, coloured rule
   ===================================================================== */
.fl-section-head {
    width: 100%; max-width: var(--fl-max-w);
    margin: 36px auto 16px;
    padding: 0 14px;
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 10px;
    border-bottom: 2px solid var(--fl-ink);
    padding-bottom: 8px;
}
.fl-section-title {
    font-size: 18px; font-weight: 900;
    color: var(--fl-ink);
    letter-spacing: -0.01em;
    position: relative;
    padding-left: 12px;
    line-height: 1.2;
}
.fl-section-title::before {
    content: '';
    position: absolute; left: 0; top: 3px; bottom: 3px;
    width: 4px;
    /* v2.3.6: accent-strong for visual consistency with all other red
       accents on the post page. */
    background: var(--fl-accent-strong);
    border-radius: 2px;
}
.fl-section-more {
    font-size: 12px; font-weight: 700;
    color: var(--fl-primary);
    text-transform: uppercase; letter-spacing: 0.7px;
    text-decoration: none;
    transition: color 0.15s;
    white-space: nowrap;
}
.fl-section-more:hover { color: var(--fl-primary-dark); text-decoration: underline; }

@media (min-width: 600px) {
    .fl-section-head { padding: 0 20px; padding-bottom: 10px; margin-top: 48px; margin-bottom: 20px; }
    .fl-section-title { font-size: 20px; padding-left: 14px; }
}
@media (min-width: 960px) {
    .fl-section-head { padding: 0 28px; padding-bottom: 10px; margin-top: 56px; }
    .fl-section-title { font-size: 22px; }
}


/* =====================================================================
   CATEGORY RAIL — image-overlay cards, 3-up desktop
   ===================================================================== */
.fl-rail {
    width: 100%; max-width: var(--fl-max-w);
    margin: 0 auto;
    padding: 0 14px;
}
.fl-rail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}
.fl-rail-card {
    display: block;
    background: var(--fl-card-bg);
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius-md);
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.fl-rail-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--fl-shadow-md);
    border-color: var(--fl-border-strong);
}
.fl-rail-thumb {
    position: relative;
    width: 100%; aspect-ratio: 16/10;
    overflow: hidden;
    background: var(--fl-paper-alt);
    /* v2.2.1: kill anonymous inline boxes from PHP whitespace before <img> */
    line-height: 0; font-size: 0;
}
.fl-rail-thumb img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}
.fl-rail-card:hover .fl-rail-thumb img { transform: scale(1.04); }
.fl-rail-thumb .fl-no-thumb {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--fl-paper-alt); color: var(--fl-text-muted);
}
.fl-rail-kicker {
    position: absolute; top: 10px; left: 10px;
    background: var(--fl-accent-strong);
    color: var(--fl-on-accent-strong);
    font-size: 10px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.8px;
    padding: 3px 8px;
    border-radius: 2px;
    z-index: 2;
}
.fl-rail-body { padding: 14px 16px 16px; }
.fl-rail-card-title {
    font-size: 16px; font-weight: 700;
    line-height: 1.28;
    color: var(--fl-ink);
    letter-spacing: -0.005em;
    margin-bottom: 8px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
}
.fl-rail-card:hover .fl-rail-card-title { color: var(--fl-primary); }
.fl-rail-meta {
    font-size: 11.5px; color: var(--fl-text-muted);
    text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600;
}

@media (min-width: 480px) { .fl-rail-grid { grid-template-columns: 1fr 1fr; gap: 20px; } }
@media (min-width: 768px) { .fl-rail { padding: 0 20px; } .fl-rail-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
@media (min-width: 960px) { .fl-rail { padding: 0 28px; } .fl-rail-grid { gap: 24px; } .fl-rail-card-title { font-size: 17px; } }


/* =====================================================================
   LATEST FEED — dense 3-column magazine grid
   ===================================================================== */
.fl-feed {
    width: 100%; max-width: var(--fl-max-w);
    margin: 0 auto;
    padding: 0 14px 32px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}
.fl-feed-card {
    display: block;
    position: relative;
    background: var(--fl-card-bg);
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius-md);
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.fl-feed-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--fl-shadow-md);
    border-color: var(--fl-border-strong);
}
.fl-feed-card .fl-card-thumb {
    position: relative;
    display: block;
    width: 100%; aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--fl-paper-alt);
    /* v2.2.1: kill anonymous inline boxes from PHP whitespace before <img> */
    line-height: 0; font-size: 0;
}
.fl-feed-card .fl-card-thumb img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}
.fl-feed-card:hover .fl-card-thumb img { transform: scale(1.04); }
.fl-feed-card .fl-no-thumb {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: var(--fl-paper-alt); color: var(--fl-text-muted);
}
.fl-feed-card .fl-no-thumb svg { width: 32px; height: 32px; }
.fl-feed-card .fl-card-kicker {
    position: absolute; top: 10px; left: 10px;
    background: var(--fl-accent-strong);
    color: var(--fl-on-accent-strong);
    font-size: 10px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.8px;
    padding: 3px 8px;
    border-radius: 2px;
    z-index: 2;
    text-decoration: none;
}
.fl-feed-card .fl-card-body { padding: 14px 16px 14px; }
.fl-feed-card .fl-card-title {
    font-size: 16px; font-weight: 700;
    line-height: 1.3;
    color: var(--fl-ink);
    letter-spacing: -0.005em;
    margin-bottom: 8px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
}
.fl-feed-card .fl-card-title a { color: inherit; text-decoration: none; }
.fl-feed-card:hover .fl-card-title { color: var(--fl-primary); }
.fl-feed-card .fl-card-excerpt {
    font-size: 13.5px; color: var(--fl-text-light);
    line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 10px;
}
.fl-feed-card .fl-card-meta {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; color: var(--fl-text-muted);
    text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600;
    padding-top: 8px;
    border-top: 1px solid var(--fl-border);
}
.fl-feed-card .fl-card-heart {
    background: none; border: none; cursor: pointer;
    color: var(--fl-heart);
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 3px;
    transition: color 0.18s, transform 0.18s;
    -webkit-tap-highlight-color: transparent;
    margin-left: auto;
    padding: 0;
}
.fl-feed-card .fl-card-heart:hover { transform: scale(1.15); }
.fl-feed-card .fl-card-heart.liked { color: var(--fl-heart-active); }
.fl-feed-card .fl-card-heart svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; pointer-events: none; }
.fl-feed-card .fl-card-heart.liked svg { fill: currentColor; }

@media (min-width: 600px) {
    .fl-feed { padding: 0 20px 40px; gap: 22px; grid-template-columns: 1fr 1fr; }
}
@media (min-width: 768px) {
    .fl-feed-card .fl-card-title { font-size: 17px; }
}
@media (min-width: 960px) {
    .fl-feed { padding: 0 28px 48px; gap: 24px; grid-template-columns: repeat(3, 1fr); }
    .fl-feed-card .fl-card-title { font-size: 16.5px; }
}
@media (min-width: 1200px) {
    .fl-feed { padding: 0 28px 56px; }
}


/* =====================================================================
   IN-FEED AD SLOT
   ===================================================================== */
.fl-ad-card {
    grid-column: 1 / -1;
    padding: 20px;
    background: var(--fl-paper-alt);
    border: 1px dashed var(--fl-border-strong);
    border-radius: var(--fl-radius-md);
    text-align: center;
    color: var(--fl-text-light);
}
.fl-ad-card::before {
    content: "Advertisement";
    display: block;
    font-size: 10px; font-weight: 700;
    color: var(--fl-text-muted);
    letter-spacing: 1.2px; text-transform: uppercase;
    margin-bottom: 10px;
}


/* =====================================================================
   PAGINATION — button style
   ===================================================================== */
.fl-pagination {
    max-width: var(--fl-max-w);
    margin: 0 auto;
    padding: 24px 14px 48px;
    display: flex; justify-content: center; align-items: center;
    gap: 6px; flex-wrap: wrap;
}
.fl-pagination a, .fl-pagination span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 42px; height: 42px; padding: 0 12px;
    font-size: 14px; font-weight: 700;
    color: var(--fl-text);
    background: var(--fl-paper-alt);
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius-sm);
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.fl-pagination a:hover {
    background: var(--fl-primary);
    color: var(--fl-on-primary);
    border-color: var(--fl-primary);
}
.fl-pagination .current {
    background: var(--fl-primary);
    color: var(--fl-on-primary);
    border-color: var(--fl-primary);
}
.fl-pagination .dots {
    background: transparent;
    border: none;
    color: var(--fl-text-muted);
}

@media (min-width: 600px) { .fl-pagination { padding: 32px 20px 56px; } }
@media (min-width: 960px) { .fl-pagination { padding: 40px 28px 72px; gap: 8px; } }


/* =====================================================================
   SINGLE POST LAYOUT
   ===================================================================== */
.fl-single-layout {
    width: 100%;
    max-width: var(--fl-max-w);
    margin: 0 auto;
}
.fl-single-main { width: 100%; }
.fl-post-sidebar { display: none; }

@media (min-width: 960px) {
    .fl-single-layout {
        display: grid;
        /* v2.3.7: sidebar widened 300 → 320px to accommodate the richer
           default blocks (category tiles want ≥150px/col). `has(aside)`
           lets the layout collapse to single-column when the sidebar is
           toggled off via settings — falls back gracefully on older
           browsers since the aside simply wouldn't render. */
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 40px;
        padding: 0 28px;
        align-items: start;
    }
    .fl-single-layout:not(:has(.fl-post-sidebar)) {
        grid-template-columns: minmax(0, 1fr);
    }
    .fl-post-sidebar {
        display: block;
        /* v2.3.9: no internal scroll (was max-height 100vh + overflow auto —
           caused a tiny secondary scrollbar when default blocks were long).
           The sidebar now grows to whatever height its content needs. Sticky
           still "follows" the reader until the bottom of the sidebar hits
           the viewport, then sits anchored so the reader can keep scrolling
           the article while the sidebar stays visible. */
        position: sticky;
        top: calc(var(--fl-header-h) + 16px);
        padding-top: 20px;
        align-self: start;
    }
}
@media (min-width: 1200px) {
    .fl-single-layout { gap: 48px; grid-template-columns: minmax(0, 1fr) 340px; }
    .fl-single-layout:not(:has(.fl-post-sidebar)) { grid-template-columns: minmax(0, 1fr); }
}

.fl-sb-widget { margin-bottom: 28px; }
.fl-sb-title {
    font-size: 12px; font-weight: 800;
    color: var(--fl-ink);
    margin-bottom: 12px;
    padding-left: 10px;
    text-transform: uppercase; letter-spacing: 1px;
    border-left: 3px solid var(--fl-accent-strong);
    line-height: 1.3;
}
.fl-sb-widget ul { list-style: none; padding: 0; margin: 0; }
.fl-sb-widget ul li { border-bottom: 1px solid var(--fl-border); }
.fl-sb-widget ul li:last-child { border-bottom: none; }
.fl-sb-widget ul li a {
    display: block; padding: 10px 0;
    font-size: 13.5px; font-weight: 600;
    color: var(--fl-text); line-height: 1.35;
    transition: color 0.15s;
    text-decoration: none;
}
.fl-sb-widget ul li a:hover { color: var(--fl-primary); }
.fl-sb-widget p { font-size: 13.5px; line-height: 1.6; color: var(--fl-text-light); }
.fl-sb-widget .search-form { display: flex; gap: 0; border: 1px solid var(--fl-border); border-radius: var(--fl-radius-sm); overflow: hidden; }
.fl-sb-widget .search-field {
    flex: 1; border: none;
    padding: 10px 12px; font-size: 16px;      /* v2.3.0 — mobile no-zoom */
    background: transparent; color: var(--fl-text);
    -webkit-appearance: none; appearance: none;
    font-family: var(--fl-font);
}
.fl-sb-widget .search-field:focus { outline: none; }
.fl-sb-widget .search-submit {
    background: var(--fl-primary); color: var(--fl-on-primary); border: none;
    padding: 0 14px; font-size: 12px; font-weight: 700;
    cursor: pointer; text-transform: uppercase; letter-spacing: 0.4px;
}


/* =====================================================================
   SIDEBAR v2.3.7 — premium smart-default blocks
   Shared card shell + per-block styles. Each block opts into the shell
   via `.fl-sb-block`. Title uses the same `.fl-sb-title` as widgets for
   visual consistency with any user-supplied widgets.
   ===================================================================== */

.fl-sb-block {
    margin-bottom: 28px;
    background: var(--fl-card-bg);
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius-md);
    padding: 18px 16px 16px;
    transition: border-color 0.2s;
}
.fl-sb-block:last-child { margin-bottom: 0; }
.fl-sb-block .fl-sb-title { margin-bottom: 14px; }

/* ── About the Author block ── */
.fl-sb-author-card {
    display: flex; gap: 12px; align-items: flex-start;
}
.fl-sb-author-avatar-link { flex-shrink: 0; display: block; line-height: 0; }
.fl-sb-author-avatar {
    width: 56px; height: 56px; border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--fl-card-bg);
    box-shadow: 0 0 0 1px var(--fl-border);
}
.fl-sb-author-body { flex: 1; min-width: 0; }
.fl-sb-author-name {
    display: block;
    font-size: 14.5px; font-weight: 800;
    color: var(--fl-ink);
    letter-spacing: -0.01em; line-height: 1.2;
    margin-bottom: 4px;
    text-decoration: none;
}
.fl-sb-author-name:hover { color: var(--fl-primary); }
.fl-sb-author-bio {
    font-size: 12.5px; line-height: 1.45;
    color: var(--fl-text-light);
    margin: 0 0 6px;
}
.fl-sb-author-meta {
    font-size: 10.5px; font-weight: 700;
    color: var(--fl-text-muted);
    text-transform: uppercase; letter-spacing: 0.8px;
}

/* ── Trending block (editorial numbered list — visual rhyme with related posts) ── */
.fl-sb-trending-list { list-style: none; padding: 0; margin: 0; }
.fl-sb-trending-item {
    border-top: 1px solid var(--fl-border);
}
.fl-sb-trending-item:first-child { border-top: none; }
.fl-sb-trending-link {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 10px;
    align-items: center;
    padding: 12px 0;
    text-decoration: none;
    transition: transform 0.15s;
}
.fl-sb-trending-link:hover { transform: translateX(2px); }
.fl-sb-trending-num {
    font-size: 22px; font-weight: 900;
    font-variant-numeric: tabular-nums;
    font-style: italic;
    letter-spacing: -0.03em;
    color: var(--fl-accent-strong);
    line-height: 1;
    text-align: center;
    align-self: center;
}
.fl-sb-trending-body { min-width: 0; }
.fl-sb-trending-cat {
    display: block;
    font-size: 9.5px; font-weight: 800;
    color: var(--fl-accent-strong);
    text-transform: uppercase; letter-spacing: 0.9px;
    margin-bottom: 3px;
    line-height: 1;
}
.fl-sb-trending-title-text {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13.5px; font-weight: 700;
    line-height: 1.3;
    color: var(--fl-ink);
    letter-spacing: -0.005em;
    transition: color 0.15s;
}
.fl-sb-trending-link:hover .fl-sb-trending-title-text { color: var(--fl-primary); }

/* ── Category tiles ── */
.fl-sb-cat-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.fl-sb-cat-tile {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    background: var(--fl-paper-alt);
    border: 1px solid transparent;
    border-radius: var(--fl-radius-sm);
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
    min-height: 44px;                     /* v2.3.7: AAA touch target */
}
.fl-sb-cat-tile:hover {
    border-color: var(--fl-primary);
    background: var(--fl-primary-light);
    transform: translateY(-1px);
}
.fl-sb-cat-tile-name {
    font-size: 12.5px; font-weight: 700;
    color: var(--fl-ink);
    letter-spacing: -0.005em;
    line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fl-sb-cat-tile:hover .fl-sb-cat-tile-name { color: var(--fl-primary); }
.fl-sb-cat-tile-count {
    flex-shrink: 0;
    font-size: 10.5px; font-weight: 800;
    color: var(--fl-text-muted);
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--fl-card-bg);
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
}

/* ── Social follow row ── */
.fl-sb-social-row {
    display: flex; gap: 6px; flex-wrap: wrap;
}
.fl-sb-social-link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--fl-paper-alt);
    border: 1px solid var(--fl-border);
    color: var(--fl-text-light);
    transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.15s;
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
}
.fl-sb-social-link:hover {
    background: var(--fl-primary);
    border-color: var(--fl-primary);
    color: var(--fl-on-primary);
    transform: translateY(-1px);
}
.fl-sb-social-link svg { width: 16px; height: 16px; fill: currentColor; }

/* ── Sidebar ad slot ── */
.fl-sb-ad-block {
    padding: 14px;
    background: var(--fl-paper-alt);
    border: 1px dashed var(--fl-border-strong);
    text-align: center;
}
.fl-sb-ad-label {
    font-size: 9.5px; font-weight: 700;
    color: var(--fl-text-muted);
    text-transform: uppercase; letter-spacing: 1.2px;
    margin-bottom: 8px;
}
.fl-sb-ad-slot img,
.fl-sb-ad-slot ins { max-width: 100%; height: auto; }

/* ── Newsletter block — gradient CTA, compact ── */
.fl-sb-newsletter-block {
    padding: 0;
    border: none;
    background: transparent;
    overflow: hidden;
}
.fl-sb-newsletter-inner {
    padding: 20px 18px 18px;
    background: linear-gradient(135deg, var(--fl-cta-bg) 0%, var(--fl-cta-bg-dark) 100%);
    color: var(--fl-on-cta);
    border-radius: var(--fl-radius-md);
    position: relative;
    overflow: hidden;
}
.fl-sb-newsletter-inner::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 120px; height: 120px;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
    pointer-events: none;
}
.fl-sb-newsletter-inner > * { position: relative; z-index: 1; }
.fl-sb-newsletter-title {
    font-size: 16px; font-weight: 900;
    color: var(--fl-on-cta);
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 0 0 6px;
}
.fl-sb-newsletter-desc {
    font-size: 12.5px; line-height: 1.45;
    color: rgba(255,255,255,0.88);
    margin: 0 0 12px;
}
.fl-sb-newsletter-form {
    display: flex; flex-direction: column; gap: 6px;
}
.fl-sb-newsletter-form input[type="email"] {
    width: 100%;
    border: 1px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.12);
    border-radius: var(--fl-radius-sm);
    padding: 10px 12px;
    font-size: 16px;                            /* no iOS zoom */
    color: var(--fl-on-cta);
    font-family: var(--fl-font);
    -webkit-appearance: none; appearance: none;
    transition: border-color 0.15s, background 0.15s;
    min-height: 44px;                           /* AAA touch target */
}
.fl-sb-newsletter-form input::placeholder { color: rgba(255,255,255,0.65); }
.fl-sb-newsletter-form input:focus {
    border-color: #FFF;
    background: rgba(255,255,255,0.2);
    outline: none; box-shadow: none;
}
.fl-sb-newsletter-btn {
    background: var(--fl-accent-strong);
    color: var(--fl-on-accent-strong);
    border: none;
    border-radius: var(--fl-radius-sm);
    padding: 0 14px;
    font-size: 12px; font-weight: 800;
    letter-spacing: 0.5px; text-transform: uppercase;
    font-family: var(--fl-font);
    cursor: pointer;
    min-height: 44px;                           /* AAA touch target */
    transition: background 0.18s;
}
.fl-sb-newsletter-btn:hover { background: var(--fl-accent-dark); }


/* =====================================================================
   TABLE OF CONTENTS
   ===================================================================== */
.fl-toc {
    background: var(--fl-paper-alt);
    border: 1px solid var(--fl-border);
    border-left: 4px solid var(--fl-primary);
    padding: 16px 18px;
    margin: 1.6em 0;
    border-radius: var(--fl-radius-sm);
}
.fl-toc-head {
    width: 100%;
    background: none; border: none; padding: 0;
    display: flex; align-items: center; justify-content: space-between;
    cursor: pointer;
    color: var(--fl-ink);
    font-family: inherit;
}
.fl-toc-title {
    font-size: 12px; font-weight: 800;
    color: var(--fl-ink);
    text-transform: uppercase; letter-spacing: 1.2px;
    display: flex; align-items: center; gap: 8px;
}
.fl-toc-title svg { width: 14px; height: 14px; color: var(--fl-primary); }
.fl-toc-chev {
    width: 18px; height: 18px; color: var(--fl-text-muted);
    transition: transform 0.25s;
    fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
}
.fl-toc.fl-toc-open .fl-toc-chev { transform: rotate(180deg); }
.fl-toc-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, margin-top 0.25s; }
.fl-toc.fl-toc-open .fl-toc-body { max-height: 2000px; margin-top: 12px; }
.fl-toc-list, .fl-toc-sub { list-style: none; padding: 0; margin: 0; }
.fl-toc-list > li { padding: 3px 0; }
.fl-toc-list a, .fl-toc-sub a {
    display: block; padding: 3px 0;
    color: var(--fl-text); font-size: 13.5px; line-height: 1.4;
    transition: color 0.15s;
    text-decoration: none;
}
.fl-toc-list > li > a { font-weight: 600; color: var(--fl-ink); }
.fl-toc-list a:hover, .fl-toc-sub a:hover { color: var(--fl-primary); }
.fl-toc-sub { padding-left: 14px; margin-top: 2px; }
.fl-toc-sub li { padding: 2px 0; }
.fl-toc-sub a { font-size: 12.5px; color: var(--fl-text-light); }


/* =====================================================================
   SINGLE POST — bold headline, sans body
   ===================================================================== */
.fl-single {
    width: 100%; max-width: var(--fl-content-max-w);
    margin: 0 auto;
    padding: 24px 14px 0;
}
.fl-single-header { margin-bottom: 20px; }
.fl-single-kicker {
    display: inline-block;
    background: var(--fl-accent-strong);
    color: var(--fl-on-accent-strong);
    font-size: 11px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 1px;
    padding: 4px 10px;
    border-radius: 2px;
    margin-bottom: 16px;
    text-decoration: none;
}
.fl-single-kicker a { color: inherit; text-decoration: none; }
.fl-single-kicker a:hover { color: var(--fl-on-accent-strong); opacity: 0.85; }
.fl-single-title {
    font-size: 28px; font-weight: 900;
    line-height: 1.18;
    color: var(--fl-ink);
    letter-spacing: -0.02em;
    margin-bottom: 14px;
    overflow-wrap: break-word;
}
.fl-single-dek {
    font-size: 17px; line-height: 1.5;
    color: var(--fl-text-light);
    font-weight: 400;
    margin-bottom: 18px;
    max-width: 600px;
}
.fl-single-meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    font-size: 12.5px; color: var(--fl-text-muted);
    padding: 14px 0;
    border-top: 1px solid var(--fl-border);
    border-bottom: 1px solid var(--fl-border);
    font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.4px;
}
.fl-single-meta a { color: var(--fl-ink); font-weight: 700; text-decoration: none; }
.fl-single-meta a:hover { color: var(--fl-primary); }
/* v2.3.5: was color: var(--fl-border-strong) which gave 1.85:1 in dark mode.
   text-muted is 5.33:1 in light and 10.03:1 AAA in dark. Separator reads
   as part of the meta line's own voice. */
.fl-meta-sep { color: var(--fl-text-muted); font-weight: 400; }
.fl-meta-item { display: inline-flex; align-items: center; gap: 5px; }
.fl-meta-item svg { width: 13px; height: 13px; color: var(--fl-text-muted); flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.fl-updated {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10.5px; font-weight: 800;
    background: var(--fl-primary); color: var(--fl-on-primary);
    padding: 3px 9px; border-radius: 2px;
    text-transform: uppercase; letter-spacing: 0.7px;
}
.fl-updated svg { width: 11px; height: 11px; fill: currentColor; stroke: none; }

/* Featured inline image + lightbox */
.fl-feat-inline { margin: 1.5em 0; text-align: center; }
.fl-feat-inline a {
    display: inline-block; position: relative;
    overflow: hidden;
    cursor: zoom-in; line-height: 0;
    border-radius: var(--fl-radius-sm);
}
.fl-feat-img { display: block; width: auto; max-width: 100%; max-height: 480px; height: auto; border-radius: var(--fl-radius-sm); }
.fl-feat-zoom {
    position: absolute; bottom: 10px; right: 10px;
    width: 32px; height: 32px;
    background: rgba(0,0,0,0.6); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #FFF; opacity: 0; transition: opacity 0.2s; pointer-events: none;
}
.fl-feat-zoom svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.fl-feat-inline a:hover .fl-feat-zoom { opacity: 1; }

.fl-lightbox { display: none; position: fixed; inset: 0; z-index: 9999; align-items: center; justify-content: center; }
.fl-lightbox.active { display: flex; }
.fl-lightbox-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.92); cursor: pointer; }
.fl-lightbox-body { position: relative; z-index: 1; max-width: 94vw; max-height: 92vh; display: flex; align-items: center; justify-content: center; }
.fl-lightbox-img { max-width: 94vw; max-height: 88vh; width: auto; height: auto; border-radius: 4px; box-shadow: 0 10px 50px rgba(0,0,0,0.5); object-fit: contain; animation: flFadeIn 0.2s ease; }
.fl-lightbox-x {
    position: absolute; top: -16px; right: -16px;
    width: 44px; height: 44px;
    background: rgba(255,255,255,0.15); border: none; border-radius: 50%;
    color: #FFF; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
}
.fl-lightbox-x:hover { background: rgba(255,255,255,0.3); }
.fl-lightbox-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; pointer-events: none; }
@keyframes flFadeIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }

/* Prose */
.fl-single-content {
    font-size: 16.5px; line-height: 1.75;
    color: var(--fl-text);
    overflow-wrap: break-word;
}
.fl-single-content p { margin-bottom: 1.15em; }
.fl-single-content > *:first-child { margin-top: 0; }
.fl-single-content h2, .fl-single-content h3, .fl-single-content h4 {
    color: var(--fl-ink);
    font-weight: 800;
    letter-spacing: -0.015em;
    scroll-margin-top: calc(var(--fl-header-h) + 20px);
    position: relative;
}
.fl-single-content h2 { font-size: 22px; margin: 1.7em 0 0.5em; line-height: 1.25; padding-left: 12px; border-left: 4px solid var(--fl-primary); }
.fl-single-content h3 { font-size: 18.5px; margin: 1.4em 0 0.4em; line-height: 1.3; font-weight: 700; }
.fl-single-content h4 { font-size: 16px; margin: 1.2em 0 0.3em; font-weight: 700; }
.fl-single-content ul, .fl-single-content ol { margin: 0 0 1.2em 1.4em; }
.fl-single-content li { margin-bottom: 0.45em; }
.fl-single-content blockquote {
    font-size: 18.5px; line-height: 1.45;
    color: var(--fl-ink);
    font-weight: 600;
    margin: 1.6em 0;
    padding: 16px 20px;
    background: var(--fl-paper-alt);
    border-left: 4px solid var(--fl-accent-strong);
    border-radius: var(--fl-radius-sm);
    font-style: normal;
}
.fl-single-content img { border-radius: var(--fl-radius-sm); margin: 1.2em 0; }
.fl-single-content pre { background: #0F0F0F; color: #F5F5F5; padding: 16px; border-radius: var(--fl-radius-sm); overflow-x: auto; font-size: 13.5px; line-height: 1.5; margin-bottom: 1.2em; font-family: var(--fl-font-mono); }
.fl-single-content code { font-family: var(--fl-font-mono); font-size: 0.88em; background: var(--fl-paper-alt); padding: 1px 5px; border-radius: 3px; }
.fl-single-content pre code { background: transparent; padding: 0; }
.fl-single-content table { width: 100%; border-collapse: collapse; margin: 1.3em 0; display: block; overflow-x: auto; font-size: 14px; }
.fl-single-content th, .fl-single-content td { padding: 10px 14px; border: 1px solid var(--fl-border); text-align: left; white-space: nowrap; }
.fl-single-content th { background: var(--fl-primary-light); font-weight: 700; color: var(--fl-primary-dark); }

.fl-anchor-link {
    position: absolute; left: -22px; top: 50%; transform: translateY(-50%);
    opacity: 0; color: var(--fl-text-muted); font-weight: 400;
    text-decoration: none; transition: opacity 0.15s, color 0.15s;
    font-size: 0.8em;
}
.fl-single-content h2:hover .fl-anchor-link, .fl-single-content h3:hover .fl-anchor-link { opacity: 0.6; }
.fl-anchor-link:hover { opacity: 1 !important; color: var(--fl-primary); }

.fl-single-tags {
    margin-top: 32px; padding-top: 20px;
    border-top: 1px solid var(--fl-border);
    display: flex; flex-wrap: wrap; gap: 6px;
}
.fl-single-tags a {
    display: inline-flex; align-items: center;
    padding: 5px 12px;
    background: var(--fl-paper-alt);
    border: 1px solid var(--fl-border);
    border-radius: 3px;
    font-size: 12.5px; font-weight: 600;
    color: var(--fl-text);
    text-transform: lowercase;
    transition: all 0.15s;
    text-decoration: none;
}
/* v2.3.5: was color: var(--fl-accent) → 6.48:1 in dark mode (AA only).
   accent-strong hits 9.45:1 AAA on paper-alt in dark, 10:1 AAA on white in light. */
.fl-single-tags a::before { content: '#'; color: var(--fl-accent-strong); margin-right: 2px; font-weight: 800; }
.fl-single-tags a:hover {
    background: var(--fl-primary);
    border-color: var(--fl-primary);
    /* v2.3.1: on-primary — AAA in both modes. */
    color: var(--fl-on-primary);
}
.fl-single-tags a:hover::before { color: var(--fl-on-primary); }

@media (min-width: 600px) {
    .fl-single { padding: 32px 20px 0; }
    .fl-single-title { font-size: 34px; }
    .fl-single-content { font-size: 17px; }
}
@media (min-width: 768px) {
    .fl-single-title { font-size: 38px; }
    .fl-single-dek { font-size: 18px; }
    .fl-single-content h2 { font-size: 24px; }
    .fl-single-content h3 { font-size: 20px; }
    .fl-single-content blockquote { font-size: 20px; padding: 20px 24px; }
}
@media (min-width: 960px) {
    .fl-single { padding: 40px 0 0; max-width: none; }
    .fl-single-title { font-size: 42px; letter-spacing: -0.025em; }
    .fl-single-content { font-size: 17.5px; line-height: 1.78; }
    .fl-single-content h2 { font-size: 26px; }
    .fl-single-content h3 { font-size: 21px; }
}


/* =====================================================================
   STICKY SHARE RAIL (desktop 1200px+)
   ===================================================================== */
.fl-share-rail { display: none; }
@media (min-width: 1200px) {
    .fl-share-rail {
        display: flex; flex-direction: column; gap: 8px;
        position: fixed;
        left: max(20px, calc((100vw - 1200px) / 2 - 60px));
        top: calc(var(--fl-header-h) + 120px);
        z-index: 10;
    }
    .fl-share-rail a, .fl-share-rail button {
        width: 44px; height: 44px;
        display: flex; align-items: center; justify-content: center;
        background: var(--fl-card-bg);
        border: 1px solid var(--fl-border);
        border-radius: 50%;
        color: var(--fl-text-light);
        cursor: pointer;
        transition: all 0.18s;
        text-decoration: none;
    }
    .fl-share-rail a:hover, .fl-share-rail button:hover {
        background: var(--fl-primary); color: var(--fl-on-primary);
        border-color: var(--fl-primary);
        transform: translateY(-1px);
    }
    .fl-share-rail svg { width: 16px; height: 16px; fill: currentColor; }
    .fl-share-rail button.copied { background: var(--fl-accent-strong); color: var(--fl-on-accent-strong); border-color: var(--fl-accent-strong); }

    /* v2.2.1: JS sets .fl-share-rail-hidden once the article has scrolled
       past — related / comments / footer territory doesn't need sharing. */
    .fl-share-rail {
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    }
    .fl-share-rail.fl-share-rail-hidden {
        opacity: 0;
        visibility: hidden;
        transform: translateX(-12px);
        pointer-events: none;
    }
}


/* =====================================================================
   INLINE SHARE (bottom of post)
   ===================================================================== */
.fl-share {
    max-width: var(--fl-content-max-w); margin: 32px auto 0;
    padding: 20px;
    background: var(--fl-paper-alt);
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius-md);
    display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
}
.fl-share-label {
    font-size: 11.5px; font-weight: 800; color: var(--fl-ink);
    text-transform: uppercase; letter-spacing: 1px;
}
.fl-share-links { display: flex; gap: 6px; flex-wrap: wrap; }
.fl-share-link {
    display: inline-flex; align-items: center; justify-content: center;
    /* v2.3.0 mobile-first: 44px meets WCAG 2.5.5 AAA. */
    width: 44px; height: 44px; border-radius: 50%;
    /* v2.3.6: was hardcoded #FFF — gave 1.47:1 icon contrast in dark mode
       (invisible on pure white circles). card-bg auto-flips: #FFFFFF in
       light, #171717 in dark → 12.17:1 AAA in both modes. */
    background: var(--fl-card-bg); border: 1px solid var(--fl-border);
    color: var(--fl-text-light);
    transition: all 0.18s;
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
}
.fl-share-link:hover {
    background: var(--fl-primary); color: var(--fl-on-primary);
    border-color: var(--fl-primary);
    transform: translateY(-1px);
}
.fl-share-link svg { width: 16px; height: 16px; fill: currentColor; }
.fl-share-link.copied { background: var(--fl-accent-strong); color: var(--fl-on-accent-strong); border-color: var(--fl-accent-strong); }


/* =====================================================================
   AUTHOR BOX
   ===================================================================== */
.fl-author-box {
    max-width: var(--fl-content-max-w); margin: 32px auto 0;
    padding: 22px;
    background: var(--fl-paper-alt);
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius-md);
    display: flex; gap: 16px; align-items: flex-start;
}
.fl-author-img { flex-shrink: 0; }
.fl-author-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 3px solid #FFF; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.fl-author-info { flex: 1; min-width: 0; }
.fl-author-label {
    font-size: 10.5px; font-weight: 800; color: var(--fl-accent-strong);
    text-transform: uppercase; letter-spacing: 1.2px;
    margin-bottom: 4px;
}
.fl-author-name {
    font-size: 18px; font-weight: 800;
    margin-bottom: 6px; letter-spacing: -0.01em;
    line-height: 1.2;
}
.fl-author-name a { color: var(--fl-ink); text-decoration: none; }
.fl-author-name a:hover { color: var(--fl-primary); }
.fl-author-bio { font-size: 14px; color: var(--fl-text-light); line-height: 1.55; margin-bottom: 6px; }
.fl-author-posts { font-size: 11.5px; color: var(--fl-text-muted); text-transform: uppercase; letter-spacing: 0.6px; font-weight: 600; }


/* =====================================================================
   PREV / NEXT
   ===================================================================== */
.fl-post-nav {
    max-width: var(--fl-content-max-w); margin: 32px auto 0;
    display: grid; grid-template-columns: 1fr;
    gap: 12px;
}
.fl-post-nav-link {
    display: block;
    padding: 16px 18px;
    background: var(--fl-card-bg);
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius-md);
    text-decoration: none;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.fl-post-nav-link:hover { border-color: var(--fl-primary); transform: translateY(-1px); box-shadow: var(--fl-shadow-sm); }
.fl-post-nav-empty { display: none; }
.fl-post-nav-dir {
    display: block; font-size: 10.5px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 1px;
    color: var(--fl-accent-strong); margin-bottom: 5px;
}
.fl-post-nav-title {
    display: block; font-size: 14.5px; font-weight: 700;
    color: var(--fl-ink); line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.15s;
}
.fl-post-nav-link:hover .fl-post-nav-title { color: var(--fl-primary); }
.fl-post-nav-next { text-align: right; }

@media (min-width: 600px) {
    .fl-post-nav { grid-template-columns: 1fr 1fr; gap: 14px; }
    .fl-post-nav-empty { display: block; }
}


/* =====================================================================
   RELATED POSTS — v2.2.1 editorial numbered-list rework
   Distinctly different from the card grid used everywhere else:
   big italic red numerals, compact thumb on the left of each row,
   title + meta stack on the right, hairline dividers between rows,
   centred section label with a rule running through it.
   ===================================================================== */
.fl-related {
    max-width: var(--fl-content-max-w);
    margin: 56px auto 0;
    padding: 0 14px;
}
.fl-related-label {
    font-size: 12.5px; font-weight: 800;
    color: var(--fl-ink);
    text-transform: uppercase; letter-spacing: 2.5px;
    margin: 0 0 20px;
    padding: 0;
    border: none;
    position: relative;
    text-align: center;
}
.fl-related-label span {
    background: var(--fl-paper);
    padding: 0 16px;
    position: relative;
    z-index: 1;
}
.fl-related-label::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0; right: 0;
    height: 1px;
    background: var(--fl-border);
    z-index: 0;
}

.fl-related-list { list-style: none; padding: 0; margin: 0; }
.fl-related-row {
    border-bottom: 1px solid var(--fl-border);
}
.fl-related-row:last-child { border-bottom: none; }
.fl-related-link {
    display: grid;
    grid-template-columns: 32px 84px 1fr;
    gap: 12px;
    align-items: center;
    padding: 14px 8px;
    color: inherit;
    text-decoration: none;
    transition: background 0.15s, padding 0.15s;
    border-radius: var(--fl-radius-sm);
}
.fl-related-link:hover { background: var(--fl-paper-alt); }
.fl-related-num {
    font-size: 26px; font-weight: 900;
    /* v2.3.5: accent-strong AAA, 10:1 / 9.45:1 light/dark. */
    color: var(--fl-accent-strong);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    font-style: italic;
    letter-spacing: -0.03em;
    text-align: center;
    align-self: center;
}
.fl-related-thumb {
    position: relative;
    display: block;
    width: 84px; height: 60px;
    overflow: hidden;
    background: var(--fl-paper-alt);
    border-radius: var(--fl-radius-sm);
    line-height: 0; font-size: 0;
}
.fl-related-thumb img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}
.fl-related-link:hover .fl-related-thumb img { transform: scale(1.06); }
.fl-related-thumb .fl-no-thumb {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--fl-paper-alt); color: var(--fl-text-muted);
}
.fl-related-thumb .fl-no-thumb svg { width: 20px; height: 20px; }
.fl-related-content { min-width: 0; }
.fl-related-cat {
    font-size: 10px; font-weight: 800;
    /* v2.3.5: accent-strong gives 9.45:1 AAA on card-bg in dark mode. Was
       --fl-accent (6.48:1, AA only). */
    color: var(--fl-accent-strong);
    letter-spacing: 1px; text-transform: uppercase;
    display: block;
    margin-bottom: 4px;
}
.fl-related-h3 {
    font-size: 14.5px; font-weight: 700;
    line-height: 1.3;
    color: var(--fl-ink);
    margin: 0 0 4px;
    letter-spacing: -0.005em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.15s;
}
.fl-related-link:hover .fl-related-h3 { color: var(--fl-primary); }
.fl-related-date {
    display: block;
    font-size: 11px; color: var(--fl-text-muted);
    text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600;
}

@media (min-width: 480px) {
    .fl-related-link { grid-template-columns: 40px 100px 1fr; gap: 16px; }
    .fl-related-thumb { width: 100px; height: 70px; }
    .fl-related-num { font-size: 30px; }
    .fl-related-h3 { font-size: 15.5px; }
}
@media (min-width: 768px) {
    .fl-related { padding: 0 20px; margin-top: 64px; }
    .fl-related-link { grid-template-columns: 56px 130px 1fr; gap: 22px; padding: 18px 12px; }
    .fl-related-thumb { width: 130px; height: 88px; }
    .fl-related-num { font-size: 38px; }
    .fl-related-h3 { font-size: 17px; -webkit-line-clamp: 2; }
    .fl-related-label { font-size: 13.5px; margin-bottom: 26px; }
}
@media (min-width: 960px) {
    .fl-related { padding: 0 28px; }
}


/* =====================================================================
   NEWSLETTER
   ===================================================================== */
.fl-newsletter {
    max-width: var(--fl-max-w); margin: 64px auto;
    padding: 36px 24px;
    /* v2.3.1: uses a dedicated --fl-cta-bg / --fl-on-cta pair so the card
       stays dark green with white text in BOTH modes. Putting white on the
       bright-green dark-mode primary gave 1.74:1 (FAIL). */
    background: linear-gradient(135deg, var(--fl-cta-bg) 0%, var(--fl-cta-bg-dark) 100%);
    color: var(--fl-on-cta);
    border-radius: var(--fl-radius-md);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.fl-newsletter::before {
    content: '';
    position: absolute; top: -80px; right: -80px;
    width: 220px; height: 220px;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
}
.fl-newsletter::after {
    content: '';
    position: absolute; bottom: -100px; left: -100px;
    width: 240px; height: 240px;
    background: rgba(255,255,255,0.05);
    border-radius: 50%;
}
.fl-newsletter > * { position: relative; z-index: 1; }
.fl-newsletter-kicker {
    font-size: 11px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 1.5px;
    margin-bottom: 10px;
    opacity: 0.9;
}
.fl-newsletter h3 {
    font-size: 24px; font-weight: 900; color: var(--fl-on-cta);
    margin-bottom: 8px; letter-spacing: -0.015em;
    line-height: 1.2;
}
.fl-newsletter p {
    font-size: 14.5px; color: rgba(255,255,255,0.9);
    margin-bottom: 18px; max-width: 440px; margin-left: auto; margin-right: auto;
    line-height: 1.5;
}
.fl-newsletter-form {
    display: flex; gap: 8px; max-width: 440px; margin: 0 auto;
    flex-wrap: wrap; justify-content: center;
}
.fl-newsletter-form input[type="email"] {
    flex: 1 1 220px;
    border: 2px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.15);
    border-radius: var(--fl-radius-sm);
    padding: 12px 14px; font-size: 16px;     /* v2.3.0 — mobile no-zoom */
    color: var(--fl-on-cta);
    font-family: var(--fl-font);
    -webkit-appearance: none; appearance: none;
    transition: border-color 0.15s, background 0.15s;
}
.fl-newsletter-form input::placeholder { color: rgba(255,255,255,0.7); }
.fl-newsletter-form input:focus { border-color: #FFF; background: rgba(255,255,255,0.25); outline: none; box-shadow: none; }
.fl-newsletter-form button {
    /* v2.3.0: AAA contrast pair regardless of theme. */
    background: var(--fl-accent-strong); color: var(--fl-on-accent-strong); border: none;
    border-radius: var(--fl-radius-sm);
    padding: 12px 22px; font-size: 13px; font-weight: 800;
    letter-spacing: 0.5px; text-transform: uppercase;
    font-family: var(--fl-font);
    cursor: pointer;
    transition: background 0.18s, transform 0.15s;
}
.fl-newsletter-form button:hover { background: var(--fl-accent-dark); transform: translateY(-1px); }

@media (min-width: 768px) { .fl-newsletter { padding: 44px 32px; } .fl-newsletter h3 { font-size: 28px; } .fl-newsletter p { font-size: 15.5px; } }
/* v2.3.1: dark .fl-newsletter background removed — --fl-cta-bg + --fl-cta-bg-dark
   tokens now shift for dark mode automatically, cleaner than hardcoded override. */
html[data-fl-theme="dark"] .fl-newsletter-form input[type="email"] {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.2);
}
html[data-fl-theme="dark"] .fl-newsletter-form input:focus {
    border-color: var(--fl-primary);
    background: rgba(255,255,255,0.1);
}



/* =====================================================================
   BACK TO TOP
   ===================================================================== */
.fl-back-top {
    position: fixed;
    bottom: calc(20px + var(--fl-safe-bottom));
    right: 18px;
    /* v2.3.0: already 44px AAA touch target. Switch to accent-strong pair so the
       icon keeps AAA contrast in both light and dark modes. */
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--fl-accent-strong); color: var(--fl-on-accent-strong);
    border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s, background 0.2s;
    z-index: 900;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.fl-back-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.fl-back-top:hover { background: var(--fl-accent-dark); }
.fl-back-top svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; pointer-events: none; }

@media (min-width: 960px) { .fl-back-top { bottom: 32px; right: 32px; width: 48px; height: 48px; } .fl-back-top svg { width: 22px; height: 22px; } }


/* =====================================================================
   COMMENTS
   ===================================================================== */
.fl-comments {
    max-width: var(--fl-content-max-w); margin: 40px auto 0;
    padding: 32px 14px 0;
    border-top: 3px solid var(--fl-border);
}
.fl-comments svg, .fl-comment-form-wrap svg {
    max-width: 24px; max-height: 24px;
    flex-shrink: 0; display: inline-block; vertical-align: middle;
}
.fl-comments-header { margin-bottom: 26px; }
.fl-comments-title {
    font-size: 20px; font-weight: 900;
    display: flex; align-items: center; gap: 8px;
    color: var(--fl-ink);
    letter-spacing: -0.015em;
    padding-left: 12px;
    border-left: 4px solid var(--fl-accent-strong);
    line-height: 1.3;
}
.fl-comments-icon { display: none; }
.fl-comments-count { color: var(--fl-accent-strong); font-weight: 900; }
.fl-comment-list { list-style: none; padding: 0; margin: 0; }
.fl-comment { margin-bottom: 20px; }
.fl-comment-body {
    padding: 16px 18px;
    background: var(--fl-card-bg);
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius-sm);
}
.fl-comment-author-post > .fl-comment-body { border-left: 4px solid var(--fl-primary); background: var(--fl-primary-light); }
.fl-comment-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.fl-comment-avatar { flex-shrink: 0; }
.fl-avatar-img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--fl-card-bg); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.fl-comment-meta { flex: 1; min-width: 0; }
.fl-comment-author-name {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 700;
    flex-wrap: wrap; color: var(--fl-ink);
}
.fl-comment-author-name a { color: var(--fl-ink); text-decoration: none; }
.fl-comment-author-name a:hover { color: var(--fl-primary); }
.fl-comment-badge {
    display: inline-flex; align-items: center;
    font-size: 9.5px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.8px;
    background: var(--fl-primary); color: var(--fl-on-primary);
    padding: 2px 7px; border-radius: 2px; line-height: 1.4;
}
.fl-comment-date {
    display: block; font-size: 11.5px; color: var(--fl-text-muted);
    margin-top: 2px; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600;
}
.fl-comment-pending {
    display: flex; align-items: center; gap: 6px;
    background: #FEF3C7; color: #92400E;
    border: 1px solid #FDE68A;
    border-radius: var(--fl-radius-sm); padding: 8px 12px;
    font-size: 12.5px; font-weight: 600; margin-bottom: 10px;
}
html[data-fl-theme="dark"] .fl-comment-pending { background: #422006; color: #FCD34D; border-color: #713F12; }
.fl-comment-pending svg { width: 14px; height: 14px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; }
.fl-comment-text { font-size: 14.5px; line-height: 1.65; color: var(--fl-text); overflow-wrap: break-word; }
.fl-comment-text p { margin-bottom: 0.6em; }
.fl-comment-text p:last-child { margin-bottom: 0; }
.fl-comment-actions { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.fl-reply-link a, .fl-edit-link a {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11.5px; font-weight: 700; color: var(--fl-primary);
    padding: 6px 0; min-height: 32px;
    text-transform: uppercase; letter-spacing: 0.6px;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s;
    text-decoration: none;
}
.fl-reply-link a:hover, .fl-edit-link a:hover { color: var(--fl-primary-dark); text-decoration: underline; }
.fl-reply-link svg, .fl-edit-link svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }
.fl-comment .children { list-style: none; padding: 0; margin: 16px 0 0 20px; border-left: 2px solid var(--fl-border); padding-left: 16px; }
.fl-comments-closed {
    display: flex; align-items: center; gap: 8px;
    padding: 14px 16px; font-size: 13.5px; color: var(--fl-text-muted);
    background: var(--fl-paper-alt); border-radius: var(--fl-radius-sm);
    margin-top: 20px;
}
.fl-comments-closed svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; }
.fl-comments-closed p { margin: 0; }
.fl-comments-nav { margin: 20px 0; text-align: center; }
.fl-comments-nav a {
    font-size: 12px; font-weight: 700; color: var(--fl-primary);
    padding: 8px 16px; background: var(--fl-paper-alt); border: 1px solid var(--fl-border); border-radius: var(--fl-radius-sm);
    text-transform: uppercase; letter-spacing: 0.6px;
    transition: background 0.15s, color 0.15s; min-height: 44px;
    display: inline-flex; align-items: center;
    text-decoration: none;
}
.fl-comments-nav a:hover { background: var(--fl-primary); color: var(--fl-on-primary); }

.fl-comment-form-wrap { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--fl-border); }
.fl-comment-form-wrap .comment-reply-title {
    font-size: 20px; font-weight: 900;
    margin-bottom: 6px;
    display: flex; align-items: center; gap: 8px;
    color: var(--fl-ink); letter-spacing: -0.015em;
    padding-left: 12px;
    border-left: 4px solid var(--fl-primary);
    line-height: 1.3;
}
.fl-comment-form-wrap .comment-reply-title svg { display: none; }
.fl-comment-form-wrap .comment-reply-title small { font-size: 12px; font-weight: 500; }
.fl-comment-form-wrap .comment-reply-title small a { color: var(--fl-accent-strong); font-weight: 700; margin-left: 4px; }
.fl-form-note { font-size: 12.5px; color: var(--fl-text-muted); margin-bottom: 18px; line-height: 1.5; padding-left: 16px; }
.fl-field { margin-bottom: 14px; }
.fl-field label {
    display: block; font-size: 12px; font-weight: 700;
    color: var(--fl-ink); margin-bottom: 5px;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.fl-field input[type="text"], .fl-field input[type="email"], .fl-field input[type="url"], .fl-field textarea {
    width: 100%;
    border: 1px solid var(--fl-border-strong);
    border-radius: var(--fl-radius-sm);
    padding: 11px 13px;
    font-size: 16px;                          /* v2.3.0 — no iOS zoom on focus */
    font-family: var(--fl-font);
    background: var(--fl-paper); color: var(--fl-text);
    transition: border-color 0.15s, box-shadow 0.15s;
    -webkit-appearance: none; appearance: none;
}
.fl-field input:focus, .fl-field textarea:focus { border-color: var(--fl-primary); outline: none; box-shadow: 0 0 0 3px rgba(8,90,29,0.1); }
.fl-field textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.fl-field input::placeholder, .fl-field textarea::placeholder { color: var(--fl-text-muted); }
.fl-form-row { display: grid; grid-template-columns: 1fr; gap: 0; }
.fl-field-cookies { margin-bottom: 16px; }
.fl-field-cookies label {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12.5px; font-weight: 500; color: var(--fl-text-light);
    cursor: pointer; min-height: 44px; text-transform: none; letter-spacing: normal;
}
.fl-field-cookies input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--fl-primary); cursor: pointer; flex-shrink: 0; }
.fl-form-submit { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fl-submit-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--fl-primary); color: var(--fl-on-primary); border: none;
    border-radius: var(--fl-radius-sm);
    padding: 0 24px;
    font-size: 13px; font-weight: 800;
    font-family: var(--fl-font);
    letter-spacing: 0.6px; text-transform: uppercase;
    cursor: pointer;
    min-height: 46px; width: 100%;
    justify-content: center;
    transition: background 0.18s, transform 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.fl-submit-btn:hover { background: var(--fl-primary-hover); transform: translateY(-1px); }
.fl-submit-btn svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; }
.fl-comment-form-wrap .logged-in-as { font-size: 12.5px; color: var(--fl-text-muted); margin-bottom: 12px; padding-left: 16px; }
.fl-comment-form-wrap .logged-in-as a { color: var(--fl-primary); font-weight: 600; }

@media (min-width: 480px) {
    .fl-avatar-img { width: 44px; height: 44px; }
    .fl-form-row { grid-template-columns: 1fr 1fr; gap: 12px; }
    .fl-submit-btn { width: auto; }
    .fl-comment .children { margin-left: 28px; padding-left: 18px; }
}
@media (min-width: 768px) {
    .fl-comments { padding: 40px 20px 0; }
    .fl-comments-title { font-size: 22px; }
    .fl-comment-text { font-size: 15px; }
    .fl-comment .children { margin-left: 36px; padding-left: 22px; }
}
@media (min-width: 960px) { .fl-comments { padding: 48px 0 0; } }


/* =====================================================================
   PAGE
   ===================================================================== */
.fl-page { width: 100%; max-width: var(--fl-content-max-w); margin: 24px auto 0; padding: 0 14px; }
.fl-page-title {
    font-size: 28px; font-weight: 900;
    margin-bottom: 16px;
    color: var(--fl-ink);
    letter-spacing: -0.02em;
    line-height: 1.2;
    padding-left: 12px;
    border-left: 4px solid var(--fl-accent-strong);
}
.fl-page-content {
    font-size: 16.5px; line-height: 1.7;
}
.fl-page-content p { margin-bottom: 1.15em; }

@media (min-width: 600px) { .fl-page { padding: 0 20px; margin-top: 32px; } .fl-page-title { font-size: 34px; } .fl-page-content { font-size: 17px; } }
@media (min-width: 960px) { .fl-page { padding: 0 28px; } .fl-page-title { font-size: 40px; } }


/* =====================================================================
   ARCHIVE HEADER — v2.2.1 rework
   Drops the awkward gradient box (fades to white by 50%, leaves the right
   half looking empty) and switches to a simple left-accent bar + hairline
   bottom divider. Aligned with the feed content below.
   ===================================================================== */
.fl-archive-header {
    max-width: var(--fl-max-w);
    margin: 20px auto 0;
    padding: 0 14px 20px;
    border-bottom: 1px solid var(--fl-border);
}
.fl-archive-inner {
    padding-left: 14px;
    border-left: 4px solid var(--fl-primary);
    padding-top: 4px;
    padding-bottom: 4px;
}
.fl-archive-kicker {
    font-size: 11px; font-weight: 800;
    color: var(--fl-accent-strong);
    text-transform: uppercase; letter-spacing: 1.5px;
    margin-bottom: 8px;
}
.fl-archive-title {
    font-size: 26px; font-weight: 900;
    color: var(--fl-ink);
    letter-spacing: -0.02em;
    line-height: 1.15;
    overflow-wrap: break-word;
}
.fl-archive-desc {
    font-size: 14.5px; color: var(--fl-text-light);
    line-height: 1.5;
    margin-top: 10px;
    max-width: 640px;
}
.fl-archive-count {
    font-size: 11.5px; color: var(--fl-text-muted);
    margin-top: 10px;
    text-transform: uppercase; letter-spacing: 0.6px; font-weight: 700;
}

@media (min-width: 600px) {
    .fl-archive-header { padding: 0 20px 24px; margin-top: 24px; }
    .fl-archive-title { font-size: 30px; }
}
@media (min-width: 960px) {
    .fl-archive-header { padding: 0 28px 28px; margin-top: 32px; }
    .fl-archive-title { font-size: 36px; }
}


/* =====================================================================
   404
   ===================================================================== */
.fl-404 { max-width: 720px; margin: 32px auto 0; padding: 32px 14px 64px; text-align: center; }
.fl-404 h1 {
    font-size: 88px; color: var(--fl-accent-strong);
    font-weight: 900; letter-spacing: -0.04em;
    line-height: 1; margin-bottom: 12px;
}
.fl-404 .fl-404-sub {
    font-size: 22px; font-weight: 800;
    color: var(--fl-ink); margin-bottom: 8px;
    letter-spacing: -0.01em;
}
.fl-404 p {
    font-size: 15px; color: var(--fl-text-light);
    line-height: 1.5;
    margin-bottom: 22px; max-width: 480px; margin-left: auto; margin-right: auto;
}
.fl-404 .fl-search-form {
    display: flex; max-width: 400px; margin: 0 auto 28px;
    border: 2px solid var(--fl-primary); border-radius: 999px; overflow: hidden;
    background: var(--fl-paper);
}
.fl-404 .fl-search-form input[type="search"] {
    flex: 1; border: none; background: transparent;
    padding: 11px 16px; font-size: 16px;     /* v2.3.0 — mobile no-zoom */
    color: var(--fl-ink); font-family: var(--fl-font);
    outline: none;
    -webkit-appearance: none; appearance: none;
}
.fl-404 .fl-search-form input::placeholder { color: var(--fl-text-muted); }
.fl-404 .fl-search-form button {
    background: var(--fl-primary); color: var(--fl-on-primary); border: none;
    padding: 0 22px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.5px;
    font-family: var(--fl-font);
}
.fl-404 .fl-search-form button svg { width: 14px; height: 14px; fill: currentColor; margin-right: 6px; }

.fl-404-section { margin-top: 40px; text-align: left; }
.fl-404-section h2 {
    font-size: 16px; font-weight: 900;
    color: var(--fl-ink);
    margin-bottom: 16px;
    padding-left: 12px;
    border-left: 4px solid var(--fl-accent-strong);
    letter-spacing: -0.01em;
}
.fl-404-posts { list-style: none; padding: 0; margin: 0 0 28px; display: grid; grid-template-columns: 1fr; gap: 14px; }
.fl-404-card {
    display: flex; gap: 12px;
    background: var(--fl-card-bg);
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius-sm);
    padding: 10px;
    text-decoration: none;
    transition: border-color 0.15s, transform 0.15s;
}
.fl-404-card:hover { border-color: var(--fl-primary); transform: translateY(-1px); }
.fl-404-card-thumb { width: 72px; height: 54px; flex-shrink: 0; overflow: hidden; background: var(--fl-paper-alt); border-radius: 3px; }
.fl-404-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.fl-404-card-title {
    font-size: 13.5px; font-weight: 700; line-height: 1.3;
    color: var(--fl-ink);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    align-self: center;
    transition: color 0.15s;
}
.fl-404-card:hover .fl-404-card-title { color: var(--fl-primary); }

.fl-404-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.fl-404-cat {
    display: inline-flex; align-items: center;
    padding: 6px 14px;
    background: var(--fl-primary-light);
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12.5px; font-weight: 700;
    color: var(--fl-primary);
    transition: all 0.18s;
    text-decoration: none;
    text-transform: uppercase; letter-spacing: 0.4px;
}
.fl-404-cat:hover { background: var(--fl-primary); color: var(--fl-on-primary); }

@media (min-width: 480px) { .fl-404-posts { grid-template-columns: 1fr 1fr; } }
@media (min-width: 768px) { .fl-404 { padding: 48px 20px 80px; } .fl-404 h1 { font-size: 112px; } }


/* =====================================================================
   FOOTER — dark, 4-column utility
   ===================================================================== */
.fl-footer {
    margin-top: 64px;
    background: var(--fl-footer-bg);
    color: var(--fl-footer-text);
    padding: 48px 14px 0;
    padding-left: max(14px, var(--fl-safe-left));
    padding-right: max(14px, var(--fl-safe-right));
    font-size: 13.5px;
}
.fl-footer-inner {
    max-width: var(--fl-max-w); margin: 0 auto;
    display: grid; grid-template-columns: 1fr; gap: 32px;
    padding-bottom: 32px;
}
.fl-footer-brand { max-width: 380px; }
.fl-footer-logo {
    font-size: 24px; font-weight: 900;
    color: #FFF;
    letter-spacing: -0.02em;
    margin-bottom: 10px;
    display: inline-block;
    text-decoration: none;
}
.fl-footer-logo:hover { color: var(--fl-primary); }
.fl-footer-tagline {
    font-size: 13.5px; line-height: 1.5;
    color: var(--fl-footer-text);
    margin-bottom: 16px;
}
.fl-footer-social { display: flex; gap: 8px; margin-top: 4px; }
.fl-footer-social a {
    /* v2.3.0 mobile-first: 44px meets WCAG 2.5.5 AAA. */
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.08);
    color: var(--fl-footer-text);
    border-radius: var(--fl-radius-sm);
    transition: background 0.15s, color 0.15s, transform 0.15s;
    text-decoration: none;
}
.fl-footer-social a:hover { background: var(--fl-primary); color: var(--fl-on-primary); transform: translateY(-1px); }
.fl-footer-social svg { width: 16px; height: 16px; fill: currentColor; }

.fl-footer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.fl-footer-col h3 {
    font-size: 11.5px; font-weight: 800; color: #FFF;
    text-transform: uppercase; letter-spacing: 1.2px;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--fl-footer-border);
}
.fl-footer-col ul, .fl-footer-col .menu { list-style: none; padding: 0; margin: 0; }
.fl-footer-col li { margin-bottom: 6px; }
.fl-footer-col a, .fl-footer-links a {
    color: var(--fl-footer-text); font-size: 13px;
    line-height: 1.45;
    transition: color 0.15s;
    text-decoration: none;
}
.fl-footer-col a:hover, .fl-footer-links a:hover { color: #FFF; }

.fl-footer-newsletter { }
.fl-footer-newsletter p { font-size: 12.5px; color: var(--fl-footer-text-dim); margin-bottom: 10px; line-height: 1.5; }
.fl-footer-newsletter form {
    display: flex; flex-wrap: wrap; gap: 6px;
}
.fl-footer-newsletter input[type="email"] {
    flex: 1 1 100%;
    border: 1px solid var(--fl-footer-border);
    background: rgba(255,255,255,0.06);
    padding: 10px 12px;
    font-size: 16px;                         /* v2.3.0 — mobile no-zoom */ color: #FFF;
    font-family: var(--fl-font);
    border-radius: var(--fl-radius-sm);
    -webkit-appearance: none; appearance: none;
    transition: border-color 0.15s, background 0.15s;
}
.fl-footer-newsletter input::placeholder { color: var(--fl-footer-text-dim); }
.fl-footer-newsletter input:focus { border-color: var(--fl-primary); outline: none; background: rgba(255,255,255,0.1); }
.fl-footer-newsletter button {
    background: var(--fl-primary); color: var(--fl-on-primary); border: none;
    padding: 10px 18px; font-size: 12px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.5px;
    border-radius: var(--fl-radius-sm);
    font-family: var(--fl-font);
    cursor: pointer;
    transition: background 0.15s;
    flex: 1 1 100%;
}
.fl-footer-newsletter button:hover { background: var(--fl-primary-hover); }

.fl-footer-bottom {
    background: var(--fl-footer-bg-alt);
    padding: 16px 14px;
    padding-left: max(14px, var(--fl-safe-left));
    padding-right: max(14px, var(--fl-safe-right));
    padding-bottom: calc(16px + var(--fl-safe-bottom));
}
.fl-footer-bottom-inner {
    max-width: var(--fl-max-w); margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
    font-size: 12px; color: var(--fl-footer-text-dim);
}
.fl-footer-bottom .fl-footer-nav ul {
    list-style: none; display: flex; flex-wrap: wrap;
    gap: 0 20px;
}
.fl-footer-bottom .fl-footer-nav a {
    color: var(--fl-footer-text-dim); font-size: 12px;
    text-decoration: none;
    text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600;
    transition: color 0.15s;
}
.fl-footer-bottom .fl-footer-nav a:hover { color: #FFF; }

@media (min-width: 600px) {
    .fl-footer { padding: 56px 20px 0; }
    .fl-footer-newsletter form { flex-wrap: nowrap; }
    .fl-footer-newsletter input[type="email"] { flex: 1 1 auto; }
    .fl-footer-newsletter button { flex: 0 0 auto; }
}
@media (min-width: 768px) {
    .fl-footer-inner { grid-template-columns: 1.5fr 2.5fr; gap: 48px; }
    .fl-footer-cols { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}
@media (min-width: 960px) {
    .fl-footer { padding: 64px 28px 0; }
    .fl-footer-inner { gap: 64px; padding-bottom: 40px; }
    .fl-footer-cols { gap: 40px; }
}


/* =====================================================================
   NO RESULTS
   ===================================================================== */
.fl-no-results {
    width: 100%; max-width: 640px;
    margin: 40px auto;
    padding: 36px 16px; text-align: center;
}
.fl-no-results h2 {
    font-size: 22px; font-weight: 900;
    color: var(--fl-ink); margin-bottom: 10px;
    letter-spacing: -0.015em;
}
.fl-no-results p { color: var(--fl-text-light); font-size: 14.5px; line-height: 1.55; margin-bottom: 14px; }


/* =====================================================================
   WP BLOCKS / ALIGNMENT
   ===================================================================== */
.alignleft { float: left; margin: 0 1.2em 1em 0; max-width: 50%; }
.alignright { float: right; margin: 0 0 1em 1.2em; max-width: 50%; }
.aligncenter { display: block; margin: 0 auto 1.2em; }
.wp-caption { max-width: 100%; margin-bottom: 1em; }
.wp-caption-text { font-size: 13px; color: var(--fl-text-muted); text-align: center; padding: 6px 0; font-style: italic; }
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 1.2em; }
@media (min-width: 600px) { .gallery { grid-template-columns: repeat(3, 1fr); gap: 8px; } }
.gallery-item { margin: 0; }
.wp-block-image { margin-bottom: 1.2em; }
.has-text-align-center { text-align: center; }
.has-text-align-right { text-align: right; }
.wp-block-embed, iframe, embed, object, video { max-width: 100%; }
.wp-block-embed { margin-bottom: 1.2em; }

.alignwide { margin-left: auto; margin-right: auto; max-width: min(100%, 1000px); }
.alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; }



html[data-fl-theme="dark"] .fl-field input[type="text"],
html[data-fl-theme="dark"] .fl-field input[type="email"],
html[data-fl-theme="dark"] .fl-field input[type="url"],
html[data-fl-theme="dark"] .fl-field textarea,
html[data-fl-theme="dark"] .fl-sb-widget .search-field {
    background: var(--fl-paper-alt);
    border-color: var(--fl-border-strong);
    color: var(--fl-ink);
}
html[data-fl-theme="dark"] .fl-404 .fl-search-form { background: var(--fl-paper-alt); border-color: var(--fl-primary); }
html[data-fl-theme="dark"] .fl-404 .fl-search-form input[type="search"] { color: var(--fl-ink); }


/* =====================================================================
   REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}