/* ------------------------------------------------------------------------------------------------------------------------------ */
/* -- STYLE.CSS                                                                                                                   */
/* -- Shared stylesheet for Automotive Statistics pages.                                                                          */
/* -- Reusable component styles, responsive layouts, scalable sizing, and shared chart formatting.                                */
/* -- Defines base styles, navigation, chart layouts, Highcharts styling, quick facts, footnotes, modals, and responsive rules.   */
/*------------------------------------------------------------------------------------------------------------------------------- */
/* -- NOTES                                                                                                                       */
/* -- Responsive layout overrides are grouped at the bottom of the stylesheet.                                                    */
/* -- Shared component styles should be defined before page-specific layout sections.                                             */
/* -- Chart title/subtitle font sizing is controlled within page-specific JavaScript files.                                       */
/* -- Highcharts tooltip styling depends on HTML-based tooltips enabled within the chart JS configuration.                        */
/* -- Shared styling uses reusable classes; IDs are primarily reserved for unique JS/chart hooks.                                 */
/*------------------------------------------------------------------------------------------------------------------------------- */
/* -- CONTENTS                                                                                                                    */
/* -- Base Styles                           Global page styling, typography, spacing, and overflow behavior.                      */
/* -- Navbar                                Shared navigation bar layout, links, and active page styling.                         */
/* -- Chart Wrappers                        Reusable chart containers, chart panels, and shared chart element styling.            */
/* -- Main Tab Chart Layout                 Grid layout for the main page chart arrangement.                                      */
/* -- Dashboard Layouts and Components      Shared page, chart-grid, map, and quick-fact layouts and grid arrangements            */
/* -- Grid Overflow Prevention              Prevents charts and grid items from overflowing narrow layouts or mobile screens.     */
/* -- Highcharts Graph Styles               Shared Highcharts colors, tooltip styling, and chart visual formatting.               */
/* -- Quick Facts                           Highlighted summary statistics, reusable fact boxes, and info buttons.                */
/* -- Footnotes                             Shared and page-specific explanatory note formatting.                                 */
/* -- Highcharts Export Menu Layering       Keeps Highcharts export menus above overlay controls.                                 */
/* -- Modal                                 Shared popup/modal overlay, typography, spacing, and interaction styling.             */
/* -- Responsive Layout                     Screen-size-specific layout and sizing adjustments for tablets and phones.            */
/*------------------------------------------------------------------------------------------------------------------------------- */


/* ==================================================
   BASE STYLES
   ================================================== */

/* Prevent horizontal page overflow */
/* Stops charts, grids, tooltips, SVGs, and other content from extending beyond the viewport */
html,
body {
  max-width: 100%;
  margin: 0 !important;
  overflow-x: clip;
}

/* Global page styles */
body {
  font-family: Roboto, sans-serif;
  margin: 1.25rem;
}

/* Main page title */
h1 {
  text-align: center;
}

/* Introductory page description text */

.intro-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.subheading {
  font-size: clamp(0.95rem, 1.5vw, 1.1rem) !important;          /* smaller subheading for layout */
  line-height: 1.3 !important;
  text-align: left;
  color: #555;
  margin-top: 2rem;
  margin-bottom: 0;
  flex: 1;
}

.intro-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.intro-image {
  width: clamp(3rem, 7vw, 6rem);
  height: auto;
}

.last-updated {
  font-size: 0.8rem;
  color: #666;
  text-align: center;
  line-height: 1.2;
}

/* Visually hide content while keeping it available to screen readers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}


/* Allow the CIDR content wrapper to use nearly the full page width. */
/* .wrapper.wrapperMarginTop {
  width: 96% !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
} */


/* ==================================================
   LINKS
   Shared styling for all website hyperlinks
   ================================================== */

a,
a:visited {
  color: #0B5EA8;
  text-decoration: none;
}

a:hover,
a:focus {
  color: #0B5EA8;
  text-decoration: underline;
}

a:focus-visible {
  outline: 2px solid #0B5EA8;
  outline-offset: 2px;
}


