/* ============================================================
   CONTENT.CSS
   Batten University — Content Page Styles

   Covers interior/sidemenu page layouts, prose typography,
   side navigation, asides, events calendar, and related
   content components.

   Contents:
      1.  Font Faces
      2.  Page Layout
      3.  Breadcrumbs (content pages)
      4.  Mobile Section Menu Toggle
      5.  Side Menu
      6.  Side Contact Info
      7.  Content Info Strip
      8.  Print Styles
      9.  Content Area Base
     10.  Paragraphs & Basic Text
     11.  Headings
     12.  Links
     13.  Lists
     14.  Blockquote
     15.  Images & Floats
     16.  Tables
     17.  Content Aside (Base + Variants)
     18.  Action List
     19.  Dates Aside
     20.  FAQ
     21.  Events Calendar
     22.  Event Details
     23.  Content Aside — Related Links
     24.  Reduced Motion

   NEW TOKENS (add to global.css :root):

   Palette:
     --color-content-border:  #e5edf3   blue-gray border, tables/asides/blockquote
     --color-inner-border:    #dce8f0   info strip column divider
     --color-form-border:     #c5d4e0   form inputs, empty state dashed border

   Semantic text:
     --text-content:   #444444   content body copy (slightly softer than --text-body)
     --text-meta:      #4b5463   metadata, descriptions, secondary content text
     --text-subtle:    #64727d   timestamps, counts, tertiary info
     --text-subdued:   #687482   h4 headings, muted heading color

   Surface:
     --surface-aside:  rgb(248, 250, 252)   content aside base background
     --surface-card:   #FBFCFE              event card near-white background
     --surface-row:    #f6f8fa              table odd row, near-neutral stripe
============================================================ */


/* ============================================================
   1. FONT FACES
============================================================ */

