/*
 * Hand-maintained overrides, loaded after dist/styles/main.css.
 *
 * WHY THIS FILE EXISTS
 * The theme's original build (gulp 3.9 + bower, 2016) no longer runs: gulp 3
 * breaks on any modern Node, and bower_components — which main.scss imports
 * Font Awesome from — was never committed. Recompiling main.scss would
 * therefore silently drop Font Awesome and every icon on the site.
 *
 * So this is plain CSS, edited by hand, enqueued after the compiled bundle.
 * It is NOT generated from assets/styles/*.scss — do not expect a build to
 * produce it. Keep it small and keep it commented.
 *
 * Colours are taken from assets/styles/common/_variables.scss:
 *   $itw-orange   #F17527   (brand / $brand-primary)
 *   $gray-light   #777
 *   $gray-lighter #eee
 */

/* ---------------------------------------------------------------------------
 * Museo Slab: stop headings reflowing when the webfont arrives
 *
 * Headings fall back to Helvetica/Arial while the Adobe Fonts kit loads. Museo
 * Slab is noticeably wider and taller than Helvetica, so the swap re-wrapped
 * and re-positioned text — the "jump".
 *
 * The fix is a fallback @font-face whose metrics are overridden to match Museo
 * Slab, so the placeholder occupies the same space and the swap changes the
 * glyphs without moving anything.
 *
 * Values measured from the kit's own museo-slab 500 woff2 against Arial, using
 * advance widths weighted by English letter frequency:
 *
 *              avg advance   ascent   descent   line-gap
 *   museo-slab    0.5023      94.0%     26.0%      0.0%
 *   Arial         0.4484      90.5%     21.2%      3.3%
 *
 *   size-adjust = 0.5023 / 0.4484 = 112.0%
 *   overrides are the Museo values divided by that factor.
 *
 * Helvetica and Arial measure identically, so one face covers both platforms.
 * ------------------------------------------------------------------------ */

@font-face {
    font-family: "museo-slab-fallback";
    src: local("Helvetica"), local("Arial");
    font-weight: 500;
    font-style: normal;
    size-adjust: 112.0%;
    ascent-override: 83.9%;
    descent-override: 23.2%;
    line-gap-override: 0%;
}

/* Insert the fallback ahead of Helvetica/Arial everywhere the compiled bundle
   asks for museo-slab. These selectors mirror $headings-font-family and
   $font-family-serif in assets/styles/common/_variables.scss — if those change,
   change these too. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.cta-panel p.cta-heading,
.home-section-heading,
.navbar .navbar-nav,
.header-top .header-top-login .btn-login {
    font-family: "museo-slab", "museo-slab-fallback", Helvetica, Arial, sans-serif;
}

/* ---------------------------------------------------------------------------
 * Search results
 * ------------------------------------------------------------------------ */

/* Refine bar: search box + result count, above the results. */
.search-refine {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.search-refine .search-form {
    margin-bottom: 10px;
}

/* The core search form is .form-inline; let the field take real width so it's
   usable on its own line rather than a stub input. */
.search-refine .search-form .search-field {
    min-width: 260px;
}

@media (max-width: 767px) {
    .search-refine .search-form .search-field {
        min-width: 0;
        width: 100%;
        margin-bottom: 10px;
    }
}

.search-count {
    margin: 0;
    color: #777;
    font-size: 0.9em;
}

/* Each result: thumbnail left, content right, separated by a rule. */
.search-result {
    display: table;
    width: 100%;
    padding: 20px 0;
    border-bottom: 1px solid #eee;
}

.search-results .search-result:last-child {
    border-bottom: 0;
}

.search-result__thumb {
    display: table-cell;
    width: 80px;
    padding-right: 20px;
    vertical-align: top;
}

.search-result__thumb img {
    width: 80px;
    height: auto;
    display: block;
}

.search-result__body {
    display: table-cell;
    vertical-align: top;
}

/* Type badge — tells a video apart from a page at a glance. */
.search-result__type {
    display: inline-block;
    margin-bottom: 6px;
    padding: 2px 8px;
    border-radius: 3px;
    background: #eee;
    color: #777;
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.search-result.type-product .search-result__type {
    background: #F17527;
    color: #fff;
}

.search-result .entry-title {
    margin: 0 0 4px;
    font-size: 1.3em;
    line-height: 1.3;
}

.search-result__price {
    margin: 0 0 6px;
    color: #777;
}

.search-result__price .amount {
    color: #F17527;
    font-weight: 700;
}

.search-result .entry-summary {
    color: #777;
}

.search-result .entry-summary p:last-child {
    margin-bottom: 0;
}

/* Stack on small screens — 80px of thumbnail plus text is too tight. */
@media (max-width: 480px) {
    .search-result,
    .search-result__thumb,
    .search-result__body {
        display: block;
        width: auto;
    }

    .search-result__thumb {
        padding: 0 0 12px;
    }
}