/**
 * FX PixiJS — Scale-to-Fit (1920×1080 design lock)
 *
 * When body has the .fx-pixijs-scale-to-fit class, the entire FX PixiJS
 * outer template element is rendered at a fixed 1920px design width and
 * visually scaled down via CSS transform so every viewport between the
 * mobile threshold (1300px) and the ultra-wide threshold (2552px) shows
 * the EXACT same layout, font sizes, and label positions as a 1920×1080
 * monitor.
 *
 * Two outer elements are targeted because the plugin renders two
 * different templates depending on context:
 *   - default.php       → .fx-pixijs-wrapper (landing view)
 *   - tabbed_content.php → .fx-pixijs-tabbed-content (per-domain view)
 *
 * The body class and per-element negative bottom margin (used to keep
 * the document flow tight under the visually-shrunk content) are set by
 * fit-to-design.js. This file is a no-op outside that class so the
 * plugin's other styles are untouched on mobile and on 2552px+ screens.
 *
 * The PIXI Solution Popup (#solution-popup) is a SIBLING of these
 * outer elements, not a descendant, so it stays unscaled and keeps its
 * own media queries — exactly what we want for an overlay dialog.
 */

/* ---------------------------------------------------------------------
   1) Transform / layout
   --------------------------------------------------------------------- */
body.fx-pixijs-scale-to-fit {
    /* The transformed children are still 1920px wide in document flow
       (transform doesn't shrink layout boxes, only their paint), so the
       page would get a horizontal scrollbar without this clamp. On
       ultra-wide viewports (> 1920px) the wrapper's layout box is
       narrower than the viewport instead, but `margin: 0 auto` below
       handles that case by centering the wrapper and letting the
       surrounding section background show through as black bars. */
    overflow-x: hidden;
}

/* Letterbox the surrounding page section to BLACK so the area on
   either side of the centered 1920-design wrapper renders as proper
   bars on ultra-wide monitors (e.g. 2520×1152, 2560×1152) instead of
   exposing the page's default background.
   On 1920-and-narrower viewports the wrapper's visual fills the
   viewport horizontally so this black background is fully covered and
   produces no visible change. */
body.fx-pixijs-scale-to-fit section.custom-solutions {
    background-color: #000;
}

/* Only the OUTER .fx-pixijs-wrapper gets the transform. The plugin's
   tabbed view (.fx-pixijs-tabbed-content) is loaded via AJAX *into*
   #fx-pixijs-container, so it's already a descendant of the scaled
   wrapper and inherits the scale automatically — applying transform to
   it as well would double-scale the layout (e.g. 0.53 × 0.53 = 0.28).

   transform-origin stays at `top left` and the wrapper sits at the
   document's left edge (no auto margins). Centering on ultra-wide
   viewports is done via the `translateX` inside the transform:
     - viewport ≤ 1920px: --fx-design-translate-x is 0px and scale<=1
       shrinks the wrapper around top-left so the visual fills the
       viewport starting at x=0 (same as the pre-fix behavior).
     - viewport > 1920px: scale is clamped to 1 and translateX is set
       to (viewport - 1920) / 2 px, shifting the 1920-wide visual to
       the centered position with symmetric black bars on each side
       (painted by the section.custom-solutions rule above).

   We can't use `margin: 0 auto` for this: per CSS 2.1 §10.3.3, when a
   block element's width exceeds its containing block, auto margins are
   treated as 0 and the browser silently makes margin-right negative to
   satisfy the layout constraint — which pushed the visual rightward on
   sub-1920 laptops and clipped the tabs off the right edge. translateX
   isn't subject to that constraint. */
body.fx-pixijs-scale-to-fit .fx-pixijs-wrapper {
    width: 1920px !important;
    min-width: 1920px !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform-origin: top left;
    transform: translateX(var(--fx-design-translate-x, 0px)) scale(var(--fx-design-scale, 1));
    /* margin-bottom is applied as an inline style by fit-to-design.js
       (= -(1 - scale) * naturalHeight) so the next sibling sits flush
       under the visually-shrunk content instead of leaving a tall gap
       equal to (naturalHeight - visualHeight). At scale = 1 (ultra-wide
       viewports) this evaluates to 0, so there's no extra adjustment. */
}

