/* Force LIGHT theme across all devices and screen sizes.
 * Loaded after /css/style-main.css and /css/responsive.css.
 */

/* Hide dark mode UI controls everywhere */
.js-darkmode-btn,
.mobile-dark-mode,
.right-nav .js-darkmode-btn,
.right-nav .js-darkmode-btn * {
  display: none !important;
}

/* If anything accidentally adds the dark class, neutralize the most visible pieces */
body.body_dark {
  background: #ffffff !important;
  color: #1d2746 !important;
}

/* Google Translate language menu iframe sizing.
 * This must live in force-light.css because it is loaded after theme CSS.
 * Goal: keep the menu as a single scrollable column on mobile and a tidy panel on desktop.
 */

/* Universal constraints for the translate wrapper and gadget (both desktop + mobile) */
.translate-wrapper {
  max-width: 100% !important;
  overflow: hidden !important;
}

.translate-wrapper .goog-te-gadget {
  max-width: 100% !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

.translate-wrapper .goog-te-combo {
  max-width: 100% !important;
  white-space: nowrap !important;
}

/* Desktop: keep iframe menu as a tidy panel */
iframe.goog-te-menu-frame {
  z-index: 99999 !important;
  width: 360px !important;
  max-width: 92vw !important;
  max-height: 70vh !important;
}

.goog-te-menu2 {
  max-height: 70vh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 767.98px) {
  /* Mobile: constrain the Google Translate select. On some mobile browsers, the menu behaves better
   * (less "full screen takeover") when the select is in a fixed-width, overflow-hidden wrapper.
   */
  .translate-wrapper {
    width: 180px !important;
    max-width: 180px !important;
  }

  .translate-wrapper .goog-te-gadget {
    width: 180px !important;
    max-width: 180px !important;
  }

  .translate-wrapper .goog-te-combo {
    width: 180px !important;
    max-width: 180px !important;
  }

  /* Mobile: narrow iframe menu to force single-column scrollable list */
  iframe.goog-te-menu-frame {
    width: 240px !important;
    max-width: 240px !important;
    height: 75vh !important;
    max-height: 75vh !important;
    left: 8px !important;
    right: auto !important;
  }
}

/* Mobile: responsive.css forces .modal-content background to #010101 (dark).
 * Override so modals match the light site theme.
 */
@media (max-width: 991px) {
  .modal-content {
    background: #ffffff !important;
    color: #1d2746 !important;
  }
  .modal-header,
  .modal-body,
  .modal-footer {
    background: #ffffff !important;
    color: inherit !important;
  }
  .modal-header .close {
    color: #1d2746 !important;
    opacity: 0.8 !important;
  }
}