/**
 * Helix Ultimate (InfiNet patches) — template-level custom.css
 *
 * This file ships in the Helix package and applies to every client site.
 * Only GENERIC template-level fixes belong here. Site-specific rules
 * (page/section IDs, brand colors, client content IDs, etc.) go into
 *   Template Options -> Custom Code -> Custom CSS
 * so they're editable via the Joomla admin GUI and stay per-site.
 *
 * History: earlier iterations of this file accumulated site-specific
 * rules from a single client (InfiNet) and then got shipped to every
 * other client via the package zip — cross-contamination. 2.4.3 moves
 * that content to the per-site DB param (params.custom_css).
 */

/* ── Font Awesome 6 webfont fix ─────────────────────────────────────────────
 * Joomla ships the Font Awesome 6.7.x CSS (media/vendor/fontawesome-free) but
 * NOT its @font-face files, so Helix's template.css supplies @font-face from
 * the template's own /fonts — which are an OLDER FA build. CSS-vs-font version
 * mismatch = the requested glyph codepoints don't exist in the old font, so
 * icons render as empty boxes (tofu). Re-point the FA6 families at Joomla's
 * matching 6.7.x webfonts (same version as the CSS). custom.css loads last, so
 * these win over template.css. FA5 families are left alone so older SPPB/
 * content icons keep their original font. ── */
@font-face {
    font-family: "Font Awesome 6 Free";
    font-style: normal; font-weight: 900; font-display: block;
    src: url(/media/vendor/fontawesome-free/webfonts/fa-solid-900.woff2) format("woff2"),
         url(/media/vendor/fontawesome-free/webfonts/fa-solid-900.ttf) format("truetype");
}
@font-face {
    font-family: "Font Awesome 6 Free";
    font-style: normal; font-weight: 400; font-display: block;
    src: url(/media/vendor/fontawesome-free/webfonts/fa-regular-400.woff2) format("woff2"),
         url(/media/vendor/fontawesome-free/webfonts/fa-regular-400.ttf) format("truetype");
}
@font-face {
    font-family: "Font Awesome 6 Brands";
    font-style: normal; font-weight: 400; font-display: block;
    src: url(/media/vendor/fontawesome-free/webfonts/fa-brands-400.woff2) format("woff2"),
         url(/media/vendor/fontawesome-free/webfonts/fa-brands-400.ttf) format("truetype");
}

/* This FA build only sets font-weight on the legacy `.fa` class, so style-
 * prefixed icons (.fas/.far/.fab) inherit the surrounding text weight and match
 * the WRONG @font-face — a solid-only glyph then falls back to the regular font
 * and renders as an empty/▢ box. Restore the canonical FA weights + brands
 * family so every solid/regular/brand icon resolves. ── */
.fa-solid, .fas { font-weight: 900; }
.fa-regular, .far { font-weight: 400; }
.fa-brands, .fab { font-family: "Font Awesome 6 Brands"; font-weight: 400; }

/* ── Sticky logo swap: show logo-sticky variant only when header is sticky (≥md) ── */
#sp-header .logo .logo-sticky {
    display: none !important;
}
@media (min-width: 768px) {
    #sp-header.header-sticky .logo-sticky {
        display: inline-block !important;
    }
    #sp-header.header-sticky .logo-default {
        display: none !important;
    }
}

/* Header uses standard Bootstrap container (breakpoint-capped widths
   540/720/960/1140/1320). Navigation sits inside the bounded container
   so it's not flush to the viewport's right edge — there's natural
   margin from the screen on both sides. */

/* ── Body must not clip top of page (common Joomla + SPPB overflow trap) ──
 *    Use `clip` not `hidden` for the horizontal axis: both stop sideways scroll,
 *    but `overflow-x: hidden` makes the browser treat the page as a scroll
 *    container, which BREAKS `position: sticky` descendants (e.g. the blog
 *    sidebar). `clip` prevents that side effect. ── */
