/*!
Theme Name: apa_s
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: apa_s
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

apa_s is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/

/*
 * Stylesheet structure (specificity increases downward):
 *   1. Foundations  — fonts, CSS variables
 *   2. Base         — bare HTML element selectors
 *   3. Objects      — reusable layout primitives
 *   4. Components   — UI building blocks (alphabetized)
 *   5. Third-Party  — plugin / WP block overrides
 *   6. Overrides    — page & template-specific tweaks
 *
 * Adding a new rule? Pick the layer first, then the
 * alphabetical home within the layer.
 */

/* =============================================================
   1. FOUNDATIONS
   ============================================================= */

/*--------------------------------------------------------------
# Fonts
--------------------------------------------------------------*/

@font-face {
  font-family: "Nohemi";
  src:
    url("fonts/Nohemi-Thin.woff2") format("woff2"),
    url("fonts/Nohemi-Thin.woff") format("woff");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nohemi";
  src:
    url("fonts/Nohemi-ExtraLight.woff2") format("woff2"),
    url("fonts/Nohemi-ExtraLight.woff") format("woff");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nohemi";
  src:
    url("fonts/Nohemi-Light.woff2") format("woff2"),
    url("fonts/Nohemi-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nohemi";
  src:
    url("fonts/Nohemi-Regular.woff2") format("woff2"),
    url("fonts/Nohemi-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nohemi";
  src:
    url("fonts/Nohemi-Medium.woff2") format("woff2"),
    url("fonts/Nohemi-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nohemi";
  src:
    url("fonts/Nohemi-SemiBold.woff2") format("woff2"),
    url("fonts/Nohemi-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nohemi";
  src:
    url("fonts/Nohemi-Bold.woff2") format("woff2"),
    url("fonts/Nohemi-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nohemi";
  src:
    url("fonts/Nohemi-ExtraBold.woff2") format("woff2"),
    url("fonts/Nohemi-ExtraBold.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nohemi";
  src:
    url("fonts/Nohemi-Black.woff2") format("woff2"),
    url("fonts/Nohemi-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ...existing code... */

/*--------------------------------------------------------------
# Variables
--------------------------------------------------------------*/

:root {
  --font-heading:
    "Nohemi", "InterX", "BungeeX", "DM Serif DisplayX", "Albert Sans", Arial,
    sans-serif;
  --font-main:
    "InterX", "RajdhaniX", "LektonX", "Albert Sans", Arial, sans-serif;

  --color-primary: #2a7a21; /* the original #43963a does not pass WCAG contrast requirements against white */
  --color-secondary: #e3f2df; /* #e8f2e */ /* #e6eee4 */
  --color-black: #33404f;
  --color-white: #f5f5f5;

  --max-width: 1480px;
  --max-width-small: 840px;
  --padding: 40px;
  --padding-double: calc(var(--padding) * 2);
  --padding-half: calc(var(--padding) / 2);

  @media (max-width: 860px) {
    --max-width: 740px;
    --max-width-small: 740px;
  }
}

/* =============================================================
   2. BASE
   ============================================================= */

html {
  overflow-x: hidden;
}

body {
  font-family: var(--font-main);
  font-weight: 300;
  font-size: 18px;
  letter-spacing: -0.01em;
  background-color: var(--color-white);
  color: var(--color-black);
  margin: 0 !important;
  overflow-x: hidden;
}

a {
  color: var(--color-primary);

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

h1,
h2 {
  font-family: var(--font-heading);
  margin: 0;
  margin-bottom: 1rem;
  line-height: 1.4;
  font-weight: 500;
  /* text-transform: uppercase; */

  & span {
    /* font-family: var(--font-main); */
    color: var(--color-secondary);
  }
}

h1 {
  font-size: clamp(calc(52px), 6vw, calc(12 * 8px));
  line-height: 1em;
  /* letter-spacing: -0.04em; */
  /* text-transform: uppercase; */
}

h2 {
  font-size: clamp(36px, 3.2vw, calc(9 * 8px));
  line-height: 1.05em;
  /* letter-spacing: -0.02em; */
  font-weight: 300;
}

h3 {
  font-size: clamp(24px, 2.4vw, calc(4 * 8px));
  line-height: 1.2em;
  font-weight: 300;
  margin: 0;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
  /* opacity: 0.7; */
}

h4 {
  font-size: clamp(20px, 1.8vw, calc(3 * 8px));
  font-weight: 300;
  margin: 0;
  margin-bottom: 1rem;
  line-height: 1.3em;
}

p {
  line-height: 1.6;
}

b,
strong {
  font-weight: 600;
}

a {
  text-decoration: unset;
}

ul,
ol {
  margin: 0;
  margin-bottom: 1.5em;
  padding-left: 1em;
  list-style: square;

  & li {
    /* border-bottom: 1px solid var(--color-primary); */
    padding-bottom: 0.25em;
    /* margin-bottom: 0.5em; */

    &:last-child {
      border-bottom: none;
      margin-bottom: 0;
    }
  }

  & ul,
  & ol {
    margin-top: 0.5em;

    & li {
      border-bottom: none;
      padding-bottom: 0em;
      margin-bottom: 0em;
    }
  }
}

section {
  margin-bottom: calc(var(--padding) * 3);
  position: relative;
  z-index: 2;

  @media (max-width: 1100px) {
    margin-bottom: calc(var(--padding) * 2);
  }

  .section-title {
    padding-top: var(--padding);
    padding-bottom: calc(var(--padding) / 2);
    border-top: 1px solid var(--color-primary);

    @media (max-width: 860px) {
      .grid-2 {
        gap: 0;
      }

      * {
        text-align: left !important;
      }
    }
  }
}

.site-main {
  position: relative;
  z-index: 10;
}

/* =============================================================
   3. OBJECTS / LAYOUT
   ============================================================= */

.max-width {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--padding-double);

  @media (max-width: 1000px) {
    padding: 0 var(--padding);
  }
}

.max-width-small {
  max-width: var(--max-width-small);
  margin: 0 auto;
  padding: 0 var(--padding);
}

.inner-content {
  padding-right: var(--padding-double);

  & > p:first-child {
    margin-top: 0;
    /* padding: 0; */
  }

  & > p:last-child {
    margin-bottom: 0;
    /* padding: 0; */
  }

  @media (max-width: 1100px) {
    padding-right: 0;
  }
}

.right_text .inner-content {
  padding-right: 0;
  padding-left: var(--padding-double);

  @media (max-width: 1100px) {
    padding-left: 0;
  }
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: var(--padding);

  @media (max-width: 860px) {
    grid-template-columns: 1fr;
  }
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: var(--padding);

  @media (max-width: 860px) {
    display: block;
  }
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: var(--padding);

  @media (max-width: 860px) {
    display: block;
  }
}

/* =============================================================
   4. COMPONENTS
   ============================================================= */

/*--------------------------------------------------------------
# Accordion
--------------------------------------------------------------*/

.accordion {
  grid-column: 2 / span 2;
  padding: 0 0 0 var(--padding);

  @media (max-width: 860px) {
    padding: 0;
  }
}

.accordion-content {
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  max-height: 0;
  /* max-width: calc(100% / 3 * 2); */
  padding: 0 var(--padding-half);
  /* margin-left: calc(100% / 3); */
  /* padding-left: var(--padding); */

  & ul {
    padding-top: 1em;
  }

  & p:has(+ ul) {
    margin-bottom: 0;
  }
}
.accordion-header[aria-expanded="true"] + .accordion-content {
  /* max-height set by JS */
}

.accordion-item {
  margin-bottom: 4px;
}

.accordion-header {
  /* border-bottom: 1px solid var(--color-primary); */
  padding: var(--padding-half);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 8px;
  background: var(--color-secondary);

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

    .material-icons {
      color: var(--color-secondary);
    }
  }
}

.is-open .accordion-header {
  background: var(--color-primary);
  color: var(--color-secondary);

  .material-icons {
    color: var(--color-secondary);
  }
}

.accordion-title {
  margin-bottom: 0;
  font-weight: 500;
}

/*--------------------------------------------------------------
# Articles
--------------------------------------------------------------*/

.articles {
  .item {
    background: var(--color-white);
    padding: var(--padding);
    border-radius: 8px;
    border: 1px solid var(--color-primary);
    border-top: 8px solid var(--color-primary);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .item:first-child {
    grid-row: span 2;
  }

  .item a {
    align-self: end;
  }
}

/*--------------------------------------------------------------
# Blurred Overlay
--------------------------------------------------------------*/

.blurred-overlay {
  position: fixed;
  width: 100%;
  pointer-events: none;
  z-index: -1;
}

.blurred-overlay > .secondary {
  content: "";
  margin-top: 50%;
  left: 70%;
  position: absolute;
  width: 100%;
  aspect-ratio: 1 / 1;
  position: relative;
  background-color: var(--color-primary);
  z-index: 1;
  border-radius: 999rem;
  filter: blur(80px) opacity(0.2);
  mix-blend-mode: multiply;
}

.blurred-overlay > .primary {
  content: "";
  top: 0;
  left: 50%;
  transform: translate(-50%, -95%);
  width: 140%;
  height: auto;
  aspect-ratio: 1 / 1;
  position: absolute;
  background-color: var(--color-secondary);
  border-radius: 999rem;
  filter: blur(100px) opacity(0.8);
  z-index: 0;
}

/*--------------------------------------------------------------
# Buttons
--------------------------------------------------------------*/

button,
a.button,
.forminator-save-draft-link {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 1em 2em;
  background: var(--color-primary);
  color: var(--color-white);
  border: unset;
  border-radius: 8px;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  transition: all 0.2s ease-in-out;
  margin-right: 5px;

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

.forminator-save-draft-link {
  line-height: 1em;
  background: unset;
  outline: 1px solid var(--color-primary);
  outline-offset: -1px;
  color: var(--color-primary);
  transition: all 0.2s ease-in-out;

  &:hover {
    background: unset !important;
    outline: 1px solid var(--color-black);
    outline-offset: -1px;
    color: var(--color-black);
  }
}

/*--------------------------------------------------------------
# Card Grid
--------------------------------------------------------------*/

.card-grid {
  display: grid;
  /* grid-template-columns: repeat(
    auto-fit,
    minmax(
      calc(
        (
            var(--max-width) - (3 * (var(--padding))) -
              (2 * var(--padding-double))
          ) /
          4
      ),
      1fr
    )
  ); */
  grid-template-columns: repeat(3, 1fr);
  gap: var(--padding);

  @media (max-width: 1000px) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media (max-width: 628px) {
    grid-template-columns: 1fr;
  }

  &.grid-3 {
    grid-template-columns: 1fr 1fr 1fr;

    @media (max-width: 1000px) {
      grid-template-columns: repeat(2, 1fr);
    }

    @media (max-width: 628px) {
      grid-template-columns: 1fr;
    }
  }

  &.card-grid--two {
    grid-template-columns: repeat(2, 1fr);
  }

  .card-grid__item {
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */
    background: var(--color-white);
    padding: calc(var(--padding) / 2);
    border-radius: 8px;
    border: 1px solid var(--color-primary);
    border-top: 8px solid var(--color-primary);
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
    transition: transform 0.2s ease-in-out;
    position: relative;

    .label-container {
      position: absolute;
      top: 0;
      left: 0;
      padding: 1rem calc(var(--padding) / 2);
    }

    & img {
      width: calc(100% + var(--padding) * 1);
      max-width: unset;
      margin-top: calc(var(--padding) * -0.5);
      margin-left: calc(var(--padding) * -0.5);
      margin-bottom: calc(var(--padding) * 0.5);
      aspect-ratio: 3/2;
      object-fit: cover;
    }

    &:not(:has(.card-grid__content)) {
      .card-grid__title {
        margin-bottom: 0;
      }
    }

    .default-thumbnail-container {
      background: var(--color-secondary);
      width: calc(100% + var(--padding));
      max-width: unset;
      margin-top: calc(var(--padding) * -0.5);
      margin-left: calc(var(--padding) * -0.5);
      margin-bottom: calc(var(--padding) * 0.5);
      aspect-ratio: 3 / 2;
      object-fit: cover;
      position: relative;

      & img {
        position: absolute;
        width: 100%;
        height: 100%;
        padding: 1em;
        object-fit: contain;
        margin: 0;
        top: 0;
        left: 0;
        opacity: 0.2;
      }
    }

    .no-thumbnail {
      /* width: calc(100% - var(--padding) * 1);
      margin-left: calc(var(--padding) * -0.5); */
      /* margin-top: 1em; */
      position: relative;
      margin-top: calc(var(--padding) * -1);
      padding: 2rem 0 1rem;
    }

    & h3 {
      margin-bottom: 0;

      & a {
        color: var(--color-black);
        text-decoration: none;
        transition: color 0.2s ease-in-out;

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

.card-grid + .card-grid {
  margin-top: calc(var(--padding-double) * -1);
}

/*--------------------------------------------------------------
# Child Pages
--------------------------------------------------------------*/

.child-pages-section {
  /* margin-top: calc(var(--padding) * 3); */

  .child-page {
    /* aspect-ratio: 3/2; */
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    padding: var(--padding);
    padding-bottom: var(--padding-half);
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    &:before {
      content: "";
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: var(--color-primary);
    }

    &:has(img):before {
      mix-blend-mode: multiply;
    }

    & img {
      /* width: 100%; */
      /* aspect-ratio: 3/2; */
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      filter: grayscale(1) contrast(1.5) brightness(0.5);
    }

    & h2 {
      position: relative;
      z-index: 2;
      top: 0px;
      left: 0px;
      color: var(--color-white);
    }

    & a {
      position: relative;
      z-index: 2;
      align-self: end;
      /* margin: var(--padding-double); */
    }

    .material-icons {
      color: var(--color-white);
    }
  }
}

/*--------------------------------------------------------------
# CTA
--------------------------------------------------------------*/

.cta {
  .inner-content {
    text-align: center;
    border: 1px solid var(--color-primary);
    border-radius: 8px;
    padding: var(--padding);

    .cta-title {
      /* margin-bottom: 0; */
      font-weight: 500;
      max-width: 700px;
      margin-left: auto;
      margin-right: auto;
    }

    .cta-content {
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;
    }
  }
}

/*--------------------------------------------------------------
# Feature Content
--------------------------------------------------------------*/

.feature-content {
  & img {
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 8px;
    object-position: center;
  }

  .content {
    background: var(--color-secondary);
    padding: var(--padding);
    border-radius: 8px;
    align-self: stretch; /* Make sure it stretches to fill the grid cell */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Align children to the bottom */
    height: 100%;

    & h2,
    p {
      max-width: 480px;
    }

    & h2 {
      color: var(--color-primary);
    }

    .icon {
      align-self: end;
    }
  }
}

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

.pre-footer {
  background: var(--color-secondary);
  margin-bottom: var(--padding);

  .grid-2 {
    border-bottom: 1px solid var(--color-primary);
    padding-bottom: var(--padding);
  }
}

.site-footer {
  background: var(--color-secondary);
  padding: var(--padding) 0 var(--padding) 0;
  /* color: var(--color-white); */
  position: relative;
  z-index: 10;

  .footer-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: var(--padding);

    & p {
      margin: 0 0 0.5em 0;
    }

    & ul li {
      padding-bottom: 0;
    }

    @media (max-width: 1000px) {
      grid-template-columns: 1fr 1fr;
    }

    @media (max-width: 480px) {
      grid-template-columns: 1fr;
    }
  }
}

.site-info {
  background-color: var(--color-primary);
  color: var(--color-white);
  text-align: center;
  padding: 10px;
  font-size: 14px;

  & a {
    color: var(--color-secondary);

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

/*--------------------------------------------------------------
# Glow Background
--------------------------------------------------------------*/

.glow-bg {
  position: relative;
  background: var(--color-white);
  z-index: 1;
  padding: var(--padding);
}

.glow-bg::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 120%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    var(--color-secondary) 0%,
    transparent 70%
  );
  z-index: -1;
  pointer-events: none;
}

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

.site-header {
  color: var(--color-white);
  text-align: center;
  z-index: 20;
  position: relative;
  display: grid;
  grid-template-columns:
    1fr
    min(var(--max-width), calc(100% - var(--padding-double) * 2))
    1fr;
  align-items: center;
}

.site-branding {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
  padding: var(--padding-half);
}

.header-right {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  color: var(--color-black);
  padding-right: var(--padding-half);
  margin-top: -12px;
}

.main-navigation {
  grid-column: 1 / -1;
  grid-row: 2;
}

.search-form {
  & input {
    border-radius: 8px;
    border: 1px solid var(--color-primary);
    padding: 6px 12px;
    min-width: 260px;
    /* height: 36px; */
  }
}

.social-media {
  display: flex;
  justify-content: end;

  & svg {
    display: block;
    width: 40px;
    margin-left: 0px;
    /* background: var(--color-primary); */
    /* border-radius: 8px; */
    /* padding: 8px; */

    .fill {
      fill: var(--color-primary);
    }

    .no-fill {
      fill: var(--color-primary);
    }

    &:hover {
      .fill {
        fill: var(--color-black);
      }
    }
  }
}

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

.hero {
  width: 100%;
  /* height: 90vh; */
  position: relative;
  overflow: hidden;
  margin: 0;
  margin-bottom: calc(var(--padding) * 3);
  background: var(--color-primary);

  .hero-image {
    & img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      filter: grayscale(1) contrast(1.5) brightness(0.5);
    }

    &:before {
      content: "";
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(67, 150, 58, 0.6);
      mix-blend-mode: multiply;
    }
  }

  .hero-content {
    position: relative;
    z-index: 2;
    color: var(--color-white);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: calc(var(--padding-double) * 2) var(--padding-double)
      calc(var(--padding) * 3) var(--padding-double);

    & h1 {
      margin-bottom: 0;
    }

    @media (max-width: 1000px) {
      padding: calc(var(--padding-double) * 2) var(--padding)
        calc(var(--padding) * 3) var(--padding);
    }
  }
}

/*--------------------------------------------------------------
# Highlights & Slider
--------------------------------------------------------------*/

.highligths {
  position: relative;
  z-index: 5;
  margin-top: calc(var(--padding-double) * -3);
  margin-bottom: 0;

  @media (max-width: 860px) {
    display: none;
  }
}

.slider {
  /* width: 80%; */
  margin: var(--padding) 16px var(--padding) auto;
  /* margin-left: 10%; */
  margin-left: max(144px, calc((100vw - var(--max-width)) / 2));
  padding: 0 var(--padding-double);
}

.slider__slide {
  position: relative;
  width: 100%;
  /* height: 300px; */
  aspect-ratio: 6 / 7;
  overflow: hidden;
  transition: 0.1s ease-in-out;
  background: var(--color-secondary);
  color: var(--color-black);
  border-radius: 8px;
  border-top: 8px solid var(--color-primary);
  padding: var(--padding);

  .slider__slide__text {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
    height: 100%;
  }

  .slider__slide__text__title,
  .slider__slide__text__desc {
    margin: 0 0 1rem 0;
  }

  & a {
    color: var(--color-black);
    text-decoration: none;
    font-weight: 700;
    transition: color 0.2s ease-in-out;
    align-self: end;
    justify-self: end;

    .material-icons {
      font-weight: 200;
      font-size: 40px;
    }

    &:hover {
      color: var(--color-primary);
    }
  }
}
.slider .owl-nav {
  display: inline-block !important;
  transform: translate(-100%, calc(-100% - var(--padding)));
  padding-right: 16px;
  position: absolute;

  .owl-prev,
  .owl-next {
    background: var(--color-secondary) !important;
    border-radius: 50%;
    width: 56px;
    height: 56px;
    position: relative;
    padding: 0 !important;
    font-weight: 100 !important;
    margin-right: 8px;
    transition: all 0.2s ease-in-out;
  }
  .owl-prev span,
  .owl-next span {
    padding: 0 !important;
    color: var(--color-primary) !important;
    line-height: 0;
    position: relative;
    display: block;
    margin-top: -3px;
    margin-left: 3px;
    font-size: 40px;
    text-align: center;
  }
  .owl-prev:hover,
  .owl-next:hover {
    background: var(--color-primary) !important;

    & span {
      color: var(--color-secondary) !important;
    }
  }
  .owl-dots {
    position: relative;
    text-align: center;
    margin-top: 1em;
  }
  .owl-dot {
    height: 10px;
    width: 10px;
    margin: 0 5px;
    border-radius: 50%;
    background-color: #fff !important;
    transition: 0.1s ease-in-out;
    opacity: 0.5;
  }
  .owl-dot.active {
    opacity: 1;
  }
  .owl-dot:hover {
    /* background-color: var(--color-dark); */
  }
}

.below-highlights {
  margin: calc(var(--padding) * 3) auto;
  text-align: center;
}

/*--------------------------------------------------------------
# Image Gallery
--------------------------------------------------------------*/

.image-gallery {
  grid-gap: var(--padding);

  & img {
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 8px;
  }
}

/*--------------------------------------------------------------
# Label
--------------------------------------------------------------*/

a.label {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background-color: var(--color-primary);
  border-radius: 100px;
  padding: 3px 10px;
  color: var(--color-white);
  /* margin-bottom: 0.5em; */

  &.post-type-label,
  &.year-label {
    background-color: var(--color-secondary);
    color: var(--color-primary);
  }
}

.post-type-archive a.label.post-type-label {
  display: none;
}

.single a.label.year-label {
  background-color: var(--color-white);
}

/*--------------------------------------------------------------
# Lightbox
--------------------------------------------------------------*/

.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  z-index: 9999;
  cursor: pointer;
}

.lightbox-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-overlay img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  aspect-ratio: unset;
}

/*--------------------------------------------------------------
# Logo Gallery
--------------------------------------------------------------*/

.logo-gallery {
  &.grid-3 {
    grid-gap: 20px;

    @media (max-width: 860px) {
      display: grid;
    }

    @media (max-width: 540px) {
      .logo-gallery__item {
        padding: 12px;
      }
    }

    @media (max-width: 620px) {
      grid-template-columns: 1fr 1fr;
    }
  }

  .logo-gallery__item {
    background: white;
    border-radius: 8px;
    aspect-ratio: 1;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* border: 1px solid var(--color-primary); */
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);

    & img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
}

/*--------------------------------------------------------------
# Map
--------------------------------------------------------------*/

.map {
  width: 100%;
  position: relative;
  z-index: 10;
  margin-bottom: calc(var(--padding) * 2);

  .section-title {
    display: flex;
    justify-content: space-between;
  }

  .instructions {
    color: var(--color-black);
    margin-left: 1em;
  }

  #Map {
    width: 100%;

    .section-border {
      fill: none;
      stroke: var(--color-primary);
      stroke-width: 1px;
    }

    .active .county {
      fill: var(--color-secondary);
    }

    .county {
      fill: #fff;
      stroke: #cce9c5;
      transition: all 0.2s ease-in-out;
    }
  }

  .map-popup-card {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    z-index: 10;
    padding: var(--padding);
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--color-primary);
    border-top: 8px solid var(--color-primary);
    text-align: left;
    width: 300px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  }

  .map-popup-card.fade-in {
    /* animation: fadeIn 0.5s forwards; */
    opacity: 1;
  }

  .map-popup-card.fade-out {
    /* animation: fadeOut 0.5s forwards; */
    opacity: 0;
  }

  /* @keyframes fadeIn {
    from {
      opacity: 0;
      pointer-events: none;
    }
    to {
      opacity: 1;
      pointer-events: auto;
    }
  }

  @keyframes fadeOut {
    from {
      opacity: 1;
      pointer-events: auto;
    }
    to {
      opacity: 0;
      pointer-events: none;
    }
  } */

  .map-popup-card h3 {
    line-height: 1.1em;
  }

  .map-popup-card h6 {
    margin-bottom: 0em;
    color: var(--color-primary);
  }

  .below-map {
    text-align: right;

    .button {
      background: unset;
      color: var(--color-primary);

      .material-icons {
        text-transform: none;
        transform: translateY(12px);
      }
    }
  }
}

/*--------------------------------------------------------------
# Sections map + section cards
#
# The cards are the primary way into the section pages and render at every
# size — the map alone was leaving people with nowhere obvious to click.
#
# The SVG map is layered on only where hover genuinely works. On touch the
# simulated mouseenter is followed immediately by a click, so navigation
# happens well before the 300ms popup delay and the county list is never
# seen. The <g> sections are also not focusable and carry no accessible name,
# so the map is unusable by keyboard and invisible to screen readers.
#
# Gating on (hover: hover) rather than a width breakpoint gets touch laptops
# and tablets right in both directions.
--------------------------------------------------------------*/

.map #Map,
.map .map-popups,
.map .instructions {
  display: none;
}

/* The cards themselves are the theme's standard .card-grid / .card-grid__item,
   so the only rule needed here is the gap between them and the map above. */
.map .card-grid {
  margin-top: var(--padding);
}

@media (hover: hover) and (pointer: fine) {
  .map #Map,
  .map .map-popups {
    display: block;
  }

  .map .instructions {
    display: inline;
  }
}

/*--------------------------------------------------------------
# Material Icons
--------------------------------------------------------------*/

.material-icons {
  font-family: "Material Icons";
  font-style: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  text-align: right;
  background: unset;
  /* Must be `none`, not `unset`: text-transform is inherited, so `unset`
     resolves to `inherit` and picks up the uppercase from any ancestor
     button/.button — which breaks the ligature, since "SEARCH" does not
     match the `search` glyph name. */
  text-transform: none;
  font-weight: 700;
  letter-spacing: normal;
  padding: unset;
  /* width: 40px;
  height: 40px; */
  color: var(--color-primary);
  border: unset;
  /* border-radius: 50%; */
  text-decoration: none;
  display: inline-block;

  font-weight: 800;
  line-height: 1em;
  font-size: 34px;
}

a .material-icons {
  font-size: 40px;
  color: var(--color-primary);
  transition: color 0.2s ease-in-out;

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

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

.main-navigation {
  background: var(--color-primary);

  .nav-menu {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    /* height: 70px; */
    padding: 0 var(--padding);
    list-style: none;

    & > li {
      flex: 1 1 0;
      text-align: center;
      position: relative;
      margin-bottom: 0;
      padding-bottom: 0;
      /* border-right: 1px solid var(--color-secondary); */
      /* background: var(--color-secondary); */

      &:after {
        content: "";
        position: absolute;
        height: 60%;
        width: 1px;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        background: var(--color-secondary);
        opacity: 0.5;
      }

      & a {
        /* background: var(--color-black); */
        color: var(--color-secondary);
        line-height: 1.1;
        /* font-family: var(--font-heading); */
        /* font-weight: 600; */
        /* font-size: 16px; */
        padding: 16px 16px 16px;
        /* text-transform: uppercase; */
        /* height: 70px; */
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        /* border-radius: 8px; */
        box-sizing: border-box;

        &:before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 8px;
          background-color: var(--color-secondary);
          opacity: 0;
          transition: background-color 0.2s ease-in-out;
        }
      }

      &:hover > a {
        color: var(--color-secondary);

        &:before {
          opacity: 1;
        }
        /* transform: translateY(8px); */
      }
    }

    & > li:last-child:after {
      display: none;
    }

    & li ul {
      flex-direction: column;
      width: 100%;
      background: unset;
      box-shadow: unset;

      & li {
        display: block;
        margin-top: 2px;
        background: var(--color-primary);
        border-radius: 8px;
        /* border-bottom: 1px solid var(--color-secondary); */

        &:before {
          content: none;
        }

        & a {
          color: var(--color-secondary);
        }

        &:hover {
          background: var(--color-secondary);

          & a {
            color: var(--color-primary);

            &:before {
              opacity: 0;
            }
          }
        }
      }
    }
  }
}

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

.pagination-wrapper {
  text-align: center;
  margin: var(--padding-double) 0;
}

.page-numbers,
.page-numbers:visited {
  display: inline-block;
  padding: 8px 16px;
  margin: 0 4px;
  text-decoration: none;
  border: 1px solid var(--color-primary);
  border-radius: 8px;
  color: var(--color-primary);
}

.page-numbers.current {
  background-color: var(--color-primary);
  color: white;
}

.page-numbers:hover {
  background-color: var(--color-secondary);
  color: var(--color-primary);
}

/*--------------------------------------------------------------
# Text in Box
--------------------------------------------------------------*/

.text-in-box-section:has(+ .text-in-box-section) {
  margin-bottom: 0;
}

.text-in-box {
  padding-top: calc(var(--padding) * 3);
  padding-bottom: calc(var(--padding) * 3);

  @media (max-width: 1100px) {
    padding-top: calc(var(--padding) * 2);
    padding-bottom: calc(var(--padding) * 2);
    /* grid-gap: 0; */
  }
}

.text-in-box-section + .text-in-box-section {
  .text-in-box {
    padding-top: 0;
  }
}

/*--------------------------------------------------------------
# Text with Photo
--------------------------------------------------------------*/

.text-with-photo {
  align-items: stretch;

  .text-with-photo__image {
    @media (max-width: 860px) {
      margin-top: var(--padding);
    }
  }
}

.text-with-photo.right_text {
  @media (max-width: 860px) {
    grid-gap: 0;
  }

  .text-with-photo__content {
    grid-column: 2;
    grid-row: 1;
  }
  .text-with-photo__image {
    grid-column: 1;
    grid-row: 1;
  }
}

.text-with-photo__content {
  /* padding: var(--padding); */
  /* background: var(--color-secondary); */
  border-radius: 8px;
}

.text-with-photo__image {
  margin: 0;
  position: relative;
}

.text-with-photo__image img {
  border-radius: 8px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
  display: block;
  aspect-ratio: 1 / 1;
  width: 100%;
  /* height: 100%; */
  object-fit: cover;
}

/*--------------------------------------------------------------
# Text with Photos
--------------------------------------------------------------*/

.text-with-photos {
  align-items: start;
}

.text-with-photos__gallery {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: var(--padding);
}

.text-with-photos__image {
  margin: 0;
  position: relative;
}

.text-with-photos__image img {
  border-radius: 8px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.text-with-photos__gallery--count-2 {
  .text-with-photos__image:nth-child(1) {
    grid-column: 1 / span 4;
    grid-row: 1;

    & img {
      aspect-ratio: 5/6;
    }
  }
  .text-with-photos__image:nth-child(2) {
    grid-column: 3 / span 3;
    grid-row: 2;

    & img {
      aspect-ratio: 1;
      /* position: absolute; */
      /* bottom: 0; */
      margin-top: -50%;
      box-shadow: 0 0 32px rgba(0, 0, 0, 0.2);
    }
  }

  @media (max-width: 860px) {
    .text-with-photos__image:nth-child(1) {
      grid-column: 2 / span 4;

      & img {
        aspect-ratio: 1;
      }
    }

    .text-with-photos__image:nth-child(2) {
      grid-column: 1 / span 3;

      & img {
        aspect-ratio: 3/2;
      }
    }
  }

  @media (max-width: 480px) {
    grid-template-columns: 1fr;

    .text-with-photos__image:nth-child(1),
    .text-with-photos__image:nth-child(2) {
      grid-column: 1;

      & img {
        aspect-ratio: 4/3;
        margin-top: unset;
      }
    }
  }
}

.text-with-photos__gallery--count-1 {
  .text-with-photos__image:nth-child(1) {
    grid-column: 1 / span 5;
    grid-row: 1;

    & img {
      aspect-ratio: 1;
    }
  }
}

.text-with-photos__gallery--count-3 {
  .text-with-photos__image:nth-child(1) {
    grid-column: 2 / span 3;
    grid-row: 1;

    & img {
      aspect-ratio: 5/6;
    }
  }
  .text-with-photos__image:nth-child(2) {
    grid-column: 1 / span 3;
    grid-row: 1;

    & img {
      aspect-ratio: 5/4;
      position: absolute;
      bottom: 0;
      transform: translateY(50%);
      box-shadow: 0 0 32px rgba(0, 0, 0, 0.2);
    }
  }
  .text-with-photos__image:nth-child(3) {
    grid-column: 4 / span 2;
    grid-row: 2;

    & img {
      aspect-ratio: 5/6;
    }
  }

  @media (min-width: 860px) and (max-width: 1100px) {
    .text-with-photos__image:nth-child(1) {
      grid-column: 2 / span 4;
      grid-row: 1;

      & img {
        aspect-ratio: 1;
      }
    }
    .text-with-photos__image:nth-child(2) {
      grid-column: 1 / span 3;
      grid-row: 1;

      & img {
        aspect-ratio: 5/4;
        position: absolute;
        bottom: 0;
        transform: translateY(calc(100% - var(--padding)));
        box-shadow: 0 0 32px rgba(0, 0, 0, 0.2);
      }
    }
    .text-with-photos__image:nth-child(3) {
      grid-column: 4 / span 2;
      grid-row: 2;
      transform: translateY(25%);

      & img {
        aspect-ratio: 5/6;
      }
    }
  }

  @media (max-width: 480px) {
    grid-template-columns: 1fr;

    .text-with-photos__image:nth-child(1),
    .text-with-photos__image:nth-child(2),
    .text-with-photos__image:nth-child(3) {
      grid-column: 1;
      grid-row: auto;

      & img {
        aspect-ratio: 4/3;
        margin-top: unset;
        position: relative;
        transform: unset;
      }
    }

    .text-with-photos__image:nth-child(3) {
      display: none;
    }
  }
}

/*--------------------------------------------------------------
# Text with Title
--------------------------------------------------------------*/

.text-with-title {
  /* border-top: 1px solid var(--color-primary); */
  /* border-bottom: 1px solid var(--color-primary); */
  /* padding: 0 20px; */
  position: relative;
  /* padding-left: calc(100% / 3); */
  /* padding-right: var(--padding); */
  /* border-radius: 8px; */

  .text-with-title__title {
    grid-column: 1;
    border-top: 1px solid var(--color-primary);
    padding-top: var(--padding);
  }

  .text-with-title__content {
    grid-column: 2 / span 2;
    padding: 0 0 0 var(--padding);

    @media (max-width: 860px) {
      padding: 0;
    }

    & > p {
      margin-top: 0;
    }
  }
}

/* =============================================================
   5. THIRD-PARTY OVERRIDES
   ============================================================= */

/*--------------------------------------------------------------
# BM Events
--------------------------------------------------------------*/

.related-events.bm-events {
  margin-top: 0 !important;
  padding: 0;

  .card:first-child {
    border-top: unset;
    padding-top: 0;
    margin-top: 0;
  }
}

/*--------------------------------------------------------------
# FacetWP
--------------------------------------------------------------*/

.filters {
  & h4 {
    margin-bottom: 0.5rem;
  }

  .facetwp-facet {
    margin-bottom: 40px;
  }

  @media (max-width: 860px) {
    padding-bottom: 20px;

    &.grid-2 {
      gap: 0;
    }

    .facetwp-facet {
      margin-bottom: 20px;

      &.facetwp-type-fselect {
        .fs-wrap {
          max-width: unset;
        }
      }
    }
  }
}

.facetwp-type-checkboxes {
  .facetwp-checkbox {
    background: unset;
    position: relative;
    padding-left: 2rem;

    &:before {
      content: "";
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 0;
      display: inline-block;
      height: 1.5rem;
      aspect-ratio: 1 / 1;
      border-radius: 50%;
      text-align: center;
      margin-right: 0.5em;
      border: 1px solid var(--color-primary);
      background: var(--color-white);
      color: var(--color-primary);
    }

    &.checked {
      background-image: unset;

      &:before {
        background: var(--color-primary);
        border: 2px solid var(--color-primary);
        box-shadow: inset 0 0 0 4px var(--color-white);
      }
    }
  }
}

.facetwp-facet.facetwp-type-fselect {
  .fs-wrap {
    width: 100%;
    max-width: 400px;
  }

  .fs-search {
    display: none;
  }

  .fs-label-wrap,
  .fs-dropdown {
    border-radius: 8px;
    border: 1px solid var(--color-primary);
    padding: 4px 8px;
  }

  .fs-label-wrap {
    font-weight: 600;
  }

  .fs-open .fs-label-wrap {
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
  }

  .fs-dropdown {
    border-top: 0;
    border-radius: 0 0 8px 8px;
  }

  .fs-wrap.multiple .fs-option .fs-checkbox i {
    border-radius: 50px;
    border: 1px solid var(--color-primary);
  }

  .fs-wrap.multiple .fs-option.selected .fs-checkbox i {
    background: var(--color-secondary);
  }
}

.facetwp-pager .facetwp-page {
  display: inline-block;
  padding: 8px 16px;
  margin: 0 4px;
  text-decoration: none;
  border: 1px solid var(--color-primary);
  border-radius: 8px;
  color: var(--color-primary);
  cursor: pointer;
}

.facetwp-pager .facetwp-page.active {
  background-color: var(--color-primary);
  color: white;
  font-weight: normal;
}

.facetwp-pager .facetwp-page:hover {
  background-color: var(--color-secondary);
  color: var(--color-primary);
}

/*--------------------------------------------------------------
# Gutenberg Blocks
--------------------------------------------------------------*/

.wp-block-image {
  margin: 2em 0;
}

.wp-block-image img {
  border-radius: 8px;
}

.wp-block-image.size-large,
.wp-block-image.size-large {
  padding: 0 var(--padding);

  & img {
    width: 100%;
    max-width: unset;
  }
}

.wp-block-image figcaption {
  font-size: 14px;
  color: var(--color-black);
  margin-top: 0.5em;
  text-align: center;
}

/* =============================================================
   6. PAGE & TEMPLATE OVERRIDES
   ============================================================= */

/*--------------------------------------------------------------
# Home
--------------------------------------------------------------*/

.home {
  .hero {
    margin: 0;

    .hero-content {
      padding: calc(var(--padding-double) * 3) var(--padding-double)
        calc(var(--padding-double) * 5) var(--padding-double);

      @media (max-width: 860px) {
        grid-template-columns: 1fr;
        padding: calc(var(--padding) * 3) var(--padding-double);
      }

      @media (max-width: 620px) {
        padding: calc(var(--padding) * 3) var(--padding);
      }
    }
  }
}

/*--------------------------------------------------------------
# Page Templates
--------------------------------------------------------------*/

.page-template-default,
.page-template-page-great-places,
.page-template-page-past-conferences,
.page-template-page-parent {
  .site-main {
    overflow: hidden;

    .default-hero {
      padding: calc(var(--padding) * 3) 0;
      margin: 0;
      position: relative;
      z-index: 1;

      @media (max-width: 1100px) {
        padding: calc(var(--padding) * 2) 0;
      }

      /* &:not(:has(.right-column)) {
        background-color: var(--color-secondary);
      } */

      &:before {
        content: "";
        position: absolute;
        top: 3%;
        left: -3%;
        width: 100%;
        /* height: 100%; */
        aspect-ratio: 438 / 363;
        background: url("images/logo-overlay.svg");
        background-size: 50vw;
        background-repeat: no-repeat;
        background-position: top left;
        opacity: 0.08;
      }

      .grid-2 {
        position: relative;
      }

      .left-column {
        /* background: var(--color-secondary); */
        /* padding: var(--padding); */
        border-radius: 8px;
        width: 100%;
        height: auto;
        /* padding-right: 30%; */
        /* color: var(--color-primary); */
        /* aspect-ratio: 1; */
        /* border: 1px solid var(--color-primary); */
        /* border-top: 8px solid var(--color-primary); */
      }
    }

    .sidebar-nav {
      .sidebar-nav__inner {
        /* background: var(--color-secondary); */
        padding: var(--padding-half);
        border-radius: 8px;
        margin-bottom: var(--padding);
        margin-top: 0;
        border: 1px solid var(--color-primary);
        border-top: 8px solid var(--color-primary);
      }
    }

    .page-content {
      /* margin: 0; */
    }
  }

  &.page-template-page-past-conferences.page-child {
    .default-hero {
      padding-top: calc(var(--padding) * 3);
      padding-bottom: calc(var(--padding) * 3);
      margin: 0 auto;

      .inner-content {
        padding-right: 0;
      }

      .text-with-photos.grid-2 {
        grid-template-columns: 1fr;
      }
      .left-column {
        display: grid;
        grid-template-columns: 1fr;
        align-items: start;
        justify-items: center;
        /* gap: 1em; */

        & h1 {
          grid-column: 1;
          grid-row: 2;
          margin-bottom: 0;
        }
        .conference-logo {
          grid-column: 1;
          grid-row: 1;
          width: auto;
          width: 100%;
          aspect-ratio: 1;
          height: auto;
          object-fit: contain;
          padding: var(--padding);
          background: white;
          border-radius: 8px;
          margin-bottom: var(--padding);

          & img {
            width: 100%;
            max-width: 300px;
          }
        }
        .conference-intro {
          grid-column: 1;
          grid-row: 3;

          * {
            /* max-width: var(--max-width-small); */
            /* text-align: center; */
          }
        }
        .button {
          margin: 5px;
          display: inline-block;
        }
      }
      .text-with-photos__gallery {
        grid-template-columns: repeat(7, 1fr);
      }
      .text-with-photos__image:nth-child(1) {
        grid-column: 3 / span 3;
        grid-row: 1;

        & img {
          aspect-ratio: 6/5;
        }
      }
      .text-with-photos__image:nth-child(2) {
        grid-column: 2 / span 2;
        grid-row: 1;

        & img {
          aspect-ratio: 5/4;
          position: absolute;
          top: 0;
          transform: translateY(20%) translateX(-20%);
          box-shadow: 0 0 32px rgba(0, 0, 0, 0.2);
        }
      }
      .text-with-photos__image:nth-child(3) {
        grid-column: 4 / span 2;
        grid-row: 1;

        & img {
          aspect-ratio: 6/5;
          position: absolute;
          bottom: 0;
          transform: translateY(-20%) translateX(70%);
        }
      }
    }
  }
}

.page-template-page-great-places {
  .great-places-categories .right-column .card-grid {
    grid-template-columns: 1fr;
  }
}

.page-template-page-past-conferences {
  .default-hero .text-with-photos.grid-2 .left-column {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto 1fr;
    grid-gap: 1rem var(--padding);
    justify-items: start;
    /* align-content: start; */

    .conference-logo {
      grid-column: 1;
      grid-row: 1 / span 2;
      /* margin-top: calc(var(--padding) * -1); */
    }

    & h1 {
      grid-column: 2 / span 2;
      grid-row: 1;
      margin-bottom: 0;
      text-align: left;
    }

    .conference-intro {
      grid-column: 2 / span 2;
      grid-row: 2;
    }
  }
}

/*--------------------------------------------------------------
# Search Results
--------------------------------------------------------------*/

.search-results {
  .card-grid__item {
    .label:not(.post-type-label) {
      display: none;
    }
  }
}

/*--------------------------------------------------------------
# Single — News & Award
--------------------------------------------------------------*/

.single-news,
.single-award,
.single-memoriam {
  .text-with-title {
    .text-with-title__content {
      grid-column: 1 / span 2;
      padding: 0;
    }
    .text-with-title__title {
      grid-column: 3;
      padding-right: unset;
      margin-left: calc(var(--padding) / 2);
    }
  }
  .sidebar ul {
    list-style: none;
    padding-left: 0;

    & li {
      margin-bottom: 0.5em;

      & a {
        display: flex;
        align-items: start;
        gap: 12px;
      }

      .related-thumb {
        border-radius: 8px;
        display: block;
        aspect-ratio: 1 / 1;
        width: 80px;
        height: auto;
        object-fit: cover;
        margin-top: 0.3em;
      }
    }
  }

  @media (max-width: 860px) {
    .text-with-title {
      .text-with-title__title {
        margin: 0;
        margin-top: var(--padding);
      }
    }
  }
}

/*--------------------------------------------------------------
# Single — Job & RFP/RFQ
--------------------------------------------------------------*/

.single-job,
.single-rfp-rfq {
  .text-with-title {
    margin-bottom: calc(var(--padding) * 1);

    .text-with-title__content {
      border-top: 1px solid var(--color-primary);
      padding-top: var(--padding);
    }
  }

  & ul li {
    margin-bottom: 0;
  }
}

/*--------------------------------------------------------------
# Single — Presentation
--------------------------------------------------------------*/

.single-presentation {
  .site-main {
    background: var(--color-secondary);
  }
  .text-in-box {
    padding-bottom: calc(var(--padding) * 2);
  }
  .presentation-content {
    margin-top: 2em;
    margin-bottom: 0;
    & p {
      margin: 0;
    }
  }
}

/*--------------------------------------------------------------
# FORMS
--------------------------------------------------------------*/

.forminator-ui {
  .forminator-pagination-progress {
    margin-bottom: 1em;
  }

  .forminator-button-submit {
    margin-top: 2em;
  }

  .forminator-pagination-footer {
    margin-top: 2em;

    .forminator-button-submit {
      margin-top: 0;
    }
  }

  .forminator-row {
    margin-bottom: 16px !important;

    .forminator-row:last-child {
      margin-bottom: 0 !important;
    }

    &:has(> .forminator-field-textarea:only-child) {
      /* margin-top: calc(var(--padding-half) * -1) !important; */
    }

    .forminator-label {
      font-weight: 600;
      display: block;
      margin-bottom: 2px;
      line-height: 1.3em;
    }

    .forminator-grouped-fields {
      border: 1px solid var(--color-primary);
      padding: var(--padding-half);
      /* padding-bottom: 0; */
      /* margin-bottom: calc(var(--padding) / 2); */
      border-radius: var(--padding-half);

      .forminator-row {
        /* margin-bottom: 0 !important; */

        & ul {
          margin-bottom: 0;
        }
      }
    }

    .forminator-repeater-label {
      font-size: clamp(calc(3 * 8px), 2.4vw, calc(4 * 8px));
      line-height: 1.2em;
      font-weight: 300;
      margin: 0;
      margin-bottom: 1rem;
      letter-spacing: -0.02em;
    }

    & input:not([type="radio"]):not([type="checkbox"]):not([type="file"]),
    & textarea,
    & select {
      border-radius: 8px;
      border: 1px solid var(--color-primary);
      padding: 8px 12px;
      /* min-width: 260px; */
      width: 100%;
    }

    & select[multiple] option {
      padding: 8px;
      margin: 2px 0;
      border-radius: 8px;
    }

    & select[multiple] option:checked {
      background: var(--color-secondary);
      color: var(--color-black);
    }

    /* the input as a whole */
    input[type="file"] {
      /* optional: tidy up the default look */
    }

    /* the actual "Choose Files" button */
    input[type="file"]::file-selector-button {
      background: var(--color-primary);
      color: var(--color-white);
      border: none;
      border-radius: 6px;
      padding: 1em 1em;
      margin-right: 0.75rem;
      font-family: inherit;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s ease-in-out;
      /* letter-spacing: 0.1em; */
      /* text-transform: uppercase; */
      line-height: 1em;
    }

    input[type="file"]::file-selector-button:hover {
      background: var(--color-black);
    }

    #address-1-zip,
    #address-1-address_line {
      max-width: 50%;
      min-width: auto;
    }

    .forminator-radio-label {
      /* font-size: 16px; */
    }

    & input[type="radio"],
    & input[type="checkbox"] {
      margin-right: 5px;

      .forminator-radio-bullet {
        width: 40px;
      }
    }

    .forminator-radio {
      display: block;
    }

    .forminator-description {
      font-size: 14px;
      display: inline-block;
    }

    .forminator-error-message {
      font-size: 14px;
      display: block;
      color: red;
    }

    .forminator-field-html {
      /* font-size: 16px; */

      & h4 {
        margin-bottom: 0;
      }

      & p {
        margin-top: 0;
      }

      & p:last-child {
        margin-bottom: 0;
      }
    }
  }

  .forminator-row:has(.picker) {
    position: relative;
    z-index: 50;
  }

  .forminator-action-buttons {
    display: none !important;
  }

  .forminator-button-back {
    margin-right: 10px;
  }

  .forminator-uploaded-files {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;

    & li {
      border: 1px solid var(--color-primary);
      padding: 10px;
      border-radius: 8px;

      .forminator-uploaded-file--image {
        display: none;
      }

      .forminator-uploaded-file--content {
        display: flex;
        justify-content: space-between;

        & p {
          line-height: 1.3em;
          margin: 0;
        }
        .forminator-uploaded-file--size {
          display: none;
        }
      }
    }
  }

  .forminator-button-delete {
    background: unset;
    padding: 0;

    .forminator-icon-close {
      color: var(--color-primary);

      &:before {
      }
    }
  }
}

.forminator-copy-field {
  margin-bottom: 1em;
}

.forminator-draft-form {
  .forminator-row {
    margin-bottom: 5px !important;
  }

  .forminator-button-submit {
    margin-top: 0;
  }
}

input[type="text"].forminator-draft-link {
  border-radius: 8px;
  border: 1px solid var(--color-primary);
  padding: 8px 12px;
  width: 100%;
  margin-bottom: 5px;
}

#ui-datepicker-div {
  z-index: 9999 !important;
  border-radius: 8px;
  border: unset;
}

/*--------------------------------------------------------------
# BM EVENTS CALENDAR
--------------------------------------------------------------*/

/* .page-template-page-events {
  .hero {
    .hero-content {
      padding: calc(var(--padding) * 3) var(--padding-double)
        calc(var(--padding) * 2) var(--padding-double);
    }
  }
} */

.bm-events {
  display: block;
  margin: 0 auto;
  margin-top: calc(var(--padding) * 3) !important;
  max-width: var(--max-width);
  padding: 0 var(--padding);
  margin-bottom: var(--padding-double);

  .content {
    padding: 0 var(--padding);
  }
}

.single-event .top {
  padding-bottom: 160px;

  .content {
    max-width: var(--max-width);
  }

  & h2 {
    color: var(--color-accent-2);
  }
}

.single-event .text-in-box {
  .bm-header-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }

  .bm-header-event-type,
  .bm-header-categories {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
  }

  .bm-event-type-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background-color: var(--color-white);
    border-radius: 100px;
    padding: 3px 10px;
    color: var(--color-black);
  }

  .bm-category {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background-color: var(--color-primary);
    border-radius: 100px;
    padding: 3px 10px;
    color: var(--color-white);
  }

  .bm-event-date-range,
  .bm-event-time,
  .bm-event-venue {
    /* same as H4 */
    font-size: clamp(calc(2 * 8px), 1.8vw, calc(3 * 8px));
    font-weight: 300;
    margin: 0;
    margin-bottom: 0.2rem;
    line-height: 1.3em;
    display: block;
  }
  .bm-event-date-range {
    font-weight: bold;
    display: block;
  }
  .bm-event-time {
    margin-bottom: 1rem;
  }
  .bm-event-venue {
    margin-top: 0.8rem;
  }
}

.single-event {
  .text-with-photo__image {
    & img {
      margin-bottom: var(--padding);
    }
  }

  .card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--padding);
    margin-bottom: var(--padding);

    & p {
      margin: 0;
    }
  }
}

.bm-events .bm-events-group {
  margin: 0 auto;
  display: block;
  /* grid-template-columns: repeat(4, 1fr); */
}

.bm-events .full-row {
  /* border: 1px solid var(--color-accent-1);
  background: var(--color-accent-1);
  padding: 0.5em 1em;
  color: #fff;
  border-radius: 6px 6px 6px 6px; */
  margin-top: var(--padding-double);
  grid-column: 1 / span 4;
  text-transform: uppercase;
  /* font-weight: 800; */
  color: var(--color-light);

  & span {
    opacity: 0.3;
    color: var(--color-black);
  }
}

.bm-events .full-row:first-child {
  margin-top: 0;
}

.bm-events .card {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr 1fr;
  align-items: start;
  gap: 2em;
  border-top: 1px solid #ccc;
  /* padding: 0 var(--padding); */
  /* border-left: 1px solid; */
  padding-top: 0.5em;
  margin-top: 0.5em;
  transition: all 0.2s ease;
  position: relative;

  /* > a {
    position: absolute;
    inset: 0; 
    width: 100%;
    height: 100%;
    z-index: 2;
    text-indent: -9999px;
    cursor: pointer;
  } */

  /* &:hover {
    background: #eee;
    transform: translateY(-2px);
  } */
}

/* .bm-events .card:nth-child(8n + 2),
.bm-events .card:nth-child(8n + 3),
.bm-events .card:nth-child(8n + 4),
.bm-events .card:nth-child(8n + 5) {
  background: #fff;
}

.bm-events .card:nth-child(8n + 6),
.bm-events .card:nth-child(8n + 7),
.bm-events .card:nth-child(8n + 8),
.bm-events .card:nth-child(8n + 9) {
  background: #eee;
} */

.bm-events .card:has(+ .full-row) {
  border-bottom: unset;
}

.bm-events .venue,
.single-event .venue {
  /* font-weight: 600; */
  color: #939393;
}

.bm-events .card__content {
  /* margin-top: 0.5em; */
  padding-bottom: 1em;
}

.bm-events .card__content p {
  margin-top: 0.5em;
}

.bm-events .card__image {
  line-height: 0;
}

.bm-events .card__image img {
  border-radius: 8px;
  overflow: hidden;
  line-height: 1em;
  aspect-ratio: 3/2;
  object-fit: cover;
  width: 100%;
}

.bm-events .card__image .no-image {
  background: var(--color-secondary);
  border-radius: 8px;

  & img {
    padding: 10px;
    object-fit: contain;
    opacity: 0.3;
  }
}

.bm-events .date h1,
.bm-events .date h2 {
  /* font-size: 100px; */
  margin: 0;
  line-height: 1.1em;
  color: var(--color-light);
}

.name-day {
  display: inline-block;
  transform: translateY(-0.7rem);
}

.bm-events .name-month,
.bm-events .time {
  margin: 0 !important;
  /* font-weight: 600; */
}

.bm-events .event-title,
.bm-events .card__content h3,
.bm-events .card__content h5 {
  margin: 0;
  font-weight: 400;
}

.card__info {
  justify-self: end;
}

.bm-full-row {
  /* color: var(--color-primary); */
  margin-top: var(--padding);
  font-weight: 500;

  &:first-child {
    margin-top: 0;
  }

  & span {
    color: var(--color-black);
    font-weight: 300;
  }
}

/* .bm-events .button { */
/* display: inline-block; */
/* font-weight: 500; */
/* background-color: var(--color-accent-1); */
/* color: var(--color-white); */
/* border-radius: 6px 6px 6px 6px; */
/* padding: 10px 30px 10px 30px; */
/* float: right; */
/* } */

/* single event */

/* 
 * IMPORTANT: The first .single-event rule below is required as a "primer"
 * Without it, WordPress doesn't properly recognize .single-event selectors
 * This appears to be a plugin CSS parsing quirk - DO NOT REMOVE
 */
.single-event {
  /* Primer rule - required for CSS parser */
}

.single-event .elementor-location-header .elementor-element {
  margin-bottom: unset !important;
}

.single-event .event-image {
  width: 100%;
  aspect-ratio: 5 / 1;
  object-fit: cover;
}

.single-event .top h2 {
  margin-bottom: 0.1em;
}

.multi-day-badge,
.recurring-event-badge {
  margin-bottom: 20px;

  & span {
    background-color: var(--color-accent-1);
    color: #fff;
    padding: 5px 20px;
    /* border-radius: 4px; */
    font-weight: 600;
  }
}

.all-occurrences {
  font-family: var(--font-heading);
  /* background-color: #f8f9fa; */
  /* padding: 40px 0; */
  margin-top: var(--padding);
  /* background: var(--color-black); */
  /* max-width: var(--max-width); */
  /* margin: 0 auto; */
}

.all-occurrences .content {
  border-top: 1px solid #e0e0e0;
  font-size: 20px;
  /* padding: var(--padding); */
}

.all-occurrences h3,
.all-occurrences h4 {
  text-align: center;
  /* text-transform: uppercase; */
}

.calendar-container {
  /* max-width: 500px; */
  /* margin: 0 auto; */
  /* background: white; */
  /* border-radius: 12px; */
  /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
  overflow: hidden;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(var(--padding) / 2) var(--padding);
  /* background: var(--color-accent-1); */
  color: var(--color-main);

  /* #currentMonth {
    width: 300px;
    text-align: center;
  } */
}

.nav-btn {
  background: unset;
  border: none;
  color: var(--color-light) !important;
  font-size: 30px;
  /* width: 40px; */
  /* height: 40px; */
  /* border-radius: 50%; */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
  margin-top: 0;
  padding: 0;
}

& button.nav-btn:hover {
  background: unset !important;
  color: var(--color-main) !important;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  /* background: #f0f0f0; */
}

.calendar-day-header {
  padding: 15px 5px;
  text-align: center;
  font-weight: 600;
  /* font-size: 14px; */
  /* color: var(--color-main); */
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  /* background: #e0e0e0; */
  padding: 1px;
}

.calendar-day {
  background: #eee;
  padding: 8px;
  text-align: center;
  cursor: default;
  /* min-height: 40px; */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  position: relative;
}

.calendar-day.empty {
  cursor: default;
  background: #fafafa;
}

.calendar-day.today {
  & span {
    position: relative;
    z-index: 2; /* above the pseudo-element */
    color: var(--color-accent-1);
  }

  &:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    /* transform: translate(-50%, -50%); */
    background: var(--color-accent-1);
    opacity: 0.2;
    /* border-radius: 50px; */
    z-index: 1; /* behind the text */
  }
}

.calendar-day.has-event {
  /* background: var(--color-accent-1); */
  /* color: white; */
  /* font-weight: bold; */
  cursor: pointer;
  position: relative;

  & span {
    position: relative;
    z-index: 2; /* above the pseudo-element */
    color: var(--color-white);
  }

  &:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    /* transform: translate(-50%, -50%); */
    background: var(--color-accent-1);
    /* border-radius: 50px; */
    z-index: 1; /* behind the text */
    transition: all 0.2s ease;
  }
}

