form,
fieldset,
legend,
label {
    all: unset; /* Reset all inherited and default properties */
    box-sizing: border-box; /* Ensure consistent box sizing */
}

form {
    display: block; /* Restore block layout for the form */
}
button,
input,
select,
textarea {
    background: none;
    border: 1px solid #ccc; /* Add a simple border */
    margin: 0;
    padding: 0;
    color: inherit; /* Inherits the color from its parent */
    font-family: inherit; /* Inherits the font-family from its parent */
    font-size: inherit; /* Inherits the font-size from its parent */
    line-height: inherit; /* Inherits the line-height from its parent */
    outline: none; /* Removes the focus outline - consider accessibility implications */
    width: auto; /* Overrides width to prevent full width inputs in some browsers */
    -webkit-appearance: none; /* Removes default styling provided by the browser */
    -moz-appearance: none;
    appearance: none;
}

/* Remove inner padding and search cancel button in Safari and Chrome on macOS */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
}

/* Resets for option elements */
option {
    font-weight: normal;
}

/* Ensure all form elements are block level or inline-block so they can be managed easily */
button,
input,
select,
textarea {
    display: inline-block;
}

button,
[class*="-button"] {
    font-weight: var(--ode-body-button);
}

/* Style adjustments for file input */
input[type="file"] {
    display: block;
}

textarea {
    overflow: auto; /* Allows the textarea to resize as needed */
    resize: vertical; /* Allows vertical resize, none to disable resize */
}
/* Style focus states for accessibility */
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 1px dotted #333; /* Custom focus style to replace the browser default */
}

/* Font Specifications */

.instrument-serif-regular {
    font-family: var(--ode-editorial);
    letter-spacing: var(--ode-editorial-letter-spacing);
    font-weight: 400;
    font-style: normal;
}

.instrument-serif-regular-italic {
    font-family: var(--ode-editorial);
    letter-spacing: var(--ode-editorial-letter-spacing);
    font-weight: 400;
    font-style: italic;
}
body {
    font-family: var(--ode-body);
    font-optical-sizing: auto;
    font-weight: var(--ode-body-weight);
    font-style: normal;
    margin: 0;
    background-color: var(--bg-color);
}
@media (min-width: 1065px) {
    main {
        padding-top: 131.5px;
    }
}
@media (max-width: 1064px) {
    main {
        padding-top: 62px;
    }
}
.desktop-header {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    position: fixed;
    z-index: 1000;
    background-color: var(--bg-color-translucent); /* translucent by default */
    width: 100%;
    backdrop-filter: var(--desktop-header-blur);
    -webkit-backdrop-filter: var(--desktop-header-blur); /* For Safari */
    border-top: 1px solid #c2c2c2;
    font-weight: 400;
}
.desktop-header .top-header {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* let search grow to fill remaining space */
    width: 100%;
    padding: 0 20px; /* Ensure the content is aligned with the screen edges, no top padding */
    box-sizing: border-box; /* Ensures padding is included in the element's width */
    height: 70px;
    flex-wrap: nowrap; /* keep one row; prevent internal wrap */
}
.desktop-header {
    transition:
        transform 0.25s cubic-bezier(0.42, 0, 0.58, 1),
        opacity 0.2s;
}

/* Desktop: when search is open, make header fully opaque */
@media (min-width: 900px) {
    .desktop-header {
        transition:
            background-color 140ms ease,
            transform 0.25s cubic-bezier(0.42, 0, 0.58, 1),
            opacity 0.2s;
    }
    body.desktop-search-open .desktop-header,
    body.notifications-open .desktop-header {
        background-color: var(--bg-color);
    }
}

/* Mobile: when search is open, make header fully opaque */
@media (max-width: 768px) {
    body.mobile-search-open .mobile-header .top-bar {
        background: var(--bg-color);
    }
}

.desktop-header.header-hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    /* Optional: Add box-shadow or drop effect as needed */
}
.desktop-header .top-header > div,
.desktop-header .top-header > input,
.desktop-header .top-nav,
.auth-buttons {
    display: flex;
    align-items: center;
    padding: 0;
    padding-right: 5px;
}

.desktop-header .top-header .logo {
    flex: 0 0 auto; /* logo never grows */
    margin-right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* Ensure no padding */
    height: 70px;
}
#home-logo {
    cursor: pointer;
}
#home-logo-mobile {
    cursor: pointer;
}
#home-logo img,
#home-logo-mobile img {
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; /* prevents text-selection cursors on weird browsers */
}
.desktop-header .top-header .search-bar {
    flex: 1;
    height: 70px;
    border: none;
}
.search-bar-wrapper {
    position: relative;
    flex: 1 1 auto; /* search expands to fill unused space */
    display: flex;
    align-items: center;
    height: 70px;
    border-left: 1px solid var(--search-border-colors);
    border-right: 1px solid var(--search-border-colors);
    color: var(--main-text-color);
    min-width: 0; /* allow shrinking in flex so nav/auth stay on one line */
}

/* Ensure the form stretches to fill the wrapper so the input
   can occupy the entire expanded space. */
.search-bar-wrapper form {
    flex: 1 1 auto;
}

.search-bar-wrapper .search-bar {
    flex: 1;
    font-size: var(--top-nav-size);
    border: none;
    height: 100%;
    padding-left: 50px; /* Ensure typed text is not covered */
    outline: none; /* Remove the focus outline */
}

.search-bar-wrapper .search-bar::placeholder {
    color: var(
        --search-text-placeholder
    ); /* Optional: match placeholder color with the icon */
}

/* Desktop search input should fill its flex container so the
   entire expanded area is clickable and focuses the field. */
.search-bar {
    width: 100%;
    max-width: none;
}

.search-results-popover {
    position: absolute;
    top: 100%;
    /* Align borders perfectly with the wrapper's 1px sides */
    left: -1px;
    width: calc(100% + 2px);
    box-sizing: border-box;
    background: var(--bg-color);
    border: 1px solid var(--search-border-colors);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    overflow-y: auto;
    max-height: 80vh; /* Fallback max height; precise height set via JS */
    -webkit-overflow-scrolling: touch;
    padding-top: 5px;
}

/* (Reverted) No desktop-specific blur/dim for search popover/nav */

.search-results-popover.hidden {
    display: none;
}

.search-results-popover .suggestion-section {
    white-space: nowrap;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    color: var(--main-text-color);
    font-size: 10px;
    outline: 0;
    border: var(--category-event-border);
    width: fit-content;
    border-radius: 20px;
    font-weight: var(--ode-body-button);
    text-decoration: none;
    margin-left: 10px;
    text-transform: uppercase;
    margin-bottom: 10px;
    margin-top: 15px;
}

.search-results-popover .suggestion-item {
    padding: 8px 12px;
    cursor: pointer;
    color: var(--main-text-color);
    text-decoration: none;
    font-size: var(--top-nav-size);
    font-weight: var(--ode-body-weight);
}
.search-results-popover .suggestion-item .suggestion-event-date {
    margin-top: 5px;
    font-size: 12px;
    font-weight: 450;
    color: var(--sub-text-color);
}
.search-results-popover .suggestion-item:hover {
    color: var(--main-text-color);
    background-color: transparent;
    text-decoration: underline;
    text-decoration-color: var(--ode-blue);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
[data-theme="dark"] .search-results-popover .suggestion-item:hover {
    color: var(--search-text-hover);
    background-color: var(--ode-blue);
    text-decoration: none;
}
@media (max-width: 768px) {
    .search-results-popover .suggestion-item {
        font-size: 14px;
    }
    .search-results-popover .suggestion-item .suggestion-event-date {
        font-size: 12px;
    }
    .search-results-popover .suggestion-item:hover,
    [data-theme="dark"] .search-results-popover .suggestion-item:hover {
        color: var(--main-text-color);
        background-color: transparent;
        text-decoration: underline;
        text-decoration-color: var(--ode-blue);
        text-decoration-thickness: 2px; /* thicker underline */
        text-underline-offset: 3px;
    }
    .search-results-popover .suggestion-item:hover .suggestion-event-date {
        color: var(--sub-text-color);
    }
}

/* Ensure event date colors on hover */
.search-results-popover .suggestion-item:hover .suggestion-event-date {
    color: var(--sub-text-color);
}
[data-theme="dark"]
    .search-results-popover
    .suggestion-item:hover
    .suggestion-event-date {
    color: var(--search-text-hover);
}

.search-bar-wrapper .search-icon {
    position: absolute;
    left: 20px; /* Position the icon */
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* Let clicks pass through to the input */
}

.desktop-header .top-nav {
    flex: 0 0 auto; /* menu only as wide as content */
    padding-left: 25px;
    padding-right: 10px;
    contain: paint; /* isolate paint to avoid flex jitter affecting siblings */
    transform: translateZ(
        0
    ); /* create its own layer for stable rasterization */
    will-change: transform;
}

/* Keep nav and auth controls on a single line */
.desktop-header .top-nav,
.auth-buttons {
    white-space: nowrap;
}

.desktop-header .top-nav a {
    margin: 0 15px;
    text-decoration: none;
    color: var(--main-text-color);
    font-size: var(--top-nav-size);
    -webkit-tap-highlight-color: transparent; /* Remove iOS tap flash that can jiggle layout */
    font-synthesis: none; /* Prevent synthetic bold on iOS */
    text-rendering: optimizeLegibility; /* Consistent shaping */
    line-height: 1; /* Lock line box to avoid flicker */
}
.desktop-header .top-nav a:first-child {
    margin-left: 0;
}
.desktop-header .top-nav a:hover {
    text-decoration: none;
    color: var(--link-text-hover);
}
/* Notifications menu (desktop) */
.notifications-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 0px;
}
.notifications-toggle {
    background: transparent;
    border: 0;
    padding: 0 12px;
    height: 71px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.notifications-toggle svg {
    width: 22px;
    height: 22px;
    transform: translateY(0px);
}
.notifications-toggle svg {
    display: block;
}
.notifications-toggle.notifications-toggle-mobile svg {
    width: 20px;
    height: 20px;
}
.notifications-menu:hover .notifications-toggle svg path {
    stroke: var(--link-text-hover);
}
.notifications-dropdown {
    position: fixed;
    top: 0;
    left: 0;
    width: 460px;
    max-height: 70vh;
    background: var(--bg-color);
    color: var(--main-text-color);
    border: 1px solid var(--search-border-colors);
    border-radius: 0;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    z-index: 1000;
}
@media (min-width: 769px) {
    .notifications-dropdown {
        width: min(500px, calc(100vw - 40px));
    }
}
.notifications-dropdown--mobile {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    height: 100svh;
    max-height: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    z-index: 2500;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    overscroll-behavior: none;
    --notifications-mobile-list-padding: 32px;
}
.notifications-dropdown-header {
    padding: 13.5px 20px;
    font-family: var(--ode-header);
    font-size: 28px;
    font-weight: var(--ode-header-weight);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
@media (max-width: 768px) {
    .notifications-dropdown-header {
        font-size: 28px;
    }
}
.notifications-dropdown ul {
    max-height: 52vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.notifications-dropdown-header .close-btn {
    position: static;
    width: auto;
    height: auto;
    margin-left: auto;
}
.notifications-dropdown--mobile .notifications-dropdown-header,
.notifications-dropdown--mobile .notifications-dropdown-footer {
    flex: 0 0 auto;
    background: var(--bg-color);
    z-index: 1;
}
.notifications-dropdown--mobile .notifications-dropdown-header {
    position: sticky;
    top: 0;
}
.notifications-dropdown--mobile ul {
    flex: 1 1 auto;
    height: auto;
    max-height: 100%;
    min-height: 0; /* allow list to shrink within grid middle track */
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding-bottom: calc(
        var(--notifications-mobile-list-padding, 32px) +
            env(safe-area-inset-bottom, 0px)
    );
}
.notifications-dropdown--mobile ul::after {
    content: "";
    display: block;
    height: calc(
        var(--notifications-mobile-list-padding, 32px) +
            env(safe-area-inset-bottom, 0px)
    );
}
.notifications-dropdown--mobile .notifications-dropdown-footer {
    position: sticky;
    bottom: 0;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
.notifications-dropdown-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--search-border-colors);
    display: flex;
    justify-content: center;
}
.notifications-view-all {
    color: var(--main-text-color);
    text-decoration: none;
    font-weight: var(--ode-body-button);
}
.notifications-view-all:hover {
    text-decoration: underline;
    color: var(--link-text-hover);
}
/* Keep link metrics stable during tap/focus on touch devices */
.desktop-header .top-nav a:focus,
.desktop-header .top-nav a:active {
    outline: none;
}
.auth-buttons {
    flex: 0 0 auto; /* auth cluster only as wide as needed */
    gap: 10px;
}

/* Tweak spacing around ~tablet widths to avoid crowding */
@media (max-width: 1200px) {
    .desktop-header .top-nav a {
        margin: 0 12px;
    }
    .desktop-header .top-nav a:first-child {
        margin-left: 0;
    }
    .auth-buttons button {
        padding: 9px 26px;
    }
}

/* (Search grows at all sizes; no special desktop override needed) */

.auth-buttons button {
    background: transparent;
    border: 1px solid var(--login-button-outline);
    padding: 11px 30px;
    border-radius: 25px;
    cursor: pointer;
    color: var(--login-button-text);
    text-decoration: none;
    font-weight: var(--ode-body-button);
    width: 120px;
}

.auth-buttons .signup {
    background: var(--signup-button-background);
    color: var(--signup-button-text);
    border: 1px solid var(--signup-button-outline); /* Originally:  1px solid var(--signup-button-outline) */
}
.auth-buttons .signup:hover {
    background: var(--profile-edit-button-background-hover);
    color: var(--signup-button-text);
    border: var(
        --profile-edit-button-outline-hover
    ); /* Originally:  1px solid var(--signup-button-outline) */
}
.bottom-nav {
    display: flex;
    justify-content: flex-start;
    padding: 20px 10px;
    border-top: 1px solid var(--search-border-colors);
    border-bottom: 1px solid var(--search-border-colors);
    font-size: var(--top-nav-size);
}

.bottom-nav a {
    margin: 0 15px;
    text-decoration: none;
    color: var(--main-text-color);
}
.bottom-nav a:hover {
    color: var(--link-text-hover);
    text-decoration: none;
}
.sub-header {
    padding: 10px 20px;
    color: #000;
    font-weight: 500;
    font-size: 14px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #c2c2c2;
    padding-bottom: 15px;
    padding-top: 15px;
}

.sub-header a {
    color: #707070;
    font-size: 14px;
    text-decoration: none;
}

.sub-header a:hover {
    color: #000;
    text-decoration: none;
}

.back-link-nav {
    vertical-align: middle;
    display: inline-block;
}

/* Event Page Details */
.event-details {
    display: flex;
    justify-content: center;
    gap: 90px;
    padding-top: 30px;
    padding-bottom: 30px;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 60px;
    padding-right: 60px;
}
.event-image-block {
    flex: none; /* Reduce width to allow peeking */
    overflow: hidden;
    box-sizing: border-box;
    text-align: left;
    scroll-snap-align: start;
    color: var(--main-text-color);
    padding: var(--event-card-individual-padding);
    border-radius: var(--event-card-border-radius);
    box-shadow: var(--event-card-shadow-hover);
    position: relative;
    background-color: var(--event-card-bg);
}
.event-image-block__poster {
    position: relative;
    z-index: 1;
}

.event-image-block img {
    height: auto; /* Maintain the aspect ratio */
    max-width: 100%;
    aspect-ratio: 10 / 11;
    object-fit: cover;
    object-position: center;
    border-radius: 35px;
    display: block;
    position: relative;
    z-index: 1;
}
.event-image {
    flex: 0 0 50%; /* Reduce artwork column so the center line matches the provided layout */
    max-width: 41%;
}
.event-info {
    flex: 1 1 50%;
    max-width: 610px;
    width: 100%;
    justify-content: center;
    padding-bottom: 30px;
}

.event-info h1 {
    font-family: var(--ode-header);
    letter-spacing: -1px;
    font-weight: 400;
    font-style: normal;
    font-size: 65px;
    text-wrap: balance;
    line-height: 1;
    margin: 0;
    padding-top: 10px;
    color: var(--main-text-color);
    /* font-family: "Cormorant Garamond", serif;
	font-weight: 500; */
}
.event-info h2 {
    font-size: 20px;
    padding-top: 20px;
    color: var(--main-text-color);
    border-top: var(--universal-grey) 1px solid;
    font-weight: var(--ode-header-weight);
    font-family: var(--ode-header);
    padding-bottom: 0;
}
.event-info h3 {
    font-size: 16px;
    padding-top: 26px;
    color: var(--main-text-color);
    border-top: var(--universal-grey) 1px solid;
    font-weight: 550;
    padding-bottom: 0;
}
.event-ai-summary-block {
    padding: var(--event-ai-summary-padding);
    border-radius: var(--event-ai-summary-border-radius);
    border: 1px solid var(--universal-grey);
    box-shadow: none;
    margin-top: 24px;
    background-color: unset;
}
.event-ai-summary__header {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--main-text-color);
    font-size: 20px;
    font-weight: var(--ode-header-weight);
    font-family: var(--ode-header);
    margin: 0 0 8px 0;
}
.event-ai-summary__icon {
    color: var(--main-text-color);
    flex-shrink: 0;
    display: block;
    width: 45px;
    height: 45px;
    transform: translateY(2px);
}
.event-ai-summary__body {
    margin: 0;
}

/* Accordion for Price / Organizer / Location */
.event-accordion {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--universal-grey);
    border-bottom: 1px solid var(--universal-grey);
}
.event-accordion-item {
    margin: 0;
}
.event-accordion-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--main-text-color);
    font-size: 20px;
    font-weight: var(--ode-header-weight);
    font-family: var(--ode-header);
    padding: 22px 0; /* balanced spacing top/bottom */
    -webkit-tap-highlight-color: transparent;
}
.event-accordion-header:focus {
    outline: none;
    box-shadow: none;
}
.event-accordion-header:focus-visible {
    outline: 2px solid var(--universal-grey);
    outline-offset: 4px;
}
.event-accordion-header:active {
    background: transparent;
}
.event-accordion-item + .event-accordion-item .event-accordion-header {
    border-top: 1px solid var(--universal-grey);
}
.event-accordion-item:last-child {
    border-bottom: 0;
}
.event-accordion-header .caret {
    transition: transform 0.18s ease;
}
.event-accordion-header .caret path {
    stroke-width: 1.4; /* slightly thinner caret */
}
.event-accordion-header[aria-expanded="true"] .caret {
    transform: rotate(180deg); /* up */
}
/* Keep header padding consistent to avoid layout shift */
.event-accordion-header[aria-expanded="true"] {
    padding: 22px 0;
}
.event-accordion-header.is-static {
    cursor: default;
    padding: 22px 0;
}
.event-accordion-header.is-static .caret {
    display: none;
}
.event-accordion-panel {
    overflow: hidden;
    max-height: 0;
    transition:
        max-height 0.12s ease-out,
        padding 0.12s ease-out;
    padding: 0; /* no padding when collapsed to prevent bleed-through */
}
.event-accordion-panel.is-open {
    margin-top: -22px; /* pull panel upward to offset header padding */
    padding: 15px 0 22px; /* content starts 15px below header, bottom spacing intact */
}
.event-accordion-panel .event-sub-box {
    padding-bottom: 0;
}
.event-accordion-panel > *:first-child {
    margin-top: 0;
}
.event-accordion-panel > *:last-child {
    margin-bottom: 0;
}
.event-accordion-panel .event-organizer-panel {
    margin-bottom: 0px;
}
.event-static-panel {
    max-height: none;
    overflow: visible;
    margin-top: -22px;
    padding: 15px 0 22px;
}

.event-fade-reveal {
    position: relative;
}

.event-fade-reveal::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
}

.event-fade-reveal[data-expanded="false"] {
    padding-bottom: 20px;
}

.event-fade-reveal[data-expanded="false"] .event-fade-reveal__content {
    max-height: 240px;
    overflow: hidden;
}

.event-fade-reveal--map[data-expanded="false"] {
    padding-bottom: 15px;
}

.event-fade-reveal--map[data-expanded="false"] .event-fade-reveal__content {
    max-height: 220px;
}

.event-fade-reveal--details[data-expanded="false"] {
    padding-bottom: 30px;
}

.event-fade-reveal--details[data-expanded="false"] .event-fade-reveal__content {
    max-height: 420px;
}

.event-fade-reveal[data-expanded="false"]::after {
    height: 170px;
    background: var(--event-fade-overlay);
    opacity: 1;
}

.event-fade-reveal--map[data-expanded="false"]::after {
    height: 250px;
    background: var(--event-fade-overlay-map);
}

.event-fade-reveal--details[data-expanded="false"]::after {
    height: 170px;
    background: var(--event-fade-overlay);
}

.event-fade-reveal[data-expanded="true"]::after {
    display: none;
}

.event-fade-reveal__toggle {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -4px;
    display: inline-flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid var(--universal-grey);
    background: var(--bg-color);
    color: var(--main-text-color);
    cursor: pointer;
    font-size: 15px;
    line-height: 1.1;
    z-index: 2;
    transition: box-shadow 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.event-fade-reveal__toggle:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .event-fade-reveal__toggle {
    background: rgba(12, 13, 14, 0.55);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    box-shadow: none;
}

[data-theme="dark"] .event-fade-reveal__toggle:hover {
    box-shadow: none;
}

.event-fade-reveal__toggle:focus-visible {
    outline: 2px solid var(--universal-grey);
    outline-offset: 3px;
}

.event-fade-reveal--details .event-fade-reveal__toggle {
    bottom: 20px;
}

.event-fade-reveal[data-expanded="true"] .event-fade-reveal__toggle {
    display: none;
}

.event-fade-reveal__caret path {
    stroke-width: 1.5;
}

.organizer-accordion-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    row-gap: 22px;
    margin-top: 5px;
    margin-bottom: 15px;
}
.organizer-accordion-avatar img {
    border-radius: 50%;
    width: 55px;
    height: 55px;
    display: block;
    border: var(--organizer-pfp-outline);
    object-fit: cover;
}
.organizer-accordion-meta {
    flex: 1 1 auto;
    min-width: 0;
}
.organizer-accordion-name {
    font-size: 16px;
    color: var(--main-text-color);
    text-decoration: underline;
    font-weight: var(--ode-body-weight);
    font-family: var(--ode-body);
}
.organizer-accordion-city {
    margin: 0px 0 0;
    color: var(--event-block-desc);
    font-size: 14px;
}
@media (max-width: 1065px) {
    .organizer-accordion-city {
        margin: 0px 0 0;
        color: var(--event-block-desc);
        font-size: 14px;
    }
}
.organizer-accordion-name:hover {
    color: var(--link-text-hover);
    text-decoration: underline;
}
.organizer-accordion-action {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.event-info .event-date {
    color: var(--main-text-color);
    font-size: 20px;
    padding: 0;
    margin: 0;
    padding-top: 10px;
}

/* Event meta with icons (date + location) */
.event-meta {
    color: var(--main-text-color);
    margin: 0;
    padding: 0;
    padding-top: 10px;
}
.event-meta-row {
    display: flex; /* block-level row so lines stack */
    align-items: baseline; /* align icon to text baseline */
    gap: 10px;
    line-height: 1.25;
}
.event-meta-row + .event-meta-row {
    margin-top: 6px;
}

.event-meta .icon {
    width: 1.14em; /* scale with text */
    height: 1.14em; /* scale with text */
    flex: 0 0 auto;
    color: var(--main-text-color);
    transform: translateY(0.08em); /* drop slightly to meet text baseline */
}

/* Slightly larger pin to compensate for inner contour */
.event-meta .icon-location {
    width: 1.24em;
    height: 1.24em;
    transform: translateY(0.1em);
}

/* Slight alignment refinements for smaller screens */
@media (max-width: 768px) {
    .event-meta-row {
        line-height: 1.2;
    }
    .event-meta .icon {
        transform: translateY(0.16em);
    }
    .event-meta .icon-location {
        transform: translateY(0.16em);
    }
    .event-image-block img {
        aspect-ratio: 10 / 11;
        border-radius: 35px;
    }
    .organizer-accordion-avatar img {
        width: 50px;
        height: 50px;
    }
    .organizer-accordion-row {
        align-items: center;
    }
    .organizer-accordion-action {
        margin-left: 0;
    }
}
.event-info .event-location {
    color: var(--main-text-color);
    font-size: 20px;
    padding: 0;
    margin: 0;
}
.event-info .event-location a {
    color: var(--main-text-color);
    font-size: 20px;
    padding: 0;
    margin: 0;
    text-decoration: underline;
}
.event-info .event-location a:hover {
    color: var(--link-text-hover);
    font-size: 20px;
    padding: 0;
    margin: 0;
    text-decoration: underline;
}
.event-info .event-description,
.event-info .event-price {
    margin: 0;
}
.event-description {
    color: var(--sub-text-color);
    font-size: var(--ode-event-indvidual-font-size-desktop);
    font-weight: var(--ode-body-weight);
    line-height: var(--ode-body-description-line-height);
    padding-bottom: 25px;
}
.event-description a {
    color: var(--sub-text-color);
    text-decoration: underline;
}
.event-description a:hover {
    color: var(--main-text-color);
    text-decoration: underline;
}
.event-sub-box {
    padding-bottom: 10px;
    color: var(--sub-text-color);
    font-size: var(--ode-event-indvidual-font-size-desktop);
    line-height: var(--ode-body-description-line-height);
    font-weight: var(--ode-body-weight);
}
.event-organizer-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.organizer-link {
    margin: 0;
    color: var(--sub-text-color);
    font-size: var(--ode-event-indvidual-font-size-desktop);
    line-height: var(--ode-body-description-line-height);
    font-weight: var(--ode-body-weight);
}
.organizer-link a {
    color: var(--sub-text-color);
    text-decoration: underline;
}
.organizer-link a:hover {
    color: var(--link-text-hover);
    text-decoration: underline;
}
.organizer-mini-bio {
    margin: 0;
    color: var(--sub-text-color);
    font-size: var(--ode-event-indvidual-font-size-desktop);
    line-height: var(--ode-body-description-line-height);
    font-weight: var(--ode-body-weight);
}
.organizer-mini-bio a {
    color: var(--sub-text-color);
    text-decoration: underline;
}
.organizer-mini-bio a:hover {
    color: var(--link-text-hover);
    text-decoration: underline;
}
.event-sub-box a {
    color: var(--main-text-color);
    text-decoration: underline;
}
.event-sub-box a:hover {
    color: var(--link-text-hover);
    text-decoration: underline;
}
.event-read-more {
    margin-bottom: 30px;
}
.purchase-button {
    background: var(--ode-blue);
    color: white;
    padding: 20px 20px;
    border: var(--purchase-button-outline);
    cursor: pointer;
    width: 100%;
    border-radius: 50px;
    margin-top: 30px;
    margin-bottom: 12px;
    font-size: 20px;
    font-weight: var(--ode-body-button);
    text-decoration: none; /* Ensure no underline by default */
    transition:
        background-color 0.2s,
        color 0.2s,
        border-color 0.2s;
}

.purchase-button:hover {
    background: var(--purchase-button-background-hover);
    border: var(--purchase-button-outline-hover);
    text-decoration: underline; /* Add underline on hover */
}
.category-button {
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    background: var(--category-button-background);
    color: var(--category-button-text);
    font-size: 12px;
    outline: 0;
    border: var(--category-button-border);
    min-width: 65px;
    border-radius: 20px;
    font-weight: var(--ode-body-button);
    margin-bottom: 10px;
}
.category-button:hover {
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    background: var(--category-button-background-hover);
    color: var(--category-button-text-hover);
    font-size: 12px;
    outline: 0;
    border: var(--category-button-border-hover);
    min-width: 65px;
    border-radius: 20px;
    font-weight: var(--ode-body-button);
    text-decoration: underline;
}
.category-event-button {
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    background: var(--category-event-background);
    color: var(--category-event-text);
    font-size: 12px;
    outline: 0;
    border: var(--category-event-border);
    min-width: 65px;
    border-radius: 20px;
    font-weight: var(--ode-body-button);
    margin-bottom: 10px;
}
.category-event-button:hover {
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    background: var(--category-event-background-hover);
    color: var(--category-event-text-hover);
    font-size: 12px;
    outline: 0;
    border: var(--category-event-border-hover);
    min-width: 65px;
    border-radius: 20px;
    font-weight: var(--ode-body-button);
    text-decoration: underline;
}
.event-info__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: flex-start;
}
.event-info__tags a {
    text-decoration: none;
}
.mobile-header {
    display: none;
    margin-top: 0;
}

.mobile-header .top-bar {
    display: flex;
    flex-direction: column;
    border-top: 1px solid #c2c2c2;
    border-bottom: 1px solid #c2c2c2;
    background: var(--bg-color-translucent); /* <-- This is key! */
    backdrop-filter: var(--desktop-header-blur);
    -webkit-backdrop-filter: var(--desktop-header-blur); /* For Safari */
    transition: background-color 140ms ease;
}
.mobile-header .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0;
}

.mobile-header .logo {
    display: flex;
    align-items: center;
    margin-left: 10px;
    padding-right: 10px;
    height: 60px;
}
.mobile-header .search-bar-wrapper {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    height: 60px;
    border-left: 1px solid #c2c2c2;
    border-right: 1px solid #c2c2c2;
}

