/*
  Megan Hunt for Legislature

  Breakpoints (media queries can't use custom properties):
    tiny 401px, 500px, 530px, 600px, mobile 620px, ipad 768px, 800px, desktop 880px,
    960px (header/footer switch), 1020px, 1290px
*/

:root {
  --blue: #072b49;
  --blue-light: #083357;
  --heading-blue: #679ac8;
  --heading-blue-hover: #4381b9;
  --quote-blue: #8395a4;
  --feature-blue: #e9f4ff;
  --red: #f04d55;
  --red-hover: #ec1e28;
  --white: white;
  --light-grey: #e6e6e6;
  --grey: #b1b1b1;
  --facebook: #3b5998;
  --facebook-hover: #344e86;
  --twitter: #00aced;
  --twitter-hover: #0099d4;

  --sans-serif: "europa", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
  --serif: "abril-text", "Georgia", "Cambria", "Times New Roman", "Times", serif;

  --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
}

/* ---------- Reset (the parts of Normalize the layout relies on) ---------- */

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

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

b,
strong {
  font-weight: bolder;
}

small {
  font-size: 80%;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  display: block;
  max-width: 100%;
  margin: 0;
  border-style: none;
}

svg:not(:root) {
  overflow: hidden;
}

button,
input,
select,
textarea {
  margin: 0;
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
}

textarea {
  overflow: auto;
}

/* ---------- Elements ---------- */

.button {
  appearance: none;
  display: inline-block;
  vertical-align: middle;
  inline-size: auto;
  padding: 13px 25px 14px;
  border: none;
  border-radius: 0;
  background-color: var(--red);
  font-family: var(--sans-serif);
  font-size: 1.5rem;
  font-weight: bold;
  line-height: normal;
  letter-spacing: 0.025em;
  text-align: center;
  text-decoration: none;
  color: var(--white);
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;

  &:hover,
  &:focus {
    background-color: var(--red-hover);
    color: var(--white);
  }

  @media (width < 401px) {
    inline-size: 100%;
  }
}

input,
label,
select {
  display: block;
  font-family: var(--sans-serif);
  font-size: 1em;
}

