/* ==========================================================================
   SPG Leaders — WordPress chrome
   --------------------------------------------------------------------------
   main.css is the design system, ported unchanged from the HTML template. This
   file adds only what WordPress needs on top of it: content styles for the
   editor's output, sidebars and widgets, comments, pagination, search, and the
   alignment classes core blocks emit.

   Everything here uses the same custom properties as main.css, so a Customizer
   colour change flows through automatically.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Accessibility helpers required by WordPress
   -------------------------------------------------------------------------- */

.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: var(--paper);
  border-radius: var(--r-xs);
  box-shadow: var(--shadow-md);
  clip-path: none;
  color: var(--accent);
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  height: auto;
  left: 1rem;
  line-height: normal;
  padding: 0.9rem 1.4rem;
  text-decoration: none;
  top: 1rem;
  width: auto;
  z-index: 100000;
}

/* --------------------------------------------------------------------------
   Layout: content beside an optional sidebar
   -------------------------------------------------------------------------- */

.layout {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
}

.layout--sidebar {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
  .layout--sidebar {
    grid-template-columns: minmax(0, 1fr) 320px;
  }

  .sidebar-left .layout--sidebar {
    grid-template-columns: 320px minmax(0, 1fr);
  }

  .sidebar-left .layout--sidebar .layout__main {
    order: 2;
  }
}

.layout--narrow {
  max-width: 76ch;
  margin-inline: auto;
}

.layout__aside {
  display: grid;
  align-content: start;
  gap: clamp(1.5rem, 3vw, 2.25rem);
}

/* --------------------------------------------------------------------------
   Prose — the editor's output
   -------------------------------------------------------------------------- */

.prose {
  max-width: 74ch;
  margin-inline: auto;
  font-size: var(--step-0);
  color: var(--slate-700);
}

.prose--wide {
  max-width: none;
}

.prose > * + * {
  margin-top: 1.15em;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  color: var(--fg);
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-top: 2em;
  margin-bottom: 0.6em;
}

.prose h2 { font-size: var(--step-3); }
.prose h3 { font-size: var(--step-2); }
.prose h4 { font-size: var(--step-1); }

.prose > :first-child {
  margin-top: 0;
}

.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

.prose a:hover {
  text-decoration-thickness: 2px;
}

.prose ul,
.prose ol {
  padding-left: 1.4em;
}

.prose li + li {
  margin-top: 0.45em;
}

.prose img,
.prose video,
.prose iframe {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-md);
}

.prose figure {
  margin: 2em 0;
}

.prose figcaption,
.wp-caption-text {
  color: var(--fg-muted);
  font-size: var(--step--1);
  margin-top: 0.7em;
  text-align: center;
}

.prose blockquote {
  border-left: 3px solid var(--accent);
  color: var(--fg);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-style: italic;
  margin-inline: 0;
  padding: 0.4em 0 0.4em 1.4em;
}

.prose blockquote cite {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-style: normal;
  color: var(--fg-muted);
  margin-top: 0.7em;
}

.prose code,
.prose kbd {
  background: var(--sand);
  border-radius: var(--r-xs);
  font-size: 0.88em;
  padding: 0.15em 0.4em;
}

.prose pre {
  background: var(--ink-900);
  border-radius: var(--r-md);
  color: #e7ecf3;
  overflow-x: auto;
  padding: 1.2rem 1.4rem;
}

.prose pre code {
  background: none;
  color: inherit;
  padding: 0;
}

.prose hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 3em 0;
}

.prose table {
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
  width: 100%;
}

.prose th,
.prose td {
  border-bottom: 1px solid var(--line);
  padding: 0.75rem 1rem;
  text-align: left;
}

