/*!
Theme Name: Procession 
Theme URI: https://tinynow.com
Author: Matt Kreiling
Author URI: https://tinynow.com
Description: Twenty Twenty-Four child theme for Olympia Procession of the Species - procession.org
*/
:root {
  --flow-space: 1.5em;
  --teal-1: oklch(48% .106 196.81);
  --teal-2: oklch(46% .106 189.37);
  --yellow-1: oklch(90.49% .215 102.57);
  --red-1: oklch(70% .224 24.35);
  --blue: oklch(75.7% .1566 216);
  --medium-blue: oklch(60% .1566 216);
  --dark-blue: oklch(45.7% .1566 216);
  --yellow: oklch(89.24% .175 96.88);
  --light-yellow: oklch(90.24% .05 96.88 / .7);
  --transparent-yellow: oklch(89.24% .175 96.88 / 0);
  --red: oklch(72.5% .195 19.75);
  --pink: oklch(90% .195 19.75);
  --green: oklch(79.15% .2415 127.98);
  --font-family-body: "Poppins", sans-serif;
  --font-family-heading: "Kalnia", serif;
  --font-family-gonzo: "Gonzo", cursive;
  --rainbow: var(--red), var(--yellow), var(--blue);
  --rainbow-to-top: linear-gradient(to top, var(--rainbow));
  --shadow-color: 168deg 30% 42%;
  --shadow-elevation-low: .3px .5px .7px hsl(var(--shadow-color) / .34), .4px .8px 1px -1.2px hsl(var(--shadow-color) / .34), 1px 2px 2.5px -2.5px hsl(var(--shadow-color) / .34);
  --shadow-elevation-medium: .3px -.5px .7px hsl(var(--shadow-color) / .36), .8px -1.6px 2px -.8px hsl(var(--shadow-color) / .36), 2.1px -4.1px 5.2px -1.7px hsl(var(--shadow-color) / .36), 5px -10px 12.6px -2.5px hsl(var(--shadow-color) / .36);
  --shadow-elevation-high: .3px -.5px .7px hsl(var(--shadow-color) / .34), 1.5px -2.9px 3.7px -.4px hsl(var(--shadow-color) / .34), 2.7px -5.4px 6.8px -.7px hsl(var(--shadow-color) / .34), 4.5px -8.9px 11.2px -1.1px hsl(var(--shadow-color) / .34), 7.1px -14.3px 18px -1.4px hsl(var(--shadow-color) / .34), 11.2px -22.3px 28.1px -1.8px hsl(var(--shadow-color) / .34), 17px -33.9px 42.7px -2.1px hsl(var(--shadow-color) / .34), 25px -50px 62.9px -2.5px hsl(var(--shadow-color) / .34);
  --inset-shadow: inset .3px -.5px .7px hsl(var(--shadow-color) / .36), inset .8px -1.6px 2px .8px hsl(var(--shadow-color) / .36), inset 2.1px -4.1px 5.2px 1.7px hsl(var(--shadow-color) / .36), inset 5px -10px 12.6px 2.5px hsl(var(--shadow-color) / .36);
}

@font-face {
  font-family: Gonzo;
  font-style: normal;
  font-display: fallback;
  src: url("assets/fonts/gonzo.woff2") format("woff2");
  font-stretch: normal;
}

@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 400;
  font-display: fallback;
  src: url("assets/fonts/Poppins-Regular.woff2") format("woff2");
  font-stretch: normal;
}

@font-face {
  font-family: Poppins;
  font-style: italic;
  font-weight: 400;
  font-display: fallback;
  src: url("assets/fonts/Poppins-Italic.woff2") format("woff2");
  font-stretch: normal;
}

@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 300;
  font-display: fallback;
  src: url("assets/fonts/Poppins-Light.woff2") format("woff2");
  font-stretch: normal;
}

@font-face {
  font-family: Poppins;
  font-style: italic;
  font-weight: 300;
  font-display: fallback;
  src: url("assets/fonts/Poppins-LightItalic.woff2") format("woff2");
  font-stretch: normal;
}

@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 700;
  font-display: fallback;
  src: url("assets/fonts/Poppins-Bold.woff2") format("woff2");
  font-stretch: normal;
}

@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 800;
  font-display: fallback;
  src: url("assets/fonts/Poppins-ExtraBold.woff2") format("woff2");
  font-stretch: normal;
}

@font-face {
  font-family: Kalnia;
  font-style: normal;
  font-weight: 300 900;
  font-display: fallback;
  src: url("assets/fonts/Kalnia-VariableFont_wdth,wght.woff2") format("woff2");
  font-stretch: normal;
}

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

img, video, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

iframe {
  max-width: 100%;
}

body {
  grid-template: "logo header"
                 "sidebar main" 1fr
                 "footer footer" min-content
                 / minmax(18rem, 2fr) 5fr;
  min-height: 100vh;
  display: grid;

  & main {
    padding: var(--step-5, 3rem);
    box-shadow: var(--shadow-elevation-medium);
    background-image: linear-gradient(to bottom, var(--yellow), var(--light-yellow) 50%, var(--transparent-yellow));
    border-top-left-radius: 16px;
    grid-area: main;
    margin-bottom: 4rem;
  }

  & > aside {
    grid-area: sidebar;
  }

  & > footer {
    grid-area: footer;
  }
}

