/* GLOBAL HELVETICA NEUE FONT */
body,
button,
input,
textarea,
select,
#menu > ul > li > a,
a.action_button,
#overlay-menu ul li a,
#Subheader .title,
h1, h2, h3, h4, h5, h6,
blockquote,
.chart_box .chart .num,
.counter .desc_wrapper .number-wrapper,
.how_it_works .image .number,
.pricing-box .plan-header .price,
.quick_fact .number-wrapper,
.woocommerce .product div.entry-summary .price {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

/* FULL-WIDTH HEADER BAR (fixes blank sides on wide screens) */
#Top_bar .container {
  max-width: 90% !important;
  width: 90% !important;
}

/* Give it nice left/right breathing room */
#Top_bar .container {
  padding-left: 40px !important;
  padding-right: 40px !important;
}

/* Smaller padding on smaller screens */
@media (max-width: 1024px) {
  #Top_bar .container {
    padding-left: 25px !important;
    padding-right: 25px !important;
  }
}
/* =========================
   LOGO VISIBILITY
   ========================= */

/* Desktop defaults */
.logo img.logo-main,
.logo img.logo-sticky { display: block; }

.logo img.logo-mobile,
.logo img.logo-mobile-sticky { display: none; }

/* Mobile: show mobile logo, hide desktop/sticky */
@media (max-width: 768px) {
  .logo img.logo-main,
  .logo img.logo-sticky,
  .logo img.logo-mobile-sticky { display: none !important; }
  .logo img.logo-mobile { display: block !important; }
}

/* Sticky state (if theme adds .is-sticky on scroll) */
.is-sticky .logo img.logo-main { display: none; }
.is-sticky .logo img.logo-sticky { display: block; }
@media (max-width: 768px) {
  .is-sticky .logo img.logo-mobile { display: none !important; }
  .is-sticky .logo img.logo-mobile-sticky { display: block !important; }
}

/* =========================
   HEADER: FORCE SOLID BLACK (ALL STATES)
   ========================= */

/* Cover common BeTheme/Muffin wrappers + header builder */
header,
#Header,
#Header_wrapper,
#Action_bar,
#Top_bar,
#Top_bar.is-sticky,
.sticky-header,
.header-fixed,
.mhb-header,
.mhb-header .menu_wrapper,
#Top_bar .menu_wrapper,
#Top_bar .top_bar_left,
#Top_bar .top_bar_right {
  background-color: #000 !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Kill decorative pseudo elements/overlays that can reintroduce red */
#Action_bar::before,
#Action_bar::after,
#Top_bar::before,
#Top_bar::after,
#Header_wrapper::before,
#Header_wrapper::after,
.mhb-header::before,
.mhb-header::after {
  background: transparent !important;
}

/* Mobile slide-out (if used) */
#Side_slide,
#Side_slide .menu_wrapper { background: #000 !important; }

/* Menu text for contrast */
#Top_bar .menu > li > a,
.mhb-header .menu > li > a,
header .menu > li > a {
  color: #fff !important;
}
#Top_bar .menu > li > a:hover,
.mhb-header .menu > li > a:hover,
header .menu > li > a:hover {
  color: #f1f1f1 !important;
}

/* =========================
   HEADER "BECOME A DEALER" — RED CTA (HEADER ONLY)
   ========================= */

/* Match the actual href path in your menu */
#Top_bar .menu a[href*="content/sportsman/becomeadealer.php"],
.mhb-header .menu a[href*="content/sportsman/becomeadealer.php"],
header .menu a[href*="content/sportsman/becomeadealer.php"] {
  background: #d3252d !important;
  color: #fff !important;
  display: inline-block;
  padding: 10px 18px !important;
  border-radius: 4px;
  line-height: 1.2;
  font-weight: 700;
  text-transform: uppercase;
  border: none !important;
}
#Top_bar .menu a[href*="content/sportsman/becomeadealer.php"]:hover,
.mhb-header .menu a[href*="content/sportsman/becomeadealer.php"]:hover,
header .menu a[href*="content/sportsman/becomeadealer.php"]:hover {
  background: #b30000 !important;
  color: #fff !important;
}
#Top_bar .menu li a[href*="content/sportsman/becomeadealer.php"],
.mhb-header .menu li a[href*="content/sportsman/becomeadealer.php"] {
  margin-left: 8px;
}