.prose th {
  color: var(--fg);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Core block alignments
   -------------------------------------------------------------------------- */

.alignleft {
  float: left;
  margin: 0.4em 1.6em 1.2em 0;
}

.alignright {
  float: right;
  margin: 0.4em 0 1.2em 1.6em;
}

.aligncenter {
  clear: both;
  display: block;
  margin-inline: auto;
}

.prose .alignwide {
  margin-inline: calc(50% - 50vw);
  max-width: 100vw;
  width: auto;
}

@media (min-width: 1240px) {
  .prose .alignwide {
    margin-inline: -8rem;
    max-width: none;
  }
}

.prose .alignfull {
  margin-inline: calc(50% - 50vw);
  max-width: 100vw;
  width: 100vw;
}

.wp-caption {
  max-width: 100%;
}

/* WordPress adds these to specific posts; theme review expects them styled. */
.sticky .post__title::after {
  content: "★";
  color: var(--amber-500);
  margin-left: 0.4em;
}

.bypostauthor > .comment-body .comment-author img {
  outline: 2px solid var(--accent);
}

.page-links {
  display: flex;
  gap: 0.5rem;
  margin-top: 2rem;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Pagination and post navigation
   -------------------------------------------------------------------------- */

.pagination,
.post-navigation {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
}

.pagination .page-numbers {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  color: var(--fg);
  display: inline-flex;
  font-size: 0.92rem;
  font-weight: 600;
  justify-content: center;
  min-width: 2.6rem;
  padding: 0.55rem 0.8rem;
  text-decoration: none;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--paper);
}

.pagination .page-numbers.dots:hover {
  background: none;
  border-color: var(--line);
  color: var(--fg);
}

.post-navigation .nav-links {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 1.5rem;
  padding-top: 2rem;
}

@media (min-width: 700px) {
  .post-navigation .nav-links {
    grid-template-columns: 1fr 1fr;
  }

  .post-navigation .nav-next {
    text-align: right;
  }
}

.post-navigation a {
  color: var(--fg);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  text-decoration: none;
}

.post-navigation a:hover {
  color: var(--accent);
}

.post-navigation .nav-label {
  color: var(--fg-muted);
  display: block;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin-bottom: 0.4rem;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Widgets
   -------------------------------------------------------------------------- */

.widget {
  font-size: 0.95rem;
}

.widget__title {
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  margin: 0 0 1rem;
  text-transform: uppercase;
}

.widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.widget li + li {
  margin-top: 0.55rem;
}

/*
 * :not(.btn) matters. Without it this repaints button labels too, and a
 * .btn--primary inside a widget loses its white text against the blue fill —
 * 1.79:1, effectively unreadable.
 */
.widget a:not(.btn) {
  color: var(--slate-700);
  text-decoration: none;
}

.widget a:not(.btn):hover {
  color: var(--accent);
}

.widget select,
.widget input[type="search"] {
  width: 100%;
}

/*
 * Footer and widget list links are 16-18px tall as plain inline text, which
 * only clears WCAG 2.5.8 through the spacing exception and is fiddly to hit on
 * a phone. A little vertical padding takes each to 24px+ without disturbing the
 * visual rhythm.
 */
.footer__list a,
.footer__legal a,
.site-footer .widget li a,
.layout__aside .widget li a {
  display: inline-block;
  padding-block: 3px;
}

/* Footer widgets sit on the dark ground, so they invert. */
.site-footer .widget__title {
  color: var(--paper);
}

.site-footer .widget a:not(.btn) {
  color: rgba(255, 255, 255, 0.72);
}

.site-footer .widget a:not(.btn):hover {
  color: var(--paper);
}

/*
 * Muted text inside a widget inherits the light-theme muted colour, which is
 * only 3.4:1 against the dark footer. On that ground it has to come from the
 * other direction.
 */
.site-footer .brand__tag,
.site-footer .widget-events__meta,
.site-footer .widget-leaders__role,
.site-footer .widget-cta__text,
.site-footer .widget .muted {
  color: rgba(255, 255, 255, 0.66);
}

.widget-events__item + .widget-events__item {
  border-top: 1px solid var(--line-soft);
  margin-top: 0.85rem;
  padding-top: 0.85rem;
}

.widget-events__link {
  display: block;
  font-weight: 600;
  color: var(--fg);
}

.widget-events__meta {
  color: var(--fg-muted);
  display: block;
  font-size: 0.84rem;
  margin-top: 0.2rem;
}

.widget-leaders__item {
  align-items: center;
  display: flex;
  gap: 0.8rem;
}

.widget-leaders__avatar {
  flex-shrink: 0;
  height: 44px;
  width: 44px;
  font-size: 0.9rem;
}

.widget-leaders__avatar img {
  border-radius: var(--r-full);
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.widget-leaders__name {
  display: block;
  font-weight: 600;
  color: var(--fg);
}

.widget-leaders__role {
  color: var(--fg-muted);
  display: block;
  font-size: 0.82rem;
}

.widget-cta {
  background: var(--sand);
  border-radius: var(--r-md);
  padding: 1.5rem;
}

.widget-cta__text {
  color: var(--fg-muted);
  margin: 0 0 1.1rem;
}

/* --------------------------------------------------------------------------
   Search form
   -------------------------------------------------------------------------- */

.search-form__row {
  display: flex;
  gap: 0.5rem;
}

.search-form__input {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--fg);
  flex: 1;
  font: inherit;
  min-width: 0;
  padding: 0.8rem 1rem;
}

.search-form__input:focus-visible {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.search-form__submit {
  flex-shrink: 0;
  padding-inline: 1rem;
}

.search-form__submit svg {
  height: 20px;
  width: 20px;
}

/* --------------------------------------------------------------------------
   No results
   -------------------------------------------------------------------------- */

.no-results {
  margin-inline: auto;
  max-width: 60ch;
  padding-block: clamp(2rem, 5vw, 4rem);
  text-align: center;
}

.no-results__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  margin: 0 0 0.7rem;
}

.no-results .search-form {
  margin-top: 1.6rem;
}

/* --------------------------------------------------------------------------
   Comments
   -------------------------------------------------------------------------- */

.comments {
  border-top: 1px solid var(--line);
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
}

.comments__title,
.comments__reply-title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  letter-spacing: -0.02em;
  margin: 0 0 1.5rem;
}

.comments__list {
  list-style: none;
  margin: 0 0 3rem;
  padding: 0;
}

.comments__list .children {
  list-style: none;
  margin-top: 1.5rem;
  padding-left: clamp(1rem, 4vw, 2.5rem);
}

.comments__list .comment-body {
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
}

.comments__list .comment-author {
  align-items: center;
  display: flex;
  gap: 0.7rem;
  font-weight: 600;
}

.comments__list .comment-author img {
  border-radius: var(--r-full);
}

.comments__list .comment-metadata {
  color: var(--fg-muted);
  font-size: 0.84rem;
  margin: 0.3rem 0 0.9rem;
}

.comments__list .comment-metadata a {
  color: inherit;
}

.comment-form label {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font: inherit;
  padding: 0.75rem 0.9rem;
  width: 100%;
}

.comment-form p {
  margin-bottom: 1rem;
}

.comment-form .submit {
  background: var(--accent);
  border: 0;
  border-radius: var(--r-full);
  color: var(--paper);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  padding: 0.8rem 1.6rem;
}

.comments__closed {
  color: var(--fg-muted);
  font-style: italic;
}

/* --------------------------------------------------------------------------
   Small additions to design components
   -------------------------------------------------------------------------- */

.hero__note {
  font-size: 0.86rem;
}

.mission__grid,
.quote__grid,
.join__grid {
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}

.events__list {
  gap: 1rem;
}

.events__more,
.benefits__cta {
  margin-top: clamp(2rem, 4vw, 3rem);
}

.join__points {
  gap: 0.85rem;
  margin-top: 0.5rem;
  list-style: none;
  padding: 0;
}

.join__point {
  gap: 0.7rem;
  flex-wrap: nowrap;
}

.join__check {
  color: var(--accent);
  flex-shrink: 0;
  height: 20px;
  width: 20px;
}

.join__contact {
  gap: 1.5rem;
  margin-top: 0.5rem;
  font-size: 0.9rem;
}

.quote__avatar {
  flex-shrink: 0;
  height: 48px;
  width: 48px;
  font-size: 1rem;
}

.quote__avatar img {
  border-radius: var(--r-full);
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.quote__name {
  display: block;
  font-size: 0.98rem;
}

.quote__role {
  font-size: 0.85rem;
}

.quote {
  margin: 0;
}

.post__hero {
  border-radius: var(--r-lg);
  margin: 0 0 2.5rem;
  overflow: hidden;
}

.post__excerpt,
.event__excerpt {
  font-size: 0.93rem;
}

.post__tags {
  margin-top: 2rem;
}

.person__photo {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-md);
  overflow: hidden;
}

.person__photo img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.person__name a {
  color: inherit;
  text-decoration: none;
}

.person__name a:hover {
  color: var(--accent);
}

.person__avatar--xl {
  font-size: 2rem;
  height: 120px;
  width: 120px;
}

.leader-hero {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3rem);
}

