/* ABOUTME: Visual design of the Joshua Catholic Men's Fellowship site. */
/* ABOUTME: Loaded automatically by Cassiopeia as the child template's user stylesheet. */

/* Design tokens */
:root {
  --jx-burg: #b8282f;
  --jx-burg-dk: #791b1f;
  --jx-burg-ink: #4a1013;
  --jx-gold: #febb18;
  --jx-gold-soft: #ffd77a;
  --jx-cream: #faf6ef;
  --jx-line: #e9dfcf;
  --jx-ink: #2a2224;
  --jx-muted: #6b5b55;
  --jx-on-gold: #3a1a0c;
  --jx-font-body: "Source Serif 4", Georgia, serif;
  --jx-font-head: "Cormorant Garamond", Georgia, serif;
  --jx-font-label: system-ui, -apple-system, "Segoe UI", sans-serif;
  --jx-reading: 46rem;

  --cassiopeia-color-primary: var(--jx-burg-dk);
  --cassiopeia-color-link: var(--jx-burg);
  --cassiopeia-color-hover: var(--jx-burg-dk);
  --link-color: var(--jx-burg);
  --link-hover-color: var(--jx-burg-dk);
  --template-bg-light: var(--jx-cream);
  --template-text-dark: var(--jx-ink);
  --template-special-color: var(--jx-burg-dk);
  --body-bg: var(--jx-cream);
  --body-color: var(--jx-ink);
}

