@charset "UTF-8";


/* TYPOGRAPHY ------------------------------ */
h1 {
  font-size: 2em;
}

h2, h3, h4 {
  font-size: 1em;
}

label.container:hover span,
#search label.container:hover span {
  background: var(--blue);
  color: #FFF;
}

:is(button#read-more:focus, button#read-more:hover),
.accordion h2> :is(button:focus, button:hover) {
  color: var(--violet);
}

/* HEADER ------------------------------- */
body>header {
  padding-block: 1.25em;
  position: sticky;
  top: 0;
}

body.scroll > header {
  box-shadow: 0 0 0em 0.25em rgba(var(--dk-blue-rgb), .2);
}

body>header>.wrap {
  align-items: center;
  display: flex;
  max-width: 100%;
}

body>header .logo {
  max-width: 34.125em;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
}

body>header .logo:focus,
body>header .logo:hover {
  opacity: .7;
}

body>header .hamburger {
  display: none
}

#mobilenav {
  display: none;
}

#navContainer {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

#navContainer aside {
  display: none;
}

#navContainer nav {
  align-items: center;
  display: flex;
}

#navContainer ul li {
  display: inline-block;
}

#navContainer nav>ul>li>a {
  color: var(--dk-blue);
  border-radius: .5em;
  padding: .875em .5em;
}

#navContainer nav>ul>li>a.login {
  background: url('/images/icons/lock.svg') no-repeat right .625em center / .75em auto;
  padding: .875em 1.75em .875em .5em;
}

#navContainer ul li.has-dropdown>a {
  border-radius: .5em .5em 0 0;
}

#navContainer nav>ul>li:focus-within>a,
#navContainer nav>ul>li:hover>a,
#navContainer nav>ul>li>a:focus,
#navContainer nav>ul>li>a:hover {
  background-color: var(--light);
}

#navContainer ul li ul {
  background: #FFF;
  columns: 2;
  opacity: 0;
  padding: .5em;
  position: absolute;
  top: calc(100% + .625em);
  visibility: hidden;
  transition: all .3s ease .2s
}
#navContainer ul li.account-dropdown ul {
  background: var(--light);
  columns: 1;
  right: 0;
  width: 12.5rem;
}
#navContainer ul li.account-dropdown ul :is(li, li a) {
  display: block;
  color: var(--dk-blue);
}
#navContainer ul li.account-dropdown ul a:is(:hover, :focus) {
  color: var(--violet);
}

#navContainer li a:focus + ul,
#navContainer li:focus-within ul,
#navContainer ul li:hover ul {
  opacity: 1;
  visibility: visible;
}

#navContainer form {
  margin: 0 0 0 .5em;
}

#navContainer form input {
  max-width: 10em;
}

#navContainer form button {
  right: 0;
}

#navContainer ul.cd {
  background: var(--light);
  box-shadow: 0 5px 5px rgba(0,0,0,.16);
  padding-inline: 1em;
}

#navContainer ul.cd li a:focus,
#navContainer ul.cd li a:hover {
  background-color: var(--gray);
}

::-webkit-input-placeholder {
  color: var(--dk-blue);
  font-family: 'Metropolis-Regular', sans-serif;
}

::-ms-input-placeholder {
  color: var(--dk-blue);
  font-family: 'Metropolis-Regular', sans-serif;
}

::placeholder {
  color: var(--dk-blue);
  font-family: 'Metropolis-Regular', sans-serif;
}


/* HOMEPAGE ------------------------------ */
.home::before {
  background: rgba(var(--dk-blue-rgb), .2);
  content: '';
  display: block;
  height: .25em;
  position: relative;
  width: 100%;
  z-index: 1;
}

.left {
  width: 50%;
}

.left .fixed-wrapper {
  height: 100%;
  position: absolute;
  text-align: center;
  top: 8.75em;
  width: 100%;
  z-index: 3;
}

.left img {
  max-width: 16.5%;
  position: fixed;
  transform: translateX(-50%);
}

ul.collage {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1em;
  height: 100%;
  padding-inline: 1em;
}

.right {
  width: 50%;
  z-index: 0;
}

.right::before {
  background: rgba(var(--light-rgb), .3);
  content: '';
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100vw;
}

.right .wrap {
  padding-inline: clamp(1.5em, -12.564em + 25vw, 6.188em) 0;
}

.find {
  padding-block: 2em;
}

.find::before {
  content: url('/images/watermark.svg');
  height: auto;
  left: 2em;
  mix-blend-mode: soft-light;
  opacity: .2;
  position: absolute;
  pointer-events: none;
  top: calc(50% + 3em);
  transform: translateY(-50%);
  width: 42.1875em;
  z-index: -2;
}

.right :is(.intro, .find, .browse)>div {
  max-width: 25em;
  position: relative;
  z-index: 1;
}

.right .intro {
  padding-block: 3.5em 1.75em;
}


/* Content Directory ----- */
ul.cd {
  columns: 2;
}

ul.cd li>a:focus,
ul.cd li>a:hover {
  background-color: var(--light);
}

/* LANDING PAGES ------------------------------ */
.landing:not(#lesson) {
  padding-bottom: 4em;
}


/* PAGEHEADER ------------------------------ */
.pageheader {
  padding-block: 1.125em;
}

.pageheader .wrap {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.pageheader .breadcrumb :is(a:focus, a:hover) {
  color: var(--violet);
}

.pageheader .details {
  width: 17.5em;
}

/* SEARCH PAGE ------------------------------ */
#search form {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0 0 2em;
}


/* TABLES ------------------------------ */
table a {
  font-size: 1.125em;
}

colgroup col:first-of-type {
  width: 7em;
}

colgroup col:last-of-type {
  width: 8.5em;
}


/* INTRODUCTION RIBBON ------------------------------ */
.introduction {
  padding-block: 2em;
}

#course .introduction .wrap {
  justify-content: space-between;
}

#course .introduction .textbox {
  max-width: 30em;
}

#course .introduction .details {
  width: 17.5em;
}

#course .introduction .textbox>div {
  max-height: 11.125em;
  line-height: 1.5625;
}

#lesson .introduction .textbox>div {
  max-height: 8.5em
}


/* MEDIA QUERIES ------------------------------ */
@media (max-width: 1150px) {
  body>header .logo { max-width: 22em }
}

@media (max-width: 1050px) {
  #search form {
    flex-wrap: wrap;
    justify-content: center;
  }

  #search form>div:first-of-type {
    margin: 0 0 1em;
    text-align: center;
    width: 100%;
  }

  #search form>label {
    margin: 0 2.5em 0 0;
    width: max-content;
  }

  #search form>.grades {
    width: max-content;
  }

  #search input[type='search'] {
    min-width: 29.5em;
  }

}


@media (max-width: 950px ) {

  body>header>.wrap {
    flex-direction: column;
    justify-content: center;
  }

  body>header .logo {
    margin: 0 auto .5em;
    position: static;
    transform: none;
  }

  #navContainer {
    justify-content: center;
  }

  #navContainer nav:first-of-type {
    flex-direction: row-reverse;
  }

  #navContainer form {
    margin: 0 0.5em 0 0;
  }

  .right ul.cd {
    columns: 1;
  }
}

/* ~~~~~~~~~~~~~~~ STYLE-D.CSS ~~~~~~~~~~~~~~~ */