:root {
  --evo-brand-primary: #113164;
  --evo-brand-secondary: #0a1d3c;
  --evo-brand-accent: #6d9e96;
  --evo-header-background: #ffffff;
}
/* change logo on mobile layout */
.header-mobile .logo img { content:url('https://us.evocdn.io/dealer/1493/content/media/Brands/RPG%20SFS%20Logo_white.png'); }

.header-full .header-contacts a { color:white; }


.desktop .row-width-75p { width: 75%; margin: 0 auto; }

/* Disabled 2026-07-18: dead rule — the header nav renders outside
   the div.desktop wrapper, so this selector never matches anything.
   It was meant to cap top-level menu item width (items currently
   measure ~140px, so the cap had no visible effect anyway).
   If a long menu label ever needs capping, use this instead:
   nav.menu.hide-mobile .catalog-block ul.catalog > li { max-width: 250px; } */
/* .desktop nav.menu .catalog-block ul.catalog>li { max-width: 250px; } */

/* rbs = reduce bottom margin spacing */
.desktop .rbs-1 { margin-bottom: -1rem !important; } /* -16px */
.desktop .rbs-2 { margin-bottom: -2rem !important; } /* -32px */
.desktop .rbs-3 { margin-bottom: -3rem !important; } /* -48px */
.desktop .rbs-4 { margin-bottom: -4rem !important; } /* -64px */
.desktop .rbs-5 { margin-bottom: -5rem !important; } /* -80px */

/* text drop shadow */
.text-drop-shadow { text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.6); }

/* blinking text effect */
.blinking-text { animation: blinker 2s linear infinite; }

@keyframes blinker { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }


/* mobile footer */
@media only screen and (max-width: 768px) {
  .contacts .contact-block { width: 350px; margin: auto; }
  .contacts .contact-element { margin:auto; }
  .contacts .contact-block.contact-social { width: fit-content !important; margin: 16px auto; }
  .contactdetails_container .contacts { border-top: 1px solid #d3d3d3; }
}

.ex-content-page .row-breadcrumb { display: none; }


 /* ─── Reset ─────────────────────────────────── */

/* ─── Desktop mega-menu restyle ─────────────── */
/* Compact dropdown cards anchored to their menu item instead of
   full-width 500px sheets. Headings wrap instead of truncating.
   Scoped to nav.menu.hide-mobile (the desktop header menu), so
   the mobile menu is untouched. Uses the --evo-brand-* variables
   defined at the top of this stylesheet.
   Verified live against www.rpg.com on 2026-07-18 (1280/1440px).

   The single !important below (height) is required: the platform
   JS sets an inline height:500px on each panel, and only
   !important can override an inline style. Everything else wins
   on normal specificity.

   NOTE: panels anchor to their menu item. The 1st and 3rd items
   ("Print Solutions", "Application Solutions") anchor LEFT, the
   last item ("Shop by Category") anchors RIGHT, all others
   center under their item. If menu items are added, removed, or
   reordered in admin, revisit the two nth-child rules below. */

nav.menu.hide-mobile ul.catalog > li.has-submenu { position: relative; }

nav.menu.hide-mobile ul.submenu {
  width: max-content;
  min-width: 250px;
  max-width: min(1100px, calc(100vw - 180px));
  top: 100%;
  left: 50%;
  right: auto;
  transform: translateX(-50%);          /* default: center under the item */
  background: var(--evo-header-background, #ffffff);
  box-shadow: 0 16px 32px rgba(17, 49, 100, .16),
              0 2px 6px rgba(17, 49, 100, .08);
  border-top: 3px solid var(--evo-brand-primary);
  border-radius: 0 0 10px 10px;
  overflow: hidden;
}

/* left-most menus: anchor to the item's left edge */
nav.menu.hide-mobile ul.catalog > li:nth-child(1) > ul.submenu,
nav.menu.hide-mobile ul.catalog > li:nth-child(3) > ul.submenu {
  left: 0;
  transform: none;
}

/* right-most menu: anchor to the item's right edge */
nav.menu.hide-mobile ul.catalog > li:last-child > ul.submenu {
  left: auto;
  right: 0;
  transform: none;
}

/* panel interior: kill the fixed 500px height, size to content */
nav.menu.hide-mobile ul.submenu .submenucontainer {
  height: auto !important;              /* overrides inline height:500px set by platform JS */
  min-height: 0;
  width: auto;
  max-width: none;
  padding: 24px 30px 28px;
  align-items: flex-start;
  flex-wrap: wrap;
}

/* columns: size to content within sane bounds */
nav.menu.hide-mobile ul.submenu .submenucontainer > li {
  width: max-content;
  flex: 0 1 auto;
  min-width: 150px;
  max-width: 240px;
  margin: 0;
  padding: 0 16px;
}

/* column headings: wrap instead of ellipsis, clear hierarchy */
nav.menu.hide-mobile ul.submenu .submenucontainer > li > a {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  display: block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height: 1.4;
  color: var(--evo-brand-primary);
  padding: 0 0 9px;
  margin-bottom: 10px;
  border-bottom: 2px solid #e6ebf4;
}

nav.menu.hide-mobile ul.submenu .submenucontainer > li > a:hover {
  color: #1e56b0;
  border-bottom-color: #1e56b0;
}

/* child links: comfortable spacing + hover affordance */
nav.menu.hide-mobile ul.submenu .submenucontainer > li ul {
  margin: 0;
  padding: 0;
}

nav.menu.hide-mobile ul.submenu .submenucontainer > li ul li a {
  display: block;
  padding: 4px 0;
  font-size: 14px;
  line-height: 1.5;
  color: #44506a;
  white-space: normal;
  transition: color .15s ease, transform .15s ease;
}

nav.menu.hide-mobile ul.submenu .submenucontainer > li ul li a:hover {
  color: var(--evo-brand-primary);
  transform: translateX(3px);
  text-decoration: none;
}