.leader-hero__photo {
  border-radius: var(--r-lg);
  flex-shrink: 0;
  overflow: hidden;
  width: min(220px, 40vw);
}

.event__facts--hero {
  margin-block: 1.5rem;
}

.event__title a {
  color: inherit;
  text-decoration: none;
}

.event__title a:hover {
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   Header and footer additions
   -------------------------------------------------------------------------- */

.brand__logo {
  height: auto;
  max-height: 48px;
  width: auto;
}

.footer__description {
  font-size: 0.93rem;
}

.footer__grid--brand-only {
  grid-template-columns: minmax(0, 1fr);
}

.footer__legal {
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer__legal li {
  display: inline;
}

/* The in-menu button is a mobile-drawer affordance; the header has its own. */
.nav__menu-cta {
  display: none;
}

@media (max-width: 1080px) {
  .nav__menu-cta {
    display: block;
  }
}

.form__note--admin {
  background: var(--amber-100);
  border-radius: var(--r-xs);
  color: var(--ink-700);
  margin-top: 1rem;
  padding: 0.7rem 0.9rem;
}

/* Sub-menus. The design has a single-level nav; this keeps depth 2 usable. */
.nav__menu .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 1081px) {
  .nav__menu li {
    position: relative;
  }

  .nav__menu .sub-menu {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-md);
    left: 0;
    min-width: 220px;
    opacity: 0;
    padding: 0.5rem;
    pointer-events: none;
    position: absolute;
    top: calc(100% + 0.5rem);
    transform: translateY(-4px);
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
    z-index: 60;
  }

  /*
   * Bridge the gap between the item and its panel.
   *
   * The panel is offset 0.5rem below the item, and that 0.5rem sits OUTSIDE the
   * <li>. Moving the pointer down towards a child crosses it, li:hover goes
   * false, and the panel vanishes mid-travel. It is worse on the diagonal: the
   * panel is 220px wide against a ~71px item, so aiming at a child on the right
   * leaves the item horizontally as well.
   *
   * This invisible strip spans the panel's full width and fills the gap. It is
   * part of the sub-menu, which is a descendant of the <li>, so the pointer
   * never leaves the item while crossing. It inherits pointer-events from the
   * panel, so it is inert until the panel is actually open — no stray hit area
   * sitting under the header the rest of the time.
   */
  .nav__menu .sub-menu::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    height: 0.5rem;
  }

  .nav__menu li:hover > .sub-menu,
  .nav__menu li:focus-within > .sub-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .nav__menu .sub-menu a {
    display: block;
    padding: 0.5rem 0.7rem;
    border-radius: var(--r-xs);
  }

  .nav__menu .sub-menu a:hover {
    background: var(--sand);
  }
}