.calendar-day.has-event:hover {
  & span {
    color: var(--color-white);
  }

  &:before {
    background: var(--color-light);
  }
}

.calendar-day.active {
  background: var(--color-light) !important;
}

/* Date Filter Styles */
.event-filters {
  display: none;
  /* font-family: "Poppins", Sans-serif; */
  padding: 0 25px;
  /* border-radius: 8px; */
  max-width: var(--max-width);
  padding: 0 var(--padding);
  margin: 0 auto;

  & form,
  .event-filters-facets {
    padding: calc(var(--padding) / 1);
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
  }
}

.event-filters form,
.event-filters-facets {
  display: flex;
  gap: 20px;
  align-items: end;
  justify-content: center;
  flex-wrap: wrap;

  .facetwp-facet {
    margin-bottom: 0px;

    .facetwp-date-min {
      margin-right: 20px;
    }
  }
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 150px;
}

.filter-group label {
  /* font-weight: 600;
  color: #333;
  font-size: 14px; */
}

.filter-group input {
  padding: 10px 12px;
  border: 2px solid #ddd;
  /* border-radius: 6px; */
  font-size: 14px;
  transition: border-color 0.2s ease;
}

.filter-group input:focus {
  border-color: var(--color-accent-1);
  outline: none;
  box-shadow: 0 0 0 3px rgba(46, 100, 175, 0.1);
}

