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

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

/* ── RSForm!Pro: consistent field layout ─────────────────────────────────────
 *
 * RSForm marks its label `col-sm-3` and its control wrapper `col-sm-9`, but
 * `.form-group` is not a grid row, so those classes never take effect. Each
 * label therefore sits inline and pushes its own field to a different left
 * edge, and RSForm's `size="20"` / `cols="50"` HTML attributes give each
 * control a different character-derived width. The result is a ragged form on
 * every site that uses RSForm out of the box.
 *
 * STRUCTURE ONLY — colours come from the site's own palette via Bootstrap /
 * Helix custom properties, so this does not impose one client's branding on
 * another (see the file header note about cross-contamination).
 *
 * Added 2026-07-21, verified on coloradoscrewmachine (contact + quote forms:
 * all fields left=265, width=560 on desktop, full width under 768px).
 */
/* NOTE ON UNITS: Helix ships `html { font-size: 10px }` (the 62.5% trick), so
 * `1rem` here is 10px, not 16px. Font sizes below therefore use `inherit` so
 * fields match whatever body size the site sets, and spacing uses explicit px.
 * Do not reintroduce rem in this block. */

/* PERMANENT FONT FIX (all sites): RSForm's markup has NO single `.rsform`
 * wrapper — the form is <form id="userForm..."> with `.rsform-block` field
 * wrappers, `.rsform-input-box` controls and `.formControlLabel` labels, and
 * RSForm loads its own Bootstrap 3 CSS. Content pasted from Word also carries
 * inline `font-family`/`font-size`. So force EVERY element RSForm renders to
 * inherit the site's own type — never a hardcoded family. `!important` beats
 * both inline styles and RSForm's bundled Bootstrap. Because it inherits, it is
 * correct on every site regardless of that site's chosen fonts. */
form[id^="userForm"],
form[id^="userForm"] *,
.rsform-block,
.rsform-block *,
.rsform-input-box,
.formControlLabel,
.formControls,
.formControls * {
    font-family: inherit !important;
    font-size: inherit !important;
}
/* Preserve the intentional icon fonts inside forms (FontAwesome captcha etc.). */
form[id^="userForm"] .fa,
form[id^="userForm"] .fas,
form[id^="userForm"] .far,
form[id^="userForm"] [class^="icon-"],
form[id^="userForm"] [class*=" icon-"] {
    font-family: revert !important;
}

.rsform-block {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 18px;
}

.rsform-block .formControlLabel {
    flex: 0 0 190px;
    max-width: 190px;
    padding-top: 10px;
    padding-right: 16px;
    font-weight: 600;
    text-align: left;
}

.rsform-block .formControls {
    flex: 1 1 0;
    min-width: 0;
}

.rsform-block .formControls .form-control,
.rsform-block .formControls input[type="text"],
.rsform-block .formControls input[type="email"],
.rsform-block .formControls input[type="tel"],
.rsform-block .formControls input[type="number"],
.rsform-block .formControls textarea,
.rsform-block .formControls select {
    width: 100%;
    max-width: 560px;
    padding: 10px 13px;
    border: 1px solid var(--border-color, #d7dde5);
    border-radius: 4px;
    background: #fff;
    color: var(--text-color, inherit);
    font-family: inherit;
    font-size: inherit;
    line-height: 1.45;
}

.rsform-block .formControls textarea {
    min-height: 150px;
    resize: vertical;
}

.rsform-block .formControls .form-control:focus,
.rsform-block .formControls textarea:focus {
    border-color: var(--bs-primary, #666);
    outline: none;
}

.rsform-block .formRequired {
    color: var(--bs-danger, #b3261e);
}

/* submit button opts out of the field max-width */
.rsform-block-send .formControls .btn,
.rsform-block .formControls button[type="submit"],
.rsform-block .formControls input[type="submit"] {
    width: auto;
    max-width: none;
    padding: 11px 30px;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
}

/* Turnstile / captcha widgets are fixed-size iframes; keep them in column */
.rsform-type-turnstile .formControls,
.rsform-block-captcha .formControls {
    max-width: 560px;
}

@media (max-width: 767px) {
    .rsform-block { display: block; }

    .rsform-block .formControlLabel {
        flex: none;
        max-width: none;
        padding-top: 0;
        padding-right: 0;
        margin-bottom: .3rem;
    }

    .rsform-block .formControls .form-control,
    .rsform-block .formControls textarea {
        max-width: none;
    }
}



/* ── PRINT: article only ──────────────────────────────────────────────────────
 * The blog toolbar's print button (and Ctrl+P on any content page) should print
 * the ARTICLE, not the site chrome. Hide the fixed rail, header, page-title
 * banner, blog toolbar, sidebars, bottom and footer, and let the main content
 * flow full width in black-on-white. Package-level so every site prints cleanly.
 * ─────────────────────────────────────────────────────────────────────────── */
@media print {
    #lvhc-rail,
    #sp-header,
    .sticky-header-placeholder,
    #sp-title,
    .sp-page-title,
    .blog-toolbar,
    #sp-left,
    #sp-right,
    aside.sidebar,
    #sp-bottom,
    #sp-footer,
    .offcanvas-menu,
    .offcanvas-overlay,
    #offcanvas-toggler,
    .blog-toolbar,
    .blog-toolbar-search,
    .blog-toolbar-actions,
    form[role="search"],
    input[type="search"],
    .sppb-addon-articles__pagination {
        display: none !important;
    }
    /* NOTE: never hide `.offcanvas-init` — that class is on <body>, so
       display:none on it blanks the ENTIRE printout. Hide the offcanvas
       ELEMENTS (.offcanvas-menu/.offcanvas-overlay) instead. */

    /* Main content takes the full page. */
    #sp-main-body,
    #sp-component,
    .com-content-article,
    .com-content-article__body {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
    }

    /* Kill every wrapper background so no dark bands print (the header/footer/
       rail backgrounds otherwise leave black bars at the page edges). */
    html,
    body,
    .body-wrapper,
    .body-innerwrapper,
    #sp-main,
    #sp-main-body,
    #sp-component,
    main {
        background: #fff !important;
        box-shadow: none !important;
    }
    body { color: #000 !important; }
    .com-content-article,
    .com-content-article * {
        color: #000 !important;
        background: transparent !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    /* Links: normal body-size text (some article links are styled large on
       screen — cap them for print), and show the URL after the link so a
       printout is usable. Tracking params are stripped from the hrefs at the
       content level, so the printed URL is short, not a page of utm junk. */
    .com-content-article a {
        text-decoration: underline;
        color: #000 !important;
        font-size: 12pt !important;
        font-weight: normal !important;
    }
    .com-content-article a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #333;
        word-break: break-all;
    }
    /* Don't print URLs for on-page anchors or internal Itemid links. */
    .com-content-article a[href^="#"]::after,
    .com-content-article a[href*="Itemid="]::after,
    .com-content-article a[href^="/"]::after { content: ""; }

    /* Keep the article image reasonable, not a full-page block. */
    .com-content-article img {
        max-width: 100% !important;
        max-height: 3.5in !important;
        width: auto !important;
        height: auto !important;
    }

    @page { margin: 1.5cm; }
}