/* Shared site chrome, linked from every page with the site nav.
   1. The nav mega menus (Services, Training, Success Stories, Learn, About). One set of spacing for all of them.
   2. The footer on phones. */

/* --- 1. MEGA MENUS ----------------------------------------------------------------------------
   Spacing scale used by every menu: panel padding 24, column gap 32, item padding 10,
   4 between items, 12 between icon and text, header 8 above its first item. */
.mega-menu-container {
  background-color: #fff;
  box-shadow: 0 40px 80px -24px rgba(50, 50, 93, .25), 0 24px 48px -28px rgba(0, 0, 0, .3);
  border: 1px solid #f0f0f0;
  border-radius: 10px;
  padding: 24px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 296px);
  gap: 32px;
  width: max-content;
  max-width: 92vw;
  position: absolute;
  top: 100%;
  z-index: 999;
  text-align: left;
}
.menu-arrow {
  position: absolute;
  top: -9px;
  width: 18px;
  height: 18px;
  background-color: #fff;
  border-top: 1px solid #f0f0f0;
  border-left: 1px solid #f0f0f0;
  transform: rotate(45deg);
  z-index: 1001;
}
.mega-column-header {
  margin: 0 0 8px 10px;
  color: #8898aa;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.mega-link-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0 0 4px;
  padding: 10px;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color .15s ease;
}
.mega-link-item:last-child { margin-bottom: 0; }
.mega-link-item:hover,
.mega-link-item:focus-visible { background-color: #fff5eb; }
.mega-link-item:focus-visible { outline: 2px solid var(--oog-orange, #ff6b00); outline-offset: 0; }
.mega-icon {
  font-size: 22px;
  color: var(--oog-orange, #ff6b00);
  flex-shrink: 0;
  margin-top: 1px;
}
.mega-link-title {
  font-weight: 600;
  color: #32325d;
  font-size: 15px;
  line-height: 20px;
}
.mega-link-desc {
  font-size: 13px;
  color: #6b7c93;
  line-height: 18px;
  margin-top: 2px;
}

/* Services: the same items in a two-column grid, with the tools on one line underneath */
.mega-menu-container.mega-services {
  display: block;
  padding-bottom: 0;
}
.mega-services .mega-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 296px)); gap: 4px 32px; }
.mega-services .mega-grid .mega-link-item { margin: 0; }
.mega-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
  margin: 16px -24px 0;
  padding: 14px 34px;
  border-top: 1px solid #f0f0f0;
  background: #fafbfc;
  border-radius: 0 0 10px 10px;
  font-size: 13.5px;
}
.mega-tools-label { color: #8898aa; font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.mega-tools a { display: inline-flex; align-items: center; gap: 6px; color: #32325d; font-weight: 600; text-decoration: none; }
.mega-tools a:hover { color: var(--oog-orange, #ff6b00); }
.mega-tools a i { color: var(--oog-orange, #ff6b00); font-size: 16px; }

/* Phones and tablets: every menu sits inside the slide-down nav as a plain list of titles */
@media screen and (max-width: 991px) {
  .mega-menu-container,
  .mega-menu-container.mega-services {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    box-shadow: none !important;
    border: none !important;
    padding: 4px 12px 8px !important;
    background-color: transparent !important;
  }
  .menu-arrow { display: none !important; }
  .mega-column { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #e6e6e6; }
  .mega-column:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
  .mega-column-header { margin: 8px 0 4px 8px; }
  .mega-services .mega-column-header { display: none; }
  .mega-services .mega-grid { grid-template-columns: 1fr; gap: 0; }
  .mega-link-item { margin: 0; padding: 10px 8px; align-items: center; }
  .mega-link-desc { display: none; }
  .mega-tools { margin: 6px 0 0; padding: 12px 8px; background: transparent; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) { .mega-link-item { transition: none; } }

/* --- 2. FOOTER ON PHONES: the Webflow grid is wider than a phone; two columns, logo on its own row --- */
@media (max-width: 767px) {
  .footer-grid { grid-template-columns: 1fr 1fr !important; grid-row-gap: 28px !important; grid-column-gap: 20px !important; }
  .footer-grid > .footer-column:first-child { grid-column: 1 / -1; }
}