@font-face {
  font-display: swap;
  font-family: 'Playfair';
  font-style: normal;
  font-weight: 700;
  src: url('/assets/css/fonts/playfair-v10-latin-700.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 700;
  src: url('/assets/css/fonts/merriweather-v33-latin-700.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Lora';
  font-style: normal;
  font-weight: 700;
  src: url('/assets/css/fonts/lora-v37-latin-700.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 700;
  src: url('/assets/css/fonts/libre-baskerville-v24-latin-700.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Noto Serif Georgian';
  font-style: normal;
  font-weight: 700;
  src: url('/assets/css/fonts/noto-serif-georgian-v29-latin-700.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Gelasio';
  font-style: normal;
  font-weight: 700;
  src: url('/assets/css/fonts/gelasio-v14-latin-700.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Gelasio';
  font-style: normal;
  font-weight: 600;
  src: url('/assets/css/fonts/gelasio-v14-latin-600.woff2') format('woff2');
}


/* ============================================================
   2. PAGE LAYOUT
============================================================ */

.page-layout {
  padding: 2rem 0;
}
.page-layout--full {
	padding: 0;
	background: var(--color-blue-5);
}
.page-layout--with-sidemenu {
	padding: 3rem 0;
}
.page-layout--without-sidemenu .row {
  justify-content: center;
}


/* ============================================================
   3. BREADCRUMBS (content pages)
============================================================ */

.breadcrumbs {
  background-color: var(--color-navy-700);
  padding: .3rem 0;
}

/*@media (min-width: 768px) {
  .breadcrumbs {
    margin-bottom: 4rem;
  }
}*/

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb-item {
  font-size: .8rem;
  margin: 0;
  line-height: 1.2;
}

.breadcrumb-item > a {
  display: inline-flex;
  align-items: center;
  padding: .35rem .5rem;
  color: var(--color-white);
  text-decoration: none;
  font-weight: 400;
}

.breadcrumb-item > a:hover,
.breadcrumb-item > a:focus-visible {
  text-decoration: underline;
}

.breadcrumb-item.active {
  display: inline-flex;
  align-items: center;
  padding: .4rem .25rem;
  color: var(--color-white);
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  color: rgba(255, 255, 255, .7);
  margin: 0 .25rem;
}


/* ============================================================
   4. MOBILE SECTION MENU TOGGLE
============================================================ */

.subnavcontrol {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 1rem 0 0;
  padding: 1rem 0.75rem 1rem 1rem;
  font-size: 1.25rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--color-white);
  background-color: var(--color-navy-700);
  border: 1px solid #ebebeb;
  border-bottom: 0;
}

.subnavcontrol.collapsed {
  color: var(--color-navy-700);
  background-color: var(--color-white);
  border: 1px solid #ebebeb;
}

.subnavcontrol .icon {
  font-size: 1.1em;
  color: currentColor;
  transition: transform 0.2s ease;
}

.subnavcontrol:not(.collapsed) .icon {
  transform: rotate(90deg);
}

@media (min-width: 992px) {
  .subnavcontrol {
    display: none;
  }
}


/* ============================================================
   5. SIDE MENU
============================================================ */

.sidemenu {
  background-color: var(--color-white);
  max-width: 95%;
  padding-right: 1rem;
}

/* Section title (top item) */
.sidemenu .nav-link.menu-section {
  display: block;
  text-decoration: none;
  transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out;
  padding: 1rem .5rem .25rem .25rem;
  margin: 0;
  letter-spacing: 0.05em;
  font-family: Anton, sans-serif;
  font-size: 1.75rem;
  color: var(--color-navy-700);
  font-weight: 500;
}

.sidemenu .menu-sub-section.nav-link {
  font-weight: 500;
  font-family: Anton, sans-serif;
  font-size: 1.4rem;
  padding: 1rem 0.75rem;
}

.sidemenu .menu-sub-section.active {
  background-color: var(--color-gray-25);
  border-left: 5px solid var(--color-navy-700);
}

.sidemenu .nav-item + .nav-item {
  margin-top: 0.25rem;
}

/* Side menu links */
.sidemenu .nav-link {
  display: block;
  text-decoration: none;
  transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out;
  padding: 1.5rem 0.8rem 0.75rem 0.75rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-meta);
  border-bottom: 1px solid #e7e7e7;
  border-radius: 0;
  position: relative;
}

.section-nav a:hover,
.section-nav .active {
  color: var(--color-navy-700);
}

.sidemenu .nav-link:hover,
.sidemenu .nav-link:active {
  color: var(--color-teal-600);
}

/* Nested nav links */
.sidemenu ul ul .nav-link {
  padding-left: calc(1.5rem + 1rem);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text-content);
}

.sidemenu ul {
  list-style-type: none;
  padding: 0;
  background-color: var(--color-white);
}

.sidemenu ul .nav-link {
  margin: 0 0 0 1rem;
  padding: .8rem .5rem .8rem 1rem;
  font-size: 1.1rem;
  font-weight: 500;
  border-left: 3px solid #f1f1f1;
  border-bottom: none;
  color: var(--text-meta);
}

/* Submenu toggle */
.sidemenu .nav-link.has-submenu {
  position: relative;
  padding-right: 2.25rem;
}

.sidemenu ul .nav-link {
  margin: 0 0 0 1rem;
  padding: .7rem .5rem .7rem 1rem;
  font-size: 1.05rem;
  font-weight: 500;
  border-left: 3px solid #f1f1f1;
  border-bottom: none;
  color: var(--text-meta);
}

.sidemenu .nav-link.has-submenu:not(.collapsed) {
  border: none;
  font-weight: 700;
}

/* Chevron */
.sidemenu .nav-link.has-submenu::after {
  content: "";
  position: absolute;
  right: .75rem;
  top: 60%;
  width: .6rem;
  height: .6rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-50%) rotate(-45deg);
  transition: transform .25s ease;
}

.sidemenu .nav-link.has-submenu:not(.collapsed)::after {
  transform: translateY(-50%) rotate(45deg);
}

.sidemenu ul .nav-link:active,
.sidemenu ul .nav-link:focus,
.sidemenu ul .nav-link:hover {
  color: var(--color-teal-600);
  border-left: 3px solid var(--color-teal-600);
}


/* ============================================================
   6. SIDE CONTACT INFO
============================================================ */

.side-contact-info {
  border-top: 8px solid var(--color-navy-700);
  border-bottom: 2px solid var(--color-navy-700);
  padding: 1rem 1rem 1.25rem;
  margin: 1.5rem 0;
  background-color: #f9fbfd;
  color: var(--color-navy-800);
  font-size: 0.95rem;
  line-height: 1.3;
  max-width: 90%;
}

.side-contact-title {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-navy-700);
}

.side-contact-address {
  font-style: normal;
  margin-bottom: 0.75rem;
}

.side-contact-address span {
  display: block;
}

.side-contact-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.75rem;
}