/* Self-hosted fonts (Latin subset). 'block' holds text briefly until the font arrives, so readers never see a fallback font swap. */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 500;
  font-display: block;
  src: url("../fonts/cormorant-garamond-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500 600;
  font-display: block;
  src: url("../fonts/cormorant-garamond.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/source-serif-4-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 600;
  font-display: block;
  src: url("../fonts/source-serif-4.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Base typography */
body.site {
  background: var(--jx-cream);
  color: var(--jx-ink);
  font-family: var(--jx-font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
}

body.site h1,
body.site h2,
body.site h3,
body.site h4 {
  font-family: var(--jx-font-head);
  font-weight: 600;
  line-height: 1.15;
  color: var(--jx-burg-ink);
}

body.site a {
  color: var(--jx-burg);
  text-underline-offset: 0.15em;
}

body.site a:hover,
body.site a:focus {
  color: var(--jx-burg-dk);
}

body.site :focus-visible,
body.site .metismenu.mod-menu .metismenu-item > :is(a, button):focus-visible {
  outline: 3px solid var(--jx-gold);
  outline-offset: 2px;
}

/* A mouse click leaves no outline; keyboard focus keeps the gold one above */
body.site :focus:not(:focus-visible),
body.site .metismenu.mod-menu .metismenu-item > :is(a, button):focus:not(:focus-visible) {
  outline: none;
}

/* Shared components */
.jx-eyebrow {
  font-family: var(--jx-font-label);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--jx-burg);
  margin: 0 0 0.5rem;
}

.jx-section-title {
  font-size: clamp(1.9rem, 1.5rem + 1.5vw, 2.4rem);
  margin: 0 0 1.75rem;
}

body.site .jx-btn {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  font-family: var(--jx-font-label);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  line-height: 1.2;
}

body.site .jx-btn--gold {
  background: var(--jx-gold);
  color: var(--jx-on-gold);
}

body.site .jx-btn--gold:hover,
body.site .jx-btn--gold:focus {
  background: #ffc93f;
  color: var(--jx-on-gold);
}

/* Full-width bands inside Cassiopeia's grid */
.site-grid {
  row-gap: 0;
}

.site-grid > .container-top-a,
.site-grid > .container-bottom-a,
.site-grid > .container-bottom-b {
  grid-column: full-start / full-end;
  padding: 0;
  margin: 0;
}

/* Sections meet edge to edge; Cassiopeia's gap above the content is not used */
body.site main {
  margin-top: 0;
}

/* Content images never overflow */
body.site main img {
  max-width: 100%;
  height: auto;
}

/* Header */
body.site .container-header {
  background: var(--jx-cream);
  background-image: none;
  color: var(--jx-ink);
  border-bottom: 1px solid var(--jx-line);
  box-shadow: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 1.5rem;
  padding: 0.6rem max(1rem, calc((100% - 80rem) / 2));
  z-index: 1020;
}

body.site .container-header > .grid-child {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

body.site .container-header .navbar-brand {
  margin: 0;
  padding: 0;
}

/* The gold logo sits on a burgundy tile so it stands out on the cream header */
body.site .container-header .brand-logo img {
  display: block;
  box-sizing: border-box;
  height: 52px;
  width: auto;
  padding: 6px 10px;
  background: var(--jx-burg-dk);
  border-radius: 6px;
}

body.site .container-header .container-nav {
  flex: 0 1 auto;
}

/* Cassiopeia's top margin on the menu pushes it below the logo's centre */
body.site .container-header .container-nav nav {
  margin-top: 0;
}

/* Menu items */
body.site .container-header .metismenu > li.level-1 > :is(a, button, span) {
  color: var(--jx-ink);
  font-family: var(--jx-font-body);
  font-size: 0.95rem;
  padding: 0.4rem 0;
  margin: 0 0.6rem;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  text-decoration: none;
}

body.site .container-header .metismenu > li.level-1 > :is(a, button):hover {
  color: var(--jx-burg-dk);
}

body.site .container-header .metismenu > li.level-1.current > a,
body.site .container-header .metismenu > li.level-1.active > :is(a, button) {
  color: var(--jx-burg-dk);
  border-bottom-color: var(--jx-gold);
}

/* The links carry their own side margin, so Cassiopeia's item padding would double the gaps */
@media (min-width: 992px) {
  body.site .container-header .metismenu > li.level-1 {
    padding-left: 0.4rem;
    padding-right: 0.4rem;
  }
}

/* Media dropdown panel. The open and close animation only shrinks height, so the outline
   and gold top line are shadows and the inner spacing sits on the first and last links. */
body.site .container-header .metismenu > li.level-1 > ul:is(.mm-collapse, .mm-collapsing) {
  background: #fff;
  border: 0;
  border-radius: 6px;
  box-shadow:
    inset 0 3px 0 var(--jx-gold),
    0 0 0 1px var(--jx-line),
    0 12px 28px -12px rgba(74, 16, 19, 0.35);
  padding: 0;
  min-width: 11rem;
}

body.site .container-header .metismenu > li.level-1 > ul:is(.mm-collapse, .mm-collapsing) > li:first-child > a {
  margin-top: calc(0.4rem + 3px);
}

body.site .container-header .metismenu > li.level-1 > ul:is(.mm-collapse, .mm-collapsing) > li:last-child > a {
  margin-bottom: 0.4rem;
}

/* Each dropdown link fills its whole row, at the same size as the top-level links */
body.site .container-header .metismenu > li.level-1 > ul:is(.mm-collapse, .mm-collapsing) > li {
  display: block;
  padding: 0;
}

body.site .container-header .metismenu > li.level-1 > ul:is(.mm-collapse, .mm-collapsing) a {
  color: var(--jx-ink);
  font-size: 0.95rem;
  padding: 0.5rem 1.1rem;
  display: block;
  width: 100%;
  text-decoration: none;
}

body.site .container-header .metismenu > li.level-1 > ul:is(.mm-collapse, .mm-collapsing) a:hover,
body.site .container-header .metismenu > li.level-1 > ul:is(.mm-collapse, .mm-collapsing) a:focus {
  background: var(--jx-cream);
  box-shadow: inset 3px 0 0 var(--jx-gold);
  color: var(--jx-burg-dk);
  text-decoration: none;
}

/* Hamburger */
body.site .container-header .navbar-toggler {
  color: var(--jx-burg-dk);
  border: 1px solid var(--jx-line);
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
}

@media (max-width: 991.98px) {
  body.site .container-header {
    position: sticky;
  }

  /* Bootstrap makes .navbar the positioning box; the drawer must hang from the header instead */
  body.site .container-header .navbar,
  body.site .container-header .container-nav {
    position: static;
  }

  body.site .container-header .navbar-collapse {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--jx-cream);
    /* The open and close animation only shrinks height, so the bottom line is a shadow
       and the top and bottom spacing sits on the menu inside */
    border: 0;
    box-shadow: 0 1px 0 var(--jx-line);
    padding: 0 1rem;
  }

  body.site .container-header .navbar-collapse .metismenu {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0.5rem 0 1rem;
  }

  body.site .container-header .navbar-collapse .metismenu > li.level-1 {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  body.site .container-header .metismenu > li.level-1 > :is(a, button, span) {
    display: block;
    width: 100%;
    text-align: left;
    margin: 0;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--jx-line);
  }

  /* The Media toggle keeps its arrow centred on the label, at the far right of the row */
  body.site .container-header .metismenu > li.level-1 > button {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  body.site .container-header .metismenu > li.level-1 > ul:is(.mm-collapse, .mm-collapsing) {
    position: static;
    border: 0;
    box-shadow: none;
    background: transparent;
    /* No top or bottom padding: the open and close animation can only shrink height, so padding would jump */
    padding: 0 0 0 1rem;
    /* Cassiopeia's negative right margin would push the submenu past the drawer */
    margin: 0;
  }
}

/* Banner position: hero and page banners share the burgundy photo treatment */
body.site .container-banner .mod-custom {
  position: relative;
  background-size: cover;
  background-position: center 35%;
  background-color: var(--jx-burg-dk);
  color: #fff;
}

body.site .container-banner .mod-custom::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(74, 16, 19, 0.94) 0%, rgba(121, 27, 31, 0.78) 45%, rgba(121, 27, 31, 0.3) 100%);
}

body.site .container-banner .mod-custom > * {
  position: relative;
}

/* Home hero */
/* Full width, with side padding that lines the text up with the header's logo */
.jx-hero {
  padding: clamp(3.5rem, 8vw, 5.5rem) max(1rem, calc((100% - 80rem) / 2)) clamp(3.5rem, 9vw, 6rem);
}

body.site .jx-hero__title {
  color: #fff;
  font-size: clamp(2.6rem, 1.8rem + 3.5vw, 3.8rem);
  max-width: 36rem;
  margin: 0 0 0.75rem;
}

.jx-hero__verse {
  font-family: var(--jx-font-head);
  font-style: italic;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.45rem);
  line-height: 1.35;
  color: var(--jx-gold-soft);
  max-width: 36rem;
  margin: 0 0 1.25rem;
}

.jx-hero__intro {
  font-size: 1.1rem;
  max-width: 32rem;
  margin: 0 0 1.75rem;
}

.jx-hero__actions {
  margin: 0;
}

/* Home: Who we are, photo beside text from 992px */
.page-home .com-content-article__body {
  padding: clamp(3rem, 6vw, 4.5rem) 0;
}

.page-home .com-content-article__body h2 {
  font-size: clamp(2rem, 1.6rem + 1.5vw, 2.4rem);
  margin: 0 0 1rem;
}

.page-home .com-content-article__body p {
  font-size: 1.1rem;
}

.page-home .com-content-article__body p:has(> img) {
  margin: 1.5rem 0 0;
}

.page-home .com-content-article__body img {
  display: block;
  width: 100%;
  border-radius: 6px;
  box-shadow: 0 18px 40px -18px rgba(74, 16, 19, 0.45);
}

@media (min-width: 992px) {
  .page-home .com-content-article__body {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    column-gap: 3rem;
    align-items: start;
  }

  .page-home .com-content-article__body > :not(p:has(> img)) {
    grid-column: 1;
  }

  .page-home .com-content-article__body > p:has(> img) {
    grid-column: 2;
    grid-row: 1 / span 6;
    align-self: center;
    margin: 0;
  }
}

/* Home: member tiles */
.jx-members {
  background: #fff;
  border-top: 1px solid var(--jx-line);
  padding: clamp(3rem, 6vw, 4rem) max(1rem, calc((100% - 80rem) / 2));
}

/* The tiles section runs straight into the Joshua 24:15 band, so Cassiopeia's module margin would leave a strip */
body.site .mod-custom:has(> .jx-members) {
  margin: 0;
}

.jx-tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.9rem;
}

