/* import other default styles */
@import url('./header.css');
@import url('./footer.css');

:root {
  --grey-blue: #b2bec9;
  --light-grey: #f7f7f7;
  --um-blue: #00274c;
  --maize: #ffcb05;
  --white: #ffffff;
  --black: #000000;
  --royal-blue: #0d57aa;
  --light-blue: #85beff;
  --pale-blue: #e6f3ff;
  --matte-blue: #567daa;
}

/* STICKY FOOTER */
html, body {
  box-sizing: border-box;
  height: 100%;
  padding: 0;
  margin: 0;
}
#content-area {
  box-sizing: border-box;
  min-height: 100%;
}
header, footer {
  flex-grow: 0;
  flex-shrink: 0;
}
.page-body {
  flex-grow: 1;
}

html {
  scroll-behavior: smooth;
}

body {
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.25rem;
  color: var(--black);
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}
body.montserrat { font-family: "Montserrat", sans-serif;}
body.ibm_plex_serif { font-family: "IBM Plex Serif", serif;}
body.oswald { 
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  font-size: 1.5rem;
  letter-spacing: .5px;
}
body.playfair_display { font-family: "Playfair Display", serif;}
body.raleway { font-family: "Raleway", sans-serif; }

a,
#header-menu li {
  transition: all .3s ease-in-out;
}
#content-area a {
  --initialBgColor: transparent;
  /* padding: .25rem; */
  color: var(--royal-blue);
  background-image: linear-gradient(90deg,
      var(--initialBgColor) 0%,
      var(--initialBgColor) 50%,
      var(--maize) 50%,
      var(--maize) 100%);
  background-size: 200%;
  transition: background-position .3s cubic-bezier(.47, .1, 1, .63),
    color .2s linear;
  transition-delay: 0.0s, 0.15s;
}
#content-area a:hover {
  color: var(--um-blue);
  background-position: -100% 100%;
  /* background-color: var(--maize); */
}
/* button w/ fill */
.wp-block-buttons {
  margin-bottom: 1rem;
}
.wp-block-button .wp-block-button__link,
.wp-block-button.is-style-fill .wp-block-button__link {
  background-color: inherit;
}
a:not(.footer-logo, .ab-item).external:after {
  font-family: "Font Awesome 6 Pro";
  content: "\f08e";
  padding-left: .5rem;
  font-size: .875rem;
}
#content-area > .container {
  padding: 1.5rem 0 5rem 0;
}
#content-area #content-top + .container {
  padding-top: 1rem;
}
#content-area .container + #content-bottom {
  margin-top: -3rem;
}
.content .columns {
  margin: 0;
}
#page > .column, #posts > .column {
  padding: 0;
}
.postWrapper .post {
  padding: 0 .75rem;
}

.content h1 {
  font-size: 2rem;
}
.content h2 {
  font-size: 1.6125rem;
}
.content h3, .content h4 {
  font-size: 1.125rem;
}
.content h5, .content h6 {
  font-size: 1rem;
  font-weight: 800;
}
.content p {
  line-height: 1.625rem;
}
body.oswald .content p {
  line-height: 2rem;
}
.content li+li {
  margin: 0;
}
a.readmore {
  /* display: inline-block; */
  display: table;
  margin-top: .5rem;
  padding-left: .25rem;
  padding-right: .25rem;
  margin-left: -.25rem;
}
img { width: 100%; }
.content strong {
  color: inherit;
}

/* ACCORDIONS/DETAILS */
details,
.wp-block-accordion-item {
  border: solid 1px;
  /* margin: 2rem 4rem; */
  margin: 1rem;
}
details summary,
.content .wp-block-accordion-heading {
  font-size: 1.25rem;
  font-weight: 700;
  padding: 1rem;
  background-color: var(--grey-blue);
  color: var(--um-blue);
  transition: all .3s ease-in-out;
  margin: 0;
  line-height: 1.625rem;
}
.content .wp-block-accordion-heading button {
  padding: 0;
}
details:hover summary,
.content .wp-block-accordion-heading:hover {
  background-color: var(--pale-blue);
}
details[open] summary,
.wp-block-accordion-item.is-open .wp-block-accordion-heading {
  padding-bottom: 1rem;
  background-color: var(--pale-blue);
}
details summary:before {
  content: "";
  margin-right: .5rem;
}
details summary::marker {
  font-family: "Font Awesome 6 Pro";
  content: "\2b";
}
details[open] > summary::marker {
  content: "\f068"
}
.wp-block-accordion-heading__toggle-icon {
  font-size: 1.625rem;
  height: auto !important;
  width: auto !important;
}
details > *:not(summary),
.wp-block-accordion-panel {
  margin: 1rem !important;
}

