@font-face {
    font-family: "Avenir";
    src: url("/fonts/AvenirNextLTPro-Regular.woff2") format("woff2"),
        url("/fonts/AvenirNextLTPro-Regular.otf") format("opentype");
    font-display: swap;
    unicode-range: U+0020-007E, U+00A0-00FF, U+0100-017F, U+0180-024F,
        U+0300-036F, U+2013, U+2014, U+2018-201D, U+2026, U+2022, U+00B7,
        U+2190, U+2192, U+FB00-FB06;
}

@font-face {
    font-family: "AvenirBold";
    src: url("/fonts/AvenirNextLTPro-Bold.woff2") format("woff2"),
        url("/fonts/AvenirNextLTPro-Bold.otf") format("opentype");
    font-display: swap;
    unicode-range: U+0020-007E, U+00A0-00FF, U+0100-017F, U+0180-024F,
        U+0300-036F, U+2013, U+2014, U+2018-201D, U+2026, U+2022, U+00B7,
        U+2190, U+2192, U+FB00-FB06;
}

:root {
    --event-accent-color: #4a5050;
    --focus-outline-color: #ff6600;
    --primary-link-color: #ff6600;
    --pagefind-ui-text: #ffffff !important;
    --pagefind-ui-background: #4a5050 !important;
    --pagefind-ui-primary: #ff6600 !important;
}

body {
    font-family: Avenir, sans-serif;
    font-size: clamp(0.9rem, 0.875rem + 0.15vw, 1rem);
    margin: 0em;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #3a3f3a;
    color: #ffffff;
}

h1,
h2,
h3,
h4 {
    font-family: AvenirBold, sans-serif;
    color: #ffffff;
}

h1 {
    font-size: clamp(1.5rem, 1.4rem + 0.5vw, 1.75rem);
}

h2 {
    font-size: clamp(1.25rem, 1.2rem + 0.25vw, 1.4rem);
}

h3 {
    font-size: clamp(1.1rem, 1.075rem + 0.125vw, 1.2rem);
}

h4 {
    font-size: clamp(0.95rem, 0.93rem + 0.1vw, 1.05rem);
}

/* ==========================================================================
   Interactive State Design System
   --------------------------------------------------------------------------
   Default pattern
     • Hover  : lighten current background/text color to indicate affordance
                (e.g., links use #ff8833 as a lighter tint of #ff6600)
     • Active : darken or otherwise "press" the current background/text color
                to show the pressed state (components may choose context-appropriate
                pressed colors rather than a single global hex)
     • Focus  : always show a clearly visible outline; components may also
                add a color and/or background change where appropriate
                – On dark backgrounds: a tinted foreground (e.g., #ff8833)
                  with an outline (e.g., 2px solid #ff6600, offset 2px) is
                  recommended
                – On bright/colored backgrounds: use a high-contrast outline
                  and text color (e.g., white text with a white outline on
                  orange buttons) to meet accessibility contrast requirements

   Notes
     • The rules below implement these patterns for links, buttons, cards,
       nav items, and dropdown entries. Individual components may override
       specific hover/active/focus colors while following the same behavior.
   ========================================================================== */

a {
    text-decoration: none;
    color: #ff6600;
}

a:hover {
    color: #ff8833;
}

a:focus-visible {
    color: #ff8833;
    outline: 2px solid #ff6600;
    outline-offset: 2px;
}

a:active {
    color: #cc5500;
}

button {
    display: flex;
    align-items: center;
    column-gap: 0.5em;
}

main {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    flex: 1;
}

.skip-to-content {
    position: absolute;
    top: -100%;
    left: 0;
    padding: 0.5em 1em;
    background-color: #ff6600;
    color: #ffffff;
    font-weight: bold;
    z-index: 9999;
    text-decoration: none;
}