body.site .jx-tiles a {
  display: block;
  height: 100%;
  background: var(--jx-cream);
  border: 1px solid var(--jx-line);
  border-top: 3px solid var(--jx-gold);
  border-radius: 6px;
  padding: 1.1rem 1rem;
  font-family: var(--jx-font-head);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--jx-burg-dk);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

body.site .jx-tiles a:hover,
body.site .jx-tiles a:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -14px rgba(74, 16, 19, 0.5);
}

.jx-tiles__icon {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--jx-burg);
  color: #fff;
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
}

@media (max-width: 991.98px) {
  .jx-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .jx-tiles {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.site .jx-tiles a {
    transition: none;
  }
}

/* Scripture bands (modules 109 and 110, in the top-a and bottom-b positions) */
.jx-verse {
  text-align: center;
  padding: clamp(2.5rem, 5vw, 3rem) 1rem;
  background: #fff;
  border-bottom: 1px solid var(--jx-line);
}

/* Bands run edge to edge, so Cassiopeia's module margins would leave strips of page showing */
body.site .jx-verse {
  margin: 0;
}

/* On Home the Joshua 1:9 band follows straight on from the hero */
body.site.page-home .container-banner {
  margin-bottom: 0;
}

.jx-verse p {
  max-width: 46rem;
  margin: 0 auto 0.6rem;
}

.jx-verse span,
.jx-verse em {
  font-size: inherit !important;
}

.jx-verse p:first-child {
  font-family: var(--jx-font-head);
  font-style: italic;
  font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.7rem);
  line-height: 1.35;
  color: var(--jx-burg-dk);
}