html, body {
    overflow-x: clip !important;
    overflow-y: visible !important;
}
html body.site {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
html body .body-wrapper,
html body .body-innerwrapper {
    overflow: visible !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ── Top bar: consistent padding + overflow handling.
   Color comes from $topbar_text_color via theme.scss.
   Note: NO `display` rule here. Header layouts opt in/out of the topbar via
   markup (e.g. 11-MultiRowContact emits #sp-header-topbar with d-none); a
   `display: block !important` here would override that and double-render. ── */
/* (Removed in v2.4.59 — opinionated `html body #sp-top-bar { padding: 20px 0
 * !important; ... }` cascade-hack reset block. The padding override
 * silently broke the new topbar_padding_y template param: admin saved
 * 8px in the GUI but the rendered output stayed 20px because this rule's
 * `html body` specificity + !important won. The other resets in the
 * block (margin: 0, min-height: 0, transform: none, etc.) were "InfiNet
 * had problems and forced these to defaults" — opinionated, not generic.
 * Auto-preserve mechanism in script.php captures any non-baseline rules
 * from the OLD on-disk custom.css into per-site params.custom_css, so
 * sites that depended on these get them carried forward; sites that
 * didn't will simply use the param-driven values. Net: param works. */

/* ── Responsive iframes (maps, YouTube, etc.) don't overflow content ── */
iframe {
    max-width: 100% !important;
}

/* (Removed in v2.4.39 — site-specific InfiNet brand wash) The InfiNet
 * blue/orange page-background gradient that lived here was painting the
 * content area of every client site with InfiNet brand colors. The
 * shipped package no longer ships this. Sites that genuinely want a
 * tinted page wash should set it via their own params.custom_css
 * (Template Options -> Custom Code -> Custom CSS). The install script's
 * auto-preserve mechanism captures the previous on-disk custom.css and
 * copies any rules NOT in the new baseline into params.custom_css for
 * each template_styles row, so sites that depended on the wash keep
 * rendering identically until the admin reviews/edits the preserved block. */

/* ── FAQ accordion (SPPB): make it obvious titles are clickable ── */
.sppb-addon-accordion .sppb-panel-heading {
    cursor: pointer !important;
    transition: background-color .2s ease, color .2s ease !important;
}
.sppb-addon-accordion .sppb-panel-heading:hover,
.sppb-addon-accordion .sppb-panel-heading:hover .sppb-panel-title,
.sppb-addon-accordion .sppb-panel-heading:hover .sppb-panel-title a {
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}

/* ── Center images in SPPB columns marked sppb-align-items-center ── */
html body .sppb-column.sppb-align-items-center > .sppb-column-addons {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}
html body .sppb-column.sppb-align-items-center .sppb-addon-single-image-container {
    display: flex !important;
    justify-content: center !important;
}
html body .sppb-column.sppb-align-items-center .sppb-addon-single-image-container img {
    margin: 0 auto !important;
}

/* ── Floated images in article/content body: breathing room between image
 *    edge and wrapping text. .pull-left / .pull-right are the legacy Bootstrap
 *    utility names still emitted by Joomla's content editors. align="left/right"
 *    covers old-school HTML attribute usage. Small bottom margin so the line
 *    beneath the image isn't flush to its bottom edge either. ── */
img.pull-left,
img[align="left"] {
    float: left;
    margin: 0 1.25rem 0.75rem 0;
}
img.pull-right,
img[align="right"] {
    float: right;
    margin: 0 0 0.75rem 1.25rem;
}

/* ── SP PageBuilder Articles family: long unhyphenated strings (registry paths,
 *    URLs, code identifiers in technical posts) overflow card boundaries by
 *    default. Force them to wrap at any character so they stay inside the
 *    card. Applies to the Articles addon (any layout) and Articles Scroller. ── */
.sppb-addon-articles .sppb-article-info-wrap,
.sppb-addon-articles .sppb-article-info-wrap *,
.sppb-addon-articles .sppb-article-introtext,
.sppb-articles-carousel-content,
.sppb-articles-carousel-content *,
.sppb-articles-scroller-content,
.sppb-articles-scroller-content * {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ── SP PageBuilder JS Slideshow (sppb-sp-slider-*): vendor sppagebuilder.css
 *    sets `word-break: break-word` on slider title/text/image layers, which is
 *    the legacy non-standard alias for `overflow-wrap: anywhere`. That makes
 *    the layer's min-content size collapse to one character, so titles and body
 *    copy break MID-WORD inside the slide instead of wrapping at spaces. Reset
 *    to normal word-breaking; let `overflow-wrap: break-word` only kick in for
 *    genuinely unbreakable strings (long URLs, etc.) as a last resort. ── */
.sppb-sp-slider-text,
.sppb-sp-slider-title,
.sppb-sp-slider-image {
    word-break: normal;
    overflow-wrap: break-word;
}

/* ── Collapse the title section when no module is published to the 'title'
 *    position. Helix renders #sp-section-1 with vertical padding even when
 *    its only child (#sp-title > .sp-column) has no content, leaving a gap
 *    between the header and main body on every such page. ── */
#sp-section-1:has(#sp-title > .sp-column:empty),
#sp-section-1:has(> .row > #sp-title:empty) {
    display: none;
}

/* (Removed in v2.4.39 — single-client payment-form fixes that targeted
 * #square-amount and [id^="paypal-form-fields-container-"]. Both selectors
 * only exist on InfiNet's "Make A Payment" page; the rules were inert on
 * every other client site but shipped as bloat. Sites that need them
 * should set them via their own params.custom_css. Auto-preserve will
 * carry them forward for sites that previously rendered them in the
 * shipped custom.css.) */

/* The header's #sp-menu column is rendered as <div class="col-auto flex-auto">.
 * Bootstrap loads after Helix in the page <head>, so its `.col-auto{flex:none}`
 * rule wins over Helix's `.flex-auto{flex:auto}` (equal specificity, later
 * declaration). Result: #sp-menu shrinks to its content, parking the hamburger
 * roughly in the middle of the header instead of at the right edge.
 * Promoting the rule to ID specificity beats Bootstrap's class rule cleanly. */
#sp-menu { flex: auto; }

/* SPPB rows are flex containers; when columns wrap to a stacked layout on
 * mobile they collide vertically because the framework only sets horizontal
 * gutters. row-gap is the native flex primitive for that. */
@media (max-width: 991.98px) {
    .sp-page-builder .sppb-row { row-gap: 1.25rem; }
}

/* Hide Joomla frontend admin edit indicators (visible when logged in)
   so they don't reserve layout space on public-facing pages. */
.btn.jmodedit,
body > .btn.jmodedit,
.jfedit-menu,
.popover .jfedit-menu,
a.btn-edit,
.icons > .btn-edit,
.contentpane-modal-edit { display: none !important; }
/* NOTE: a bare `.edit-icon` selector used to live in the list above to hide
   Joomla's frontend module-edit pencils, but it also matched RSBlog's Edit
   dropdown item (<li class="edit-icon">) and hid it. Removed — the jmodedit /
   btn-edit / jfedit-menu selectors already cover Joomla's own indicators. */
.jmoddiv.jmodinside { padding: 0 !important; margin: 0 !important; }

/* Helix unconditionally renders <section id="sp-section-1"> wrapping the
 * #sp-title position even when no module/title is published into it.
 * Result: every page where the page-title position is empty has a wasted
 * empty section between the header and #sp-main-body. Detect the empty
 * inner column and collapse the whole wrapper. The :only-child guard
 * keeps the rule inert on pages that DO publish a real title module
 * (since the .sp-column would then have content siblings or non-empty
 * children). */
#sp-title .sp-column:empty { display: none; }
#sp-section-1:has(> .row > #sp-title > .sp-column:empty:only-child) {
    display: none;
}

/* (Removed in v2.4.38) The "reserve header_height on the sticky-header
 * placeholder so first paint doesn't slide under a fixed header" rule
 * lived here. It was an InfiNet-specific workaround for a JS init quirk
 * on that site but fired unconditionally on every client whose template
 * has sticky_header enabled, pushing the topbar down by header_height
 * on first paint everywhere. Sites that genuinely need it should add the
 * rule to their own params.custom_css (Template Options -> Custom Code). */

/* ──────────────────────────────────────────────────────────────────────────
 * NOTE: the two blocks below would normally live in params.custom_css (per the
 * file-header convention), but on this site (noconow, J6) a Template Options
 * Save repeatedly wiped params.custom_css. These rules are placed on-disk so
 * they survive saves. A package update would overwrite this file — port them
 * to the package source / re-add to params once the save-clobber is resolved.
 * The body.itemid-437 block is noconow-specific and is inert on other sites.
 * ────────────────────────────────────────────────────────────────────────── */

/* ── Home (Itemid 437): transparent header overlaying the hero so the
 *    slideshow reaches the top of the window. The header here is built with
 *    Helix's Layout builder, so it renders as a section (#sp-section-2,
 *    holding #sp-logo + #sp-menu) inside #sp-main — there is no #sp-header. ── */
/* Pages that have their own hero as the first content section: the empty Helix
   title section is hidden and content is pulled to the very top under the
   overlaying header. Pages WITHOUT their own hero (e.g. the com_content blog)
   enable Helix's page-title banner — which renders .sp-page-title inside
   #sp-section-1 — so we only hide #sp-section-1 when it has NO banner. */
#sp-section-1:not(:has(.sp-page-title)) { display: none !important; }

/* Site-wide: anchor the absolute header to #sp-main on every page. */
#sp-main { position: relative; }

#sp-section-2 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
    background: transparent !important;
    box-shadow: none !important;
    padding-top: 40px;   /* breathing room above the logo/menu within the overlay */
}
#sp-section-2 .sp-column { background: transparent !important; }

#sp-main-body { margin-top: 0 !important; padding-top: 0 !important; }

/* White nav + logo text over the hero. A strong text-shadow + subtle dark scrim
   (below) keep it legible regardless of how light or busy the hero/banner is. */
#sp-section-2 .sp-megamenu-parent > li > a,
#sp-section-2 .sp-megamenu-parent > li > span,
#sp-section-2 #sp-logo .logo a,
#sp-section-2 #offcanvas-toggler,
#sp-section-2 .offcanvas-toggler {
    color: #ffffff !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85), 0 0 2px rgba(0, 0, 0, 0.6) !important;
}

