/*!
 * bootstrap5-compat.css
 * Bootstrap 3.2.0 -> 5.3.3 migration shim for Intimi.
 *
 * Restores Bootstrap 3 behaviours that Bootstrap 5 changed or removed, so the
 * existing markup and css/style.css keep rendering as they did.
 *
 * Load order matters:  bootstrap.min.css -> bootstrap5-compat.css -> style.css
 *
 * Created 2026-09-09 during the BS5 migration. Each block says what it restores;
 * a block can be deleted once the underlying markup is modernised.
 */


/* ------------------------------------------------------------------------
   0. Customisations rescued from the old vendored bootstrap.min.css
                                                              ** IMPORTANT **

   The site's Bootstrap 3.2.0 file was NOT stock — it had been hand-edited.
   Replacing it with stock Bootstrap 5.3.3 silently destroyed those edits.
   They are restored here so the vendor file can stay pristine and be
   upgraded again in future without losing them.

   Diffed against genuine bootstrap 3.2.0; these are the two substantive
   differences. Found in Phase 3 QA.

   (a) The dark page background. Stock Bootstrap sets body to #fff. The site's
       copy set #242424, and this is the ONLY place it was defined —
       css/style.css line 84 tries to set it, but that rule is dead (see the
       note below). Losing this turned every page's margins white.

   (b) The FuturaStd @font-face declarations. These existed ONLY inside the
       vendored bootstrap file. Templates/cms_brand_banner.html asks for
       FuturaStd-Bold / -Book / -Light, and the .otf files are in fonts/.
       Without these the brand banner silently falls back to a default face.

   NOTE on style.css line 84: that file begins with a stray `my` before its
   opening comment ("my/*"), which makes the CSS parser read the first rule as
   `my body { ... }` — a selector that matches nothing. So style.css's own
   body rule (background, Lato, 13px, letter-spacing, #585858) has NEVER
   applied, on this site or on production. It is a real latent bug, but
   fixing the typo would newly apply all of those declarations site-wide and
   change typography everywhere. Deliberately NOT fixed here: this shim's job
   is to preserve current appearance. Flagged for a separate decision.
   ------------------------------------------------------------------------ */
body {
    background-color: #242424;
}

@font-face {
    font-family: FuturaStd-Bold;
    src: url(../fonts/FuturaStd-Bold.otf) format('opentype');
}

@font-face {
    font-family: FuturaStd-Book;
    src: url(../fonts/FuturaStd-Book.otf) format('opentype');
}

@font-face {
    font-family: FuturaStd-Light;
    src: url(../fonts/FuturaStd-Light.otf) format('opentype');
}


/* ------------------------------------------------------------------------
   1. Gutters
   BS3 gutters were 30px (15px per side). BS5 defaults to --bs-gutter-x: 1.5rem
   (24px), which would tighten every multi-column row by 3px per side.
   css/style.css does not override .row, so without this the whole site shifts.
   ------------------------------------------------------------------------ */
.row {
    --bs-gutter-x: 30px;
}

.container-fluid {
    --bs-gutter-x: 30px;
}


/* ------------------------------------------------------------------------
   2. Float behaviour -> flex
   BS3 .row used floats, so columns kept their natural height. BS5 .row is
   display:flex, which stretches every column to match the tallest one. This
   site was built against float behaviour, so nothing depends on stretching.

   Applying flex-start globally reproduces BS3 appearance across all 41 live
   rows. If a specific row is later found to WANT equal-height columns, give
   that row the BS5 class `align-items-stretch` to opt back in.
   ------------------------------------------------------------------------ */
.row {
    align-items: flex-start;
}


/* ------------------------------------------------------------------------
   3. Column push / pull
   BS5 removed .col-*-push-* and .col-*-pull-* entirely. Two footer widgets
   use them (contact = push-1, support = pull-1). These reproduce the BS3
   rules exactly. The tier was remapped md -> lg, so the breakpoint is the
   BS5 lg minimum (992px), which equals the old BS3 md minimum.
   ------------------------------------------------------------------------ */
@media (min-width: 992px) {
    .col-lg-push-1 {
        position: relative;
        left: 8.33333333%;
    }

    .col-lg-pull-1 {
        position: relative;
        right: 8.33333333%;
    }
}


/* ------------------------------------------------------------------------
   4. Columns must be positioned ancestors                     ** IMPORTANT **

   Bootstrap 3 gave every grid column `position: relative; min-height: 1px`
   (it needed relative positioning to implement push/pull). Bootstrap 5
   dropped both.

   This site relies on it: `.nano > .nano-content` is `position: absolute`
   with top/left/bottom pinned, and `.nano` itself has NO position of its
   own. Under BS3 the absolute content was contained by the column. Under BS5
   the column is static, so the nearest positioned ancestor becomes the page
   itself — the text escapes its column and lands at the top of the document,
   overlapping the banner.

   Symptom this fixes: About and Contact page body text overlapping the
   hero image. Found in Phase 3 QA.
   ------------------------------------------------------------------------ */