/* ==================================================
   NAVBAR
   Responsive button-style page navigation
   ================================================== */

/* Navigation container */
.viz-navbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.5rem, 1.5vw, 0.75rem);

  margin: 1.25rem 0;
  padding: 0.9375rem 0;

  border-top: 2px solid #ccc;              /* width of top bar of the navbar, above the text -- keep this as 2px, not rem */
  border-bottom: 2px solid #ccc;           /* width of bottom bar of the nvabar, below the text -- keep this as 2px, not rem */

  font-size: clamp(0.9rem, 1.5vw, 1.1rem);   /* navigations/headings are sometimes better as clamp -- desktop/mobile friendly */
}

/* Navigation buttons */
.viz-navbar__link,
.viz-navbar__link:visited {
  display: flex;
  align-items: center;
  justify-content: center;

  flex: 1;
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
  box-sizing: border-box;
  white-space: nowrap;

  background-color: #f8f8f8;
  border: 1px solid #ccc;
  border-radius: 0.3rem;

  color: #333;
  text-decoration: none;
  line-height: 1;
  font-size: inherit;
}

/* Hover */
.viz-navbar__link:hover,
.viz-navbar__link:focus {
  background-color: #e8e8e8;
  color: #333;
  text-decoration: none;
}

/* Keyboard focus */
.viz-navbar__link:focus-visible {
  outline: 2px solid #333;
  outline-offset: 2px;
}

/* Current page */
.viz-navbar__link--active,
.viz-navbar__link--active:link,
.viz-navbar__link--active:visited {
  background-color: #112E51;
  border-color: #112E51;
  color: #fff;
  font-weight: 700;
}

/* Keep the current page highlighted on hover */
.viz-navbar__link--active:hover {
  background-color: #112E51;
  border-color: #112E51;
  color: #fff;
}


/* ==================================================
   CHART WRAPPERS
   Shared chart card containers, layout wrappers, and reusable chart element styling
   ================================================== */

/* --- CHART CARD CONTAINER --- */
.chart-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;         /* establish positioning context */
  padding-top: 0.3rem;
  background-color: #f8f8f8 !important;     /* important prevents CIDR from replacing this with #f5f5f5. */
  border-radius: 0.9375rem;
  overflow: visible;          /* allow menus/tooltips outside card */
}

/* --- HIGHCHARTS CONTAINER --- */
.chart-container {
  width: 100%;
  max-width: 100%;
  height: 25rem;
  padding: 0.625rem;
  box-sizing: border-box;
  position: relative;       /* ensures chart elements can position absolutely */
  background-color: #f8f8f8 !important;     /* important prevents CIDR from replacing this with #f5f5f5. */
  border-radius: inherit;
  overflow: visible;        /* allow chart UI overflow */
  z-index: 10;              /* keep chart UI above nearby elements */
}


/* ==================================================
   MAIN TAB CHART LAYOUT
   Responsive two-column chart grid
   ================================================== */

.chart-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;   /* this is needed for CIDR rendering - it will look too large on local, but needs to be kept */
}


/* ==================================================
   INTERNATIONAL TRADE/BUSINESS/CONSUMER TABS DASHBOARD LAYOUTS AND COMPONENTS
   Shared page wrappers, map containers, and quick fact layouts.
   Reusable 1:1, 1:2, and 2:1 dashboard grid arrangements.
   ================================================== */

/* --- PAGE LAYOUT WRAPPER --- */
.dashboard-layout {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* --- STACKED QUICK FACT COLUMN --- */
.quick-facts {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  height: clamp(30rem, 40vw, 38rem);
  box-sizing: border-box;
}

/* --- TWO-CHART TOP ROW --- */
/* Used for a row with 2 charts (or generally a 1:1 ratio) */
/* Currently used for top of Business Highlights and Consumer Spending pages */
.dashboard-two-charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

/* --- QUICK FACTS + MAP ROW --- */
/* Used for a row with quick facts on left and map on right (or generally a 1:2 ratio) */
/* Currently used for bottom of Business Highlights page */
.dashboard-facts-map-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;  /* boxes left, map right */
  gap: 1.25rem;
  align-items: stretch;
}