/* ==========================================================================
   Past Events Gallery
   ========================================================================== */

.gallery__intro { margin-bottom: clamp(2rem, 4vw, 3rem); }
.gallery__tabs  { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }

/*
 * CSS columns rather than grid: the tiles are collages of wildly different
 * aspect ratios, and columns let each keep its own height without the row
 * alignment a grid would force. break-inside stops a tile splitting across
 * a column boundary.
 */
.gallery {
  column-count: 1;
  column-gap: clamp(0.9rem, 2vw, 1.5rem);
}

@media (min-width: 620px)  { .gallery { column-count: 2; } }
@media (min-width: 1040px) { .gallery { column-count: 3; } }

.gallery__item {
  break-inside: avoid;
  margin: 0 0 clamp(0.9rem, 2vw, 1.5rem);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}

.gallery__item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--line);
}

/* [hidden] has to win over the display the filter tabs toggle against. */
.gallery__item[hidden] { display: none !important; }

.gallery__open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  position: relative;
  line-height: 0;
}

.gallery__open:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.gallery__item img {
  width: 100%;
  height: auto;
  display: block;
}

.gallery__badge {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.55rem;
  border-radius: var(--r-full);
  background: rgba(8, 17, 29, 0.62);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1;
}

.gallery__badge svg { width: 13px; height: 13px; }