input[type="email"] {
  appearance: none;
  inline-size: 100%;
  margin-block-end: 0.75em;
  padding: 0.5em;
  border-radius: 0;
  background-color: white;
  font-family: var(--sans-serif);
  font-size: 1em;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

table {
  inline-size: 100%;
  margin: 0.75em 0;
  border-collapse: collapse;
  table-layout: fixed;
}

th {
  padding: 0.75em 0;
  border-block-end: 1px solid #8b8b8b;
  font-weight: bold;
  text-align: start;
}

td {
  padding: 0.75em 0;
  border-block-end: 1px solid var(--grey);
}

tr,
td,
th {
  vertical-align: middle;
}

body {
  display: flex;
  flex-direction: column;
  min-block-size: 100vh;
  background-color: var(--white);
  font-family: var(--sans-serif);
  font-size: 1em;
  line-height: 1.5;
  color: var(--blue);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 15px;
  font-family: var(--sans-serif);
  font-weight: normal;
  line-height: 1.25em;
  text-rendering: optimizeLegibility;
  color: var(--blue);
}

h1 { font-size: 3.25em; }
h2 { font-size: 2.75em; }
h3 { font-size: 2em; }
h4 { font-size: 1.75em; }
h5 { font-size: 1.5em; }
h6 { font-size: 1.25em; }

p {
  margin-block-end: 1.5em;
  font-size: 1.25rem;
  line-height: 1.75em;

  @media (width < 620px) {
    font-size: 1.125rem;
  }
  @media (width < 401px) {
    font-size: 1rem;
  }
}

a {
  color: var(--red);
  text-decoration: none;
  transition: color 0.1s linear;

  &:hover,
  &:active,
  &:focus {
    color: var(--red-hover);
  }
}

hr {
  margin: 1.5em 0;
  border: none;
  border-block-end: 1px solid var(--grey);
}

/* Large red headings: page headings, list headings, "Next in" headings, rich text h1 (h2 shares the size) */
.page-heading,
.list-heading,
.next-heading,
.rich_text h1,
.rich_text h2 {
  font-size: 2.3125rem;

  @media (width >= 500px) {
    font-size: 7.5vw;
  }
  @media (width >= 800px) {
    font-size: 3.75rem;
  }
}

.page-heading,
.list-heading,
.next-heading,
.rich_text h1 {
  font-weight: 700;
  color: var(--red);
}

/* Calendar date block: event cards and event pages */
.post_widget-date,
.article-heading-meta-date {
  display: flex;
  flex-direction: column;
  flex: 0 0 62px;
  margin-inline-end: 20px;
  padding-block-start: 6px;
  text-align: center;

  @media (width >= 500px) {
    flex-basis: 11.25vw;
  }
  @media (width >= 800px) {
    flex-basis: 90px;
  }
}

.post_widget-date-month,
.article-heading-meta-date-month {
  font-size: 1rem;
  font-weight: bold;
  line-height: 1em;
  text-transform: uppercase;

  @media (width >= 500px) {
    font-size: 1.125rem;
  }
}

.post_widget-date-day,
.article-heading-meta-date-day {
  font-family: var(--serif);
  font-size: 2.5rem;
  line-height: 0.875em;

  @media (width >= 500px) {
    font-size: 8vw;
  }
  @media (width >= 800px) {
    font-size: 4rem;
  }
}

/* Centered 800px column */
.page-heading,
.next,
.article,
.components,
.post-list {
  inline-size: 100%;
  max-inline-size: 800px;
  margin-inline: auto;
  padding-inline: 20px;

  @media (width >= 620px) {
    padding-inline: 30px;
  }
}

/* ---------- Footer ---------- */

.footer {
  padding: 30px 0;
  background-color: var(--blue);
  color: var(--white);

  @media (width < 959px) {
    padding-block-start: 0;
  }
}

.footer-container {
  inline-size: 100%;
  max-inline-size: 1060px;
  margin: 0 auto;
  padding: 0 20px;

  @media (width >= 620px) {
    padding: 0 30px;
  }
  @media (width < 959px) {
    padding: 0;
    text-align: center;
  }
}

.footer-section {
  padding: 0 30px;

  @media (width >= 960px) {
    display: flex;
    flex-wrap: wrap;
    inline-size: 100%;
    padding: 0;
  }

  &:first-child {
    @media (width < 959px) {
      padding: 30px 30px 1px;
      background-color: var(--blue-light);
    }
    @media (width < 620px) {
      padding-inline: 20px;
    }
  }
}

.footer-section--mobile {
  margin-block-start: 50px;

  @media (width >= 960px) {
    margin-block-start: 80px;
  }
}

.footer-section--desktop {
  margin-block-start: 30px;

  @media (width < 959px) {
    display: none;
  }
}

.footer-section-left,
.footer-section-right {
  @media (width >= 960px) {
    display: flex;
    align-items: flex-end;
    inline-size: 50%;

    .footer-section--mobile & {
      align-items: center;
    }
  }
}

.footer-section-left {
  @media (width >= 960px) {
    flex: 1 0 auto;
    justify-content: flex-start;
  }
}

.footer-section-right {
  @media (width >= 960px) {
    flex: 0 0 380px;
    justify-content: flex-end;
  }
}

.footer-newsletter-leadin {
  margin-block-end: 0.75em;
  font-size: 1.125rem;

  @media (width >= 401px) {
    font-size: 1.25rem;
  }
  @media (width >= 620px) {
    font-size: 1.375rem;
  }
  @media (width >= 960px) {
    font-size: 1.625rem;
  }
}

.footer-newsletter .newsletter {
  @media (width < 959px) {
    margin: 0 auto 30px;
  }
}

.footer .social_links {
  @media (width < 959px) {
    margin: 50px auto;
  }
}

.footer-nav {
  @media (width >= 960px) {
    display: flex;
    align-items: center;
  }

  .navigation {
    @media (width < 500px) {
      margin-block-start: 15px;
    }
    @media (width < 959px) {
      margin-block-end: 50px;
    }
  }

  .navigation li {
    @media (width < 500px) {
      display: block;
      margin: 0 0 8px;
    }
  }

  .navigation a {
    @media (width < 1020px) {
      font-size: 1rem;
    }
  }
}

.footer-nav-logo {
  display: inline-block;
  margin-block-end: 20px;

  @media (width >= 960px) {
    margin: 0 10px 0 0;
  }

  path {
    transition: fill 0.1s linear;
  }

  &:hover path {
    fill: var(--red);
  }
}

.footer-copy {
  margin-block-end: 50px;
  font-size: 1.125rem;
  font-weight: bold;
  line-height: 1.25em;

  @media (width >= 960px) {
    margin: 0;

    .footer-section--mobile & {
      display: none;
    }
  }

  a {
    font-size: 1em;
    font-weight: bold;
    color: var(--red);

    &:hover,
    &:focus {
      color: var(--red-hover);
    }
  }
}

.footer-outlined {
  display: inline-block;
  margin: 0 0 15px;
  padding: 3px 8px;
  border: 1px solid var(--white);
  font-size: 0.9375rem;
  line-height: 1.375em;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--white);

  @media (width >= 960px) {
    margin: 0;
    padding: 0 15px;
    line-height: 38px;
  }
  @media (width >= 1020px) {
    font-size: 1rem;
  }
}

