/* ---- GLOBAL STYLES ---- */
:root {
  --color-primary: #08598f;
  --color-primary-light: #c8ecfe;
  --color-header: #0a5a8c;
  --color-hover: #008abc;
  --color-secondary: #20802f;
  --color-text: #444444;
  --color-accent: #84c400;
  --color-background: #ffffff;
  --content-max-width: 1250px;
  --content-side-padding: 4vw;
  --section-padding: 3rem;
}

body {
  overflow-y: auto;
}

header,
body,
h1,
h2,
h3,
a,
p,
span,
li,
ul {
  padding: 0;
  margin: 0;
  color: var(--color-text);
  font-family: "Roboto", sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

p,
li,
a {
  font-size: 1rem;
  line-height: 1.4;
}

ul:not(.nav-link-list) {
  padding-left: 1rem;
}

ul:not(.nav-link-list) li:not(:last-child) {
  padding-bottom: 0.5rem;
}

/* ---- NAV BAR STYLES ---- */

.header-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nav-bar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  background-color: var(--color-primary);
}

.hct-nav-container {
  display: flex;
  flex-direction: column;
  padding-top: 1.5rem;
  padding-bottom: 1rem;
}

.nav-link-list {
  display: flex;
  flex-direction: row;
  column-gap: 2rem;
  list-style: none;
}

.nav-link {
  margin: calc(0.5rem + 4px) 0 0.5rem 0;
  font-size: 1.125rem;
  color: var(--color-background);
  text-decoration: none;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 4px solid transparent;
  cursor: pointer;
}

.nav-link.active-link,
.nav-link:hover {
  transition: border-bottom 0.25s ease;
  border-bottom: 4px solid var(--color-accent);
}

@media only screen and (max-width: 1000px) {
  .nav-link-list {
    flex-direction: column;
  }
}

.nashp-logo-link {
  display: flex;
  justify-content: center;
}

.nashp-logo {
  width: 120px;
}

.dashboard-header {
  color: var(--color-background);
  font-size: 2rem;
  font-weight: 700;
}

.env-banner {
  padding: 2rem 0;
  width: 100%;
  background-color: #c41e3a;
  color: white;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.main-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--section-padding);
  padding: var(--section-padding) var(--content-side-padding);
}

.dashboard-section {
  max-width: var(--content-max-width);
  width: 100%;
}

.dashboard-iframe {
  width: calc(100vw - 2 * var(--content-side-padding));
}

.section-header {
  font-size: 2rem;
  color: var(--color-header);
  padding-bottom: 0.5rem;
}

.intro-container {
  display: grid;
  grid-row-gap: 1rem;
}

.intro-text {
  grid-column: 1 / 3;
  grid-row: 1;
}

.download-link-container {
  display: flex;
  flex-direction: column;
  grid-column: 1;
  grid-row: 2;
  border-radius: 0.625rem;
  background-color: var(--color-primary-light);
  padding: 1rem;
  overflow: hidden;
  width: fit-content;
}

.download-link-heading {
  background-color: var(--color-primary);
  color: white;
  font-size: 1.125rem;
  margin: -1rem -1rem 0.625rem;
  padding: 0.5rem 1rem;
  text-align: center;
}

.last-update-note {
  font-weight: 700;
  text-align: end;
  grid-column: 2;
  grid-row: 2;
}

.key-concepts-container {
  display: flex;
  justify-content: center;
  padding-top: 1.5rem;
}

.key-concepts.large-screen {
  display: block;
}

.key-concepts.small-screen {
  display: none;
}

@media only screen and (max-width: 1280px) {
  .key-concepts.large-screen {
    display: none;
  }

  .key-concepts.small-screen {
    display: block;
  }
}

.release-note:not(:last-child) {
  padding-bottom: 1.5rem;
}

.release-note-date {
  padding-bottom: 0.5rem;
}

.download-link:hover {
  color: var(--color-hover);
}

.download-link {
  color: var(--color-text);
  font-weight: 700;
  text-decoration: underline;
}

.material-symbols-outlined {
  vertical-align: bottom;
  margin-right: 0.125rem;
  color: var(--color-text);
}

.dashboard-iframe-container {
  flex-direction: column;
  align-items: center;
  gap: var(--section-padding);
}

.list-title {
  font-weight: 500;
}

.skip-link {
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 1rem 2rem;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  background-color: var(--color-background);
  border: 2px solid var(--color-text);
  color: var(--color-text);
  text-decoration: none;

  &:focus {
    clip: auto;
    height: auto;
    width: auto;
    margin: 0;
    top: 6rem;
    left: 2rem;
    overflow: visible;
    outline: 0;
    z-index: 1000;
  }

  &:focus:hover {
    background-color: var(--color-text);
    color: var(--color-background);
  }
}