.mobile-search-bar {
    all: unset; /* Resets all inherited and default styling */
    display: block; /* Ensure it remains block-level for layout purposes */
    max-width: 380px;
    width: unset; /* Set a default width */
    height: 100%; /* Keep the height consistent */
    font-size: 15px; /* Reapply desired font size */
    padding-left: 45px; /* Reapply desired padding */
    height: 60px; /* Reapply desired height */
    flex: 1; /* Reapply flex behavior */
    outline: none; /* Remove any focus outline */
    box-shadow: none; /* Remove focus box-shadow for some browsers */
    border: none;
}
.mobile-search-bar:focus {
    outline: none; /* Prevent outline on focus */
    box-shadow: none; /* Remove browser-added shadows on focus */
}
.mobile-search-bar::placeholder {
    color: var(--search-text-placeholder);
}

.mobile-header .search-bar-wrapper .search-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 768px) {
    .search-bar-wrapper .search-icon {
        position: absolute;
        left: 15px; /* Position the icon */
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #search-suggestions-mobile {
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        width: 100vw;
        /* Always occupy the remaining viewport height on mobile */
        height: calc(100vh - 60px);
        height: calc(100dvh - 60px);
        height: calc(100svh - 60px);
        max-height: none;
        overflow-y: auto;
        /* Block scroll chaining and rubber-band to page */
        overscroll-behavior: none;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y; /* ensure vertical pan is native */
        box-sizing: border-box;
        border-left: none;
        border-right: none;
        z-index: 1000;
        contain: layout paint;
    }

    #close-search-mobile {
        position: absolute;
        top: 12px; /* align with top edge of popover */
        right: 11px; /* align with mobile content gutter */
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        z-index: 1001;
        width: 40px; /* override .close-btn default size */
        height: 40px; /* keep tappable but not oversized */
    }
    /* Match circular close button visuals for mobile search popover */
    #close-search-mobile svg {
        width: 40px;
        height: 40px;
    }
}

/* Theme Change Containers */
#theme-change,
#theme-change-mobile {
    /* Vertical align */
    justify-content: center; /* Center horizontally if needed */
    width: 20px; /* Match your icon size */
    height: 20px;
    box-sizing: content-box; /* Avoid box model surprises */
    vertical-align: middle; /* Extra insurance for inline context */
}

/* Global fade used when switching between light and dark themes */
body.theme-fade-transition {
    transition: opacity 120ms ease;
}

body.theme-fade-transition.theme-fade-transition-active {
    opacity: 0;
}

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

.hamburger-menu {
    display: flex;
    align-items: center;
    justify-content: center; /* Center the SVG horizontally */
    height: 60px;
    width: 60px;
    background: none;
    border: none;
    padding: 0;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-tap-highlight-color: transparent; /* Android/iOS removal */
}

.hamburger-menu svg rect {
    fill: var(--menu-color);
}
.close-menu svg {
    color: var(--menu-color);
}
/* kill Firefox’s inner focus border */
.hamburger-menu::-moz-focus-inner,
.close-menu::-moz-focus-inner {
    border: 0;
}

/* ensure no outline when focused */
.hamburger-menu:focus,
.close-menu:focus {
    outline: none;
}
.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--bg-color);
    padding: 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    box-sizing: border-box;
    z-index: 2000;
}

.mobile-menu .close-menu {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-tap-highlight-color: transparent; /* Android/iOS removal *
}

.mobile-menu .menu-links {
	margin-top: 50px;
}

.mobile-menu .menu-links a {
	display: block;
	margin: 10px 0;
	text-decoration: none; /* Remove underline from links */
    color: var(--menu-color); /* Make links in the desktop header black */
}
/* Mobile Menu Divider */
.menu-divider {
    height: 1px;
    background-color: var(--universal-grey);
    margin: 20px 0;
}

/* Mobile Menu Section */
.menu-section a {
    display: block;
    margin: 10px 0;
    text-decoration: none;
    color: var(--menu-color);
    font-size: var(--mobile-nav-menu-size);
    line-height: var(--mobile-nav-menu-line-height);
}

.menu-utilities {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 12px;
}

.menu-utilities button,
.menu-utilities a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0px;
    line-height: 0;
    height: unset;
}

.menu-utilities a img,
.menu-utilities svg {
    display: block;
}

/* Adjust spacing */
.mobile-menu .menu-links {
    margin-top: 20px;
}

.sub-header .back-link {
    padding-left: 10px;
    padding-right: 10px;
    text-align: left;
    color: #707070; /* Make back-link the same #707070 as the event description */
    font-size: 14px; /* Slightly smaller than the size of the links in the main header */
    text-decoration: none; /* Remove underline from links */
    display: inline-flex;
}
.back-link img {
    width: 18px;
    height: 18px;
}
footer {
    background: var(--bg-color); /* Light grey background */
    padding: 20px 0;
    color: var(--main-text-color);
    border-top: 1px solid #c2c2c2;
}

.footer-container {
    display: flex;
    justify-content: space-around;
    align-items: start;
    max-width: 100%;
    margin: 0 auto;
    padding-bottom: 20px;
}

.footer-section h4 {
    margin-bottom: 10px;
    font-weight: var(--footer-header-weight);
}

.footer-section ul {
    list-style: none;
    padding: 0;
}

.footer-section li a {
    text-decoration: none;
    color: var(--main-text-color);
    display: block;
    padding: 5px 0;
}
.footer-section li a:hover {
    text-decoration: none;
    color: var(--link-text-hover);
    display: block;
    padding: 5px 0;
}
.copyright-section {
    border-top: 1px solid #c2c2c2;
    margin: 0;
    text-align: left;
    font-size: 11px;
    color: #707070;
    width: 100%;
}
.copyright-section a {
    text-decoration: none;
    color: var(--main-text-color);
    margin-right: 10px;
    margin-left: 10px;
}
.copyright-section a:hover {
    text-decoration: underline;
    color: var(--link-text-hover);
    margin-right: 10px;
    margin-left: 10px;
}
.copyright-text {
    color: var(--main-text-color);
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 30px;
    text-align: left;
}
@media (max-width: 1065px) {
    .desktop-header {
        display: none;
    }

    .mobile-header {
        display: block;
        width: 100%;
        z-index: 1000;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        z-index: 1500;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .mobile-header.header-hidden {
        transform: translateY(-100%);
    }

    .search-bar {
        width: calc(100% + 40px);
    }

    .sub-header .back-link {
        padding-left: 0;
        padding-right: 0;
        text-align: left;
        color: #707070; /* Make back-link the same #707070 as the event description */
        font-size: 0.9em; /* Slightly smaller than the size of the links in the main header */
        text-decoration: none; /* Remove underline from links */
        display: flex;
        align-items: center;
    }
    .back-link img {
        margin-right: 5px;
        width: 15px;
        height: 15px;
    }
    .sub-header {
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 5px;
        padding-bottom: 5px;
        font-size: 12px;
        font-weight: 500;
    }
    .sub-header a {
        color: #707070;
        font-size: 12px;
        text-decoration: none;
        font-weight: 500;
    }
    .sub-header a:hover {
        color: #000;
        font-size: 12px;
        text-decoration: none;
        font-weight: 500;
    }
    .event-info .event-description,
    .event-info .event-price {
        margin: 0;
    }
    .event-details {
        flex-direction: column; /* Stack the image and info vertically */
        padding: 0 var(--content-side-padding);
        padding-top: 20px;
        width: auto;
        gap: clamp(5px, 4vw, 10px);
    }

    .event-image {
        flex: none; /* Let the image fill the column without the desktop flex basis */
        width: 100%; /* Image takes full width on smaller screens */
        max-width: 100%;
        justify-content: flex-start; /* Aligns content to start if needed */
        margin-left: auto;
        margin-right: auto;
    }
    .event-image svg {
        max-width: none; /* Removes the max-width restriction on smaller devices */
    }
    .event-info h1 {
        font-family: var(--ode-header);
        letter-spacing: -1px;
        font-weight: 400;
        font-size: 34px;
        font-style: normal;
        line-height: 1;
        margin: 0;
        padding: 0;
        padding-top: 0px;
        outline: none;
        width: 98%;
        text-align: left;
        margin-left: auto;
        margin-right: auto;
    }
    .event-info__tags {
        justify-content: left;
    }
    .event-info h2 {
        padding-top: 20px;
        border-top: var(--universal-grey) 1px solid;
        font-weight: var(--ode-header-weight);
        font-family: var(--ode-header);
        padding-bottom: 15px;
        margin: 0;
    }
    .event-info h3 {
        font-size: 14px;
        padding-top: 26px;
        border-top: var(--universal-grey) 1px solid;
        padding-bottom: 0;
    }
    .event-info {
        width: 100%; /* Ensure the event info also takes full width */
        max-width: 100%;
        padding: 7px 0; /* Adjust padding for better readability */
        padding-bottom: 30px;
        padding-top: 0px;
        margin-top: 0px;
    }
    .event-info .event-date {
        font-size: 16px;
        padding: 0;
        margin: 0;
        padding-top: 5px;
    }
    /* Match location line to mobile date size */
    .event-info .event-location {
        font-size: 16px;
        padding: 0;
        margin: 0;
    }
    .event-info .event-location a {
        font-size: 16px;
    }
    .event-info .event-location a:hover {
        font-size: 16px;
    }
    .event-image-block {
        flex: none; /* Reduce width to allow peeking */
        width: 100%;
        overflow: none;
        box-sizing: border-box;
        text-align: left;
        margin-bottom: 5px; /* Optional: Adds margin at the bottom */
        scroll-snap-align: start;
        color: var(--main-text-color);
        padding: var(--event-card-individual-padding-responsive);
        border-radius: var(--event-card-border-radius);
        border: none;
        box-shadow: var(--event-card-shadow-hover);
        background-color: var(--event-card-bg);
    }
    .event-ai-summary-block {
        margin-top: 10px;
        margin-bottom: 20px;
        padding: var(--event-ai-summary-padding-responsive);
        padding-bottom: 10px;
        border-radius: var(--event-ai-summary-border-radius-responsive);
        border: 1px solid var(--universal-grey);
        box-shadow: none;
        background: unset;
    }
    .event-image {
        width: 100%; /* Allocate full width of the parent container to the image container */
        display: flex;
        align-items: center; /* Center vertically if needed */
        text-align: center;
        margin: 0px auto 0px auto;
    }
    .event-description {
        font-size: var(--ode-event-indvidual-font-size-responsive);
        margin: 0px 0;
        padding-bottom: 25px;
    }
    .event-sub-box {
        font-size: var(--ode-event-indvidual-font-size-responsive);
    }
    .event-sub-box a {
        font-size: var(--ode-event-indvidual-font-size-responsive);
    }
    .event-sub-box a:hover {
        font-size: inherit;
    }
    .organizer-link {
        font-size: var(--ode-event-indvidual-font-size-responsive);
    }
    .organizer-mini-bio {
        font-size: var(--ode-event-indvidual-font-size-responsive);
    }
    .event-read-more {
        padding-top: 0px;
        padding-bottom: 10px;
        margin-bottom: 20px;
    }
    .purchase-button {
        background: var(--ode-blue);
        color: white;
        border: var(--purchase-button-outline);
        cursor: pointer;
        width: 100%;
        border-radius: 50px;
        margin-top: 20px;
        padding: 18px 18px;
        text-decoration: none; /* Ensure no underline by default */
        margin-bottom: 10px;
        font-size: 18px;
        font-weight: var(--ode-body-button);
        transition:
            background-color 0.2s,
            color 0.2s,
            border-color 0.2s;
    }
    .purchase-button:hover {
        background: var(--purchase-button-background-hover);
        border: var(--purchase-button-outline-hover);
        text-decoration: underline; /* Add underline on hover */
    }
    .category-button {
        padding: 5px;
        padding-left: 10px;
        padding-right: 10px;
        font-size: 10px;
        outline: 0;
        min-width: 50px;
        font-weight: var(--ode-body-button);
        margin-bottom: 10px;
        margin-right: 0px;
    }
    .category-button:hover {
        padding: 5px;
        padding-left: 10px;
        padding-right: 10px;
        font-size: 10px;
        outline: 0;
        min-width: 50px;
        font-weight: var(--ode-body-button);
        text-decoration: underline;
    }
    .footer-container {
        flex-direction: column;
        padding: 0 var(--content-side-padding);
        padding-bottom: 20px;
    }
    .copyright-section {
        border-top: 1px solid #c2c2c2;
        margin: 0;
        text-align: left;
        font-size: 11px;
    }
    .copyright-text {
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 20px;
    }
}
/* Location Styles */
.location-section {
    max-width: 1600px;
    margin: 0 auto;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 30px;
    padding-top: 30px;
}
.location-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: var(--universal-grey) 1px solid;
    padding-top: 20px;
    padding-bottom: 30px;
}
.location-header button {
    background: none;
    border: 1px solid black;
    padding: 10px 30px;
    border-radius: 20px;
    cursor: pointer;
    margin-left: 5px;
    color: black;
    text-decoration: none;
}
.location-header button:hover {
    text-decoration: underline;
}
.auth-buttons .login:hover,
.auth-buttons .signup:hover {
    text-decoration: underline;
}
.location-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.location-title h1 {
    font-size: 50px;
    font-weight: var(--ode-header-weight);
    font-family: var(--ode-header);
    margin: 0;
    padding: 0;
    line-height: 1.2; /* Adjust as needed to ensure proper vertical centering */
    color: var(--main-text-color);
}
.location-title img {
    display: none; /* Hide the original img */
}

.location-title::before {
    content: "";
    display: inline-block;
    width: 60px;
    height: 60px;
    background-image: var(--location-icon);
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 15px;
    margin-top: -4px;
}
.location-content {
    display: flex;
    flex-direction: row; /* Ensure columns are side by side */
    justify-content: space-between;
    margin-top: 30px;
    font-size: 16px;
}
.location-events-block {
    border-top: 1px solid var(--universal-grey);
}
.location-content h2:first-child:not(.organizer-section-heading) {
    font-size: 20px;
    margin: 0;
    padding-top: 0;
    color: var(--main-text-color);
    font-weight: var(--ode-header-weight);
    font-family: var(--ode-header);
    border-top: none;
}
.location-content h2:not(.organizer-section-heading) {
    font-size: 20px;
    margin: 0;
    padding-top: 30px;
    color: var(--main-text-color);
    font-weight: var(--ode-header-weight);
    font-family: var(--ode-header);
    border-top: none;
    border-top: var(--universal-grey) 1px solid;
}
.location-sub-box {
    padding-top: 20px;
    padding-bottom: 13px;
    color: var(--sub-text-color);
    font-size: 16px;
    line-height: var(--ode-body-description-line-height);
}
.location-sub-box a {
    color: var(--sub-text-color);
    font-size: 16px;
    text-decoration: underline;
}
.location-left-column,
.location-right-column {
    flex: 1;
}

.location-left-column {
    max-width: 60%;
    padding-right: 50px;
    color: var(--sub-text-color);
}

.location-right-column {
    justify-content: center;
    max-width: 40%;
    margin-top: 0; /* Ensure no top margin */
    flex-direction: column;
    align-items: stretch;
}

.location-map-placeholder {
    max-width: 800px;
    height: 600px;
}
.location-map-placeholder iframe {
    width: 100%;
    height: 100%;
    border: 0;
    outline: none;
}
.location-page-map-placeholder img {
    border-radius: 16px;
    border: var(--event-image-border);
    outline: none;
}
.location-page-map-placeholder {
    width: 100%;
    height: 400px;
    padding-top: 20px;
    padding-bottom: 40px;
    border-radius: var(--event-card-border-radius-inset);
    border: var(--event-image-border);
}
.location-page-map-placeholder iframe {
    width: 100%;
    height: 100%;
    border: 0;
    outline: none;
    border-radius: var(--event-card-border-radius-inset);
}
.location-map-placeholder img {
    border-radius: var(--event-card-border-radius-inset);
    border: var(--event-image-border);
    outline: none;
}

.location-address--right {
    display: block;
    width: 100%;
    margin-top: 20px;
}

@media (min-width: 769px) {
    .location-left-column .location-address--left {
        display: none;
    }

    .location-left-column .location-address-heading--left {
        display: none;
    }

    .location-address--right {
        margin-top: 20px;
    }
}
@media (max-width: 768px) {
    .location-content {
        flex-direction: column-reverse; /* Stack columns with map on top */
        margin-top: 15px;
        padding-right: 12px;
        padding-left: 12px;
    }

    .location-left-column,
    .location-right-column {
        max-width: 100%;
    }
    .location-left-column {
        padding-right: 0;
        color: #707070;
    }
    .location-section {
        margin: 0 auto;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
    .location-map-placeholder {
        height: 100%;
        max-width: 800px;
        max-height: 800px;
        padding-top: 0;
        padding-bottom: 10px;
    }
    .location-map-placeholder iframe {
        width: 100%;
        height: 300px;
        border-radius: var(--event-card-border-radius-inset);
        border: 0;
        outline: none;
    }
    .location-map-placeholder img {
        outline: none;
    }
    .location-page-map-placeholder {
        height: 300px;
        max-width: 800px;
        max-height: 800px;
        padding-top: 15px;
        padding-bottom: 10px;
        margin-bottom: 15px;
    }
    .location-page-map-placeholder iframe {
        width: 100%;
        height: 300px;
        border-radius: var(--event-card-border-radius-inset);
        border: 0;
        outline: none;
    }
    .location-header {
        padding-bottom: 20px;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 20px;
    }
    .location-title h1 {
        font-size: 28px;
        font-weight: var(--ode-header-weight);
        font-family: var(--ode-header);
        margin: 0;
        width: 100%;
        text-align: center;
        line-height: 1.2;
        margin-top: 5px;
    }
    .location-title {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        align-content: center;
        text-align: center;
    }

    .location-title img {
        display: none; /* Hide the original image */
    }

    .location-title::before {
        content: "";
        display: inline-block;
        width: 60px;
        height: 60px;
        background-image: var(--location-icon);
        background-size: contain;
        background-repeat: no-repeat;
        margin: 0 auto 5px auto; /* Center horizontally and add bottom margin */
        align-items: center;
    }
    .location-content h2:first-child:not(.organizer-section-heading) {
        font-size: 16px;
        margin: 0;
        padding-top: 20px;
        padding-bottom: 0px;
        font-weight: var(--ode-header-weight);
        font-family: var(--ode-header);
        border-top: var(--universal-grey) 1px solid;
    }
    .location-content h2:not(.organizer-section-heading) {
        font-size: 16px;
        margin: 0;
        padding-top: 20px;
        padding-bottom: 0px;
        font-weight: var(--ode-header-weight);
        font-family: var(--ode-header);
        border-top: var(--universal-grey) 1px solid;
    }
    .location-sub-box {
        padding-top: 15px;
        padding-bottom: 15px;
        font-size: 14px;
    }
    .location-sub-box a {
        font-size: 14px;
    }
}
/* Organizer Content Styles */
.organizer-section {
    max-width: 1600px;
    margin: 0 auto;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 30px;
    padding-top: 30px;
}

/* Desktop Styles */
.organizer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: var(--universal-grey) 1px solid;
    padding-top: 20px;
    padding-bottom: 30px;
}

.organizer-title-left {
    display: flex;
    align-items: center;
}

.organizer-title-left h1 {
    font-size: 55px;
    font-weight: var(--ode-header-weight);
    font-family: var(--ode-header);
    margin: 0;
    padding-right: 10px;
    line-height: 1; /* Adjust as needed to ensure proper vertical centering */
    color: var(--main-text-color);
    text-wrap: balance;
}

.organizer-title-left img {
    margin-right: 15px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: var(--organizer-pfp-outline);
}

/* Default SVG size (Desktop) */
.checkmark-icon {
    width: 16px;
    height: 16px;
    margin-right: 5px; /* Space between the checkmark and the text */
    vertical-align: middle;
}

/* Mobile-specific size */
@media (max-width: 768px) {
    .checkmark-icon {
        width: 12px;
        height: 12px;
    }
}

/* Follow Button - Desktop */
.org-follow-button {
    background: none;
    color: var(--main-text-color);
    border: var(--organizer-follow-button-outline-unset);
    cursor: pointer;
    height: 40px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: var(--ode-body-button);
    text-decoration: none;
    transition:
        background-color 0.3s,
        color 0.3s;
    width: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.org-following-button {
    background: var(--ode-blue);
    color: #fff;
    border: var(--organizer-follow-button-outline-set);
    cursor: pointer;
    height: 40px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: var(--ode-body-button);
    text-decoration: none;
    transition:
        background-color 0.3s,
        color 0.3s;
    width: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.org-following-button .checkmark-icon {
    stroke-width: 2px; /* Makes the stroke of the checkmark 1px */
}

.org-follow-button:hover {
    text-decoration: underline;
}

.org-following-button:hover {
    text-decoration: underline;
}
.organizer-content {
    display: flex;
    flex-direction: row; /* Ensure columns are side by side */
    justify-content: space-between;
    font-size: 16px;
}
.organizer-load-button {
    background: var(--settings-button-background);
    color: var(--settings-button-text);
    padding: 20px 20px;
    border: none;
    cursor: pointer;
    width: 100%;
    border-radius: 50px;
    margin-top: 30px;
    font-size: 20px;
    font-weight: var(--ode-body-button);
    border: var(--settings-button-outline);
    text-decoration: none; /* Ensure no underline by default */
}
.organizer-load-button:hover {
    background: var(--settings-button-background-hover);
    color: var(--settings-button-text-hover);
    border: var(--settings-button-outline);
    text-decoration: underline;
}
.organizer-load-more {
    margin-bottom: 25px;
    border-top: 1px solid var(--universal-grey);
}
.organizer-read-button {
    background: var(--settings-button-background);
    color: var(--settings-button-text);
    padding: 20px 20px;
    border: none;
    cursor: pointer;
    width: 100%;
    border-radius: 50px;

    font-size: 20px;
    font-weight: var(--ode-body-button);
    border: var(--settings-button-outline);
    text-decoration: none; /* Ensure no underline by default */
}
.organizer-read-button:hover {
    background: var(--settings-button-background-hover);
    color: var(--settings-button-text-hover);
    border: var(--settings-button-outline);
    text-decoration: underline;
}
.organizer-read-more {
    margin-bottom: 35px;
}
#full-description {
    padding-bottom: 15px;
}
#short-description {
    padding-bottom: 15px;
}
@media (max-width: 768px) {
    .organizer-content {
        flex-direction: column; /* Stack columns vertically */
        font-size: 14px;
        padding-left: 15px;
        padding-right: 15px;
    }

    .location-section .organizer-about-column {
        order: 1;
    }

    .location-section .organizer-events-column {
        order: 2;
    }

    .organizer-section {
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 30px;
        padding-top: 10px;
        font-size: 14px;
        width: 100%;
    }

    .organizer-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 10px;
        padding-bottom: 25px;
        padding-left: 10px;
        padding-right: 10px;
        border-bottom: var(--universal-grey) 1px solid;
    }

    .organizer-title-left {
        display: flex;
        flex-direction: column; /* Stack image and label vertically */
        align-items: center; /* Center align items */
        text-align: center;
        width: 95%;
        margin: 0 auto;
        padding-bottom: 15px;
    }

    .organizer-title-left img {
        margin: 0 auto 10px auto; /* Center image and add bottom margin */
        width: 70px;
        height: 70px;
    }

    .organizer-title-left h1 {
        font-size: 28px;
        font-weight: var(--ode-header-weight);
        font-family: var(--ode-header);
        width: 100%;
        padding-right: 0;
    }

    /* Follow Button - Mobile */
    .org-follow-button {
        margin-top: unset; /* Space above the button */
        width: 100%; /* Full width on small screens */
        max-width: 110px;
        text-align: center; /* Center the button text */
        display: flex;
        justify-content: center;
        align-items: center;
        height: 40px; /* Maintain consistent height */
        font-size: 13px; /* Adjust font size for mobile */
        border-radius: 50px;
        color: var(--main-text-color);
        border: var(--organizer-follow-button-outline-unset);
        cursor: pointer;
        transition:
            background-color 0.3s,
            color 0.3s;
        font-weight: var(--ode-body-button);
        text-decoration: none;
    }

    .org-following-button {
        background: var(--ode-blue);
        color: #fff;
        border: var(--organizer-follow-button-outline-set);
        margin-top: unset; /* Space above the button */
        width: 100%; /* Full width on small screens */
        max-width: 110px;
        text-align: center; /* Center the button text */
        display: flex;
        justify-content: center;
        align-items: center;
        height: 40px; /* Maintain consistent height */
        font-size: 13px; /* Adjust font size for mobile */
        border-radius: 50px;
        cursor: pointer;
        transition:
            background-color 0.3s,
            color 0.3s;
        font-weight: var(--ode-body-button);
        text-decoration: none;
    }

    .organizer-load-button {
        background: var(--settings-button-background);
        color: var(--settings-button-text);
        padding: 20px 20px;
        border: none;
        cursor: pointer;
        width: 100%;
        border-radius: 50px;
        margin-top: 25px;
        padding-bottom: 20px;
        font-size: 16px;
        font-weight: var(--ode-body-button);
        border: var(--settings-button-outline);
        text-decoration: none; /* Ensure no underline by default */
    }
    .organizer-load-button:hover {
        background: var(--settings-button-background-hover);
        color: var(--settings-button-text-hover);
        border: var(--settings-button-outline);
        text-decoration: underline;
    }
    .organizer-load-more {
        padding-bottom: 25px;
        border-top: 0;
        border-bottom: 1px solid var(--universal-grey);
        margin-bottom: 0;
    }
    .location-section .organizer-load-more {
        border-bottom: 0;
    }
    .organizer-read-button {
        padding: 17px 17px;
        cursor: pointer;
        width: 100%;
        border-radius: 50px;
        margin-top: 0;
        padding-bottom: 20px;
        font-size: 16px;
        font-weight: var(--ode-body-button);
        text-decoration: none; /* Ensure no underline by default */
    }
    .organizer-read-button:hover {
        background: var(--settings-button-background-hover);
        color: var(--settings-button-text-hover);
        text-decoration: underline;
    }
    .organizer-read-more {
        margin-top: 0;
        margin-bottom: 25px;
    }
    #full-description {
        padding-bottom: 15px;
    }
    #short-description {
        padding-bottom: 15px;
    }
}
.organizer-events-column {
    width: 60%;
}

.organizer-about-column {
    width: 40%;
    padding-left: 40px;
}

.organizer-section-heading {
    display: flex;
    align-items: center; /* Vertically center the elements */
    justify-content: space-between; /* Ensure Upcoming Events and filter dropdown are far apart */
    font-size: 36px;
    margin: 0;
    padding-top: 35px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--universal-grey);
    font-weight: var(--ode-header-weight);
    font-family: var(--ode-header);
    color: var(--main-text-color);
    height: 50px;
}

.location-left-column > .organizer-section-heading {
    padding-top: 0;
    margin-top: 0;
    height: auto;
}

.location-right-column > .organizer-section-heading {
    padding-top: 0;
    margin-top: 0;
    height: auto;
}

.organizer-sort-box {
    display: flex;
    align-items: center;
}

.organizer-sort-box select {
    font-size: 0; /* Hide the text */
    padding: 10px 10px;
    border: 1px solid #c2c2c2;
    background: var(--bg-color);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 16px 16px;
    border-radius: 50px;
    width: 50px; /* Make it small like an icon */
    height: 50px;
    background-image: var(--sort-arrow-svg);
}

.organizer-sort-box select:focus {
    border: 1px solid var(--ode-blue); /* Change border color when focused */
    outline: none; /* Remove the default dotted outline */
}

.organizer-box select option {
    font-size: 16px; /* Ensure options are visible when dropdown is open */
}
.organizer-section-description {
    color: var(--sub-text-color);
    line-height: var(--ode-body-description-line-height);
    padding-top: 20px;
    font-weight: var(--ode-body-weight);
}
.organizer-section-description a {
    color: var(--sub-text-color);
    font-size: 16px;
    text-decoration: underline;
}
.organizer-section-description a:hover {
    color: var(--main-text-color);
    font-size: 16px;
    text-decoration: underline;
}
.organizer-section-heading-more-info {
    font-size: 38px;
    padding-top: 35px;
    padding-bottom: 40px;
    border-top: 1px solid var(--universal-grey);
    border-bottom: 1px solid var(--universal-grey);
    font-weight: var(--ode-header-weight);
    font-family: var(--ode-header);
    color: var(--main-text-color);
}

.location-section .organizer-section-heading-more-info {
    border-top: none;
}

.location-section .organizer-about-column > .organizer-section-heading {
    border-top: 1px solid var(--universal-grey);
}
.organizer-event-list {
    list-style: none;
    padding: 0;
    margin: 0;
    color: var(--main-text-color);
}
.organizer-event-list a {
    color: var(--sub-text-color);
    text-decoration: none;
}
.organizer-event {
    display: flex;
    align-items: center;
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left: 30px;
    padding-right: 30px;
    cursor: pointer;
    color: var(--main-text-color);
    font-size: 16px;
    line-height: 1.5;
    text-decoration: none;
}
.organizer-event * {
    pointer-events: none; /* Allow clicks to pass through to the parent */
}
.organizer-event a,
.organizer-event a * {
    pointer-events: auto;
}
.organizer-event a {
    text-decoration: none;
}
.organizer-event a:hover {
    text-decoration: none;
}
.organizer-event img {
    margin-right: 20px;
    width: 75px;
    height: 75px;
    padding: 0;
    display: block;
    border-radius: 12px;
}
.organizer-event:not(:first-child) {
    border-top: 1px solid var(--universal-grey);
}