/* --- MAP + QUICK FACTS ROW --- */
/* Used for a row with map on left and on right (or generally a 2:1 ratio) */
/* Currently used for top of International Trade and bottom of Consumer Spending pages */
.dashboard-map-facts-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;  /* map left, facts right */
  gap: 1.25rem;
  align-items: stretch;
}

/* --- MAP CONTAINER --- */
.dashboard-map {
  box-sizing: border-box;
  width: 100%;
  height: clamp(30rem, 40vw, 38rem);
  min-height: 25rem;  /* keeps it from collapsing */
  padding: 0.625rem;
  background-color: #f8f8f8 !important;     /* important prevents CIDR from replacing this with #f5f5f5. */
  border-radius: 0.9375rem;
  position: relative;
  overflow: visible;
}

/* --- NESTED MAP CHART --- */
/* Used when a map card also contains an overlaid HTML control. */
.map-chart {
  width: 100%;
  height: 100%;
  position: relative;
}

/* --- MAP DEFAULT ERROR --- */
/* Displayed when map data cannot be loaded or rendered successfully. */
.map-error {
  margin: 1rem;
  color: #666;
  font-size: 1.2rem;
  text-align: center;
}


/* ==================================================
   INTERNATIONAL TRADE MAP BUTTONS
   Positions and styles the Exports/Imports controls used to switch the trade map and partner chart.
   ================================================== */

/* Center the Exports/Imports controls directly below the map subtitle. */
.trade-type-controls {
  position: absolute;
  top: 7rem;
  left: 50%;
  z-index: 10;

  display: flex;
  /* justify-content: center; */
  gap: 1.1rem;

  transform: translateX(-50%);    /* Shift the controls left by half their own width for true centering. */
}

/* Style the controls like text tabs instead of standard browser buttons */
.dashboard-map .trade-type-button {
  position: static;     /* Overrides the shared absolute positioning for map buttons. */

  padding: 0.2rem 0.3rem;

  border: 0;
  border-bottom: 2px solid transparent;

  background: transparent;
  color: #666666;

  font-family: Roboto, sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.2;

  cursor: pointer;
}

/* Use the export color when Exports is selected. */
.dashboard-map .trade-type-button--exports.trade-type-button--active {
  color: var(--exports-color);
  border-bottom-color: var(--exports-color);
}

/* Use the import color when Imports is selected. */
.dashboard-map .trade-type-button--imports.trade-type-button--active {
  color: var(--imports-color);
  border-bottom-color: var(--imports-color);
}

/* Show a visible outline during keyboard navigation. */
.dashboard-map .trade-type-button:focus-visible {
  outline: 3px solid rgba(17, 46, 81, 0.18);
  outline-offset: 2px;
}


/* ==================================================
   GRID OVERFLOW PREVENTION
   Prevents charts and grid items from overflowing narrow layouts or mobile screens
   ================================================== */

/* Allow grid children to shrink without forcing horizontal overflow. */
.chart-grid > *,
.dashboard-two-charts-grid > *,
.dashboard-facts-map-grid > *,
.dashboard-map-facts-grid > * {
  min-width: 0;
}


/* ==================================================
   HIGHCHARTS GRAPH STYLES
   Shared colors and tooltip styling for chart visuals
   ================================================== */

/* NOTE: Chart title/subtitle font sizes are set in each page-specific JS file for flexibility. */
/* NOTE: Custom tooltip styling requires useHTML: true in the Highcharts JS configuration. */

/* --- HIGHCHARTS SERIES COLORS --- */
/* Color references:
   https://xdgov.github.io/data-design-standards/components/colors
   https://www.census.gov/aem-user-guide/foundations/colors.html */