/* Soft top-down scrim behind the overlay header so the white nav always has
   contrast, even over a pale hero. Header content sits above it (z-index). */
#sp-section-2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    min-height: 140px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.18) 55%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    z-index: 0;
}
#sp-section-2 > .container,
#sp-section-2 > .container-inner,
#sp-section-2 > .row { position: relative; z-index: 1; }

/* Active/current + hover accent — matches brand (#00BBFF) */
#sp-section-2 .sp-megamenu-parent > li.current-item > a,
#sp-section-2 .sp-megamenu-parent > li.active > a,
#sp-section-2 .sp-megamenu-parent > li > a:hover {
    color: #00bbff !important;
}

/* All-caps, larger menu text */
#sp-section-2 .sp-megamenu-parent > li > a,
#sp-section-2 .sp-megamenu-parent > li > span {
    text-transform: uppercase !important;
    font-size: 14px !important;
    letter-spacing: .02em;
}

/* Vertically center the logo + menu within the header row */
#sp-section-2 .row { align-items: center !important; }
#sp-section-2 #sp-menu .sp-column,
#sp-section-2 .sp-megamenu-parent { align-items: center !important; }

/* ── Desktop (lg, >=992px) menu layout — the full 7-item uppercase nav only
 *    fits here, so ALL of these layout overrides are scoped to lg+. Below lg the
 *    menu collapses to the hamburger (rules in the max-width block that follows).
 *    NOTE: these rules were previously unscoped; the `display:flex !important` on
 *    .sp-megamenu-parent overrode Bootstrap's `d-none`, so the menu never
 *    collapsed to a hamburger on tablet/mobile. Scoping them fixes that. ── */