/* =========================
   SLIDER + ARROWS
   ========================= */

.slider-wrapper {
  position: relative;
  margin: 0 auto;
  max-width: 1100px;
  padding: 0 40px;
}

/* Hide default swiper arrows; use custom ones */
.swiper-button-next,
.swiper-button-prev { display: none; }
#solis-next, #solis-prev { display: block; }

.custom-swiper-button-prev,
.custom-swiper-button-next {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  font-size: 36px;
  color: #333;
  background: #fff;
  padding: 10px 12px;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  z-index: 10;
}
.custom-swiper-button-prev:hover,
.custom-swiper-button-next:hover { color: #d3252d; }
.custom-swiper-button-prev { left: 0; }
.custom-swiper-button-next { right: 0; }

.swiper.other-tractors-carousel { width: 100%; padding: 10px 0; }
.other-tractors-carousel .swiper-slide { text-align: center; }
.other-tractors-carousel .swiper-slide img {
  width: 100%;
  max-width: 180px;
  height: auto;
  margin: 0 auto;
  display: block;
  border-radius: 6px;
}
.other-tractors-carousel .swiper-slide p {
  margin-top: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

/* Financing button */
.financing-button {
  position: absolute;
  bottom: 20px;
  left: 40px;
  background-color: #d3252d;
  color: #fff;
  padding: 12px 24px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 4px;
}

/* =========================
   SPEC TABLE — DISABLE HOVERS
   ========================= */

#Content .specs-tab-content .spec-table td:hover,
#Content .specs-tab-content .spec-table th:hover,
#Content .specs-tab-content .spec-table tr:hover td,
#Content .specs-tab-content .spec-table tr:hover th,
#Content .specs-tab-content .spec-table tr.highlight:hover,
#Content .specs-tab-content .spec-table tr.highlight:not(.no-highlight):hover,
#Content .spec-table td:hover,
#Content .spec-table th:hover,
#Content .spec-table tr:hover td,
#Content .spec-table tr:hover th,
#Content .spec-table tr.highlight:hover,
#Content .spec-table tr.highlight:not(.no-highlight):hover {
  background-color: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
  text-shadow: none !important;
  cursor: default !important;
}

/* Links inside tables: no hover change */
#Content .specs-tab-content .spec-table a:hover,
#Content .spec-table a:hover {
  color: inherit !important;
  text-decoration: none !important;
}

/* =========================
   FAQ ACCORDION
   ========================= */

.faq-section {
  background:#fff;
  max-width:800px;
  margin:0 auto;
  padding:40px 20px;
  border-radius:6px;
  color:#333;
  box-sizing:border-box;
}
.faq-question {
  width:100%;
  padding:12px 20px;
  background:#cc0000;
  border:none;
  color:#fff;
  cursor:pointer;
  text-align:left;
  font-size:16px;
  font-weight:bold;
}
.faq-question:hover { background:#b30000; }
.faq-question:focus-visible { outline: 2px solid #333; outline-offset: 2px; }
.faq-answer {
  display:none;
  background:#fff;
  color:#333;
  padding:15px 20px;
  font-size:15px;
  line-height:1.6;
}

/* =========================
   HERO + HEADINGS
   ========================= */

.hero-section {
  background-image: url('../images/hero-tractor.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#Header_wrapper h1,
#Header_wrapper h2,
#Header_wrapper h3,
.inner h1,
.inner h2,
.inner h3 {
  text-shadow: 2px 2px 4px rgba(0,0,0,.6);
	
/* 0) Make sure this block is loaded LAST (after theme CSS & your black header rule) */

/* 1) Kill any global black background/overlay on the header */
#Header_wrapper,
#Header_wrapper:before {
  background: none !important;
  background-color: transparent !important;
}

/* 2) Page-specific hero image (page ID 20) */
body.page-id-20 #Header_wrapper {
  background-image: url('/soliswebsite/content/sportsman/images/home_sportsman_header1.jpg') !important;
  background-repeat: no-repeat !important;
  background-position: center bottom !important;
  background-size: cover !important;
  min-height: 550px !important;
}
	
	/* Prevent sideways jiggle */
html, body { width:100%; max-width:100%; overflow-x:hidden; }

/* Lock the page when menu is open */
html.menu-open, body.menu-open { overflow:hidden; height:100dvh; }

/* Backdrop overlay */
#mobile-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.6);
  z-index:9998; display:none;
}
.menu-open #mobile-overlay{ display:block; }

/* Drawer panel */
#mobile-menu{
  position:fixed; right:0; top:0;
  width:100%; max-width:420px;   /* or 100vw for full-screen */
  height:100dvh;                 /* use dvh to include URL bar behavior */
  background:#000; z-index:9999;
  transform:translateX(100%); transition:transform .3s ease;
}
.menu-open #mobile-menu{ transform:translateX(0); }
/* 1) Stop background scroll & horizontal jiggle while menu is open */
html.menu-open, body.menu-open {
  position: fixed;           /* locks the page */
  overflow: hidden;
  inset: 0;
  width: 100%;
  height: 100dvh;            /* handles mobile URL bar changes */
}

/* 2) Fullscreen overlay behind the drawer */
#mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 9998;
  display: none;
}
.menu-open #mobile-overlay { display: block; }