.gallery__caption {
  display: grid;
  gap: 0.2rem;
  padding: 0.85rem 1rem 1rem;
}

.gallery__title {
  color: var(--fg);
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  text-decoration: none;
}

.gallery__title:hover { color: var(--accent); }

.gallery__meta {
  color: var(--fg-muted);
  font-size: 0.83rem;
}

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

.spg-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  background: rgba(8, 17, 29, 0.94);
  backdrop-filter: blur(4px);
}

.spg-lightbox[hidden] { display: none; }

.spg-lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem clamp(1rem, 3vw, 2rem);
  color: #fff;
}

.spg-lightbox__title { font-size: 0.95rem; font-weight: 600; }
.spg-lightbox__count { color: rgba(255, 255, 255, 0.66); font-size: 0.85rem; }

.spg-lightbox__stage {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 0 clamp(0.5rem, 3vw, 3rem) clamp(1rem, 3vw, 2rem);
  min-height: 0;
}

.spg-lightbox__stage img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--r-sm);
}

.spg-lightbox__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s var(--ease);
}

.spg-lightbox__btn:hover { background: rgba(255, 255, 255, 0.18); }
.spg-lightbox__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.spg-lightbox__btn svg { width: 20px; height: 20px; }

.spg-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.spg-lightbox__nav--prev { left: clamp(0.5rem, 2vw, 1.5rem); }
.spg-lightbox__nav--next { right: clamp(0.5rem, 2vw, 1.5rem); }

/* Stop the page behind scrolling while the overlay is open. */
body.spg-lightbox-open { overflow: hidden; }

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

/* A quiet hand-off between the events archive and the past-events gallery. */
.events__past {
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  text-align: center;
}

.events__past-text {
  color: var(--fg-muted);
  margin: 0;
}

/*
 * Second-level items in the mobile drawer. Without this they render flat and a
 * child reads as a sibling of its parent — "Events" and "Upcoming Events"
 * sitting at the same level looks like a duplicate rather than a hierarchy.
 */
@media (max-width: 1080px) {
  .nav__menu .sub-menu {
    margin: 0;
    padding: 0;
  }

  .nav__menu .sub-menu a {
    padding-left: 1.5rem;
    font-size: 0.94rem;
    opacity: 0.78;
  }

  /* A short rule marking the items as belonging to the one above. */
  .nav__menu .sub-menu li {
    position: relative;
  }

  .nav__menu .sub-menu li::before {
    content: "";
    position: absolute;
    left: 0.35rem;
    top: 50%;
    width: 0.7rem;
    height: 1px;
    background: var(--line);
  }
}