@media (min-width: 992px) {
    #sp-section-2 #sp-logo {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: 28% !important;
    }
    #sp-section-2 #sp-menu {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        align-self: flex-start !important;   /* nav sits at the top of the header */
    }
    #sp-section-2 #sp-menu .sp-column,
    #sp-section-2 .sp-megamenu-wrapper {
        width: 100% !important;
        flex: 1 1 auto !important;
    }
    #sp-section-2 .sp-megamenu-parent {
        display: flex !important;
        width: 100% !important;
        flex: 1 1 auto !important;
        justify-content: flex-end !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
    }
    #sp-section-2 .sp-megamenu-parent > li { margin: 0 !important; }
}

/* ── Tablet + mobile (<992px): collapse to the hamburger. The megamenu carries
 *    `d-md-block` (visible 768-991px), so explicitly hide it and reveal the
 *    offcanvas toggler. Logo left, hamburger right; burger bars white over the
 *    hero/banner. ── */
@media (max-width: 991.98px) {
    /* One row: logo left, hamburger right (don't let the columns stack). */
    #sp-section-2 .row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    #sp-section-2 #sp-logo { flex: 0 1 auto !important; width: auto !important; max-width: 75% !important; }
    #sp-section-2 #sp-menu { flex: 0 0 auto !important; width: auto !important; margin-left: auto !important; }
    #sp-section-2 #sp-menu .sp-column { display: flex !important; justify-content: flex-end !important; width: auto !important; }
    /* Mobile logo: use the high-res DESKTOP logo (the phone variant is small /
       low-res) and size it up so it reads clearly on mobile. */
    #sp-section-2 #sp-logo .logo-image.logo-default {
        display: inline-block !important;
        height: 110px !important;
        width: auto !important;
        max-width: 100% !important;
    }
    #sp-section-2 #sp-logo .logo-image-phone { display: none !important; }
    /* Collapse desktop menu; reveal the (right-aligned, white) hamburger. */
    #sp-section-2 .sp-megamenu-parent { display: none !important; }
    #sp-section-2 .offcanvas-toggler-custom,
    #sp-section-2 #offcanvas-toggler { display: inline-flex !important; align-items: center; }
    #sp-section-2 .burger-icon span { background-color: #ffffff !important; }
}

