/**
 * 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. ── */
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;
    display: block !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;
}

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