@media (width < 57rem) {
  body {
    grid-template-columns: 1fr;
    grid-template-areas: "logo"
                         "header"
                         "main"
                         "sidebar"
                         "footer";
  }
}

:root {
  --step--2: clamp(.7813rem, .7747rem + .0326vw, .8rem);
  --step--1: clamp(.9375rem, .9158rem + .1087vw, 1rem);
  --step-0: clamp(1.125rem, 1.0815rem + .2174vw, 1.25rem);
  --step-1: clamp(1.35rem, 1.2761rem + .3696vw, 1.5625rem);
  --step-2: clamp(1.62rem, 1.5041rem + .5793vw, 1.9531rem);
  --step-3: clamp(1.9438rem, 1.7707rem + .8652vw, 2.4413rem);
  --step-4: clamp(2.3325rem, 2.0823rem + 1.2511vw, 3.0519rem);
  --step-5: clamp(2.7994rem, 2.4461rem + 1.7663vw, 3.815rem);
  --step-6: clamp(3.3592rem, 2.8691rem + 2.4507vi, 4.7684rem);
}

body {
  font-family: var(--font-family-body);
  font-size: var(--step-0);
}

h1 {
  font-size: var(--step-6);
  text-wrap: pretty;
  margin-block-end: 1em;
  font-weight: 800;
  line-height: 1.1;
}

h1, h2, h3 {
  text-wrap: balance;
}

nav[aria-label="main"] {
  grid-area: nav;
  grid-template-rows: 0;
  transition: grid-template-rows .7s ease-in-out;
  display: grid;

  & > ul {
    padding: 0 0 0 2rem;
    font-weight: 900;
    overflow: hidden;
  }

  & .menu {
    justify-self: end;
    margin-bottom: 2rem;
  }

  & ul ul {
    font-weight: 400;
  }

  & a {
    font-size: var(--step-1, 1rem);
    padding: 8px;
    line-height: 1.25;
    display: block;

    @media screen and (width < 57rem) {
      & {
        color: #fff;
        background-color: var(--medium-blue);
        border-bottom: 1px solid #fff;
        border-top-left-radius: 2rem;
        border-bottom-left-radius: 2rem;
        margin-bottom: 4px;
        padding-inline-start: 1em;
      }

      .current-menu-item > & {
        background-color: var(--red);
      }
    }
  }

  & button {
    color: var(--color-link, var(--yellow-1));
    background: none;
    border: none;
    place-items: center;
    display: grid;
    position: absolute;
    top: .5rem;
    right: .5rem;

    & span {
      font-size: .825em;
    }

    & svg {
      fill: currentColor;
      grid-area: 1 / 1;
      transition: opacity .2s ease-in-out;
    }

    & .icon-open {
      opacity: 1;
    }

    & .icon-close {
      opacity: 0;
    }

    &[aria-expanded="true"] {
      & .icon-open {
        opacity: 0;
      }

      & .icon-close {
        opacity: 1;
      }
    }
  }
}

nav[aria-label="main"]:has([aria-expanded="true"]) {
  grid-template-rows: 1fr;
}

@media (width > 57rem) {
  nav[aria-label="main"] {
    display: block;

    & button {
      display: none;
    }

    & .menu {
      justify-content: flex-end;
      place-items: flex-end;
      column-gap: .5rem;
      margin-block-end: 0;
      padding-inline-end: .5rem;
      display: flex;

      & > li {
        flex-shrink: 1;
      }
    }

    & .current-menu-item, & .current-menu-parent {
      background-color: var(--yellow);
      z-index: 1;
      box-shadow: var(--shadow-elevation-medium);
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
    }

    & a {
      text-wrap: balance;
      color: #000;
      text-align: center;
      padding: 8px 16px;
      font-size: .875rem;
      font-weight: 200;
      display: inline-block;
    }

    & .sub-menu {
      display: none;
    }
  }
}

.post {
  max-width: 70ch;

  & > * + * {
    margin-top: var(--flow-space, 1em);
  }

  & ol li {
    counter-increment: fun;
  }

  & li + li {
    margin-top: var(--step-0);
  }

  & ol li:before {
    content: counter(fun) ". ";
    font-family: var(--font-family-gonzo);
    color: var(--red);
    font-size: 2rem;
  }

  & ol {
    counter-reset: fun;
    padding: 0;
    list-style: none;
  }
}

@supports (initial-letter: 2) {
  .single.post > p:first-of-type:first-letter {
    initial-letter: 2;
    font-family: var(--font-family-gonzo);
    background-color: var(--dark-blue);
    color: var(--yellow);
    margin-inline-end: 4px;
    padding: 4px 8px;
    line-height: 1;
  }
}

header[role="banner"] {
  grid-area: logo / logo / header / header;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  display: grid;

  & nav {
    align-self: self-end;
  }

  & nav li {
    list-style: none;
  }

  & p {
    padding: var(--step-0);
    text-align: right;
  }

  & .logo-container {
    max-width: 200px;
    margin: 0;
    padding: 1rem;

    & a {
      display: block;
    }

    & img {
      width: 100%;
    }
  }
}