.organizer-event:hover {
    background-color: var(--list-event-hover);
}
.organizer-event-title {
    font-family: var(--ode-body-weight);
    letter-spacing: var(--ode-event-block-title-letter-spacing);
    font-weight: 400;
    font-style: normal;
    text-wrap: balance;
    line-height: 1;
    font-size: 22px;
    display: flex;
    color: var(--main-text-color);
}
.organizer-event-name {
    width: 100%;
    padding-left: 15px;
    text-align: left;
    margin-right: auto;
    margin-top: -6px;
}
.organizer-event-name a {
    color: var(--main-text-color);
    text-decoration: none;
}
.organizer-event-name-date {
    color: var(--event-block-desc);
    font-size: 14px;
    text-decoration: none;
}
.organizer-event-name-date a {
    color: var(--event-block-desc);
    text-decoration: none;
    font-size: 14px;
    display: flex;
}
.organizer-event-name-date a:hover {
    color: var(--event-block-desc-hover);
    text-decoration: underline;
    font-size: 14px;
    display: flex;
}
.organizer-event-arrow svg {
    width: 25px;
    height: 25px;
}
.organizer-event-arrow svg path {
    stroke: var(--main-text-color);
}
.organizer-more-centered-link {
    align-items: center;
    display: flex;
    padding-bottom: 5px;
}
.organizer-more-centered-link img {
    display: none; /* Hide the original SVGs */
}

.organizer-more-centered-link::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: var(--organizer-website-icon-url);
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 5px;
}

.organizer-more-centered-link[href*="instagram.com"]::before {
    background-image: var(--organizer-instagram-icon-url);
}
.organizer-more-centered-link[href*="ode.fm/browse/"]::before {
    background-image: var(--organizer-region-icon-url);
}

@media (max-width: 768px) {
    .organizer-event-title {
        font-family: var(--ode-body);
        letter-spacing: var(--ode-event-block-title-letter-spacing);
        font-weight: 400;
        font-style: normal;
        text-wrap: balance;
        line-height: 1;
        font-size: 16px;
    }
    .organizer-event-name-date a {
        text-decoration: none;
        font-size: 12px;
    }
    .organizer-event-name-date a:hover {
        text-decoration: underline;
        font-size: 12px;
    }
    .organizer-section-heading {
        font-size: 26px;
        padding-top: 25px;
        padding-bottom: 25px;
        font-weight: var(--ode-header-weight);
        font-family: var(--ode-header);
    }
    .location-section .organizer-section-heading {
        border-top: 1px solid var(--universal-grey);
    }
    .organizer-about-column {
        width: 100%;
    }
    .organizer-events-column {
        width: 100%;
    }
    .organizer-event {
        padding-bottom: 20px;
        padding-left: 0;
        padding-right: 0;
        padding-top: 20px;
        cursor: pointer;
        font-size: 14px;
        line-height: 1.5;
        align-items: center;
    }
    .organizer-event:last-child {
        border-bottom: 1px solid var(--universal-grey);
    }
    .organizer-event img {
        margin-right: 15px;
        margin-left: 10px;
        width: 55px;
        height: 55px;
        border-radius: 10px;
    }
    .organizer-about-column {
        padding-left: 0;
        padding-right: 0; /* Extra padding to space it from the events column */
    }
    .organizer-event-name {
        text-align: left;
        width: 300px;
        padding-left: 05;
        padding-right: 25px;
        margin-right: auto;
        margin-top: -2px;
    }
    .organizer-event-arrow {
        font-size: 24px;
    }
    .organizer-event-arrow svg {
        width: 20px;
        height: 20px;
        padding-right: 5px;
    }
    .organizer-section-description {
        padding-top: 15px;
        padding-bottom: 10px;
    }
    .organizer-section-description a {
        font-size: 14px;
        text-decoration: underline;
    }
    .organizer-section-description a:hover {
        font-size: 14px;
        text-decoration: underline;
    }
    .organizer-section-heading-more-info {
        font-size: 28px;
        padding-top: 25px;
        padding-bottom: 25px;
        border-top: 1px solid var(--universal-grey);
        border-bottom: 1px solid var(--universal-grey);
        font-weight: var(--ode-header-weight);
        font-family: var(--ode-header);
    }
}
.fade-in {
    opacity: 0;
    transition: opacity 0.5s;
}

.fade-in.visible {
    opacity: 1;
}

.browse-event-block.fade-in {
    opacity: 0;
    transition: opacity 0.5s;
}

.browse-event-block.fade-in.visible {
    opacity: 1;
}
.blog-section {
    max-width: 1600px;
    margin: 0 auto;
    padding-left: 50px;
    padding-right: 50px;
    text-align: center;
    font-weight: var(--ode-body-weight);
}

.blog-date {
    font-size: 16px;
    color: var(--sub-text-color);
    margin-bottom: 35px;
    margin-top: 65px;
}
.blog-byline {
    font-size: 12px;
    font-weight: 550;
    color: var(--main-text-color);
    margin-top: 35px;
    margin-bottom: 65px;
    text-transform: uppercase;
}

.blog-title {
    width: 800px;
    margin-right: auto;
    margin-left: auto;
}
.blog-title h1 {
    font-family: var(--ode-header);
    letter-spacing: var(--ode-editorial-letter-spacing);
    font-weight: 400;
    font-style: normal;
    font-size: 70px;
    text-wrap: balance;
    line-height: 1.05;
    color: var(--main-text-color);
    padding: 0;
    outline: 0;
    margin: 0;
}
.blog-image img {
    width: 100%;
    max-width: 1100px;
    height: auto;
    margin: 25px 0;
    border-radius: 35px; /* 06-23-2025 Radius Removal: 5px */
    display: block;
    margin-right: auto;
    margin-left: auto;
}
.blog-italics {
    font-style: oblique;
}
.blog-quote {
    line-height: 1.8;
    font-size: 20px;
    font-style: oblique;
}
.blog-pull-quote {
    line-height: 1.8;
    font-size: 30px;
    font-style: oblique;
    padding-bottom: 40px;
    display: block;
}
.blog-blockquote {
    border-left: 4px solid var(--sub-text-color); /* Left vertical line */
    padding-left: 2em; /* Space between the line and text */
    margin: 1em 0; /* Space above and below the blockquote */
    font-style: italic; /* Optional: gives that classic blockquote feel */
    color: var(--sub-text-color); /* Optional: slightly softer text color */
    font-size: 14px;
}
hr {
    height: 1px;
    border: 0;
    outline: 0;
    box-shadow: none;
    background-color: var(--arrow-color);
    margin: 16px 0; /* tweak or remove */
}
.blog-body {
    width: 100%;
    max-width: 900px;
    height: auto;
    margin: 20px 0;
    display: block;
    margin-right: auto;
    margin-left: auto;
    text-align: left;
    line-height: 1.8;
    font-size: 18px;
    margin-top: 55px;
    margin-bottom: 30px;
    color: var(--main-text-color);
}
.blog-audio {
    width: 100%;
    max-width: 600px;
    height: auto;
    margin: 20px 0;
    display: block;
    margin-right: auto;
    margin-left: auto;
    text-align: left;
    font-size: 18px;
    margin-top: 70px;
    color: var(--main-text-color);
}
.blog-body a,
a:hover {
    color: var(--main-text-color);
    text-decoration: underline;
}
.blog-body h2 {
    padding-left: 0;
    padding-right: 0;
    font-size: 35px;
    font-weight: 450;
    line-height: 1;
    margin-block-start: 0;
    margin-block-end: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    color: var(--main-text-color);
}
.blog-subheader {
    text-align: center;
    font-size: 12px;
    color: var(--sub-text-color);
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}
.blog-subheader a {
    text-align: center;
    font-size: 12px;
    color: var(--sub-text-color);
    text-decoration: underline;
}
@media (max-width: 768px) {
    .blog-section {
        padding: 0 var(--content-side-padding);
        padding-top: 0;
    }
    .blog-title {
        width: 100%;
    }
    .blog-title h1 {
        font-family: var(--ode-header);
        letter-spacing: var(--ode-editorial-letter-spacing);
        font-weight: 400;
        font-style: normal;
        text-wrap: balance;
        font-size: 40px;
        line-height: 1.05;
        margin: 0;
        padding: 0;
        outline: 0;
        margin: 0;
    }
    .blog-body {
        font-size: 16px;
        line-height: var(--ode-body-description-line-height);
        width: 95%;
        margin-top: 40px;
    }
    .blog-audio {
        width: 100%;
        max-width: 320px;
        margin: 35px auto;
        height: 80px; /* 100px original × 0.9 scale */
        margin-top: 45px;
    }
    .blog-audio iframe {
        display: block; /* remove inline‐baseline whitespace */
        transform-origin: top left;
        transform: scale(0.9);

        /* bump the iframe’s intrinsic size so nothing is clipped */
        width: 111.111%; /* = 100% ÷ 0.9 */
        height: 111.111%; /* = 100% ÷ 0.9 */

        border-radius: 45px;
    }

    .blog-body h2 {
        padding-left: 0;
        padding-right: 0;
        font-size: 28px;
        font-weight: 450;
        line-height: 1;
        margin-block-start: 0;
        margin-block-end: 0;
    }
    .blog-quote {
        line-height: 1.8;
        font-size: 15px;
        font-style: oblique;
    }
    .blog-pull-quote {
        line-height: 1.8;
        font-size: 22px;
        font-style: oblique;
    }
    .blog-image img {
        margin: 15px 0;
        width: 100%;
        display: block;
        border-radius: 20px;
    }
    .blog-date {
        font-size: 14px;
        margin-top: 45px;
        margin-bottom: 35px;
    }
    .blog-byline {
        font-size: 12px;
        font-weight: 550;
        margin-top: 35px;
        margin-bottom: 45px;
    }
    .blog-byline h2 {
        font-size: 12px;
        font-weight: 550;
    }
}
/* Browse Content Styles */
.browse-section {
    max-width: 1600px;
    margin: 0 auto;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 20px;
    padding-top: 50px;
}

.browse-sort-box {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    margin-left: auto; /* Push the sort box to the far right */
    background: var(--bg-color);
}

.browse-sort-box select {
    font-size: 13px;
    font-weight: 400;
    padding: 10px 18px;
    border: 1px solid var(--universal-grey);
    background: none;
    color: var(--main-text-color);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 60px;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
}

.browse-sort-box--filter {
    position: relative;
}

.browse-sort-box--filter select {
    padding-left: 46px;
}

.browse-sort-box--filter .browse-sort-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: var(--main-text-color);
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.browse-sort-box select:hover {
    background: var(--hero-slider-button-background);
    color: var(--hero-slider-button-text);
    border: 1px solid var(--hero-slider-button-outline);
    text-decoration: none;
}

.browse-sort-box--filter select:hover + .browse-sort-icon {
    color: var(--hero-slider-button-text);
}

.browse-sort-box--filter:focus-within .browse-sort-icon {
    color: var(--main-text-color);
}


.browse-sort-box select:focus {
    border: 1px solid var(--universal-grey); /* Keep consistent border on focus */
    outline: none; /* Remove the default dotted outline */
}

.browse-sort-box select option {
    font-size: 16px; /* Ensure options are visible when dropdown is open */
}

/* Media Queries */
@media (max-width: 768px) {
    .browse-current-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between; /* Align header and sort box on one line */
    }

    .browse-all-current-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between; /* Align header and sort box on one line */
    }

    .browse-sort-box {
        margin-left: auto;
    }

    .browse-sort-box select {
        width: auto; /* Ensure the select does not take full width */
        font-size: 12px;
        padding: 10px 15px;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        border-radius: 60px;
        min-width: 0;
        width: -moz-fit-content;
        width: fit-content;
        max-width: 100%;
    }

    .browse-sort-box--filter select {
        padding-left: 41px;
    }

    .browse-sort-box--filter .browse-sort-icon {
        left: 15px;
        width: 18px;
        height: 18px;
    }

    .profile-calendar-subscribe-button {
        font-size: 12px;
    }
}
.tag-box-wrapper {
    position: relative;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
}

.tag-box {
    display: flex;
    overflow-x: auto;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding-right: 50px; /* Add padding to accommodate the shadow */
}

.tag-box-shadow {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 50px;
    pointer-events: none;
    background: linear-gradient(
        to left,
        rgba(var(--tag-box-shadow)),
        rgba(255, 255, 255, 0)
    );
    opacity: 1; /* Initially visible */
    transition: opacity 0.3s ease;
}

.tag-box-shadow.tag-box-shadow--hidden {
    opacity: 0;
}

.tag-box::-webkit-scrollbar {
    display: none; /* Background color of the scrollbar track */
}

.tag-box::-webkit-scrollbar-thumb {
    background-color: transparent; /* Color of the scrollbar thumb (the part that shows the current scroll position) */
}

.tag-box::-webkit-scrollbar-thumb:hover {
    background-color: transparent; /* Darker color when hovering over the scrollbar thumb */
}
.category-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: none; /* Adjust based on your design */
    width: 100%;
    height: 80px;
    padding: 0 25px; /* Adjust padding if necessary */
    box-sizing: border-box;
    border: 1px solid #c2c2c2; /* Optional: Add a border to match your design */
    font-size: var(--top-nav-size);
    font-weight: var(--ode-header-weight);
}

.category-box a {
    margin-right: 5px; /* Space between links */
    color: var(--category-box-text); /* Default color */
    text-decoration: none;
    font-weight: 400; /* Default weight */
}

.category-box a:hover {
    color: var(--category-box-text); /* Default color */
    text-decoration: underline; /* Hover effect */
}

.category-box a.active {
    color: var(--link-text-hover); /* Active color */
}

.category-box select {
    font-size: 17px;
    padding: 15px;
    border: 1px solid #c2c2c2;
    max-width: 100%;
    background-color: var(--category-background); /* For light/dark mode */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 10px 10px;
    padding-right: 35px; /* Space for the arrow */
    color: var(--category-box-text);
    font-weight: 390;
}

.category-box select:focus {
    border: 1px solid var(--ode-blue); /* Change border color when focused */
    outline: none; /* Remove the default dotted outline */
}

.browse-header {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center; /* Vertically center the content */
    justify-content: left; /* Align content to the left */
    margin-top: 30px; /* Space between category-box and browse-header */
    margin-bottom: 15px;
}
.browse-header h1 {
    font-size: 55px;
    font-weight: var(--ode-header-weight);
    font-family: var(--ode-header);
    margin: 0;
    padding: 0;
    color: var(--main-text-color);
}
.browse-header h2 {
    font-size: 38px;
    font-weight: var(--ode-body-weight);
    margin: 0;
    padding: 0;
    color: #000;
}
.browse-current-header {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center; /* Vertically center the content */
    justify-content: left; /* Align content to the left */
    padding-top: 20px;
    padding-bottom: 20px;
}
.browse-current-header h1 {
    font-size: 50px;
    font-weight: var(--ode-header-weight);
    font-family: var(--ode-header);
    margin: 0;
    padding: 0;
    color: var(--main-text-color);
}
.browse-current-header h2 {
    font-size: 40px;
    font-weight: var(--ode-header-weight);
    font-family: var(--ode-header);
    margin: 0;
    padding: 0;
    color: var(--main-text-color);
}
.browse-all-current-header {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center; /* Vertically center the content */
    justify-content: left; /* Align content to the left */
    padding-bottom: 20px;
}
.browse-all-current-header h1 {
    font-size: 50px;
    font-weight: var(--ode-header-weight);
    font-family: var(--ode-header);
    margin: 0;
    padding: 0;
    color: var(--main-text-color);
}
.browse-all-current-header h2 {
    font-size: 40px;
    font-weight: var(--ode-header-weight);
    font-family: var(--ode-header);
    margin: 0;
    padding: 0;
    color: var(--main-text-color);
}
/* Browse Featured Events Styles */
.event-block {
    flex: 0 0 25%; /* Prevents any block from growing wider than 35% */
    min-width: 0; /* Allows flex children to shrink instead of forcing the block wider */
    box-sizing: border-box;
    color: var(--main-text-color);
    text-align: left;
    margin-bottom: 20px;
    scroll-snap-align: start;
    overflow: visible;
}

.image-container {
    border: var(--event-image-border);
    border-radius: var(--event-card-border-radius-inset);
    overflow: hidden;
    display: block;
    margin-bottom: 0px;
}

.image-container img {
    width: 100%;
    height: 100%;
    display: block;
    border: none;
    border-radius: 0;
    object-fit: cover;
    object-position: center;
}

/* Defensive: Ensure images inside event blocks never have border or radius */
.event-block img {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Custom Scrollbar */
.featured-events-wrapper {
    position: relative;
    overflow-x: hidden; /* Hide the native scrollbar */
    -webkit-overflow-scrolling: touch; /* Adds smooth scrolling on iOS */
    scroll-behavior: smooth;
    padding-bottom: 0px;
    padding-top: 10px;
}
.custom-scrollbar {
    bottom: 0;
    left: 0;
    height: 4px; /* Height of the scrollbar */
    background-color: var(--custom-scrollbar-track);
    z-index: 10;
    cursor: grabbing;
    border-radius: 3px; /* Ensure the track also has rounded edges */
    overflow: hidden;
    margin-top: 30px;
    -webkit-overflow-scrolling: touch; /* Adds smooth scrolling on iOS */
    scroll-behavior: smooth;
    margin-left: var(--event-block-gutter);
    margin-right: var(--event-block-gutter);
}
.browse-custom-scrollbar {
    bottom: 0;
    left: 0;
    height: 4px; /* Height of the scrollbar */
    background-color: var(--custom-scrollbar-track);
    z-index: 10;
    cursor: grabbing;
    border-radius: 3px; /* Ensure the track also has rounded edges */
    overflow: hidden;
    margin-top: 30px;
    -webkit-overflow-scrolling: touch; /* Adds smooth scrolling on iOS */
    scroll-behavior: smooth;
}
.custom-scrollbar-track {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 3px; /* Maintain rounded corners */
    -webkit-overflow-scrolling: touch; /* Adds smooth scrolling on iOS */
    scroll-behavior: smooth;
}

.custom-scrollbar-thumb {
    height: 100%;
    width: 10%;
    background-color: var(--custom-scrollbar-thumb);
    border-radius: 2px; /* Always keep this border-radius */
    position: absolute;
    left: 0;
    scroll-behavior: smooth;
}
.featured-events-wrapper:hover .custom-scrollbar-thumb {
    width: 100px; /* Extend the thumb width on hover */
}
.featured-events {
    display: flex;
    overflow-x: auto; /* Enables horizontal scrolling */
    column-gap: var(--gap-col-desktop);
    row-gap: var(--gap-row-desktop);
    align-items: stretch;
    padding-top: 0px;
    padding-bottom: 10px;
    padding-left: var(--event-block-gutter);
    padding-right: var(--event-block-gutter);
}

.featured-events {
    -ms-overflow-style: none; /* Hide scrollbar for Internet Explorer and Edge */
    scrollbar-width: none; /* Hide scrollbar for Firefox */
    overflow-x: scroll; /* Ensures horizontal scrolling */
}

.featured-events::-webkit-scrollbar {
    display: none; /* Completely hides the scrollbar on WebKit browsers */
}

.event-block h2 {
    font-family: var(--ode-editorial);
    letter-spacing: var(--ode-editorial-letter-spacing);
    font-weight: 400;
    font-style: normal;
    margin: 0;
    padding: 0; /* Adjust as needed to ensure proper vertical centering */
    color: var(--main-text-color);
    margin-top: 5px;
    margin-bottom: 0;
}
.event-block h2 a {
    font-size: 26px;
    margin: 0;
    padding: 0;
    color: var(--main-text-color);
    text-decoration: none;
    margin-bottom: 0;
    line-height: 1;
}

.event-block-date {
    color: var(--event-block-date);
    padding: 0;
    margin: 0;
    margin-left: 5px;
    line-height: 1;
}
.event-block-date a {
    color: var(--event-block-date);
    font-size: 13.5px;
    text-decoration: none;
}
.event-block-date a:hover {
    color: var(--event-block-date-hover);
    font-size: 13.5px;
    text-decoration: underline;
}
.event-block-desc {
    padding-bottom: 10px;
    margin: 0;
    padding: 0;
    color: var(--sub-text-color);
    line-height: 1;
    margin-bottom: 5px;
    margin-left: 5px;
}
.event-block-desc a {
    padding-bottom: 10px;
    color: var(--event-block-desc);
    font-size: 13.5px;
    text-decoration: none;
    margin: 0;
    padding: 0;
}
.event-block-desc a:hover {
    padding-bottom: 10px;
    color: var(--event-block-desc-hover);
    font-size: 13.5px;
    text-decoration: underline;
    margin: 0;
    padding: 0;
}
.browse-tag-grid-button {
    white-space: nowrap;
    flex-shrink: 0;
    padding-left: 12px;
    padding-right: 12px;
    background: var(--tag-button-background);
    color: var(--tag-button-text);
    font-size: 12px;
    outline: 0;
    border: 1px solid var(--tag-button-background);
    min-width: 65px;
    border-radius: 20px;
    font-weight: var(--ode-body-button);
    margin-right: 5px;
    padding-top: 8px;
    padding-bottom: 8px;
}
.browse-tag-grid-button:hover {
    white-space: nowrap;
    flex-shrink: 0;
    padding-left: 12px;
    padding-right: 12px;
    background: var(--tag-button-background);
    color: var(--tag-button-text);
    font-size: 12px;
    outline: 0;
    border: 1px solid var(--tag-button-background);
    min-width: 65px;
    border-radius: 20px;
    font-weight: var(--ode-body-button);
    text-decoration: underline;
    margin-right: 5px;
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Toolbar Button Styling */
.heart-tags {
    padding-top: 0;
    padding-bottom: 4px;
    color: var(--main-text-color);
    display: flex;
    width: 100%;
    margin: 6px 0 14px;
    font-size: 16px;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    border: 0;
    align-items: center;
}
/* Common Styles for Both States */
.heart-button-unsaved,
.heart-button-saved {
    border: 0;
    background-repeat: no-repeat;
    background-position: 5px center; /* Position the background image */
    background-size: 20px 20px; /* Increased size for better visibility */
    padding-left: 30px; /* Add padding to the left for text spacing */
    width: 60px;
    background-color: transparent;
    display: flex;
    justify-content: left;
    align-items: center;
    cursor: pointer;
    outline: none;
    flex-shrink: 0;
}

/* Unbookmarked State */
.heart-button-unsaved {
    background-image: var(--bookmark-button-unsaved-icon); /* Heart PNG */
    color: var(
        --main-text-color
    ); /* Text color (not visible since text is removed) */
    transition:
        background-image 0.3s ease,
        transform 0.4s ease;
}

/* Bookmarked State */
.heart-button-saved {
    background-image: var(--bookmark-button-saved-icon);
    color: var(
        --main-text-color
    ); /* Text color (not visible since text is removed) */
    transition:
        background-image 0.3s ease,
        transform 0.4s ease;
}
.heart-button-unsaved:hover,
.heart-button-saved:hover,
.export-button:hover,
.calendar-button:hover {
    text-decoration: underline;
}
.heart-button-saved:hover {
    background: var(--profile-edit-button-background-hover);
    border: var(--profile-edit-button-outline-hover);
}
.export-button {
    border: 0;
    background-repeat: no-repeat;
    background-position: 5px center; /* Position the background image */
    background-size: 20px 20px; /* Increased size for better visibility */
    padding-left: 35px; /* Add padding to the left for text spacing */
    width: 75px;
    background-color: transparent;
    background-image: var(--export-button); /* Heart PNG */
    display: flex;
    justify-content: left;
    align-items: center;
    cursor: pointer;
    outline: none;
    flex-shrink: 0;
}
.calendar-button {
    border: 0;
    background-repeat: no-repeat;
    background-position: 5px center; /* Position the background image */
    background-size: 20px 20px; /* Increased size for better visibility */
    padding-left: 37px; /* Add padding to the left for text spacing */
    width: 162px;
    background-color: transparent;
    background-image: var(--calendar-button); /* Heart PNG */
    display: flex;
    justify-content: left;
    align-items: center;
    cursor: pointer;
    outline: none;
    flex-shrink: 0;
}
.heart-tags .heart-button-unsaved,
.heart-tags .heart-button-saved,
.heart-tags .export-button,
.heart-tags .calendar-button {
    border: 1px solid var(--universal-grey);
    background-color: var(--bg-color);
    background-image: none;
    border-radius: 999px;
    padding: 13px 22px;
    min-height: 55px;
    width: auto;
    background-position: center;
    background-size: 18px 18px;
    font-size: 15px;
    line-height: 1.1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    text-decoration: none;
    transition:
        box-shadow 0.2s ease,
        transform 0.2s ease,
        border-color 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease;
    flex: 1 1 0;
    max-width: 280px;
}
/* Only apply hover styles on devices that support hover (not touch) */
@media (hover: hover) {
    .heart-tags .heart-button-unsaved:hover,
    .heart-tags .export-button:hover,
    .heart-tags .calendar-button:hover {
        text-decoration: none;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
        background-color: var(--ode-blue-offset);
        border-color: var(--ode-blue-offset);
        color: #fff;
    }
    /* Keep the saved state color visible even while hovered */
    .heart-tags .heart-button-saved:hover {
        text-decoration: none;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
        background-color: var(--ode-blue);
        border-color: var(--ode-blue);
        color: #fff;
    }
}
/* Active state for touch feedback on mobile */
.heart-tags .heart-button-unsaved:active,
.heart-tags .export-button:active,
.heart-tags .calendar-button:active {
    background-color: var(--ode-blue-offset);
    border-color: var(--ode-blue-offset);
    color: #fff;
}
.heart-tags .heart-button-unsaved:focus-visible,
.heart-tags .heart-button-saved:focus-visible,
.heart-tags .export-button:focus-visible,
.heart-tags .calendar-button:focus-visible {
    outline: 2px solid var(--main-text-color);
    outline-offset: 2px;
}
/* Responsive Design (Optional) */
@media (max-width: 768px) {
    .heart-tags {
        padding-top: 0;
        padding-bottom: 5px;
        display: flex;
        width: 100%;
        margin: 6px 0 12px;
        font-size: 13px;
        height: auto;
        justify-content: space-between;
        gap: 8px;
        flex-wrap: nowrap;
    }
    .heart-button-unsaved,
    .heart-button-saved,
    .export-button,
    .calendar-button {
        -webkit-tap-highlight-color: transparent;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        outline: none;
    }
    .heart-button-unsaved:hover,
    .heart-button-saved:hover,
    .export-button:hover,
    .calendar-button:hover {
        text-decoration: none;
    }
    .export-button {
        padding-left: 35px;
    }
    .heart-tags .heart-button-unsaved,
    .heart-tags .heart-button-saved,
    .heart-tags .export-button,
    .heart-tags .calendar-button {
        font-size: 13px;
        padding: 11px 14px;
        min-height: 44px;
        background-size: 16px 16px;
        flex: 1 1 0;
        max-width: none;
        white-space: nowrap;
        text-align: center;
        gap: 8px;
    }
}
@media (min-width: 900px) {
    .heart-tags {
        max-width: 880px;
        margin: 8px auto 16px;
        justify-content: space-between;
    }
    .heart-tags .heart-button-unsaved,
    .heart-tags .heart-button-saved,
    .heart-tags .export-button,
    .heart-tags .calendar-button {
        flex: 1 1 0;
        justify-content: center;
    }
}

.heart-tags .heart-button-unsaved,
.heart-tags .heart-button-saved,
.heart-tags .export-button,
.heart-tags .calendar-button {
    position: relative;
}
.heart-tags .heart-button-unsaved::before,
.heart-tags .heart-button-saved::before,
.heart-tags .export-button::before,
.heart-tags .calendar-button::before {
    content: "";
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    display: inline-block;
    flex-shrink: 0;
    margin-right: 0;
}
.heart-tags .heart-button-unsaved {
    --action-icon: var(--bookmark-button-unsaved-icon);
}
.heart-tags .heart-button-saved {
    --action-icon: var(--bookmark-button-saved-icon);
    border: none;
    background-color: var(--ode-blue);
    border: 1px solid var(--ode-blue);
    color: #fff;
}
.heart-tags .export-button {
    --action-icon: var(--export-button);
}
.heart-tags .calendar-button {
    --action-icon: var(--calendar-button);
}
.heart-tags .heart-button-unsaved::before,
.heart-tags .heart-button-saved::before,
.heart-tags .export-button::before,
.heart-tags .calendar-button::before {
    background-image: var(--action-icon);
}
@media (hover: hover) {
    .heart-tags .heart-button-unsaved:hover::before,
    .heart-tags .heart-button-saved:hover::before,
    .heart-tags .export-button:hover::before,
    .heart-tags .calendar-button:hover::before {
        filter: brightness(0) invert(1);
    }
}
/* Active state for icons on touch devices */
.heart-tags .heart-button-unsaved:active::before,
.heart-tags .export-button:active::before,
.heart-tags .calendar-button:active::before {
    filter: brightness(0) invert(1);
}

/* Browse Category And Tag Styles */
.browse-category-button {
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    background: var(--category-button-background);
    color: var(--category-button-text);
    font-size: 12px;
    outline: 0;
    border: var(--category-button-border);
    min-width: 65px;
    border-radius: 20px;
    font-weight: var(--ode-body-button);
    margin-right: 5px;
}
.browse-category-button:hover {
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    background: var(--category-button-background-hover);
    color: var(--category-button-text-hover);
    font-size: 12px;
    outline: 0;
    border: var(--category-button-border-hover);
    min-width: 65px;
    border-radius: 20px;
    font-weight: var(--ode-body-button);
    text-decoration: underline;
    margin-right: 5px;
}
.browse-category-grid-button {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    background: var(--category-button-background);
    color: var(--category-button-text);
    font-size: 12px;
    outline: 0;
    border: var(--category-button-border);
    min-width: 65px;
    border-radius: 20px;
    font-weight: var(--ode-body-button);
    margin-right: 5px;
    margin-bottom: 3px;
}
.browse-category-grid-button:hover {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    background: var(--category-button-background-hover);
    color: var(--category-button-text-hover);
    font-size: 12px;
    outline: 0;
    border: var(--category-button-border-hover);
    min-width: 65px;
    border-radius: 20px;
    font-weight: var(--ode-body-button);
    text-decoration: underline;
    margin-right: 5px;
}
.events-none-listed {
    margin-bottom: 40px;
    color: var(--sub-text-color);
}
@media (max-width: 768px) {
    .event-block img {
        width: 100%; /* Ensure the image takes the full width of the container */
        height: auto; /* Maintain the aspect ratio */
        max-width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        object-position: center;
        margin-bottom: 10px;
    }
    .browse-category-button {
        padding: 5px;
        padding-left: 10px;
        padding-right: 10px;
        font-size: 10px;
        outline: 0;
        min-width: 50px;
        border-radius: 20px;
        font-weight: var(--ode-body-button);
        margin-bottom: 5px;
        margin-right: 3px;
    }
    .browse-category-button:hover {
        padding: 5px;
        padding-left: 10px;
        padding-right: 10px;
        font-size: 10px;
        outline: 0;
        min-width: 50px;
        border-radius: 20px;
        font-weight: var(--ode-body-button);
        text-decoration: underline;
        margin-right: 3px;
    }
    .browse-event-block,
    .event-card-standard {
        text-align: left;
        transition: box-shadow 0.3s ease;
        box-sizing: border-box; /* Ensure proper sizing within grid cells */
        width: 100%; /* Ensure each event block stays within its grid cell */
        overflow: hidden; /* Prevent overflow issues */
    }
    .browse-tag-grid-button {
        padding-left: 10px;
        padding-right: 10px;
        font-size: 10px;
        outline: 0;
        min-width: 50px;
        border-radius: 20px;
        font-weight: var(--ode-body-button);
        white-space: nowrap;
        flex-shrink: 0;
        margin-right: 3px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .browse-tag-grid-button:hover {
        padding-left: 10px;
        padding-right: 10px;
        font-size: 10px;
        outline: 0;
        min-width: 50px;
        border-radius: 20px;
        font-weight: var(--ode-body-button);
        text-decoration: underline;
        white-space: nowrap;
        flex-shrink: 0;
        margin-right: 3px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .browse-category-grid-button {
        padding: 5px;
        padding-left: 10px;
        padding-right: 10px;

        font-size: 10px;
        outline: 0;
        min-width: 50px;
        border-radius: 20px;
        font-weight: var(--ode-body-button);
        white-space: nowrap;
        flex-shrink: 0;
        margin-right: 3px;
    }

    .browse-category-grid-button:hover {
        padding: 5px;
        padding-left: 10px;
        padding-right: 10px;
        font-size: 10px;
        outline: 0;
        min-width: 50px;
        border-radius: 20px;
        font-weight: 400;
        text-decoration: underline;
        white-space: nowrap;
        flex-shrink: 0;
        margin-right: 3px;
    }
    .browse-section {
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 30px;
        padding-top: 30px;
        font-size: 14px;
        width: 100%;
    }
    .browse-header {
        height: 70px;
        margin-top: 10px;
        margin-bottom: 20px;
    }
    .browse-header h1 {
        font-size: 40px;
        font-weight: var(--ode-header-weight);
        font-family: var(--ode-header);
        margin: 0;
        padding: 0;
    }
    .event-block h2 {
        font-family: var(--ode-editorial);
        letter-spacing: var(--ode-editorial-letter-spacing);
        font-weight: 400;
        font-style: normal;
        font-size: 22px;
        margin: 0;
        padding: 0;
        outline: none;
        width: 95%;
        line-height: 1;
    }
    .event-block h2 a {
        font-size: 26px;
        margin: 0;
        padding: 0;
        outline: none;
        width: 95%;
        line-height: 1;
    }
    .event-block-date a {
        font-size: 13px;
    }
    .event-block-date a:hover {
        font-size: 13px;
    }
    .event-block-desc a:hover {
        padding-bottom: 10px;
        color: var(--event-block-desc-hover);
        font-size: 13px;
        text-decoration: underline;
        margin: 0;
        padding: 0;
    }
    /* Horizontal Scroll Section */
    .featured-events {
        display: flex;
        overflow-x: auto;
        scroll-behavior: smooth;
        column-gap: var(--gap-col-responsive);
        row-gap: var(--gap-row-responsive);
    }
    .event-block {
        flex: 0 0 70%; /* Each event block takes 80% of the screen width */
        scroll-snap-align: start; /* Aligns the event block to the start */
        margin-bottom: 15px;
    }
    .event-block-desc {
        font-size: 13px;
        margin-top: 0px;
        padding: 0;
        line-height: unset;
    }
    .event-block-desc a {
        font-size: 13px;
        text-decoration: none;
        margin: 0;
        padding: 0;
    }
    /* Adjust category box to 100% width and only show the dropdown */
    .category-box {
        width: 100%;
        display: flex;
        justify-content: center;
        padding: 0 10px;
    }
    .category-box a {
        display: none; /* Hide the individual category links */
    }
    .category-box select {
        width: 100%; /* Make the dropdown take full width */
        border-radius: 5px;
    }
    .custom-scrollbar {
        bottom: 0;
        left: 0;
        height: 4px; /* Height of the scrollbar */
        background-color: var(--custom-scrollbar-track);
        z-index: 10;
        cursor: grabbing;
        border-radius: 3px; /* Ensure the track also has rounded edges */
        overflow-x: auto;
        scroll-behavior: smooth; /* Adds smooth scrolling on iOS */
        margin-bottom: 10px; /* Hide overflow to prevent thumb from exceeding bounds */
        margin-top: 20px;
    }
    .browse-custom-scrollbar {
        bottom: 0;
        left: 0;
        height: 4px; /* Height of the scrollbar */
        background-color: var(--custom-scrollbar-track);
        z-index: 10;
        cursor: grabbing;
        border-radius: 3px; /* Ensure the track also has rounded edges */
        overflow-x: auto;
        scroll-behavior: smooth; /* Adds smooth scrolling on iOS */
        margin-top: 20px;
        margin-bottom: 10px; /* Hide overflow to prevent thumb from exceeding bounds */
    }

    .custom-scrollbar-track {
        width: 100%;
        height: 100%;
        position: relative;
        border-radius: 3px; /* Maintain rounded corners */
    }

    .custom-scrollbar-thumb {
        height: 100%;
        width: 30%; /* Adjust this value as needed */
        background-color: var(--custom-scrollbar-thumb);
        border-radius: 3px;
        position: absolute;
        left: 0;
        overflow-x: auto;
        scroll-behavior: smooth;
    }

    .featured-events-wrapper:hover .custom-scrollbar-thumb {
        width: 100px; /* Extend the thumb width on hover */
    }
}
/* Current Events Grid */
.browse-current-events-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 4 columns on desktop */
    column-gap: var(--gap-col-desktop);
    row-gap: var(--gap-row-desktop);
    padding-left: 10px; /* Remove padding on desktop */
    padding-right: 10px; /* Remove padding on desktop */
    padding-bottom: 15px;
    box-sizing: border-box;
    overflow: hidden;
    color: var(--main-text-color);
}

@media (max-width: 768px) {
    .browse-content {
        margin: 0 auto;
        padding: 0 var(--content-side-padding);
    }
    .browse-current-events-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2 equal columns */
        column-gap: var(--gap-col-responsive);
        row-gap: var(--gap-row-responsive);
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }
    .browse-event-block,
    .event-card-standard {
        box-sizing: border-box;
        width: 100%;
    }
}

/* Event Block */
.browse-event-block,
.event-card-standard {
    text-align: left;
    box-sizing: border-box; /* Ensure proper sizing within grid cells */
    width: 100%; /* Ensure each event block stays within its grid cell */
    overflow: hidden;
    padding: var(--event-card-browse-grid-padding-desktop);
    border-radius: var(--event-card-browse-grid-border-radius-desktop);
    border: var(--event-card-outline);
    box-shadow: var(--event-card-shadow);
    background-color: var(--event-card-bg);
    transition:
        box-shadow 0.32s var(--event-card-ease),
        transform 0.32s var(--event-card-ease),
        filter 0.32s var(--event-card-ease);
}
.browse-event-block[data-event-href],
.event-card-standard[data-event-href] {
    cursor: pointer;
}
.browse-event-block,
.event-card-standard {
    box-sizing: border-box;
    width: 100%;
}
.browse-event-block:hover,
.event-card-standard:hover {
    box-shadow: var(--event-card-shadow-hover-browse);
    transform: translateY(3px) scale(1.005) translateZ(3px);
}
.event-tags {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Enable smooth scrolling on iOS */
    max-width: 100%; /* Ensure the container stays within its parent */
    box-sizing: border-box;
    white-space: nowrap;
    padding-right: 40px; /* Reserve space for the fade shadow */
    position: relative;
    margin-left: 5px;
}

.event-tags::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 40px;
    pointer-events: none;
    background: linear-gradient(
        to left,
        rgba(var(--tag-box-shadow)),
        rgba(21, 22, 23, 0)
    );
    opacity: 0;
    transition: opacity 0.3s ease;
}

.event-tags.event-tags--overflow::after {
    opacity: 1;
}

.event-tags.event-tags--scrolled::after {
    opacity: 0;
}

/* Scrollable Tags */
.event-tags::-webkit-scrollbar {
    display: none; /* Hide scrollbar in WebKit browsers */
}

.event-title-scroll {
    position: relative;
    display: block;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    padding-right: 0;
    scrollbar-width: none;
}
.event-title-scroll::-webkit-scrollbar {
    display: none;
}
.event-title-scroll::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 36px;
    pointer-events: none;
    background: linear-gradient(
        to left,
        var(--event-card-bg),
        rgba(12, 13, 14, 0)
    );
    opacity: 0;
    transition: opacity 0.3s ease;
}
.event-title-scroll.event-tags--overflow {
    -webkit-mask-image: linear-gradient(
        to right,
        #000 0,
        #000 calc(100% - 36px),
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        #000 0,
        #000 calc(100% - 36px),
        transparent 100%
    );
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}
.event-title-scroll.event-tags--scrolled {
    -webkit-mask-image: none;
    mask-image: none;
}
.event-title-scroll.event-tags--overflow::after {
    opacity: 1;
}
.event-title-scroll.event-tags--scrolled::after {
    opacity: 0;
}
.event-title-scroll span {
    display: inline-block;
    white-space: nowrap;
}

