/* =====================================================================
   MniGlobal — design-v2 responsive layer
   ---------------------------------------------------------------------
   The .dc.html pages are desktop-only: every element is styled with
   inline `style="..."` and there are no media queries. This sheet adds
   tablet + mobile behaviour WITHOUT touching the design-tool output.

   How it works:
   - The dc-runtime re-serialises inline styles deterministically
     (e.g. `display: grid; grid-template-columns: repeat(4, 1fr);`),
     so we can target structural elements with [style*="..."] selectors.
   - Inline styles beat normal CSS on specificity, so every override
     here uses !important (which always wins over non-important inline).
   - The hamburger menu is pure CSS (a hidden checkbox toggled by a
     <label>; `:checked ~ .dc-nav-links` reveals the panel) — no JS,
     because the runtime turns inline on* handlers into React props.

   Breakpoints:  <=1024px tablet   <=860px mobile nav   <=640px mobile
   ===================================================================== */

/* ---- always-on: keep the burger hidden on desktop, stop sideways scroll ---- */
.dc-nav-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dc-nav-burger { display: none; }
.dc-page { overflow-x: clip; }

/* Image reset: the explicit width/height attrs added for CLS map to
   presentational hints for BOTH dimensions. Inline styles only set width,
   so without this the height hint would stretch images vertically. This
   lets the attributes act purely as an aspect-ratio hint. Inline `height`
   (logos, etc.) still wins over this normal-specificity rule. */
img { max-width: 100%; height: auto; }

/* =====================================================================
   TABLET  ( <= 1024px )
   ===================================================================== */
@media (max-width: 1024px) {
  /* tighten the 1220px content gutters */
  [style*="max-width: 1220px"] { padding-left: 24px !important; padding-right: 24px !important; }

  /* 4-up grids and the 4-col footer become 2-up */
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: 1.5fr 1fr 1fr 1.3fr"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* ease the very large display headings */
  [style*="font-size: 60px"],
  [style*="font-size: 56px"],
  [style*="font-size: 52px"] { font-size: 42px !important; }
  [style*="font-size: 48px"],
  [style*="font-size: 46px"] { font-size: 36px !important; }
}

/* =====================================================================
   MOBILE NAVIGATION  ( <= 860px ) — pure-CSS hamburger
   ===================================================================== */
@media (max-width: 860px) {
  .dc-nav { position: relative; }

  .dc-nav-burger {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: auto; width: 46px; height: 46px;
    border: 1px solid #E6EAF0; border-radius: 9px; background: #fff;
    color: #1E3A78; font-size: 24px; line-height: 1; cursor: pointer;
    -webkit-tap-highlight-color: transparent; user-select: none;
    transition: background .15s ease, border-color .15s ease;
  }
  .dc-nav-burger:hover { background: #F4F6F9; border-color: #D7DEEA; }

  /* the desktop "Request a Quote" pill is redundant once Contact is in the panel */
  .dc-nav-cta { display: none !important; }

  /* the links become a dropdown panel under the bar */
  .dc-nav-links {
    display: none !important;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column !important; align-items: stretch !important; gap: 0 !important;
    background: #fff; border-top: 1px solid #E6EAF0; border-bottom: 1px solid #E6EAF0;
    box-shadow: 0 18px 34px rgba(13, 30, 58, .12);
    padding: 6px 0 !important;
  }
  .dc-nav-links a { padding: 14px 26px !important; border-bottom: 1px solid #F1F3F7; }
  .dc-nav-links a:last-child { border-bottom: none; }

  /* the hidden checkbox, toggled by the burger <label>, opens the panel */
  .dc-nav-toggle:checked ~ .dc-nav-links { display: flex !important; }
}

/* =====================================================================
   MOBILE  ( <= 640px )
   ===================================================================== */
@media (max-width: 640px) {
  /* stack every grid to a single column ... */
  [style*="display: grid"] { grid-template-columns: 1fr !important; }
  /* ... except the hero stat strip, which reads better as a 2x2 block
     (this rule sits after the one above so it wins on equal specificity) */
  [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* drop the fixed split-hero height so stacked content can breathe */
  [style*="min-height: 560px"] { min-height: 0 !important; }

  /* display headings */
  [style*="font-size: 60px"],
  [style*="font-size: 56px"],
  [style*="font-size: 52px"] { font-size: 32px !important; line-height: 1.12 !important; }
  [style*="font-size: 48px"],
  [style*="font-size: 46px"] { font-size: 30px !important; line-height: 1.14 !important; }
  [style*="font-size: 38px"],
  [style*="font-size: 36px"],
  [style*="font-size: 34px"] { font-size: 26px !important; line-height: 1.18 !important; }
  [style*="font-size: 32px"] { font-size: 24px !important; }

  /* trim oversized vertical padding */
  [style*="padding: 118px"] { padding-top: 56px !important; padding-bottom: 56px !important; }
  [style*="padding: 96px"]  { padding-top: 48px !important; }
  [style*="padding: 80px 0"]{ padding-top: 48px !important; padding-bottom: 48px !important; }
  [style*="padding: 70px 32px"] { padding-top: 44px !important; padding-bottom: 44px !important; }
  [style*="padding: 64px 0"]{ padding-top: 40px !important; padding-bottom: 40px !important; }

  /* a touch tighter gutters on small phones */
  [style*="max-width: 1220px"] { padding-left: 18px !important; padding-right: 18px !important; }
}

/* ---- unified site footer (same markup on every page) ---- */
.mni-footer a.foot-a{transition:color .15s ease}
.mni-footer a.foot-a:hover{color:#fff}
/* unified footer grid: 4-col -> 2-col (tablet) -> 1-col (mobile) */
@media (max-width:1024px){ .mni-foot-grid{grid-template-columns:repeat(2,1fr)!important} }
@media (max-width:640px){ .mni-foot-grid{grid-template-columns:1fr!important;gap:28px!important} }

/* =====================================================================
   DROPDOWN NAVIGATION (Services & Contact Submenus)
   ===================================================================== */
.nav-dropdown { position: relative; display: inline-block; }
.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: #ffffff;
  border: 1px solid #E6EAF0;
  border-radius: 10px;
  box-shadow: 0 14px 32px rgba(13, 30, 58, 0.14);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 100;
}
.nav-dropdown:hover .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown-menu a {
  display: block;
  padding: 10px 18px !important;
  font-size: 14px;
  font-weight: 600;
  color: #2A3445 !important;
  transition: background 0.15s ease, color 0.15s ease;
  border-bottom: none !important;
  text-decoration: none;
}
.nav-dropdown-menu a:hover {
  background: #F4F6F9;
  color: #F1572A !important;
}

/* Products Mega Dropdown (2-Column on Desktop) */
.nav-dropdown-menu.products-menu {
  min-width: 520px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 12px;
}
.nav-dropdown-menu.products-menu a {
  padding: 8px 12px !important;
  font-size: 13.5px;
  border-radius: 6px;
}

/* Mobile Dropdown Behavior (<= 860px) */
@media (max-width: 860px) {
  .nav-dropdown { display: block !important; width: 100%; }
  .nav-dropdown-menu {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    background: #F8FAFC !important;
    padding: 4px 0 6px 20px !important;
    min-width: 0 !important;
  }
  .nav-dropdown-menu.products-menu {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 4px 0 6px 20px !important;
  }
  .nav-dropdown-menu a {
    padding: 10px 20px !important;
    font-size: 14px;
  }
}