/*
Theme Name: GR8 Elementor Starter
Theme URI: https://www.gr8design.co.za/
Author: GR8 Designs Group
Description: Lightweight GR8 starter theme for Elementor Free. Provides the approved dark biker header/footer globally so Elementor Pro Theme Builder is not required.
Version: 1.1.0
Text Domain: gr8-elementor-starter
*/
/* GR8 Designs Group – Elementor global CSS reference */
:root{
 --gr8-bg:#07111B;--gr8-deep:#0B1824;--gr8-panel:#101E2B;
 --gr8-red:#CC2929;--gr8-blue:#0877BC;--gr8-orange:#F39A17;
 --gr8-paper:#F2EFE9;--gr8-white:#FFFFFF;--gr8-muted:#AAB7C3;
}
body{background:var(--gr8-bg);color:var(--gr8-white);font-family:'Montserrat',Arial,Helvetica,sans-serif;margin:0;}
h1,h2,h3,.gr8-display{font-family:'Bebas Neue','Arial Narrow',Impact,sans-serif;text-transform:uppercase;letter-spacing:.01em;}
.gr8-section{background:var(--gr8-bg);padding:72px 0;}
.gr8-panel{background:var(--gr8-panel);border:1px solid rgba(255,255,255,.10);border-radius:10px;}
.gr8-btn{display:inline-block;background:var(--gr8-red);color:#fff;padding:14px 22px;border-radius:5px;font-weight:700;text-transform:uppercase;}
.gr8-btn.blue{background:var(--gr8-blue)} .gr8-btn.orange{background:var(--gr8-orange);color:#111}
.gr8-placeholder-page{margin:0;padding:0;background:#070D12;line-height:0;}
.gr8-placeholder-page img{width:100%;height:auto;display:block;margin:0;}

*{box-sizing:border-box}a{text-decoration:none}.gr8-wrap{width:min(1180px,92vw);margin:auto}

/* ===== GR8 GLOBAL HEADER — cross-platform / responsive ===== */
.gr8-site-header{
  position:sticky;
  top:0;
  z-index:9999;
  width:100%;
  background:rgba(4,10,15,.98);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.gr8-header-row{
  width:min(1380px,96vw);
  min-height:82px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:nowrap;
}
.gr8-logo{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  margin-right:auto;
}
.gr8-logo img{
  display:block;
  width:86px;
  height:62px;
  max-width:none;
  object-fit:contain;
}
.gr8-nav{
  display:flex;
  align-items:stretch;
  flex:0 0 auto;
  min-width:0;
}
.gr8-nav ul{
  display:flex;
  align-items:stretch;
  justify-content:flex-end;
  flex-wrap:nowrap !important;
  gap:18px;
  margin:0;
  padding:0;
  list-style:none;
}
.gr8-nav li{
  display:flex;
  align-items:stretch;
  flex:0 0 auto;
  margin:0;
  padding:0;
  white-space:nowrap !important;
}
.gr8-nav a,
.gr8-nav a:visited{
  display:flex;
  align-items:center;
  min-height:82px;
  padding:3px 0 0;
  border-bottom:3px solid transparent;
  color:#fff !important;
  font-family:'Montserrat',Arial,Helvetica,sans-serif;
  font-size:13px;
  font-weight:700;
  font-style:normal;
  font-stretch:normal;
  line-height:1 !important;
  letter-spacing:0;
  word-spacing:0;
  white-space:nowrap !important;
  text-transform:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
.gr8-nav .current-menu-item>a,
.gr8-nav .current-menu-ancestor>a,
.gr8-nav a:hover,
.gr8-nav a:focus,
.gr8-nav a:active{
  color:#fff !important;
  border-bottom-color:var(--gr8-red);
}
.gr8-header-quote,
.gr8-header-quote:visited{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  min-height:46px;
  padding:0 20px;
  border-radius:5px;
  background:var(--gr8-red);
  color:#fff !important;
  font-family:'Montserrat',Arial,Helvetica,sans-serif;
  font-size:13px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
}
.gr8-header-quote:hover,
.gr8-header-quote:focus{
  color:#fff !important;
  filter:brightness(1.08);
}
.gr8-mobile-toggle{
  display:none;
  appearance:none;
  -webkit-appearance:none;
  width:44px;
  height:44px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:5px;
  background:transparent;
  color:#fff;
  font:700 25px/1 Arial,Helvetica,sans-serif;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  flex:0 0 44px;
}

/* Slightly tighten a desktop header before switching to the mobile menu. */
@media (max-width:1360px) and (min-width:1181px){
  .gr8-header-row{gap:15px;width:min(1280px,97vw)}
  .gr8-nav ul{gap:14px}
  .gr8-nav a,.gr8-nav a:visited{font-size:12px}
  .gr8-header-quote,.gr8-header-quote:visited{font-size:12px;padding:0 15px}
}

/* Do not squash or wrap menu words. Switch cleanly to a menu button instead. */
@media(max-width:1180px){
  .gr8-header-row{position:relative;width:min(100%,96vw);min-height:72px;gap:12px}
  .gr8-logo img{width:76px;height:56px}
  .gr8-mobile-toggle{display:inline-flex}
  .gr8-nav{
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:100%;
    width:100%;
    background:#050c12;
    border-top:1px solid rgba(255,255,255,.08);
    border-bottom:1px solid rgba(255,255,255,.12);
    box-shadow:0 12px 24px rgba(0,0,0,.28);
  }
  .gr8-site-header.is-menu-open .gr8-nav{display:block}
  .gr8-nav ul{display:block;width:100%;padding:8px 0;}
  .gr8-nav li{display:block;width:100%;}
  .gr8-nav a,.gr8-nav a:visited{
    display:flex;
    width:100%;
    min-height:46px;
    padding:0 16px;
    border-bottom:0;
    border-left:3px solid transparent;
    font-size:13px;
    line-height:1.2 !important;
  }
  .gr8-nav .current-menu-item>a,
  .gr8-nav .current-menu-ancestor>a,
  .gr8-nav a:hover,
  .gr8-nav a:focus{border-left-color:var(--gr8-red);background:rgba(255,255,255,.04)}
	
  .gr8-site-header.is-menu-open .gr8-nav {
    max-height: calc(100vh - 68px);   /* fallback */
    max-height: calc(100dvh - 68px);  /* handles mobile browser toolbars */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;     /* stops the page behind from scrolling */
  }
}
@media(max-width:700px){
  .gr8-header-row{min-height:68px}
  .gr8-logo img{width:70px;height:52px}
  .gr8-header-quote{display:none}
}

/* ===== FOOTER ===== */
.gr8-site-footer{background:#050B10;border-top:1px solid rgba(255,255,255,.1);padding:44px 0 18px}.gr8-footer-grid{display:grid;grid-template-columns:1.15fr 1.25fr .85fr 1fr;gap:32px}.gr8-footer-grid h4{font:28px 'Bebas Neue','Arial Narrow',sans-serif;margin:0 0 14px}.gr8-footer-grid p,.gr8-footer-grid a{font-size:13px;color:#c7d0d8;line-height:1.8}.gr8-footer-grid a{display:block}.gr8-footer-brand img{width:120px;margin-bottom:12px}.gr8-division-logos img{max-width:130px;max-height:70px;object-fit:contain;margin:6px 0}.gr8-copyright{margin-top:28px;border-top:1px solid rgba(255,255,255,.1);padding-top:16px;text-align:center;color:#788795;font-size:12px}
@media(max-width:980px){.gr8-footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.gr8-footer-grid{grid-template-columns:1fr}.gr8-site-footer{padding-top:32px}}
/* ============================================================
   GR8 RIDER SUPPLY — DESKTOP DROPDOWN MENUS
   Fixes Shop / Custom Racewear / Patches & Clubs dropdowns
   ============================================================ */

@media (min-width:1181px) {

    /* Only the FIRST menu level stays horizontal */
    .gr8-nav > ul {
        display:flex !important;
        align-items:stretch !important;
        justify-content:flex-end !important;
        flex-wrap:nowrap !important;
        gap:18px !important;
        margin:0 !important;
        padding:0 !important;
        list-style:none !important;
        overflow:visible !important;
    }

    .gr8-nav > ul > li {
        position:relative !important;
        display:flex !important;
        align-items:stretch !important;
        overflow:visible !important;
    }

    /* SUBMENU */
    .gr8-nav > ul > li > ul.sub-menu {
        display:none !important;
        position:absolute !important;
        top:100% !important;
        left:0 !important;

        width:260px !important;
        min-width:260px !important;

        margin:0 !important;
        padding:8px 0 !important;

        flex-direction:column !important;
        align-items:stretch !important;
        justify-content:flex-start !important;
        gap:0 !important;

        list-style:none !important;

        background:#0B1014 !important;
        border-top:3px solid #FF5A00 !important;

        box-shadow:0 12px 28px rgba(0,0,0,.45) !important;
        z-index:999999 !important;
    }

    /* SHOW DROPDOWN */
    .gr8-nav > ul > li:hover > ul.sub-menu,
    .gr8-nav > ul > li:focus-within > ul.sub-menu {
        display:flex !important;
    }

    /* DROPDOWN ROWS */
    .gr8-nav > ul > li > ul.sub-menu > li {
        display:block !important;
        width:100% !important;
        margin:0 !important;
        padding:0 !important;
    }

    /* DROPDOWN LINKS */
    .gr8-nav > ul > li > ul.sub-menu > li > a,
    .gr8-nav > ul > li > ul.sub-menu > li > a:visited {
        display:block !important;
        width:100% !important;
        min-height:0 !important;

        padding:12px 16px !important;

        border:0 !important;
        border-left:3px solid transparent !important;

        background:#0B1014 !important;
        color:#FFFFFF !important;

        font-family:'Montserrat',Arial,Helvetica,sans-serif !important;
        font-size:13px !important;
        font-weight:700 !important;
        line-height:1.25 !important;

        text-transform:none !important;
        white-space:normal !important;
    }

    .gr8-nav > ul > li > ul.sub-menu > li > a:hover,
    .gr8-nav > ul > li > ul.sub-menu > li > a:focus {
        background:#151B20 !important;
        color:#FF5A00 !important;
        border-left-color:#FF5A00 !important;
    }

    /* Make sure header does not clip dropdown */
    .gr8-site-header,
    .gr8-header-row,
    .gr8-nav {
        overflow:visible !important;
    }
}