.event-desc-scroll {
    position: relative;
    display: block;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    padding-right: 0;
    scrollbar-width: none;
}
.event-desc-scroll::-webkit-scrollbar {
    display: none;
}
.event-desc-scroll::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 36px;
    pointer-events: none;
    background: linear-gradient(
        to left,
        var(--event-card-bg),
        rgba(12, 13, 14, 0)
    );
    opacity: 0;
    transition: opacity 0.3s ease;
}
.event-desc-scroll.event-tags--overflow {
    -webkit-mask-image: linear-gradient(
        to right,
        #000 0,
        #000 calc(100% - 36px),
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        #000 0,
        #000 calc(100% - 36px),
        transparent 100%
    );
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}
.event-desc-scroll.event-tags--scrolled {
    -webkit-mask-image: none;
    mask-image: none;
}
.event-desc-scroll.event-tags--overflow::after {
    opacity: 1;
}
.event-desc-scroll.event-tags--scrolled::after {
    opacity: 0;
}

@supports (
    (-webkit-mask-image: linear-gradient(#000, transparent)) or
        (mask-image: linear-gradient(#000, transparent))
) {
    .event-title-scroll::after {
        display: none;
    }
    .event-desc-scroll::after {
        display: none;
    }
}

.event-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Align items to the top */
    flex-wrap: nowrap; /* Prevent wrapping */
    margin-left: 5px;
    padding-top: 2px;
    margin-bottom: 0px;
}
.event-block-info {
    padding: 0 5px 5px;
}
.event-header h2 {
    flex: 1;
    margin: 0;
    overflow: hidden;
}
.event-header h2 .event-title-scroll {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}
.event-header h2 .event-title-scroll:hover,
.event-header h2 .event-title-scroll:focus-visible {
    text-decoration: none;
}

.event-block .event-header {
    display: flex;
    align-items: unset; /* Align items to the top */
    flex-wrap: nowrap; /* Prevent wrapping */
    justify-content: unset;
}
@media (max-width: 768px) {
    /* Remove bottom margin from items in the last row on mobile */
    .browse-current-events-grid > .browse-event-block:nth-last-child(-n + 2) {
        margin-bottom: 0;
    }
    .event-block .event-header {
        display: flex;
        align-items: unset; /* Align items to the top */
        flex-wrap: nowrap; /* Prevent wrapping */
        justify-content: unset;
    }
}

.browse-image-container {
    position: relative;
    margin-bottom: 0px;
    aspect-ratio: 1 / 1;
}

.browse-image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--event-card-border-radius-inset-responsive);
    border: var(--event-image-border);
    box-sizing: border-box; /* <-- add this */
}
@media (max-width: 768px) {
    .browse-event-block .event-media,
    .event-card-standard .event-media {
        border-radius: var(--event-card-border-radius-inset-responsive);
        clip-path: inset(
            0 round var(--event-card-border-radius-inset-responsive)
        );
        -webkit-clip-path: inset(
            0 round var(--event-card-border-radius-inset-responsive)
        );
    }
    .browse-image-container img {
        border-radius: var(--event-card-border-radius-inset-responsive);
    }
    .browse-event-block .event-media::after,
    .browse-event-block .event-tags--overlay,
    .event-card-standard .event-media::after,
    .event-card-standard .event-tags--overlay {
        border-bottom-left-radius: var(
            --event-card-border-radius-inset-responsive
        );
        border-bottom-right-radius: var(
            --event-card-border-radius-inset-responsive
        );
    }
}
.browse-event-block h2,
.event-card-standard h2 {
    font-family: var(--ode-event-block-title);
    letter-spacing: var(--ode-event-block-title-letter-spacing);
    font-weight: var(--ode-event-block-title-weight);
    margin: 0;
    text-decoration: none;
    flex-grow: 1;
    color: var(--main-text-color);
}

.browse-event-block h2 a,
.event-card-standard h2 a {
    font-size: 17px;
    margin: 0;
    text-decoration: none;
    color: var(--main-text-color);
}

.browse-event-block-date {
    padding: 0;
    margin: 0;
    color: var(--event-block-date);
    line-height: 1;
    margin-left: 5px;
}

.browse-event-block-date a {
    color: var(--event-block-date);
    font-size: 13px;
    text-decoration: none;
    padding: 0;
    margin: 0;
}
.browse-event-block-date a:hover {
    color: var(--event-block-date);
}
.browse-event-block-desc {
    color: var(--event-block-desc);
    font-size: 13px;
    padding: 0;
    margin: 0;
    margin-top: 0px;
    margin-left: 5px;
    line-height: 1;
    padding-bottom: 2px;
}

.browse-event-block-desc a {
    color: var(--event-block-desc);
    font-size: 13px;
    text-decoration: none;
    margin: 0;
    padding: 0;
}
.browse-event-block-desc a:hover {
    color: var(--event-block-desc-hover);
}
.browse-load-more {
    margin-bottom: 25px;
    margin-top: 25px;
    border-top: var(--general-divider);
}

.browse-load-more-button {
    background: var(--settings-button-background);
    color: var(--settings-button-text);
    padding: 20px 20px;
    border: none;
    cursor: pointer;
    width: 100%;
    border-radius: 50px;
    margin-top: 30px;
    font-size: 20px;
    font-weight: var(--ode-body-button);
    border: var(--settings-button-outline);
    text-decoration: none; /* Ensure no underline by default */
}
.browse-load-more-button:hover {
    background: var(--settings-button-background-hover);
    color: var(--settings-button-text-hover);
    border: var(--settings-button-outline);
    text-decoration: underline;
}

@media (max-width: 768px) {
    .browse-event-block,
    .event-card-standard {
        border-radius: var(--event-card-browse-grid-border-radius-responsive);
        padding: var(--event-card-browse-grid-padding-responsive);
        box-shadow: var(--event-card-shadow-hover-responsive);
    }
    .browse-event-block h2,
    .event-card-standard h2 {
        font-style: normal;
        text-decoration: none;
        margin-bottom: 1px;
    }
    .browse-event-block h2 a,
    .event-card-standard h2 a {
        font-size: 15px;
        margin: 0;
        text-decoration: none;
        margin-bottom: 0px;
    }
    .browse-current-header h1 {
        font-size: 40px;
        font-weight: var(--ode-header-weight);
        font-family: var(--ode-header);
        margin: 0;
        padding: 0;
    }
    .browse-current-header h2 {
        font-size: 35px;
        font-weight: var(--ode-header-weight);
        font-family: var(--ode-header);
        margin: 0;
        padding: 0;
        width: 100%;
    }
    .browse-current-header {
        width: 100%;
        height: 100px;
        display: flex;
        align-items: center; /* Vertically center the content */
        justify-content: left; /* Align content to the left */
        padding-top: 0px;
        padding-bottom: 10px;
    }
    .browse-all-current-header h1 {
        font-size: 35px;
        font-weight: var(--ode-header-weight);
        font-family: var(--ode-header);
        margin: 0;
        padding: 0;
    }
    .browse-all-current-header h2 {
        font-size: 35px;
        font-weight: var(--ode-header-weight);
        font-family: var(--ode-header);
        margin: 0;
        padding: 0;
        width: 80%;
    }
    .browse-all-current-header {
        width: 100%;
        height: 100px;
        display: flex;
        align-items: center; /* Vertically center the content */
        justify-content: left; /* Align content to the left */
        padding-top: 0px;
        padding-bottom: 10px;
    }

    .browse-event-block-date a {
        font-size: 12px;
        text-decoration: none;
        padding: 0;
    }
    .browse-event-block-desc a {
        font-size: 12px;
        text-decoration: none;
        margin: 0;
        padding: 0;
    }
    .browse-load-more {
        margin-bottom: 0px;
        margin-top: 10px;
        border-top: 1px solid var(--universal-grey);
    }
    .browse-load-more-button {
        padding: 20px 20px;
        cursor: pointer;
        width: 100%;
        border-radius: 50px;
        margin-top: 25px;
        font-size: 20px;
        font-weight: var(--ode-body-button);
        text-decoration: none; /* Ensure no underline by default */
    }
}
/* Organization / Discover Content Styles */
.org-section {
    max-width: 1600px;
    margin: 0 auto;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 30px;
    padding-top: 30px;
}

.org-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
}

.org-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align items to the left */
}
.org-region-desc {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 30px;
    font-size: 18px;
    font-weight: var(--ode-body-weight);
    color: var(--sub-text-color);
    line-height: var(--ode-body-description-line-height);
    max-width: 100%;
}
.org-region-desc .blurb-text--mobile {
    display: none;
}
.org-region-desc a:hover {
    color: var(--main-text-color);
}
.org-title h1 {
    font-size: 55px;
    font-weight: var(--ode-header-weight);
    font-family: var(--ode-header);
    margin: 0;
    padding: 0;
    color: var(--main-text-color);
}
.org-title h2 {
    font-size: 28px;
    font-weight: var(--ode-body-weight);
    margin: 0;
    padding: 0;
    color: var(--main-text-color);
    margin-top: 10px;
}
.org-title h2 a {
    margin: 0;
    padding: 0;
    color: var(--main-text-color);
    text-decoration: underline;
}
.org-title h2 a:hover {
    text-decoration: underline;
}
/* Column Section Styles */

.org-disciplines h2 {
    font-size: 40px;
    font-weight: var(--ode-header-weight);
    font-family: var(--ode-header);
    padding-bottom: 10px;
    padding-top: 20px;
    color: var(--main-text-color);
    line-height: 1;
}

.org-discipline-columns {
    display: flex;
    gap: 20px; /* Space between columns */
    justify-content: space-between;
}

.org-discipline-column {
    flex: 1;
}

.org-discipline-column p {
    margin: 0;
    margin-bottom: 8px;
}
.org-locations {
    padding-top: 5px;
    padding-bottom: 30px;
}

.org-locations h2 {
    font-size: 40px;
    font-weight: var(--ode-header-weight);
    font-family: var(--ode-header);
    margin-top: 40px;
    margin-bottom: 50px;
    color: var(--main-text-color);
    line-height: 1;
}
/* Link Styles */
.org-discipline-column a {
    color: var(--sub-text-color);
    text-decoration: none;
    font-size: 26px;
}
.org-discipline-column a:hover {
    color: var(--explore-link-hover);
}
/* Style for the Read More link */
.read-more {
    color: var(--main-text-color);
    cursor: pointer;
    font-weight: 450;
    text-decoration: underline;
}
/* Optional: Smooth transition for the full blurb */
.full-blurb {
    transition: max-height 0.3s ease;
    overflow: hidden;
}
/* Org Spotlight Styles */
.org-event-block {
    flex: none; /* Reduce width to allow peeking */
    width: 330px;
    overflow: none;
    box-sizing: border-box;
    text-align: left;
    margin-top: 1.5px;
    margin-bottom: 20px; /* Optional: Adds margin at the bottom */
    scroll-snap-align: start;
    color: var(--main-text-color);
    padding: var(--event-card-padding-desktop);
    border-radius: var(--event-card-border-radius);
    border: var(--event-card-outline);
    box-shadow: var(--event-card-shadow);
    transition:
        box-shadow 0.32s var(--event-card-ease),
        transform 0.32s var(--event-card-ease),
        filter 0.32s var(--event-card-ease);
    background-color: var(--event-card-bg);
}
.org-event-block[data-event-href] {
    cursor: pointer;
}
.org-event-block[data-event-href]:focus-visible {
    box-shadow: var(--event-card-shadow-hover);
}
/* minimal hover-only rule */
.org-event-block:hover {
    box-shadow: var(--event-card-shadow-hover);
    transform: translateY(3px) scale(1.005) translateZ(3px);
}
.org-event-block img {
    width: 350px; /* Ensure the image takes the full width of the container */
    height: auto; /* Maintain the aspect ratio */
    max-width: 100%;
    aspect-ratio: 10 / 11;
    object-fit: cover;
    object-position: center;
    margin-bottom: 0px;
    border-radius: var(
        --event-card-border-radius-inset
    ); /* 10-13-2024 Radius Removal: 15px, 06-23-2025 5px */
}
.event-media {
    position: relative;
    border-radius: var(--event-card-border-radius-inset);
    overflow: hidden; /* Keeps overlays clipped to the image bounds */
    clip-path: inset(
        0 round var(--event-card-border-radius-inset)
    ); /* Enforce rounded clipping for overlays */
    -webkit-clip-path: inset(0 round var(--event-card-border-radius-inset));
}
.event-media::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 55%;
    background: linear-gradient(
        to top,
        rgba(10, 10, 10, 0.75) 0%,
        rgba(10, 10, 10, 0.35) 50%,
        rgba(10, 10, 10, 0) 100%
    );
    border-bottom-left-radius: var(--event-card-border-radius-inset);
    border-bottom-right-radius: var(--event-card-border-radius-inset);
    pointer-events: none;
}
.event-tags--overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 12px 14px;
    box-sizing: border-box;
    z-index: 1;
    background: linear-gradient(
        to top,
        rgba(10, 10, 10, 0.65) 0%,
        rgba(10, 10, 10, 0.35) 48%,
        rgba(10, 10, 10, 0.15) 80%,
        rgba(10, 10, 10, 0) 100%
    );
    border-bottom-left-radius: var(--event-card-border-radius-inset);
    border-bottom-right-radius: var(--event-card-border-radius-inset);
    margin-left: 0;
    overflow-x: auto;
}
.event-tags--overlay::after {
    display: none;
}
.event-tags--overlay .profile-toolbar {
    justify-content: flex-start;
    margin-right: 0;
    flex-shrink: 0;
}
.event-tags--overlay > a {
    display: flex;
    align-items: center;
    text-decoration: none;
}
.event-tags--overlay .browse-category-button,
.event-tags--overlay .browse-category-grid-button {
    margin-bottom: 0;
    margin-right: 0;
}
@media (max-width: 768px) {
    .event-media {
        position: relative;
        border-radius: var(--event-card-border-radius-inset-responsive);
        overflow: hidden; /* Keeps overlays clipped to the image bounds */
        clip-path: inset(
            0 round var(--event-card-border-radius-inset-responsive)
        ); /* Enforce rounded clipping for overlays */
        -webkit-clip-path: inset(
            0 round var(--event-card-border-radius-inset-responsive)
        );
    }

    .event-media::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 55%;
        background: linear-gradient(
            to top,
            rgba(10, 10, 10, 0.75) 0%,
            rgba(10, 10, 10, 0.35) 50%,
            rgba(10, 10, 10, 0) 100%
        );
        border-bottom-left-radius: var(
            --event-card-border-radius-inset-responsive
        );
        border-bottom-right-radius: var(
            --event-card-border-radius-inset-responsive
        );
        pointer-events: none;
    }

    .event-tags--overlay {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 12px 14px;
        box-sizing: border-box;
        z-index: 1;
        background: linear-gradient(
            to top,
            rgba(10, 10, 10, 0.65) 0%,
            rgba(10, 10, 10, 0.35) 48%,
            rgba(10, 10, 10, 0.15) 80%,
            rgba(10, 10, 10, 0) 100%
        );
        border-bottom-left-radius: var(
            --event-card-border-radius-inset-responsive
        );
        border-bottom-right-radius: var(
            --event-card-border-radius-inset-responsive
        );
        margin-left: 0;
        overflow-x: auto;
    }
}
.org-event-block h2 {
    font-family: var(--ode-event-block-title);
    letter-spacing: var(--ode-editorial-letter-spacing);
    font-weight: var(--ode-event-block-title-weight);
    font-style: normal;
    margin: 0;
    padding: 0; /* Adjust as needed to ensure proper vertical centering */
    padding-bottom: 2px;
    color: var(--main-text-color);
    margin-bottom: 0;
    width: 100%;
    font-size: 22px;
}
.org-event-block h2 a {
    margin: 0;
    padding: 0;
    color: var(--main-text-color);
    text-decoration: none;
    margin-bottom: 0;
    width: 100%;
}
.org-event-block-end {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 350px; /* Explicitly set the width */
    font-size: 28px;
    background-color: var(--ode-blue);
    color: #fff;
    margin-bottom: 20px;
    box-sizing: border-box;
    scroll-snap-align: start;
    margin-right: 0;
    border-radius: var(
        --event-card-border-radius-inset
    ); /* 10-13-2024 Radius Removal: 10px */
    border: var(--profile-edit-button-outline);
    height: 100%;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color 0.2s,
        color 0.2s,
        border-color 0.2s;
}
.org-event-block-end-text {
    width: 250px;
    text-align: center;
    font-size: 40px;
    font-family: var(--ode-header);
    font-weight: var(--ode-header-weight);
    line-height: 1.2;
}
.org-event-block-end:hover,
.org-event-block-end:focus-visible {
    color: #fff;
    background: var(--profile-edit-button-background-hover);
    border: var(--profile-edit-button-outline-hover);
    text-decoration: none;
}
.org-event-block .event-header {
    display: flex;
}

@media (max-width: 768px) {
    .org-event-block {
        width: 310px;
        scroll-snap-align: start; /* Aligns the event block to the start */
        margin-bottom: 15px;
    }
    .org-event-block:last-child {
        margin-right: 0; /* Removes margin on the last event block */
    }
    .org-event-block img {
        width: 100%; /* Ensure the image takes the full width of the container */
        height: unset; /* Maintain the aspect ratio */
        max-width: 100%;
        aspect-ratio: 10 / 11;
        object-fit: cover;
        object-position: center;
        margin-bottom: 2px;
        border-radius: var(--event-card-border-radius-inset);
    }
    .event-media::after {
        border-bottom-left-radius: var(--event-card-border-radius-inset);
        border-bottom-right-radius: var(--event-card-border-radius-inset);
    }
    .event-tags--overlay {
        padding: 11px 12px;
        gap: 5px;
        border-bottom-left-radius: var(--event-card-border-radius-inset);
        border-bottom-right-radius: var(--event-card-border-radius-inset);
    }
    .org-event-block .image-container {
        border-radius: var(--event-card-border-radius-inset);
    }
    .org-event-block h2 {
        outline: none;
        width: 95%;
        font-size: 18px;
    }
    .org-event-block h2 a {
        margin: 0;
        padding: 0;
        outline: none;
        width: 95%;
    }
    .org-event-block-end {
        width: 100%; /* Ensure the image takes the full width of the container */
        object-fit: cover;
        object-position: center;
        margin-bottom: 15px;
        font-size: 35px;
        background-color: var(--ode-blue);
        color: #fff;
        border: var(--profile-edit-button-outline);
        aspect-ratio: 1 / 1;
        text-decoration: none;
        cursor: pointer;
    }
    .org-event-block-end-text {
        font-size: 35px;
        font-family: var(--ode-header);
        font-weight: var(--ode-header-weight);
        text-decoration: none;
        line-height: 1.2;
    }
    .org-event-block-end:hover,
    .org-event-block-end:focus-visible {
        color: #fff;
        background: var(--profile-edit-button-background-hover);
        border: var(--profile-edit-button-outline-hover);
        text-decoration: none;
    }
}

