/* Companion stylesheet for the redesign's inline-style pages.
   The pages keep their approved inline styles for colors/spacing/type;
   this file only adds what inline styles structurally cannot do:
   :hover cascade wins (see also hover.js for data-hover) and
   @media breakpoints for the fixed grid-template-columns used
   throughout. Classes below are additive, sprinkled onto the existing
   inline-styled elements — nothing here changes the desktop look. */

@media (max-width: 860px) {
  .nav-links, .hdr-cta { display: none !important; }
  .nav-toggle { display: inline-flex !important; }
  body.nav-open .nav-links {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #FFFFFF;
    border-bottom: 1px solid #e2e8f0;
    padding: 12px;
    gap: 4px;
    max-height: calc(100vh - 62px);
    overflow-y: auto;
  }
  body.nav-open .hdr-dark .nav-links { background: #0D2144; }
  .nav-links .hdr-cta-clone { display: flex !important; margin-top: 8px; }
  .two-col { grid-template-columns: 1fr !important; }
  .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 900px) {
  .grid-3, .grid-4, .grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 600px) {
  .grid-2, .grid-3, .grid-4, .grid-5, .grid-6 { grid-template-columns: 1fr !important; }
}



.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: #0f172a;
}
.hdr-dark .nav-toggle { color: #FFFFFF; }