/* The wrapper's children (#fx-pixijs-container and any AJAX-loaded
   .fx-pixijs-tabbed-content) must be allowed to take the full 1920
   design width regardless of inline-style or media-query widths set
   elsewhere.
   The .tab-content-container / .tab-content / .*-domains layers in the
   middle of the tabbed view are listed too because the legacy
   `@media (min-width: 2552px)` blocks in fx-pixijs-style.css and
   domain-slider.css force those same classes to `width: 100vw
   !important`. Without these overrides they spill out the right side
   of the locked 1920 wrapper on ≥ 2552px monitors (e.g. 2560×1440)
   and clip the side-mounted slider tabs against the body's
   overflow-x: hidden. */
body.fx-pixijs-scale-to-fit .fx-pixijs-wrapper > #fx-pixijs-container,
body.fx-pixijs-scale-to-fit .fx-pixijs-wrapper .fx-pixijs-tabbed-content,
body.fx-pixijs-scale-to-fit .fx-pixijs-wrapper .tab-content-container,
body.fx-pixijs-scale-to-fit .fx-pixijs-wrapper .tab-content,
body.fx-pixijs-scale-to-fit .fx-pixijs-wrapper .military-domains,
body.fx-pixijs-scale-to-fit .fx-pixijs-wrapper .law-enforcement-domains,
body.fx-pixijs-scale-to-fit .fx-pixijs-wrapper .unmanned-systems-domains,
body.fx-pixijs-scale-to-fit .fx-pixijs-wrapper #domain-slider-container,
body.fx-pixijs-scale-to-fit .fx-pixijs-wrapper #law-enforcement-slider-container,
body.fx-pixijs-scale-to-fit .fx-pixijs-wrapper #unmanned-systems-slider-container {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ---------------------------------------------------------------------
   2) Force the 1920+ baseline values to win over every smaller-viewport
      media query in fx-pixijs-style.css and domain-slider.css.

      We can't easily disable those `@media (max-width: 1919px)` blocks,
      so we re-assert the 1920 baseline values with a higher-specificity
      selector (body class) + !important. These mirror the rules in the
      `@media (min-width: 1920px)` blocks of the existing stylesheets.
   --------------------------------------------------------------------- */

/* Lock the landing-view container's design dimensions so the
   transform-scaled output matches the 1920×1080 reference on every
   laptop in the scale-to-fit range.

   The wireframe is a CSS background-image on `#fx-pixijs-container`
   set by fx-pixijs-main.js. That script also sets the container's
   inline `height` and `background-position` from the *real* viewport
   width / height — which is wrong when we're locked to a 1920 design.
   Concretely, fx-pixijs-main.js does:

     imageHeight = Math.max(window.innerHeight, window.innerWidth / 1.78)
     offset      = breakpoint(window.innerWidth)        // 280|210|175|140|112
     container.height            = (imageHeight + offset)px
     container.backgroundPosition = `center top ${offset}px`

   On a true 1920×1080 viewport that resolves to height=1360, offset=280
   (the values the layout was designed for: the wireframe image is
   1920×1078 inside a 1360-tall container, positioned at y=280 so it
   sits below the description/tabs, and the .maritime label whose
   `bottom: calc(13% - 780px)` puts its bottom edge at y≈1230 lands
   *inside* the container at 1230<1360).

   On a smaller laptop (e.g. 1366×768) the same JS resolves to
   height=943, offset=175 — so the container is too short, the image
   sits 105px too high, and MARITIME falls 150–290px below the
   container into the next page section (the overlap with the
   "Spectrum Dominance Resources" heading we kept seeing).

   We re-assert the design values here so the scale-to-fit transform
   produces the exact reference layout regardless of viewport size.

   Why this is safe for the AJAX-loaded tabbed view
   ------------------------------------------------
   `#fx-pixijs-container` is also the AJAX target for
   `.fx-pixijs-tabbed-content`. When that template loads,
   template-loader.js clears `background-image`, sets `height: auto`,
   and lets the multi-section content drive the natural height (which
   is always much larger than 1360px). `min-height` is therefore a
   no-op on the tabbed view (content > min-height), and the
   `background-position` rule is moot because there's no background
   image to position. */