/* 3) Force any common mobile-nav drawer to cover the real viewport */
[class*="mobile"][class*="menu"],
[id*="mobile"][id*="menu"],
[class*="off"][class*="canvas"],
[class*="nav"][class*="mobile"] {
  position: fixed !important;
  top: 0; right: 0; left: 0; bottom: 0;     /* full screen */
  width: 100vw !important;
  max-width: none !important;
  height: 100dvh !important;
  background: #000;                          /* your menu bg */
  z-index: 9999 !important;
  transform: translateX(100%);
  transition: transform .28s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.menu-open [class*="mobile"][class*="menu"],
.menu-open [id*="mobile"][id*="menu"],
.menu-open [class*="off"][class*="canvas"],
.menu-open [class*="nav"][class*="mobile"] {
  transform: translateX(0);
}

/* 4) Prevent horizontal scroll anywhere */
html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
/* === Fix BeTheme mobile drawer === */

/* lock background when menu is open */
html.menu-open, body.menu-open {
  position: fixed;
  overflow: hidden;
  inset: 0;
  width: 100%;
  height: 100dvh;
}

/* full-screen dark overlay */
#body_overlay, #mfn-mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 20000;
  display: none;
}
.menu-open #body_overlay,
.menu-open #mfn-mobile-overlay { display: block; }

/* force the BeTheme drawer to be full height and sit on top */
#Side_slide {
  position: fixed !important;
  top: 0; right: 0; bottom: 0; left: auto;
  width: 100vw !important;          /* full-screen; change to 420px if you prefer a panel */
  max-width: none !important;
  height: 100dvh !important;
  transform: translateX(100%);
  transition: transform .28s ease;
  background: #000;
  z-index: 20001 !important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* when open, slide in */
.menu-open #Side_slide { transform: translateX(0); }

/* prevent horizontal jiggle */
html, body { width:100%; max-width:100%; overflow-x:hidden; }
/* === BeTheme mobile menu hard fix — CSS only === */

/* Lock the page when the side menu is open (uses :has, supported in modern mobile browsers) */
body:has(#Side_slide.open),
html:has(#Side_slide.open) {
  position: fixed;
  overflow: hidden;
  inset: 0;
  width: 100%;
  height: 100dvh;
}

/* Show/force the dark overlay when open */
#body_overlay { display: none; }
body:has(#Side_slide.open) #body_overlay {
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 20000;
}

/* Make the drawer fill the real viewport and sit on top */
#Side_slide {
  position: fixed !important;
  top: 0; right: 0; bottom: 0; left: auto;
  width: 100vw !important;
  max-width: none !important;
  height: 100dvh !important;
  transform: translateX(100%);
  transition: transform .28s ease;
  background: #000;
  z-index: 20001 !important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* When BeTheme toggles it open */
#Side_slide.open { transform: translateX(0); }

/* Prevent horizontal jiggle everywhere */
html, body { width:100%; max-width:100%; overflow-x:hidden; }
/* Lock background & full-height drawer */
html.menu-open, body.menu-open { position: fixed; overflow: hidden; inset: 0; width: 100%; height: 100dvh; }

#Side_slide {
  position: fixed !important; top: 0; right: 0; bottom: 0; left: auto;
  width: 100vw !important; height: 100dvh !important;
  z-index: 20001 !important; overflow-y: auto; -webkit-overflow-scrolling: touch;
}

