/*
Theme Name: Adventist Mission
Author: Adventist Media
*/

:root {
  --clr-adventist-flame: #ff8200;
  --clr-dark-cyan: #3aada8;
  --clr-light-cyan: #bfd9d7; /* #c1d5d7; */
  --clr-very-light-cyan: #dfeceb; /* #e0eaeb; */
  --main-width: 1300px;
  --main-side-padding: 1em;
  --tra-short: 250ms;
  scroll-behavior: smooth;
}

body, button {
  font-family: 'Noto Sans', sans-serif;
  font-size: 16px;
  @media (min-width: 500px) {font-size: 17px;}
  @media (min-width: 750px) {font-size: 18px;}
  @media (min-width: 1000px) {font-size: 19px;}
}

body {
  margin: 0;
}

img {
  max-width: 100%;
}

:is(header, footer, .article-list) a {
  color: inherit;
  text-decoration: none;
}

.wp-block-button__link {
  background-color: black;
  border-radius: 0.6em;
  padding: 0.3em 1em 0.4em;
  transition: var(--tra-short);
  
  &:hover {
    background-color: var(--clr-dark-cyan);
  }
}

.wp-embed-aspect-16-9>.wp-block-embed__wrapper, .aspect-16-9 {
	width: 100%;
	aspect-ratio: 16/9;
}

.wp-embed-aspect-19-10>.wp-block-embed__wrapper, .aspect-19-10 {
	width: 100%;
	aspect-ratio: 19/10;
}

.wp-block-embed__wrapper>iframe {
  display: block;
  width: 100%;
  height: 100%;
}

.wp-block-media-text__content > :first-child {margin-top: 0;}
.wp-block-media-text__content > :last-child {margin-bottom: 0;}

.article-list a {
  display: grid;
  gap: 1em 2em;
  padding: 1em;
  margin-left: -1em;
  @media (min-width: 750px) {grid-template-columns: 1fr 3fr;}
  figure {
    margin-bottom: 0;
    img {display: grid;}
  }
  > div {
    > :first-child, > .wp-block-group__inner-container > :first-child {margin-top: 0;}
    > :last-child, > .wp-block-group__inner-container > :last-child {margin-bottom: 0;}
  }
  &:hover {
    background-color: var(--clr-very-light-cyan);
    img {outline: 5px solid white;}
  }
}

nav {                                   /* basic menu */
  display: flex;
  gap: 0.5em 1em;
}

header, footer {
  background: black;
  color: white;
  padding: 1em;
}

header {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
  .hamburger {
    margin: 0;
    padding: 0;
    border: 0;
    width: 1em;
    height: 1em;
    justify-self: end;
    color: white;
    background-color: transparent;
    background-image: url(img/hamburger.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 3px;
    cursor: pointer;
  }
  nav {display: none;}
  &.expanded nav {display: flex; grid-column: 1 / span 2; justify-self: center;}
  @media (min-width: 750px) {
    .hamburger {display: none;}
    nav, &.expanded nav {display: flex; grid-column: unset; justify-self: end;}
  }
}

footer {
  font-size: 0.8em;
  display: flex;
  flex-wrap: wrap;
  gap: 5vw;
  img {width: 300px;}
  nav {flex-direction: column;}
  padding: 2rem max(1rem, (100vw - var(--main-width)) / 2);
}

main {
  max-width: var(--main-width);
  margin-left: auto;
  margin-right: auto;
  padding: 1em var(--main-side-padding) 2em;
  container-type: inline-size;
}

.alignfull {
  margin-left: calc((100vw - 100cqw) / -2);
  margin-right: calc((100vw - 100cqw) / -2);
}

.wp-singular .featured-image img {
  width: 100%;
  max-height: 50vh;
  object-fit: cover;
}

.post-title {
  line-height: 1.2;
  text-wrap: balance;
}

.post-meta {
  font-size: 0.8em;
  color: #888;
}

/* home page */

.home {
  main {padding-top: 0;}
  h1.post-title {display: none;}
  .top-image img {
    height: 50vh;
    object-fit: cover;
    object-position: center;
  }
  .activity-icons {
    > .wp-block-group {
      padding: 0 0.5em 1em;
      border-radius: 0.5em;
      cursor: pointer;
      transition: var(--tra-short);
      &:hover {background-color: var(--clr-very-light-cyan);}
    }
  }
  .wp-block-cover.journey {
    text-shadow: 0 0 5px #527B68;
    h1 {line-height: 1;}
  }
}

/* about page */

.team2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 2em 1em;
  > * {
    cursor: pointer;
    scroll-margin-top: 2em;
  }
  img {
    width: 100%;
    aspect-ratio: 2/3;
    object-fit: cover;
    transition: 250ms;
    margin-bottom: 3px;
    border-radius: 5px;
    transform-origin: center 75%;
  }
  > *:hover img {transform: scale(1.03); filter: brightness(1.05);}
  .name, .position {margin: 0;}
  .name {font-weight: 600;}
  .position {font-weight: 300; font-size: 0.85em; color: rgb(0 0 0 / 0.7);}
  .bio {
    &:not(.expanded) {display: none;}
    padding-top: 0.5em;
    &::before {
      display: block;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      height: 40px;
      content: '';
      background-image: url(/wp-content/themes/adventist-mission/img/team-bio-arrow-2.svg);
      background-size: contain;
      background-repeat: no-repeat;
    }
    > div {
      position: relative;
      width: 80vw;
      background: #e0eaeb;
      padding: 0.5em clamp(1em, 3vw, 3em) 1.5em;
      border-radius: 5px;
      box-sizing: border-box;
      > :last-child {margin-bottom: 0;}
    }
  }
}

/* overrides */

.mt0 {margin-top: 0;}
.mb0 {margin-bottom: 0;}