/* --- SERIES 1 - TEAL --- */
.highcharts-color-0 .highcharts-graph,                            /* actual chart line on the graph */
.highcharts-legend-item.highcharts-color-0 .highcharts-graph {    /* line sample in the legend */
  stroke: #1E9EAE;
}

.highcharts-tooltip .highcharts-color-0 {                         /* series-colored tooltip elements */
  color: #1E9EAE;
}

/* only apply custom fill/stroke colors to line/scatter/column series markers */
/* prevents map polygons and bubble series from being overwritten with the default series color */
.highcharts-line-series.highcharts-color-0 .highcharts-point,
.highcharts-legend-item.highcharts-color-0 .highcharts-point,     /* square/circle symbol in the legend */
.highcharts-series.highcharts-series-0:not(.highcharts-map-series):not(.highcharts-mapbubble-series) .highcharts-point {
  fill: #1E9EAE;
  stroke: #1E9EAE;
}

/* --- SERIES 2 - PLUM 800 --- */
.highcharts-color-1 .highcharts-graph,
.highcharts-legend-item.highcharts-color-1 .highcharts-graph {
  stroke: #763482;
}

.highcharts-tooltip .highcharts-color-1 {
  color: #763482;
}

.highcharts-line-series.highcharts-color-1 .highcharts-point,
.highcharts-legend-item.highcharts-color-1 .highcharts-point,
.highcharts-series.highcharts-series-1:not(.highcharts-map-series):not(.highcharts-mapbubble-series) .highcharts-point {
  fill: #763482;
  stroke: #763482;
}

/* --- SERIES 3 - ORANGE --- */
.highcharts-color-2 .highcharts-graph,
.highcharts-legend-item.highcharts-color-2 .highcharts-graph {
  stroke: #EC6910;
}

.highcharts-tooltip .highcharts-color-2 {
  color: #EC6910;
}

.highcharts-line-series.highcharts-color-2 .highcharts-point,
.highcharts-legend-item.highcharts-color-2 .highcharts-point,
.highcharts-series.highcharts-series-2:not(.highcharts-map-series):not(.highcharts-mapbubble-series) .highcharts-point {
  fill: #EC6910;
  stroke: #EC6910;
}

/* --- SERIES 4 - NAVY --- */
.highcharts-color-3 .highcharts-graph,
.highcharts-legend-item.highcharts-color-3 .highcharts-graph {
  stroke: #112E51;
}

.highcharts-tooltip .highcharts-color-3 {
  color: #112E51;
}

.highcharts-line-series.highcharts-color-3 .highcharts-point,
.highcharts-legend-item.highcharts-color-3 .highcharts-point,
.highcharts-series.highcharts-series-3:not(.highcharts-map-series):not(.highcharts-mapbubble-series) .highcharts-point {
  fill: #112E51;
  stroke: #112E51;
}

/* --- INTERNATIONAL TRADE COLORS --- */
:root {
  --exports-color: #763482;
  --imports-color: #1A8A99;
}
/* Force the trade bar chart to use the export or import color selected in the button. */
#countryBarContainer
.highcharts-series.highcharts-series-0
.highcharts-point {
  fill: var(--trade-chart-color);
  stroke: var(--trade-chart-color);
}
/* Use the full export or import color when hovering over a country bar. */
#countryBarContainer
.highcharts-series.highcharts-series-0
.highcharts-point-hover {
  fill: var(--trade-chart-hover-color);
  stroke: var(--trade-chart-hover-color);
}

/* --- TOOLTIP TEXT HELPERS --- */
.tooltip-neutral {
  color: gray;
}

.tooltip-dot {
  font-size: 0.8rem;
}

/* --- HIGHCHARTS TOOLTIP LAYER --- */
/* Styles the tooltip element itself inside Highcharts. */
/* Keeps the tooltip above chart elements such as the title, subtitle, and plotted data. */
.highcharts-tooltip {
  z-index: 1000 !important;
  pointer-events: none;             /* prevent tooltip from blocking mouse interactions */
}