.side-contact-list li + li {
  margin-top: 0.35rem;
}

.side-contact-info a {
  color: var(--color-navy-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.side-contact-info a:hover,
.side-contact-info a:focus-visible {
  color: var(--color-teal-700);
  text-decoration: none;
}

.side-contact-phone a {
  font-weight: 600;
  text-decoration: none;
}

.side-contact-hours {
  font-size: 0.85rem;
  color: var(--text-meta);
  margin: 0;
}


/* ============================================================
   7. CONTENT INFO STRIP
   Reusable inline info block — 2 or 3 column grid.
   Drop in anywhere, use mt-* for spacing per page.
============================================================ */

.content-info-strip {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--color-blue-5);
  border-left: 4px solid var(--color-navy-700);
  border-radius: 2px;
  padding: 1.25rem 1.5rem;
  color: var(--color-navy-700);
}

.content-info-strip p,
.content-info-strip address {
  margin: 0;
}

@media (min-width: 768px) {
  .content-info-strip {
    grid-template-columns: repeat(3, 1fr);
  }

  .content-info-strip strong {
    font-weight: 600;
  }

  .content-info-strip--two-col {
    grid-template-columns: repeat(2, 1fr);
  }

  .content-info-strip-col + .content-info-strip-col {
    border-left: 1px solid var(--color-inner-border);
    padding-left: 1.5rem;
    margin-left: 1.5rem;
  }
}

.content-info-strip-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--color-navy-700);
  margin: 0 0 .5rem;
}

.content-info-strip-col + .content-info-strip-col .content-info-strip-label {
  margin-top: 2rem;
}

@media (min-width: 768px) {
  .content-info-strip-col + .content-info-strip-col .content-info-strip-label {
    margin-top: 0;
  }
}

.content-info-strip-col p,
.content-info-strip-col address {
  font-size: .95rem;
  margin: .5rem 0 0;
  font-style: normal;
  line-height: 1.6;
}

.content-info-strip-col p + p {
  margin-top: .5rem;
}

.content-info-strip-col a {
  color: var(--color-navy-700);
  text-decoration: underline;
  font-weight: 500;
}

.content-info-strip-col a:hover,
.content-info-strip-col a:focus-visible {
  color: var(--color-teal-500);
  text-decoration: none;
}


/* ============================================================
   8. PRINT STYLES
============================================================ */

@media print {
  nav, .breadcrumbs, .side-menu-wrapper {
    display: none !important;
  }

  .content-body {
    max-width: 100%;
  }

  a::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }
}


/* ============================================================
   9. CONTENT AREA BASE
============================================================ */

.content-area {
  color: var(--text-content);
  line-height: 1.6;
}
.content-area--shadow {
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07);
	padding: 1rem 2rem;
	background: var(--color-white);
}
@media (min-width: 992px) {

}

.content-body > * + * {
  margin-top: 1rem;
}

.content-body > *:last-child {
  margin-bottom: 0;
}


/* ============================================================
   10. PARAGRAPHS & BASIC TEXT
============================================================ */

.content-body p {
  margin: 0 0 1.5rem;
}

.content-body strong {
  font-weight: 600;
  color: var(--color-navy-700);
}