@media (max-width: 768px) {
    .org-section {
        padding: 0 var(--content-side-padding);
        padding-bottom: 30px;
        padding-top: 10px;
        font-size: 14px;
    }

    .org-header {
        padding-bottom: 5px;
    }

    .org-title h1 {
        font-size: 40px;
        font-weight: var(--ode-header-weight);
        font-family: var(--ode-header);
        line-height: 1;
        margin: 0;
        width: 100%;
        text-align: left; /* Aligns title to the left */
    }
    .org-title h2 {
        font-size: 24px;
        font-weight: var(--ode-body-weight);
        margin: 0;
        padding: 0;
        margin-top: 5px;
    }
    .org-title h2 a {
        margin: 0;
        padding: 0;
        text-decoration: underline;
    }
    .org-title h2 a:hover {
        margin: 0;
        padding: 0;
        text-decoration: underline;
    }
    .org-disciplines {
        padding-top: 0;
        padding-bottom: 5px;
    }
    .org-locations {
        padding-top: 0;
        padding-bottom: 15px;
    }
    .org-region-desc {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 30px;
        font-size: 14px;
        font-weight: var(--ode-body-weight);
        line-height: var(--ode-body-description-line-height);
        max-width: 100%;
    }
    .org-region-desc .blurb-text--desktop {
        display: none;
    }
    .org-region-desc .blurb-text--mobile {
        display: inline;
    }
    .org-disciplines h2 {
        font-size: 35px;
        font-weight: var(--ode-header-weight);
        font-family: var(--ode-header);
        line-height: 1;
        padding-top: 5px;
        padding-bottom: 10px;
    }
    .org-locations h2 {
        font-size: 30px;
        font-weight: var(--ode-header-weight);
        font-family: var(--ode-header);
        margin-top: 20px;
        margin-bottom: 30px;
        line-height: 1;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .org-title {
        flex-direction: column;
        align-items: flex-start; /* Ensures the title is aligned left */
    }

    .org-discipline-columns {
        flex-direction: column;
        gap: 0; /* Remove gaps between columns on mobile */
    }

    .org-discipline-column {
        display: flex;
        flex-direction: column;
    }

    .org-discipline-column p {
        margin: 0;
        margin-bottom: 5px; /* Remove individual paragraph margins to avoid extra spacing */
    }

    /* Responsive Link Styles */
    .org-discipline-column a {
        font-size: 18px;
    }
}
/* Editorial Page Styles */
.editorial-section {
    max-width: 1600px;
    margin: 0 auto;
    padding: 10px 50px 60px 50px;
    text-align: center;
    font-weight: var(--ode-body-weight);
}

.editorial-header {
    margin-bottom: 60px;
}

.editorial-header-title-small {
    font-size: 16px;
    color: var(--sub-text-color);
    margin-bottom: 35px;
    margin-top: 60px;
}
.editorial-header-title-large {
    width: 50%;
    margin: 0 auto;
}
.editorial-header-title-large h1 {
    font-family: var(--ode-header);
    letter-spacing: var(--ode-editorial-letter-spacing);
    font-weight: 400;
    font-style: normal;
    text-wrap: balance;
    font-size: 60px;
    line-height: 1;
    margin: 0;
    color: var(--main-text-color);
}

.editorial-body {
    width: 100%;
    max-width: 1100px;
    margin: 20px auto;
    text-align: left;
    line-height: 1.8;
    font-size: 18px;
}

.editorial-featured-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-col-desktop);
    justify-content: center; /* Center everything for a nice layout */
}

/* Remove extra vertical spacing on links */
.editorial-body a {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    margin-bottom: 0;
}

.featured-article {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    padding: 10px 40px;
    box-sizing: border-box;
    color: white;
    border-radius: 35px;
    overflow: hidden;
    transition: opacity 0.3s ease;
    background-size: cover;
    background-position: center;
}

.featured-article:hover {
    opacity: 0.9;
    text-decoration: none;
}

.featured-article::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    z-index: 1;
}

/* First article: fixed width of 1100px and centered */
.editorial-featured-list a:nth-child(1) .featured-article {
    width: 1100px;
    height: 600px;
    margin: 0;
}

/* Subsequent articles: slightly less than half to ensure two fit side-by-side with a 20px gap */
.editorial-featured-list a:nth-child(n + 2) .featured-article {
    width: 545px;
    height: 320px;
}

.editorial-article-date-byline {
    font-size: 16px;
    color: #fff;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
    margin-bottom: 0;
    padding-top: 20px;
    z-index: 3;
    font-weight: var(--ode-body-weight);
}

.editorial-article-title {
    font-family: var(--ode-header);
    letter-spacing: var(--ode-editorial-letter-spacing);
    font-weight: 400;
    font-style: normal;
    font-size: 26px;
    text-wrap: balance;
    color: #fff;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
    margin-top: auto;
    padding-bottom: 20px;
    z-index: 2;
    width: 600px;
    line-height: 1;
}
.editorial-body a {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    /* Remove margin-bottom entirely or set it to 0 */
    margin-bottom: 0;
}
/* For everything after the first featured article */
.editorial-featured-list a:nth-child(n + 2) .editorial-article-date-byline {
    font-size: 14px; /* Smaller font size for date-byline */
    padding-top: 10px; /* Adjust spacing as needed */
    font-weight: var(--ode-body-weight); /* Lighter font weight if desired */
    text-wrap: balance;
}

.editorial-featured-list a:nth-child(n + 2) .editorial-article-title {
    font-size: 20px; /* Smaller font size for title */
    padding-bottom: 10px; /* Adjust spacing as needed */
    width: 100%; /* Allow text to span the full width */
    line-height: 1; /* Tighter line height for smaller text */
    text-wrap: balance;
}

/* Non-mobile layout: keep two-up featured cards below the hero */
@media (min-width: 769px) {
    .editorial-section {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Force a 1 + 2 layout with CSS Grid */
    .editorial-featured-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--gap-col-desktop);
        justify-content: center;
    }
    .editorial-featured-list > a {
        width: 100%;
    }

    /* Full-width hero spans both columns */
    .editorial-featured-list a:nth-child(1) {
        grid-column: 1 / -1;
    }
    .editorial-featured-list a:nth-child(1) .featured-article {
        width: 100%;
        height: 520px;
    }

    /* Two-up cards fit columns */
    .editorial-featured-list a:nth-child(n + 2) .featured-article {
        width: 100%;
        height: 320px;
    }

    /* Let titles flow naturally within narrower cards */
    .editorial-article-title {
        width: auto;
    }
}
.editorial-body a:focus,
.editorial-body a:hover {
    outline: none;
    /* You can add additional styles here, such as a slight opacity change */
    opacity: 0.9;
    text-decoration: none;
}
/* All Articles Section */
.all-articles-section {
    max-width: 1100px;
    margin: 0 auto;
    text-align: left;
}

.all-articles-section h2 {
    font-size: 40px;
    font-weight: var(--ode-header-weight);
    font-family: var(--ode-header);
    padding-top: 20px;
    padding-bottom: 20px;
    color: var(--main-text-color);
    line-height: 1;
}

.all-articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Creates a 3-column layout */
    gap: var(--gap-col-desktop);
}

.article-block {
    width: 100%;
    height: 472px; /* Adjust as needed */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    padding: 10px 20px; /* Adds 10px padding to the left and right */
    box-sizing: border-box;
    color: white;
    overflow: hidden;
    transition: opacity 0.3s ease; /* Smooth transition for hover effect */
    border-radius: 25px; /* 10-13-2024 Radius Removal: 15px, 06-23-2025 5px originally */
}
.article-block::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1); /* 20% black overlay */
    z-index: 1; /* Places the overlay below the text but above the background */
    pointer-events: none; /* Ensures the overlay doesn't interfere with clicks */
}
.article-block:hover {
    opacity: 0.9; /* Changes opacity on hover */
}

.article-date-byline {
    font-size: 14px;
    color: #fff;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
    margin-bottom: 0;
    padding-top: 10px; /* Positions it at the top */
    padding-left: 10px; /* Aligns the text with 10px padding */
    padding-right: 10px; /* Aligns the text with 10px padding */
    text-align: left; /* Left-aligns the text */
    z-index: 3;
    font-weight: var(--ode-body-weight);
}

.article-title {
    font-family: var(--ode-header);
    letter-spacing: var(--ode-editorial-letter-spacing);
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    color: #fff;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
    padding-bottom: 10px; /* Positions it at the bottom */
    padding-left: 10px; /* Aligns the text with 10px padding */
    padding-right: 10px; /* Aligns the text with 10px padding */
    text-align: left; /* Left-aligns the text */
    z-index: 2;
    width: 250px;
    line-height: 1.1;
    text-wrap: balance;
}

@media (max-width: 768px) {
    .editorial-section {
        padding: 0 var(--content-side-padding);
        padding-top: 0;
        padding-bottom: 30px;
    }
    .editorial-header-title-small {
        font-size: 14px;
        margin-bottom: 20px;
        margin-top: 60px;
    }
    .editorial-header-title-large {
        width: unset;
    }
    .editorial-header-title-large h1 {
        letter-spacing: var(--ode-editorial-letter-spacing);
        font-weight: 400;
        font-style: normal;
        text-wrap: balance;
        line-height: 1;
        font-size: 45px;
        margin: 0;
        padding: 0;
        outline: 0;
        margin: 0;
    }
    .editorial-body a {
        display: block;
        text-decoration: none;
        color: inherit;
        cursor: pointer;
        margin-bottom: 0;
    }

    .editorial-body a:focus,
    .editorial-body a:hover {
        outline: none;
        /* You can add additional styles here, such as a slight opacity change */
        opacity: 0.9;
    }
    .editorial-body {
        max-width: 100%;
        padding: 0px; /* Adds 10px padding to the left and right */
    }

    .featured-article {
        width: 100%; /* Set to 100% for responsiveness */
        padding: 10px 15px; /* Reduce padding for better fit on smaller screens */
        border-radius: 25px;
    }
    .editorial-featured-list {
        display: inline;
        flex-wrap: wrap;
        justify-content: center; /* Center everything for a nice layout */
    }
    /* First featured item on mobile */
    .editorial-featured-list a:nth-child(1) .featured-article {
        width: 100%;
        height: 450px;
        margin: 0; /* Ensure no extra margin if any was set before */
    }

    /* Subsequent featured items on mobile */
    .editorial-featured-list a:nth-child(n + 2) .featured-article {
        width: 100%;
        height: 350px;
        margin-top: 10px;
    }
    .all-articles-grid {
        grid-template-columns: 1fr;
        gap: var(--gap-col-responsive);
    }
    .all-articles-section h2 {
        font-size: 35px;
        font-weight: var(--ode-header-weight);
        font-family: var(--ode-header);
        line-height: 1;
    }
    .article-block {
        width: 100%;
        height: 200px; /* Adjust as needed */
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
        padding: 10px 10px; /* Adds 10px padding to the left and right */
        box-sizing: border-box;
        color: white;
        overflow: hidden;
        transition: opacity 0.3s ease; /* Smooth transition for hover effect */
    }
    .article-block::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1; /* Places the overlay below the text but above the background */
        pointer-events: none; /* Ensures the overlay doesn't interfere with clicks */
    }
    .article-block:hover {
        opacity: 0.9; /* Changes opacity on hover */
    }
    .editorial-article-date-byline {
        font-size: 12px;
        color: #fff;
        text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
        margin-bottom: 0; /* Removes bottom margin to push it closer to the top */
        padding-top: 10px; /* Fine-tuning to push it closer to the top */
        z-index: 3;
        font-weight: var(--ode-body-weight);
    }

    .editorial-article-title {
        letter-spacing: var(--ode-editorial-letter-spacing);
        font-weight: 400;
        font-style: normal;
        text-wrap: balance;
        line-height: 1;
        font-size: 24px;
        color: #fff;
        text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
        margin-top: auto; /* Keeps title at the bottom */
        padding-bottom: 15px; /* Fine-tuning to push it closer to the bottom */
        z-index: 2;
        width: 350px;
    }
    .article-date-byline {
        font-size: 12px;
        color: #fff;
        text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
        margin-bottom: 0;
        padding-top: 15px; /* Positions it at the top */
        padding-left: 10px; /* Aligns the text with 10px padding */
        padding-right: 10px; /* Aligns the text with 10px padding */
        text-align: left; /* Left-aligns the text */
        z-index: 3;
        font-weight: var(--ode-body-weight);
    }

    .article-title {
        letter-spacing: var(--ode-editorial-letter-spacing);
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
        color: #fff;
        text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
        padding-bottom: 10px; /* Positions it at the bottom */
        padding-left: 10px; /* Aligns the text with 10px padding */
        padding-right: 10px; /* Aligns the text with 10px padding */
        text-align: left; /* Left-aligns the text */
        z-index: 2;
        width: 70%;
    }
}

.org-disciplines img {
    border-radius: 5px; /* 10-13-2024 Radius Removal: 15px */
}
.featured-editorial {
    -ms-overflow-style: none; /* Hide scrollbar for Internet Explorer and Edge */
    scrollbar-width: none; /* Hide scrollbar for Firefox */
    overflow-x: scroll; /* Ensures horizontal scrolling */
    padding-left: var(--event-block-gutter);
    padding-right: var(--event-block-gutter);
}

.featured-editorial::-webkit-scrollbar {
    display: none; /* Completely hides the scrollbar on WebKit browsers */
}
.featured-editorial {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 20px;
}
.featured-editorial .all-articles-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr); /* Creates a 4-column layout */
    gap: var(--gap-col-desktop);
    margin-bottom: 0px;
}
.featured-editorial .article-block {
    width: 370px;
    height: 472px; /* Adjust as needed */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    padding: 10px 20px; /* Adds 10px padding to the left and right */
    box-sizing: border-box;
    color: white;
    overflow: hidden;
    transition: opacity 0.3s ease; /* Smooth transition for hover effect */
    border-radius: 25px; /* 10-13-2024 Radius Removal: 15px */
}
.featured-editorial .article-block::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1); /* 20% black overlay */
    z-index: 1; /* Places the overlay below the text but above the background */
    pointer-events: none; /* Ensures the overlay doesn't interfere with clicks */
}
.article-block:hover {
    opacity: 0.9; /* Changes opacity on hover */
}
@media (max-width: 768px) {
    .org-disciplines img {
        border-radius: 5px;
        height: 250px;
    }
    .featured-editorial .all-articles-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr); /* Creates a 4-column layout */
        gap: var(--gap-col-responsive);
        margin-bottom: 0px;
    }
    .featured-editorial {
        padding-bottom: 0px;
    }
    .featured-editorial .article-block {
        width: 330px;
        height: 430px; /* Adjust as needed */
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
        padding: 10px 10px; /* Adds 10px padding to the left and right */
        box-sizing: border-box;
        color: white;
        overflow: hidden;
        transition: opacity 0.3s ease; /* Smooth transition for hover effect */
    }
    .featured-editorial .article-block::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.1); /* 20% black overlay */
        z-index: 1; /* Places the overlay below the text but above the background */
        pointer-events: none; /* Ensures the overlay doesn't interfere with clicks */
    }
    .featured-editorial .article-block:hover {
        opacity: 0.9; /* Changes opacity on hover */
    }
    .featured-editorial::-webkit-scrollbar {
        overflow-x: scroll;
        height: 0; /* Adjust the height of the scrollbar */
        background-color: transparent; /* Background color of the scrollbar track */
    }

    .featured-editorial::-webkit-scrollbar-thumb {
        background-color: transparent; /* Color of the scrollbar thumb (the part that shows the current scroll position) */
    }

    .featured-editorial::-webkit-scrollbar-thumb:hover {
        background-color: transparent; /* Darker color when hovering over the scrollbar thumb */
    }
}
/* Location Overlay styling */
.location-overlay {
    opacity: 0;
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(
            1200px 700px at 15% 10%,
            rgba(0, 4, 245, 0.12),
            transparent 60%
        ),
        radial-gradient(
            900px 600px at 85% 0%,
            rgba(0, 0, 0, 0.15),
            transparent 55%
        ),
        var(--location-overlay-background);
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
    z-index: 9999;
}

@media (min-width: 769px) {
    [data-theme="light"] .location-overlay-panel {
        background: var(--bg-color);
    }
}

.location-overlay.active {
    opacity: 1;
    visibility: visible;
}

.location-overlay.hidden {
    pointer-events: none;
}

.close-btn {
    background: transparent;
    border: none;
    outline: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    appearance: none;
}

.close-btn:focus-visible {
    outline: 2px solid var(--ode-blue);
    outline-offset: 4px;
    border-radius: 50%;
}

.location-overlay .close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    z-index: 2;
    pointer-events: auto;
}

#close-location-overlay svg {
    width: 60px;
    height: 60px;
}

.location-overlay-panel {
    position: relative;
    width: min(760px, 92vw);
    max-height: 85vh;
    background: var(--bg-color-translucent);
    border-radius: 50px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
    padding: 34px 36px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    transform: translateY(8px) scale(0.98);
    transition: transform 0.3s ease;
    z-index: 1;
}

[data-theme="dark"] .location-overlay-panel {
    background: var(--auth-card-bg);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

.location-overlay.active .location-overlay-panel {
    transform: translateY(0) scale(1);
}

.location-overlay-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.location-overlay-eyebrow {
    margin: 0;
    font-size: 13px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sub-text-color);
}

.location-overlay-title {
    margin: 0;
    font-family: var(--ode-header);
    font-size: clamp(32px, 5vw, 54px);
    font-weight: 450;
    color: var(--main-text-color);
    line-height: 1.05;
    margin-bottom: 10px;
}

.location-search {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.location-search img {
    position: absolute;
    left: 16px;
    width: 18px;
    height: 18px;
    opacity: 0.7;
}

.location-search-input {
    width: 100%;
    padding: 20px 10px 20px 44px;
    border: 1px solid #c2c2c2;
    border-radius: 35px;
    background: transparent;
    appearance: none;
    font-family: var(--ode-body);
    font-size: 18px;
    color: var(--main-text-color);
    outline: none;
}
@media (max-width: 768px) {
    .location-search-input {
        padding: 15px 10px 20px 44px;
    }
    .location-search img {
        position: absolute;
        left: 16px;
        top: 20px;
        width: 18px;
        height: 18px;
        opacity: 0.7;
    }
}
.location-search-input::placeholder {
    color: var(--search-text-placeholder);
}

.location-search:focus-within {
    outline: none;
}

.location-search-input:focus {
    border: 1px solid var(--ode-blue);
    box-shadow: 0 0 0 2px rgba(0, 4, 245, 0.12);
}

.location-overlay-body {
    display: flex;
    flex-direction: column;
    gap: 22px;
    overflow-y: auto;
    padding-right: 6px;
}

.location-section-label {
    margin: 0 0 10px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--sub-text-color);
}

.location-results-list,
.location-popular-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.location-result-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 20px;
    border-radius: 25px;
    text-decoration: none;
    color: var(--main-text-color);
    background: rgba(0, 0, 0, 0.04);
    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

[data-theme="dark"] .location-result-link {
    background: rgba(255, 255, 255, 0.06);
}

.location-result-link:hover {
    background: var(--ode-blue);
    color: #ffffff;
    transform: translateY(-1px);
}

.location-result-link:active {
    background: var(--ode-blue);
    color: #ffffff;
    transform: translateY(-1px);
}

.location-result-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--ode-blue);
}

.location-result-link:hover .location-result-action {
    background: #ffffff;
}

.location-result-link:hover span {
    color: #ffffff;
}

.location-result-link:hover .location-result-action {
    color: #ffffff;
}

.location-result-link:active span {
    color: #ffffff;
}

.location-result-link:active .location-result-action {
    color: #ffffff;
}

.location-results-empty,
.location-empty {
    margin: 0;
    color: var(--sub-text-color);
    font-size: 14px;
}

.pin-limit-message {
    margin: 0;
    font-size: 13px;
    color: var(--ode-blue);
}

.pin-result-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 20px;
    border-radius: 25px;
    background: rgba(0, 0, 0, 0.04);
    color: var(--main-text-color);
    transition:
        background 0.2s ease,
        transform 0.2s ease,
        color 0.2s ease;
}

[data-theme="dark"] .pin-result-row {
    background: rgba(255, 255, 255, 0.06);
}

.pin-result-row-button {
    width: 100%;
    border: none;
    text-align: left;
    cursor: pointer;
}

.pin-result-row-button:focus-visible {
    outline: 2px solid var(--ode-blue);
    outline-offset: 2px;
}


.pin-result-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.pin-result-label {
    font-size: 16px;
    font-weight: 500;
    color: inherit;
}

.pin-result-meta {
    font-size: 13px;
    color: var(--sub-text-color);
}


.pin-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid #c2c2c2;
    background: transparent;
    color: currentColor;
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
    pointer-events: none;
}

.pin-action-button .pin-icon-body {
    fill: none;
}

.pin-action-button--active {
    background: var(--ode-blue);
    border-color: var(--ode-blue);
    color: #ffffff;
}

.pin-action-button--active .pin-icon-body {
    fill: currentColor;
}

@media (hover: hover) and (pointer: fine) {
    .pin-result-row:hover {
        background: var(--ode-blue);
        color: #ffffff;
        transform: translateY(-1px);
    }

    .pin-result-row:hover .pin-result-meta {
        color: rgba(255, 255, 255, 0.85);
    }

    .pin-result-row:hover .pin-action-button {
        border-color: rgba(255, 255, 255, 0.8);
    }

    .pin-result-row:hover .pin-action-button--active {
        background: #ffffff;
        color: var(--ode-blue);
        border-color: #ffffff;
    }
}

.pin-empty-item {
    margin: 0;
    color: var(--sub-text-color);
    font-size: 14px;
    list-style: none;
}

@media (max-width: 768px) {
    [data-theme="dark"] .location-overlay-panel {
        background: var(--bg-color);
    }

    .location-overlay {
        background-color: var(--bg-color);
        background-image: none;
        background: var(--bg-color);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        opacity: 1;
    }

    .location-overlay-panel {
        width: 100%;
        height: 100%;
        max-height: none;
        border-radius: 0;
        background: var(--bg-color);
        border: none;
        box-shadow: none;
        padding: 0;
    }

    .location-overlay-body {
        flex: 1;
    }

    .location-overlay-header,
    .location-overlay-body,
    .location-overlay-footer {
        padding: 0 20px;
    }

    .location-overlay-header {
        padding-top: 26px;
    }

    .location-overlay-panel {
        justify-content: center;
    }

    .location-overlay-panel > * {
        flex: 0 0 auto;
    }

    .location-overlay-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }

    #close-location-overlay svg {
        width: 42px;
        height: 42px;
    }
}
.no-scroll {
    overflow: hidden;
}

/* Privacy & Terms Section */
.privacy-section {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 30px;
    padding-top: 30px;
    font-size: 14px;
    color: var(--main-text-color);
}
.privacy-section a,
a:hover {
    color: var(--main-text-color);
    text-decoration: underline;
}
.privacy-section h1 {
    font-size: 30px;
    font-weight: 450;
}
@media (max-width: 768px) {
    .privacy-section {
        padding: 0 var(--content-side-padding);
        padding-bottom: 30px;
        padding-top: 30px;
        font-size: 14px;
    }
}

/* FAQ Section */
.faq-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 50px 60px;
    color: var(--main-text-color);
}
.faq-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 60px;
    margin-bottom: 35px;
    padding-top: 20px;
}
.faq-title h1 {
    font-size: 70px;
    font-weight: var(--ode-header-weight);
    font-family: var(--ode-header);
    line-height: 1;
    margin: 0;
    padding-top: 20px;
}
.faq-title p {
    margin: 14px 0 0;
    font-size: 16px;
    color: var(--sub-text-color);
    line-height: 1.55;
    max-width: 560px;
}
.faq-topic-title {
    font-family: var(--ode-header);
    font-weight: var(--ode-header-weight);
    font-size: 35px;
    display: block;
    padding-top: 15px;
    color: var(--main-text-color);
}
.faq-topic + .faq-topic {
    margin-top: 40px;
}
.faq-accordion {
    border-top: 1px solid var(--universal-grey);
    border-bottom: 1px solid var(--universal-grey);
}
.faq-accordion--no-bottom {
    border-bottom: 0;
}
.faq-topic .faq-accordion {
    border-top: 0;
}
.faq-topic:first-of-type .faq-accordion {
    border-top: 0;
}
.faq-accordion-item + .faq-accordion-item .faq-accordion-button {
    border-top: 1px solid var(--universal-grey);
}
.faq-accordion-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--main-text-color);
    font-size: 18px;
    font-weight: var(--ode-body-weight);
    font-family: var(--ode-body);
    padding: 22px 0;
    text-align: left;
}
.faq-accordion-button.is-static {
    cursor: default;
}
.faq-accordion-button:focus {
    outline: none;
}
.faq-accordion-button:focus-visible {
    outline: 2px solid var(--universal-grey);
    outline-offset: 4px;
}
.faq-accordion-caret {
    transition: transform 0.18s ease;
    flex-shrink: 0;
}
.faq-accordion-button[aria-expanded="true"] .faq-accordion-caret {
    transform: rotate(45deg);
}
.faq-accordion-panel {
    overflow: hidden;
    max-height: 0;
    transition:
        max-height 0.18s ease,
        padding 0.18s ease;
    padding: 0;
}
.faq-accordion-panel.is-open {
    margin-top: 0;
    padding: 12px 0 30px;
}
.faq-accordion-answer {
    font-size: 16px;
    line-height: var(--ode-body-description-line-height);
    color: var(--sub-text-color);
    font-family: var(--ode-body);
}
.faq-accordion-answer a {
    color: var(--main-text-color);
    text-decoration: underline;
}
.faq-accordion-answer a:hover {
    color: var(--main-text-color);
}
@media (max-width: 768px) {
    .faq-section {
        padding: 20px var(--content-side-padding) 40px;
    }
    .faq-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }
    .faq-title h1 {
        font-size: 70px;
        padding-top: 5px;
    }
    .faq-title p {
        font-size: 14px;
    }
    .faq-topic-title {
        font-size: 25px;
    }
    .faq-topic + .faq-topic {
        margin-top: 30px;
    }
    .faq-accordion-button {
        font-size: 16px;
        padding: 18px 0;
    }
    .faq-accordion-panel.is-open {
        margin-top: 0;
        padding: 8px 0 24px;
    }
    .faq-accordion-answer {
        font-size: 14px;
    }
}

/* Registration Stations */
.registration-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: var(--main-text-color);
}
.registration-container input::placeholder {
    color: var(--auth-input-placeholder);
}
.registration-container input:focus {
    outline: none;
}
.registration-container select {
    color: var(--auth-select-placeholder);
    background-color: var(--auth-input-bg);
    border: var(--auth-input-border);
    transition:
        border 0.3s ease,
        color 0.3s ease,
        background-color 0.3s ease;
}

.registration-container select:focus {
    outline: none;
}

.registration-container select option {
    color: var(--auth-input-text);
    background-color: var(--auth-input-bg);
}
.registration-container a:hover {
    color: var(--ode-blue-offset);
}

.registration-form-wrapper {
    background-color: transparent;
    padding: 40px;
    border-radius: 0;
    width: 100%;
    max-width: 450px;
    text-align: center;
    color: var(--auth-card-text);
    font-weight: var(--ode-body-weight);
    font-size: 14px;
    border: none;
    box-shadow: none;
    transition: color 0.3s ease;
}