/* --- HIGHCHARTS OUTSIDE TOOLTIP CONTAINER LAYER --- */
/* Applies when tooltip.outside = true. */
/* Keeps the tooltip's page-level container above HTML controls outside the chart, such as the Exports and Imports buttons. */
.highcharts-tooltip-container {
  z-index: 20 !important;
}

/* --- HIGHCHARTS EXPORT MENU LAYER --- */
/* keep exporting menu above synchronized tooltips */
.highcharts-contextmenu,
.highcharts-menu {
  z-index: 2000 !important;
}

/* --- REMOVE DEFAULT SVG TOOLTIP BOX --- */
/* needed because the tooltip was overlapping the subtitle/title */
.highcharts-tooltip-box {
  fill-opacity: 0 !important;
  stroke-width: 0 !important;
}

/* --- CUSTOM HTML TOOLTIP BOX --- */
/* needs to be defined because we forced the tooltip to not be the default */
.highcharts-tooltip > span {

  /* slightly soften the tooltip background while maintaining strong readability  - keeps the tooltip from overlapping the subtitle */
  background-color: rgba(248, 249, 250, 0.95) !important;     /* rgba(red 248, green 249, blue250, alpha/transparency 95% - slight transparency) */

  border: 1px solid #e5e7eb;                                  /* soft light gray border */
  border-radius: 0.4rem;                                        /* slightly rounded corners */
  box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.15);             /* soft shadow */

  padding: 0.5rem !important;                                   /* inner tooltip spacing */

}

/* --- CHART BACKGROUND --- */
.highcharts-background {
  fill: #f8f8f8 !important;     /* important prevents CIDR from replacing this with #f5f5f5. */
}


/* ==================================================
   QUICK FACTS
   ================================================== */

/* --- GENERAL QUICK FACT BOXES --- */
.fact-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-height: 0;
  padding: clamp(1.25rem, calc(0.9rem + 0.6vw), 2rem);
  background-color: #f8f8f8 !important;     /* important prevents CIDR from replacing this with #f5f5f5. */
  border-radius: 0.9375rem;
  text-align: center;
  color: #666;
  font-size: clamp(1rem, calc(0.7rem + 0.6vw), 1.4rem);
  line-height: 1.15;
}

/* --- QUICK FACT NUMBERS --- */
/* Default number styling and spacing for quick fact boxes */
/* this default is used on most pages */
.fact-number {
  font-size: clamp(1.6rem, calc(1.1rem + 0.9vw), 2.2rem);
  font-weight: 600;
  margin-bottom: 0.625rem;
  color: #112e51d7;
}

/* --- QUICK FACT BOXES WITH TWO VALUES AND TEXT IN MIDDLE --- */
/* Used when a quick fact displays a primary value, descriptive text, and a secondary value. */
.fact-box--two-values {
  gap: 0.35rem;
}

.fact-box--two-values .fact-number {
  margin: 0;
  line-height: 1.4;
}

.fact-box--two-values .fact-text {
  margin: 0.2rem 0;
}

/* --- INTERNATIONAL TRADE FACT NUMBER COLORS --- */
.fact-number--exports {
  color: var(--exports-color);
}

.fact-number--imports {
  color: var(--imports-color);
}

/* --- INFO BUTTON --- */
.corner-button {

  /* Positioning */
  position: absolute;             /* position relative to the parent fact box */
  top: 0.6rem;  right: 0.6rem;    /* offset from top-right corner */
  z-index: 10;                    /* make sure button is on top of the fact-box */

  /* Sizing  - remove default padding and setup responsive button sizing (min 22px, max 30px, scales with screen width) */
  /* doesn't work great within CIDR */
  width: clamp(22px, 1.8vw, 30px);
  height: clamp(22px, 1.8vw, 30px);
  padding: 0;                     /* remove default padding */

  /* Appearance */
  border: none;                   /* remove default browser button border */
  background: url('./img/info_button.png') no-repeat center center;    /* Use custom info icon image */
  background-size: contain;       /* scale image cleanly within button area */

  /* Interaction */
  cursor: pointer;                /* show pointer cursor on hover */
}