.sidebar {
  z-index: 1;
  flex-direction: column;
  display: flex;

  & > * + * {
    margin-top: 3rem;
  }

  & h2 {
    font-size: var(--step-3);
    font-weight: 600;
    line-height: 1;
  }
}

nav[aria-label="in this section"] {
  display: none;
}

@media (width >= 56rem) {
  nav[aria-label="in this section"] {
    grid-area: submenu;
    align-self: end;
    max-width: 20rem;
    margin-block-start: 1.5em;
    margin-inline: clamp(8px, 2.5vw, 3rem) 0;
    padding-inline-end: 0;
    display: block;

    & .menu, & .menu li {
      display: contents;
    }

    & li:not(.current-menu-parent, .current-menu-parent li, .current-menu-item, .current-menu-item li) {
      display: none;
    }

    & a {
      color: var(--dark-blue);
      text-align: center;
      background: #ffffff4d;
      border-top-left-radius: 3rem;
      border-bottom-left-radius: 3rem;
      min-width: 10rem;
      margin-block: 4px;
      padding-block: .5rem;
      padding-inline: 16px 8px;
      display: block;
    }

    & .menu > li > a {
      display: none;
    }

    & .sub-menu {
      font-size: var(--step--1);
      padding: 0;

      & li {
        display: block;
      }

      & .current-menu-item a {
        background-color: var(--dark-blue);
        color: var(--yellow);
        justify-content: flex-end;
        align-items: center;
        gap: 8px;
        display: flex;
      }

      & .current-menu-item a:before, & .current-menu-item a:after {
        font-size: 2rem;
        line-height: 0;
        font-family: var(--font-family-gonzo);
        content: "{";
        margin-left: 0;
        margin-right: auto;
      }

      & .current-menu-item a:after {
        content: "}";
        margin-left: auto;
        margin-right: 0;
      }
    }
  }
}

.upcoming-events {
  z-index: -1;

  & .event {
    background-color: var(--red);
    padding-block: 1rem 2rem;
  }

  & .event + .event {
    margin-top: 2rem;
  }

  & .date {
    font-size: var(--step--1);
    margin-bottom: 16px;
  }

  & h3 {
    text-wrap: balance;
    letter-spacing: -.04em;
    line-height: 1.1;
    font-size: var(--step-1);
  }

  & .location {
    font-size: var(--step--1);
    text-wrap: balance;
    margin-bottom: 2em;
    line-height: 1.2;
    display: block;
  }

  & .excerpt {
    font-size: var(--step--1);
    margin-top: 1rem;
  }

  & .read-more {
    font-weight: 700;
    font-size: var(--step-0);
    margin-top: 1rem;
    display: inline-block;
  }
}

.bubble-from-right {
  z-index: -1;
  box-shadow: var(--shadow-elevation-low);
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
  margin-inline-start: clamp(8px, 2.5vw, 3rem);
  padding-inline-end: clamp(8px, 2.5vw, 3rem);
}

.bubble-from-left {
  box-shadow: var(--shadow-elevation-medium);
  border-radius: 16px;
  margin-inline: 16px;
  padding-inline: clamp(8px, 1.5vw, 2rem);
}

.site-footer {
  background-color: var(--dark-blue);
  color: #fff;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 1rem;
  margin-top: 4rem;
  padding: 4em 1rem;
  display: flex;

  & > * {
    flex: 250px;
    max-width: 400px;
  }

  & h2 {
    font-family: var(--font-family-gonzo);
    font-size: var(--step-4);
    font-weight: 400;
    line-height: 1;
  }

  & a {
    color: #fff;
    text-decoration: underline;
  }
}

.call-to-action {
  background-color: var(--red);
  flex-direction: column;
  gap: 1em;
  padding: 1em;
  display: flex;

  & .blurb {
    font-size: var(--step--1);
  }

  & .button {
    background-image: linear-gradient(to bottom, var(--medium-blue) 50%, var(--blue));
    color: var(--yellow);
    cursor: pointer;
    box-shadow: var(--shadow-elevation-medium), inset 1px 1px 4px 0px #0000004d;
    text-transform: uppercase;
    letter-spacing: .1em;
    word-spacing: .2em;
    font-weight: 700;
    font-size: var(--step-1);
    text-shadow: 1px 1px 4px #0000004d;
    background-size: 120% 120%;
    background-attachment: scroll;
    border-radius: 16px;
    flex-grow: 0;
    align-self: center;
    place-items: center;
    margin-block: 1em 2em;
    padding: 16px 24px;
    transition: all 3s;
    display: inline-flex;
    position: relative;

    &:hover {
      background-position: 0%;
    }
  }
}

a {
  color: var(--color-link, var(--dark-blue));
  text-decoration: none;

  &:hover {
    background-color: var(--color-link-background-hover, var(--red-1));
  }
}

body {
  background-image: var(--rainbow-to-top);
  color: #222;
  background-attachment: fixed;
}

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

/*# sourceMappingURL=../style.css.map */