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

/* ── 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) ── */
html, body {
    overflow-x: hidden !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. ── */
html body #sp-header-topbar,
html body #sp-top-bar {
    overflow: visible !important;
    padding: 20px 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    position: relative !important;
    box-sizing: border-box !important;
    transform: none !important;
    top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}
html body #sp-header-topbar *,
html body #sp-top-bar * {
    box-sizing: border-box !important;
    max-width: 100% !important;
}
html body #sp-header-topbar .container,
html body #sp-header-topbar .container-inner,
html body #sp-top-bar .container,
html body #sp-top-bar .container-inner {
    overflow: visible !important;
    height: auto !important;
}
html body #sp-header-topbar .container-inner > .row,
html body #sp-top-bar .container-inner > .row {
    min-height: 0 !important;
    height: auto !important;
    align-items: center !important;
    margin: 0 !important;
}

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

/* ── Page background palettes: keep the white content cards, but vary the
 *    surrounding page wash by menu item so adjacent pages do not all read the same. ── */
body {
    --page-bg-base: #eaf1f8;
    --page-bg-a: rgba(3, 69, 191, 0.10);
    --page-bg-b: rgba(245, 158, 11, 0.09);
}
body.itemid-101 { --page-bg-base: #eaf1f8; --page-bg-a: rgba(3, 69, 191, 0.11); --page-bg-b: rgba(245, 158, 11, 0.08); }
body.itemid-171 { --page-bg-base: #eef6f3; --page-bg-a: rgba(4, 120, 87, 0.11); --page-bg-b: rgba(245, 158, 11, 0.09); }
body.itemid-172 { --page-bg-base: #eaf2fb; --page-bg-a: rgba(3, 105, 161, 0.12); --page-bg-b: rgba(4, 120, 87, 0.08); }
body.itemid-121 { --page-bg-base: #edf4f8; --page-bg-a: rgba(20, 83, 45, 0.09); --page-bg-b: rgba(3, 69, 191, 0.09); }
body.itemid-208 { --page-bg-base: #f0f4fb; --page-bg-a: rgba(30, 64, 175, 0.10); --page-bg-b: rgba(14, 116, 144, 0.09); }
body.itemid-691 { --page-bg-base: #f2f5f8; --page-bg-a: rgba(71, 85, 105, 0.10); --page-bg-b: rgba(3, 69, 191, 0.07); }
body.itemid-779 { --page-bg-base: #f8f1ed; --page-bg-a: rgba(185, 28, 28, 0.09); --page-bg-b: rgba(245, 158, 11, 0.11); }
body.itemid-175,
body.itemid-781 { --page-bg-base: #f0f5f2; --page-bg-a: rgba(21, 128, 61, 0.10); --page-bg-b: rgba(3, 69, 191, 0.07); }
body.itemid-173 { --page-bg-base: #edf5f1; --page-bg-a: rgba(4, 120, 87, 0.10); --page-bg-b: rgba(245, 158, 11, 0.08); }
body.itemid-174 { --page-bg-base: #f3f0ea; --page-bg-a: rgba(120, 83, 39, 0.10); --page-bg-b: rgba(3, 69, 191, 0.07); }
body.itemid-176 { --page-bg-base: #eff3fa; --page-bg-a: rgba(37, 99, 235, 0.09); --page-bg-b: rgba(14, 116, 144, 0.08); }
body.itemid-767 { --page-bg-base: #eef5f8; --page-bg-a: rgba(14, 116, 144, 0.10); --page-bg-b: rgba(245, 158, 11, 0.08); }
body.itemid-768 { --page-bg-base: #f0f5ec; --page-bg-a: rgba(77, 124, 15, 0.10); --page-bg-b: rgba(3, 69, 191, 0.07); }
body.itemid-769 { --page-bg-base: #f4f2ea; --page-bg-a: rgba(180, 83, 9, 0.08); --page-bg-b: rgba(20, 83, 45, 0.09); }
body.itemid-770 { --page-bg-base: #edf3f5; --page-bg-a: rgba(15, 118, 110, 0.09); --page-bg-b: rgba(71, 85, 105, 0.08); }
body.itemid-177,
body.itemid-780 { --page-bg-base: #edf3fb; --page-bg-a: rgba(3, 69, 191, 0.10); --page-bg-b: rgba(4, 120, 87, 0.08); }
body.itemid-178 { --page-bg-base: #eef4fb; --page-bg-a: rgba(37, 99, 235, 0.10); --page-bg-b: rgba(14, 116, 144, 0.08); }
body.itemid-179 { --page-bg-base: #f1f5f1; --page-bg-a: rgba(22, 101, 52, 0.10); --page-bg-b: rgba(245, 158, 11, 0.08); }
body.itemid-180 { --page-bg-base: #f0f3f8; --page-bg-a: rgba(51, 65, 85, 0.10); --page-bg-b: rgba(3, 105, 161, 0.08); }
body.itemid-207 { --page-bg-base: #f4f1f7; --page-bg-a: rgba(109, 40, 217, 0.07); --page-bg-b: rgba(14, 116, 144, 0.08); }
body.itemid-209 { --page-bg-base: #f6f2ee; --page-bg-a: rgba(194, 65, 12, 0.08); --page-bg-b: rgba(3, 69, 191, 0.07); }
body.itemid-210 { --page-bg-base: #edf3f9; --page-bg-a: rgba(30, 64, 175, 0.10); --page-bg-b: rgba(15, 118, 110, 0.08); }
body.itemid-351 { --page-bg-base: #eff2f6; --page-bg-a: rgba(15, 23, 42, 0.09); --page-bg-b: rgba(185, 28, 28, 0.06); }
body.itemid-777 { --page-bg-base: #f4f3ed; --page-bg-a: rgba(120, 83, 39, 0.09); --page-bg-b: rgba(3, 69, 191, 0.07); }
body.itemid-778 { --page-bg-base: #eef4f3; --page-bg-a: rgba(15, 118, 110, 0.09); --page-bg-b: rgba(71, 85, 105, 0.07); }
body.itemid-205 { --page-bg-base: #eaf1f8; --page-bg-a: rgba(3, 69, 191, 0.09); --page-bg-b: rgba(245, 158, 11, 0.08); }
body #sp-main-body,
body .body-innerwrapper {
    background:
        radial-gradient(circle at 84% 16%, var(--page-bg-b), transparent 48%),
        radial-gradient(circle at 14% 88%, var(--page-bg-a), transparent 56%),
        var(--page-bg-base) !important;
}

/* ── SP PageBuilder content-page heroes: use one consistent header band
 *    for standalone first heading sections. Explicit IDs cover all public
 *    PageBuilder pages and avoid older green shape overlays. Blog has its
 *    own category override, but uses the same visual language. ── */
body.com-sppagebuilder:not(.itemid-101) #sp-main-body {
    padding: 0 !important;
}
body.com-sppagebuilder:not(.itemid-101) #sp-page-builder > .page-content > .sppb-section:first-of-type:has(.sppb-column-addons > .addon-root-heading:first-child),
#section-id-1680981702277,
#section-id-1680981249299,
#section-id-1680982266430,
#section-id-1680982547172,
#section-id-1680983666640,
#section-id-TR9DoHoKHGlNNDuhM5tcr,
#section-id-1683393881794,
#section-id-1683394224489 {
    margin: 0 0 40px !important;
    padding: 56px 24px 48px !important;
    background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,0.08), transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(255,255,255,0.05), transparent 40%),
        linear-gradient(135deg, #0345bf 0%, #023799 100%) !important;
    color: #ffffff !important;
    text-align: center !important;
    overflow: hidden !important;
}
body.com-sppagebuilder:not(.itemid-101) #sp-page-builder > .page-content > .sppb-section:first-of-type:has(.sppb-column-addons > .addon-root-heading:first-child) .sppb-shape-container,
#section-id-1680981702277 .sppb-shape-container,
#section-id-1680981249299 .sppb-shape-container,
#section-id-1680982266430 .sppb-shape-container,
#section-id-1680982547172 .sppb-shape-container,
#section-id-1680983666640 .sppb-shape-container,
#section-id-TR9DoHoKHGlNNDuhM5tcr .sppb-shape-container,
#section-id-1683393881794 .sppb-shape-container,
#section-id-1683394224489 .sppb-shape-container {
    display: none !important;
}
body.com-sppagebuilder:not(.itemid-101) #sp-page-builder > .page-content > .sppb-section:first-of-type:has(.sppb-column-addons > .addon-root-heading:first-child) .sppb-row,
body.com-sppagebuilder:not(.itemid-101) #sp-page-builder > .page-content > .sppb-section:first-of-type:has(.sppb-column-addons > .addon-root-heading:first-child) .sppb-column,
body.com-sppagebuilder:not(.itemid-101) #sp-page-builder > .page-content > .sppb-section:first-of-type:has(.sppb-column-addons > .addon-root-heading:first-child) .sppb-column-addons,
#section-id-1680981702277 .sppb-row,
#section-id-1680981702277 .sppb-column,
#section-id-1680981702277 .sppb-column-addons,
#section-id-1680981249299 .sppb-row,
#section-id-1680981249299 .sppb-column,
#section-id-1680981249299 .sppb-column-addons,
#section-id-1680982266430 .sppb-row,
#section-id-1680982266430 .sppb-column,
#section-id-1680982266430 .sppb-column-addons,
#section-id-1680982547172 .sppb-row,
#section-id-1680982547172 .sppb-column,
#section-id-1680982547172 .sppb-column-addons,
#section-id-1680983666640 .sppb-row,
#section-id-1680983666640 .sppb-column,
#section-id-1680983666640 .sppb-column-addons,
#section-id-TR9DoHoKHGlNNDuhM5tcr .sppb-row,
#section-id-TR9DoHoKHGlNNDuhM5tcr .sppb-column,
#section-id-TR9DoHoKHGlNNDuhM5tcr .sppb-column-addons,
#section-id-1683393881794 .sppb-row,
#section-id-1683393881794 .sppb-column,
#section-id-1683393881794 .sppb-column-addons,
#section-id-1683394224489 .sppb-row,
#section-id-1683394224489 .sppb-column,
#section-id-1683394224489 .sppb-column-addons {
    justify-content: center !important;
    text-align: center !important;
}
body.com-sppagebuilder:not(.itemid-101) #sp-page-builder > .page-content > .sppb-section:first-of-type:has(.sppb-column-addons > .addon-root-heading:first-child) .sppb-addon-header,
body.com-sppagebuilder:not(.itemid-101) #sp-page-builder > .page-content > .sppb-section:first-of-type:has(.sppb-column-addons > .addon-root-heading:first-child) .sppb-addon-content,
#section-id-1680981702277 .sppb-addon-header,
#section-id-1680981702277 .sppb-addon-content,
#section-id-1680981249299 .sppb-addon-header,
#section-id-1680981249299 .sppb-addon-content,
#section-id-1680982266430 .sppb-addon-header,
#section-id-1680982266430 .sppb-addon-content,
#section-id-1680982547172 .sppb-addon-header,
#section-id-1680982547172 .sppb-addon-content,
#section-id-1680983666640 .sppb-addon-header,
#section-id-1680983666640 .sppb-addon-content,
#section-id-TR9DoHoKHGlNNDuhM5tcr .sppb-addon-header,
#section-id-TR9DoHoKHGlNNDuhM5tcr .sppb-addon-content,
#section-id-1683393881794 .sppb-addon-header,
#section-id-1683393881794 .sppb-addon-content,
#section-id-1683394224489 .sppb-addon-header,
#section-id-1683394224489 .sppb-addon-content {
    text-align: center !important;
}
body.com-sppagebuilder:not(.itemid-101) #sp-page-builder > .page-content > .sppb-section:first-of-type:has(.sppb-column-addons > .addon-root-heading:first-child) .addon-root-heading h1,
body.com-sppagebuilder:not(.itemid-101) #sp-page-builder > .page-content > .sppb-section:first-of-type:has(.sppb-column-addons > .addon-root-heading:first-child) .addon-root-heading h2,
body.com-sppagebuilder:not(.itemid-101) #sp-page-builder > .page-content > .sppb-section:first-of-type:has(.sppb-column-addons > .addon-root-heading:first-child) .addon-root-heading h3,
body.com-sppagebuilder:not(.itemid-101) #sp-page-builder > .page-content > .sppb-section:first-of-type:has(.sppb-column-addons > .addon-root-heading:first-child) .addon-root-heading h4,
body.com-sppagebuilder:not(.itemid-101) #sp-page-builder > .page-content > .sppb-section:first-of-type:has(.sppb-column-addons > .addon-root-heading:first-child) .addon-root-heading .sppb-addon-title,
#section-id-1680981702277 .addon-root-heading .sppb-addon-title,
#section-id-1680981249299 .addon-root-heading .sppb-addon-title,
#section-id-1680982266430 .addon-root-heading .sppb-addon-title,
#section-id-1680982547172 .addon-root-heading .sppb-addon-title,
#section-id-1680983666640 .addon-root-heading .sppb-addon-title,
#section-id-TR9DoHoKHGlNNDuhM5tcr .addon-root-heading .sppb-addon-title,
#section-id-1683393881794 .addon-root-heading .sppb-addon-title,
#section-id-1683394224489 .addon-root-heading .sppb-addon-title {
    color: #ffffff !important;
    font-size: 3rem !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    text-align: center !important;
}
body.com-sppagebuilder:not(.itemid-101) #sp-page-builder > .page-content > .sppb-section:first-of-type:has(.sppb-column-addons > .addon-root-heading:first-child) .addon-root-heading .sppb-addon-title::after,
#section-id-1680981702277 .addon-root-heading .sppb-addon-title::after,
#section-id-1680981249299 .addon-root-heading .sppb-addon-title::after,
#section-id-1680982266430 .addon-root-heading .sppb-addon-title::after,
#section-id-1680982547172 .addon-root-heading .sppb-addon-title::after,
#section-id-1680983666640 .addon-root-heading .sppb-addon-title::after,
#section-id-TR9DoHoKHGlNNDuhM5tcr .addon-root-heading .sppb-addon-title::after,
#section-id-1683393881794 .addon-root-heading .sppb-addon-title::after,
#section-id-1683394224489 .addon-root-heading .sppb-addon-title::after {
    content: "";
    display: block;
    width: 58px;
    height: 4px;
    margin: 14px auto 0;
    background: #f59e0b;
    border-radius: 2px;
}
@media (max-width: 768px) {
    body.com-sppagebuilder:not(.itemid-101) #sp-page-builder > .page-content > .sppb-section:first-of-type:has(.sppb-column-addons > .addon-root-heading:first-child),
    #section-id-1680981702277,
    #section-id-1680981249299,
    #section-id-1680982266430,
    #section-id-1680982547172,
    #section-id-1680983666640,
    #section-id-TR9DoHoKHGlNNDuhM5tcr,
    #section-id-1683393881794,
    #section-id-1683394224489 {
        padding: 44px 20px 40px !important;
    }
    body.com-sppagebuilder:not(.itemid-101) #sp-page-builder > .page-content > .sppb-section:first-of-type:has(.sppb-column-addons > .addon-root-heading:first-child) .addon-root-heading h1,
    body.com-sppagebuilder:not(.itemid-101) #sp-page-builder > .page-content > .sppb-section:first-of-type:has(.sppb-column-addons > .addon-root-heading:first-child) .addon-root-heading h2,
    body.com-sppagebuilder:not(.itemid-101) #sp-page-builder > .page-content > .sppb-section:first-of-type:has(.sppb-column-addons > .addon-root-heading:first-child) .addon-root-heading h3,
    body.com-sppagebuilder:not(.itemid-101) #sp-page-builder > .page-content > .sppb-section:first-of-type:has(.sppb-column-addons > .addon-root-heading:first-child) .addon-root-heading h4,
    body.com-sppagebuilder:not(.itemid-101) #sp-page-builder > .page-content > .sppb-section:first-of-type:has(.sppb-column-addons > .addon-root-heading:first-child) .addon-root-heading .sppb-addon-title,
    #section-id-1680981702277 .addon-root-heading .sppb-addon-title,
    #section-id-1680981249299 .addon-root-heading .sppb-addon-title,
    #section-id-1680982266430 .addon-root-heading .sppb-addon-title,
    #section-id-1680982547172 .addon-root-heading .sppb-addon-title,
    #section-id-1680983666640 .addon-root-heading .sppb-addon-title,
    #section-id-TR9DoHoKHGlNNDuhM5tcr .addon-root-heading .sppb-addon-title,
    #section-id-1683393881794 .addon-root-heading .sppb-addon-title,
    #section-id-1683394224489 .addon-root-heading .sppb-addon-title {
        font-size: 2.25rem !important;
    }
}

/* ── 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;
}

/* ── Single-article view: wrap .article-details in a white card matching the
 *    landing page card design (rounded corners, soft border, brand-blue shadow),
 *    and tighten the body typography so paragraphs don't read like double-
 *    spaced lines. Applies template-wide on view-article pages. ── */
body.itemid-205.view-article .article-details {
    background: #ffffff;
    border: 1px solid #e4e8ee;
    border-radius: 14px;
    padding: 2rem 2.25rem;
    box-shadow: 0 4px 20px rgba(3, 69, 191, 0.06);
    margin-bottom: 1.5rem;
}
body.itemid-205.view-article .article-details > .article-header {
    margin-bottom: 0.6rem;
}
body.itemid-205.view-article .article-details > .article-info {
    margin-bottom: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid #e4e8ee;
}
/* Tight paragraph rhythm — kill the wide gaps between consecutive <p> blocks. */
body.itemid-205.view-article .article-details p {
    margin: 0 0 0.6rem;
    line-height: 1.6;
}
body.itemid-205.view-article .article-details p:last-child {
    margin-bottom: 0;
}
body.itemid-205.view-article .article-details h2,
body.itemid-205.view-article .article-details h3,
body.itemid-205.view-article .article-details h4 {
    margin-top: 1.5rem;
    margin-bottom: 0.6rem;
    line-height: 1.3;
}
body.itemid-205.view-article .article-details ul,
body.itemid-205.view-article .article-details ol {
    margin: 0 0 0.75rem 1.5rem;
    line-height: 1.55;
}
body.itemid-205.view-article .article-details ul li + li,
body.itemid-205.view-article .article-details ol li + li {
    margin-top: 0.2rem;
}
body.itemid-205.view-article .article-details blockquote {
    margin: 0.75rem 0;
    padding: 0.5rem 1rem;
    border-left: 3px solid #0345bf;
    color: #354154;
    background: rgba(3, 69, 191, 0.08);
    border-radius: 0 6px 6px 0;
}
body.itemid-205.view-article .article-details pre {
    background: #1a1f2e;
    border: 1px solid #2a3340;
    border-radius: 8px;
}
body.itemid-205.view-article .article-details pre {
    color: #e6edf3;
    padding: 1rem 1.25rem;
    margin: 0.75rem 0;
    overflow: auto;
}
body.itemid-205.view-article .article-details code {
    background: rgba(3, 69, 191, 0.1);
    border: 1px solid rgba(3, 69, 191, 0.16);
    border-radius: 5px;
    color: #023799;
    padding: 0.12rem 0.38rem;
    font-size: 0.92em;
}
body.itemid-205.view-article .article-details pre code {
    color: inherit;
    border: 0;
    padding: 0;
    background: transparent;
}
body.itemid-205.view-article .article-details img { border-radius: 8px; max-width: 100%; height: auto; }

/* Article view sidebar — match the /tech-blog white card treatment so the
   Recent/Popular/Topics/Search modules sit in the same panel style as the
   article-details card to their left. */
body.itemid-205.view-article #sp-right {
    background: #ffffff;
    border: 1px solid #e4e8ee;
    border-radius: 14px;
    padding: 1.25rem 1rem;
    box-shadow: 0 4px 20px rgba(3, 69, 191, 0.06);
}
body.itemid-205.view-article #sp-right .sp-module + .sp-module {
    border-top: 1px solid #e4e8ee;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
}
body.itemid-205.view-article #sp-right .sp-module-title {
    color: #1a1f2e;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 0.85rem;
}

/* SPPB Articles card styling moved to addon NATIVE settings (border, radius,
 * shadow are set directly on the addon's settings JSON — GUI-editable). No
 * CSS override needed here. */
/* Related articles + social share blocks below the card — give them their own card too */
body.itemid-205.view-article .related-article-list-container,
body.itemid-205.view-article .article-author-information,
body.itemid-205.view-article .article-blog-nav {
    background: #ffffff;
    border: 1px solid #e4e8ee;
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 4px 20px rgba(3, 69, 191, 0.06);
}

/* ── Tech Blog hero module (rendered on 'title' position via a Custom HTML
 *    module assigned to the /tech-blog menu item). Native module + Helix
 *    layout — full-width above the column row without any DOM manipulation. ── */
.tech-blog-hero-module .sp-module-content > .tech-blog-hero,
.tech-blog-hero {
    --blog-primary: #0345bf;
    --blog-primary-dark: #023799;
    margin: 0 calc(50% - 50vw);  /* full-bleed inside the title section's container */
    padding: 56px 24px 48px;
    background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,0.08), transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(255,255,255,0.05), transparent 40%),
        linear-gradient(135deg, var(--blog-primary) 0%, var(--blog-primary-dark) 100%);
    color: #fff;
    text-align: center;
    overflow: hidden;
}
.tech-blog-hero-inner {
    max-width: 760px;
    margin: 0 auto;
    position: relative;
}
.tech-blog-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1.4rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}
.tech-blog-hero h1 {
    color: #fff;
    font-weight: 800;
    font-size: 3rem;
    line-height: 1.1;
    margin: 0 0 1.25rem;
}
@media (max-width: 768px) {
    .tech-blog-hero h1 { font-size: 2.25rem; }
}
.tech-blog-search {
    display: flex;
    align-items: stretch;
    max-width: 560px;
    margin: 0 auto;
    background: #fff;
    border-radius: 999px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0,0,0,0.18);
}
.tech-blog-search-icon {
    display: inline-flex;
    align-items: center;
    padding: 0 0 0 1.25rem;
    color: var(--blog-primary, #0345bf);
}
.tech-blog-search input[type="search"] {
    flex: 1;
    border: 0;
    padding: 0.95rem 1rem;
    font-size: 1rem;
    outline: none;
    color: #1a1f2e;
    background: transparent;
}
.tech-blog-search button {
    border: 0;
    background: var(--blog-primary, #0345bf);
    color: #fff;
    padding: 0 1.5rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.tech-blog-search button:hover { background: var(--blog-primary-dark, #023799); }

/* The Helix title section + sp-title column inherit Helix's standard padding;
   reset to 0 so the hero is flush against the header. */
.tech-blog-hero-module {
    padding: 0 !important;
    margin: 0 !important;
}
#sp-section-1:has(.tech-blog-hero-module) {
    padding: 0 !important;
}
#sp-section-1:has(.tech-blog-hero-module) > .container,
#sp-section-1:has(.tech-blog-hero-module) > .container-inner,
#sp-section-1:has(.tech-blog-hero-module) #sp-title,
#sp-section-1:has(.tech-blog-hero-module) #sp-title > .sp-column {
    padding: 0 !important;
    margin: 0 !important;
}

/* The blog category menu item (Itemid=205) has a Custom HTML "Tech Blog
 * Hero" module published to the title position. The /blog SPPB page (id 17)
 * already renders its OWN hero section with the /images/heroes/blog.jpg
 * background, so the title-position module is a duplicate. Hide the entire
 * title section on every page that uses Itemid=205 (both the /blog listing
 * AND individual articles) — each gets its own appropriate hero. */
body.itemid-205 #sp-section-1 {
    display: none;
}

/* Match the /blog SPPB hero section size to the rest of the site's heroes
 * (home, contact-us, cyber, etc.) which use ~56px top / 48px bottom padding.
 * The page-17.css ships with only 24px all around, leaving the hero
 * noticeably smaller than every other section hero. */
body.itemid-205 #sp-page-builder.page-17 #section-id-896e21b7-23a8-49e6-94dd-fcff9b49e0ea {
    padding-top: 56px !important;
    padding-bottom: 48px !important;
    margin-bottom: 40px !important;
}
@media (max-width: 768px) {
    body.itemid-205 #sp-page-builder.page-17 #section-id-896e21b7-23a8-49e6-94dd-fcff9b49e0ea {
        padding-top: 44px !important;
        padding-bottom: 40px !important;
        margin-bottom: 24px !important;
    }
}
/* Ensure hero title (the h1 "Blog" inside the SPPB hero section) renders in
 * white, large, centered — the SPPB JSON sets the wrapper class but no color,
 * so without this the h1 inherits dark site colors and disappears on the
 * dark image overlay. */
body.itemid-205 #sp-page-builder.page-17 .tech-blog-hero-h1 .sppb-addon-title,
body.itemid-205 #sp-page-builder.page-17 .tech-blog-hero-h1 h1 {
    color: #ffffff !important;
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
}
@media (max-width: 768px) {
    body.itemid-205 #sp-page-builder.page-17 .tech-blog-hero-h1 .sppb-addon-title,
    body.itemid-205 #sp-page-builder.page-17 .tech-blog-hero-h1 h1 {
        font-size: 2.25rem;
    }
}

/* /about-us (page 20) and /support (page 3) tiles are built as text_block
 * addons matching the home page service-tile structure exactly, so all
 * card styling — background, border, padding, shadow — comes from the
 * SPPB addon settings, not from this stylesheet. We only need to make the
 * grid columns equal-height so tiles align across each row. Same flex
 * pattern /services uses for .services-grid. */
#sp-page-builder.page-20 .sppb-row > .sppb-row-column,
#sp-page-builder.page-3 .sppb-row > .sppb-row-column {
    display: flex;
}
#sp-page-builder.page-20 .sppb-row > .sppb-row-column > .sppb-column,
#sp-page-builder.page-3 .sppb-row > .sppb-row-column > .sppb-column {
    width: 100%;
    display: flex;
    flex-direction: column;
}
#sp-page-builder.page-20 .sppb-row > .sppb-row-column .sppb-column-addons,
#sp-page-builder.page-3 .sppb-row > .sppb-row-column .sppb-column-addons {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
#sp-page-builder.page-20 .sppb-row > .sppb-row-column .addon-root-text-block,
#sp-page-builder.page-3 .sppb-row > .sppb-row-column .addon-root-text-block {
    flex: 1 1 auto;
    display: flex;
}
#sp-page-builder.page-20 .sppb-row > .sppb-row-column .addon-root-text-block > div,
#sp-page-builder.page-3 .sppb-row > .sppb-row-column .addon-root-text-block > div {
    flex: 1 1 auto;
    width: 100%;
}

/* On individual blog articles, kill the top padding of #sp-main-body so the
 * full-bleed hero sits flush against the page header — matching how every
 * other site hero (home, services, cyber, etc.) feels. The article-details
 * card below has its own padding, so content spacing is unaffected. */
body.itemid-205.view-article #sp-main-body {
    padding-top: 0 !important;
}

/* ── Single-article HERO banner. Rendered above .article-details by the
 *    article/default.php override. The article's image_fulltext / image_intro
 *    is set as background-image (inline on the section); falls back to
 *    /images/heroes/blog.jpg. A dark gradient overlay sits on top so the
 *    title and meta stay readable on any image. ── */
body.itemid-205.view-article .article-hero {
    /* Full-bleed banner. Image background + dark overlay matches the SPPB
     * hero on every other site page (see /services, /services/cyber-security-
     * services, etc.). The hero shows section identity (eyebrow + "IT Tips
     * & Notes" + tagline) — NOT the per-article title; that lives with the
     * article body below. */
    color: #fff;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 0;
    margin-bottom: 2rem;
    padding: 56px 24px 48px;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    position: relative;
    background-color: #0345bf;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}
body.itemid-205.view-article .article-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(8, 18, 40, 0.72);
    z-index: 1;
}
body.itemid-205.view-article .article-hero-inner {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
}
body.itemid-205.view-article .article-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1.4rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 1.1rem;
}
body.itemid-205.view-article .article-hero-title {
    color: #fff;
    font-weight: 800;
    font-size: 3rem;
    line-height: 1.1;
    letter-spacing: -0.015em;
    margin: 0 0 1.1rem;
}
body.itemid-205.view-article .article-hero-tagline {
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.15rem;
    line-height: 1.55;
    max-width: 720px;
    margin: 0 auto;
}
body.itemid-205.view-article .article-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 1.05rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.28);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    margin-bottom: 1rem;
    transition: background-color 0.2s ease;
}
body.itemid-205.view-article .article-hero-eyebrow:hover {
    background: rgba(255,255,255,0.24);
    color: #fff;
    text-decoration: none;
}
body.itemid-205.view-article .article-hero-eyebrow i {
    font-size: 0.78rem;
}
body.itemid-205.view-article .article-hero-title {
    color: #fff;
    font-weight: 800;
    font-size: clamp(1.85rem, 4.2vw, 2.85rem);
    line-height: 1.18;
    letter-spacing: -0.015em;
    margin: 0 0 1rem;
}
body.itemid-205.view-article .article-hero-meta {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.6rem;
    color: rgba(255,255,255,0.88);
    font-size: 0.92rem;
}
body.itemid-205.view-article .article-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}
body.itemid-205.view-article .article-hero-meta i {
    color: rgba(255,255,255,0.72);
}
/* Title and meta appear inside .article-details with the article content.
 * The hero is image-only (no overlay text), per request. */