/* ============================================================
   11. HEADINGS
============================================================ */

/* Body title — sidemenu pages with no hero */
.body-title {
    /*font-family: "Lora", serif;
  font-family: "Merriweather", serif;
  
  font-family: Georgia, "Times New Roman", Times, serif;*/
  /*font-family: "Libre Baskerville", serif;
  font-family: "Noto Serif Georgian", serif;
  font-family: "Gelasio", serif;*/
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: clamp(2rem, 8vw, 3rem);
  color: var(--color-navy-700);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -1px;
  margin: 0 0 1.5rem;
  padding: 0 0 .25rem;
  word-break: break-word;
  border-bottom: 2px solid #F0F0F0;
}

.content-body-h2,
.content-body-h3,
.content-body-h4,
.content-body-h5,
.content-body-h6 {
  font-family: var(--font-kanit, Kanit, sans-serif);
  color: var(--color-navy-700);
  line-height: 1.25;
  margin: 2.5rem 0 1rem;
}

.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
  font-family: var(--font-kanit, Kanit, sans-serif);
  color: var(--color-navy-700);
}

.content-body h2:first-child {
  margin-top: 0;
}

/* H2 */
.content-body h2, .content-body-h2 {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.05;
  padding-bottom: .5rem;
  margin-top: 0;
  position: relative;
  display: inline-block;
}

/* H3 */
.content-body h3, .content-body-h3 {
  font-size: 1.5rem;
  font-weight: 500;
  margin: 2.5rem 0 .75rem;
  border-left: 4px solid var(--color-teal-500);
  padding-left: .75rem;
  line-height: 1.4;
}

/* H4 */
.content-body h4, .content-body-h4 {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--text-subdued);
  margin: 2rem 0 .5rem;
  line-height: 1.5;
}

/* H5 */
.content-body h5, .content-body-h5 {
  font-size: 1.25rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height: 1.6;
}

/* H6 */
.content-body h6, .content-body-h6 {
  font-size: 1.175rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-subtle);
  margin-bottom: .25rem;
  line-height: 1.7;
}

/* Faux heading utility */
.fauxh2 {
  font-family: var(--font-kanit);
  font-weight: 500;
  color: var(--color-navy-700);
  margin: 3.5rem auto 1rem;
}

/* Horizontal rule */
.content hr {
  clear: both;
  margin: 2.5rem 0;
  height: 1px;
  border: 0;
  background: currentColor;
  opacity: .25;
}


/* ============================================================
   12. LINKS
============================================================ */

.content-body a {
  color: var(--color-teal-600);
  text-decoration: underline;
  text-underline-offset: .15em;
}

.content-body a:hover,
.content-body a:focus-visible {
  color: var(--color-teal-700);
  text-decoration-thickness: 2px;
}


/* ============================================================
   13. LISTS
============================================================ */

.content-body ul,
.content-body ol {
  margin: 0 0 1.5rem 2rem;
  padding: 0;
}

.content-body li {
	padding: .5rem 0;
	line-height: 1.2;
}

.content-body ul li::marker {
  color: var(--color-teal-700);
}

.content-body ol li::marker {
  color: var(--color-navy-700);
  font-weight: 600;
}

.content-body li strong {
  color: var(--color-navy-700);
}

.content-body p + ul,
.content-body p + ol {
  margin-top: -1rem;
}

.content-body p + ul + p,
.content-body p + ol + p {
  margin-top: 2rem;
}

@media (min-width: 768px) {
  .content-body ul,
  .content-body ol {
    margin-bottom: 2.25rem;
  }
}

/* Check list */
.list-check {
  list-style: none;
  padding-left: 0;
}

.list-check li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: .5rem;
}

.list-check li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-navy-700);
  font-weight: 700;
}

/* Arrow list */
.list-arrow {
  list-style: none;
  padding-left: 0;
}

.list-arrow li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .5rem;
}

.list-arrow li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--color-teal-600);
}

/* Link list */
.link-list {
  list-style: none;
  padding-left: 1.25rem;
}