body.fx-pixijs-scale-to-fit #fx-pixijs-container {
    min-height: 1360px !important;
    background-position: center top 280px !important;
}

body.fx-pixijs-scale-to-fit .fx-pixijs-tabbed-content {
    --domain-height: 800px !important;
}

body.fx-pixijs-scale-to-fit #fx-pixijs-text-container {
    font-size: 45px !important;
}

body.fx-pixijs-scale-to-fit .tabs-navigation,
body.fx-pixijs-scale-to-fit .landing-tabs-navigation {
    gap: 30px !important;
    margin-top: 30px !important;
    flex-direction: row !important;
}

body.fx-pixijs-scale-to-fit .tab-button,
body.fx-pixijs-scale-to-fit .landing-tab-button {
    padding: 15px 40px !important;
    font-size: 25px !important;
    margin-bottom: -2px;
}

body.fx-pixijs-scale-to-fit .text-overlay {
    font-size: 48px !important;
}

body.fx-pixijs-scale-to-fit .tabs-container {
    padding: 0 !important;
}

body.fx-pixijs-scale-to-fit .landing-tabs-section {
    padding: 1px 20px !important;
}

body.fx-pixijs-scale-to-fit .landing-tab-button .tab-icon,
body.fx-pixijs-scale-to-fit .tab-button .tab-icon {
    width: 24px !important;
    height: 24px !important;
}

body.fx-pixijs-scale-to-fit .landing-tab-content-container .tab-title h1 {
    font-size: 3em !important;
}

body.fx-pixijs-scale-to-fit .landing-tab-content-container .tab-description,
body.fx-pixijs-scale-to-fit .tab-description {
    font-size: 1.2em !important;
    margin-left: 180px !important;
    margin-right: 180px !important;
}


body.fx-pixijs-scale-to-fit .view-all-domains-icon {
    width: 18px !important;
    height: 18px !important;
}

body.fx-pixijs-scale-to-fit .view-all-domains-container {
    top: 105px !important;
    left: 30px !important;
}

/* Text-overlay positions baked into the wireframe background image
   (these are the default rules from the top of fx-pixijs-style.css —
   the smaller-viewport breakpoints override them with shrunken values
   that no longer line up with the locked 1920 canvas). */
body.fx-pixijs-scale-to-fit .air {
    top: calc(20% + 88px) !important;
    left: 10% !important;
}

body.fx-pixijs-scale-to-fit .land {
    top: calc(37% + 280px) !important;
    right: 13% !important;
}

body.fx-pixijs-scale-to-fit .maritime {
    bottom: calc(13% - 780px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

body.fx-pixijs-scale-to-fit .law-enforcement {
    top: calc(20% + 339px) !important;
    left: 10% !important;
}

body.fx-pixijs-scale-to-fit .disaster-response {
    left: 58% !important;
    top: calc(20% + 138px) !important;
}

body.fx-pixijs-scale-to-fit .border-security {
    left: 45% !important;
    top: calc(20% + 556px) !important;
}

body.fx-pixijs-scale-to-fit .unmanned-air {
    left: 40% !important;
    top: calc(20% + 112px) !important;
}

body.fx-pixijs-scale-to-fit .unmanned-ground {
    left: 63% !important;
    top: calc(20% + 471px) !important;
}

body.fx-pixijs-scale-to-fit .unmanned-maritime {
    top: calc(20% + 417px) !important;
    left: 12% !important;
}

/* Domain slider internals (from domain-slider.css 1920+ block) */
body.fx-pixijs-scale-to-fit .domain-label {
    font-size: 24px !important;
    top: 20px !important;
    left: 20px !important;
    padding: 5px 15px !important;
}

body.fx-pixijs-scale-to-fit .domain-tab {
    padding: 10px 20px !important;
    font-size: 16px !important;
}

body.fx-pixijs-scale-to-fit .domain-title {
    font-size: 18px !important;
}

body.fx-pixijs-scale-to-fit .domain-item .label {
    padding: 8px 15px !important;
    font-size: 14px !important;
}