body.itemid-205.view-article .article-details > .article-header h1,
body.itemid-205.view-article .article-details > .article-header h2 {
    font-size: clamp(1.85rem, 3.5vw, 2.6rem);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.015em;
    color: #1a1f2e;
    margin: 0 0 1rem;
}

/* ── Related Articles cards: the outer container already has a card style
 *    above, but the inner .article items had no styling — they rendered as
 *    plain text on white (the "white-on-white" issue). Give each one its
 *    own card. ── */
body.itemid-205.view-article .related-article-list-container .article-list .row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
body.itemid-205.view-article .related-article-list-container .article-list .row > [class*="col-"] {
    flex: 1 1 260px;
    max-width: 100%;
    padding: 0;
}
body.itemid-205.view-article .related-article-list-container .article-list .article {
    height: 100%;
    background: rgba(3, 69, 191, 0.06);
    border: 1px solid rgba(3, 69, 191, 0.18);
    border-left: 3px solid #0345bf;
    border-radius: 10px;
    padding: 1rem 1.15rem;
    box-shadow: 0 2px 10px rgba(3, 69, 191, 0.06);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}
body.itemid-205.view-article .related-article-list-container .article-list .article:hover {
    transform: translateY(-2px);
    background: #0345bf;
    box-shadow: 0 12px 28px rgba(3, 69, 191, 0.28);
    border-color: #0345bf;
}
body.itemid-205.view-article .related-article-list-container .article-list .article:hover h2,
body.itemid-205.view-article .related-article-list-container .article-list .article:hover h3,
body.itemid-205.view-article .related-article-list-container .article-list .article:hover h4,
body.itemid-205.view-article .related-article-list-container .article-list .article:hover h2 a,
body.itemid-205.view-article .related-article-list-container .article-list .article:hover h3 a,
body.itemid-205.view-article .related-article-list-container .article-list .article:hover h4 a,
body.itemid-205.view-article .related-article-list-container .article-list .article:hover .article-info {
    color: #ffffff;
}
body.itemid-205.view-article .related-article-list-container .article-list .article a:not(.btn) {
    color: #1a1f2e;
    text-decoration: none;
}
body.itemid-205.view-article .related-article-list-container .article-list .article h2,
body.itemid-205.view-article .related-article-list-container .article-list .article h3,
body.itemid-205.view-article .related-article-list-container .article-list .article h4 {
    font-size: 1rem;
    line-height: 1.35;
    margin: 0 0 0.55rem;
    color: #1a1f2e;
    font-weight: 700;
}
body.itemid-205.view-article .related-article-list-container .article-list .article h2 a,
body.itemid-205.view-article .related-article-list-container .article-list .article h3 a,
body.itemid-205.view-article .related-article-list-container .article-list .article h4 a {
    color: inherit;
}
body.itemid-205.view-article .related-article-list-container .article-list .article h2 a:hover,
body.itemid-205.view-article .related-article-list-container .article-list .article h3 a:hover,
body.itemid-205.view-article .related-article-list-container .article-list .article h4 a:hover {
    color: #0345bf;
}
body.itemid-205.view-article .related-article-list-container .article-list .article .article-info {
    color: #6a737d;
    font-size: 0.82rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.9rem;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
}
body.itemid-205.view-article .related-article-list-container .article-list .article .article-info > * {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
body.itemid-205.view-article .related-article-list-container .related-article-title {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a1f2e;
}

/* ── Mobile tightening for single-article view: shrink the article card,
 *    hero, and sidebar paddings so content uses the screen width on phones.
 *    Helix's grid stacks #sp-component above #sp-right at <992px, so the
 *    sidebar wraps below — make sure paddings match and there's no big gap. ── */
@media (max-width: 768px) {
    body.itemid-205.view-article .article-details {
        padding: 1.25rem 1.1rem;
        border-radius: 12px;
    }
    body.itemid-205.view-article .article-hero {
        padding: 44px 20px 40px;
        margin-bottom: 1.25rem;
        min-height: 220px;
    }
    body.itemid-205.view-article .article-hero-title {
        font-size: 2.25rem;
    }
    body.itemid-205.view-article .article-hero-tagline {
        font-size: 1rem;
    }
    body.itemid-205.view-article .article-hero-title {
        font-size: clamp(1.55rem, 6.5vw, 2rem);
    }
    body.itemid-205.view-article .article-hero-meta {
        gap: 0.35rem 1rem;
        font-size: 0.85rem;
    }
    body.itemid-205.view-article .article-blog-nav {
        padding: 0.75rem 1rem;
        margin-bottom: 0.75rem;
    }
    body.itemid-205.view-article #sp-right {
        padding: 1rem 0.9rem;
        margin-top: 1rem;
    }
    body.itemid-205.view-article .related-article-list-container {
        padding: 1rem 1.1rem;
    }
    body.itemid-205.view-article .related-article-list-container .article-list .row {
        gap: 0.75rem;
    }
    body.itemid-205.view-article .related-article-list-container .article-list .row > [class*="col-"] {
        flex: 1 1 100%;
    }
    /* Long inline code (registry paths, commands) should wrap on phones. */
    body.itemid-205.view-article .article-details code,
    body.itemid-205.view-article .article-details pre {
        word-break: break-word;
        overflow-wrap: anywhere;
        white-space: pre-wrap;
    }
}