.link-list a {
  color: var(--color-navy-700);
  font-weight: 500;
  text-decoration: none;
}

.link-list a:hover,
.link-list a:focus {
  text-decoration: underline;
  color: var(--color-teal-700);
}


/* ============================================================
   14. BLOCKQUOTE
============================================================ */

.content blockquote {
  margin: 2.5rem 0;
  padding: 1.5rem 2rem;
  border-left: 4px solid var(--color-navy-700);
  background: var(--color-gray-25);
  font-style: italic;
  color: var(--color-navy-700);
}

.content blockquote p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.7;
}

.content blockquote::before {
  content: "\201C";
  font-size: 3rem;
  line-height: 1;
  color: rgba(0, 60, 105, .15);
  display: block;
  margin-bottom: .5rem;
}


/* ============================================================
   15. IMAGES & FLOATS
============================================================ */

.img-framed {
  background: var(--color-white);
  padding: .5rem;
  border: 1px solid var(--color-content-border);
}

.img-shadow {
  box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
}

.img-rounded {
  border-radius: 4px;
}

.content-body .float-right,
.content-body .float-left {
  float: none;
  display: block;
  margin: 1.5rem auto;
  max-width: 100%;
}

.content-body img.float-left,
.content-body img.float-right {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

@media (min-width: 1200px) {
  .content-body .float-right {
    float: right;
    margin: .25rem 0 1rem 1.5rem;
    max-width: 40%;
  }

  .content-body .float-left {
    float: left;
    margin: .25rem 1.5rem 1rem 0;
    max-width: 40%;
  }
}

@media (min-width: 1400px) {
  .content-body .float-right,
  .content-body .float-left {
    max-width: 100%;
  }
}


/* ============================================================
   16. TABLES
============================================================ */

.content table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  font-size: 1.1rem;
}

.content th,
.content td {
  padding: .75rem;
  border: 1px solid var(--color-content-border);
  vertical-align: top;
}

.content th {
  font-weight: 700;
  text-align: left;
  color: var(--color-navy-700);
  font-size: 1.075em;
}

.table-striped tbody tr:nth-of-type(odd) {
  background: rgba(0, 60, 105, .03);
}

@media (max-width: 767px) {
  .content table {
    display: block;
    overflow-x: auto;
  }
}

/* Structured table variant */
.table {
  width: 100%;
  border-collapse: collapse;
}

.table th,
.table td {
  padding: .9rem 1rem;
  text-align: left;
  vertical-align: top;
}

.table thead {
  border-bottom: 2px solid var(--color-content-border);
}

.table tbody tr:nth-of-type(odd) {
  background: var(--surface-row);
}

.table th[scope="row"] {
  width: 240px;
  font-weight: 600;
  color: var(--color-navy-700);
  border-left: 4px solid var(--color-navy-700);
  padding-left: .75rem;
}

@media (max-width: 768px) {
  .table thead {
    display: none;
  }

  .table,
  .table tbody,
  .table tr,
  .table th,
  .table td {
    display: block;
    width: 100%;
  }

  .table tr {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-content-border);
  }

  .table th {
    font-size: 1.05rem;
    margin-bottom: .35rem;
    color: var(--color-navy-700);
  }

  .table td {
    padding: 0;
  }
}


/* ============================================================
   17. CONTENT ASIDE (Base + Variants)

   <aside class="content-aside content-aside--variant">
     <h2 class="content-aside-title"></h2>
     <div class="content-aside-body"></div>
   </aside>

   Variants: --resources --contact --calendar --downloads --deadlines
============================================================ */

.content-aside {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: var(--surface-aside);
  border: 1px solid var(--color-content-border);
}

@media (min-width: 992px) {
  .content-aside--float-right {
    float: right;
    width: 34%;
    margin: .75rem 0 1.5rem 2rem;
  }
}

.content-aside-title {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-navy-700);
  margin: 0 0 1.5rem;
}

.content-aside-body {
  font-size: .95rem;
}