#header-top, #content-top, #content-bottom {
  padding: 1rem;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        TABLES
~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.content .wp-block-table {
  margin-left: 0;
  margin-right: 0;
  overflow-x: auto;
}
.content .wp-block-table table {
  border-collapse: collapse;
  line-height: initial;
  margin: 0;
  width: 100%;
  /* table-layout: fixed; */
}
.wp-block-table table thead {
  border: none;
}
.wp-block-table table thead th {
  background-color: var(--um-blue);
  color: var(--white);
  width: 50%;
  border: none;
  padding: 1rem;
}
.wp-block-table table tbody {
  border-bottom: solid 3px var(--um-blue);
}
.wp-block-table table tbody tr {
  background-color: var(--white) !important;
  border-bottom: 1px solid var(--grey-blue);
}
.wp-block-table table tbody tr td {
  border: none;
}
.wp-block-table table tbody tr:nth-of-type(odd),
.wp-block-table.is-style-stripes table tbody tr:nth-of-type(odd) {
  background-color: #f1f1f1 !important;
}
.wp-block-table table tfoot {
  background-color: var(--pale-blue);
  font-size: .813rem;
  border-top: none;
}
.wp-block-table table tfoot td {
  padding: .74rem;
}
.wp-block-table .wp-element-caption {
  background-color: var(--royal-blue);
  color: var(--maize);
  padding: .5rem;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: 1px;
}
.content table th.has-text-align-left {
  text-align: left;
}
.content table th.has-text-align-center {
  text-align: center;
}
.content table th.has-text-align-right {
  text-align: right;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
      image w/ captions
~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.content figure {
  margin: 0;
}
/* figure.wp-block-image, .wp-block-image {
  position: relative;
} */
.wp-block-image.has-caption,
figure.wp-block-image.has-caption {
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}
.wp-element-caption,
figcaption.wp-element-caption {
  width: 100%;
  background-color: rgba(var(--dark-grey-rgb), .85);
  padding: 1rem;
  margin: 0;
  color: var(--white);
  transition: all .3s ease-in-out;
  font-size: .875rem;
  font-style: normal !important;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        Group
~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.wp-block-group.has-background {
  padding-left: 2rem;
  padding-right: 2rem;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        QUOTES
~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.content blockquote.wp-block-quote {
  /* background-color: transparent; */
  border: none;
  font-size: 1.5rem;
  position: relative;
}
.content blockquote.wp-block-quote::before,
.content blockquote.wp-block-quote::after {
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  font-size: 8rem;
  position: absolute;
  opacity: .2;
}
.content blockquote.wp-block-quote::before {
  content: "\f10d";
  top: 0;
  left: 0;
}
.content blockquote.wp-block-quote::after {
  content: "\f10e";
  bottom: 0;
  right: 0;
}
.content figure.wp-block-pullquote blockquote {
  background-color: var(--royal-blue);
  border-color: var(--maize);
  color: var(--white);
  border-width: 10px;
  font-weight: 600;
}
figure.wp-block-pullquote {
  padding: 2rem 0;
  color: var(--white);
}

.content pre.wp-block-code {
  background-color: var(--um-blue);
  color: var(--light-blue);
  margin: 2rem 4rem;
}
.wp-block-code code {
  font-style: italic;
}

.wp-block-preformatted,
.wp-block-verse {
  background-color: var(--grey-blue);
  color: var(--um-blue);
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        SIDEBAR
~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#content-area .advanced-sidebar-menu > ul {
  margin: 0;
  list-style: none;
  border: solid 1px black;
  padding: 1rem;
}
#content-area .advanced-sidebar-menu > ul li:not(:last-child) {
  border-bottom: dotted 2px;
}
#content-area .advanced-sidebar-menu ul li:not(:last-child) {
  margin-bottom: .5rem;
  padding-bottom: .5rem;
}
#content-area .advanced-sidebar-menu .parent-sidebar-menu {
  padding: 1rem;
}
#content-area .advanced-sidebar-menu li.has_children ul {
  padding-left: 1.5rem;
  border-top: dotted 2px;
  margin: .5rem 0 0 0;
  padding: .5rem 0 .5rem 1.5rem;
}
#content-area .advanced-sidebar-menu ul li a {
  /* 
    COLOR AND BACKGROUND COLORS ADDED IN
    /styles/colors/COLOR-PALLET.css
    based on different options 
  */
  --initialBgColor: transparent;
  background-size: 200%;
  transition: background-position .3s cubic-bezier(.47, .1, 1, .63),
    color .2s linear;
  transition-delay: 0.0s, 0.15s;
  padding: 0 .25rem;
  display: block;
}
#content-area .advanced-sidebar-menu ul li a:hover,
#content-area .advanced-sidebar-menu ul li.current-menu-item > a,
#content-area .advanced-sidebar-menu ul li.current-menu-ancestor > a {
  background-position: -100% 100%;
  /* background-color: var(--maize); */
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        SEARCH RESULTS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
body:is(.search, .blog) #posts ol {
  list-style: none;
}
body:is(.search, .blog) #posts ol li .postTitle {
  font-size: 1.75rem;
}
body:is(.search, .blog) #posts ol li .post-details-wrapper .featured-image {
  float: left;
  margin: 0 1rem 1rem 0;
}
body:is(.search, .blog) #posts ol li hr.noCss {
  clear: both;
}
/* POSTS/SEARCH RESULTS */
body:is(.search, .blog) #posts .postTitle a {
  padding-left: .25rem;
  padding-right: .25rem;
  margin-left: -.25rem;
}
body:is(.search, .blog) #posts ol li .post-details-wrapper .featured-image a {
  display: flex;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
      404 page
