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

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

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

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

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

/* Helix's sticky-header behaviour reserves space for the eventually-fixed
 * header via <div class="sticky-header-placeholder">, but the placeholder's
 * height is only set by JS *after* the user scrolls. On first paint the
 * placeholder is 0px, so when the header is in `position: fixed` (which
 * the Helix JS can apply on init for some configurations) content sits
 * under the header — most visibly when an article opens with a flush hero
 * band. Reserve the height in CSS so the first paint already accounts for
 * the header. Helix exposes --header_height as a CSS var via :root. */
body.sticky-header .sticky-header-placeholder {
    height: var(--header_height, 60px);
}
@media (max-width: 575px) {
    body.sticky-header .sticky-header-placeholder { height: 50px; }
}