.footer-details {
  display: block;
  margin: 0;
  font-size: 0.8125rem;
  color: var(--white);

  @media (width >= 960px) {
    text-align: end;

    .footer-section--mobile & {
      display: none;
    }
  }
}

/* ---------- Header ---------- */

.header {
  position: relative;
  inline-size: 100%;
  max-inline-size: 1440px;
  margin: 0 auto;
  padding: 20px;

  @media (width >= 960px) {
    padding: 35px 30px;
  }
}

.header-container,
.header-side {
  @media (width >= 960px) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
}

.header-side {
  @media (width >= 960px) {
    flex: 2;
    justify-content: flex-end;
  }
  @media (960px <= width < 1290px) {
    flex: 0 0 auto;
  }
}

.header-side--right {
  @media (960px <= width < 1290px) {
    flex: 1 0 430px;
    justify-content: flex-end;
  }
  @media (width < 960px) {
    display: none;
  }
}

.header-side--logo {
  display: block;

  @media (width < 960px) {
    text-align: center;
  }
}

.header-logo {
  display: inline-block;
  inline-size: 200px;
  block-size: 108px;

  @media (width >= 960px) {
    display: block;
    inline-size: 274px;
    block-size: 148px;
  }

  svg {
    inline-size: 100%;
    block-size: auto;
  }
}

.header-nav {
  padding: 10px 0 0 10px;
}

/* ---------- Home feature ---------- */

.feature {
  max-inline-size: 1440px;
  margin: 0 auto;
  background-color: var(--feature-blue);
  color: var(--blue);

  @media (width >= 800px) {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
  }
  @media (width < 800px) {
    background-image: none !important;
  }
}

.feature-image {
  block-size: 500px;
  background-size: cover;
  background-position: 25% top;
  background-repeat: no-repeat;

  @media (width >= 620px) {
    padding: 0 30px 10px;
  }
  @media (width >= 800px) {
    display: none;
  }
}

.feature-container {
  display: flex;
  align-items: stretch;
  justify-content: center;

  @media (width >= 800px) {
    block-size: 800px;
  }
}

.feature-half {
  @media (width >= 800px) {
    inline-size: 50%;
  }
}

.feature-content {
  inline-size: 50%;

  @media (width < 800px) {
    inline-size: 100%;
  }

  p {
    margin: 0 0 25px;
    font-size: 1.125em;
    font-weight: bold;
    line-height: 1.5em;

    @media (width >= 401px) {
      font-size: 1.25em;
    }
    @media (width >= 800px) {
      font-size: 1.375em;
      line-height: 1.6125em;
    }

    &.feature-newsletter_leadin {
      font-size: 1em;
      font-weight: normal;
    }
  }
}

.feature-content-helper {
  inline-size: 100%;
  max-inline-size: 530px;
  margin: 0 auto;
  padding: 50px 20px;

  @media (width >= 620px) {
    padding: 50px 30px;
  }
  @media (width >= 800px) {
    max-inline-size: 505px;
    margin: 0;
    padding: 115px 30px 30px 15px;
  }
}

.feature-donate {
  margin-block-start: 40px;
}

