/* ------------------------------------------------------------------------------------------------------------------------------ */
/* -- 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;
}*/

/* ==================================================
   HERO HEADER
   ================================================== */

   .hero-header {
    position: relative;

    height: 420px;              /* Adjust height as desired */

    background-image: url("img/who-was-undercounted-overcounted-in-2020-census.jpg"); /* Your image */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 0;
  overflow: hidden;

  /* Clean, equal page spacing */
  width: 100%;
  margin: 0 0 2rem 0;

    /* no longer needed when put into cidr
     border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-radius: 0px;
    overflow: hidden;*/

      /* width:calc(100% + 64px); stretches the hero image and browse viz to as full length as possible. Still trying to work on closing the right side though 
      width: calc(100% + 2.5rem);
      margin-top: -108px;   margin-right: -1.25rem;   margin-bottom: 2rem;   margin-left: -1.25rem; */
      
  

   /* margin: -1.25rem -1.25rem 2rem; extends to page edges */
   /* margin-top: -108px; gets rid of space at top of page that CIDR puts in */
}

/* Dark overlay so text is easier to read */
.hero-overlay {
  width:100%;
  height:100%;

  background:
      linear-gradient(
          rgba(0,0,0,.55),
          rgba(0,0,0,.30)
      );

  display:flex;
  align-items:center;
  justify-content:center;
}


.hero-content {
    max-width: 1600px;
    width: 90%;
    text-align: center;

    color: rgba(255,255,255,.95);
}

.hero-content h1 {
    margin: 0;

    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 700;
    line-height: 1.1;

    color: rgba(255,255,255,.95);
}

.hero-subheading {
    margin: 1.5rem auto 0;

    /*max-width: 850px;*/

    font-size: clamp(1.5rem, 2.5vw, 2rem);
    line-height: 1.6;

    color: rgba(255,255,255,.95);
}

/*.innerPage {
  margin-left: -200px !important;
}*/




/* ==================================================
   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
   ================================================== */

/* --- 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 */
  }
}

/* --- TABLETS AND PHONES --- */
@media (max-width: 768px) {
  .intro-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .intro-image {
    width: 100%;
    max-width: 220px;
  }

  .chart-container {
    height: 20rem;
  }

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

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



/* TROUBLESHOOTING MOBILE SIZING - looks worse on CIDR, but is it real? */
/*body {
  outline: 2px solid red;
}

* {
  outline: 1px solid blue;
}*/




/* ==================================================
   VISUALIZATION CARDS
   
   ================================================== */

:root{
  --blue:#005ea2;
  --blue-dark:#003b71;
  --border:#dfe1e2;
  --background:#f7f7f7;
}

body{
  font-family:'Roboto', Arial, sans-serif;
  
}

/* ==================================================
   LANDING PAGE CARDS
   ================================================== */

   .viz-wrapper{
    /*width: calc(100% + 2.5rem);*/
    width: 100%;
    margin: 0 0 2rem 0;
    /*margin: 0 -1.25rem 2rem;*/
    box-sizing: border-box;
    /*width:min(96%, 1800px);*/
    /* margin:0 auto 2rem; stretches the browse viz to as full length as possible. Still trying to work on closing the right side though */
    /* width:calc(100% + 64px); */
    
      
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, 420px
  /*minmax(min(420px, 100%), 1fr)*/
);
  /*grid-template-columns:repeat(auto-fit,minmax(420px,max-content));*/
  justify-content: center;
  gap:2rem;
  /*display: flex; ---------this aligns the cards to be left justified but then we lose the zoom card capability of them auto moving to new lines */

  
}

/*doesn't allow horizontal scrolling on your phone*/
@media (max-width: 900px) {
  .grid {
    grid-template-columns: minmax(0, 420px);
  }
}

.card{
    display:flex;
    flex-direction:column;

    width:420px;
    max-width:100%;

    background:#fff;
    border:1px solid #dfe1e2;
    border-radius:12px;

    overflow:hidden;

    text-decoration:none !important;
    color:inherit;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;

    box-shadow:0 2px 8px rgba(0,0,0,.05);
}

.card:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 24px rgba(0,0,0,.12);
    border-color:#c7cdd1;
}

.card-image{
    width: 100%;
    aspect-ratio: 16 / 9; /* this allows the standard source image ot be 1200 × 675 px (16:9) */
    height: auto;
    object-fit: contain;
    display: block;
    background-color: #f5f5f5;  
  /*width:100%;
    height:220px;
    object-fit:contain; /*contain keep the image size and puts up borders if the size doesn't fit the card. Cover makes the image zoom to fit the card size.  
    display:block;
    background-color: #f5f5f5;*/
}

.card-content{
    display:flex;
    flex-direction:column;
    flex:1;

    padding:1.5rem;
}

.card h3{
    margin:0 0 .75rem;
    color:#005ea2;
    font-size:1.35rem;
    font-weight:700;
    line-height:1.3;
}

.card p{
    margin:0;
    color:#5c5c5c;
    line-height:1.6;
    font-size:.98rem;
}
/*this formats the last updated date */
.card-updated {
  margin-top:auto;
  padding-top:1rem;

  color:#666;
  font-size:.85rem;
}


/* ==================================================
   LANDING PAGE Drop downs
   ================================================== */
.filter-panel{
  background:#f8f8f8;
  border:1px solid #dfe1e2;
  border-radius:12px;
  padding:2rem;
  margin:3rem auto;
  width:100%;
  max-width:none;
  box-sizing:border-box;
  box-shadow:0 2px 8px rgba(0,0,0,.05);

}
   /*This section needs to be updated if you ever change the number of filters showing on the page. minmax column is what centers it. */
.filter-grid {
  display: grid;
  grid-template-columns:
    minmax(0, 500px);
    /*minmax(0, 300px); add this when we add the industry filter back in */
  justify-content: center;
  /*gap: 2rem; add this when we add the industry filter back in */
  margin-top: 1.5rem;
}
 
@media (max-width: 900px) {
  .filter-grid {
    grid-template-columns: minmax(0, 1fr);
  }

}

/* If 3rd drop down is needed
.filter-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(300px, 400px));
    justify-content:center;
    gap:2rem;
}*/

.filter-panel input,
.filter-panel select{

  width:100%;
  padding:1rem 1.25rem;

  font-size:1.1rem;

  border:1px solid #cfd4d8;
  border-radius:10px;

  background:white;
}

.filter-panel label{
  display:block;
  margin-bottom:.5rem;
  font-weight:600;
  font-size:1.1rem;
  color:#555;
}

.filter-panel h2 {
  font-size: 2rem;      /* Increase from the default */
  font-weight: 700;
  color: #112E51;

  text-align:center;

  margin: 0 0 1.5rem;
}

/* DROPDOWN WITH NO RESULTS */
.no-results {
  display: none;

  width: 100%;
  max-width: 700px;
  box-sizing: border-box;

  margin: 3rem auto;
  padding: 1.5rem 2rem;

  background: #f8f8f8;
  border: 1px solid #dfe1e2;
  border-radius: 12px;

  color: #666;
  font-size: 1.1rem;
  line-height: 1.5;
  text-align: center;

  overflow-wrap: break-word;
}


/* ==================================================
   FULL-WIDTH LANDING PAGE OVERRIDE
   Break out of Census/Bootstrap content grid
   ================================================== */

   #detailMiddleColumn {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Remove the Bootstrap/grid width behavior from the
     immediate row containing the page content */
  #detailMiddleColumn > .row {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* Remove Census wrapper width constraint */

.wrapper.wrapperMarginTop {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}