.dashboard-map .corner-button {
  position: absolute;
  z-index: 20;
}


/* ==================================================
   FOOTNOTES
   Shared styling with page-specific formatting
   ================================================== */

/* --- FOOTNOTE CONTAINER --- */
.footnotes {
  padding: 1.25rem;
  background-color: #f8f8f8 !important;     /* important prevents CIDR from replacing this with #f5f5f5. */
  border-radius: 0.9375rem;
  color: #666;
  font-size: 0.85rem;
}

/* Keep footnote links the same size as the surrounding footnote text - needed for CIDR */
.footnotes a {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* Add a small amount of space between dashboard footnotes */
.footnotes p {
  margin: 0 0 0.55rem;
  font-size: inherit;
  line-height: inherit;
}

/* Add a little extra space above footnote notes without superscripts */
.footnotes p + .footnote-note {
  margin-top: 0.6rem;
}

/* Remove extra space after the final dashboard footnote */
.footnotes p:last-child {
  margin-bottom: 0;
}

/* --- MAIN PAGE FOOTNOTES --- */
.main-footnotes {
  margin-top: 1.25rem;
}

/* --- INTERNATIONAL TRADE/BUSINESS/CONSUMER DASHBOARD FOOTNOTES --- */
.dashboard-footnotes {
  margin-top: 0;
}


/* ============================================================================================= */
/* SOURCE BOX                                                                                    */
/* ============================================================================================= */

/* Container for the Census logo and source text */
.source-box {
  display: flex;                              /* Place the logo and source text side by side */
  justify-content: space-between;             /* Push the logo left and source text right */
  align-items: center;                        /* Vertically center the logo and source links */
  min-height: 6rem;                           /* Give the box enough vertical space */
  margin-top: 1.25rem;                        /* Match the spacing used elsewhere on the page */
  padding: 0.75rem 1.25rem 0.75rem 0.25rem;    /* Match the footnote container padding */
  box-sizing: border-box;                     /* Include padding in the total box size */

  background-color: #f8f8f8 !important;     /* Match the footnote background */
  border-radius: 0.9375rem;                   /* Match the footnote rounded corners */
}

/* Census logo inside the source box */
.source-box__logo img {
  display: block;                             /* Remove extra inline-image spacing */
  width: 23rem;                               /* Set the logo width */
  max-width: 100%;                            /* Prevent the logo from overflowing its container */
  height: auto;                               /* Keep the logo's original proportions */
}

/* Source links shown on the right side of the box */
.source-box__sources {
  text-align: right;                          /* Align source information to the right */
  color: #666;                              /* Match the general footnote text color */
}

/* Remove unnecessary paragraph spacing around source lines */
.source-box__sources p {
  margin: 0 0 0.2rem;
}

/* Remove extra space after the final source */
.source-box__sources p:last-child {
  margin-bottom: 0;
}

/* Keep source links the same size as the surrounding text */
.source-box__sources a {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* Source links shown on the right side of the box */
.source-box__sources,
.source-box__sources p,
.source-box__sources a {
  font-size: clamp(0.6rem, 1vw, 0.7rem) !important;     /* Keep all source text and links at the same smaller size */
}


/* ==================================================
   HIGHCHARTS EXPORT MENU AND OTHER LAYERING
   ================================================== */

/* Had issues with buttons disappearing when in full screen - the next few definitions fix that */
/* Allow the map card to fill the browser window in fullscreen mode. */
.dashboard-map:fullscreen {
    width: 100vw;
    height: 100vh;
    /* background-color: white; */
}

/* Keep the Exports and Imports controls visible in fullscreen mode. */
.dashboard-map:fullscreen .trade-type-controls {
  z-index: 40;
}

/* Put the controls below the Highcharts export menu while it is open in fullscreen. */
.dashboard-map:fullscreen:has(
  .highcharts-contextmenu:not([style*="display: none"])
) .trade-type-controls {
  z-index: 0;
}

/* Raise the Highcharts container above the trade controls only while the export menu is open. */
.dashboard-map:has(
  .highcharts-contextmenu:not([style*="display: none"])
) .highcharts-container {
  z-index: 30 !important;
}

/* Keep the chart background transparent while the menu is open so the rest of the Exports/Imports controls remain visible. */
.dashboard-map:has(
  .highcharts-contextmenu:not([style*="display: none"])
) .highcharts-background {
  fill: transparent !important;
}


/* ===============================
   MODAL - INFO POPUP BOX
   Shared overlay used for chart and quick fact info
   =============================== */

/* --- MODAL BACKDROP --- */
/* full-screen dark overlay behind the popup */
#modalWrapper {
  display: none;                      /* hidden by default until JS opens it */
  position: fixed;                    /* stays fixed on screen while scrolling */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);   /* dark transparent backdrop */
  z-index: 999999;                    /* keeps modal above all other page content */
  justify-content: center;            /* center modal horizontally */
  align-items: center;                /* center modal vertically */
}

