/* All screens */
:root {
  --bright-green-500: #b9e28d;
  --bright-green-700: #6f9a40;
  --bright-yellow-50: #f9f0e1;
  --bright-yellow-100: #f4dfbb;
  --bright-yellow-300: #f3ca84;
  --bright-yellow-500: #f3bb5c;
  --bright-yellow-700: #e1981e;
  --bright-pink-300: #f0b8d0;
  --bright-pink-500: #e878a9;
  --bright-red-500: #d75542;
  --bright-blue-500: #5cabf3;
  --bright-gray-500: #f0f0f0;
  --black: #000;
  --brown-500: #643f00;
  --white: #fff;
  --white-translucent: hsla(0, 0%, 100%, 0.95);
  --spacer-extra-large: 4rem;
  --spacer-large: 2rem;
  --spacer: 1rem;
  --spacer-small: 0.5rem;
  --spacer-tiny: 0.25rem;
  --stroke: 0.125rem;
  --font-base: 14px;
  --font-small: 0.75rem;
  --font-normal: 1rem;
  --font-between: 1.25rem;
  --font-medium: 1.5rem;
  --font-large: 1.75rem;
  --font-extra-large: 2rem;
  --flexible-margin: 6vw;
  --box-shadow-green: 0.25rem 0.25rem var(--bright-green-500);
  --box-shadow-yellow: 0.25rem 0.25rem var(--bright-yellow-500);
  --box-shadow-pink: 0.25rem 0.25rem var(--bright-pink-500);
  --box-shadow-red: 0.25rem 0.25rem var(--bright-red-500);
  --box-shadow-blue: 0.25rem 0.25rem var(--bright-blue-500);
  --box-shadow-black: 0.15rem 0.15rem var(--black);
  --border-radius-none: 0px;
  --border-radius-sm: 2px;
  --border-radius-default: 4px;
  --border-radius-full: 9999px;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1400px;
  --site-navigation-scroll-indicator-display: flex;
  --site-navigation-scroll-offset: var(--spacer);
  --site-hero-height: 15rem;
  --site-hero-text-size: var(--font-between);
  --site-footer-content-display: block;
  --site-footer-content-text-align: center;
  --site-footer-nav-justify-content: center;
  --block-cta-text-size: var(--font-between);
  --site-hero-background-image: url("/img/daniel-tuttle-5nyybewzwt0-unsplash.jpg");
}

/* Large screens */
@media screen and (min-width: 576px) {
  :root {
    --font-base: 16px;
    --site-navigation-scroll-indicator-display: none;
    --site-navigation-scroll-offset: 0;
    --site-hero-height: 25rem;
    --site-hero-text-size: var(--font-medium);
    --block-cta-text-size: var(--font-between);
  }
}

@media screen and (min-width: 768px) {
  :root {
    --site-footer-content-display: flex;
    --site-footer-content-text-align: left;
    --site-footer-nav-justify-content: end;
  }
}

/* Global reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*
 * Base styles
 */

html {
  height: 100%;
  font-size: var(--font-base);
}

body {
  height: 100%;
  font-family: "League Spartan", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 500;
  margin-bottom: var(--spacer);
}

a {
  color: var(--black);
  text-decoration: none;
  border-bottom: var(--stroke) solid var(--black);
}

p {
  line-height: 1.4;
  margin-bottom: var(--spacer);
}

ul,
ol {
  list-style-position: inside;
  margin-bottom: var(--spacer);
}

ul {
  list-style-type: "✼ ";
}

li {
  margin-bottom: var(--spacer-small);
}

li:last-child {
  margin-bottom: 0;
}

code {
  padding: 2px 4px;
  font-size: var(--font-small);
  background-color: var(--bright-yellow-100);
}

::selection {
  background: var(--bright-pink-300);
  text-shadow: none;
}