.feature-donate-text {
  margin-block-end: 25px;
  font-size: 1rem;
}

.feature-donate-list {
  display: flex;
  gap: 10px;

  a {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 60px;
    block-size: 50px;
    background-color: var(--white);
    font-size: 1.25rem;
    font-weight: bold;
    text-align: center;
    color: var(--red);
    transition: background-color 0.1s linear, color 0.1s linear;

    @media (width >= 401px) {
      inline-size: 78px;
      block-size: 68px;
      font-size: 1.75rem;
    }

    &:hover {
      background-color: var(--red);
      color: var(--white);
    }
  }

  sup {
    font-size: 0.6em;
  }
}

/* ---------- Hero ---------- */

.hero {
  max-inline-size: 1440px;
  margin: 0 auto;
}

.hero-image {
  inline-size: 100%;
}

/* ---------- List (ribbon bullets and accordions) ---------- */

.list {
  margin: 45px 0;

  @media (width >= 401px) {
    margin: 11.25vw 0;
  }
  @media (width >= 800px) {
    margin: 90px 0;
  }
}

.list-heading {
  margin: 0;
  padding-block-end: 0.4375em;
}

.list-item--accordion {
  border-block-start: 2px solid var(--light-grey);

  &:last-child {
    border-block-end: 2px solid var(--light-grey);
  }
}

.list-item-heading {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1em;

  @media (width >= 500px) {
    font-size: 4.5vw;
  }
  @media (width >= 800px) {
    font-size: 2.25rem;
  }

  a {
    position: relative;
    display: block;
    padding: 35px 70px 35px 38px;
    color: var(--blue);

    @media (width >= 500px) {
      padding-inline-start: 48px;
    }

    &:hover {
      color: var(--red);
    }
  }

  .ribbon {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0;
    transform: translateY(-50%);
  }

  .down-arrow {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 30px;
    transform: translateY(-50%);
    transform-origin: center;
    transition: transform 0.1s ease-in-out;

    polygon {
      fill: var(--blue);
      transition: fill 0.1s ease-in-out;
    }
  }

  a:hover .down-arrow polygon {
    fill: var(--red);
  }

  .is-open & .down-arrow {
    transform: rotate(180deg) translateY(50%);
  }
}

.list-item-hidden_content {
  display: none;
  padding-inline-start: 38px;
  font-size: 1rem;

  @media (width >= 500px) {
    padding-inline-start: 48px;
  }
  @media (width >= 600px) {
    font-size: 2.625vw;
  }
  @media (width >= 800px) {
    font-size: 1.3125rem;
  }

  .is-open & {
    display: block;
  }
}

.list-item-content {
  position: relative;
  padding-inline-start: 38px;

  @media (width >= 500px) {
    padding-inline-start: 48px;
  }

  svg {
    position: absolute;
    inset-block-start: 5px;
    inset-inline-start: 0;
  }

  p {
    font-size: 1.125rem;
    line-height: 1.375em;

    @media (width >= 500px) {
      font-size: 3.5vw;
    }
    @media (width >= 800px) {
      font-size: 1.3125rem;
    }
  }
}

/* ---------- Mobile menu ---------- */

.menu {
  position: relative;
  z-index: 100;
  block-size: 40px;
  background: var(--blue);
  text-align: center;

  .menu-open & {
    position: fixed;
    inset: 0 0 auto;
  }

  @media (width >= 960px) {
    display: none;
  }
}

.menu-social {
  position: absolute;
  inset-block-start: 9px;
  inset-inline-start: 10px;
  display: flex;
  block-size: 22px;
}

.menu-social-item {
  display: block;
  inline-size: 22px;
  block-size: 22px;
  margin-inline-end: 4px;
  border-radius: 3px;

  svg :is(path, circle) {
    fill: var(--white);
    transition: fill 0.1s linear;
  }

  &:hover {
    color: var(--red);

    svg :is(path, circle) {
      fill: var(--red);
    }
  }
}

.menu-social-item--contribute,
.menu-social-item--volunteer {
  inline-size: auto;
  margin-inline-end: 10px;
  font-family: var(--sans-serif);
  font-size: 0.875em;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--white);

  @media (width >= 401px) {
    font-size: 1em;
  }
}