/* --- MODAL CONTENT BOX --- */
/* popup window itself */
#infoModal {
  width: 37.5rem;
  max-width: 90vw;            /* prevents overflow on smaller screens */
  max-height: 85vh;           /* prevents modal from being taller than screen */
  padding: 1.75rem;           /* more breathing room inside the box */
  box-sizing: border-box;
  overflow-y: auto;           /* scroll inside modal if content is long */
  background: #ffffff;
  border-radius: 0.9375rem;     /* softer rounded corners */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);    /* stronger popup shadow -- keep as 10px 30px, not rem*/
  text-align: left;
}

/* --- MODAL TITLE --- */
#modalTitle {
  margin-top: 0;
  margin-bottom: 1.125rem;
  font-size: 1.375rem;
  text-align: center;
  color: #112E51;
}

/* --- MODAL SECTION HEADINGS --- */
#modalContent p.modal-section-title {
  margin-bottom: 0.375rem;
  font-size: 1.0625rem !important;
  font-weight: 600 !important;

}

/* --- MODAL TEXT LINE SPACING --- */
/* Controls spacing between individual modal text/link rows. */
#modalContent p {
  margin: 0.3125rem 0;
}

/* --- MODAL NOTES --- */
/* smaller explanatory text used for industry notes, methodology notes, dataset notes */
.modal-note {
  margin-top: 0.375rem;     /* small spacing above note */
  color: #444;            /* softer text color */
  font-size: 0.8125rem;     /* slightly smaller than normal modal text */
  line-height: 1.4;         /* improve readability */
  font-style: italic;       /* italicize note text */
}

/* --- MODAL DIVIDER LINE --- */
/* creates soft horizontal separator lines between modal sections */
.modal-divider {
  margin: 0.875rem 0;                   /* spacing above/below divider */
  border: none;                         /* remove default browser border */
  border-top: 1px solid #e5e5e5;      /* soft gray line -- keep this as 1px, not rem */
}

/* --- MODAL SPACER --- */
/* used between modal sections/links to create subtle vertical separation */
.modal-spacer-xs {
  height: 0.125rem;
}

/* --- MODAL CLOSE BUTTON --- */
#infoModal #modalClose {
  appearance: none;
  -webkit-appearance: none;

  position: static;      /* override .dashboard-map button in fullscreen */

  margin-top: 1.125rem;
  padding: 0.5rem 0.875rem;

  border: 1px solid #c8c8c8;    /* keep this as 1px, not rem */
  border-radius: 0.4rem;

  background: #e8e8e8;
  color: #2a2a2a;

  cursor: pointer;

  box-shadow: none;
  outline: none;
}

#infoModal #modalClose:hover {
  background: #dddddd;
}