.registration-form-wrapper img.registration-logo {
    width: 60px;
    height: 60px;
    display: block;
    margin: 0 auto 20px;
}
.registration-logo-link {
    display: inline-block;
    text-decoration: none;
    color: inherit;
}
.registration-logo-link picture {
    display: block;
}
.registration-title {
    font-size: 36px;
    font-weight: 400;
    margin-bottom: 20px;
    color: var(--auth-card-text);
}
.registration-top-text {
    font-size: 14px;
    font-weight: var(--ode-body-weight);
    margin-bottom: 20px;
    color: var(--auth-card-text);
}
.registration-top-text a {
    font-size: 14px;
    font-weight: var(--ode-body-weight);
    color: var(--useraccount-link-color);
    text-decoration: none;
}
.registration-bottom-text {
    font-size: 14px;
    font-weight: var(--ode-body-weight);
    margin-top: 20px;
    color: var(--auth-card-text);
}
.registration-bottom-text a {
    font-size: 14px;
    font-weight: var(--ode-body-weight);
    color: var(--useraccount-link-color);
    text-decoration: none;
}
.registration-terms-text {
    font-size: 14px;
    font-weight: var(--ode-body-weight);
    color: var(--auth-card-text);
}
.registration-terms-text a {
    font-size: 14px;
    font-weight: var(--ode-body-weight);
    color: var(--useraccount-link-color);
    text-decoration: none;
}
@media (max-width: 768px) {
    .registration-terms-text {
        font-size: 12.5px;
        font-weight: var(--ode-body-weight);
        color: var(--auth-card-text);
    }
    .registration-terms-text a {
        font-size: 12.5px;
        font-weight: var(--ode-body-weight);
        color: var(--useraccount-link-color);
        text-decoration: none;
    }
}
.registration-input-text,
.registration-input-email,
.registration-input-password {
    width: 100%;
    padding: 15px 20px;
    margin: 10px 0;
    border: var(--auth-input-border);
    border-radius: 35px;
    font-size: 16px;
    color: var(--auth-input-text);
    outline: none;
    appearance: none;
    background-color: var(--auth-input-bg);
    transition:
        border 0.3s ease,
        color 0.3s ease,
        background-color 0.3s ease,
        box-shadow 0.3s ease;
}
.registration-select {
    width: 100%;
    padding: 15px 52px 15px 20px; /* Extra right padding so arrow sits ~30px from edge */
    margin: 10px 0;
    border: var(--auth-input-border);
    font-size: 16px;
    color: var(--auth-select-placeholder);
    outline: none;
    appearance: none; /* Remove default arrow */
    background-color: var(--auth-input-bg);
    background-image: var(--registration-arrow-svg);
    background-repeat: no-repeat;
    background-position: right 28px center;
    background-size: 10px;
    cursor: pointer; /* Change cursor to pointer */
    transition:
        border 0.3s ease,
        color 0.3s ease,
        background-color 0.3s ease,
        box-shadow 0.3s ease,
        background-image 0.3s ease;
    border-radius: 35px;
}
/* Container styles for label */
.registration-terms {
    display: flex;
    justify-content: center;
}
.registration-label {
    display: inline-flex; /* Aligns children in a row */
    align-items: center; /* Vertically centers checkbox and text */
    justify-content: center; /* Center checkbox + text as a group */
    gap: 10px; /* Adds space between checkbox and text */
    cursor: pointer; /* Makes the label clickable */
    text-align: center;
    margin: 10px 0;
    width: auto;
}

/* Base styling for the checkbox */
.registration-checkbox {
    appearance: none; /* Remove default styling */
    -webkit-appearance: none; /* For Safari */
    -moz-appearance: none; /* For Firefox */
    display: inline-block;
    width: 15px; /* Adjust size */
    height: 15px; /* Adjust size */
    background-color: transparent;
    border: 1px solid var(--auth-checkbox-border);
    border-radius: 4px; /* Optional rounded corners */
    cursor: pointer;
    position: relative;
    outline: none;
    transition:
        background-color 0.3s,
        border-color 0.3s; /* Smooth transition */
}

/* Style when checkbox is checked */
.registration-checkbox:checked {
    background-color: var(--ode-blue); /* Background color when checked */
    border-color: var(--ode-blue);
}

/* Add the checkmark */
.registration-checkbox:checked::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px; /* Adjust checkmark width */
    height: 10px; /* Adjust checkmark height */
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg); /* Center and rotate the checkmark */
    transition: all 0.3s; /* Smooth checkmark animation */
}

/* Focus styles for accessibility */
.registration-checkbox:focus {
    outline: 2px solid var(--ode-blue);
    outline-offset: 2px;
}

.registration-input-submit {
    width: 100%;
    padding: 15px 30px;
    margin-top: 10px;
    background-color: var(--ode-blue);
    border: 1px solid var(--ode-blue);
    border-radius: 80px;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease;
    font-weight: 400;
}

.registration-input-submit:hover {
    background-color: var(--ode-blue-offset);
    border: 1px solid var(--ode-blue-offset);
    text-decoration: underline;
}

.registration-input-text:focus,
.registration-input-email:focus,
.registration-input-password:focus,
.registration-select:focus {
    border-color: var(--ode-blue);
    box-shadow: 0 0 0 3px rgba(0, 4, 245, 0.12);
    color: var(--auth-input-text);
}

/* Responsive styling */
@media (max-width: 768px) {
    .registration-title {
        font-size: 30px;
        font-weight: 400;
        margin-bottom: 20px;
        color: var(--auth-card-text);
    }

    .registration-input-text,
    .registration-input-email,
    .registration-input-password {
        width: 100%;
        padding: 15px 20px;
        margin: 10px 0;
        border: var(--auth-input-border);
        border-radius: 30px;
        font-size: 16px;
        color: var(--auth-input-text);
        outline: none;
        background-color: var(--auth-input-bg);
        transition:
            border 0.3s ease,
            color 0.3s ease,
            background-color 0.3s ease,
            box-shadow 0.3s ease;
    }

    .registration-input-submit {
        width: 100%;
        padding: 15px 30px;
        margin-top: 10px;
        background-color: var(--ode-blue);
        border-radius: 80px;
        color: white;
        font-size: 16px;
        cursor: pointer;
        transition: background-color 0.3s ease;
        font-weight: 400;
        border: 1px solid var(--ode-blue);
    }

    .registration-input-submit:hover {
        background-color: var(--ode-blue-offset);
        border: 1px solid var(--ode-blue-offset);
        text-decoration: underline;
    }
}

/* User Profile Styles */
.profile-pic {
    width: 51px;
    height: 51px;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
    box-sizing: border-box; /* Keep border inside declared dimensions */
    display: block; /* Remove inline whitespace that can offset overlay */
}
.profile-section {
    max-width: 1600px;
    margin: 0 auto;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 30px;
    padding-top: 60px;
}

.profile-header {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items horizontally */
    justify-content: center;
    width: 100%;
}

.profile-pic-container {
    position: relative;
    display: inline-block;
    cursor: pointer;
    width: 80px;
    height: 80px;
    line-height: 0; /* Remove inline-block descender gap so overlay stays square */
}

.profile-header .profile-pic {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
    transition:
        opacity 0.2s ease,
        filter 0.2s ease,
        transform 0.2s ease;
}

.profile-pic-edit-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transform: scale(1) rotate(0deg);
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.profile-pic-container .switch-icon,
.profile-pic-container .edit-icon {
    color: white;
}

.profile-pic-edit-badge .edit-icon {
    width: 18px;
    height: 18px;
}

.profile-pic-overlay {
    position: absolute;
    inset: 0; /* Fill container exactly */
    width: auto;
    height: auto;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.profile-pic-container .upload-icon,
.profile-pic-container .profile-pic-overlay .switch-icon {
    color: white;
    width: 32px;
    height: 32px;
}

.profile-pic-container .upload-icon {
    display: none;
}

.profile-pic-container.is-dragover .profile-pic-overlay {
    opacity: 1;
}

.profile-pic-container.is-dragover .profile-pic {
    opacity: 0.7;
}

.profile-pic-container.is-dragover .profile-pic-edit-badge {
    opacity: 0;
    transform: scale(0.5) rotate(-90deg);
}

.profile-pic-container.is-dragover .profile-pic-overlay .switch-icon {
    display: none;
}

.profile-pic-container.is-dragover .upload-icon {
    display: block;
}

.profile-pic-container.is-hold-upload .profile-pic-overlay {
    opacity: 1;
}

.profile-pic-container.is-hold-upload .profile-pic {
    opacity: 0.7;
}

.profile-pic-container.is-hold-upload .profile-pic-edit-badge {
    opacity: 0;
    transform: scale(0.5) rotate(-90deg);
}

.profile-pic-container.is-hold-upload .profile-pic-overlay .switch-icon {
    display: none;
}

.profile-pic-container.is-hold-upload .upload-icon {
    display: block;
}

.profile-pic-container.is-hovered .profile-pic {
    opacity: 0.7;
}

.profile-pic-container.is-hovered .profile-pic-overlay {
    opacity: 1;
}

.profile-pic-container.is-hovered .profile-pic-edit-badge {
    opacity: 0;
    transform: scale(0.5) rotate(-90deg);
}

.profile-pic-container.is-switching {
    pointer-events: none;
}

@keyframes ode-avatar-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.profile-pic-container.is-switching .profile-pic-overlay .switch-icon {
    animation: ode-avatar-spin 420ms ease-in-out 1;
}

.profile-name {
    margin-top: 15px; /* Space between image and name */
    font-size: 28px;
    text-align: center; /* Center the text */
    font-family: var(--ode-header);
    letter-spacing: var(--ode-editorial-letter-spacing);
    font-weight: 400;
    font-style: normal;
    text-wrap: balance;
    line-height: 1;
    color: var(--main-text-color);
}
.profile-username {
    display: flex;
    align-items: center;
    padding: 0; /* Remove any padding that might push content down */
    justify-content: center;
    width: 100%;
    margin-top: 5px;
    font-size: 14px;
    font-weight: 550;
    color: var(--sub-text-color);
}
.edit-profile {
    display: flex;
    align-items: center;
    padding: 0; /* Remove any padding that might push content down */
    justify-content: center;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
}
.edit-profile button {
    background: var(--ode-blue);
    border: var(--profile-edit-button-outline);
    border-radius: 60px;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
    height: 45px;
    font-size: 12px;
    font-weight: 450;
    width: 105px;
    transition:
        background-color 0.2s,
        color 0.2s;
}
.edit-profile button:hover {
    background: var(--profile-edit-button-background-hover);
    border: var(--profile-edit-button-outline-hover);
    border-radius: 60px;
    cursor: pointer;
    text-decoration: underline;
    height: 45px;
    width: 105px;
}
.profile-tabs {
    display: flex;
    justify-content: space-between; /* Evenly space the tabs */
    width: 100%; /* Full width of the container */
    border-bottom: var(--profile-tabs-track); /* Base line under all tabs */
    padding-bottom: 5px; /* Space between tab content and base line */
    padding-top: 20px;
}

.profile-tabs a {
    flex: 1; /* Each tab takes up an equal amount of space */
    text-align: center; /* Center the text in each tab */
    padding: 10px 0;
    font-size: 16px;
    color: var(--sub-text-color); /* Default tab text color */
    text-decoration: none;
    position: relative;
}
.profile-tabs a:hover {
    color: var(--main-text-color);
}
.profile-tabs a.active {
    color: var(--main-text-color);
}

.profile-tabs a.active::after {
    content: "";
    position: absolute;
    bottom: -6px; /* Move underline slightly lower to align with base line */
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--main-text-color);
}
.profile-content {
    flex-direction: row; /* Ensure columns are side by side */
    justify-content: space-between;
    margin-top: 30px;
    font-size: 16px;
    color: #707070;
    font-weight: var(--ode-body-weight);
}

/* Profile tab loading skeleton */
.profile-skeleton {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 50px;
}

.profile-skeleton-line,
.profile-skeleton-row,
.profile-skeleton-card {
    position: relative;
    overflow: hidden;
    background: var(--hero-slider-background);
}

.profile-skeleton-line::after,
.profile-skeleton-row::after,
.profile-skeleton-card::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.65) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: odeSkeletonShimmer 1.15s infinite;
}

.profile-skeleton-line {
    height: 22px;
    border-radius: 10px;
    width: 40%;
}

.profile-skeleton-line--title {
    width: 32%;
    height: 50px;
}

.profile-skeleton-row {
    height: 74px;
    border-radius: 18px;
}

.profile-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    column-gap: var(--gap-col-desktop);
    row-gap: var(--gap-row-desktop);
}

.profile-skeleton-card {
    height: 340px;
    border-radius: var(--event-card-browse-grid-border-radius-desktop);
}

@media (max-width: 768px) {
    .profile-skeleton-grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap: var(--gap-col-responsive);
        row-gap: var(--gap-row-responsive);
    }
    .profile-skeleton-card {
        border-radius: var(--event-card-browse-grid-border-radius-responsive);
        height: 280px;
    }
    .profile-skeleton-line {
        width: 55%;
    }
    .profile-skeleton-line--title {
        width: 45%;
        height: 50px;
    }
}

@keyframes odeSkeletonShimmer {
    100% {
        transform: translateX(100%);
    }
}
.profile-tabs svg {
    margin-left: 10px;
}
@media (max-width: 768px) {
    .profile-section {
        margin: 0 auto;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        padding-top: 5px;
        padding-bottom: 30px;
    }

    .profile-header {
        font-size: 28px; /* Adjust font size for smaller screens */
        padding-top: 30px;
    }
    .profile-pic-container {
        width: 75px;
        height: 75px;
    }
    .profile-pic-edit-badge {
        width: 28px;
        height: 28px;
    }
    .profile-pic-edit-badge .edit-icon {
        width: 15px;
        height: 15px;
    }
    .profile-pic-container .upload-icon,
    .profile-pic-container .profile-pic-overlay .switch-icon {
        width: 26px;
        height: 26px;
    }
    .profile-name {
        font-size: 20px; /* Adjust font size for smaller screens */
    }
    .profile-content {
        justify-content: space-between; /* Evenly space the tabs */
        padding: 0 var(--content-side-padding);
        font-size: 13px;
        color: #707070;
        font-weight: var(--ode-body-weight);
        margin-top: 0;
    }
    .profile-tabs {
        padding-top: 10px;
    }
    .profile-tabs a {
        font-size: 14px;
    }
    .edit-profile button {
        font-size: 13px;
    }
}
.profile-bookmark-title {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center; /* Vertically center the content */
    justify-content: left; /* Align content to the left */
    margin-top: 25px; /* Space between category-box and browse-header */
    margin-bottom: 35px;
}
.profile-bookmark-title h1 {
    font-size: 40px;
    font-weight: var(--ode-body-weight);
    color: #000;
    line-height: 1;
}
@media (max-width: 768px) {
    .profile-bookmark-title {
        width: 100%;
        height: 100px;
        display: flex;
        align-items: center; /* Vertically center the content */
        justify-content: left; /* Align content to the left */
        margin-top: 5px; /* Space between category-box and browse-header */
        margin-bottom: 10px;
    }
    .profile-bookmark-title h1 {
        font-size: 30px;
        font-weight: var(--ode-body-weight);
        color: #000;
        line-height: 1;
    }
}
/* Bookmark Fade-Out Effect */
.fade-out {
    opacity: 0;
}
/* Container for Event Title and Toolbar */
.profile-content .event-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Align items to the top */
    flex-wrap: nowrap; /* Prevent wrapping */
}

/* Fade-out and Fade-in classes scoped within .profile-content */

/* Ensure the grid starts with full opacity and has a transition defined */
.profile-content .browse-current-events-grid {
    opacity: 1;
    transition: opacity 0.2s ease-out;
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 4 columns on desktop */
    column-gap: var(--gap-col-desktop);
    row-gap: var(--gap-row-desktop);
    box-sizing: border-box;
    overflow: hidden;
    color: var(--main-text-color);
}
@media (max-width: 768px) {
    .profile-content .browse-current-events-grid {
        opacity: 1;
        transition: opacity 0.2s ease-out;
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 4 columns on desktop */
        column-gap: var(--gap-col-responsive);
        row-gap: var(--gap-row-responsive);
        box-sizing: border-box;
        overflow: hidden;
        color: var(--main-text-color);
    }
}
/* Fade-Out Grid: Changes opacity to 0 */
.profile-content .fade-out-grid {
    opacity: 0;
}

/* Fade-In Grid: Changes opacity back to 1 */
.profile-content .fade-in-grid {
    opacity: 1;
}

/* Individual Block Fade-Out */
.profile-content .fade-out-block {
    opacity: 0;
    transition: opacity 0.2s ease-out;
}

/* (Optional) Individual Block Fade-In if needed */
.profile-content .fade-in-block {
    opacity: 1;
    transition: opacity 0.2s ease-in;
}

/* Styling the Toolbar */
.profile-toolbar {
    display: flex;
    justify-content: center;
    flex-shrink: 0; /* Prevent shrinking */
}
.profile-page-toolbar {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0; /* Prevent shrinking */
}
/* Bookmark Button Styles */
.bookmark-button-saved,
.bookmark-button-unsaved {
    width: 27px;
    height: 27px;
    background: none;
    cursor: pointer;
    padding: 0;
    background-repeat: no-repeat;
    background-size: 15px 15px;
    /* Ensure the button displays the background image correctly */
    display: block;
    border-radius: 50%;
}
.bookmark-button-saved:hover,
.bookmark-button-unsaved:hover {
    cursor: pointer;
}
/* Unsaved State */
/* Bookmark Button - Unsaved State */
.bookmark-button-unsaved {
    background-image: var(--bookmark-button-unsaved-icon-white); /* Heart PNG */
    background-repeat: no-repeat;
    background-position: center;
    transition:
        background-image 0.3s ease,
        transform 0.4s ease;
    border: var(--bookmark-button-unsaved-border);
    background-color: transparent;
}
.bookmark-button-unsaved:hover {
    background-image: var(--bookmark-button-saved-icon); /* Heart PNG */
    background-repeat: no-repeat;
    background-position: center;
    transition:
        background-image 0.3s ease,
        transform 0.4s ease;
    border: var(--bookmark-button-unsaved-border-hover);
    background-color: var(--ode-blue);
}
/* Bookmark Button - Saved State */
.bookmark-button-saved {
    background-image: var(--bookmark-button-saved-icon); /* Heart Saved PNG */
    background-repeat: no-repeat;
    background-position: center;
    color: #000; /* Text color (not visible since text is removed) */
    transition:
        background-image 0.3s ease,
        transform 0.4s ease;
    border: 1px #0004f5 solid;
    background-color: var(--ode-blue);
}
/* ──────────────────────────────────────────
   Suppress the blue “hover” look while the
   button has .no-hover (set by JS for 200 ms)
   ────────────────────────────────────────── */
/*  keep the outline for bookmark icons, but drop it for heart buttons  */
.no-hover.heart-button-unsaved:hover,
.no-hover.heart-button-saved:hover {
    background-image: none;
    background-color: var(--bg-color);
    border: 1px solid var(--universal-grey);
    color: var(--main-text-color);
    box-shadow: none;
}

.no-hover.bookmark-button-unsaved:hover,
.no-hover.bookmark-button-saved:hover {
    background-image: var(--bookmark-button-unsaved-icon);
    background-color: transparent;
    border: var(--bookmark-button-unsaved-border); /* keep outline here */
}
/* Initial State of Browse Event Block */
.browse-event-block {
    opacity: 1;
}
/* Responsive Adjustments */
@media (max-width: 768px) {
    /* Bookmark Button Styles */
    .bookmark-button-saved,
    .bookmark-button-unsaved {
        width: 24px;
        height: 24px;
        background: none;
        cursor: pointer;
        padding: 0;
        background-repeat: no-repeat;
        background-size: 12px 12px;
        display: block;
        border-radius: 50%;
    }
    .bookmark-button-unsaved {
        background-image: var(
            --bookmark-button-unsaved-icon-white
        ); /* Heart PNG */
        background-repeat: no-repeat;
        background-position: center;
        color: #000; /* Text color (not visible since text is removed) */
        transition:
            background-image 0.3s ease,
            transform 0.4s ease;
        border: var(--bookmark-button-unsaved-border);
    }

    /* Bookmark Button - Saved State */
    .bookmark-button-saved {
        background-image: var(--bookmark-button-saved-icon);
        background-repeat: no-repeat;
        background-position: center;
        color: #000; /* Text color (not visible since text is removed) */
        transition:
            background-image 0.3s ease,
            transform 0.4s ease;
        border: 1px var(--ode-blue) solid;
        background-color: var(--ode-blue);
    }
    /* Initial State of Browse Event Block */
    .browse-event-block {
        opacity: 1;
    }
    .event-header {
        /* Maintain row layout to keep toolbar on the right */
        flex-direction: row;
        align-items: flex-start; /* Align items to the top */
    }
    /* .profile-toolbar {
		width: 14px;
		height: 14px;
		flex-shrink:0;
		margin-top:5.5px;
	}
	*/
    .profile-page-toolbar {
        /* Maintain size for smaller screens */

        flex-shrink: 0;
    }

    /* Adjust h2 font size and margins for smaller screens */
    .profile-content .browse-event-block h2 {
        font-size: 18px;
        margin-right: 8px; /* Reduce space if necessary */
        line-height: 1; /* Ensure consistent line height */
    }
}
/* Edit Profile Section styling */
.editprofile-content {
    position: relative;
    font-weight: var(--ode-body-weight);
}

.editprofile-content h2 {
    font-size: 45px;
    font-weight: var(--ode-body-weight);
    color: #000;
    line-height: 1;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.editprofile-content h2 img {
    margin-bottom: 15px;
    width: 75px;
    height: 75px;
}

.editprofile-title {
    width: 100%;
    align-items: center; /* Vertically center the content */
    justify-content: left; /* Align content to the left */
    margin-top: 45px; /* Space between category-box and browse-header */
    margin-bottom: 45px;
}
.editprofile-title h1 {
    font-size: 40px;
    font-weight: var(--ode-body-weight);
    color: var(--main-text-color);
    line-height: 1;
}
@media (max-width: 768px) {
    .editprofile-title {
        width: 100%;
        align-items: center; /* Vertically center the content */
        justify-content: left; /* Align content to the left */
        margin-top: 35px; /* Space between category-box and browse-header */
        margin-bottom: 35px;
    }
    .editprofile-title h1 {
        font-size: 30px;
        font-weight: var(--ode-body-weight);
        line-height: 1;
    }
}

/* Form styling */
.editprofile-form {
    font-size: 16px;
    box-sizing: border-box;
    color: var(--main-text-color);
}
.editprofile-form input,
.editprofile-form textarea {
    width: calc(100% - 20px);
    padding: 20px 10px;
    margin: 10px 0;
    border: 1px solid #c2c2c2;
    border-radius: 6px;
    font-size: 18px;
    color: var(--main-text-color);
    outline: none;
    appearance: none;
}
.editprofile-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--bg-color); /* Adjust based on your design */
    box-sizing: border-box;
    width: 100%;
}
.editprofile-box select {
    font-size: 18px; /* Adjust font size as needed */
    padding: 20px 10px;
    border: 1px solid #c2c2c2;
    width: 100%;
    background-color: var(
        --bg-color
    ); /* Ensure background color matches the design */
    appearance: none; /* Remove default dropdown arrow */
    -webkit-appearance: none; /* Remove default dropdown arrow for Safari */
    -moz-appearance: none; /* Remove default dropdown arrow for Firefox */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 20 20"><polygon points="0,0 20,0 10,10" fill="black"/></svg>');
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 10px 10px;
    padding-right: 30px; /* Add padding to the right to accommodate the arrow */
    margin-bottom: 10px;
    margin-top: 10px;
    border-radius: 6px;
    flex: 1;
}

.editprofile-box select:focus {
    border: 1px solid var(--ode-blue); /* Change border color when focused */
    outline: none; /* Remove the default dotted outline */
}
.editprofile-form label {
    display: block;
    margin-bottom: 10px;
    margin-top: 10px;
    color: var(--main-text-color);
    font-size: 18px;
}
.editprofile-form form {
    font-size: 18px;
}
/* Visible state for modal and overlay */
.editprofile-visible {
    opacity: 1;
    visibility: visible;
}
/* Media Query for Mobile Devices */
@media (max-width: 768px) {
    .editprofile-modal {
        width: 75%; /* 80% of viewport width */
    }

    .editprofile-content h2 {
        font-size: 30px; /* Adjust font size for smaller screens */
    }

    .editprofile-content h2 img {
        margin-bottom: 15px;
        width: 65px;
        height: 65px;
    }
    .editprofile-form label {
        font-size: 16px;
    }
    .editprofile-form {
        font-size: 16px;
    }
    .editprofile-form input,
    .editprofile-form textarea {
        width: calc(100% - 20px); /* Utilize full width */
        padding: 20px 10px;
        font-size: 16px; /* Smaller font size */
    }
    .editprofile-box select {
        font-size: 16px; /* Adjust font size as needed */
        padding: 15px 10px;
        border: 1px solid #c2c2c2;
        width: 100%;
        appearance: none; /* Remove default dropdown arrow */
        -webkit-appearance: none; /* Remove default dropdown arrow for Safari */
        -moz-appearance: none; /* Remove default dropdown arrow for Firefox */
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 20 20"><polygon points="0,0 20,0 10,10" fill="black"/></svg>');
        background-repeat: no-repeat;
        background-position: right 15px center;
        background-size: 10px 10px;
        padding-right: 30px; /* Add padding to the right to accommodate the arrow */
        margin-bottom: 10px;
        margin-top: 10px;
        border-radius: 6px;
        flex: 1;
        height: 57px;
        font-weight: var(--ode-body-weight);
    }

    .editprofile-close {
        font-size: 24px; /* Smaller close button */
        top: 25px;
        right: 25px;
        font-weight: 200;
    }
}
/* Following Tab Style */
.following-page {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.following-featured-organizers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.following-featured-card {
    border: var(--event-card-outline);
    box-shadow: var(--event-card-shadow);
    background-color: var(--event-card-bg);
    border-radius: 30px;
    padding: 18px 20px;
}

.following-featured-card .organizer-accordion-row {
    margin: 0;
    gap: 18px;
}

.following-organizer-row {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 25px;
}

.following-organizer-row-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 15px;
}

.following-organizer-row-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.following-organizer-row-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.following-organizer-row .organizer-accordion-name {
    font-size: 18px;
}

.following-organizer-row .organizer-accordion-city {
    font-size: 15px;
}

@media (max-width: 768px) {
    .following-organizer-row .organizer-accordion-name {
        font-size: 16px;
        max-width: 17ch;
        white-space: nowrap;
        overflow: hidden;
        display: inline-block;
        text-decoration: underline;
        text-underline-offset: 2px;
        text-overflow: ellipsis;
    }

    .following-organizer-row .organizer-accordion-name:hover,
    .following-organizer-row .organizer-accordion-name:focus-visible {
        text-decoration: underline;
    }

    .following-organizer-row .organizer-accordion-city {
        font-size: 14px;
    }
}

.following-organizer-row-action {
    display: flex;
    align-items: center;
}

.following-events-wrapper {
    position: relative;
}

.following-events.featured-events {
    padding-left: var(--event-block-gutter);
    padding-right: var(--event-block-gutter);
    padding-bottom: 60px;
    --following-card-columns: 5;
    --following-card-gap: var(--gap-col-desktop);
    --following-card-width: calc(
        (
                100% -
                    (
                        var(--following-card-gap) *
                            (var(--following-card-columns) - 1)
                    )
            ) /
            var(--following-card-columns)
    );
}

.following-events-wrapper .custom-scrollbar {
    margin-top: 0;
}

.following-events.featured-events .following-event-card {
    flex: 0 0 var(--following-card-width);
    width: var(--following-card-width);
    margin-bottom: 0;
    scroll-snap-align: start;
}

.following-event-block-end {
    flex: 0 0 var(--following-card-width);
    width: var(--following-card-width);
    scroll-snap-align: start;
}

.following-event-block-end .org-event-block-end {
    flex: 0 0 var(--following-card-width);
    width: 100%;
    font-size: 22px;
    margin-bottom: 0;
    height: 100%;
}

.following-event-block-end-card {
    align-self: stretch;
}

.following-event-block-end-card .org-event-block-end {
    width: 100%;
    height: 100%;
}

.following-event-block-end .org-event-block-end-text {
    width: 200px;
    font-size: 28px;
}

.following-all-organizers-header h2 {
    font-size: 40px;
    font-family: var(--ode-header);
    font-weight: var(--ode-header-weight);
    color: var(--main-text-color);
    margin: 0;
    margin-bottom: 25px;
}
@media (max-width: 768px) {
    .following-all-organizers-header h2 {
        font-size: 30px;
    }
}

.following-all-organizers-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.following-organizer-card {
    border: none;
    box-shadow: none;
    background: none;
    border-radius: 0;
    padding: 10px 0;
    display: flex;
    align-items: center;
    gap: 16px;
}

.following-organizer-card-meta {
    flex: 1 1 auto;
    min-width: 0;
}

.following-organizer-card-action {
    display: flex;
    align-items: center;
}

.following-load-more {
    margin-top: 25px;
}

.following-profile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns on desktop */
    column-gap: 10px;
    row-gap: 10px;
    padding-left: 0; /* Remove padding on desktop */
    padding-right: 0; /* Remove padding on desktop */
    padding-top: 10px;
    padding-bottom: 10px;
    box-sizing: border-box;
    overflow: hidden;
}

