/* burco_custom.css - Burco Products, Tier 1 of the re-skin ladder.
 * Loaded by Custom/BurcoHeadInclude.cshtml AFTER swift.css, the generated Style
 * asset sheets (ColorSchemes / Buttons / Typography) and theme-default's
 * default_custom.css.
 *
 * Tier 0 (the brand itself - palette, type scale, button shape) is authored in the
 * backend Style tools and lives in /Files/System/Styles/. Nothing here re-declares a
 * variable those sheets own: overriding --dw-color-button-primary in a custom sheet
 * would leave the admin swatch lying and the next design save would revert the site.
 *
 * Everything below is a Tier-1 item the Style tools cannot express.
 */

/* ---------------------------------------------------------------------------
 * 1. Content-band and card imagery must be CAPPED.
 *    Swift's Card / Image bands carry no height field, so a swapped-in photo
 *    renders at full column-width height and towers over the fold. Burco's own
 *    photography is a mix of 900x900 product shots, 1200x800 line art and
 *    2000px facility photos, so an uncapped rack of three cards reads as three
 *    different components. re-skin.md Tier-1 rule.
 * ------------------------------------------------------------------------- */
[data-dw-itemtype="swift-v2_card"] figure,
[data-dw-itemtype="swift-v2_card"] .card-img-top,
[data-dw-itemtype="swift-v2_image"] figure {
    margin-bottom: 0;
    overflow: hidden;
}
[data-dw-itemtype="swift-v2_card"] figure img,
[data-dw-itemtype="swift-v2_card"] .card-img-top img,
[data-dw-itemtype="swift-v2_card"] img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
    max-height: min(46vh, 420px);
}
[data-dw-itemtype="swift-v2_image"] figure img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    max-height: min(60vh, 640px);
}

/* Retailer logo tiles are the exception: contain, never crop, and give the mark air.
   Scoped on the alt text authored on those six cards. */
[data-dw-itemtype="swift-v2_card"] img[alt="AutoZone"],
[data-dw-itemtype="swift-v2_card"] img[alt="RockAuto"],
[data-dw-itemtype="swift-v2_card"] img[alt="JEGS"],
[data-dw-itemtype="swift-v2_card"] img[alt="AutoAnything"],
[data-dw-itemtype="swift-v2_card"] img[alt="MirrorGlassPlus"],
[data-dw-itemtype="swift-v2_card"] img[alt^="O"][alt$="Auto Parts"] {
    aspect-ratio: 5 / 2;
    object-fit: contain;
    padding: 1.25rem 1.5rem;
    background: #ffffff;
}

/* ---------------------------------------------------------------------------
 * 2. Cards in one rack must be the same height, so a two-line body and a
 *    five-line body do not produce two different components.
 * ------------------------------------------------------------------------- */