/* Make A Payment (Square) form's amount input. Inline padding-left wasn't
 * holding — likely a generic `input{padding:7px}` rule somewhere in the
 * Helix bundle is competing on cascade. ID specificity + !important pins it. */
#square-amount {
    padding-left: 2.5rem !important;
    padding-right: 3.75rem !important;
}

/* PayPal hosted-form amount input (Make A Payment page): the `$` glyph in
 * the site font is wider than PayPal's default `--currency-padding: 3ch`,
 * so typed digits slide under the $. Set padding-left directly (and the
 * variable, in case PayPal recomputes from it) at high specificity to beat
 * PayPal's CSS-in-JS rules injected post-SDK-load. */
html body [id^="paypal-form-fields-container-"] .amount-container input#amount,
html body [id^="paypal-form-fields-container-"] input[type="number"] {
    --currency-padding: 1.75rem !important;
    padding-left: 1.75rem !important;
}

/* 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; }
}

/* Note: RSTickets! Pro styling (com-rsticketspro row-gap, .form-horizontal
 * mobile reset, login banner, post-submit confirmation card, button styling)
 * has been moved into plg_system_rsticketsproinfinet so it ships and updates
 * with the RSTickets patch package, not with Helix. */

/* ── Support / RSTickets! Pro hero ─────────────────────────────────────
 * RSTickets! Pro pages (My Tickets dashboard, submit, view, search) are
 * Joomla component views, not SPPB pages — so they have no hero baked in.
 * A Custom HTML module ("Support Hero") published to the title position on
 * itemid 691 supplies the same hero treatment used on the SPPB /support page
 * (image background + dark overlay, eyebrow pill, white h1, tagline).
 *
 * Helix's title section adds its own padding/container; flush it so the
 * hero is full-bleed against the header (mirrors the .tech-blog-hero
 * approach above). */
