/* ==========================================================================
   Overrides.css
   --------------------------------------------------------------------------
   Plain CSS, loaded LAST - after bootstrap.min.css, Core.min.css and
   Custom.min.css. All new styling for this site goes here.

   Why this file exists
   --------------------
   Core.css and Custom.css are generated from Core.less / Custom.less by
   Web Essentials, a Visual Studio 2012/2013 extension that no longer exists.
   The layouts link the *.min.css files, so editing the .less or the plain
   .css has no effect on the live site - all three tiers have to be kept in
   sync by hand. This file sidesteps that entirely: no build step, no
   minified twin, and every change we make is in one reviewable place.

   Conventions
   -----------
   - Group changes under a dated, named heading so they can be traced back
     to a request and removed cleanly.
   - Prefer a specific selector over !important. Where !important is
     unavoidable it is because Custom.css already used it on that property -
     say so in a comment.
   - This file is deployed by copying it to /Content/. No rebuild required.
   ========================================================================== */


/* --------------------------------------------------------------------------
   2026-08 - Mixed-content JS fix
   --------------------------------------------------------------------------
   No CSS was needed for the jQuery fix itself. Section kept as the anchor
   for anything that turns out to be needed once the site's JavaScript runs
   again for the first time since the HTTPS switch.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   2026-08 - Homepage slider: hide the indicator dot when there is only one
   --------------------------------------------------------------------------
   Bootstrap renders one <li> indicator per banner regardless of count, so a
   single-banner slider shows a lone dot that looks like a broken control.

   :only-child means this rule is self-regulating and safe to deploy at any
   time: it matches nothing while several banners exist, and starts applying
   by itself the moment the slider is cut to one in the CMS. No code change
   is needed at the point the banners are actually deleted.
   -------------------------------------------------------------------------- */

.carousel-indicators li:only-child {
    display: none;
}


/* --------------------------------------------------------------------------
   2026-08 - How We Work / Our Offer redesign
   --------------------------------------------------------------------------
   Both pages drop to two columns: How We Work becomes RETAIL SECTOR +
   ACCREDITATIONS (Export and Gifting are being removed), and Our Offer
   becomes two image tiles.

   These rules are deliberately keyed off the NUMBER OF ITEMS IN THE ROW
   rather than hardcoded into the templates, using the quantity-query trick
   :first-child:nth-last-child(2) - "I am the first child and also the second
   from last", which is only true when the row holds exactly two items.

   The effect is that nothing changes on deploy. The pages keep their present
   three- and five-column layouts while the old content is still in place, and
   snap to the new two-column design by themselves the moment the items are
   deleted in the CMS. No second deploy, and no broken half-finished layout in
   between.
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {

    /* How We Work - exactly two sector columns */
    .row > .howWeWorkItem:first-child:nth-last-child(2),
    .row > .howWeWorkItem:first-child:nth-last-child(2) ~ .howWeWorkItem {
        width: 50%;
    }

    /* Our Offer - exactly two image tiles */
    .row > .ourOfferItem:first-child:nth-last-child(2),
    .row > .ourOfferItem:first-child:nth-last-child(2) ~ .ourOfferItem {
        width: 50%;
    }
}

/* Custom.css pins .howWeWorkItem to height:150px with per-breakpoint
   min-heights of 205px/275px. Because min-height beats height, the columns
   currently resolve to 205px and the existing text fits exactly - so
   releasing the fixed height changes nothing today. It matters once images
   are added beneath the text: with a fixed height the image would spill out
   over the footer instead of extending the column. The min-heights are left
   alone so the two columns still line up when their text differs in length.
   !important is required only because the original rule uses it. */
.howWeWorkItem {
    height: auto !important;
}

/* The list-item widget outputs bare <img> tags with no class, so uploaded
   images render at their natural pixel size and a large upload would burst
   out of its column. Constraining them means Tom can upload at any size -
   including at 2x for retina - without the layout breaking. This also fixes
   a pre-existing overflow on Our Offer, where the 274px tile images were
   slightly wider than their ~250px column at tablet width. */
.howWeWorkItem img,
.ourOfferItem img {
    max-width: 100%;
    height: auto;
}