/* ── Layout-built header renders BOTH .logo-default and .logo-sticky whenever
 *    sticky_logo differs from logo_image (features/logo.php). Every shipped
 *    rule that hides/toggles .logo-sticky is scoped to #sp-header (absent
 *    here), and the sticky JS also targets #sp-header — so this header never
 *    goes sticky and both logos show at once. Hide the sticky variant; the
 *    default (retina srcset) logo stays. ── */
#sp-logo .logo-sticky { display: none !important; }

/* No underlines on the header menu links, on any page (incl. the home page). */
#sp-section-2 .sp-megamenu-parent > li > a,
#sp-section-2 .sp-megamenu-parent > li > a:hover,
#sp-section-2 .sp-megamenu-parent > li > a:focus { text-decoration: none !important; }

/* ── SPPB accordion (FAQ) toggle indicator: the bare `fa fa-chevron-right` icon
 *    renders as an empty box on this FA6 setup. Hide it and draw a clean chevron
 *    with CSS borders (no icon font needed) — points right when collapsed, down
 *    when the panel is expanded. ── */
.sppb-addon-accordion .sppb-toggle-direction i,
.sppb-addon-accordion .sppb-toggle-direction svg { display: none !important; }
/* Kill the addon's own rotation of the toggle so it can't fight us. */
.sppb-addon-accordion .sppb-toggle-direction { transform: none !important; }
/* Collapsed = chevron DOWN. */
.sppb-addon-accordion .sppb-toggle-direction::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    transform: none !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%235a6573' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 6l5 5 5-5'/%3E%3C/svg%3E") no-repeat center / 14px 14px;
}
/* Open = chevron UP (a different image, no rotation). */
.sppb-addon-accordion .sppb-panel-heading[aria-expanded="true"] .sppb-toggle-direction::before,
.sppb-addon-accordion .sppb-panel-heading.active .sppb-toggle-direction::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%235a6573' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 10l5-5 5 5'/%3E%3C/svg%3E") no-repeat center / 14px 14px;
}

/* ── Page-title banner: used only on pages that have NO hero of their own (e.g.
 *    the com_content "What's Happening" blog). Enabled per menu item via Helix's
 *    page title (helixultimate_enable_page_title + helixultimate_page_title_bg_image
 *    → features/title.php emits .sp-page-title with the bg-image inline). The dark
 *    overlay keeps the white header + title readable; top padding clears the
 *    overlaying header. Pages that DO have their own hero leave the page title off,
 *    so #sp-section-1 stays empty and is hidden (rule above). ── */