/* .event-filters button {
  background: var(--color-accent-1);
  color: white;
  border: none;
  padding: 10px 30px 10px 30px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s ease;
}

.event-filters button:hover {
  background: #1e4a8c;
} */

.clear-filters {
  color: var(--color-accent-1);
  text-decoration: none;
  /* padding: 10px 30px 10px 30px; */
  /* border: 1px solid #ddd; */
  /* border-radius: 6px; */
  font-weight: 600;
  transition: all 0.2s ease;
}

.clear-filters:hover {
  color: var(--color-accent-1);
  border-color: var(--color-accent-1);
  text-decoration: none;
}

.no-events-message {
  text-align: center;
  grid-column: 2 / span 2;
}

.no-events-message h3 {
  margin-bottom: 10px;
  color: #333;
}

.text-with-photo {
  & h4 {
    font-weight: 600;
  }
}

.events-footer {
  text-align: center;
  /* border-bottom: 1px solid var(--color-primary); */
  /* background-color: var(--color-secondary); */
  /* padding: var(--padding-double) 0; */
  margin-top: calc(var(--padding-double) * -1);
  margin-bottom: var(--padding-double);

  .button {
    margin: 5px;
  }
}

/* Mobile responsiveness */
@media (max-width: 1100px) {
  .event-filters {
    display: block;

    & form {
      & h6 {
        display: block;
        width: 100%;
        text-align: center;
        margin-bottom: 0;
      }
    }

    .filter-group {
      width: auto;
      float: left;
    }
  }

  .bm-events .full-row {
    grid-column: 1 / span 2;
  }

  .bm-events .bm-events-group {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .bm-events .full-row {
    grid-column: 1 / span 1;
  }

  .bm-events .bm-events-group {
    grid-template-columns: 1fr;
  }
}

/*--------------------------------------------------------------
# Mobile Header + Full-Screen Overlay Menu
# Self-contained — to remove, delete this entire block and revert
# header.php (re-add .header-top wrapper, move .menu-toggle back
# inside <nav>) and js/navigation.js (button = inside nav).
--------------------------------------------------------------*/
.menu-toggle,
.submenu-toggle,
.search-toggle {
  display: none;
}

@media (max-width: 1100px) {
  /* Header re-flows: logo + burger row, then green band w/ social+search */
  .site-header {
    grid-template-columns: 1fr;
  }

  .site-branding {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    max-width: 85vw;
    padding-bottom: calc(var(--padding-half) - 10px);
  }

  .menu-toggle {
    display: block;
    position: absolute;
    grid-column: 1;
    grid-row: 1;
    margin-top: var(--padding-half);
    margin-right: var(--padding-half);
    justify-self: end;
    align-self: start;
    z-index: 101;
    width: 34px;
    height: 34px;
    padding: 0;
    background: transparent;
    border: 0;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 0;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
  }

  /* Burger icon: CSS-drawn bars that morph to an X.
     ::before is the middle bar (top/bottom drawn with box-shadow),
     ::after is the second stroke of the X, hidden while closed. */
  .menu-toggle::before,
  .menu-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 2px;
    margin: -1px 0 0 -11px;
    background: currentColor;
    transition:
      transform 0.25s ease,
      box-shadow 0.25s ease,
      opacity 0.25s ease;
  }

  .menu-toggle::before {
    box-shadow:
      0 -7px currentColor,
      0 7px currentColor;
  }

  .menu-toggle::after {
    opacity: 0;
  }

  .menu-toggle[aria-expanded="true"] {
    position: fixed;
    /* top: var(--padding-half); */
    /* right: var(--padding-half); */
    color: var(--color-secondary);
  }

  .menu-toggle[aria-expanded="true"]::before {
    box-shadow: none;
    transform: rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"]::after {
    opacity: 1;
    transform: rotate(-45deg);
  }

  @media (prefers-reduced-motion: reduce) {
    .menu-toggle::before,
    .menu-toggle::after {
      transition: none;
    }
  }

  .header-right {
    width: 100%;
    grid-column: 1;
    grid-row: 2;
    justify-self: stretch;
    margin-top: 0;
    padding: 2px var(--padding-half);
    background: var(--color-primary);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--padding-half);
  }

  .header-right .social-media svg {
    width: 36px;
  }

  /* Search collapses behind an icon. The panel wraps onto its own full-width
     row inside the green band rather than being a separate element, so the
     band just grows taller. .search-collapsed is applied by navigation.js, so
     without JS the form simply renders on that row and stays usable. */
  .search-toggle {
    display: flex;
    align-items: center;
    justify-content: end;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-secondary);
    cursor: pointer;

    &:hover {
      background: unset !important;
    }
  }

  .search-toggle .material-icons {
    /* .material-icons hardcodes color: var(--color-primary), which is the
       same green as the band it sits on. */
    color: var(--color-secondary);
    font-size: 26px;
    line-height: 1;
    font-weight: 200;
  }

  .header-search {
    flex: 1 0 100%;
    min-width: 0;
    padding-bottom: 4px;
  }

  .header-right.search-collapsed .header-search {
    display: none;
  }

  /* Flip social/search colors on the green band */
  .header-right .social-media svg .fill,
  .header-right .social-media svg .no-fill {
    fill: var(--color-secondary);
  }

  .header-right .search-form input {
    border-color: var(--color-secondary);
    background: var(--color-white);
    color: var(--color-black);
    width: 100%;
    min-width: 0;
    padding: 6px 10px;
    /* 16px keeps iOS Safari from zooming the page in on focus */
    font-size: 16px;
    border-radius: 4px;
  }

  .header-right .search-form input::placeholder {
    color: var(--color-black);
    opacity: 0.7;
  }

  /* .main-navigation becomes just the overlay container */
  .main-navigation {
    grid-column: 1;
    grid-row: 3;
    background: transparent;
  }

  .main-navigation .nav-menu {
    display: none;
  }

  /* Top-aligned, not centred: an expanding accordion inside a vertically
     centred flex column makes the whole menu jump, and centring also makes
     the start edge unreachable once the list overflows. */
  .main-navigation.toggled .nav-menu {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    position: fixed;
    inset: 0;
    z-index: 100;
    width: 100%;
    max-width: none;
    margin: 0;
    /* top padding clears the fixed close button (20px offset + 40px tall) */
    padding: calc(var(--padding-half) + 56px) var(--padding-half) var(--padding);
    background: var(--color-primary);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .main-navigation.toggled .nav-menu > li {
    position: relative;
    flex: 0 0 auto;
    /* width: 100%; */
    text-align: center;
  }

  .main-navigation.toggled .nav-menu > li::after {
    display: none;
  }

  .main-navigation.toggled .nav-menu > li > a {
    font-size: clamp(calc(3 * 8px), 3.2vw, calc(6 * 8px));
    font-family: var(--font-heading);
    line-height: 1.1;
    /* symmetric inline padding keeps the label centred clear of the chevron */
    padding: 8px var(--padding) 8px var(--padding-half);
  }

  /* Submenus: neutralise the inherited desktop hover-dropdown rules
     (position:absolute / left:-999em / float / width:200px), which would
     otherwise park them off-screen while leaving them in the tab order. */
  .main-navigation.toggled .nav-menu ul {
    display: none;
    position: static;
    top: auto;
    left: auto;
    float: none;
    width: 100%;
    margin: 0;
    padding: 0 0 var(--padding-half);
    background: transparent;
    box-shadow: none;
    list-style: none;
  }

  .main-navigation.toggled .nav-menu .submenu-open > ul {
    display: block;
  }

  .main-navigation.toggled .nav-menu ul li {
    display: block;
    margin: 0;
    background: transparent;
    border-radius: 0;

    &:hover {
      background: unset;

      & a {
        color: inherit;
      }
    }
  }

  .main-navigation.toggled .nav-menu ul a {
    display: block;
    width: auto;
    padding: 6px var(--padding-half);
    font-size: 18px;
    line-height: 1.3;
    color: var(--color-secondary);
    text-align: left;
  }

  .main-navigation {
    & .nav-menu {
      & > li {
        & a {
          height: auto;

          &:before {
            display: none;
          }
        }
      }
    }
  }

  /* Chevron disclosure button, injected by navigation.js */
  .submenu-toggle {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-secondary);
    cursor: pointer;

    &:hover {
      background: unset !important;
    }
  }

  .submenu-toggle::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    margin: -7px 0 0 -5px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
  }

  .submenu-toggle[aria-expanded="true"]::before {
    margin-top: -2px;
    transform: rotate(-135deg);
  }

  @media (prefers-reduced-motion: reduce) {
    .submenu-toggle::before {
      transition: none;
    }
  }

  /* html carries the scrollbar because of `html { overflow-x: hidden }`
     further up, so a body-only lock leaves a second scrollbar behind. */
  html:has(.main-navigation.toggled),
  body:has(.main-navigation.toggled) {
    overflow: hidden;
  }
}