/**
 * Mirrored Shopify theme CSS variables — static mirror fix.
 *
 * Mirrored HTML loses Liquid-rendered values (empty --font-body-family, --color-base-text, etc.).
 * This file redefines :root so base.css rgb(var(--color-*)) and var() chains work.
 *
 * @package Burger
 */

:root {
  --font-body-family: Karla, Helvetica, Arial, sans-serif;
  --font-body-style: normal;
  --font-body-weight: 400;
  --font-body-weight-bold: 700;

  --blue: #0082ca;
  --black: #0a131c;
  --grey: #f5f5f5;

  --font-heading-family: "vag_rounded_lt_probold", "Arial Black", Arial, sans-serif;
  --font-heading-style: normal;
  --font-heading-weight: 700;

  --font-body-scale: 1;
  --font-heading-scale: 1;

  /* RGB triples for rgb(var(--…)) in base.css */
  --color-base-text: 10, 19, 28;
  --color-shadow: 10, 19, 28;
  --color-base-background-1: 255, 255, 255;
  --color-base-background-2: 243, 243, 243;
  --color-base-solid-button-labels: 255, 255, 255;
  --color-base-outline-button-labels: 10, 19, 28;
  --color-base-accent-1: 18, 18, 18;
  --color-base-accent-2: 51, 79, 180;

  --payment-terms-background-color: #ffffff;

  --gradient-base-background-1: #ffffff;
  --gradient-base-background-2: #f3f3f3;
  --gradient-base-accent-1: #121212;
  --gradient-base-accent-2: #334fb4;

  --media-padding: 0px;
  --media-border-opacity: 0.05;
  --media-border-width: 1px;
  --media-radius: 0px;
  --media-shadow-opacity: 0;
  --media-shadow-horizontal-offset: 0px;
  --media-shadow-vertical-offset: 4px;
  --media-shadow-blur-radius: 5px;
  --media-shadow-visible: 0;

  --page-width: 155rem;
  --page-width-margin: 0rem;

  --product-card-image-padding: 0rem;
  --product-card-corner-radius: 0rem;
  --product-card-text-alignment: left;
  --product-card-border-width: 0rem;
  --product-card-border-opacity: 0.1;
  --product-card-shadow-opacity: 0;
  --product-card-shadow-visible: 0;
  --product-card-shadow-horizontal-offset: 0rem;
  --product-card-shadow-vertical-offset: 0.4rem;
  --product-card-shadow-blur-radius: 0.5rem;

  --collection-card-image-padding: 0rem;
  --collection-card-corner-radius: 0rem;
  --collection-card-text-alignment: left;
  --collection-card-border-width: 0rem;
  --collection-card-border-opacity: 0.1;
  --collection-card-shadow-opacity: 0;
  --collection-card-shadow-visible: 0;
  --collection-card-shadow-horizontal-offset: 0rem;
  --collection-card-shadow-vertical-offset: 0.4rem;
  --collection-card-shadow-blur-radius: 0.5rem;

  --blog-card-image-padding: 0rem;
  --blog-card-corner-radius: 0rem;
  --blog-card-text-alignment: left;
  --blog-card-border-width: 0rem;
  --blog-card-border-opacity: 0.1;
  --blog-card-shadow-opacity: 0;
  --blog-card-shadow-visible: 0;
  --blog-card-shadow-horizontal-offset: 0rem;
  --blog-card-shadow-vertical-offset: 0.4rem;
  --blog-card-shadow-blur-radius: 0.5rem;

  --badge-corner-radius: 4rem;
  --popup-border-width: 1px;
  --popup-border-opacity: 0.1;
  --popup-corner-radius: 0px;
  --popup-shadow-opacity: 0;
  --popup-shadow-horizontal-offset: 0px;
  --popup-shadow-vertical-offset: 4px;
  --popup-shadow-blur-radius: 5px;

  --drawer-border-width: 1px;
  --drawer-border-opacity: 0.1;
  --drawer-shadow-opacity: 0;
  --drawer-shadow-horizontal-offset: 0px;
  --drawer-shadow-vertical-offset: 4px;
  --drawer-shadow-blur-radius: 5px;

  --spacing-sections-desktop: 0px;
  --spacing-sections-mobile: 0px;
  --grid-desktop-vertical-spacing: 8px;
  --grid-desktop-horizontal-spacing: 20px;
  --grid-mobile-vertical-spacing: 30px;
  --grid-mobile-horizontal-spacing: 4px;

  --text-boxes-border-opacity: 0.1;
  --text-boxes-border-width: 0px;
  --text-boxes-radius: 0px;
  --text-boxes-shadow-opacity: 0;
  --text-boxes-shadow-visible: 0;
  --text-boxes-shadow-horizontal-offset: 0px;
  --text-boxes-shadow-vertical-offset: 4px;
  --text-boxes-shadow-blur-radius: 5px;

  --buttons-radius: 0px;
  --buttons-radius-outset: 0px;
  --buttons-border-width: 1px;
  --buttons-border-opacity: 1;
  --buttons-shadow-opacity: 0;
  --buttons-shadow-visible: 0;
  --buttons-shadow-horizontal-offset: 0px;
  --buttons-shadow-vertical-offset: 4px;
  --buttons-shadow-blur-radius: 5px;
  --buttons-border-offset: 0px;

  --inputs-radius: 0px;
  --inputs-border-width: 1px;
  --inputs-border-opacity: 0.55;
  --inputs-shadow-opacity: 0;
  --inputs-shadow-horizontal-offset: 0px;
  --inputs-margin-offset: 0px;
  --inputs-shadow-vertical-offset: 4px;
  --inputs-shadow-blur-radius: 5px;
  --inputs-radius-outset: 0px;

  --variant-pills-radius: 40px;
  --variant-pills-border-width: 1px;
  --variant-pills-border-opacity: 0.55;
  --variant-pills-shadow-opacity: 0;
  --variant-pills-shadow-horizontal-offset: 0px;
  --variant-pills-shadow-vertical-offset: 4px;
  --variant-pills-shadow-blur-radius: 5px;
}