.skip-to-content:focus-visible {
    top: 0;
    color: #ffffff;
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.skip-to-content:active {
    color: #ffffff;
    background-color: #cc5500;
}

section {
    margin-bottom: 3em;
    color: #ffffff;
}

.bio {
    display: flex;
    column-gap: 1em;
    margin-bottom: 2em;
    background-color: #555d63;
    padding: 1.5em;
    border-radius: 0.5em;
    border-left: 4px solid #ff6600;
    color: #ffffff;
}

.bio img {
    height: 7em;
    width: 7em;
    border-radius: 50%;
    object-fit: cover;
}

.bio div * {
    margin: 0px;
}

.bio h3 {
    font-style: italic;
    color: #ff6600;
}

.bio h2 {
    color: #ff6600;
}

/* Only crop tall images to wide aspect ratio on events page */
.event-card-image.crop-wide,
.event-card-image.event-wide-aspect {
    object-fit: cover;
    aspect-ratio: 18/5;
    height: auto;
    max-height: 20vw;
}

.centered {
    max-width: 100em;
}

.featured-event-container {
    width: min(90vw, 90em);
}

.column {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.featured-event {
    position: relative;
    color: white;
    font-weight: bolder;
    margin: 0em 2em 0em 0em;
    height: 30em;
    width: 25em;
    border-radius: 1.5em;
    overflow: hidden;
    display: block;
    cursor: pointer;
}

.featured-event:hover {
    cursor: pointer;
}

.featured-event:focus-visible {
    outline: 2px solid #ff6600;
    outline-offset: 2px;
}

.featured-event:focus-visible::after {
    background-color: rgba(100, 100, 100, 0.7);
}

.featured-event:active {
    color: #ffffff;
}

.featured-event:active::after {
    background-color: rgba(80, 80, 80, 0.85);
}

.featured-event h2 {
    position: absolute;
    text-align: right;
    bottom: 0;
    right: 0;
    text-shadow: 1px 1px 2px black;
    margin: 1em;
    z-index: 1;
}

.browse-button {
    font-size: 2em;
    padding: 0.5em;
    border-radius: 0.75em;
    background-color: #ff6600;
    color: #ffffff;
    border: none;
    font-weight: bold;
    transition: background-color 150ms ease;
}

.browse-button:hover {
    cursor: pointer;
    background-color: #ff8833;
}

.browse-button:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.browse-button:active {
    background-color: #cc5500;
}

.header {
    background-color: rgb(20, 22, 20);
    width: 100vw;
    height: auto;
    min-height: 5em;
    display: flex;
    align-items: center;
    padding: 0.5em 0;
}

.header div {
    display: flex;
    column-gap: 1.5em;
    margin-left: 2em;
    color: white;
    font-weight: bolder;
    flex-wrap: wrap;
    row-gap: 0.5em;
    font-size: clamp(0.75rem, 2vw, 1rem);
}

.telegram-button {
    background-color: #ff6600;
    color: white;
    padding: 0.45em 1em;
    margin-left: 2em;
    margin-right: 2em;
    border-radius: 0.35em;
    font-weight: bold;
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: background-color 150ms ease;
    font-size: 0.9em;
}

.telegram-button:hover {
    background-color: #ff8833;
    color: #ffffff;
}

.telegram-button:focus-visible {
    background-color: #ff8833;
    color: #ffffff;
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.telegram-button:active {
    background-color: #cc5500;
    color: #ffffff;
}

.footer {
    background-color: rgb(20, 22, 20);
    width: 100vw;
    display: flex;
    align-items: center;
    margin-top: 1.5em;
    color: white;
    justify-content: center;
    padding: 1.5em 0;
}

.footer-container {
    width: min(90vw, 90em);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-container p {
    margin: 0;
}

.logo {
    margin-left: 1em;
    height: clamp(2.5rem, 8vw, 4rem);
}

.telegram-logo {
    height: 2em;
    width: 2em;
}

.footer-flag {
    height: 2.5em;
}

.upcoming-event-container {
    display: flex;
    flex-direction: column;
    column-gap: 1em;
    row-gap: 1em;
}

.upcoming-event {
    background-color: #4a5050;
    padding: 0.5em;
    border-radius: 1em;
    display: flex;
    justify-content: space-between;
    flex: 1;
    min-width: fit-content;
    color: #ffffff;
}

.upcoming-event * {
    margin: 0px;
}

.upcoming-event .ev-name {
    font-size: 1.5em;
    font-family: AvenirBold;
}

.upcoming-event .ev-name a {
    color: #ff6600;
    text-decoration: none;
}

.upcoming-event .ev-name a:hover {
    color: #ff8833;
}

.upcoming-event .ev-name a:focus-visible {
    color: #ff8833;
    outline: 2px solid #ff6600;
    outline-offset: 2px;
}

.upcoming-event .ev-name a:active {
    color: #cc5500;
}

.upcoming-event .ev-date {
    text-align: right;
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 0.5em;
}

.upcoming-event .ev-date > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ff6600;
    color: white;
    padding: 0.5em 0.75em;
    border-radius: 0.5em;
    min-width: 3em;
}

.upcoming-event .ev-time {
    display: flex;
    align-items: center;
}

.upcoming-event .ev-month {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.85em;
}

.upcoming-event .ev-day {
    font-size: 1.5em;
    font-weight: bolder;
}

.footer-logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border-radius: 1em;
    padding: 0;
    margin: 0;
    overflow: hidden;
    color: #ffffff;
}

.footer-logo {
    height: 2em;
    width: auto;
    display: block;
}

.footer-rss {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5em;
}

.footer-rss a {
    display: flex;
    align-items: center;
    gap: 0.3em;
    color: white;
    text-decoration: none;
    font-size: 0.9em;
    opacity: 0.8;
    transition: opacity 150ms ease;
}

.footer-rss a:hover {
    opacity: 1;
}

.footer-rss a:focus-visible {
    opacity: 1;
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.footer-rss a.footer-rss-secondary {
    font-size: 0.85em;
}

.footer-social {
    display: flex;
    align-items: center;
    gap: 0.75em;
}

.footer-social a {
    display: flex;
    align-items: center;
    color: white;
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 150ms ease;
}

.footer-social a:hover {
    opacity: 1;
}

.footer-social a:focus-visible {
    opacity: 1;
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.footer-social a:active {
    opacity: 0.7;
}

.pwa-install-btn {
    display: none;
    align-items: center;
    gap: 0.3em;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: white;
    font-size: 0.9em;
    padding: 0.3em 0.6em;
    border-radius: 0.35em;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 150ms ease, border-color 150ms ease;
    font-family: inherit;
}

.pwa-install-btn:hover {
    opacity: 1;
    border-color: white;
}

.pwa-install-btn:focus-visible {
    opacity: 1;
    border-color: white;
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.pwa-install-btn:active {
    opacity: 0.8;
    border-color: white;
}

.pwa-install-dismiss {
    display: none;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    padding: 0.15em 0.25em;
    line-height: 1;
    font-family: inherit;
    align-items: center;
}

.pwa-install-dismiss:not([hidden]) {
    display: inline-flex;
}

.pwa-install-dismiss:hover {
    color: white;
}

.pwa-install-dismiss:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
    color: white;
}

.pwa-install-dismiss:active {
    color: white;
    opacity: 0.8;
}

.pwa-ios-banner {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #2c2f33;
    border-top: 2px solid rgba(255, 102, 0, 0.6);
    color: #ffffff;
    padding: 0.9em 1.2em;
    padding-bottom: calc(0.9em + env(safe-area-inset-bottom, 0px));
    z-index: 1001;
    font-size: 0.9em;
}

.pwa-ios-banner:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8em;
}

.pwa-ios-banner__text {
    flex: 1;
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3em;
}

.pwa-ios-banner__dismiss {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 0.3em 0.4em;
    line-height: 1;
    flex-shrink: 0;
    font-family: inherit;
    display: flex;
    align-items: center;
}

.pwa-ios-banner__dismiss:hover {
    color: white;
}

.pwa-ios-banner__dismiss:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
    color: white;
}

.pwa-ios-banner__dismiss:active {
    color: white;
    opacity: 0.8;
}

.events-list {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
    margin-top: 1.5em;
}

.event-card {
    background-color: var(--event-accent-color, #4a5050);
    border-radius: 1em;
    padding: 1.5em;
    margin: 0;
    overflow: hidden;
    color: #ffffff;
}

.breadcrumb {
    margin-bottom: 0.75em;
}

.breadcrumb ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25em;
    font-size: 0.875em;
    color: #cccccc;
}

.breadcrumb li + li::before {
    content: "›";
    margin-right: 0.25em;
    color: #aaaaaa;
}

.breadcrumb a {
    color: #cccccc;
    text-decoration: underline;
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
    color: #ffffff;
}

.breadcrumb [aria-current="page"] {
    color: #ffffff;
    font-weight: 600;
}

.featured-event-container > .event-card {
    margin-top: 1.5em;
}

.event-card h1 {
    margin: 0;
    color: #ff6600;
}

.event-card.event-has-color h1 {
    color: #ffffff;
}

.event-card-image {
    width: 100%;
    height: auto;
    border-radius: 0.5em;
    margin-bottom: 0;
}

.event-content {
    display: flex;
    flex-direction: column;
    gap: 0.1em;
}
.event-content p {
    margin: 0.1em 0;
}

.event-content h2 {
    margin: 0;
}

.event-title-link {
    color: #ff6600;
    text-decoration: none;
    transition: color 150ms ease;
}

.event-title-link:hover,
.event-title-link:focus-visible {
    color: #ff8833;
}

.event-title-link:focus-visible {
    outline: 2px solid #ff6600;
    outline-offset: 2px;
}

.event-title-link:active {
    color: #cc5500;
}


.event-summary {
    color: #dddddd;
    line-height: 1.5;
    margin: 0 0 0 0;
}

.read-more {
    display: inline-block;
    padding: 0.75em 2em;
    background-color: #ff6600;
    border-radius: 0.5em;
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 150ms ease, color 150ms ease;
    text-align: center;
    margin: 0;
}

.read-more:hover {
    background-color: #ff8833;
    color: #ffffff;
}

.read-more:focus-visible {
    background-color: #ff8833;
    color: #ffffff;
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.read-more:active {
    background-color: #cc5500;
    color: #ffffff;
}

.event-detail-image {
    display: block;
    width: 90%;
    max-width: 80vw;
    height: auto;
    max-height: 60vh;
    object-fit: cover;
    border-radius: 1em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    background-color: #4a5050;
}

.event-markdown-content img {
    display: block;
    max-width: 100%;
    width: auto;
    height: auto;
    margin: 1em auto;
    border-radius: 0.75em;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.event-map-actions {
    display: flex;
    justify-content: center;
    margin: 0.75em 0 1.75em;
}

.event-map-actions .view-all-link {
    min-width: 14rem;
    text-align: center;
}

.view-all-link {
    display: inline-block;
    padding: 1em 2em;
    background-color: #ff6600;
    border-radius: 0.5em;
    color: #ffffff;
    font-weight: bold;
    font-size: 1.1em;
    text-decoration: none;
    transition: background-color 150ms ease, color 150ms ease;
    text-align: center;
}

.view-all-link:hover {
    background-color: #ff8833;
    color: #ffffff;
}

.view-all-link:focus-visible {
    background-color: #ff8833;
    color: #ffffff;
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.view-all-link:active {
    background-color: #cc5500;
    color: #ffffff;
}

.event-navigation {
    margin-top: 3em;
    border-top: 2px solid #5a6060;
    padding-top: 2em;
}

.event-details-section {
    background-color: #555d63;
    padding: 1.5em;
    border-radius: 0.5em;
    margin-bottom: 0;
    border-left: 4px solid #ff6600;
    color: #ffffff;
}

.event-detail-item {
    margin: 0.1em 0;
    font-size: 1.05em;
    color: #ffffff;
}

.event-detail-item a {
    color: #ff6600;
    font-weight: bold;
}

.event-detail-item a:hover {
    text-decoration: underline;
    color: #ff8833;
}

.event-detail-item a:focus-visible {
    outline: 2px solid #ff6600;
    outline-offset: 2px;
    color: #ff8833;
}

.event-detail-item a:active {
    color: #cc5500;
}

/* Add to calendar - button with dropdown */
.add-to-cal-wrapper {
    position: relative;
    margin: 1em 0;
}

.add-to-cal-btn {
    background-color: #2c2f33;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 0.75em 1.5em;
    font-size: 1em;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    transition: background-color 0.2s ease;
    width: 100%;
}

.add-to-cal-btn:hover {
    background-color: #3a3f43;
}

.add-to-cal-btn:focus-visible {
    outline: 2px solid #ff6600;
    outline-offset: 3px;
}

.add-to-cal-btn:active {
    background-color: #1e2126;
}

.cal-icon {
    width: 20px;
    height: 20px;
    stroke: #ffffff;
}

.cal-dropdown {
    position: absolute;
    top: calc(100% + 0.5em);
    left: 0;
    right: 0;
    background-color: #2c2f33;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 100;
}

.cal-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.cal-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75em;
    padding: 0.875em 1.25em;
    color: #ffffff;
    text-decoration: none;
    border-bottom: 1px solid #3a3f43;
    transition: background-color 0.2s ease;
}

.cal-dropdown-item:last-child {
    border-bottom: none;
}

.cal-dropdown-item:hover {
    background-color: #3a3f43;
}

.cal-dropdown-item:focus-visible {
    outline: 2px solid var(--focus-outline-color);
    outline-offset: 2px;
    background-color: #3a3f43;
}

.cal-dropdown-item:active {
    background-color: #2c3035;
}

.service-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.apple-icon {
    color: #999999;
}

/* Fallback for users with JavaScript disabled */
.add-to-cal-noscript {
    margin-top: 1em;
    padding: 1em;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    font-size: 0.9em;
}

.add-to-cal-noscript p {
    margin: 0 0 0.5em 0;
    color: #ddd;
}

.add-to-cal-noscript ul {
    margin: 0;
    padding-left: 1.5em;
    list-style: disc;
}

.add-to-cal-noscript li {
    margin-bottom: 0.5em;
}

.add-to-cal-noscript a {
    color: var(--primary-link-color);
    text-decoration: none;
}

.add-to-cal-noscript a:hover {
    color: #ff8833;
    text-decoration: underline;
}

.add-to-cal-noscript a:focus-visible {
    color: #ff8833;
    outline: 2px solid #ff6600;
    outline-offset: 2px;
}

.add-to-cal-noscript a:active {
    color: #cc5500;
}

.outlook-icon {
    color: #0072C6;
}

.outlookcom-icon {
    color: #0072C6;
}

.online-tag {
    color: #b8bec8;
    font-size: 0.85em;
    font-style: italic;
}

@media (max-width: 600px) {
    .add-to-cal-btn {
        font-size: 0.95em;
        padding: 0.7em 1.25em;
    }
}

.event-detail-image.event-wide-aspect {
    width: 100%;
    max-width: 100%;
    object-fit: cover;
    aspect-ratio: 18/5;
    height: auto;
    max-height: 60vh;
}

.event-nav-links {
    display: flex;
    justify-content: space-between;
    gap: 1em;
    flex-wrap: wrap;
}

.event-nav-links .nav-link {
    background-color: #ff6600;
    color: #ffffff;
}

.event-nav-links .nav-link:hover {
    background-color: #ff8833;
    color: #ffffff;
}

.event-nav-links .nav-link:focus-visible {
    color: #ffffff;
    outline: 2px solid #ffffff;
    outline-offset: 2px;
    background-color: #ff8833;
}

.event-nav-links .nav-link:active {
    color: #ffffff;
    background-color: #cc5500;
}

.nav-link {
    flex: 1;
    min-width: 200px;
    padding: 1em;
    background-color: #4a5050;
    border-radius: 0.5em;
    color: #ff6600;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 150ms ease, color 150ms ease;
    text-align: center;
}

.nav-link:hover {
    background-color: #5a6060;
    color: #ff8833;
}

.nav-link:focus-visible {
    background-color: #5a6060;
    color: #ff8833;
    outline: 2px solid #ff6600;
    outline-offset: 2px;
}

.nav-link:active {
    background-color: #3a4040;
    color: #cc5500;
}

.nav-cta {
    display: inline-block;
    padding: 0.75em 2em;
    background-color: #ff6600;
    border-radius: 0.5em;
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 150ms ease, color 150ms ease;
}

.nav-cta:hover {
    background-color: #ff8833;
    color: #ffffff;
}

.nav-cta:focus-visible {
    background-color: #ff8833;
    color: #ffffff;
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.nav-cta:active {
    background-color: #cc5500;
    color: #ffffff;
}

.prev-link {
    text-align: left;
}

.next-link {
    text-align: right;
}

@media (max-width: 768px) {
    section {
        margin: 1em;
    }

    .bio {
        flex-direction: column;
    }

    .header {
        justify-content: center;
        display: block;
        text-align: center;
        padding-top: 1em;
    }

    .header a {
        margin: 0px;
        justify-content: center;
        flex: 1;
    }

    .header div {
        margin: 0px;
    }

    .header a img {
        margin: 0px;
        max-width: 90%;
    }

    .column {
        flex-direction: column;
    }

    .featured-event-container {
        width: 100vw;
        align-items: center;
        justify-content: center;
    }

    .featured-event {
        width: 100%;
        height: 10em;
        margin-bottom: 1em;
    }

    .upcoming-event-container {
        max-width: 100vw;
    }

    .footer-container {
        display: flex;
        flex-direction: column;
        gap: 1em;
    }

    .footer-logo {
        height: 2em;
        margin-bottom: 1em;
        max-width: 70%;
    }
}

/* 404 Page Styles */
.not-found-section {
    text-align: center;
    padding: 2em;
}

.not-found-section .not-found-title {
    color: #ff6600;
    font-size: clamp(1.75em, 0.95em + 2.5vw, 2.5em);
    margin-bottom: 0.5em;
}

.not-found-image-container {
    margin: 1.5em auto;
    max-width: 480px;
}

.not-found-image {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: contain;
    border-radius: 1em;
    display: block;
    margin: 0 auto;
}

.not-found-message {
    font-size: 1.1em;
    color: #dddddd;
    margin: 1em auto;
    max-width: 40em;
    line-height: 1.6;
}

.not-found-search {
    margin: 1.5em auto;
    max-width: 40em;
    text-align: left;
}

.not-found-search-label {
    font-size: 1em;
    color: #dddddd;
    margin-bottom: 0.5em;
}

.not-found-nav {
    display: flex;
    gap: 1em;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 2em;
}

@media (max-width: 768px) {
    .not-found-nav {
        flex-direction: column;
        align-items: center;
    }

    .not-found-nav .nav-link {
        width: 100%;
        max-width: 20em;
    }
}

/* Responsive image styles with lazy loading support */

@keyframes fadeIn {
    from {
        opacity: 0.8;
    }
    to {
        opacity: 1;
    }
}

/* Poses Gallery Styles */
.poses-grid {
    width: 100%;
    max-width: 2200px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 16px;
}

.poses-container {
    margin: 24px auto;
    width: 100%;
    max-width: 2200px;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
}

@media (max-width: 900px) {
    .poses-container {
        width: 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
        box-sizing: border-box;
    }
}

.poses-section {
    margin-bottom: 48px;
}

/* Ghost element to stop the last row of images from stretching ridiculously wide */
.poses-grid::after {
    content: "";
    flex-grow: 999;
}

/* Disable ghost element when poses grid is rendered as a CSS grid on the print page */
body.poses-print-page .poses-container .poses-grid::after {
    content: none;
    display: none;
}

.poses-image-wrapper {
    position: relative;
    display: block;
    flex-grow: 1;
    height: 300px;
    overflow: hidden;
    border-radius: 6px;
}

.poses-image-link {
    display: block;
    width: 100%;
    height: 100%;
}

.poses-image-number {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.75);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    pointer-events: none;
    z-index: 10;
}

/* Share button: appears on hover in the top-right corner */
.poses-share-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.75);
    color: white;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, background 0.15s ease, transform 0.15s ease;
    z-index: 20;
}

.poses-image-wrapper:hover .poses-share-btn,
.poses-image-wrapper:focus-within .poses-share-btn {
    opacity: 1;
    pointer-events: auto;
}

.poses-share-btn:hover {
    background: rgba(255, 102, 0, 0.9);
    transform: scale(1.1);
}

.poses-share-btn:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
    opacity: 1;
}

.poses-share-btn:active {
    background: rgba(204, 85, 0, 0.9);
    transform: scale(0.95);
}

/* On touch / hoverless devices, keep the share button visible and clickable */
@media (hover: none), (pointer: coarse) {
    .poses-share-btn {
        opacity: 1;
        pointer-events: auto;
    }
}

/* Show a green tint when the URL was copied */
.poses-share-btn.poses-share-copied {
    background: rgba(34, 139, 34, 0.9);
    opacity: 1;
}

/* Highlight a pose when navigated to via hash anchor */
.poses-image-wrapper.poses-highlighted {
    outline: 3px solid #ff6600;
    outline-offset: 2px;
    border-radius: 6px;
}

/* Lightbox badge styling */
.gslide-media {
    position: relative !important;
}

.glightbox-container .gslide-description,
.gslide-description {
    position: absolute !important;
    bottom: 20px !important;
    right: 20px !important;
    left: auto !important;
    top: auto !important;
    background: rgba(0, 0, 0, 0.75) !important;
    color: white !important;
    padding: 6px 12px !important;
    border-radius: 4px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    z-index: 1000 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
}

.gslide-description p {
    margin: 0 !important;
}

/* Lightbox filmstrip */

.glightbox-filmstrip {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    background: rgba(0, 0, 0, 0.88);
    padding: 8px 12px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    gap: 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
    -webkit-overflow-scrolling: touch;
}

.glightbox-filmstrip::-webkit-scrollbar {
    height: 4px;
}

.glightbox-filmstrip::-webkit-scrollbar-track {
    background: transparent;
}

.glightbox-filmstrip::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}