@media (max-width: 768px) {
    .following-featured-organizers {
        display: flex;
        overflow-x: auto;
        gap: 14px;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
    }

    .following-featured-card {
        min-width: 280px;
    }

    .following-all-organizers-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .following-organizer-row-header {
        flex-wrap: wrap;
    }

    .following-events.featured-events {
        --following-card-columns: 2;
        --following-card-gap: var(--gap-col-responsive);
        padding-bottom: 40px;
    }

    .following-events.featured-events .following-event-card {
        flex: 0 0 var(--following-card-width);
        width: var(--following-card-width);
        margin-bottom: 0;
    }

    .following-event-block-end {
        flex: 0 0 var(--following-card-width);
        width: var(--following-card-width);
    }

    .following-event-block-end .org-event-block-end {
        flex: 0 0 var(--following-card-width);
        width: 100%;
        border-radius: var(--event-card-border-radius-inset-responsive);
    }

    .following-event-block-end .org-event-block-end-text {
        width: 140px;
        font-size: 20px;
    }

    .following-organizer-row {
        margin-bottom: 0px;
    }

    .following-profile-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr); /* 2 equal columns */
        column-gap: 10px;
        row-gap: 10px;
        padding-left: 0;
        padding-right: 0;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }
}
.following-block {
    border-radius: 60px;
    justify-content: left;
    align-items: center;
    padding: 10px;
    display: flex;
    width: 100%;
    box-sizing: border-box;
    border: var(--event-card-outline);
    box-shadow: var(--event-card-shadow);
    transition:
        box-shadow 0.38s var(--event-card-ease),
        transform 0.32s var(--event-card-ease),
        filter 0.32s var(--event-card-ease);
    background-color: var(--event-card-bg);
}
.following-block:hover {
    box-shadow: var(--event-card-shadow-hover);
    transform: translateY(-3px) scale(1.005) translateZ(2px);
}
.following-block img {
    transform: var(--event-card-image-transform);
    transition: var(--event-card-image-transition);
}
.event-following-block {
    margin-top: 20px;
}
.event-following-block--mobile {
    display: none;
}
.event-following-block--desktop {
    padding: 15px;
    padding-left: 30px;
    padding-right: 30px;
}
.event-location-map {
    margin-top: 20px;
}
.event-location-map .location-map-placeholder {
    max-width: 100%;
    height: 320px;
    border: var(--event-image-border);
    border-radius: var(--event-card-border-radius-inset);
    overflow: hidden;
    margin-top: 10px;
    margin-bottom: 10px;
}
.event-location-map .location-map-placeholder iframe,
.event-location-map .location-map-placeholder img {
    border: none;
}
.event-location-map--mobile {
    display: none;
}
.event-following-mobile-wrapper {
    display: none;
}
.following-block img {
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: block;
    border: var(--organizer-pfp-outline);
    object-fit: cover; /* avoid stretch */
    flex: 0 0 65px; /* prevent squish in flex */
}
.following-block-title {
    align-content: center;
    text-align: center;
    width: auto;
    flex: 1 1 auto; /* let title take remaining space */
    min-width: 0; /* allow proper wrapping without pushing button */
}
.following-block-title a {
    text-decoration: none;
    color: var(--main-text-color);
}
.following-block-title a:hover {
    text-decoration: underline;
}
.following-block-title h1 {
    font-size: 20px;
    line-height: 1;
    font-weight: var(--ode-body-weight);
    font-family: var(--ode-body);
}
.following-block-button {
    display: flex;
    justify-content: right;
    text-align: right;
    width: auto; /* allow full-size Follow button */
    min-width: 140px;
    align-items: center;
    align-self: center; /* keep vertically centered even when title wraps */
}
@media (max-width: 768px) {
    .following-block {
        width: unset;
        height: unset;
        text-align: left;
        display: grid; /* grid ensures perfect cross-axis alignment */
        grid-template-columns: 45px 1fr auto;
        column-gap: 12px;
        align-items: center;
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 15px;
        padding-bottom: 15px;
    }
    .following-block-title {
        align-content: center;
        margin-left: 10px;
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
        margin-right: 10px;
        text-align: left;
    }
    .following-block-title h1 {
        font-size: 16px;
        line-height: 1.2;
        width: 100%;
        font-weight: var(--ode-body-weight);
    }
    .following-block img {
        border-radius: 50%;
        width: 45px;
        height: 45px;
        display: block;
        flex: 0 0 45px; /* lock size on mobile */
    }
    .event-following-block--desktop {
        display: none;
    }
    .event-following-block--mobile {
        display: flex;
        margin-top: 0;
        padding-top: 15px;
        padding-bottom: 15px;
        padding-left: 20px;
        padding-right: 20px;
        margin-bottom: 20px;
    }
    .event-following-mobile-wrapper {
        display: block;
        border-top: 1px solid var(--universal-grey);
        padding-top: 20px;
        margin-top: 20px;
    }
    .event-location-map--desktop {
        display: none;
    }
    .event-location-map--mobile {
        display: block;
        margin-top: 0;
        margin-bottom: 12px;
    }
    .event-location-map .location-map-placeholder {
        height: 260px;
    }
}
.profile-follow-button,
.profile-following-button {
    background: none;
    color: var(--main-text-color);
    border: var(--organizer-follow-button-outline-unset);
    cursor: pointer;
    height: 40px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: var(--ode-body-button);
    text-decoration: none;
    transition:
        background-color 0.3s,
        color 0.3s;
    max-width: 110px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-following-button {
    background: var(--ode-blue);
    color: #fff;
    border: var(--organizer-follow-button-outline-set);
}

.profile-following-button .checkmark-icon {
    stroke-width: 2px;
    vertical-align: middle;
    stroke: var(--checkmark-following-color);
}
.profile-follow-button .checkmark-icon {
    stroke-width: 2px;
    vertical-align: middle;
    stroke: var(--checkmark-follow-color);
    margin-right: 6px;
}
.profile-follow-button:hover {
    text-decoration: underline;
}

.profile-following-button:hover {
    text-decoration: underline;
}
@media (max-width: 768px) {
    .following-block-button {
        display: flex; /* keep as flex for centering */
        width: auto; /* allow full-size Follow button on mobile */
        min-width: 120px;
        align-content: center;
        align-items: center;
        margin-left: auto; /* push to right edge */
        height: 45px; /* match avatar for perfect vertical centering */
        padding: 0; /* remove stray offset */
    }

    /* Slightly smaller follow button on mobile */
    .org-follow-button,
    .org-following-button {
        height: 40px; /* match avatar height for perfect centering */
        width: 110px;
        font-size: 13px;
    }
    .org-following-button .checkmark-icon {
        width: 14px;
        height: 14px;
        margin-right: 6px;
    }
    /* Nudge following-state button for ideal optical alignment */
    .profile-follow-button,
    .profile-following-button {
        min-width: 110px;
        height: 40px;
        font-size: 13px;
        padding: 0 12px;
    }
    .profile-following-button .checkmark-icon {
        width: 14px;
        height: 14px;
        margin-right: 6px;
    }
}
.profile-event-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.profile-event-list a {
    color: #707070;
    text-decoration: none;
}

.profile-event {
    display: flex;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 30px;
    padding-right: 30px;
    cursor: pointer;
    color: #000;
    font-size: 16px;
    border-top: 1px solid #c2c2c2;
    cursor: pointer;
}
.profile-event img {
    margin-right: 20px;
    width: 65px;
    height: 65px;
    padding: 0;
    border-radius: 50%;
    display: block;
    border: var(--organizer-pfp-outline);
}
.profile-event:last-child {
    border-bottom: none;
}

.profile-event:hover {
    background-color: var(--list-event-hover);
}

.notifications-dropdown .profile-event:hover {
    background-color: var(--ode-blue);
    color: var(--search-text-hover);
}
.notifications-dropdown .profile-event:hover .profile-event-name,
.notifications-dropdown .profile-event:hover .profile-event-name a,
.notifications-dropdown .profile-event:hover .profile-feed-alert-name a,
.notifications-dropdown .profile-event:hover .profile-feed-alert-content {
    color: var(--search-text-hover);
}
.notifications-dropdown .profile-event:hover .profile-event-arrow svg circle {
    fill: var(--search-text-hover);
}

@media (min-width: 769px) {
    .notifications-dropdown .profile-event img {
        width: 50px;
        height: 50px;
    }

    .notifications-dropdown .profile-event-name {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-top: 0;
        padding-right: 16px;
    }

    .notifications-dropdown .profile-feed-alert-name,
    .notifications-dropdown .profile-feed-alert-name a {
        line-height: 1.2;
    }

    .notifications-dropdown .profile-feed-alert-content {
        line-height: 1.35;
    }
}

.profile-event-name {
    width: 100%;
    padding-left: 0px;
    text-align: left;
    margin-right: auto;
    margin-top: -6px;
}
.profile-event-name a {
    color: var(--main-text-color);
    text-decoration: none;
}
.profile-feed-alert-name {
    color: var(--main-text-color);
    text-decoration: none;
    font-size: 16px;
    display: flex;
    font-weight: 450;
}
.profile-feed-alert-name a {
    color: var(--main-text-color);
    text-decoration: none;
    font-size: 18px;
    display: flex;
    font-weight: 450;
}
.profile-feed-alert-content {
    color: var(--sub-text-color);
    text-decoration: none;
    font-size: 14px;
    font-weight: var(--ode-body-weight);
}
.profile-feed-alert-content:hover {
    color: var(--main-text-color);
    text-decoration: underline;
    font-size: 14px;
    font-weight: var(--ode-body-weight);
}
.profile-event-arrow svg {
    width: 10px;
    height: 10px;
}
.profile-more-centered-link {
    align-items: center;
    display: flex;
    padding-bottom: 5px;
}
.profile-more-centered-link img {
    margin-right: 5px;
}
.profile-feed-title {
    width: 100%;
    display: flex;
    align-items: center; /* Vertically center the content */
    justify-content: left; /* Align content to the left */
    min-height: 56px;
    margin-top: 40px; /* Space between category-box and browse-header */
    margin-bottom: 30px;
}
.profile-feed-title h1 {
    font-size: 40px;
    font-weight: var(--ode-header-weight);
    font-family: var(--ode-header);
    color: var(--main-text-color);
    line-height: 1;
    padding: 0;
    margin: 0;
}
.profile-calendar-subscribe {
    display: flex;
    align-items: center;
    margin-top: -15px;
    margin-bottom: 30px;
}
.profile-calendar-subscribe-button {
    background: none;
    color: var(--main-text-color);
    padding: 10px 18px;
    border-radius: 60px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--universal-grey);
    font-size: 13px;
}
.profile-calendar-subscribe-button:hover {
    background: var(--hero-slider-button-background);
    border: 1px solid var(--hero-slider-button-outline);
    text-decoration: none;
    color: var(--hero-slider-button-text);
}
.profile-calendar-subscribe-button svg {
    transform: translateY(-1px);
}
@media (max-width: 768px) {
    .profile-calendar-subscribe-button {
        font-size: 12px;
        padding: 10px 15px;
    }
}
.profile-alert-load-more {
    margin-bottom: 25px;
    border-top: 1px solid var(--universal-grey);
}
.profile-alert-load-more-button {
    background: var(--settings-button-background);
    color: var(--settings-button-text);
    padding: 20px 20px;
    border: none;
    cursor: pointer;
    width: 100%;
    border-radius: 50px;
    margin-top: 35px;
    font-size: 20px;
    font-weight: var(--ode-body-button);
    border: var(--settings-button-outline);
    text-decoration: none; /* Ensure no underline by default */
}

.profile-alert-load-more-button:hover {
    background: var(--settings-button-background-hover);
    color: var(--settings-button-text-hover);
    text-decoration: underline;
}
@media (max-width: 768px) {
    .profile-feed-title {
        width: 100%;
        display: flex;
        align-items: center; /* Vertically center the content */
        justify-content: left; /* Align content to the left */
        min-height: 44px;
        margin-top: 5px; /* Space between category-box and browse-header */
        margin-top: 25px; /* Space between category-box and browse-header */
        margin-bottom: 25px;
    }
    .profile-feed-title h1 {
        font-size: 30px;
        font-weight: var(--ode-header-weight);
        font-family: var(--ode-header);
        line-height: 1;
    }
    .profile-event {
        padding-bottom: 20px;
        padding-left: 10px;
        padding-top: 20px;
        cursor: pointer;
        color: #000;
        font-size: 14px;
        align-items: center;
    }
    .profile-event:last-child {
        border-bottom: none;
    }
    .profile-event img {
        margin-right: 0;
        width: 55px;
        height: 55px;
        padding: 0;
        border-radius: 50%;
        display: block;
    }
    .profile-event-name {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        text-align: left;
        margin-right: auto;
        margin-top: 0;
    }
    .profile-event-name a {
        text-decoration: none;
    }
    .profile-feed-alert-name {
        text-decoration: none;
        font-size: 14px;
        display: flex;
        font-weight: 450;
    }
    .profile-feed-alert-name a {
        text-decoration: none;
        font-size: 14px;
        display: flex;
        font-weight: 450;
    }
    .profile-feed-alert-content {
        text-decoration: none;
        font-size: 12px;
        font-weight: var(--ode-body-weight);
    }
    .profile-feed-alert-content:hover {
        text-decoration: underline;
        font-size: 12px;
        font-weight: var(--ode-body-weight);
    }
    .profile-event-arrow svg {
        width: 10px;
        height: 10px;
    }
}

/* Home Content Style */
.home-section {
    margin: 0 auto;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 50px;
    padding-top: 0px;
    max-width: 1600px;
}

.home-section-title-left-on-ode {
    color: #000;
    background-color: #fff;
    padding: 15px 25px;
    border: 1px #000 solid;
    border-radius: 60px;
    font-size: 16px;
    font-weight: 400;
    margin-right: 5px;
}

.home-section-title-right-on-ode {
    color: var(--ode-blue);
    background-color: #fff;
    padding: 15px 25px;
    border: 1px #0004f5 solid;
    border-radius: 60px;
    font-size: 16px;
    font-weight: 400;
}
.home-section-title-right-on-ode-item {
    color: var(--ode-blue);
    background-color: #fff;
    padding: 10px 18px;
    border: 1px #0004f5 solid;
    border-radius: 60px;
    font-size: 16px;
    font-weight: 550;
}
/* Hero Home Section */
/* Slider navigation wrapper - contains line indicators + arrows */
.home-hero-slider-nav-wrapper {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 15px;
    align-items: center;
    margin: 0 auto;
    padding: 0 50px 35px;
    max-width: 1600px;
}

/* Arrow navigation container */
.home-hero-slider-arrows {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* Arrow buttons - circular outlined style */
.home-hero-arrow-button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--main-text-color);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
    color: var(--main-text-color);
}

.home-hero-arrow-button:hover {
    background: var(--main-text-color);
    color: var(--hero-slider-background);
}

.home-hero-arrow-button svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
}

.home-hero-slider-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    align-items: center;
}
.home-hero-slider-bar {
    width: 100%; /* Ensures bar stretches fully */
    display: flex;
    align-items: center;
}
.home-hero-slider-bar-button {
    border: none;
    width: 100%;
    height: 1px;
    background: var(--custom-scrollbar-track);
    cursor: pointer;
    position: relative;
    transition: background-color 0.3s;
}

.home-hero-slider-bar-button.active {
    background: var(--custom-scrollbar-thumb);
}

.home-hero-slider-bar-button::before {
    content: ""; /* Required for pseudo-elements */
    position: absolute;
    top: -15px; /* 5px above */
    bottom: -15px; /* 5px below */
    left: 0;
    right: 0;
    background: transparent; /* Keeps it invisible */
}
.home-hero-section {
    display: flex;
    overflow-x: scroll; /* Enable horizontal scrolling */
    scroll-snap-type: x mandatory; /* Enable snap scrolling */
    margin: 0 auto;
    padding-bottom: 35px;
    width: 100%;
    position: relative;

    /* Hide scrollbar for most modern browsers */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.home-hero-section::-webkit-scrollbar {
    display: none; /* Chrome, Safari, and Edge */
}

.home-hero-container {
    flex: 0 0 100%; /* Each container takes full width */
    display: flex;
    height: 550px; /* Full screen height */
    scroll-snap-align: start; /* Align containers for snapping */
}

.home-hero-left {
    width: 50%;
    background-size: cover;
    background-position: center center;
}
.home-hero-left-link {
    display: block; /* Makes the <a> behave like a block element */
    width: 50%; /* Matches the width of home-hero-left */
    height: 100%; /* Fills the container height */
    text-decoration: none; /* Removes any default underline */
    position: relative; /* Ensures proper positioning */
}

.home-hero-left-link .home-hero-left {
    width: 100%;
    height: 100%; /* Ensures the div fills the <a> */
    background-size: cover;
    background-position: center center;
}

.home-hero-left-link:hover {
    cursor: pointer; /* Adds pointer cursor for interactivity */
}
.home-hero-right {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--hero-slider-background);
}

.home-hero-content {
    text-align: center;
}

.home-hero-editorial-article-date-byline {
    font-size: 15px;
    color: var(--hero-slider-accent);
    margin-bottom: 0;
    padding-bottom: 15px;
    z-index: 3;
    font-weight: var(--ode-body-weight);
    padding-left: 20px;
    padding-right: 20px;
}

.home-hero-editorial-article-title {
    font-family: var(--ode-header);
    font-weight: var(--ode-header-weight);
    font-style: normal;
    font-size: 55px;
    text-wrap: balance;
    line-height: 1.05;
    color: var(--main-text-color);
    margin-top: auto;
    z-index: 2;
    padding-bottom: 20px;
    padding-right: 40px;
    padding-left: 40px;
}
.home-hero-editorial-article-title a {
    color: var(--main-text-color);
    margin-top: auto;
    z-index: 2;
    padding-bottom: 20px;
    text-decoration: none;
}
.home-hero-editorial-article-title a:hover {
    color: var(--main-text-color);
    margin-top: auto;
    z-index: 2;
    padding-bottom: 20px;
    text-decoration: none;
}
.home-hero-content button {
    background: var(--hero-slider-button-background);
    color: var(--hero-slider-button-text);
    padding: 12px 30px;
    border-radius: 60px;
    cursor: pointer;
    text-decoration: none;
}
.home-hero-content button:hover {
    background: none;
    border: 1px solid var(--hero-slider-button-outline);
    padding: 12px 30px;
    border-radius: 60px;
    cursor: pointer;
    text-decoration: underline;
    color: var(--main-text-color);
}
.home-subheader h2 {
    font-size: 40px;
    font-weight: var(--ode-header-weight);
    font-family: var(--ode-header);
    color: var(--main-text-color);
    line-height: 1;
    margin-top: 0;
    padding-top: 5px;
}
.home-subheader h3 {
    font-size: 40px;
    font-weight: var(--ode-header-weight);
    font-family: var(--ode-header);
    color: var(--main-text-color);
    line-height: 1;
    margin-top: 0;
    padding-top: 50px;
}
@media (min-width: 768px) and (max-width: 1200px) {
    .home-hero-editorial-article-title {
        font-size: 40px; /* Smaller title for mobile */
        width: 100%; /* Take up the full width */
        padding-left: 0;
        padding-right: 0;
    }
    .home-hero-editorial-article-title a {
        font-size: 40px; /* Smaller title for mobile */
        width: 98%; /* Take up the full width */
    }
    .home-hero-editorial-article-title a:hover {
        font-size: 40px; /* Smaller title for mobile */
        width: 98%; /* Take up the full width */
    }
}
@media (max-width: 768px) {
    .home-hero-section {
        width: calc(100% - 30px);
        display: flex;
        overflow-x: scroll; /* Enable horizontal scrolling */
        scroll-snap-type: x mandatory; /* Enable snap scrolling */
        margin: 0 auto;
        padding-bottom: 20px;
        position: relative;

        /* Hide scrollbar for most modern browsers */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
    }
    .home-hero-slider-nav-wrapper {
        padding: 0 20px 20px;
        gap: 12px;
    }

    .home-hero-slider-arrows {
        gap: 6px;
    }

    .home-hero-arrow-button {
        width: 36px;
        height: 36px;
    }

    .home-hero-arrow-button svg {
        width: 18px;
        height: 18px;
    }

    .home-hero-slider-track {
        gap: 10px; /* 10px gap between columns */
        margin: 0;
        padding: 0;
    }
    .home-hero-container {
        flex-direction: column; /* Stack image and content */
        height: auto; /* Let the container adjust based on content */
        margin-top: 20px;
        margin-left: 17px;
        margin-right: 17px;
        padding-bottom: 0px;
    }
    .home-hero-content {
        text-align: center;
        max-width: 90%;
        margin-bottom: 5px;
        padding-top: 8px;
        padding-bottom: 8px;
    }
    .home-hero-left-link {
        width: 100%; /* Ensure it behaves like the stacked div */
        height: 300px; /* Match the height of .home-hero-left */
        display: block; /* Makes <a> behave like a block element */
        border-top-left-radius: 30px; /* Originally 5px */
        border-top-right-radius: 30px;
        overflow: hidden; /* Ensures no overflow of content */
    }

    .home-hero-left-link .home-hero-left {
        width: 100%; /* Full width */
        height: 100%; /* Full height to match .home-hero-left-link */
        background-size: cover;
        background-position: center center;
    }

    .home-hero-right {
        width: 100%; /* Full width for the content */
        height: 50%;
        border-bottom-left-radius: 35px; /* Originally 5px */
        border-bottom-right-radius: 35px;
    }
    .home-hero-content button {
        padding: 12px 25px;
        border-radius: 60px;
        cursor: pointer;
        text-decoration: none;
        font-size: 13px;
    }
    .home-hero-content button:hover {
        padding: 12px 25px;
        border-radius: 60px;
        cursor: pointer;
        text-decoration: underline;
    }
    .home-hero-editorial-article-title {
        font-size: 28px; /* Smaller title for mobile */
        width: 100%; /* Take up the full width */
        padding-left: 0;
        padding-right: 0;
    }
    .home-hero-editorial-article-title a {
        font-size: 30px; /* Smaller title for mobile */
        width: 100%; /* Take up the full width */
    }
    .home-hero-editorial-article-title a:hover {
        font-size: 30px; /* Smaller title for mobile */
        width: 100%; /* Take up the full width */
    }
    .home-hero-editorial-article-date-byline {
        font-size: 13px; /* Smaller byline text for mobile */
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 480px) {
    .home-hero-left {
        height: 300px; /* Smaller image height for very small screens */
    }

    .home-hero-editorial-article-title {
        font-size: 28px; /* Smaller title for smaller screens */
        padding-left: 0;
        padding-right: 0;
    }
    .home-hero-editorial-article-title a {
        font-size: 28px; /* Smaller title for smaller screens */
    }
    .home-hero-editorial-article-title a:hover {
        font-size: 28px; /* Smaller title for smaller screens */
    }
    .home-hero-editorial-article-date-byline {
        font-size: 12px; /* Further adjust byline text */
        padding-left: 0;
        padding-right: 0;
    }
}
.home-editorial-block-end {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 380px; /* Explicitly set the width */
    width: 370px;
    font-size: 35px;
    background-color: var(--ode-blue);
    color: #fff;
    margin-bottom: 20px;
    box-sizing: border-box;
    scroll-snap-align: start;
    margin-right: 0;
    border-radius: 25px; /* 10-13-2024 Radius Removal: 10px */
    border: var(--profile-edit-button-outline);
    font-family: var(--ode-header);
    font-weight: var(--ode-header-weight);
    height: 100%;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color 0.2s,
        color 0.2s,
        border-color 0.2s;
}
.home-editorial-block-end-text {
    width: 250px;
    text-align: center;
    font-size: 35px;
    line-height: 1.2;
}
.home-editorial-block-end:hover,
.home-editorial-block-end:focus-visible {
    color: #fff;
    background: var(--profile-edit-button-background-hover);
    border: var(--profile-edit-button-outline-hover);
    text-decoration: none;
}
@media (max-width: 768px) {
    .home-section {
        padding: 0 var(--content-side-padding);
        padding-bottom: 25px;
        padding-top: 0px;
        font-size: 14px;
    }

    .home-header {
        display: block;
        justify-content: space-between;
        align-items: center;
    }
    .home-subheader h2 {
        font-size: 35px;
        font-weight: var(--ode-header-weight);
        font-family: var(--ode-header);
        line-height: 1;
        padding-bottom: 10px;
        padding-top: 10px;
    }
    .home-subheader h3 {
        font-size: 35px;
        font-weight: var(--ode-header-weight);
        font-family: var(--ode-header);
        line-height: 1;
        padding-bottom: 10px;
        padding-top: 25px;
    }
    .home-section-title {
        padding-top: 20px;
        text-align: center;
    }

    .home-hero-title {
        padding-top: 20px;
        padding-bottom: 30px;
    }
    .home-hero-featured {
        width: 100%;
        margin: 0 auto 10px;
    }

    .home-hero-featured-article {
        height: 450px;
        padding: 15px 20px;
        display: flex;
    }

    .home-hero-story-container {
        max-width: 100%;
        height: 420px;
        overflow-y: scroll;
        background-color: var(--ode-blue);
        margin-bottom: 20px;
        border-radius: 20px;
    }

    .home-hero-story-item {
        width: 100%;
    }
    .home-section-title-left-on-ode {
        color: #000;
        background-color: #fff;
        padding: 14px 18px;
        border: 1px #000 solid;
        border-radius: 60px;
        font-size: 14px;
        font-weight: 400;
        margin-right: 5px;
    }

    .home-section-title-right-on-ode {
        color: var(--ode-blue);
        background-color: #fff;
        padding: 14px 18px;
        border: 1px #0004f5 solid;
        border-radius: 60px;
        font-size: 14px;
        font-weight: 400;
    }
    .featured-events-wrapper {
        position: relative;
        overflow-x: hidden; /* Hide the native scrollbar */
        -webkit-overflow-scrolling: touch; /* Adds smooth scrolling on iOS */
        scroll-behavior: smooth;
        padding-bottom: 0px;
        padding-top: 0px;
    }
    .home-editorial-block-end {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 330px;
        font-size: 28px;
        background-color: var(--ode-blue);
        color: #fff;
        box-sizing: border-box;
        scroll-snap-align: start;
        margin-right: 0;
        height: 430px;
        border: var(--profile-edit-button-outline);
        font-family: var(--ode-header);
        font-weight: var(--ode-header-weight);
        text-decoration: none;
        cursor: pointer;
    }
    .home-editorial-block-end-text {
        width: 250px;
        text-align: center;
        font-size: 35px;
        line-height: 1.2;
    }
    .home-editorial-block-end:hover,
    .home-editorial-block-end:focus-visible {
        color: #fff;
        background: var(--profile-edit-button-background-hover);
        border: var(--profile-edit-button-outline-hover);
        text-decoration: none;
    }
}

/* Setting styles */
.settings-section {
    max-width: 1600px;
    margin: 0 auto;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 60px;
    padding-top: 30px;
}

.settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 10px;
}

.settings-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.settings-title h1 {
    font-size: 60px;
    font-weight: var(--ode-body-weight);
    margin: 0;
    padding: 0;
    line-height: 1;
    color: var(--main-text-color);
}
.settings-tabs {
    display: flex;
    justify-content: space-between; /* Evenly space the tabs */
    width: 100%; /* Full width of the container */
    margin-top: 15px;
    border-bottom: var(--profile-tabs-track); /* Base line under all tabs */
    padding-bottom: 5px; /* Space between tab content and base line */
}

.settings-tabs a {
    flex: 1; /* Each tab takes up an equal amount of space */
    text-align: center; /* Center the text in each tab */
    padding: 10px 0;
    font-size: 16px;
    color: var(--sub-text-color); /* Default tab text color */
    text-decoration: none;
    position: relative;
}
.settings-tabs a:hover {
    color: var(--main-text-color);
}
.settings-tabs a.active {
    color: var(--main-text-color); /* Active tab text color */
}

.settings-tabs a.active::after {
    content: "";
    position: absolute;
    bottom: -6px; /* Move underline slightly lower to align with base line */
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--main-text-color); /* Active tab underline color */
}
.settings-content {
    flex-direction: row; /* Ensure columns are side by side */
    justify-content: space-between;
    margin-top: 30px;
    font-size: 16px;
    color: #707070;
    font-weight: var(--ode-body-weight);
}
.settings-edit-profile {
    align-items: left;
    padding: 0; /* Remove any padding that might push content down */
    justify-content: left;
    width: 100%;
    margin-top: 20px;
}
.settings-edit-profile button {
    background: var(--settings-button-background);
    border: var(--settings-button-outline);
    padding: 20px;
    border-radius: 60px;
    cursor: pointer;
    color: var(--settings-button-text);
    text-decoration: none;
    width: 250px;
}
.settings-edit-profile button:hover {
    background: var(--settings-button-background-hover);
    border: var(--settings-button-outline);
    padding: 20px;
    border-radius: 60px;
    cursor: pointer;
    color: var(--settings-button-text-hover);
    text-decoration: underline;
}
.settings-change-password-desc {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0px;
    padding-bottom: 25px;
    font-size: 18px;
    font-weight: var(--ode-body-weight);
    color: var(--sub-text-color);
    line-height: var(--ode-body-description-line-height);
    max-width: 100%;
}
.settings-change-password-desc a {
    font-size: 18px;
    font-weight: var(--ode-body-weight);
    color: var(--sub-text-color);
    text-decoration: none;
}
.settings-divider {
    width: 100%;
    border-bottom: 1px var(--universal-grey) solid;
    margin-top: 60px;
}
.settings-theme-selector {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Increase spacing between radio options */
}

.settings-radio-option {
    display: flex !important; /* Override any inherited display:block */
    align-items: center;
    gap: 8px; /* Space between the radio button and text */
    cursor: pointer;
    font-family: Arial, sans-serif;
    font-size: 16px;
    color: black;
    white-space: nowrap; /* Prevents text from wrapping */
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}

.settings-radio-option input {
    display: none; /* Hide default radio button */
}