.content-aside a {
  text-decoration: none;
  color: var(--color-navy-700);
}

.content-aside ul,
.content-aside ol {
  margin: 0;
  padding: 0;
  list-style: none;
}


/* ============================================================
   18. ACTION LIST
============================================================ */

.content-actions-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.content-actions-list li + li {
  margin-top: .75rem;
}

.content-actions-link {
  display: grid;
  grid-template-columns: 1fr auto;
  padding: .6rem .9rem .6rem 1rem;
  background: var(--color-white);
  border-left: 3px solid var(--color-navy-700);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--color-navy-700);
  transition: background .15s ease, border-color .15s ease;
}

.content-actions-link .desc {
  grid-column: 1 / -1;
  font-size: .9rem;
  font-weight: 400;
  color: var(--text-meta);
}

.content-actions-link .type {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
  align-self: start;
  margin-top: 0;
}

.content-actions-link:hover,
.content-actions-link:focus-visible {
  border-left-color: var(--color-teal-500);
  box-shadow: rgba(0, 0, 0, 0.05) 0 0 0 1px;
}

.content-actions-link:focus-visible {
  outline: 2px solid var(--color-teal-500);
  outline-offset: 2px;
}


/* ============================================================
   19. DATES ASIDE
============================================================ */

.content-aside--dates .date-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.content-aside--dates li {
  margin-bottom: .9rem;
  padding-bottom: 1rem;
  border-bottom: 1px dashed rgba(0, 60, 105, 0.2);
  line-height: 1.3;
  padding-top: 0;
}

.content-aside--dates li:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.content-aside--dates .date-label {
  display: block;
  font-weight: 600;
  color: var(--color-navy-700);
  font-size: 1.25rem;
}

.content-aside--dates .date-value {
  display: block;
  font-size: 0.95rem;
  color: var(--text-meta);
}


/* ============================================================
   20. FAQ
============================================================ */

.faq {
  margin: 3rem 0;
}

.faq-title {
  margin-bottom: 2rem;
}

.faq-question {
  font-family: var(--font-kanit);
  font-weight: 600;
  font-size: 1.375rem;
  color: var(--color-navy-700);
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

.faq-answer {
  margin-left: 0;
  padding-left: 1rem;
  border-left: 3px solid var(--color-content-border);
  color: var(--text-content);
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

.faq-subcontent {
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  background-color: var(--color-blue-5);
  border-left: 3px solid var(--color-teal-500);
  font-size: 0.95rem;
}

.faq-subcontent ol {
  margin-top: 0.5rem;
}


/* ============================================================
   21. EVENTS CALENDAR
============================================================ */

/* Filter bar */
.events-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem 2rem;
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid rgba(0, 60, 105, 0.12);
}

.events-filter-group {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.events-filter-label {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-navy-700);
}

.events-filter-select {
  min-width: 200px;
  padding: .5rem .75rem;
  border: 1px solid var(--color-form-border);
  border-radius: 4px;
  font-size: 1rem;
  color: var(--text-body);
  background-color: var(--color-white);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.events-filter-select:focus {
  border-color: var(--color-teal-500);
  box-shadow: 0 0 0 3px rgba(0, 145, 185, .2);
  outline: none;
}

.events-filter-count {
  font-size: .9rem;
  color: var(--text-subtle);
  margin: 0;
  align-self: flex-end;
  padding-bottom: .5rem;
}

/* Month heading */
.events-calendar .event-month-group:first-of-type .event-month-heading {
  margin-top: 0;
}

.event-month-heading {
  font-family: var(--font-merriweather);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--color-navy-800);
  margin: 2.5rem 0 1.25rem;
  padding-bottom: .5rem;
  border-bottom: 3px solid var(--color-teal-500);
  display: inline-block;
}

/* Ongoing group — teal heading */
.event-ongoing-group .event-month-heading {
  color: var(--color-teal-500);
}

/* Event list */
.event-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* Event card */
.event-card-full {
  display: flex;
  gap: 1.25rem;
  background: var(--surface-card);
  border: 1px solid rgba(0, 60, 105, .1);
  border-left: 5px solid var(--color-navy-700);
  border-radius: 4px;
  padding: 1.25rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
  transition: box-shadow .2s ease, transform .2s ease;
  position: relative;
  scroll-margin-top: calc(var(--header-height, 80px) + 20px);
}

.event-card-full:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
  transform: translateY(-2px);
}