.col,
[class^="col-"],
[class*=" col-"] {
    position: relative;
    min-height: 1px;
}


/* ------------------------------------------------------------------------
   4b. BS5 pads EVERY child of .row; BS3 padded only columns

   BS3 put the 15px gutter padding on the `.col-*` classes themselves, so a
   non-column child of a `.row` received none. BS5 moved that padding to a
   blanket `.row > *` rule, which also hits wrappers, banners and anything
   else sitting directly inside a row.

   Effect here: `.page-title`, `.about`, `.blog-single` and `.list-styles`
   each gained 30px of horizontal padding they never had. On desktop that
   showed as the banner sitting 15px further in than production. At 375px it
   squeezed the About hero heading until its text overflowed the page by
   exactly 15px.

   Restoring BS3 behaviour fixes the mobile overflow AND brings desktop back
   into line with production. */
.row > :not([class*="col-"]) {
    padding-right: 0;
    padding-left: 0;
}


/* ------------------------------------------------------------------------
   5. Columns nested inside a wrapper that is not a .row       ** IMPORTANT **

   This is the one that actually broke pages, found in Phase 3 QA.

   BS3 columns were `float: left`, and floats work at ANY nesting depth — a
   column laid out beside its sibling even with wrapper <div>s in between.
   BS5 columns are FLEX ITEMS, and flex only applies to DIRECT children of the
   flex container. A column one level below .row is just a block element with
   a width, so it stacks vertically instead of sitting beside its sibling.

   Five wrappers in this site sit between .row and its columns. Marking them
   `bs5-subrow` makes them flex containers in their own right, restoring the
   BS3 layout without touching the surrounding structure:

     .about        (about page)      .blog-single  (contact page)
     .list-styles  (careers page)    .logos-slider ul  (home logo slider)
     a col-lg-6 used as a grid for nested columns (brand pages)

   The width:100% applies only when the wrapper is a direct child of .row —
   there it is itself a flex item and would otherwise shrink to its content.
   A wrapper that is already a column (the brand-page case) keeps its own
   column width.
   ------------------------------------------------------------------------ */
.bs5-subrow {
    display: flex;
    flex-wrap: wrap;
}

/* Only a wrapper that is NOT itself a column takes the full row width. A
   wrapper that IS a column (the brand pages nest columns inside a col-lg-6)
   must keep its own column width — without the :not() it would claim the
   whole row and force its sibling onto the next line. */
.row > .bs5-subrow:not([class*="col-"]) {
    width: 100%;
}

/* Below the column breakpoint, a subrow's children must stack full width.

   BS5 gives DIRECT children of `.row` a `width: 100%` default (its `.row > *`
   rule), which is what makes columns stack full-width on mobile. A subrow's
   children are nested one level deeper, so they never receive it — as flex
   items with no width they size to their CONTENT and push the page wider than
   the viewport. Under BS3 they were plain blocks at 100% width.

   Symptom this fixes: horizontal page overflow on mobile — Careers +59px and
   About +15px at 375px, found in the Phase 3 breakpoint sweep.

   Scoped to BELOW 992px on purpose:
     - every subrow in this site holds `col-lg-*` columns, which activate at
       992px, so above it the columns set their own widths correctly;
     - and the desktop layout above 992px is already reviewed and signed off,
       so it must not be touched.
   If a subrow is ever given `col-md-*` or `col-sm-*` children, this
   breakpoint must be changed to match theirs. */
@media (max-width: 991.98px) {
    .bs5-subrow > * {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }
}


/* A non-column child of a subrow gets its own full-width line.

   Turning a wrapper into a flex container also makes its NON-column children
   flex items, which shrink to their content width — under BS3 they were plain
   blocks spanning the full width. The contact page's map lives in such a div
   (`.blog-single-media` holding `#mymap`, which is width:100%); as a shrunk
   flex item it collapsed to zero width and the map vanished entirely.

   This restores block behaviour: the child takes a full line, and the columns
   after it wrap onto the next line and sit side by side, exactly as the
   floats did. */
.bs5-subrow > :not([class*="col-"]) {
    flex: 0 0 100%;
    width: 100%;
}


/* ------------------------------------------------------------------------
   6. Reboot differences
   BS5's Reboot changes a few element defaults that BS3 left to the browser
   or set differently. These restore the previous rendering.
   ------------------------------------------------------------------------ */

/* BS5 sets ul/ol padding-left to 2rem (32px); the browser default BS3 relied
   on is 40px. Affects the footer support menu and any content list. */
ul,
ol {
    padding-left: 40px;
}

/* BS3 styled bare <label> elements; BS5 moved that to .form-label, leaving
   bare labels as plain inline. The login/register/validate forms use bare
   labels. */
label {
    display: inline-block;
    margin-bottom: 5px;
}