.sp-page-title {
    position: relative;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 130px 0 50px;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    text-align: center;
}
.sp-page-title::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 0;
}
.sp-page-title > .container { position: relative; z-index: 1; }
.sp-page-title .sp-page-title-heading,
.sp-page-title .sp-page-title-sub-heading { color: #ffffff !important; margin: 0; }
.sp-page-title .sp-page-title-heading { font-size: 3.25rem !important; line-height: 1.1 !important; }
@media (max-width: 575.98px) {
    .sp-page-title .sp-page-title-heading { font-size: 2.25rem !important; }
}

/* ── RSBlog blog toolbar — polished header card with logged-in user info,
 *    branded icon buttons, and the login/logout as the filled "head" action. ── */
.rsblog-main-container .card.mb-5 {
    border: 1px solid #e9ecef !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .07) !important;
    background: linear-gradient(180deg, #ffffff 0%, #f7f9fb 100%) !important;
    overflow: hidden;
}
.rsblog-main-container .card.mb-5 > .card-body { padding: .85rem 1.25rem !important; }

/* Logged-in user info (avatar + greeting) / logged-out blog tag */
.rsblog-main-container .rsb-userbar { display: flex; align-items: center; gap: .65rem; }
.rsblog-main-container .rsb-avatar {
    width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #00bbff, #0067ff); color: #fff;
    font-weight: 700; font-size: 1.05rem; box-shadow: 0 3px 8px rgba(0, 103, 255, .35);
}
.rsblog-main-container .rsb-greeting { color: #333; font-size: 1rem; }
.rsblog-main-container .rsb-greeting strong { color: #0067ff; }
.rsblog-main-container .rsb-blogtag {
    color: #8a93a0; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; font-size: .85rem;
}

/* Icon toolbar — circular branded buttons that lift on hover */
.rsblog-main-container .card.mb-5 ul.list-inline {
    margin: 0; display: flex; justify-content: flex-end; align-items: center;
}
.rsblog-main-container .card.mb-5 .list-inline-item { margin: 0 4px; }
.rsblog-main-container .card.mb-5 .list-inline-item > a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 50%;
    color: #5a6573; background: #eef1f4; text-decoration: none;
    transition: all .18s ease;
}
.rsblog-main-container .card.mb-5 .list-inline-item > a:hover {
    color: #fff; background: linear-gradient(135deg, #00bbff, #0067ff);
    transform: translateY(-2px); box-shadow: 0 5px 12px rgba(0, 103, 255, .35);
}
/* The login / logout is the prominent "head" action — filled brand button */
.rsblog-main-container .card.mb-5 .list-inline-item > a[data-bs-toggle="modal"],
.rsblog-main-container .card.mb-5 .list-inline-item > a[href*="user.logout"] {
    color: #fff; background: linear-gradient(135deg, #00bbff, #0067ff);
    box-shadow: 0 3px 8px rgba(0, 103, 255, .3);
}

/* Breathing room at the top of the blog content (between the banner and the toolbar) */
.rsblog-main-container { padding-top: 1.5rem; }

/* Post titles render as <h1> — dial them down a touch on the list */
.rsblog-main-container .rsblog-entry-title { font-size: 1.8rem !important; line-height: 1.25 !important; }

/* ── Consistent blog title treatment everywhere (listing, single post, sidebar):
 *    same heading font, same brand-navy colour, same weight; only the size scales
 *    by context. Hover goes to the brand blue. ── */
.rsblog-main-container .rsblog-entry-title,
.rsblog-main-container .rsblog-entry-title a,
.rsblog-main-container .rsblog-entry-title a span,
.rsblog-main-post-container .rsblog-entry-title,
.rsblog-main-post-container .rsblog-entry-title a,
.rsblog-main-post-container .rsblog-entry-title a span,
.rsblog-recent .rsblog-recent-title,
#sp-right .sp-module .rsblog-recent .rsblog-recent-title {
    font-family: 'Arial', sans-serif;
    color: #2b3a67;
    font-weight: 700;
    text-decoration: none;
}
.rsblog-main-container .rsblog-entry-title a:hover,
.rsblog-main-container .rsblog-entry-title a:hover span,
.rsblog-main-post-container .rsblog-entry-title a:hover,
.rsblog-recent .rsblog-recent-title:hover {
    color: #0067ff;
    text-decoration: none;
}

/* ── Category navigation: pill links under the toolbar so visitors can browse
 *    posts by category (All / NOCO NOW Blog / Meeting Minutes …). ── */
.rsblog-catnav {
    display: flex; flex-wrap: wrap; gap: .5rem;
    margin: 0 0 1.75rem; padding: 0;
}
.rsblog-catnav .rsblog-cat {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .4rem .9rem; border-radius: 999px;
    background: #eef1f4; color: #44505f; text-decoration: none;
    font-size: .9rem; font-weight: 600; transition: all .15s ease;
}
.rsblog-catnav .rsblog-cat:hover { background: #dfe6ee; color: #0067ff; }
.rsblog-catnav .rsblog-cat.active {
    background: linear-gradient(135deg, #00bbff, #0067ff); color: #fff;
    box-shadow: 0 3px 8px rgba(0, 103, 255, .3);
}
.rsblog-catnav .rsblog-cat-count {
    font-size: .75rem; background: rgba(0, 0, 0, .08); color: inherit;
    border-radius: 999px; padding: 0 .45rem; line-height: 1.6;
}
.rsblog-catnav .rsblog-cat.active .rsblog-cat-count { background: rgba(255, 255, 255, .25); }

/* Category nav placed INSIDE the toolbar card — centered, with a divider above */
.rsblog-catnav-toolbar {
    justify-content: center;
    margin: .85rem 0 0;
    padding-top: .85rem;
    border-top: 1px solid #e9ecef;
}

/* ── Recent Posts sidebar (mod_rsblog_recent): compact, single-spaced list of the
 *    latest posts — title + date + short preview, each linking to its post page. ── */
.rsblog-recent { margin: 0; padding: 0; list-style: none; }
.rsblog-recent .rsblog-recent-item {
    padding: .55rem 0;
    border-bottom: 1px solid #e9ecef;
}
.rsblog-recent .rsblog-recent-item:first-child { padding-top: 0; }
.rsblog-recent .rsblog-recent-item:last-child { padding-bottom: 0; border-bottom: 0; }
.rsblog-recent .rsblog-recent-title,
#sp-right .sp-module .rsblog-recent .rsblog-recent-title {
    display: block;
    padding: 0;
    color: #2b3a67;
    font-weight: 700;
    font-size: .9rem;
    line-height: 1.25;
    text-decoration: none;
}
.rsblog-recent .rsblog-recent-title:hover { color: #0067ff; text-decoration: underline; }
.rsblog-recent .rsblog-recent-date {
    display: block;
    margin-top: .1rem;
    font-size: .7rem;
    color: #98a2b3;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.rsblog-recent .rsblog-recent-preview {
    margin: .2rem 0 0;
    font-size: .8rem;
    line-height: 1.3;
    color: #6c757d;
}

/* Back-to-blog link on single post pages */
.rsblog-back { margin: 1.75rem 0 1rem; font-size: .9rem; font-weight: 600; }
.rsblog-back a { color: #0067ff; text-decoration: none; }
.rsblog-back a:hover { text-decoration: underline; }
.rsblog-back .fa { margin-right: .35rem; }

/* Offset the smooth-scroll target so a post isn't hidden under the overlay header. */
article.rsblog-post[id^="rsblog-post-"] { scroll-margin-top: 130px; }
html { scroll-behavior: smooth; }

/* Keep the Blog Entries sidebar in view while scrolling the long post list.
   Sticks just below the top; if the list is taller than the viewport it scrolls
   internally. Desktop only — on mobile the sidebar stacks under the posts. */
@media (min-width: 992px) {
    #sp-right .sp-column {
        position: sticky;
        top: 1.5rem;
        max-height: calc(100vh - 3rem);
        overflow-y: auto;
    }
}