#sp-section-1:has(.support-hero-module),
#sp-section-1:has(.support-hero-module) > .container,
#sp-section-1:has(.support-hero-module) > .container-inner,
#sp-section-1:has(.support-hero-module) > .row,
#sp-section-1:has(.support-hero-module) #sp-title,
#sp-section-1:has(.support-hero-module) #sp-title > .sp-column,
#sp-section-1:has(.support-hero-module) .sp-module,
#sp-section-1:has(.support-hero-module) .sp-module-content,
#sp-section-1:has(.support-hero-module) .mod-custom {
    padding: 0 !important;
    margin: 0 !important;
}
/* Also zero #sp-main-body's top padding when this hero is present so the
 * hero is flush against the header. */
body:has(.support-hero-module) #sp-main-body {
    padding-top: 0 !important;
}
.support-hero-module {
    padding: 0 !important;
    margin: 0 !important;
}
/* Note: `background-image` is set INLINE on the .support-hero element in the
 * module HTML, NOT here. Helix's CSS merger rewrites url() paths in
 * custom.css relative to the template's CSS folder, breaking absolute URLs
 * like /images/heroes/foo.jpg → /templates/shaper_helixultimate/css/images/...
 * Inline styles on the element bypass the merger. */
.support-hero {
    position: relative;
    margin: 0 calc(50% - 50vw) 2rem;
    padding: 56px 24px 48px;
    background-color: #0345bf;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: #fff;
    text-align: center;
    overflow: hidden;
}
.support-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(8, 18, 40, 0.72);
    z-index: 1;
}
.support-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 820px;
    margin: 0 auto;
}
.support-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1.4rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}
.support-hero h1 {
    color: #fff;
    font-weight: 800;
    font-size: 3rem;
    line-height: 1.1;
    letter-spacing: -0.015em;
    margin: 0 0 1.1rem;
}
.support-hero-tagline {
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.15rem;
    line-height: 1.55;
    max-width: 720px;
    margin: 0 auto;
}
@media (max-width: 767.98px) {
    .support-hero { padding: 44px 20px 40px; }
    .support-hero h1 { font-size: 2.25rem; }
    .support-hero-tagline { font-size: 1rem; }
}

/* 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,
.edit-icon,
.contentpane-modal-edit { display: none !important; }
.jmoddiv.jmodinside { padding: 0 !important; margin: 0 !important; }