.menu-social-item--twitter {
  margin-inline-end: 7px;
}

.menu-toggle {
  position: absolute;
  inset-block-start: 6px;
  inset-inline-end: 5px;
  inline-size: 40px;
  block-size: 21px;
  padding: 5px;
}

/* Hamburger icon. Nesting's & can't stand for a pseudo-element, so these selectors are flat.
   The transition delays pair with the 100ms menu-animate class toggle in site.js. */
.menu-toggle-line {
  position: absolute;
  inset: 13px 5px auto;
}

.menu-toggle-line,
.menu-toggle-line::before,
.menu-toggle-line::after {
  block-size: 2px;
  background-color: var(--white);
}

.menu-animate .menu-toggle-line,
.menu-animate .menu-toggle-line::before,
.menu-animate .menu-toggle-line::after {
  transition: background-color 0.1s linear, top 0.1s ease-in-out 0.1s, transform 0.1s ease-in-out;
}

.menu-open .menu-toggle-line,
.menu-open .menu-toggle-line::before,
.menu-open .menu-toggle-line::after {
  transition: background-color 0.1s linear, top 0.1s ease-in-out, transform 0.1s ease-in-out 0.1s;
}

.menu-toggle:hover .menu-toggle-line,
.menu-toggle:hover .menu-toggle-line::before,
.menu-toggle:hover .menu-toggle-line::after {
  background-color: var(--red);
}

.menu-toggle-line::before,
.menu-toggle-line::after {
  content: "";
  position: absolute;
  inset-inline: 0;
}

.menu-toggle-line::before {
  top: -7px;
}

.menu-toggle-line::after {
  top: 7px;
}

.menu-open .menu-toggle-line {
  background-color: transparent !important;
}

.menu-open .menu-toggle-line::before {
  top: 0;
  transform: rotate(45deg);
}

.menu-open .menu-toggle-line::after {
  top: 0;
  transform: rotate(-45deg);
}

.menu_content {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 30px 20px;
  border-block-start: 42px solid var(--white);
  background-color: var(--blue);
  opacity: 0;
  transition: opacity 0.3s var(--ease-in-out-quint);

  .menu-open & {
    display: flex;
  }
  .menu-open.menu-animate & {
    opacity: 1;
  }

  @media (width >= 960px) {
    display: none !important;
  }

  .navigation li {
    display: block;
    margin: 10px 0;
    text-align: center;

    @media (height <= 400px) {
      margin: 8px 0;
    }
  }

  .navigation a {
    font-size: 1.25rem;

    @media (width >= 401px) {
      font-size: 1.5rem;
    }
    @media (width >= 620px) {
      font-size: 1.75rem;
    }
    @media (height <= 400px) {
      font-size: 1.125rem;
    }
  }
}

body.menu-open {
  @media (width < 960px) {
    position: fixed;
    inset: 40px 0 0;
    overflow: hidden;
  }
}

/* ---------- Navigation ---------- */

.navigation li {
  display: inline-block;
  margin: 0 8px;
}

.header-nav li:first-child {
  margin: 0;
}

.navigation a {
  font-family: var(--sans-serif);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: var(--blue);

  .footer &,
  .menu_content & {
    color: var(--white);
  }

  @media (width >= 880px) {
    font-size: 1.25rem;
  }

  &.active,
  &:hover,
  &:focus {
    color: var(--red);
  }
}

/* ---------- Newsletter form ---------- */

.newsletter {
  max-inline-size: 100%;

  @media (width >= 401px) {
    position: relative;
    max-inline-size: 480px;
  }
  @media (width >= 768px) {
    max-inline-size: 405px;
  }
}

.newsletter-input[type="email"] {
  block-size: 48px;
  margin: 0;
  padding: 9px 20px 11px;
  border: none;
  border-radius: 0;
  background: rgb(255 255 255 / 0.8);
  font-size: 1.25em;
  font-weight: bold;
  color: var(--blue);
  outline: none;

  @media (width >= 401px) {
    block-size: 52px;
    padding: 14px 140px 16px 15px;
    font-size: 1.1875em;
    text-align: start;
  }

  &::placeholder {
    font-weight: bold;
    line-height: 28px;
    color: var(--blue);
    opacity: 1;
    transition: color 0.15s ease-in-out;

    @media (width >= 401px) {
      line-height: 22px;
    }
  }

  &:hover::placeholder,
  &:focus::placeholder {
    color: rgb(7 43 73 / 0.8);
  }
}