/* Status variants — status colors, not brand palette */
.event-card-full--cancelled {
  border-left-color: #c0392b;
  opacity: .85;
}

.event-card-full--postponed {
  border-left-color: #e67e22;
}

/* Date block */
.event-card-full--date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-width: 100px;
  text-align: center;
  padding-top: .15rem;
  border-right: 1px solid #F2F2F2;
  padding-right: .75rem;
}

.event-card-full--date .event-date--month {
  font-size: .95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-teal-500);
  line-height: 1;
}

.event-card-full--date .event-date--day {
  font-family: var(--font-merriweather);
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--color-navy-800);
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: .25rem;
  white-space: nowrap;
}

.event-card-full--date .event-date--range {
  font-family: var(--font-opensans);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-subtle);
}

/* Body */
.event-card-full--body {
  flex: 1;
  min-width: 0;
}

.event-card-full--title {
  font-family: var(--font-kanit);
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  color: var(--color-navy-800);
  margin-bottom: .4rem;
  line-height: 1.3;
  font-weight: 700;
}

/* Meta row */
.event-card-full--meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.25rem;
  margin-bottom: .65rem;
}

.event-meta-item {
  font-size: .9rem;
  color: var(--text-meta);
  display: flex;
  align-items: center;
  gap: .3rem;
}

.event-meta-item svg {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
  fill: var(--color-navy-700);
}

/* Category pills */
.event-card-full--categories {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .6rem;
  margin-bottom: .5rem;
}

.event-card-full--categories + .event-card-full--categories {
  margin-top: 1rem;
  margin-bottom: .75rem;
}

.event-category-pill {
  display: inline-block;
  padding: .2rem .65rem;
  background: rgba(0, 60, 105, .04);
  border: 1px solid rgba(0, 60, 105, .18);
  border-radius: 20px;
  font-size: .6rem;
  font-weight: 600;
  color: var(--color-navy-700);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Actions row */
.event-card-full--actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: .75rem;
  flex-wrap: wrap;
}

/* Learn more link */
.event-card-full--link {
  display: inline-block;
  font-size: .9rem;
  font-weight: 700;
  color: var(--color-teal-500);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease, color .15s ease;
}

.event-card-full--link:hover,
.event-card-full--link:focus-visible {
  color: var(--color-navy-700);
  border-bottom-color: var(--color-navy-700);
}

/* Status flags — status colors, intentionally not brand tokens */
.event-flag {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .2rem .6rem;
  border-radius: 3px;
  margin-bottom: .5rem;
}

.event-flag--cancelled {
  background: #fdf0ee;
  color: #c0392b;
  border: 1px solid #f5c6c1;
}

.event-flag--postponed {
  background: #fef6ec;
  color: #c87100;
  border: 1px solid #f5ddb0;
}

/* Empty state */
.events-empty {
  padding: 2rem;
  text-align: center;
  color: var(--text-subtle);
  font-size: 1.05rem;
  background: var(--surface-row);
  border-radius: 4px;
  border: 1px dashed var(--color-form-border);
}

/* Responsive stacking */
@media (max-width: 480px) {
  .event-card-full {
    flex-direction: column;
    gap: .75rem;
  }

  .event-card-full--date {
    flex-direction: row;
    align-items: baseline;
    gap: .5rem;
    min-width: unset;
  }

  .event-date--day,
  .event-card-full--date .event-date--day {
    font-size: 1.75rem;
  }
}


/* ============================================================
   22. EVENT DETAILS
============================================================ */

.event-details--description p,
.event-details--description div {
  margin-bottom: 1rem;
  font-size: 1rem;
}