/*
 * Footer: section-footer.css floats .footer__content-top. Without a BFC on the footer,
 * .footer__content-bottom can overlap or collapse on some WP layouts (sidebar, WC, etc.).
 * Match stable stacking like the mirrored menu page.
 */
.footer.section-footer-padding {
  display: flow-root;
}

.footer__content-bottom {
  clear: both;
}

/*
 * Truck-hire & contact: .locos > svg is position:absolute; bottom:-39rem (locos.css), so the
 * white wave paints over the real footer after </main>. Shopify hides it on truck-hire via
 * body.template-page-truck-hire (base.css); contact has no equivalent — hide for both here.
 */
.locos.is-cf-area > svg {
  display: none !important;
}

/*
 * Mirrored sections use extreme z-index (section-colslider .col-slider, component-newsletter
 * .newsletter: 100000000000). Those contexts are scoped inside <main> but overflowing paint
 * can sit above the real footer unless <main> is one stacking unit below #shopify-section-footer.
 */
main#MainContent {
  isolation: isolate;
  position: relative;
  z-index: 0;
}

#shopify-section-footer {
  position: relative;
  z-index: 1;
}

/* Cap DIY Kits slider (corporate hire); keeps sane stacking inside main too. */
.drh-row.col-slider:not(.greybg),
.col-slider:not(.greybg) {
  z-index: 2 !important;
}

/* If mailing block is ever present, same cap as Shopify’s theme CSS. */
.drh-row.newsletter {
  z-index: 2 !important;
}

/* Footer rows: ensure top/bottom paint above any stray overlap inside the footer section. */
#shopify-section-footer footer.footer,
#shopify-section-footer .footer__content-top,
#shopify-section-footer .footer__content-bottom {
  position: relative;
  z-index: 0;
}

/*
 * About Us: main stacks below the footer section (z-index). The “Life at…” block uses a tall
 * carousel plus .info-nav-wrap (position:absolute; bottom:10rem). Without extra space, the
 * mailing/footer band reads as overlapping the slideshow and the page feels cut off when scrolling.
 */
body.template-page-about-us main#MainContent {
  padding-bottom: 10rem;
}

body.template-page-about-us #shopify-section-footer {
  margin-top: 5rem;
}

@media screen and (min-width: 750px) {
  body.template-page-about-us main#MainContent {
    padding-bottom: 14rem;
  }

  body.template-page-about-us #shopify-section-footer {
    margin-top: 7rem;
  }
}

/* Menu + Maseco case study: footer links row (.footer-mn) stays white (not collection grey). */
body.template-page-menu-v2 .drh-row.footer-mn,
body.template-article-case-study-post .drh-row.footer-mn {
  background-color: #fff;
}

/*
 * Cart page: remove product / site search UI (classic WooCommerce, blocks, predictive-search).
 * Scoped to body.woocommerce-cart only.
 */
body.woocommerce-cart predictive-search,
body.woocommerce-cart .header__icon--search,
body.woocommerce-cart .search-modal,
body.woocommerce-cart .modal__toggle--search,
body.woocommerce-cart details-modal[class*="search"],
body.woocommerce-cart .woocommerce-product-search,
body.woocommerce-cart .widget_product_search,
body.woocommerce-cart .widget.woocommerce.widget_product_search,
body.woocommerce-cart .widget_search,
body.woocommerce-cart .wc-block-product-search,
body.woocommerce-cart .wp-block-woocommerce-product-search,
body.woocommerce-cart .wp-block-search {
  display: none !important;
}