~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
body.error404 #post-404error,
#no-custom-posts {
  text-align: center;
}
body.error404 .not-found-title,
#no-custom-posts .not-found-title {
  font-size: 8rem;
  font-weight: 900;
  margin-bottom: 3rem;
  display: flex;
  flex-direction: column;
  & .not-found-small {
    font-size: 2rem;
    font-weight: 600;
  }
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
      PAGINATION
~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.page-numbers {
  display: flex;
  align-self: flex-end;
  align-items: center;
}
.content .page-numbers li {
  list-style: none;
  margin: 0 .5rem;
}
#content-area .page-numbers li a{
  text-decoration: none;
}
.page-numbers li a.prev,
.page-numbers li a.next {
  display: flex;
  align-items: center;
  padding: 0 .25rem;
}
.page-numbers li a.prev i {
  padding-right: .625rem;
}
.page-numbers li a.next i {
  padding-left: .625rem;
}
.page-numbers li a:not(.next, .prev),
.page-numbers li span {
  width: 30px;
  height: 30px;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  line-height: 1;
  border: solid 1px;
}
body:is(.search, .blog) #content-area > .container > .content {
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 48rem) /* 768px */ {
  body {
    font-size: 1.25rem;
    line-height: 1.625rem;
  }
  .content p {
    line-height: 2rem;
  }
  #content-area > .container {
    padding-top: 3rem;
  }
  .content h1 {
    font-size: 2.5rem;
  }
  .content h2 {
    font-size: 2rem;
  }
  .content h3 {
    font-size: 1.75rem;
  }
  .content h4 {
    font-size: 1.5rem;
  }
  .content h5, .content h6 {
    font-size: 1.125rem;
    font-weight: 800;
  }
  .wp-block-image .wp-element-caption,
  .wp-block-image figcaption.wp-element-caption {
    position: absolute;
    bottom: 0;
  }
  .wp-block-embed figcaption.wp-element-caption:before {
    display: none;
  }
  .wp-block-embed figcaption.wp-element-caption {
    max-width: 100%;
    align-items: center;
    color: var(--dark-grey);
    background-color: rgba(var(--white-rgb),.8);
    padding:.625rem;
  }
  details,
  .wp-block-accordion-item {
    margin: 2rem 4rem;
  }
  .content .wp-block-table {
    margin-left: 2rem;
    margin-right: 2rem;
    overflow-x: hidden;
  }
}

@media screen and (min-width: 64rem) /* 1024px */ {
  #header-top, #content-top, #content-bottom {
    padding: 1rem 0;
  }
  .postWrapper .post {
    padding: 0;
  }
  .wp-block-image .wp-element-caption,
  figure:not(.wp-block-table) figcaption.wp-element-caption {
    right: 1rem;
    background-color: rgba(var(--dark-grey-rgb), .85);
    padding: 1rem;
    color: var(--white);
    /* transform: translateY(35%); */
    transition: all .3s ease-in-out;
    max-width: 40%;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: end;
  }
  .wp-block-image .wp-element-caption::before,
  figure:not(.wp-block-table) figcaption.wp-element-caption::before {
    font-family: "Font Awesome 6 Pro";
    content: "\f139";
    font-weight: 900;
    font-size: 1.25rem;
  }
  .wp-block-image:hover .wp-element-caption,
  figure.wp-block-image:hover figcaption.wp-element-caption {
    transform: translateY(-1rem) !important;
  }
  .wp-block-image .wp-element-caption::before,
  figure:not(.wp-block-table) figcaption.wp-element-caption::before {
    transition: all .3s ease-in-out;
    display: inline-block;
  }
  .wp-block-image:hover .wp-element-caption::before,
  figure.wp-block-image:hover figcaption.wp-element-caption::before {
    transform: rotate(180deg);
  }
}