.settings-radio-custom {
    flex-shrink: 0; /* Prevents shrinking */
    width: 18px;
    height: 18px;
    border: 2px solid black;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.settings-radio-custom::before {
    content: "";
    width: 10px;
    height: 10px;
    background: var(--main-text-color);
    border-radius: 50%;
    transform: scale(0);
    transition: transform 0.2s ease-in-out;
}

.settings-radio-option input:checked + .settings-radio-custom::before {
    transform: scale(1);
}

.settings-radio-option input:checked + .settings-radio-custom {
    border-color: var(--main-text-color);
}

/* Styling for unselected radio buttons */
.settings-radio-option input:not(:checked) + .settings-radio-custom {
    border-color: var(--sub-text-color);
}

.settings-radio-option input:not(:checked) + .settings-radio-custom::before {
    border-color: var(--sub-text-color);
}
@media (max-width: 768px) {
    .settings-section {
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 30px;
        padding-top: 10px;
        font-size: 14px;
    }

    .settings-header {
        padding-bottom: 0px;
    }
    .settings-title {
        padding-left: 12px;
        padding-right: 12px;
    }
    .settings-title h1 {
        font-size: 40px;
        font-weight: var(--ode-body-weight);
        margin: 0;
        width: 100%;
        text-align: left; /* Aligns title to the left */
        line-height: 1;
    }
    .settings-tabs a {
        font-size: 14px;
    }
    .settings-content {
        justify-content: space-between; /* Evenly space the tabs */
        padding: 0 var(--content-side-padding);
        font-size: 14px;
        color: #707070;
        font-weight: var(--ode-body-weight);
        margin-top: 30px;
    }
    .settings-edit-profile button {
        padding: 20px;
        border-radius: 60px;
        cursor: pointer;
        text-decoration: none;
        width: 100%;
    }
    .settings-edit-profile button {
        padding: 20px;
        border-radius: 60px;
        cursor: pointer;
        text-decoration: none;
    }
    .settings-edit-profile button:hover {
        padding: 20px;
        border-radius: 60px;
        cursor: pointer;
        text-decoration: underline;
    }
    .settings-change-password-desc {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 0px;
        padding-bottom: 15px;
        font-size: 14px;
        font-weight: var(--ode-body-weight);
        line-height: var(--ode-body-description-line-height);
        max-width: 100%;
    }
    .settings-divider {
        width: 100%;
        border-bottom: 1px var(--universal-grey) solid;
        margin-top: 45px;
    }
}
.blinking-circle-svg circle {
    animation: blink 4s infinite;
}

@keyframes blink {
    0%,
    100% {
        fill: transparent;
        stroke: var(--ode-blue);
    }
    50% {
        fill: var(--ode-blue);
        stroke: transparent;
    }
}
/* Sign Up Overlay Modal */
/* Overlay styles */
/* Overlay styles */
.signup-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background:
        radial-gradient(
            1200px 700px at 15% 10%,
            rgba(0, 4, 245, 0.12),
            transparent 60%
        ),
        radial-gradient(
            900px 600px at 85% 0%,
            rgba(0, 0, 0, 0.15),
            transparent 55%
        ),
        var(--location-overlay-background);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    opacity: 0;
    visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
    z-index: 1000;
}

.signup-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.signup-modal-overlay.hidden {
    pointer-events: none;
}

.signup-modal-overlay .close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    z-index: 2;
    pointer-events: auto;
}

#close-signup-modal svg {
    width: 60px;
    height: 60px;
}

/* Title */
.signup-modal-title {
    font-size: 18px;
    margin: 10px 0 20px;
    text-align: center;
    font-weight: var(--ode-body-weight);
}

/* Buttons */
.signup-modal-button-blue {
    background: var(--signup-button-background);
    color: var(--signup-button-text);
    border: 1px solid var(--signup-button-outline);
    padding: 15px 25px;
    border-radius: 60px;
    cursor: pointer;
    text-decoration: none;
    margin: 5px 0px;
    width: 90%;
    font-weight: var(--ode-body-button);
    display: flex;
    justify-content: center;
    align-items: center;
}

.signup-modal-button-blue:hover {
    text-decoration: underline;
}

.signup-modal-button {
    background: transparent;
    color: var(--login-button-text);
    border: 1px solid var(--login-button-outline);
    padding: 15px 25px;
    border-radius: 60px;
    cursor: pointer;
    text-decoration: none;
    margin: 5px 0px;
    width: 90%;
    font-weight: var(--ode-body-button);
    display: flex;
    justify-content: center;
    align-items: center;
}

.signup-modal-button:hover {
    text-decoration: underline;
}

.signup-modal-button:hover {
    text-decoration: underline;
}

/* Forgot password link */
.signup-modal-forgot {
    color: var(--signup-forgot);
    font-size: 14px;
    text-decoration: none;
    margin-top: 15px;
    cursor: pointer;
    font-weight: var(--ode-body-weight);
}

.signup-modal-forgot:hover {
    color: var(--signup-hover);
    text-decoration: underline;
}
/* Disable background scrolling when modal is active */
.signup-modal-no-scroll {
    overflow: hidden;
}

/* Popup container */
.signup-modal-container {
    background: var(--bg-color);
    color: var(--main-text-color);
    width: 450px;
    min-height: 420px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 45px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 45px;
    box-sizing: border-box;
    transform: translateY(8px) scale(0.98);
    transition: transform 0.3s ease;
}
[data-theme="dark"] .signup-modal-container {
    background: var(--auth-card-bg);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}
.signup-modal-overlay.active .signup-modal-container {
    transform: translateY(0) scale(1);
}
@media (max-width: 768px) {
    .signup-modal-container {
        width: 92vw;
        padding: 40px 20px;
        min-height: 390px;
    }
    .signup-modal-title {
        font-size: 14px;
        margin: 10px 0 20px;
        text-align: center;
        font-weight: var(--ode-body-weight);
    }
}
.signup-modal-logo {
    width: 50px;
    height: auto;
    margin-bottom: 15px;
}

/* Search Styles */
.search-event {
    display: flex;
    align-items: center;
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left: 30px;
    padding-right: 30px;
    cursor: pointer;
    color: #000;
    font-size: 16px;
    border-top: 1px solid var(--universal-grey);
    cursor: pointer;
}
.search-event img {
    margin-right: 20px;
    width: 75px;
    height: 75px;
    padding: 0;
    display: block;
    border-radius: 5px;
    display: block;
}
.search-event:last-child {
    border-bottom: none;
}

.search-event:hover {
    background-color: var(--list-event-hover);
}
.search-event-name-date {
    color: var(--event-block-desc);
    font-size: 14px;
    text-decoration: none;
}
.search-event-name-date a {
    color: var(--event-block-desc);
    text-decoration: none;
    font-size: 14px;
    display: flex;
}
.search-event-name-date a:hover {
    color: var(--main-text-color);
    text-decoration: underline;
    font-size: 14px;
    display: flex;
}
.search-event-time {
    color: var(--main-text-color);
    font-size: 14px;
    text-decoration: none;
}
.search-event-time a {
    color: var(--main-text-color);
    text-decoration: none;
    font-size: 14px;
    display: flex;
}
.search-event-time a:hover {
    color: var(--main-text-color);
    text-decoration: underline;
    font-size: 14px;
    display: flex;
}
.search-event-time:hover {
    text-decoration: underline;
}
.search-section-heading {
    align-items: center; /* Vertically center the elements */
    justify-content: space-between; /* Ensure Upcoming Events and filter dropdown are far apart */
    font-size: 36px;
    padding-bottom: 30px;
    font-weight: var(--ode-body-weight);
    color: var(--main-text-color);
}
@media (max-width: 768px) {
    .search-event {
        padding-bottom: 20px;
        padding-left: 0;
        padding-right: 0;
        padding-top: 20px;
        cursor: pointer;
        color: #000;
        font-size: 14px;
        line-height: 1.5;
        align-items: center;
    }
    .search-event:last-child {
        border-bottom: none;
    }
    .search-event img {
        margin-right: 15px;
        margin-left: 10px;
        width: 55px;
        height: 55px;
    }
    .search-section-heading {
        font-size: 26px;
    }
    .search-event-time {
        font-size: 12px;
        text-decoration: none;
    }
    .search-event-name-date {
        text-decoration: none;
        font-size: 12px;
    }
    .search-event-name-date a {
        text-decoration: none;
        font-size: 12px;
    }
    .search-event-name-date a:hover {
        text-decoration: underline;
        font-size: 12px;
    }
}
/* Hide truncated event name by default */
.truncated-eventname {
    display: none;
}

/* Show truncated event name and hide full event name on mobile */
@media screen and (max-width: 768px) {
    .full-eventname {
        display: none;
    }
    .truncated-eventname {
        display: inline;
    }
}
.pagination {
    width: 100%;
    text-align: center; /* Centers the pagination links */
    margin-top: 10px;
}
.pagination a,
.pagination span {
    display: inline-block;
    padding: 8px 16px;
    margin-right: 4px;
    text-decoration: none;
    border: 1px solid #ddd;
    color: var(--main-text-color);
    font-size: 14px;
}
.pagination a:hover {
    background-color: none;
}
.pagination .current-page {
    background-color: var(--menu-color);
    color: var(--hero-slider-button-text);
    border: var(--category-button-border-hover);
}
.pagination .disabled {
    color: #ccc;
    pointer-events: none;
    border: 1px solid #ddd;
}
.search-title {
    align-items: center;
    justify-content: space-between;
    padding-bottom: 25px;
}
@media screen and (max-width: 768px) {
    .search-title {
        align-items: center;
        justify-content: space-between;
        padding-bottom: 25px;
    }
    .pagination {
        width: 100%;
        text-align: center; /* Centers the pagination links */
        margin-top: 10px;
    }
    .pagination a,
    .pagination span {
        display: inline-block;
        padding: 6px 12px;
        margin-right: 4px;
        text-decoration: none;
    }
    .pagination .disabled {
        color: #ccc;
        pointer-events: none;
        border: 1px solid #ddd;
    }
}

/* Footer Enroll Section */

/* Page Specific Enroll Section */
.home-section .home-enroll-container {
    margin-top: 50px;
}
.collection-section .home-enroll-container {
    margin-top: 45px;
}
.contact-section .home-enroll-container {
    margin-top: 45px;
}
@media (max-width: 600px) {
    .home-section .home-enroll-container {
        margin-top: 25px;
    }
    .collection-section .home-enroll-container {
        margin-top: 25px;
    }
    .contact-section .home-enroll-container {
        margin-top: 25px;
    }
}

/* General Enroll Section */
.home-enroll-container {
    width: 100%;
    height: 420px;
    background-color: var(--hero-slider-background);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0px;
    border-radius: 16px;
}

.home-enroll-content {
    text-align: center;
    width: 500px;
}

.home-enroll-header {
    font-size: 45px;
    font-family: var(--ode-header);
    font-weight: var(--ode-header-weight);
    font-style: normal;
    text-wrap: balance;
    line-height: 1;
    margin-bottom: 30px;
    color: var(--hero-slider-title);
}

.home-enroll-body {
    font-size: 16px;
    color: var(--hero-slider-accent);
    margin-bottom: 30px;
    font-weight: var(--ode-body-weight);
    line-height: 1.4;
}
.home-enroll-button {
    width: 250px;
    padding: 15px 30px;
    margin-top: 10px;
    background-color: var(--ode-blue);
    border: 1px solid var(--signup-button-outline);
    border-radius: 80px;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-weight: var(--ode-body-button);
}
.home-enroll-button:hover {
    text-decoration: underline;
    border: var(--profile-edit-button-outline-hover);
    background: var(--profile-edit-button-background-hover);
}
@media (max-width: 768px) {
    .home-enroll-container {
        width: 100%;
        height: 420px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 0px;
        margin-bottom: 10px;
    }
    .home-enroll-content {
        text-align: center;
        width: 300px;
    }

    .home-enroll-header {
        font-size: 35px;
        font-family: var(--ode-header);
        font-weight: var(--ode-header-weight);
        font-style: normal;
        text-wrap: balance;
        line-height: 1;
        margin-bottom: 20px;
    }

    .home-enroll-body {
        font-size: 14px;
        margin-bottom: 20px;
        font-weight: var(--ode-body-weight);
        padding-left: 10px;
        padding-right: 10px;
    }

    .home-enroll-button {
        width: 200px;
        padding: 15px 30px;
        margin-top: 10px;
        background-color: var(--ode-blue);
        border-radius: 80px;
        font-size: 16px;
        cursor: pointer;
        transition: background-color 0.3s ease;
        font-weight: var(--ode-body-button);
    }

    .home-enroll-button:hover {
        text-decoration: underline;
    }
}
/* Enroll on Article Page */
.article-enroll-container {
    width: 100%;
    max-width: 900px;
    height: 420px;
    background-color: var(--hero-slider-background);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 45px;
    border-radius: 16px; /* Originally 5px */
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 50px;
}
@media (max-width: 768px) {
    .article-enroll-container {
        width: unset;
        height: 420px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 var(--content-side-padding) 30px var(--content-side-padding);
    }
}

/* Contact Display */

.contact-section {
    max-width: 1600px;
    margin: 0 auto;
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 30px;
    padding-bottom: 30px;
}

.contact-header {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding-top: 20px;
    padding-bottom: 20px;
    gap: 500px; /* Adjust as needed: try 60–100px depending on feel */
}

.contact-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.contact-title h1 {
    font-size: 40px;
    font-weight: var(--ode-body-weight);
    margin: 0;
    padding: 0;
    line-height: 1.1;
    color: var(--main-text-color);
    min-width: 280px; /* or whatever looks best */
}

.contact-title h2 {
    font-size: 40px;
    font-weight: var(--ode-body-weight);
    margin: 0;
    padding: 0;
    line-height: 1.1;
    color: var(--main-text-color);
    min-width: 280px; /* or whatever looks best */
}

/* Right-hand column with contact details */
.contact-content {
    max-width: 600px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    font-size: 16px;
    line-height: 1.5;
    font-weight: var(--ode-body-weight);
}

.contact-block h2 {
    margin: 0 0 10px 0;
    font-size: 14px;
    font-weight: 550;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--main-text-color);
}

.contact-block p {
    margin: 0;
    color: var(--sub-text-color);
}

/* This only targets links inside <p> inside .contact-block */
.contact-block p a {
    color: var(--sub-text-color);
    text-decoration: underline;
}

.contact-block p a:hover {
    color: var(--main-text-color);
    text-decoration: underline;
}
/* Responsive */
@media (max-width: 768px) {
    .contact-section {
        padding: 0 var(--content-side-padding);
        padding-top: 10px;
        padding-bottom: 30px;
        font-size: 14px;
    }

    .contact-header {
        flex-direction: column;
        align-items: flex-start;
        padding-bottom: 5px;
        gap: 30px;
    }

    .contact-title h1 {
        font-size: 40px;
        font-weight: var(--ode-body-weight);
        margin: 0;
        width: 100%;
        text-align: left;
        line-height: 1.1;
    }

    .contact-content {
        width: 100%;
    }
}
/* Collections Styling */
.collection-section {
    max-width: 1600px;
    margin: 0 auto;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 30px;
    padding-top: 50px;
}

.collection-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 50px;
}

.collection-title {
    flex: 2 1 0;
    min-width: 0;
    margin-right: 0px;
}

.collection-title h1 {
    font-family: var(--ode-header);
    font-weight: var(--ode-header-weight);
    font-style: normal;
    text-wrap: balance;
    line-height: 1;
    font-size: 60px;
    margin: 0;
    padding-top: 10px;
    color: var(--main-text-color);
}

.collection-title h2 {
    font-size: 30px;
    font-weight: var(--ode-body-weight);
    margin: 0;
    padding: 0;
    color: var(--sub-text-color);
    margin-top: 10px;
    margin-bottom: 15px;
}

.collection-title h2 a {
    margin: 0;
    padding: 0;
    color: var(--main-text-color);
    text-decoration: underline;
}

.collection-title h2 a:hover {
    text-decoration: underline;
}

.collection-presenter {
    color: var(--main-text-color);
    font-size: 16px;
    font-weight: var(--ode-body-weight);
    line-height: 1.5;
}

.collection-presenter a {
    color: var(--sub-text-color);
    text-decoration: underline;
}
.collection-presenter a:hover {
    color: var(--main-text-color);
}
.collection-region-label {
    color: var(--main-text-color);
    font-size: 14px;
    font-weight: var(--ode-body-weight);
}
.collection-cities {
    flex: 0 0 auto; /* only as wide as needed */
    white-space: nowrap; /* don't wrap cities */
    min-width: 0;
    max-width: 100%;
    align-self: flex-start; /* aligns to top like other columns */
    padding-bottom: 18px;
    color: var(--sub-text-color);
}
.collection-cities a {
    color: var(--sub-text-color);
    text-decoration: underline;
}
.collection-cities a:hover {
    color: var(--main-text-color);
    text-decoration: underline;
}
.collection-cities-header {
    font-weight: var(--ode-header-weight);
    font-family: var(--ode-header);
    font-size: 20px;
    display: block;
    padding-top: 0px;
    padding-bottom: 15px;
    color: var(--main-text-color);
}
.collection-presenter-header {
    font-family: var(--ode-header);
    font-weight: var(--ode-header-weight);
    font-size: 20px;
    display: block;
    padding-top: 15px;
    padding-bottom: 15px;
    color: var(--main-text-color);
}
.collection-description {
    flex: 2 1 0; /* take up all remaining space */
    min-width: 0;
    color: var(--sub-text-color);
    font-size: 16px;
    line-height: var(--ode-body-description-line-height);
    font-weight: var(--ode-body-weight);
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
}
.collection-description-header {
    font-family: var(--ode-header);
    font-weight: var(--ode-header-weight);
    font-size: 20px;
    color: var(--main-text-color);
    display: block;
    padding-bottom: 15px;
}
.collection-image {
    padding-block: 15px;
    border: var(--settings-button-outline);
    padding-inline: 15px;
    border-radius: 32px;
    width: 100%;
}
.collection-image img {
    border-radius: 16px;
    max-width: 100%;
}
.collection-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 4 columns on desktop */
    column-gap: var(--gap-col-desktop);
    row-gap: var(--gap-row-desktop);
    padding-left: 10px; /* Remove padding on desktop */
    padding-right: 10px; /* Remove padding on desktop */
    box-sizing: border-box;
    overflow: hidden;
    padding-top: 30px;
    padding-bottom: 10px;
    margin-bottom: 30px;
}
.collection-sort-bar {
    display: flex;
    justify-content: flex-end;
    padding-right: 10px;
    margin-top: 30px;
}
.collection-toolbar {
    padding-top: 0px;
    padding-bottom: 0px;
    color: var(--main-text-color);
    display: inline-flex;
    width: 100%;
    margin-bottom: 0px;
    font-size: 16px;
    justify-content: space-around left;
}
/* Always show full description; no truncation on mobile */
@media (max-width: 900px) {
    .collection-description .description-short {
        display: none;
    }
    .collection-description .description-full {
        display: block;
    }
    .read-more-link,
    .read-less-link {
        display: none;
    }
}

/* On desktop, always show the full description, hide the read more/less links */
@media (min-width: 901px) {
    .collection-description .description-short {
        display: none !important;
    }
    .collection-description .description-full {
        display: block !important;
    }
    .read-more-link,
    .read-less-link {
        display: none !important;
    }
}
@media (max-width: 768px) {
    .read-more-link,
    .read-less-link a {
        color: var(--main-text-color);
    }
    .collection-section {
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 30px;
        padding-top: 30px;
        font-size: 14px;
    }
    .collection-header {
        flex-direction: column;
        gap: 12px;
        padding-bottom: 5px;
        padding-left: var(--content-side-padding);
        padding-right: var(--content-side-padding);
    }
    .collection-title,
    .collection-description {
        flex: unset;
        width: 100%;
        min-width: 0;
        padding-left: 0;
        padding-right: 0;
        margin-right: 0px;
    }
    .collection-title h1 {
        font-size: 45px;
        font-family: var(--ode-header);
        font-weight: var(--ode-header-weight);
        margin: 0;
        width: 100%;
        text-align: left;
    }
    .collection-title h2 {
        font-size: 18px;
        font-weight: var(--ode-body-weight);
        padding: 0;
        margin-bottom: 10px;
    }
    .collection-title h2 a {
        margin: 0;
        padding: 0;
        text-decoration: underline;
    }
    .collection-sort-bar {
        padding-right: var(--content-side-padding);
        margin-top: 25px;
    }
    .collection-title h2 a:hover {
        margin: 0;
        padding: 0;
        text-decoration: underline;
    }
    .collection-cities {
        line-height: 1.5;
        font-weight: var(--ode-body-weight);
        margin-top: 0px;
        margin-bottom: 0;
        padding-left: 0;
        padding-bottom: 18px;
        color: var(--sub-text-color);
        text-wrap: auto;
    }
    .collection-cities a {
        color: var(--sub-text-color);
        text-decoration: underline;
    }
    .collection-cities-header {
        font-family: var(--ode-header);
        font-weight: var(--ode-header-weight);
        font-size: 16px;
        padding-top: 7px;
        padding-bottom: 15px;
        color: var(--main-text-color);
    }
    .collection-desc-header {
        font-family: var(--ode-header);
        font-weight: var(--ode-header-weight);
        font-size: 14px;
        padding-top: 15px;
        padding-bottom: 15px;
        color: var(--main-text-color);
    }
    .collection-presenter-header {
        font-family: var(--ode-header);
        font-weight: var(--ode-header-weight);
        font-size: 16px;
        padding-top: 15px;
        color: var(--main-text-color);
    }
    .collection-description {
        color: var(--sub-text-color);
        font-size: 14px;
        line-height: var(--ode-body-description-line-height);
        font-weight: var(--ode-body-weight);
        margin-top: 0px;
        margin-bottom: 0;
        padding-left: 0;
        padding-bottom: 10px;
    }
    .collection-description a {
        font-weight: var(--ode-body-weight);
    }
    .collection-description-header {
        font-size: 16px;
        padding-bottom: 15px;
    }
    .collection-presenter {
        color: var(--main-text-color);
        font-size: 14px;
        font-weight: var(--ode-body-weight);
    }
    .collection-image {
        margin-top: 0px;
        width: unset;
    }
    .collection-image img {
        border-radius: 16px;
        width: 100%;
        max-width: 100%;
    }
    .collection-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2 equal columns */
        column-gap: var(--gap-col-responsive);
        row-gap: var(--gap-row-responsive);
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
        padding-left: var(--content-side-padding);
        padding-right: var(--content-side-padding);
        padding-top: 25px;
        padding-bottom: 0px;
        margin-bottom: 25px;
    }
    .collection-toolbar {
        display: inline-flex;
        width: 100%;
        margin-bottom: 0px;
        font-size: 14px;
        height: 25px;
        justify-content: space-around left;
    }
}

/* ============================================
   Calendar Subscription Styles
   ============================================ */

/* Subscribe to Calendar button (icon style to match filter control) */
.calendar-subscribe-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border: 1px solid var(--main-text-color);
    background: var(--bg-color);
    color: var(--main-text-color);
    border-radius: 50px;
    width: 50px;
    height: 50px;
    font-size: 0;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.calendar-subscribe-button:hover {
    border-color: var(--ode-blue);
}

.calendar-subscribe-button:focus-visible {
    border-color: var(--ode-blue);
    outline: none;
}

.calendar-subscribe-button svg {
    flex-shrink: 0;
    transform: translateY(-1px);
}

.search-organizers-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border: 1px solid var(--universal-grey);
    background: none;
    color: var(--main-text-color);
    border-radius: 50px;
    gap: 8px;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.search-organizers-button:hover {
    border-color: var(--hero-slider-button-outline);
    background: var(--hero-slider-button-background);
    color: var(--hero-slider-button-text);
}

.search-organizers-button:focus-visible {
    border-color: var(--ode-blue);
    outline: none;
}

.search-organizers-button svg {
    flex-shrink: 0;
    transform: translateY(-1px);
}

.pin-organizers-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border: 1px solid var(--main-text-color);
    background: var(--bg-color);
    color: var(--main-text-color);
    border-radius: 50px;
    width: 50px;
    height: 50px;
    font-size: 0;
    cursor: pointer;
    transition: border-color 0.2s ease;
    margin-left: 8px;
}

.pin-organizers-button:hover {
    border-color: var(--ode-blue);
}

.pin-organizers-button:focus-visible {
    border-color: var(--ode-blue);
    outline: none;
}

.pin-organizers-button svg {
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .calendar-subscribe-button svg {
        width: 20px;
        height: 20px;
    }

    .search-organizers-button {
        font-size: 13px;
        padding: 10px 15px;
    }

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

    .pin-organizers-button {
        width: 40px;
        height: 40px;
        margin-left: 6px;
    }

    .pin-organizers-button svg {
        width: 20px;
        height: 20px;
    }
}

/* Calendar Modal - Ode style */
.calendar-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100svh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2600;
}

.calendar-modal-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    z-index: 0;
}

.calendar-modal-content {
    background: var(--bg-color);
    color: var(--main-text-color);
    border: var(--signup-outline);
    border-radius: 40px;
    padding: 40px;
    max-width: 550px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.calendar-modal-body {
    width: 100%;
}

.calendar-modal-content h2 {
    margin-top: 0;
    margin-bottom: 16px;
    font-size: 22px;
    font-weight: var(--ode-body-weight);
    color: var(--main-text-color);
    text-align: center;
}

.calendar-modal-content > p {
    margin-bottom: 24px;
    color: var(--main-text-color);
    line-height: 1.6;
    font-size: 14px;
    text-align: center;
    opacity: 0.85;
}

.calendar-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: auto;
    height: auto;
}

/* URL Box - Ode style */
.calendar-url-box {
    display: flex;
    gap: 10px;
    margin-bottom: 28px;
}

.calendar-url-box input {
    flex: 1;
    padding: 15px 20px;
    border: var(--auth-input-border);
    border-radius: 60px;
    font-size: 13px;
    font-family: monospace;
    background-color: var(--auth-input-bg);
    color: var(--auth-input-text);
    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.calendar-url-box input::placeholder {
    color: var(--auth-input-placeholder);
}

.calendar-url-box input:focus {
    outline: none;
    border-color: var(--ode-blue);
    box-shadow: 0 0 0 3px rgba(0, 4, 245, 0.12);
}

.calendar-btn-copy {
    padding: 15px 25px;
    background: var(--ode-blue);
    color: #fff;
    border: none;
    border-radius: 60px;
    font-size: 14px;
    font-weight: var(--ode-body-button);
    cursor: pointer;
    white-space: nowrap;
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease;
}

.calendar-btn-copy:hover {
    background-color: var(--ode-blue-offset);
    color: #fff;
    text-decoration: underline;
}

/* Instructions - Ode style */
.calendar-instructions {
    margin-bottom: 28px;
    padding: 20px;
    background-color: var(--auth-input-bg);
    border: var(--auth-input-border);
    border-radius: 16px;
}

.calendar-instructions h3 {
    margin-top: 0;
    margin-bottom: 14px;
    font-size: 15px;
    font-weight: var(--ode-body-weight);
    color: var(--main-text-color);
}

.calendar-instructions ul {
    margin: 0;
    padding-left: 20px;
}

.calendar-instructions li {
    margin-bottom: 10px;
    color: var(--main-text-color);
    line-height: 1.6;
    font-size: 14px;
    opacity: 0.85;
}

.calendar-instructions li:last-child {
    margin-bottom: 0;
}

/* Actions - Ode style */
.calendar-actions {
    margin-bottom: 24px;
    text-align: center;
}

.calendar-btn-regenerate {
    padding: 12px 24px;
    background: #ff3f5f;
    color: var(--main-text-color);
    border: none;
    border-radius: 60px;
    font-size: 14px;
    font-weight: var(--ode-body-button);
    cursor: pointer;
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease;
}

.calendar-btn-regenerate:hover {
    text-decoration: underline;
}

.calendar-btn-regenerate:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Warning - Ode style */
.calendar-warning {
    padding: 16px;
    background-color: var(--auth-input-bg);
    border: var(--auth-input-border);
    border-radius: 12px;
    color: var(--main-text-color);
    font-size: 13px;
    margin-bottom: 0;
    text-align: center;
    opacity: 0.85;
}

.calendar-warning strong {
    display: block;
    margin-bottom: 6px;
    font-weight: var(--ode-body-button);
    opacity: 1;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .calendar-subscribe-button {
        width: 40px;
        height: 40px;
        padding: 10px;
    }

    .calendar-modal {
        align-items: stretch;
    }

    .calendar-modal-content {
        padding: max(20px, env(safe-area-inset-top)) 20px
            max(20px, env(safe-area-inset-bottom));
        width: 100%;
        height: 100%;
        max-height: 100svh;
        border-radius: 0;
        box-shadow: none;
        display: flex;
        flex-direction: column;
        border: unset;
    }

    .calendar-modal-body {
        margin: auto 0;
    }

    .calendar-modal-close {
        top: max(20px, env(safe-area-inset-top));
        right: max(20px, env(safe-area-inset-right));
        width: 40px;
        height: 40px;
    }

    .calendar-modal-close svg {
        width: 40px;
        height: 40px;
    }

    .calendar-modal-content h2 {
        font-size: 18px;
    }

    .calendar-url-box {
        flex-direction: column;
    }

    .calendar-btn-copy {
        width: 100%;
    }

    .calendar-btn-regenerate {
        width: 100%;
    }
}