.newsletter-submit {
  appearance: none;
  display: inline-block;
  vertical-align: middle;
  inline-size: 100%;
  block-size: 47px;
  margin-block-start: 10px;
  padding: 13px 25px 14px;
  border: none;
  border-radius: 0;
  background-color: var(--red);
  font-family: var(--sans-serif);
  font-size: 1.125em;
  font-weight: bold;
  line-height: normal;
  letter-spacing: 0.025em;
  text-align: center;
  color: var(--white);
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;

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

  @media (width >= 401px) {
    position: absolute;
    inset: 0 0 0 auto;
    inline-size: auto;
    block-size: auto;
    margin: 0;
    font-size: 1.1875em;
  }
}

/* ---------- "Next in" ---------- */

.next {
  margin-block: 50px;

  @media (width >= 500px) {
    margin-block: 10%;
  }
  @media (width >= 800px) {
    margin-block: 80px;
  }
}

.next-heading {
  margin: 0 0 0.875em;
}

.next-buttons {
  margin-block-start: 60px;

  .button {
    margin-block-end: 10px;

    @media (width >= 401px) {
      display: inline-block;

      &:first-child {
        margin-inline-end: 10px;
      }
    }
  }
}

/* ---------- Page heading ---------- */

.page-heading {
  margin-block: 1em;
}

/* ---------- Pagination ---------- */

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  max-inline-size: 1440px;
  margin: 0 auto 40px;
  padding: 0;
  font-family: var(--sans-serif);
  line-height: 1.5em;
  text-align: center;

  a,
  span {
    color: var(--red);

    &:hover {
      color: var(--red-hover);
    }
  }

  span {
    font-weight: bold;
  }
}

.pagination-link {
  flex: 0 1 120px;
  font-size: 1.375em;
}

.pagination-numbers {
  flex: 1 0 200px;
  font-size: 1.375em;

  @media (width <= 800px) {
    flex: 1 0 100%;
    order: -1;
    margin-block-end: 20px;
  }
}

/* ---------- Post card ---------- */

.post_widget-heading {
  margin-block-end: 0.5em;
  font-family: var(--serif);
  font-size: 1.6875rem;
  font-weight: 600;

  .post_widget--event & {
    margin-block-end: 0.9375em;
  }

  @media (width >= 600px) {
    font-size: 4.5vw;
  }
  @media (width >= 800px) {
    font-size: 2.25rem;
  }

  a {
    display: block;
    color: var(--heading-blue);

    &:hover,
    &:focus {
      color: var(--heading-blue-hover);
    }
  }
}

.post_widget-post_date {
  margin: 0 0 1em;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25em;

  @media (width >= 500px) {
    font-size: 1.125rem;
  }
}

.post_widget-details {
  display: flex;
  flex-wrap: wrap;
  margin-block-end: 25px;

  @media (width >= 500px) {
    margin-block-end: 5%;
  }
  @media (width >= 800px) {
    margin-block-end: 40px;
  }
}

.post_widget-excerpt {
  flex: 1;
  margin: 0;
  font-size: 1rem;

  @media (width >= 500px) {
    font-size: 1.125rem;
  }
}

.post_widget-image {
  inline-size: 100%;
  max-inline-size: 620px;
  margin: 20px 0 0;

  @media (width >= 620px) {
    inline-size: 180px;
    margin: 8px 0 0 20px;
  }
}

.post_widget-link {
  margin-inline-end: 25px;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  vertical-align: middle;
}

.post_widget .share {
  display: inline-block;

  a {
    font-size: 0;
  }
}

/* ---------- Rich text ---------- */