.filmstrip-thumb {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 3px;
    cursor: pointer;
    background: #333;
    overflow: hidden;
    opacity: 0.55;
    transition: opacity 0.2s, border-color 0.2s;
}

.filmstrip-thumb:hover {
    opacity: 0.85;
}

.filmstrip-thumb:focus-visible {
    opacity: 0.85;
    outline: 2px solid #fff;
    outline-offset: 2px;
    border-color: #fff;
}

.filmstrip-thumb.filmstrip-active {
    border-color: #fff;
    opacity: 1;
}

.filmstrip-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

@media (max-width: 600px) {

    .glightbox-filmstrip {
        padding: 6px 8px;
        padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
        gap: 4px;
    }

    .filmstrip-thumb {
        width: 48px;
        height: 48px;
    }
}

/* Floating/sticky navigation bar */
.poses-navigation {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 0.75rem 1rem;
    background: #3a3f3a;
    border-bottom: 1px solid #555d63;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    margin: 0 0 1.5rem 0;
}

.poses-nav-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.poses-nav-btn {
    padding: 0.4rem 1.25rem;
    background: #555d63;
    border: 1px solid #666;
    border-radius: 4px;
    text-decoration: none;
    color: #ffffff;
    font-weight: 500;
    font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    font-family: Avenir, sans-serif;
}

