/*
  These are necessary for the image and font urls referenced in the source
  files to resolve correctly.
*/
$theme-image-path: "../../node_modules/uswds/src/img";
$theme-font-path: "../../node_modules/uswds/src/fonts";

/*
  Example:

  The url for the hero image in the source file is not currently prefixed by
  the $theme-image-path above.

  $theme-hero-image: '#{$theme-image-path}/hero.png';
*/

// Custom USWDS changes to variables go here
// see https://designsystem.digital.gov/documentation/settings/
$theme-show-compile-warnings: false;
$theme-show-notifications: false;

$theme-font-role-heading: "sans";

@import "../../node_modules/uswds";

@import "~@trussworks/react-uswds/lib/index.css";
@import "../../node_modules/mapbox-gl/dist/mapbox-gl.css";

// Custom SASS/CSS goes here
$j40-max-width: 80ex;
$primary-color: #112f4e;
$j40-blue-background-color: #EFF6FB;

#main-content {
  border-top: 0;
}

@include at-media("mobile-lg") {
  .j40-grid-container {
    line-height: 1.5rem;
    padding-right: 0;
  }
}

.j40-header,
.j40-primary-nav,
.j40-header > li > a {
  color: $primary-color !important;
  z-index: 5;

  .usa-nav-container {
    max-width: ($j40-max-width * 2);
  }

  span {
    // make sure the open close chevron is colored correctly
    color: $primary-color;
  }

  // this is the title
  @include at-media("desktop") {
    .j40-title {
      font-size: 0.9em;
      padding-bottom: 0; // allows vertical centering on logo and text
      font-weight: normal;
    }

    .usa-navbar {
      width: 100%;
    }

    // this actual site logo
    .sitelogo {
      float: left; // allows vertical centering on logo and text
      margin-right: 0.5rem; // space between logo and text
      width: 4rem;
      padding: 0.5rem; // this will change the size of the logo too
    }

    // nav menu item font
    .usa-nav__primary {
      .usa-nav__primary-item {
        a {
          margin-bottom: 0.5em; // how far menu is from bottom edge of nav
          font-weight: 600;
        }
      }
    }

    // this is forcing the whole toolbar much taller
    .usa-logo {
      margin-top: 1.2rem;
      margin-bottom: 1.2rem;
    }
  }

  @include at-media("mobile") {
    .usa-logo__text {
      padding-top: 3px; // allows vertical centering on logo and text
      padding-bottom: 0; // allows vertical centering on logo and text
      font-weight: normal;
    }

    .usa-navbar {
      width: 100%;
    }

    .j40-sitelogo {
      float: left; // allows vertical centering on logo and text
      margin-right: 0.5em; // space between logo and text
      width: 3em;
      padding: 0.4em; // this will change the size of the logo too
    }
  }
}

.j40-footer {
  .j40-footer-logo {
    font-weight: bold;
  }

  .j40-footer-address {
    .usa-footer__contact-info {
      font-weight: normal;
      text-align: left;
      display: inline-block;
      line-height: 1.5;
    }
  }
}

// spacing top & bottom around main content
.j40-main-content {
  @include at-media("mobile-lg") {
    margin-bottom: 0;
    margin-top: 2.5rem;
  }

  h1 {
    font-size: 2.7rem;
  }

  h2 {
    font-size: 1.46rem;
  }
}

// we can use to to make all section headers consistent
.j40-section-sm-header {
  font-weight: bold;
  padding-bottom: 0.24rem;
  padding-right: 0.24rem;
}

.j40-section-sm-body {
  line-height: 1.5;
  padding-bottom: 1.2rem;
  padding-right: 1.2rem;

}

.j40-section-sm-footer {
  padding-bottom: 0.5rem;
}


// This should really be part of uswds and use $theme-step-indicator-segment-color-complete
// The Progress element doesn't really support color changing the line connecting progress
// (like the Steps element does) and the checkbox.
// The border-left-color required an !important to make work. Maybe add a feature request
// to have the process list officially support a more Steps-like behavior
.j40-usa-process-list__item--complete {
  &::before {
    color: white;
    background-color: #00a91c;
  }

  border-left-color: #005ea2 !important; // todo: fix
}

// NOTE: uswds `.usa-prose` defines these all as Merriweather Web via $theme-font-role-heading
.usa-prose {
  h1,
  h2,
  h3,
  h4 {
    font-family: Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial,
    sans-serif;
  }

  p,
  div {
    max-width: $j40-max-width;
  }
}

.j40-sitealert {
  p {
    margin: 0;
  }

  min-height: 2.5em;
  margin: 0;

  .j40-sitealert-title {
    font-weight: bold;
  }

  .usa-alert {
    margin: 0;
    padding-bottom: 0;
    padding-top: 0;
  }

  .usa-alert__body {
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
  }

  .usa-alert__text {
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
  }
}

// Maplibre overrides
// Note that these need to be here to properly override defaults

.mapboxgl-popup-close-button {
  font-size: 3em;
  margin-right: 12px;
  margin-top: 15px;
}

.mapboxgl-popup-content {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5) !important;
  border-radius: 8px !important;
  pointer-events: all !important;
  width: auto;
}

// Because we're using react-map-gl, you need to use
// the mapboxgl- class name variables.
// Maplibre has its own classnames with a maplibre prefix,
// but it after 1.14.0 it optionally still allows for the mapbox-gl prefix

// Below properties override mb defaults
.mapboxgl-ctrl-group:not(:empty) {
  box-shadow: none;
}