.jx-verse p:last-child {
  font-family: var(--jx-font-label);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--jx-burg);
  margin-bottom: 0;
}

.jx-verse--dark {
  background: var(--jx-burg-dk);
  border-bottom: 0;
}

.jx-verse--dark p:first-child {
  color: var(--jx-gold-soft);
}

.jx-verse--dark p:last-child {
  color: #fff;
}

/* Footer */
body.site .container-footer {
  background: var(--jx-burg-ink);
  background-image: none;
  color: #e9d6d4;
  margin-top: 0;
  padding: 2.5rem 0 1.5rem;
}

body.site .container-footer > .grid-child {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1rem;
  display: block;
}

.jx-footer {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 1.75rem;
}

.jx-footer__logo {
  display: inline-block;
}

.jx-footer__logo img {
  display: block;
  height: 40px;
  width: auto;
}

.jx-footer__brand p {
  margin: 0.75rem 0 0;
}

body.site .jx-footer__col h2 {
  font-family: var(--jx-font-label);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--jx-gold-soft);
  margin: 0 0 0.6rem;
}

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

body.site .jx-footer__col a {
  color: #e9d6d4;
  line-height: 1.9;
  text-decoration: none;
}

body.site .jx-footer__col a:hover,
body.site .jx-footer__col a:focus {
  color: #fff;
  text-decoration: underline;
}

body.site .container-footer .mod-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin-top: 1.5rem;
  padding-top: 1rem;
  font-size: 0.8rem;
  color: #d9c3c1;
}

body.site .container-footer .mod-footer .footer2 {
  display: none;
}

/* Developer credit under the copyright line */
.jx-footer__credit {
  margin: 0.25rem 0 0;
  font-size: 0.8rem;
  color: #d9c3c1;
}

body.site .jx-footer__credit a {
  color: #fff;
}

@media (max-width: 767.98px) {
  .jx-footer {
    grid-template-columns: 1fr 1fr;
  }

  .jx-footer__brand {
    grid-column: 1 / -1;
  }
}

/* Inner pages: title band */
body.site .container-component {
  padding-top: 0;
}

body.site .com-content-article > .page-header:first-of-type {
  background: var(--jx-burg-dk);
  color: #fff;
  box-shadow: 0 0 0 100vmax var(--jx-burg-dk);
  clip-path: inset(0 -100vmax);
  padding: clamp(2rem, 5vw, 2.75rem) 0;
  margin: 0 0 2.5rem;
}

body.site .com-content-article > .page-header:first-of-type :is(h1, h2) {
  color: #fff;
  font-size: clamp(2.2rem, 1.8rem + 2vw, 2.8rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
}

/* A page with a photo banner already shows its title there */
body.site:has(.container-banner .mod-custom) .com-content-article > .page-header {
  display: none;
}

/* Banner modules on inner pages (History, Photos) */
body.site .container-banner .mod-custom:not(:has(.jx-hero)) {
  padding: clamp(2.5rem, 7vw, 4rem) max(1rem, calc((100% - 80rem) / 2));
}

body.site .container-banner .mod-custom:not(:has(.jx-hero)) h1 {
  color: #fff;
  font-size: clamp(2.2rem, 1.8rem + 2vw, 2.8rem);
  letter-spacing: 0.06em;
  margin: 0;
}

/* Reading column for article pages, except home and articles with a Contents panel */
body.site:not(.page-home) .com-content-article__body:not(.jx-has-contents) {
  max-width: var(--jx-reading);
  margin: 0 auto;
}

body.site .com-content-article__body h2 {
  font-size: 1.75rem;
  margin: 2rem 0 0.75rem;
}

body.site .com-content-article__body h3 {
  font-size: 1.35rem;
  color: var(--jx-burg-dk);
  margin: 1.5rem 0 0.5rem;
}

/* One spacing system for every inner page: the same space after the banner and before the footer */
body.site:not(.page-home) .container-banner {
  margin-bottom: 3rem;
}

body.site:not(.page-home) main {
  padding-bottom: 4rem;
}

body.site .com-content-article__body > :first-child,
body.site .com-content-article__body .jx-contents__document > :first-child {
  margin-top: 0;
}

body.site .com-content-article__body > :last-child,
body.site .com-content-article__body .jx-contents__document > :last-child {
  margin-bottom: 0;
}

/* Font sizes typed in the editor give way to the template's sizes */
body.site .com-content-article__body [style*="font-size"] {
  font-size: inherit !important;
}

body.site .com-content-article__body li::marker {
  color: var(--jx-burg);
}

/* Tables (Music, Resources) */
body.site .com-content-article__body table {
  width: 100% !important;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--jx-line);
  border-radius: 6px;
  font-size: 0.95rem;
}