.rich_text {
  h1 {
    margin: 0.25em 0;
  }

  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 1em 0 0.5em;
    font-weight: 700;
    line-height: 1.0625em;
  }

  h3 {
    font-size: 1.875rem;

    @media (width >= 500px) {
      font-size: 6vw;
    }
    @media (width >= 800px) {
      font-size: 3rem;
    }
  }

  h4 {
    font-size: 1.375rem;

    @media (width >= 500px) {
      font-size: 4.5vw;
    }
    @media (width >= 800px) {
      font-size: 2.25rem;
    }
  }

  h5 {
    font-size: 1.1875rem;

    @media (width >= 500px) {
      font-size: 3.75vw;
    }
    @media (width >= 800px) {
      font-size: 1.875rem;
    }
  }

  h6 {
    font-size: 1rem;

    @media (width >= 530px) {
      font-size: 3vw;
    }
    @media (width >= 800px) {
      font-size: 1.5rem;
    }
  }

  blockquote {
    margin: 1.5em 0;
    padding-inline-start: 15px;
    border-inline-start: 4px solid var(--red);
    font-family: var(--serif);
    font-size: 1.1875rem;
    font-style: italic;
    line-height: 1.25em;
    color: var(--quote-blue);

    @media (width >= 500px) {
      padding-inline-start: 20px;
      border-width: 6px;
      font-size: 3.75vw;
    }
    @media (width >= 800px) {
      padding-inline-start: 30px;
      font-size: 1.875rem;
    }

    p {
      margin: 0;
      font-size: inherit;
      line-height: inherit;
    }
  }

  ul,
  ol {
    margin: 0 0 25px;
    padding: 0 0 0 20px;

    li {
      margin-block-end: 0.5em;
      font-size: 1em;
      line-height: 1.5em;
    }

    > ul,
    ol {
      margin: 0;
    }
  }

  ul {
    list-style-type: disc;
  }

  ol {
    list-style-type: decimal;
  }

  .video-container {
    position: relative;
    aspect-ratio: 16 / 9;
    margin-block-end: 16px;

    :is(iframe, object, embed) {
      position: absolute;
      inset: 0;
      inline-size: 100% !important;
      block-size: 100% !important;
    }
  }
}

/* ---------- Share links ---------- */

.share-facebook,
.share-twitter {
  display: inline-block;
  vertical-align: middle;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.025em;

  svg {
    display: inline-block;
    margin-inline-start: 5px;
    vertical-align: middle;
  }

  svg path {
    transition: fill 0.1s linear;
  }
}

.share-facebook {
  color: var(--facebook);

  svg path {
    fill: var(--facebook);
  }

  &:hover,
  &:focus {
    color: var(--facebook-hover);

    svg path {
      fill: var(--facebook-hover);
    }
  }
}

.share-twitter {
  margin-inline-start: 25px;
  color: var(--twitter);

  svg path {
    fill: var(--twitter);
  }

  &:hover,
  &:focus {
    color: var(--twitter-hover);

    svg path {
      fill: var(--twitter-hover);
    }
  }
}

/* ---------- Social links (header and footer) ---------- */

.social_links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.social_links-buttons {
  margin-block-end: 20px;
}

.social_links-buttons,
.social_links-social {
  display: flex;
  justify-content: center;
  inline-size: 100%;

  @media (width >= 960px) {
    justify-content: flex-end;
  }
}

.social_links-facebook,
.social_links-twitter,
.social_links-instagram,
.social_links-youtube {
  flex: 0 0 36px;
  inline-size: 36px;
  block-size: 36px;
  margin: 0 5px;
  overflow: hidden;
  background-size: 36px 36px;
  background-repeat: no-repeat;
  background-position: center;
  text-indent: -9999px;
  transition: background-color 0.15s ease-in-out;

  @media (width >= 768px) {
    margin: 0 0 0 15px;
  }
}

.social_links-facebook {
  background-image: url("/img/facebook.png");

  .footer & {
    @media (width < 959px) {
      margin-inline-start: 0;
    }
  }
}

.social_links-twitter {
  background-image: url("/img/twitter.png");
}

.social_links-instagram {
  background-image: url("/img/instagram.png");
}

.social_links-youtube {
  background-image: url("/img/youtube.png");
}

.social_links-donate,
.social_links-volunteer {
  margin: 20px 0 0;
  padding: 8px 25px 9px;

  @media (width >= 401px) {
    margin: 0 0 0 10px;
  }

  .footer & {
    @media (width < 440px) {
      inline-size: 100%;
      margin: 10px 0 0;
    }
  }
}