@media (-ms-high-contrast: active) {
  .mapboxgl-ctrl-group:not(:empty) {
    box-shadow: none;
  }
}

.mapboxgl-ctrl-group {
  border-radius: 0;
}

.mapboxgl-ctrl {
  button + button {
    border-top: 1px;
  }

  button {
    border-radius: 0;
    height: 1.66em;
    width: 1.66em;
    box-sizing: border-box;
    background-color: #ffffff;
    border-width: 2px;
    border-color: #000000;
    border-style: solid;
    font-size: 1.5em;

    // It seems necessary to set an explicit size for one of the dimensions
    // in order for this icon to be rendered correctly by gatsby build
    // see more here: https://thatemil.com/blog/2014/04/06/intrinsic-sizing-of-svg-in-responsive-web-design/
    .mapboxgl-ctrl-icon {
      height: 1em;
      pointer-events: none; /* this keeps the icons from "eating" the click events instead of the button getting them */
    }
  }

  button.mapboxgl-ctrl-zoom-in {
    .mapboxgl-ctrl-icon {
      background-image: url("../../node_modules/uswds/dist/img/usa-icons/add.svg");
    }
  }

  button.mapboxgl-ctrl-zoom-out {
    .mapboxgl-ctrl-icon {
      background-image: url("../../node_modules/uswds/dist/img/usa-icons/remove.svg");
    }
  }

  button.mapboxgl-ctrl-zoom-to-48 {
    .mapboxgl-ctrl-icon {
      background-image: url("../images/mapbtn-48.svg");
    }
  }

  button.mapboxgl-ctrl-zoom-to-ak {
    .mapboxgl-ctrl-icon {
      background-image: url("../images/mapbtn-AK.svg");
    }
  }

  button.mapboxgl-ctrl-zoom-to-hi {
    .mapboxgl-ctrl-icon {
      background-image: url("../images/mapbtn-HI.svg");
    }
  }

  button.mapboxgl-ctrl-zoom-to-pr {
    .mapboxgl-ctrl-icon {
      background-image: url("../images/mapbtn-PR.svg");
    }
  }
}


/* the > is for child only syntax in css. This is required so that lists that are nested under the
      list are not affected (e.g. <ul><li><p><ul><li>not styled</li></ul></p></li><ul>*/
.j40-process-list-wrapper > {
  $j40-steps-list-color: #002D3F;

  ul {
    margin-top: 3rem;
    margin-bottom: 1rem;
    padding-inline-start: 0;

    > li {
      list-style-type: none;
      position: relative;
      margin-left: 2.5rem;
      /* do the lines */
      border-left: .2rem solid $j40-steps-list-color;
      padding-left: 1.88rem;
      /* removes gap between line and circle */
      margin-top: -1rem;
      padding-bottom: 2rem;
    }

    > li:before {
      content: " ";
      border: 1rem solid $j40-steps-list-color;
      border-radius: 100rem;
      height: 0; /* it's all controlled by the border */
      width: 0;
      margin-top: -0.5rem;
      margin-left: -3rem;
      position: absolute;
    }

    > li:last-child {
      /* no line on last item */
      border-left: .2rem solid transparent;
      margin-top: -1.9rem;
    }
  }
}

/* The math equation on the methodology page.. which is a royal pain */
.j40-math-division-container {
  > .j40-math-eq-left-side {
    text-align: right;
    justify-content: center;
    align-items: center;
    padding: 0.5rem;

    > .j40-math-eq-numerator {
      border-bottom: solid 3px black;
      text-align: center;
      width: 90%;
    }

    > .j40-math-eq-denominator {
      text-align: center;
      width: 90%;
    }
  }

  > .j40-math-eq-middle {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0.25rem;
  }

  > .j40-math-eq-right-side {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem;
  }
}

ul.j40-process-nested-list {
  margin-bottom: 2rem;
  > li {
    list-style-type: disc; /* without this, we get hollow circles */
  }
}

/* these are currently used in the list, but it seems like they should be globally consistent with the rest of the site */
.j40-item-list-title {
  margin-block-end: auto;
}

.j40-item-list-subtitle {
  margin-block-start: auto;
  margin-block-end: auto;
  font-style: italic;
}

/* this is used by J40MainGridContainer to show a blue background */
.j40-main-grid-blue-bk {
  background-color: $j40-blue-background-color;
}

/* about card - based on datasetCard... need to combine */
.j40-aboutcard-container {

  .j40-aboutcard-lg-card {
    margin: 1.2rem 0 3rem 0;

    .j40-aboutpage-image-container {
      width: 10.5rem;
      padding: 1.24rem 1.24rem 0 .24rem;
    }

    .j40-aboutcard-image {
      flex: 1 0 10%;
      align-self: flex-start;
    }

    .j40-aboutcard-header {
    }

    .j40-aboutcard-body {
    }

    .j40-aboutcard-footer {
    }

    .j40-aboutcard-link {
      font-weight: bold;
    }
  }

  .j40-aboutcard-sm-card {
    margin: 1.2rem 0 3rem 0;

    .j40-aboutpage-image-container {
      padding: 1.24rem 1.24rem 0 .24rem;
    }

    .j40-aboutcard-image {
      width: 3rem;
    }

    .j40-aboutcard-header {
    }

    .j40-aboutcard-body {
    }

    .j40-aboutcard-footer {
    }

    .j40-aboutcard-link {
      font-weight: bold;
    }
  }

}