/* On phones a wide table scrolls inside itself instead of the page */
@media (max-width: 767.98px) {
  body.site .com-content-article__body table {
    display: block;
    overflow-x: auto;
  }

  /* Tables whose cells carry their column headings stack each row into a labelled card */
  /* The editor saved fixed row heights, which would clip the stacked cells */
  body.site .com-content-article__body table:has(td[data-label]) :is(tbody, tr) {
    display: block;
    width: 100%;
    height: auto !important;
  }

  body.site .com-content-article__body table:has(td[data-label]) thead {
    display: none;
  }

  body.site .com-content-article__body table:has(td[data-label]) tr + tr {
    border-top: 1px solid var(--jx-line);
  }

  /* The card's spacing sits inside its first and last cells, so the cells' background fills the whole card */
  body.site .com-content-article__body table:has(td[data-label]) tr {
    padding: 0;
  }

  body.site .com-content-article__body table:has(td[data-label]) td[data-label]:first-child {
    padding-top: 0.75rem;
  }

  body.site .com-content-article__body table:has(td[data-label]) td[data-label]:last-child {
    padding-bottom: 0.75rem;
  }

  body.site .com-content-article__body td[data-label] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 0;
    padding: 0.35rem 0.9rem;
    text-align: right !important;
  }

  body.site .com-content-article__body td[data-label]::before {
    content: attr(data-label);
    flex: none;
    font-family: var(--jx-font-label);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--jx-muted);
    text-align: left;
  }

  body.site .com-content-article__body td[data-label] audio {
    min-width: 0;
    flex: 1 1 auto;
  }
}

body.site .com-content-article__body :is(th, td) {
  border: 0;
  border-top: 1px solid var(--jx-line);
  padding: 0.6rem 0.9rem;
  vertical-align: middle;
}

body.site .com-content-article__body th {
  border-top: 0;
  background: #f4ede1;
  font-family: var(--jx-font-label);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jx-muted);
  text-align: left;
}

body.site .com-content-article__body tr:hover td {
  background: #fdf9f2;
}

body.site .com-content-article__body audio {
  display: block;
  width: 100%;
  min-width: 12rem;
  max-width: 22rem;
  height: 2.25rem;
}

body.site .com-content-article__body td a,
body.site .com-content-article__body a[download] {
  display: inline-block;
  border: 1px solid var(--jx-burg);
  border-radius: 999px;
  padding: 0.2rem 0.8rem;
  font-family: var(--jx-font-label);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

body.site .com-content-article__body td a:hover,
body.site .com-content-article__body a[download]:hover {
  background: var(--jx-burg);
  color: #fff;
}

/* Videos widget and other embeds use the full reading width */
body.site .com-content-article__body iframe {
  max-width: 100%;
}

/* Photos gallery: event names as pill buttons. The gallery's own styles and inline padding are overridden. */
body.site [class^="os-gallery-tabs-main"] .osgalery-cat-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0 !important;
}

body.site [class^="os-gallery-tabs-main"] .osgalery-cat-tabs li {
  flex: none;
  margin: 0;
}

/* The gallery sets a tall line height, so the text is centred with flexbox and a tight line height */
body.site [class^="os-gallery-tabs-main"] .osgalery-cat-tabs li a {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--jx-line);
  border-radius: 999px;
  padding: 0.4rem 0.95rem;
  background: #fff;
  color: var(--jx-burg-dk);
  font-family: var(--jx-font-label);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
  /* The gallery stretches each link to its list item's full height */
  height: auto;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

body.site [class^="os-gallery-tabs-main"] .osgalery-cat-tabs li a:hover,
body.site [class^="os-gallery-tabs-main"] .osgalery-cat-tabs li a:focus {
  background: var(--jx-cream);
  border-color: var(--jx-burg);
}