[data-swift-gridcolumn][data-dw-itemtype="swift-v2_card"] {
    display: flex;
}
[data-swift-gridcolumn][data-dw-itemtype="swift-v2_card"] > * {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* ---------------------------------------------------------------------------
 * 3. The header bar. Burco's catalogue puts many group nodes in the mega-menu,
 *    so the bar has to wrap gracefully instead of stretching the canvas, and
 *    the utility row above it must stay quiet.
 * ------------------------------------------------------------------------- */
[data-swift-page-header] .megamenu-wrapper > nav {
    flex-wrap: wrap;
    row-gap: 0.125rem;
}
[data-swift-page-header] .megamenu-wrapper > nav > .nav-item > .nav-link {
    padding-block: 0.35rem;
}
/* utility row: smaller, quieter, never the visual peer of the main bar */
[data-swift-page-header] [data-dw-itemtype="swift-v2_navigation"] .nav-link {
    font-size: 0.8125rem;
    opacity: 0.8;
}
[data-swift-page-header] [data-dw-itemtype="swift-v2_navigation"] .nav-link:hover {
    opacity: 1;
}
/* below lg the desktop mega-menu must never set the canvas width */
@media (max-width: 991.98px) {
    [data-swift-page-header] .megamenu-wrapper {
        max-width: 100%;
        overflow-x: auto;
    }
    [data-swift-page-header] .megamenu-wrapper > nav {
        flex-wrap: nowrap;
    }
}

/* ---------------------------------------------------------------------------
 * 4. Blockquote testimonial cards: four narrow columns of justified italic
 *    prose is what made the old site's proof band unreadable (rivers at 76px
 *    of measure). Left-align, drop the italic, let the attribution carry it.
 * ------------------------------------------------------------------------- */
[data-dw-itemtype="swift-v2_blockquote"] blockquote,
[data-dw-itemtype="swift-v2_blockquote"] p {
    text-align: left;
    font-style: normal;
    hyphens: none;
}
[data-dw-itemtype="swift-v2_blockquote"] footer,
[data-dw-itemtype="swift-v2_blockquote"] cite {
    font-style: normal;
    font-weight: 600;
    opacity: 0.7;
}

/* ---------------------------------------------------------------------------
 * 5. Accordions carry the migrated FAQ, the install steps and the mirror
 *    variations - the three places the old site buried its best content.
 *    Give the trigger a real tap target and a visible boundary.
 * ------------------------------------------------------------------------- */
[data-dw-itemtype="swift-v2_accordion"] .accordion-button {
    min-height: 44px;
    font-weight: 600;
}
[data-dw-itemtype="swift-v2_accordion"] .accordion-item {
    border-bottom: 1px solid rgba(20, 22, 26, 0.12);
}
[data-dw-colorscheme="dark"] [data-dw-itemtype="swift-v2_accordion"] .accordion-item,
[data-dw-colorscheme="primary"] [data-dw-itemtype="swift-v2_accordion"] .accordion-item {
    border-bottom-color: rgba(244, 245, 247, 0.18);
}

/* ---------------------------------------------------------------------------
 * 6. Tap targets. Every interactive element on the old site was 38px tall and
 *    35 of 118 failed the 44x44 threshold at 390px. The Button Style asset
 *    fixes buttons; these are the links it cannot reach.
 * ------------------------------------------------------------------------- */
[data-swift-page-header] .nav-link,
[data-swift-page-footer] .nav-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
@media (max-width: 575.98px) {
    [data-swift-page-footer] .nav-link {
        min-height: 40px;
    }
}

/* ---------------------------------------------------------------------------
 * 7. Full-width video. The old How-To-Install page rendered nine YouTube
 *    players at 228x153 and 142x105. Swift's VideoPlayer is already a 16:9
 *    ratio box; cap it so it never exceeds the fold on a laptop.
 * ------------------------------------------------------------------------- */
[data-dw-itemtype="swift-v2_videoplayer"] figure {
    max-height: min(72vh, 640px);
    margin-inline: auto;
}

/* ---------------------------------------------------------------------------
 * 8. Part numbers and dimensions in tabular figures - installers read them as
 *    columns of digits, not as prose.
 * ------------------------------------------------------------------------- */
[data-swift-product-number],
.product-number,
td,
th {
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
 * 9. Hero legibility scrim.
 *    Swift's poster paints the copy straight onto the photograph with no
 *    overlay, so a bright frame (Burco's hero is a chrome mirror against an
 *    orange truck in daylight) drops the headline to well under 3:1. The
 *    figure is position:absolute inset-0 and pointer-events:none, so a
 *    ::after on it is the correct place for the scrim - the copy block that
 *    follows carries .z-1 and stays above it.
 * ------------------------------------------------------------------------- */
[data-swift-poster][data-swift-poster-height] > figure::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        rgba(20, 22, 26, 0.88) 0%,
        rgba(20, 22, 26, 0.72) 34%,
        rgba(20, 22, 26, 0.30) 62%,
        rgba(20, 22, 26, 0.10) 100%
    );
}
[data-swift-poster="middle-right"] > figure::after,
[data-swift-poster="bottom-right"] > figure::after {
    background: linear-gradient(
        260deg,
        rgba(20, 22, 26, 0.88) 0%,
        rgba(20, 22, 26, 0.72) 34%,
        rgba(20, 22, 26, 0.30) 62%,
        rgba(20, 22, 26, 0.10) 100%
    );
}
/* below md the copy sits over the middle of the frame - go flat, not directional */
@media (max-width: 767.98px) {
    [data-swift-poster][data-swift-poster-height] > figure::after {
        background: rgba(20, 22, 26, 0.72);
    }
}
[data-swift-poster] .dw-h1,
[data-swift-poster] .dw-paragraph-1,
[data-swift-poster] .dw-paragraph {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* ---------------------------------------------------------------------------
 * 10. Cut-out product shots and line-art diagrams must be CONTAINED, not
 *     cropped. Burco's install diagrams carry a lettered call-out in the top
 *     corner and the Window-Glo bottle is a cut-out on white - a 4:3 cover
 *     crop cuts the letter off and slices the bottle. Scoped on the alt text
 *     authored on exactly those cards.
 * ------------------------------------------------------------------------- */
[data-dw-itemtype="swift-v2_card"] img[alt^="Fit over"],
[data-dw-itemtype="swift-v2_card"] img[alt^="Remove the broken"],
[data-dw-itemtype="swift-v2_card"] img[alt^="Heated mirrors"],
[data-dw-itemtype="swift-v2_card"] img[alt^="Glass Care"],
[data-dw-itemtype="swift-v2_card"] img[alt^="Side-View Mirrors"] {
    object-fit: contain;
    background: #ffffff;
    padding: 0.75rem;
}

/* ---------------------------------------------------------------------------
 * 11. Mobile header canvas fit.
 *     The mobile header row is burger + logo + minicart + my-account. When a
 *     trade buyer is signed in, MyAccount renders the account NAME in a
 *     .text-nowrap span (102px measured), which pushes the row to 416px on a
 *     390px canvas - the classic Swift canvas stretch, and it only appears in
 *     the signed-in state, which is exactly the state the B2B demo runs in.
 *     Below md, keep the avatar and drop the label; the off-canvas menu
 *     already names the user.
 * ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    [data-swift-page-header] [data-dw-itemtype="swift-v2_myaccount"] .text-nowrap,
    [data-swift-page-header] [data-dw-itemtype="swift-v2_minicart"] .dw-paragraph,
    [data-swift-page-header] [data-dw-itemtype="swift-v2_favorites"] .dw-paragraph {
        display: none !important;
    }
    [data-swift-page-header] [data-dw-itemtype="swift-v2_myaccount"],
    [data-swift-page-header] [data-dw-itemtype="swift-v2_minicart"],
    [data-swift-page-header] [data-dw-itemtype="swift-v2_favorites"] {
        flex: 0 0 auto !important;
        min-width: 0;
    }
    [data-swift-page-header] [data-dw-itemtype="swift-v2_logo"] figure,
    [data-swift-page-header] [data-dw-itemtype="swift-v2_logo"] img {
        max-width: 130px !important;
        width: 130px !important;
        height: auto;
    }
    [data-swift-page-header] section > [data-swift-container] {
        flex-wrap: nowrap;
        min-width: 0;
    }
}

/* --- QA wave: product card image --- */
/* Swift's 1ColumnFlex card column does not grow, so Swift-v2_ProductDefaultImage with
 * Width=auto collapses the <figure> to its 60px min-width floor; the PLP therefore pins
 * Width=200 and the card image is a fixed 200px at every viewport. This rule lets the
 * figure fill its column so Width can be flipped back to auto and the image become
 * responsive. It is INERT while Width=200 -- the template writes an inline
 * style="width: 200px" on the same <figure>, and inline styles beat this sheet.
 * Flipping the paragraph's Width to auto is the second half of the change and needs a
 * rendered-width check at 1440/390 first.
 */
[data-dw-itemtype="swift-v2_productdefaultimage"] > figure {
    width: 100%;
}