/* --- SHARED MODAL INTERNAL TEXT/LINK/BUTTON STYLING --- */
/* set the typography for all of the listed #ids at once */
#infoModal,
#infoModal p,
#infoModal a,
#infoModal button,
#infoModal input,
#infoModal select,
#infoModal textarea {
  font-family: 'Roboto', sans-serif !important;   /* force the correct font */
  font-size: 0.875rem !important;                 /* match modal text size */
}


/* ==================================================
   RESPONSIVE LAYOUT - TABLETS & PHONES
   Layout adjustments for smaller screens, browser zoom, and split-screen windows
   Stack multi-column pages vertically on small screens
   max-widths remain in px, not rem
   Rules work cumulatively and don't need to be duplicated amongst @media sizes
   ================================================== */

/* --- TABLETS AND SMALL LAPTOPS --- */
@media (max-width: 900px) {
  .chart-grid,
  .dashboard-two-charts-grid,
  .dashboard-facts-map-grid,
  .dashboard-map-facts-grid {
    grid-template-columns: 1fr;   /* switch from multi-column grid to a single stacked column */
  }

  /* International Trade: quick facts above map. */
  .international-trade-page .quick-facts {
    order: 1;
  }

  .international-trade-page .dashboard-map {
    order: 2;
  }

  /* Consumer Spending: quick facts above map. */
  .consumer-spending-page .quick-facts {
    order: 1;
  }

  .consumer-spending-page .dashboard-map {
    order: 2;
  }

  /* Let all quick fact sections grow naturally on smaller screens. */
  .quick-facts {
    height: auto;
  }

  /* Keep all quick fact boxes from shrinking too small. */
  .fact-box {
    flex: none;
    min-height: 10rem;
  }
}


/* --- ADDITIONAL RULES FOR TABLETS AND PHONES --- */
@media (max-width: 768px) {

  h1 {
    margin-top: 0.5rem;             /* Reduce space above the page title */
    margin-bottom: 0.5rem;          /* Reduce space below the page title */
  }

  .intro-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;                   /* Keep stacked intro sections close together */
  }

  .subheading {
    margin-top: 0;                  /* Remove extra space above intro text */
    margin-bottom: 0;               /* Remove extra space below intro text */
  }

  .intro-side {
    margin-top: 0;                  /* Reduce space above the icon/last-updated block */
    gap: 0.25rem;                   /* Tighten spacing inside that block */
  }

  .chart-container {
    height: 20rem;
  }

  /* email address font size was mini */
  a,
  a:visited {
    font-size: inherit !important;
    line-height: inherit;
  }

  /* shrink quick fact font sizes */
  .fact-number,
  .fact-number * {
    font-size: 1.8rem !important;
  }
  .fact-box,
  .fact-box .fact-text,
  .fact-box .fact-text * {
    font-size: 1.0rem !important;
  }

  /* source box mobile */
  .source-box {
    flex-direction: column;           /* Stack the logo and source text vertically */
    gap: 0.6rem;                      /* Add space between the logo and source text */
    padding: 0.75rem;                 /* Reduce the padding on smaller screens */
  }
  .source-box__logo img {
    width: 18rem;                     /* Make the logo smaller on mobile */
  }
  .source-box__sources {
    width: 100%;                      /* Let the source list use the full container width */
    text-align: left;                 /* Left-align the source list on mobile */
    font-size: 0.75rem !important;    /* Make source text slightly larger on mobile */
  }
  .source-box__sources p,
  .source-box__sources a {
    font-size: inherit !important;    /* Keep paragraphs and links the same size as the source list */
  }

  /* scale modal down */
  #infoModal {
    width: 90vw;
    padding: 0.9375rem;
    font-size: 0.8125rem;
  }
}


/* --- ADDITIONAL RULES FOR EVEN SMALLER PHONES --- */
@media (max-width: 480px) {
  #infoModal {
    width: 95vw;
    padding: 0.75rem;
    font-size: 0.75rem;
  }
}

@media (max-width: 480px) {
  .business-highlights-page .dashboard-map {
    height: auto;
  }

  .business-highlights-page #qwi-map,
  .consumer-spending-page #msrs-map {
    height: 430px;
  }
}