.social_links-volunteer {
  @media (width >= 768px) {
    margin-inline-start: 22px;
  }

  .footer & {
    @media (width < 959px) {
      margin-inline-start: 0;
    }
  }
}

/* ---------- Article (news post or event) ---------- */

.article {
  margin-block: 50px;

  @media (width >= 500px) {
    margin-block: 10%;
  }
  @media (width >= 800px) {
    margin-block: 80px;
  }

  .components {
    margin-block-start: 30px;
    padding: 0;

    @media (width >= 800px) {
      margin-block-start: 40px;
    }
  }
}

.article-heading-title {
  margin-block-end: 0.4375em;
  font-family: var(--serif);
  font-size: 2.1875rem;
  font-weight: 600;
  line-height: 1.0625em;
  color: var(--heading-blue);

  @media (width >= 400px) {
    font-size: 8.75vw;
  }
  @media (width >= 800px) {
    font-size: 4.375rem;
  }
}

.article-heading-post_date {
  margin: 0 0 1.25em;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25em;

  @media (width >= 500px) {
    margin: 0 0 1.75em;
    font-size: 1.125rem;
  }
}

.article-heading-meta--event {
  display: flex;
}

.article-heading-meta-links {
  padding-block-start: 15px;
}

.article-heading-meta-category {
  display: inline-block;
  margin: 0 25px 5px 0;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  vertical-align: middle;
}

.article-heading-meta .share {
  display: inline-block;

  a {
    margin-block-end: 5px;
  }

  @media (width < 500px) {
    .share-facebook,
    .share-twitter {
      font-size: 0;
    }
  }
}

.article-buttons {
  margin-block-start: 50px;

  .share {
    vertical-align: top;

    @media (width >= 401px) {
      display: inline-block;
    }
  }

  /* Share links become full buttons here */
  .share-facebook,
  .share-twitter {
    inline-size: auto;
    margin: 0 0 10px;
    padding: 13px 25px 14px;
    font-family: var(--sans-serif);
    font-size: 1.5rem;
    font-weight: bold;
    line-height: normal;
    text-align: center;
    color: var(--white);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;

    &:hover,
    &:focus {
      color: var(--white);
    }

    @media (width < 401px) {
      inline-size: 100%;
    }

    svg {
      display: none;
    }
  }

  .share-facebook {
    background-color: var(--facebook);

    &:hover,
    &:focus {
      background-color: var(--facebook-hover);
    }

    @media (width >= 401px) {
      margin-inline-end: 10px;
    }
  }

  .share-twitter {
    background-color: var(--twitter);

    &:hover,
    &:focus {
      background-color: var(--twitter-hover);
    }
  }
}

/* ---------- Components (content blocks) ---------- */

.components {
  margin-block: 50px;

  @media (width >= 500px) {
    margin-block: 10%;
  }
  @media (width >= 800px) {
    margin-block: 80px;
  }

  img {
    margin: 30px 0;

    @media (width >= 500px) {
      margin: 6.25% auto;
    }
    @media (width >= 800px) {
      margin: 50px auto;
    }
  }
}

.components-button,
.rich_text .button {
  display: inline-block;
  margin: 0 10px 10px 0;
}

/* ---------- Post list ---------- */

.post-list {
  margin-block: 50px;
  text-align: center;

  @media (width >= 500px) {
    margin-block: 10%;
  }
  @media (width >= 800px) {
    margin-block: 80px;
  }

  .post_widget {
    margin-block-end: 68px;

    @media (width >= 500px) {
      margin-block-end: 13.75%;
    }
    @media (width >= 800px) {
      margin-block-end: 110px;
    }
  }
}

.post-list-wrap {
  margin-block-end: 50px;
  border-block-end: 2px solid var(--light-grey);
  text-align: start;
}

.post-list-wrap--no_pagination {
  margin: 0;
  border: none;
}

.post-list-archive {
  display: inline-block;
  margin: 0 auto;
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
}

/* ---------- Page ---------- */

.main {
  flex: 1 0 auto;
  inline-size: 100%;
}

.main--border {
  border-block-start: 8px solid var(--light-grey);
}