.event-card-full--description strong {
  color: var(--color-navy-700);
}

.event-details--description {
  font-size: 1rem;
  color: var(--text-meta);
  line-height: 1.6;
  padding-bottom: 1rem;
}

.event-details--description p {
  margin-bottom: .75rem;
}

.event-details--description p:last-child {
  margin-bottom: 0;
}

.event-details--description a {
  color: var(--color-navy-700);
  text-decoration: underline;
}

.event-details--description a:hover,
.event-details--description a:focus-visible {
  color: var(--color-teal-600);
  text-decoration: none;
}

/* Toggle */
.event-details--toggle {
  display: inline-block;
  font-size: .85rem;
  font-weight: 700;
  color: var(--color-teal-500);
  text-decoration: none;
  margin-top: .5rem;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease, color .15s ease;
}

.event-description--toggle:hover,
.event-description--toggle:focus-visible {
  color: var(--color-navy-700);
  border-bottom-color: var(--color-navy-700);
}

.event-details--toggle-less {
  display: none;
}

.event-details--toggle[aria-expanded="true"] .event-details--toggle-more {
  display: none;
}

.event-details--toggle[aria-expanded="true"] .event-details--toggle-less {
  display: inline;
}

/* Details panel */
.event-details--body {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 60, 105, .1);
}

/* Action links */
.event-details--link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .75rem;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: var(--color-teal-500);
  text-decoration: none;
  transition: background .15s ease;
  border: 1px solid var(--color-teal-500);
  padding: .2rem .5rem;
  color: var(--color-white);
  font-weight: 500;
  border-radius: 3px;
}

.event-details--link:hover,
.event-details--link:focus-visible {
  background: var(--color-teal-700);
  border-color: var(--color-teal-700);
  color: var(--color-white);
}

.event-details--link--pdf {
  background-color: var(--color-navy-700);
  color: var(--color-white);
  border: 1px solid var(--color-navy-700);
}

.event-details--link--pdf:hover,
.event-details--link--pdf:focus-visible {
  background-color: var(--color-navy-900);
  border-color: var(--color-navy-900);
}

/* Floated event image */
.event-details--image {
  width: 100%;
  max-width: 340px;
  height: auto;
  float: right;
  margin: 0 0 1rem 1.5rem;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

@media (max-width: 480px) {
  .event-details--image {
    float: none;
    max-width: 100%;
    margin: 0 0 1rem;
  }
}


/* ============================================================
   23. CONTENT ASIDE — RELATED LINKS

   <aside class="content-aside--related">
     <p class="content-aside-label">Related</p>
     <ul class="content-aside-list">
       <li><a href="#">Link one</a></li>
     </ul>
   </aside>

   Float modifier: add .content-aside--float-right
============================================================ */

.content-aside--related {
  background: var(--color-teal-50);
  padding: 1.25rem 1rem 1rem;
  border: 1px solid var(--color-navy-10);
  border-top-width: 4px;
  border-top-color: var(--color-navy-700);
  border-radius: 4px;
  margin-bottom: 1rem;
}

.content-aside-label {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-navy-700);
  margin: 0 0 .75rem;
}

.content-aside-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.content-aside-list li {
  border-bottom: 1px solid var(--color-content-border);
}

.content-aside-list li:last-child {
  border-bottom: none;
}

.content-aside-list a {
  display: block;
  padding: .75rem 0 .75rem .25rem;
  margin: .15rem 0;
  font-size: .95rem;
  font-weight: 500;
  background: var(--color-white);
  color: var(--color-navy-700);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: color .2s ease, border-color .2s ease, padding-left .2s ease;
}

.content-aside-list a:hover,
.content-aside-list a:focus-visible {
  color: var(--color-teal-500);
  border-left-color: var(--color-teal-500);
  padding-left: .75rem;
}


/* ============================================================
   24. REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {
  .arts-event-card,
  .btn-arts {
    transition: none !important;
    transform: none !important;
  }
}