body.site [class^="os-gallery-tabs-main"] .osgalery-cat-tabs li a.active {
  background: var(--jx-burg-dk);
  border-color: var(--jx-burg-dk);
  color: #fff;
}

/* Photos gallery: an even grid. The gallery script sets each photo's width and margin inline. */
body.site [class^="os-gallery-tabs-main"] .os-cat-tab-images > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

body.site [class^="os-gallery-tabs-main"] .os-cat-tab-images .img-block {
  float: none;
  width: auto !important;
  margin: 0 !important;
  border-radius: 6px;
  overflow: hidden;
}

body.site [class^="os-gallery-tabs-main"] .os-cat-tab-images .img-block img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 6px;
  transition: transform 0.3s ease;
}

body.site [class^="os-gallery-tabs-main"] .os-cat-tab-images .img-block a:hover img,
body.site [class^="os-gallery-tabs-main"] .os-cat-tab-images .img-block a:focus img {
  transform: scale(1.04);
}

/* The gallery puts its loading panel above the event pills; show the pills first and keep the panel small */
body.site [class^="os-gallery-tabs-main"] {
  display: flex;
  flex-direction: column;
}

body.site [class^="os-gallery-tabs-main"] > .osgalery-cat-tabs {
  order: -1;
}

/* The panel only carries the img-block1 class while photos are loading */
body.site [id^="os_progres_img"]:not(.img-block1) {
  display: none;
}

body.site [id^="os_progres_img"].img-block1 {
  position: relative;
  height: 8rem !important;
  background: none !important;
}

body.site [id^="os_progres_img"].img-block1::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2rem;
  height: 2rem;
  margin: -1rem 0 0 -1rem;
  border: 3px solid var(--jx-line);
  border-top-color: var(--jx-burg);
  border-radius: 50%;
  animation: jx-spin 0.8s linear infinite;
}

@keyframes jx-spin {
  to {
    transform: rotate(360deg);
  }
}

/* On phones the event pills sit in one row that swipes sideways, and the photos form two columns */
@media (max-width: 767.98px) {
  body.site [class^="os-gallery-tabs-main"] .osgalery-cat-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    /* A soft fade at the right edge shows the row swipes; the end padding lets the last pill clear it */
    padding-right: 2.5rem !important;
    mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
  }

  body.site [class^="os-gallery-tabs-main"] .os-cat-tab-images > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
  }
}

/* Contents panel for long articles */
.jx-contents {
  font-size: 0.9rem;
  margin: 0 0 2rem;
  background: #fff;
  border: 1px solid var(--jx-line);
  border-radius: 6px;
  padding: 0.75rem 1rem;
}

.jx-contents summary {
  font-family: var(--jx-font-label);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--jx-burg);
  cursor: pointer;
}

.jx-contents ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.jx-contents__sections {
  margin-top: 0.75rem !important;
}

.jx-contents__sections > li {
  border-left: 2px solid var(--jx-line);
  padding-left: 0.75rem;
}

.jx-contents__clauses {
  display: none;
  padding: 0.15rem 0 0.4rem 0.6rem !important;
  font-size: 0.85rem;
}

.jx-contents__sections > li.is-active > .jx-contents__clauses {
  display: block;
}

body.site a.jx-contents__link {
  display: block;
  color: var(--jx-muted);
  text-decoration: none;
  line-height: 1.5;
  padding: 0.2rem 0;
}

body.site a.jx-contents__link:hover {
  color: var(--jx-burg-dk);
}

body.site a.jx-contents__link[aria-current="true"] {
  color: var(--jx-burg-dk);
  font-weight: 600;
}

.jx-contents__sections > li.is-active {
  border-left-color: var(--jx-gold);
}

.com-content-article__body.jx-has-contents :is(h2, h3) {
  scroll-margin-top: 6.5rem;
}

@media (min-width: 992px) {
  body.site .com-content-article__body.jx-has-contents {
    display: grid;
    grid-template-columns: 16rem minmax(0, 46rem);
    justify-content: center;
    column-gap: 3rem;
    align-items: start;
  }

  .jx-has-contents > .jx-contents {
    position: sticky;
    top: 6rem;
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
    background: transparent;
    border: 0;
    padding: 0;
  }

  .jx-has-contents > .jx-contents summary {
    pointer-events: none;
    list-style: none;
  }
}

@media (max-width: 991.98px) {
  body.site .com-content-article__body.jx-has-contents {
    max-width: var(--jx-reading);
    margin: 0 auto;
  }
}