/* Dark overlay above content */
#body_overlay, #mfn-mobile-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  z-index: 20000; display: none;
}

/* Prevent horizontal jiggle */
html, body { width:100%; max-width:100%; overflow-x:hidden; }

	

  

  /* 3) Prevent horizontal gutters revealing page background */
  html, body, #Wrapper {
    overflow-x: hidden !important;
    max-width: 100%;
  }

  /* 4) Keep the Request Quote bar active but below the menu */
  :root { --rq-xs: 60px; }
  #RequestQuoteBar, #request-quote-bar, .request-quote-bar, .request-quote {
    min-height: var(--rq-xs) !important;
    z-index: 900 !important;        /* UNDER the drawer */
  }
  body { padding-bottom: var(--rq-xs) !important; }
}





  /* 3) Make the page background match your dark theme so no white peeks through */
  html, body, #Wrapper { background: #0b0b0b !important; overflow-x: hidden !important; }

  /* 4) Ensure the red bar stays under the drawer */
  #RequestQuoteBar, #request-quote-bar, .request-quote-bar, .request-quote { z-index: 900 !important; }
}



  /* No horizontal jiggle, and no light gutters behind */
  html, body, #Wrapper { overflow-x: hidden !important; background: #000 !important; }

  /* Keep the red bar below the drawer on phones */
  #RequestQuoteBar, #request-quote-bar, .request-quote-bar, .request-quote { z-index: 900 !important; }
}


  /* Prevent any light gutter from peeking through */
  html, body, #Wrapper { background: #000 !important; overflow-x: hidden !important; }

  /* Keep the red bar under the drawer */
  #RequestQuoteBar, #request-quote-bar, .request-quote-bar, .request-quote { z-index: 900 !important; }
}
<style id="tiny-menu-open-only">
/* Only on tiny phones, and only WHILE the menu is open */
@media (max-width: 420px) {
  body.m1-tiny-open #Side_slide {
    position: fixed !important;
    top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
    width: 100vw !important; max-width: 100vw !important; height: 100vh !important;
    background: #000 !important;
    box-shadow: none !important;
    z-index: 11000 !important;
    -webkit-overflow-scrolling: touch;
  }
  /* Keep the overlay clickable so tapping outside still closes the menu,
     but make it visually transparent so you don't see gray/white. */
  body.m1-tiny-open #body_overlay {
    position: fixed !important; inset: 0 !important;
    background: transparent !important; opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 10990 !important;   /* under the drawer */
  }
  /* Prevent horizontal gutters behind */
  body.m1-tiny-open, body.m1-tiny-open #Wrapper { overflow-x: hidden !important; }
  /* Keep the red bar under the drawer */
  body.m1-tiny-open #RequestQuoteBar,
  body.m1-tiny-open #request-quote-bar,
  body.m1-tiny-open .request-quote,
  body.m1-tiny-open .request-quote-bar { z-index: 900 !important; }
}
/* 1) Shrink hero height on phones so the red band can't get huge */
@media (max-width: 768px){
  #Header_wrapper, #Subheader{
    min-height: clamp(140px, 32vh, 260px) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* 2) If a hero image 404s, don't show a giant solid red block */
#Header_wrapper, #Subheader{
  background-repeat: no-repeat !important;
  background-position: center bottom !important;
  background-size: cover !important;
}

/* 3) This page likely sets a red block via inline style with heavy % padding.
      Normalize that padding on mobile so it doesn't create extra height. */
@media (max-width: 768px){
  .column_attr[style*="background-color:#c2202d"],
  .mcb-section[style*="background-color:#c2202d"]{
    padding: 16px !important;
  }
}