/* For screen readers */
.sr-only {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Overall grid */
.site-grid {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-left: var(--spacer-small) solid var(--black);
  padding-right: var(--site-navigation-scroll-offset);
  background-color: var(--white);
}

/* Main area */
.site-main {
  flex-grow: 1;
}

/* Scroll indicator */
.site-header::after {
  content: "➞";
  display: var(--site-navigation-scroll-indicator-display);
  align-items: center;
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  padding: 0 var(--spacer-small);
  color: var(--bright-red-500);
}

/* Branding */
.site-branding {
  width: 8rem;
  margin: 0;
}

.site-branding a {
  display: block;
  border: 0;
  padding-left: var(--spacer-small);
  color: var(--bright-red-500);
  text-decoration: none;
  font-size: var(--font-medium);
}

/* Main navigation */
.site-navigation {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

/* Main navigation item */
.site-navigation a {
  display: block;
  border: 0;
  padding: var(--spacer-small) var(--spacer);
}

.site-navigation a:hover {
  background-color: var(--bright-yellow-500);
}

.site-navigation a.current {
  background-color: var(--black);
  color: var(--white);
}

/* Site hero image */
.site-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--site-hero-height);
  background-image: var(--site-hero-background-image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

/* Site hero text */
.site-hero-text {
  border-left: var(--spacer-small) solid var(--bright-red-500);
  box-shadow: var(--box-shadow-black);
  margin: 0;
  padding: var(--spacer) var(--spacer-large);
  background-color: var(--white-translucent);
  font-size: var(--site-hero-text-size);
}

/* Generic container */
.site-container {
  margin: 0 auto;
  padding: var(--spacer);
}

.site-container.lg {
  max-width: var(--breakpoint-lg);
}

.site-container.md {
  max-width: var(--breakpoint-md);
}

/*
 * Call-to-action block
 */
.block-cta {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--spacer);
  row-gap: var(--spacer);
  margin: var(--spacer-large) 0;
}

.block-cta.image-right {
  grid-template-areas:
    "text text text image"
    "cta cta cta image";
}

.block-cta.image-left {
  grid-template-areas:
    "image text text text"
    "image cta cta cta";
}

.block-cta-text {
  grid-row: text;
  grid-column: text;
  justify-self: center;
  align-self: end;
  font-size: var(--block-cta-text-size);
  text-align: left;
}

.block-cta-img {
  width: 100%;
  height: auto;
  grid-row: image;
  grid-column: image;
  justify-self: center;
  align-self: center;
}

.block-cta-button {
  grid-row: cta;
  grid-column: cta;
  justify-self: center;
  align-self: start;
}

/* Header block */

.block-header {
  margin: var(--spacer) 0;
  font-size: var(--font-extra-large);
}

/* List view (i.e. for Events or Jobs) */
.list {
  margin: 0;
}

.list-item {
  display: grid;
  grid-template-rows: auto auto auto;
  row-gap: var(--spacer);
  padding-bottom: var(--spacer-large);
  margin-bottom: var(--spacer-large);
  border-bottom: var(--stroke) solid var(--black);
}

.list-item:first-child {
  margin-top: var(--spacer-large);
}

.list-item:last-child {
  margin-bottom: 0;
  border: 0;
}

.list-header {
  font-size: var(--font-large);
}

.list-link {
  border: 0;
}

.list-tags {
  display: flex;
  gap: var(--spacer-small);
}

.list-tag {
  display: inline-block;
  border: 0;
  border-radius: var(--border-radius-full);
  padding: var(--spacer-tiny) var(--spacer-small);
  background-color: var(--bright-yellow-500);
  font-size: var(--font-small);
  font-weight: 500;
}

.list-footer {
  display: flex;
  gap: var(--spacer);
}

.list-details {
  color: var(--bright-blue-500);
  border: 0;
}

.list-details::before {
  content: "❋ ";
}

.list-external-link {
  color: var(--bright-red-500);
  border: 0;
}

.list-external-link::before {
  content: "⚑ ";
}

/* Global footer */
.site-footer {
  position: sticky;
  bottom: 0;
  background-color: var(--black);
  color: var(--white);
}

.site-footer-content {
  display: var(--site-footer-content-display);
  align-items: center;
  justify-content: space-between;
  text-align: var(--site-footer-content-text-align);
}

.site-footer-content p {
  margin: 0;
}

.site-credit a {
  color: var(--bright-green-500);
}

.site-footer-nav {
  display: flex;
  align-items: center;
  justify-content: var(--site-footer-nav-justify-content);
}

.site-footer-nav a {
  position: relative;
  display: inline-block;
  color: var(--bright-yellow-500);
}

.site-footer-nav a::after {
  content: "•";
  padding: var(--spacer-small);
  color: var(--white);
}

.site-footer-nav a:last-child::after {
  display: none;
}

/*
 * Page components
 */
.page-header-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacer);
}
.page-footer {
  margin-top: var(--spacer);
  padding-top: var(--spacer);
  border-top: var(--stroke) solid var(--bright-red-500);
}

.page-next-prev {
  display: flex;
  justify-content: space-between;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/*
 * Buttons
 */

/* Primary button */
.button-primary {
  display: inline-block;
  outline: none;
  padding: var(--spacer) var(--spacer-large);
  border: var(--black) solid var(--stroke);
  border-radius: var(--border-radius-full);
  box-shadow: var(--box-shadow-black);
  font-size: var(--font-normal);
  background-color: var(--bright-green-500);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.button-primary:hover {
  background-color: var(--bright-green-700);
  color: var(--white);
}

/*
 * Utility classes
 */

/* Link colors */

a.link-green {
  color: var(--bright-green-500);
  border-color: var(--bright-green-500);
}

a.link-yellow {
  color: var(--bright-yellow-700);
  border-color: var(--bright-yellow-700);
}

a.link-pink {
  color: var(--bright-pink-500);
  border-color: var(--bright-pink-500);
}

a.link-red {
  color: var(--bright-red-500);
  border-color: var(--bright-red-500);
}

a.link-black {
  color: var(--black);
  border-color: var(--black);
}

/* Box shadows */

.box-shadow-green {
  box-shadow: var(--box-shadow-green);
}

.box-shadow-yellow {
  box-shadow: var(--box-shadow-yellow);
}

.box-shadow-pink {
  box-shadow: var(--box-shadow-pink);
}

.box-shadow-red {
  box-shadow: var(--box-shadow-red);
}

.box-shadow-blue {
  box-shadow: var(--box-shadow-blue);
}

/* Typefaces */
@font-face {
  font-family: "League Spartan";
  font-weight: 300 500 700 900;
  src: url("/css/LeagueSpartan-VF.woff2") format("woff2-variations");
}