.poses-nav-btn:hover {
    background: #666e74;
    color: #ff8833;
}

.poses-nav-btn:focus-visible {
    outline: 2px solid #ff6600;
    outline-offset: 2px;
    background: #666e74;
    color: #ff8833;
}

.poses-nav-btn:active {
    background: #3d4448;
    color: #ff8833;
}

.poses-nav-btn.active {
    background: #ff6600;
    color: #ffffff;
    border-color: #ff6600;
}

.poses-section.poses-hidden {
    display: none;
}

.poses-section-heading {
    font-size: clamp(1.125rem, 0.9rem + 1.125vw, 1.5rem);
    margin: 24px 0 16px;
    font-weight: 600;
    color: #ffffff;
}

.poses-grid-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.poses-image-link:hover .poses-grid-image {
    transform: scale(1.03);
}

@media (max-width: 768px) {
    .poses-image-wrapper {
        height: 200px;
    }
}

@media (max-width: 640px) {
    .poses-grid {
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .poses-grid {
        gap: 10px;
    }

    .poses-image-wrapper {
        height: 150px;
    }

    .poses-nav-btn {
        padding: 0.4rem 0.9rem;
    }
}

/* ==========================================================================
   Print Styles – Poses Reference Sheet (3×3 grid per page)
   ========================================================================== */

@media print {
    /* Scope print styles to the poses page using the body class set by poses layout */
    body.poses-print-page .poses-container {
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Hide global site chrome and navigation for poses print sheets only */
    body.poses-print-page .header,
    body.poses-print-page .footer,
    body.poses-print-page .skip-to-content,
    body.poses-print-page .poses-navigation {
        display: none !important;
    }

    /* Show all sections regardless of active JS filter */
    body.poses-print-page .poses-container .poses-section.poses-hidden {
        display: block !important;
    }

    /* Section heading stays with its grid */
    body.poses-print-page .poses-container .poses-section {
        margin-bottom: 0 !important;
    }

    /* Each category starts on a new page after the first */
    body.poses-print-page .poses-container .poses-section ~ .poses-section {
        break-before: page;
    }

    body.poses-print-page .poses-container .poses-section-heading {
        color: #000000 !important;
        font-size: 14pt !important;
        margin: 0 0 6pt !important;
        break-after: avoid;
    }

    /* 3×3 print grid */
    body.poses-print-page .poses-container .poses-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6pt !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Page break after every 9th pose (end of each 3×3 block), but not after the
       last item in the grid to avoid a blank page at a category boundary */
    body.poses-print-page .poses-container .poses-grid > .poses-image-wrapper:nth-child(9n):not(:last-child) {
        break-after: page;

    }

    body.poses-print-page .poses-container .poses-image-wrapper {
        break-inside: avoid;
        display: block !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Images: fill grid cell, preserve aspect ratio */
    body.poses-print-page .poses-container .poses-grid-image {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        object-fit: contain !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Pose number badge */
    body.poses-print-page .poses-container .poses-image-number {
        font-size: 7pt !important;
        padding: 1pt 3pt !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Hide empty gallery placeholder messages */

    /* Hide share buttons and reset highlight outline on printed reference sheets */
    body.poses-print-page .poses-share-btn {
        display: none !important;
    }

    body.poses-print-page .poses-image-wrapper.poses-highlighted {
        outline: none !important;
    }
}


/* ==========================================================================
   Restaurant Info (within Logistics)
   ========================================================================== */

.restaurant-info h4 {
    margin: 0.5em 0 0.5em 0;
    font-size: 1em;
    color: #ffffff;
}

.restaurant-notes {
    margin: 0.5em 0 0 0;
    font-size: 0.9em;
    color: #dddddd;
}

.restaurant-details {
    margin: 0.75em 0;
    font-size: 0.9em;
}

.restaurant-details p {
    margin: 0.3em 0;
    color: #dddddd;
}

.restaurant-details strong {
    color: #ffffff;
}

/* ===== Venue Logistics ===== */

.logistics-section {
    margin-top: 1.5em;
    background-color: #555d63;
    border-radius: 0.5em;
    border-left: 4px solid #ff6600;
    overflow: hidden;
}

.logistics-body {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1em;
    padding: 1.5em;
}

.logistics-group {
    background-color: #4a5050;
    border-radius: 0.4em;
    padding: 0.9em 1em;
}

.logistics-group--with-map {
    display: flex;
    flex-direction: column;
    min-height: 300px;
}

.logistics-group-title {
    margin: 0 0 0.5em;
    font-size: 0.95em;
    color: #ff6600;
    display: flex;
    align-items: center;
    gap: 0.4em;
}

.logistics-item {
    margin: 0.25em 0;
    font-size: 0.9em;
    color: #dddddd;
    line-height: 1.4;
}

.logistics-album-list {
    margin: 0.35em 0 0;
    padding-left: 1.1em;
    color: #dddddd;
}

.logistics-album-list li {
    margin: 0.25em 0;
    font-size: 0.9em;
    line-height: 1.4;
}

.logistics-label {
    font-weight: bold;
    color: #ffffff;
}

.logistics-yes {
    color: #66dd66;
}

.logistics-no {
    color: #dd8888;
}

/* ── Expected Attendance Badge ─────────────────────────────────── */
.attendance-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.15em 0.55em;
    border-radius: 1em;
    font-size: 0.85em;
    font-weight: 600;
    background-color: #4a5050;
    color: #dddddd;
    border: 1px solid #6e7a7a;
    white-space: nowrap;
    vertical-align: middle;
}

.attendance-badge--large {
    background-color: #4a2010;
    color: #ff8844;
    border-color: #8a4420;
}

@media (max-width: 600px) {
    .logistics-body {
        grid-template-columns: 1fr;
    }
}

.logistics-calendar-section {
    margin-top: 0.75em;
}

.logistics-calendar-section p {
    margin: 0 0 0.25em;
    font-size: 0.9em;
    color: #dddddd;
}

.logistics-calendar-section strong {
    color: #ffffff;
    font-weight: bold;
}

.logistics-map-container {
    margin-top: 0.75em;
    border-radius: 0.3em;
    overflow: hidden;
    margin-left: -1em;
    margin-right: -1em;
    margin-bottom: -1em;
    width: calc(100% + 2em);
    flex: 1;
    min-height: 180px;
}

/* ── Copy Address Button & Toast ──────────────────────────────── */
.logistics-item--address {
    display: inline;
}

.logistics-item--address a {
    display: inline;
}

/* Address-specific copy button: enforce minimum touch target */
.copy-btn.copy-address-btn {
    margin-left: 0.5em;
    height: 1em;
}

.copy-btn.copy-address-btn:focus-visible {
    outline: 2px solid #ff6600;
    outline-offset: 2px;
}

.restaurant-address-row {
    display: inline;
}

.restaurant-address-row strong {
    display: inline;
    margin-right: 0.25em;
}

.restaurant-address-row a {
    display: inline;
}

.restaurant-address-row .copy-address-btn {
    margin-left: 0.5em;
    height: 1em;
}

.copy-toast {
    position: fixed;
    bottom: 1.5em;
    left: 50%;
    transform: translateX(-50%) translateY(1em);
    background-color: #2c2f33;
    color: #ffffff;
    border: 1px solid rgba(255, 102, 0, 0.5);
    border-radius: 6px;
    padding: 0.6em 1.2em;
    font-size: 0.9em;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 1000;
    pointer-events: none;
}

.copy-toast.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* ── Social Share Buttons ──────────────────────────────────────── */
.event-share {
    margin-top: 1em;
}

.social-share-section {
    margin-top: 0;
}

.social-share-heading {
    margin: 0 0 0.75em;
    font-size: 1em;
    color: #ff6600;
    display: flex;
    align-items: center;
    gap: 0.4em;
}

.social-share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6em;
    margin-top: 0.5em;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    padding: 0.55em 1.1em;
    border-radius: 6px;
    font-size: 0.9em;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.share-btn:focus-visible {
    outline: 2px solid var(--focus-outline-color);
    outline-offset: 2px;
}

.share-btn--bluesky {
    background-color: #0060c7;
    color: #ffffff;
}

.share-btn--bluesky:hover {
    background-color: #0050a8;
}

.share-btn--bluesky:active {
    background-color: #003f85;
}

.share-btn--telegram {
    background-color: #1a7aad;
    color: #ffffff;
}

.share-btn--telegram:hover {
    background-color: #17648b;
}

.share-btn--telegram:active {
    background-color: #124e6d;
}

.share-btn--twitter {
    background-color: #1558a7;
    color: #ffffff;
}

.share-btn--twitter:hover {
    background-color: #0e4a8e;
}

.share-btn--twitter:active {
    background-color: #0a3d75;
}

/* ── Event Map ─────────────────────────────────────────────────── */
.event-map-section {
    margin-bottom: 2em;
}

.event-map-wrapper {
    border-radius: 0.5em;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    height: 100%;

    --map-color-upcoming: #ff6600;
    --map-stroke-upcoming: #cc4400;
    --map-color-past: #9e9e9e;
    --map-stroke-past: #777777;
}

.event-map {
    width: 100%;
    z-index: 0;
    height: 420px;
}

/* Custom camera pin markers */
.event-map-marker {
    width: 24px;
    height: 32px;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
    display: block;
    line-height: 0;
}

.event-map-marker--upcoming {
    color: var(--map-color-upcoming);

    --marker-stroke: var(--map-stroke-upcoming);
}

.event-map-marker--past {
    color: var(--map-color-past);

    --marker-stroke: var(--map-stroke-past);
}

/* Popup styles */
.event-map-popup a {
    color: #ff6600;
    text-decoration: none;
}

.event-map-popup a:hover {
    color: #ff8833;
}

.event-map-popup a:focus-visible {
    outline: 2px solid #ff6600;
    outline-offset: 2px;
    color: #ff8833;
}

.event-map-popup a:active {
    color: #cc5500;
}

.event-map-popup-date {
    font-size: 0.9em;
    color: #222;
}

.event-map-popup-location {
    color: #333;
}

/* Legend */
.event-map-legend {
    display: flex;
    gap: 1.2em;
    padding: 0.5em 0.75em;
    background-color: #555d63;
    font-size: 0.85em;
    color: #fff;
    justify-content: flex-end;
}

.event-map-legend-item {
    display: flex;
    align-items: center;
    gap: 0.4em;
}

.event-map-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1.5px solid #fff;
    flex-shrink: 0;
}

.event-map-dot--upcoming {
    background-color: var(--map-color-upcoming);
}

.event-map-dot--past {
    background-color: var(--map-color-past);
}

/* Map tile colour filter (replaces dynamic JS style injection) */
.event-map .map-tiles {
    filter: grayscale(0.6) brightness(0.5) contrast(1.3) sepia(0.3) hue-rotate(220deg) saturate(1.5);
}

/* Map control theming (replaces inline <style> in event-map.html) */
.event-map .leaflet-control {
    border: 1px solid #555d63;
    background-color: #4a5050 !important;
    border-radius: 0.3em;
}

.event-map .leaflet-control a {
    color: #ff6600;
    background-color: #555d63;
    border: none;
}

.event-map .leaflet-control a:hover {
    background-color: #4a5050;
    color: #ff8833;
}

/* Map height variants */
.event-map--full {
    height: 100%;
}

/* ── Featured Event Card ──────────────────────────────────────────── */
/* Replaces inline background-image; uses <img> + ::after overlay */
.featured-event-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    pointer-events: none;
}

.featured-event::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(100, 100, 100, 0.5);
    mix-blend-mode: multiply;
    transition: opacity 100ms linear;
    opacity: 0.7;
    pointer-events: none;
    border-radius: inherit;
}

.featured-event:hover::after {
    opacity: 1;
}

/* ── Header nav links ────────────────────────────────────────────── */
.header-nav-link {
    text-decoration: none;
    color: white;
}

/* ── Footer ──────────────────────────────────────────────────────── */
.footer-email {
    color: white;
}

.footer-flags {
    display: flex;
    align-items: center;
    column-gap: 0.5em;
}

.pwa-install-btn--visible {
    display: inline-flex;
}

/* ── Single page event image wrapper ────────────────────────────── */
.event-image-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* ── Events list / past nav link container ───────────────────────── */
.view-all-link-container {
    text-align: center;
    margin-top: 20px;
}

/* ── Event card image placeholder ───────────────────────────────── */

/* ── Payment page ────────────────────────────────────────────────── */
.payment-bio {
    align-items: flex-start;
}

.payment-logo-wrapper {
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.payment-bio .payment-logo {
    width: 180px;
    height: auto;
    border-radius: 0;
    object-fit: contain;
}

.payment-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.payment-contact {
    margin-top: 2rem;
}

.copy-btn {
    padding: 0.25rem;
    cursor: pointer;
    background: transparent;
    border: none;
    display: inline-flex;
    align-items: center;
}

.copy-icon,
.icon-block {
    display: block;
}

/* ── Search (moved from inline <style> in search.html) ───────────── */
.search-container {
    margin: 1em 0;
}

.pagefind-ui__search-input {
    border-radius: 0.5em;
    padding: 0.5em;
    border: 2px solid #d4369e;
    font-family: Avenir, sans-serif;
    background-color: #ffffff;
    color: #000000;
}

.pagefind-ui__search-input::placeholder {
    color: #999999 !important;
}

/* Pagefind CSS variables are defined in :root above */

.pagefind-ui {
    --pagefind-ui-text: #ffffff !important;
    --pagefind-ui-background: #4a5050 !important;
    --pagefind-ui-primary: #ff6600 !important;
}

/* Force all Pagefind text to white */

.pagefind-ui__result {
    background-color: #4a5050;
    border-radius: 1em;
    padding: 1em;
    margin-bottom: 1em;
    color: #ffffff;
    font-family: Avenir, sans-serif;
}

.pagefind-ui__result * {
    color: #ffffff !important;
    font-family: Avenir, sans-serif !important;
}

.pagefind-ui__result-inner {
    color: #ffffff !important;
}

.pagefind-ui__result-title {
    color: #ff6600 !important;
    font-family: Avenir, sans-serif !important;
    font-weight: bold !important;
}

.pagefind-ui__result-title a {
    color: #ff6600 !important;
}

.pagefind-ui__result-excerpt {
    color: #ffffff !important;
    font-family: Avenir, sans-serif !important;
}

/* Keep matched-term highlights readable against dark search result cards */

/* Override all metadata and secondary text */

/* Ensure links in results are readable */
.pagefind-ui__result a {
    color: #ff6600 !important;
    text-decoration: underline;
}

.pagefind-ui__result a:visited {
    color: #ff8833 !important;
}

/* Force white text on all result tags and secondary elements */
.pagefind-ui__result-tag,
.pagefind-ui__result-tags,
.pagefind-ui__search-clear {
    color: #ffffff !important;
}

.pagefind-ui__message {
    color: #ffffff !important;
}

.pagefind-ui__button {
    background-color: #ff6600;
    color: #ffffff;
    border: none;
    border-radius: 0.5em;
    padding: 0.5em 1em;
    font-family: Avenir, sans-serif;
    cursor: pointer;
}

.pagefind-ui__button:hover {
    background-color: #ff8833;
}

/* Style filter labels and text */
.pagefind-ui__filter-name,
.pagefind-ui__filter-label {
    color: #ffffff !important;
}

/* Ensure all Pagefind text inherits white color */
.search-container .pagefind-ui {
    --pagefind-ui-text: #ffffff !important;
}

/* Custom scrollbars */
html {
    scrollbar-color: #ff6600 #3a3f3a;
    scrollbar-width: thin;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background-color: #3a3f3a;
}

::-webkit-scrollbar-thumb {
    background-color: #ff6600;
    border-radius: 5px;
    border: 2px solid #3a3f3a;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #ff8833;
}

/* ==========================================================================
   Form Grid Layout
   ========================================================================== */

.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25em;
    width: 100%;
}

/* ==========================================================================
   Back to Top (global)
   ========================================================================== */

.back-to-top {
    position: fixed;
    right: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: none;
    background: rgba(255, 102, 0, 0.9);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index: 999;
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: rgba(255, 136, 51, 0.9);
}

.back-to-top:focus-visible {
    outline: 2px solid var(--focus-outline-color, #fff);
    outline-offset: 2px;
}

@media (max-width: 480px) {
    .back-to-top {
        right: 12px;
        bottom: 12px;
        width: 40px;
        height: 40px;
    }
}

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

@media print {
    .back-to-top {
        display: none !important;
    }
}