:root {
  --content-max-width: 800px;
  --main-background: #663366;
  --background: #A78BA7;
  --page-background: #FFFFFF;
  --banner-color: #FFCC66;
  --quick-search-background: #99EEDC;
  --main-font-family: "Work Sans", sans-serif;
}

* {
  box-sizing: border-box;
}

.sr-only {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
}

.sr-only-focusable:focus,
.sr-only-focusable:active {
    clip: auto !important;
    -webkit-clip-path: none !important;
    clip-path: none !important;
    height: auto !important;
    margin: auto !important;
    overflow: visible !important;
    width: auto !important;
    white-space: normal !important;
}

.source-serif-4 {
  font-family: "Source Serif 4", serif;
  font-optical-sizing: auto;
  font-style: normal;

  &.title {
    font-weight: 400;
    font-size: 40px;
    text-decoration: 1px underline;
    text-underline-position: under;
    text-transform: uppercase;
    text-align: right;

    >span {
      color: var(--quick-search-background);
    }
  }
  
  &.banner {
    font-size: 25px;
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;

    color: white;

    padding-block: 5px;
    
    >span {
      color: var(--quick-search-background);
    }
  }
}

body {
  margin: 0;
  font-family: var(--main-font-family);
}

header {
  background-color: var(--background);
}

footer {
  background-color: var(--background);
}

main {
  line-height: 1.5;

  .side {
    background-color: var(--background);
  }

  &:has(.frontPageContent) {
    background-color: var(--background);
  }
}

.pressBanner {
  background-color: var(--banner-color);
  padding-inline: .5rem;
  padding-block: .25rem;

  a:only-child {
    display: block flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  img {
    max-height: 25px;
  }

  &.footerText {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    font-size: .7rem;
    font-weight: bold;

    .footerCopyright {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      flex: 0.55;
      
      >* {
        margin-inline-end: 4px;
      }
    }

    .footerLinks {
      flex: 0.45;
    }

    .footerLinks ul {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;

      li {
        display: flex;
        flex-direction: column; 
        align-items: center;
        justify-content: stretch;
        margin-inline: 5px;

        a {
          padding-block: 5px;

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

.quickSearch {
  background-color: var(--quick-search-background);
  
  display: flex;
  flex-direction: row;
  justify-content: end;
  align-items: center;

  margin-block: 0;
  padding: 4px;
  
  form {
    margin-block: 0;
  }
}

.pageContent {
  display: grid;
  grid-template-columns: 1fr min(var(--content-max-width), 100% - 2rem) 1fr;

  .content {
    padding-inline: 2rem;
    padding-block: .1rem;
  }

  ul {
    list-style-type: none;
    padding-inline-start: 0;

    li {
      margin-block: 10px;

      &.article, &:has(.article) {
        margin-block: 0;
      }
    }
  
    &:has(> .article) {
      list-style-type: disc;

      padding-inline-start: 40px;
      margin-block-end: 10px
    }
  }

  a {
    color: var(--main-background);
    font-weight: 600;
  }

  :not(nav) a {
    text-underline-position: under;
    text-decoration-thickness: 2px;

    &:hover {
      text-decoration: none;
      color: var(--background);
    }
  }
  
  .fulltext a {
    text-transform: capitalize;
  }
}

.bottomNavBanner {
  line-height: 0;

  @media (max-width: 850px) {
    display: none;
  }
}

.pageMenu {
  background-color: var(--main-background);

  user-select: none;

  a {
    text-decoration: none;
  }

  .banner {
    margin-inline-start: 5px;
  }
    
  ul {
    list-style-type: none;
    padding-inline-start: 0;
    margin-block: 0;
    border-block-start: 1px solid white;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
  }

  li {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;

    &:hover {
      background-color: #A78BA7;
    }

    a {
      color: #ffffff;
      text-align: center;
      padding-block: 13px;
    }
  }    
}

.frontPageContent {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  
  background-color: var(--main-background);
  color: #fff;

  padding-block-start: .5rem;

  font-size: .85rem;

  >:first-child {
    flex-grow: 2;

    :not(:first-child) {
      margin-inline-start: 5px;
    }
  }
  
  >:last-child {
    flex-grow: 3;
    margin-inline-start: 5rem;
    margin-inline-end: 1rem;
    line-height: 1.5rem;
  }

  nav ul {
    list-style-type: none;
    padding-inline-start: 0;

    li {
      border-block-end: 1px solid white;
      padding-block-end: .5rem;
      margin-block-end: .5rem;
    }

    a {
      text-decoration: none;
      color: #99EEDC;
      font-size: 1rem;
      
    }
    a:hover {
      text-decoration: none;
      color: #FFFFFF;
    }
  }
}

.standardWidth {
  max-width: min(var(--content-max-width), 100% - 2rem);
  margin-inline: auto;
}

.contentTitle {
  border-block-end: 1px solid var(--quick-search-background);
  padding-block-end: .5rem;
  margin-block-end: .5rem;
}

.alphabetLinks {
  display: flex;
  flex-direction: column;
  align-items: center;

  .alphabetRow {
    display: flex;
    flex-direction: row;
    margin-block: 5px;
    
    >* {
      min-width: 44px;
      height: 44px;
    }

    a {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  }
}

.contact-form {
  max-width: calc(var(--content-max-width) - 220px);
  margin-inline: auto;
}

.form-group {
  display: flex;
  justify-content: space-between;
  margin-block: 10px;
}

.smallSearchText {
  margin-block-start: .1rem;
  font-size: .9rem;
}