/******* SITE DEFAULTS *************/
html body {
    --primary-color-rgb: 39, 86, 166;
    --secondary-color-rgb: 173, 115, 41;
    --tertiary-color-rgb: 223, 169, 38;
    --background-color-rgb: 255, 255, 255;
    --default-white-rgb: 255, 255, 255;
    --default-black-rgb: 0, 0, 0;

    --title-font-family: 'Cinzel', serif;
    --body-font-family: 'Lato', sans-serif;

    --last-break-point: 50.99rem;
    --site-max-width: 1920px;
    --site-container-max-width: 1920px;

    --side-menu-bg: var(--primary-color);
    --side-menu-bg-hover: var(--secondary-color);
    --side-menu-font-size-desktop: min(1.25vw, 1.25rem);
    --side-menu-font-family: var(--body-font-family);
    --side-menu-font-weight: 400;

    --section-slideshow-bg: transparent;

    --padding-mass-times: 1.5rem;
}

@media screen and (max-width: 1280px) {
    html body {
        --padding-mass-times: 0.75rem;
    }

    .footer-link-list {
        padding: 2rem 0 !important;
    }
}

html body.site-home {
    --section-above-bg: var(--secondary-color);
}

html body #g-navigation {
    --main-menu-text-color: var(--default-white);
    --main-menu-text-color-hover: var(--default-white);
    --main-menu-bg: var(--default-white);

    --navigation-floating-social-padding: min(1vw, 1rem);
}

.g-array-item-text {
    margin: 0 !important;
    padding: 0 !important;
}

/* NAVIGATION */

@media only screen and (min-width: 50.99rem) {
    #g-navigation>.g-container>.g-grid:has(.g-main-nav) {
        position: relative;
    }
}

@media only screen and (min-width: 50.99rem) {
    #g-navigation .g-main-nav .g-sublevel>li>.g-menu-item-container {
        color: var(--default-white);
    }

    #g-navigation .g-main-nav .g-sublevel>li>.g-menu-item-container:hover {
        background: var(--secondary-color);
        color: var(--default-white) !important;
    }
}

.site-sub #g-header {
    min-height: 2rem;
}

/*BOTTOM*/
@media only screen and (min-width: 50.99rem) {
    #g-bottom {
        position: relative;
        z-index: 10;
    }

    #g-bottom>.g-container {
        padding: 2rem 0 !important;
    }

    #g-bottom .admod td {
        padding-top: 0 !important;
    }
}

@media only screen and (max-width: 50.99rem) {
    #g-bottom {
        position: relative;
        z-index: 10;
    }

    #g-bottom>.g-container {
        padding: 2rem 0 !important;
    }

    #g-bottom .admod td {
        padding-top: 0 !important;
    }
}

.search-page #searchForm .btn {
    background: var(--primary-color);
}

.grid-articles .g-array-item-text a:not(a.button) {
    color: var(--primary-color);
}

.grid-articles .g-array-item-text a {
    color: var(--primary-color);
}

@media only screen and (max-width: 50.99rem) {
    .admod.adside tbody {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: .5rem .5rem;
    }
}

@media only screen and (max-width: 50.99rem) {
    body#site-grid.newslayout #g-container-main>.g-container {
        padding: 2rem 1rem !important;
    }

    body#site-grid.newslayout #g-container-main #g-mainbar {
        margin: 0 !important;
        padding: 0 !important;
    }

    #site-grid.newslayout .grid-mobile-stacked .g-item-title {
        --grid-title-font-size: 3vw;
    }
}

@media only screen and (max-width: 50.99rem) {
    body .side-menu-particle .g-blockcontent-subcontent-title-text {
        --side-menu-font-size-desktop: 4vw;
    }
}

/*  */

/* Container Layout */
.header-custom-wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

.top-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    /* margin-top: 10px; */
    max-width: var(--site-container-max-width);
}

/* Button Styling */
.btn-translate {
    background: transparent;
    border: 1px solid #ffffff;
    color: #ffffff;
    padding: 5px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    transition: 0.3s;
}

.btn-translate:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Lightbox Styles */
.modal-overlay {
    display: none;
    /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.modal-content {
    position: relative;
    width: 80%;
    max-width: 900px;
    height: 80%;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 30px;
    background: none;
    border: none;
    cursor: pointer;
    color: #333;
    z-index: 10;
}

.iframe-container {
    width: 100%;
    height: 100%;
}

.iframe-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/*  */

/* ADDED CSS FOR NAVIGATION */
@media only screen and (min-width: 50.99rem) {
    .header-custom-wrap {
        position: relative;
        z-index: 100;
    }

    .top-actions {
        background-color: rgba(var(--primary-color-rgb), 0.8);
        padding: 15px 15px;
        position: absolute;
        top: 0;
        right: 0;
        width: 100vw;
        left: 50%;
        transform: translateX(-50%);
        justify-content: flex-end;
        z-index: 103;
        backdrop-filter: blur(27px);
    }

    .top-actions>div,
    .top-actions>button {
        position: relative;
        z-index: 101;
    }

    .logo-overlap {
        position: absolute;
        top: 0;
        left: 0px;
        background-color: rgba(var(--primary-color-rgb), 0.8);
        padding: 1rem 1rem 1.5rem 1rem;
        border-bottom-right-radius: 35px;
        border-right: 3px solid white;
        border-bottom: 3px solid white;
        z-index: 112;
        width: 28%;
        backdrop-filter: blur(27px);
        min-height: 200px;
        margin: auto;
        display: grid;
        align-items: center;
    }

    .logo-overlap img {
        width: 75%;
        margin: auto;
        display: grid;
    }

    .j-social-icons {
        position: relative;
    }

    #g-navigation {
        background-color: #ffffff;
    }

    /* Menu Styling */
    .g-main-nav .g-toplevel {
        display: flex;
        align-items: center;
        margin-top: 60px;
        border-top: 5px solid var(--secondary-color);
        padding: 1rem;
        box-shadow: var(--default-box-shadow);
    }

    .g-main-nav .g-toplevel>li>.g-menu-item-container {
        display: flex;
        align-items: center;
        padding: 10px 15px;
        color: var(--default-black);
    }

    .g-main-nav .g-menu-item-content {
        display: flex;
        flex-direction: column;
        line-height: 1.2;
    }

    .g-main-nav .g-toplevel>li .g-menu-item-title {
        font-weight: 700;
        color: #000000;
        font-size: 1rem;
        font-family: var(--body-font-family);
    }

    .g-main-nav .g-toplevel>li .g-menu-item-subtitle {
        font-weight: 400;
        color: #888888;
        font-size: 0.85rem;
        font-family: var(--body-font-family);
    }

    .g-main-nav .g-toplevel>li .g-menu-parent-indicator {
        color: var(--secondary-color);
        margin-left: 8px;
    }
}

@media only screen and (max-width: 50.99rem) {
    .header-custom-wrap {
        flex-direction: column;
        padding: 1rem 2rem 2rem 2rem;
        gap: 1rem;
    }
}

.j-social-icons .social-icons a i {
    color: white;
    font-size: 1.25rem;
}

.j-social-icons .social-icons {
    display: flex;
    flex-direction: row;
    gap: 15px;
}

/*  */

/* 1. Establish the Aspect Ratio on the Container */
.studius-swiper .g-swiper {
    --swiper-aspect-ratio: 16 / 9;
    position: relative;
    /* Adjust this ratio as needed */
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
}

/* 2. Force the Wrapper to respect the ratio and stop growing */
.studius-swiper .swiper-wrapper {
    height: auto !important;
    /* Overrides the inline VW height */
    aspect-ratio: var(--swiper-aspect-ratio);
    max-height: 80vh;
    /* Keeps it from swallowing the screen on ultrawide monitors */
    width: 100%;
}

/* 3. Center and Cover the Images */
.studius-swiper .swiper-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    /* Crops image to fill area without distortion */
    object-position: center !important;
    /* Centers the crop */
    display: block;
}

/* 4. Fix Navigation Button Alignment */
/* We target Gantry's specific navigation classes */
.studius-swiper [class^="swiper-button-next-"],
.studius-swiper [class^="swiper-button-prev-"] {
    top: 50% !important;
    transform: translateY(-50%) !important;
    bottom: auto !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

/* 5. Cleanup slide internal wrappers */
.studius-swiper .swiper-slide,
.studius-swiper .slide,
.studius-swiper .slide-content-wrapper {
    height: 100% !important;
    width: 100% !important;
    border-radius: 12px;
    overflow: hidden;
}

/* */

/* */

/* Desktop: Scoped layout to match sibling height */
.j-mass-times {
    display: flex !important;
    flex-direction: column;
}

.j-mass-times .g-particle {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100% !important;
    min-height: 0;
    position: relative;
    background-color: rgba(var(--default-white-rgb), 1);
    border-radius: 15px;
}

/* Scrollable container */
.j-mass-times .g-content-array {
    position: absolute;
    inset: 0;
    padding: 1.5rem 2vw !important;
    display: flex;
    flex-direction: column;
}

@media (max-width: 50.99rem) {
    .j-mass-times .g-content-array {
        padding: 1.5rem !important;
    }
}

.j-mass-times .g-content,
.j-mass-times .g-array-item {
    height: 100%;
}

/* Force intermediate wrappers to fill the absolute container */
.j-mass-times .g-content-array>div,
.j-mass-times .g-array-item,
.j-mass-times .g-array-item-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
}

.j-mass-times-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
    width: 100%;
}

.j-mass-tab-container {
    flex: 1 1 auto;
    overflow-y: auto;
    padding-right: 5px;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--primary-color-rgb)) transparent;
}

/* Remove margin from the text container */
.j-mass-times .g-array-item-text {
    margin-top: 0 !important;
}

/* Content styling */
.j-mass-times h3 {
    color: rgb(var(--primary-color-rgb));
    margin-top: 0;
}

.j-mass-times p {
    color: black;
}

/* Scrollbar styling */
.j-mass-times .g-content-array::-webkit-scrollbar {
    width: 6px;
}

.j-mass-times .g-content-array::-webkit-scrollbar-thumb {
    background: rgb(var(--primary-color-rgb));
    border-radius: 10px;
}

/* Mobile: Expand to fit all content */
@media (max-width: 50.99rem) {
    .j-mass-times .g-particle {
        height: auto !important;
        max-height: none !important;
    }

    .j-mass-times .g-content-array {
        position: relative;
        overflow-y: visible;
        height: auto !important;
        padding: 1rem 0;
    }
}

/* */

.round-swiper-buttons .swiper-navigation>div[class*="swiper-button"] {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.35);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    border: none;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.round-swiper-buttons .swiper-navigation>div[class*="swiper-button"]:hover {
    background-color: rgba(0, 0, 0, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.75);
    transition: all 0.5s ease;
}

.round-swiper-buttons .swiper-navigation>div[class*="swiper-button"]>i {
    color: white;
    font-size: 24px;
    line-height: 1;
    display: block;
    text-align: center;
}

/*  */

.modern-dots .g-swiper.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.g-swiper.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0;
}

.modern-dots .g-swiper.swiper-container-horizontal>.swiper-pagination-bullets {
    gap: 1rem;
    padding: 0;
}

.modern-dots .g-swiper.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet::after,
.g-swiper.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet::after {
    width: 12px;
    height: 12px;
    background-color: transparent;
}

.modern-dots .g-swiper.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet-active::after,
.g-swiper.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet-active::after {
    width: 12px;
    height: 12px;
    background-color: white;
}

.modern-dots .g-swiper.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet-active,
.g-swiper.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet-active {
    background: transparent;
}

/*  */

/* Container Scoping */
.j-mass-times {
    background-color: transparent;
    border-radius: 12px;
    padding: 4rem var(--padding-mass-times) 3rem 3rem;
}

@media (max-width: 50.99rem) {
    .j-mass-times {
        padding: 2rem;
    }

    .studius-swiper #swiper-8852-particle {
        margin: 0rem !important;
    }

    .site-home #g-slideshow>.g-container>.g-grid:first-child {
        flex-direction: column-reverse !important;
    }

    .site-home #g-slideshow>.g-container>.g-grid>.g-block {
        width: 100% !important;
        padding: 1rem;
    }

    /* 
    .site-home .modern-dots .g-swiper.swiper-container-horizontal>.swiper-pagination-bullets,
    .site-home .round-swiper-buttons .swiper-navigation {
        display: none !important;
    } */

    .g-swiper.swiper-container-horizontal>.swiper-pagination-bullets {
        transform: translateY(0%) !important;
        padding-bottom: 0.5rem !important;
    }

    #swiper-8852 {
        padding: 1rem;
    }

    .round-swiper-buttons .swiper-navigation {
        display: none !important;
    }

    .header-custom-wrap {
        align-items: center;
    }

}

/* Headings */
.j-mass-times h2 {
    color: #a67c33;
    font-size: 1.75rem;
    text-transform: uppercase;
    margin: 20px 0 8px 0;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.j-mass-times h2:first-of-type {
    margin-top: 0;
}

/* Schedule Text */
.j-mass-times p {
    margin: 0 0 15px 0;
    line-height: 1.6;
    font-size: 1.1rem;
}

/* Button Layout */
.j-mass-btn-stack {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
    padding-top: 20px;
}

.j-mass-btn-row {
    display: flex;
    gap: 0;
    /* Keeps buttons joined */
}

/* Individual Button Styles */
.j-mass-times .btn-livestream {
    background-color: #a67c33;
    color: #fff !important;
    text-align: center;
    padding: 10px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
}

.j-mass-times .btn-schedule,
.j-mass-times .btn-confession {
    flex: 1;
    background-color: #f4f4f4;
    color: #333 !important;
    text-align: center;
    padding: 12px 5px;
    border: 1px solid #ccc;
    text-decoration: none;
    font-size: 0.85rem;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    font-weight: normal;
}

.j-mass-times .btn-schedule {
    border-radius: 6px 0 0 6px;
    /* Prevent double border in the middle */
    border-right: none;
}

.j-mass-times .btn-confession {
    border-radius: 0 6px 6px 0;
}

.j-mass-times .btn-schedule.active,
.j-mass-times .btn-confession.active {
    background-color: #305896;
    color: #fff !important;
    border-color: #305896;
}

.j-mass-times .btn-schedule:not(.active):hover,
.j-mass-times .btn-confession:not(.active):hover {
    background-color: #e6e6e6;
    cursor: pointer;
}

.j-mass-times a.btn-livestream:hover {
    opacity: 0.9;
    filter: brightness(95%);
}

/*  */

.studius-swiper #swiper-8852-particle {
    margin: 4rem var(--padding-mass-times) 3rem var(--padding-mass-times);
    padding: 0 0 0rem 0;
    background-color: white;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

/* White inset "border" around the image — cannot use padding on the parent
   because the swiper JS measures offsetWidth (padding-inclusive), which would
   make the swiper render wider than the visible content box.
   Instead we overlay a ::before frame at z-index 9, which sits above the slides
   but below the navigation buttons (z-index 10–11). */
.studius-swiper #swiper-8852-particle::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1rem solid white;
    border-bottom: none;
    /* bottom handled by padding-bottom on parent */
    border-radius: 12px;
    z-index: 9;
    pointer-events: none;
}

#g-slideshow {
    background: url(/images/template/bg-rotator-section.jpg) !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

#g-slideshow::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(201, 177, 139, 0.75);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 0;
}

#g-slideshow>.g-container {
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    position: relative;
    z-index: 1;
}

/*  */

.g-swiper.swiper-container-horizontal>.swiper-pagination-bullets {
    left: 16%;
}

/*  */

.swiper-navigation div[class*="button-next"] {
    left: 55px;
    bottom: 12px !important;
    top: initial !important;
    transform: translateY(0) !important;
}

.swiper-navigation div[class*="button-prev"] {
    left: 1rem;
    bottom: 12px !important;
    top: initial !important;
    transform: translateY(0) !important;
}

/*  */

/* Style for .studius-swiper navigation arrows */
.studius-swiper .swiper-navigation div[class*="button-"] {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
}

/* Adjust the icon size to fit the 30px container */
.studius-swiper .swiper-navigation div[class*="button-"] i {
    font-size: 15px !important;
    line-height: 30px !important;
    width: auto !important;
    height: auto !important;
}

/*  */

/* .studius-swiper #swiper-8852::after {
    content: "";
    width: 100%;
    height: 10%;
    background-color: white;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
} */

#swiper-8852 {
    border-radius: 12px;
    padding-bottom: 5%;
}

/* Common Alignment for Navigation & Pagination */
.studius-swiper .swiper-button-prev,
.studius-swiper .swiper-button-next,
.studius-swiper .swiper-pagination-parent-8852 {
    position: absolute !important;
    bottom: 1rem !important;
    /* Adjusted slightly for visibility */
    top: auto !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center;
}

.studius-swiper .swiper-button-prev {
    left: 2rem !important;
    z-index: 11 !important;
}

.studius-swiper .swiper-button-next {
    left: calc(2rem + 44px + 12px) !important;
    z-index: 11 !important;
}

/* Main Container - Aligned to the right of the arrows */
.studius-swiper .swiper-pagination-parent-8852 {
    left: calc(2rem + (44px * 2) + (16px * 2)) !important;
    gap: 16px !important;
    background-color: transparent !important;
    box-shadow: none !important;
    width: auto !important;
    padding: 0 !important;
    z-index: 10 !important;
}

/* Pagination Bullets - Increased size */
.studius-swiper .swiper-pagination-bullet {
    width: 18px !important;
    height: 18px !important;
    background-color: rgba(0, 0, 0, 0.3) !important;
    border: none !important;
    border-radius: 50% !important;
    opacity: 1 !important;
    margin: 0 !important;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

/* Active Bullet - Black circle with a larger white center dot */
.studius-swiper .swiper-pagination-bullet-active {
    background-color: #1a1a1a !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.studius-swiper .swiper-pagination-bullet-active::after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    background-color: #fff;
    border-radius: 50%;
}

/* Navigation Buttons - Circular grey buttons */
.studius-swiper .swiper-button-prev,
.studius-swiper .swiper-button-next {
    width: 44px !important;
    height: 44px !important;
    background-color: rgba(0, 0, 0, 0.3) !important;
    border-radius: 50% !important;
    transition: background-color 0.2s ease;
    justify-content: center;
}

.studius-swiper .swiper-button-prev::after,
.studius-swiper .swiper-button-next::after {
    font-size: 20px !important;
    font-weight: 900;
    color: #fff !important;
    content: none;
    /* Removing default swiper font icons if necessary, using font-awesome i tags instead as per previous code */
}

/* If using FontAwesome icons (based on your existing HTML structure) */
.studius-swiper .swiper-button-prev i,
.studius-swiper .swiper-button-next i {
    color: #fff !important;
    font-size: 18px !important;
}

/* Hover Effects */
.studius-swiper .swiper-pagination-bullet:hover,
.studius-swiper .swiper-button-prev:hover,
.studius-swiper .swiper-button-next:hover {
    background-color: rgba(0, 0, 0, 0.5) !important;
    transform: scale(1.05);
}

/* Mobile Breakpoint Styles */
@media (max-width: 50.99rem) {

    .studius-swiper .swiper-button-prev,
    .studius-swiper .swiper-button-next,
    .studius-swiper .swiper-pagination-parent-8852 {
        bottom: 1.5rem !important;
    }

    .studius-swiper .swiper-button-prev {
        left: 1rem !important;
    }

    .studius-swiper .swiper-button-next {
        left: calc(1rem + 36px + 8px) !important;
    }

    .studius-swiper .swiper-pagination-parent-8852 {
        left: calc(1rem + (36px * 2) + (12px * 2)) !important;
        gap: 12px !important;
    }

    .studius-swiper .swiper-button-prev,
    .studius-swiper .swiper-button-next {
        width: 36px !important;
        height: 36px !important;
    }

    .studius-swiper .swiper-button-prev i,
    .studius-swiper .swiper-button-next i {
        font-size: 14px !important;
    }
}

.studius-swiper .slide {
    border-radius: 12px;
    overflow: hidden;
}

/*  */

/* --- j-icon-quicklinks --- */

.j-icon-quicklinks .g-blockcontent {
    border-bottom: none;
}

.j-icon-quicklinks .g-blockcontent-subcontent {
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
}

.j-icon-quicklinks .g-blockcontent-subcontent-block {
    flex: 0 0 auto;
    width: auto !important;
    display: flex;
    align-items: stretch;
    position: relative;
}

.j-icon-quicklinks .g-blockcontent-subcontent-block:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 24px;
    width: 1px;
    background-color: rgb(var(--primary-color-rgb));
    opacity: 0.6;
}

.j-icon-quicklinks .g-blockcontent-subcontent-block-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    /* Responsive gap: min 0.5rem, ideal 0.8vw, max 1.25rem */
    gap: clamp(0.5rem, 0.8vw, 1.25rem);
    height: auto !important;
    /* Responsive padding: min 0.6rem 1rem, ideal 1.5vw 2vw, max 1.5rem 2.5rem */
    padding: clamp(0.75rem, 1.5vw, 1.5rem) clamp(1rem, 2vw, 2.5rem);
    position: relative;
    transition: background-color 0.2s ease;
}

.j-icon-quicklinks .g-blockcontent-subcontent-block-content:hover {
    background-color: rgba(var(--secondary-color-rgb), 0.05);
}

/* Icon */
.j-icon-quicklinks .g-blockcontent-subcontent-title-icon {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0 !important;
    color: rgb(var(--secondary-color-rgb));
    font-size: 1.4rem;
    line-height: 1;
}

.j-icon-quicklinks .g-blockcontent-subcontent-title-icon i {
    color: rgb(var(--secondary-color-rgb));
    font-size: 1.45rem;
    line-height: 1;
    margin-bottom: 0 !important;
}

/* Title */
.j-icon-quicklinks .g-blockcontent-subcontent-title {
    display: none !important;
    margin: 0 !important;
    height: auto !important;
    font-size: 1rem;
    line-height: 1.3;
    color: rgb(var(--primary-color-rgb));
}

.j-icon-quicklinks .g-blockcontent-subcontent-title-text {
    font-size: 1rem;
    font-weight: 700;
    color: rgb(var(--primary-color-rgb));
    line-height: 1.3;
}

/* Link paragraph */
.j-icon-quicklinks .g-blockcontent-buttons {
    margin: 0 !important;
    height: auto !important;
    text-decoration: none !important;
    font-size: 1.35rem;
    line-height: 1.3;
}

.j-icon-quicklinks .g-blockcontent-buttons a {
    display: inline;
    color: rgb(var(--primary-color-rgb)) !important;
    font-weight: 700;
    font-size: 1.35rem;
    text-decoration: none !important;
    white-space: nowrap;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.j-icon-quicklinks .g-blockcontent-buttons a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
}

.j-icon-quicklinks .g-blockcontent-buttons a:hover {
    color: rgb(var(--secondary-color-rgb)) !important;
    opacity: 0.85;
}

/* Mobile */
@media (max-width: 50.99rem) {
    .j-icon-quicklinks .g-blockcontent-subcontent {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 1rem;
    }

    .j-icon-quicklinks .g-blockcontent-subcontent-block {
        flex: 100%;
        justify-content: center;
    }

    .j-icon-quicklinks .g-blockcontent-subcontent-block::after {
        display: none !important;
    }

    .j-icon-quicklinks .g-blockcontent-subcontent-block-content {
        padding: 0.6rem 1rem;
        border-bottom: 1px solid rgba(var(--tertiary-color-rgb), 0.35);
    }
}

/*  */

.site-home #g-header {
    padding: 2rem !important;
    border-bottom: 3px solid rgb(var(--tertiary-color-rgb));
}

/*  */

/* --- j-calendar --- */

/* Reset fixed heights and baselines from default styles */
.j-calendar [data-style-id],
.j-calendar .g-particle,
.j-calendar .gcaltohtml,
.j-calendar .cc-date-event-container,
.j-calendar .cc-dateblockformat,
.j-calendar .cc-eventblock,
.j-calendar .cc-monthformat,
.j-calendar .cc-dayformat,
.j-calendar .cc-timeofday,
.j-calendar .cc-title {
    height: auto !important;
    min-height: unset !important;
    max-height: unset !important;
    block-size: auto !important;
    line-height: normal !important;
    padding: initial;
    margin: initial;
}

.j-calendar-title {
    padding: 2rem 2rem 0 2rem;
}

.j-calendar {
    padding: 0 2rem;
    max-height: 675px;
    overflow-y: auto;

    /* Firefox scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.4) transparent;
}

/* Webkit Scrollbar */
.j-calendar::-webkit-scrollbar {
    width: 6px;
}

.j-calendar::-webkit-scrollbar-track {
    background: transparent;
}

.j-calendar::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 10px;
}

.j-calendar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.6);
}

.j-calendar-button {
    padding: 1.5rem 2rem 2rem 2rem;
}

.j-calendar-title h2 {
    /* font-family: "EB Garamond", serif; */
    color: #2756a6;
    font-size: clamp(2rem, 5vw, 2.5rem);
    margin: 0 0 1.5rem 0 !important;
    text-transform: capitalize;
    line-height: 1;
}

.j-calendar .gcaltohtml {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Event Card Container */
.j-calendar .cc-date-event-container {
    display: flex;
    flex-direction: row;
    border-radius: 12px;
    overflow: hidden;
    /* background: rgba(39, 86, 166, 0.6); */
    /* Rich translucent blue */
    /* backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); */
    /* border: 1px solid rgba(255, 255, 255, 0.15); */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.j-calendar .cc-date-event-container:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

/* Date Section (White Side Block) */
.j-calendar .cc-dateblockformat {
    background: #ffffff;
    width: 100px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 10px;
    border-right: 1px solid rgba(0, 0, 0, 0.05);
}

.j-calendar .cc-monthformat {
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    color: #2756a6;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px !important;
    line-height: 1 !important;
}

.j-calendar .cc-dayformat {
    font-family: inherit;
    font-size: 2.25rem;
    font-weight: 800;
    color: #2756a6;
    line-height: 1 !important;
}

/* Event Content Section */
.j-calendar .cc-eventblock {
    flex-grow: 1;
    padding: 20px 25px;
    gap: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: rgba(var(--default-white-rgb), 0.20);
}

/* Time/Duration (Matches top line in screenshot) */
.j-calendar .cc-timeofday {
    font-family: inherit;
    font-size: 1.15rem;
    font-weight: 700;
    color: #ffffff !important;
    margin-bottom: 4px !important;
    letter-spacing: 0.02em;
}

/* Event Title (Matches bottom line in screenshot) */
.j-calendar .cc-title {
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9) !important;
    line-height: 1.4 !important;
}

/* Mobile Responsiveness */
@media (max-width: 50.99rem) {
    .j-calendar .cc-dateblockformat {
        width: 85px;
        padding: 12px 5px;
    }

    .j-calendar .cc-dayformat {
        font-size: 1.85rem;
    }

    .j-calendar .cc-eventblock {
        padding: 15px 18px;
    }

    .j-calendar .cc-timeofday {
        font-size: 1.05rem;
    }
}

/*  */

.j-collapse h2.g-title {
    color: rgb(var(--default-white-rgb)) !important;
    font-family: var(--title-font-family);
    font-size: clamp(2rem, 5vw, 2.5rem);
    font-weight: 700;
    text-transform: capitalize;
    margin: 0 0 1.5rem 0 !important;
    border: none !important;
    background: transparent !important;
    font-weight: normal !important;
    padding: 0;
    line-height: 1;
}

/*  */

.site-home #g-container-main h2 {
    color: rgb(var(--default-white-rgb)) !important;
}

/*  */

.j-collapse {
    padding: 2rem;
}

/* Accordion Layout */
.j-collapse .g-content-array {
    display: flex !important;
    flex-direction: column-reverse !important;
    gap: 0px !important;
}

/* Base resets */
.j-collapse .g-grid,
.j-collapse .g-array-item,
.j-collapse .g-array-item-image,
.j-collapse .g-array-item-text,
.j-collapse .g-array-item-read-more {
    height: auto !important;
    block-size: auto !important;
    margin: 0 !important;
}

.j-collapse .g-array-item {
    display: flex;
    flex-direction: column;
}

/* Accordion Header (Closed state) */
.j-collapse .accordion-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    padding: 0.5rem 0;
    transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.4s ease, margin 0.4s ease;
    overflow: hidden;
    max-height: 80px;
}

.j-collapse .accordion-header:hover {
    opacity: 0.8;
}

/* Yellow Triangle Arrow */
.j-collapse .accordion-header .arrow {
    display: inline-block !important;
    position: static !important;
    width: 0 !important;
    height: 0 !important;
    border-top: 8px solid transparent !important;
    border-bottom: 8px solid transparent !important;
    border-left: 12px solid rgb(var(--tertiary-color-rgb)) !important;
    border-right: none !important;
    background: none !important;
    margin: 0 !important;
    padding: 0 !important;
    inset: auto !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.j-collapse .accordion-header .title {
    color: rgb(var(--default-white-rgb)) !important;
    font-size: 1.35rem;
    font-weight: 700;
}

/* New Accordion Content Wrapper */
.j-collapse .accordion-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    /* padding-bottom: 5px; */
    /* Prevent clipping of focus/scale effects */
    /* margin-bottom: 1rem; */
}

.j-collapse .is-open .accordion-content {
    opacity: 1;
    /* max-height is controlled by local.js in pixels */
}

/* Arrow rotation when open */
.j-collapse .is-open .accordion-header .arrow {
    transform: rotate(90deg);
}

/* Hide children's own overflow/height behavior to let the wrapper control it */
.j-collapse .g-array-item-image,
.j-collapse .g-array-item-text,
.j-collapse .g-array-item-read-more {
    display: block !important;
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible !important;
    margin-bottom: 1.5rem !important;
}

.j-collapse .g-array-item-read-more {
    margin-top: 1rem !important;
    margin-bottom: 0 !important;
}

/* Wide Content Image */
.j-collapse .g-array-item-image {
    width: 100%;
    aspect-ratio: 3 / 1;
    overflow: hidden;
    border-radius: 8px;
}

.j-collapse .g-array-item-image a {
    display: block;
    width: 100%;
    height: 100%;
}

.j-collapse .g-array-item-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
    max-width: 100%;
}

/* Text styles */
.j-collapse .g-array-item-text {
    color: rgb(var(--default-white-rgb));
    /* margin-bottom: 1.5rem !important; */
}

.j-collapse .g-array-item-text p {
    color: inherit;
    font-size: 1.15rem !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* Read More Button */
.j-collapse .is-open .g-array-item-read-more {
    display: none !important;
    /* using flex to let child width auto */
}

.j-collapse .g-array-item-read-more a.button {
    display: inline-flex !important;
    background-color: transparent !important;
    border: 1px solid rgb(var(--default-white-rgb)) !important;
    color: rgb(var(--default-white-rgb)) !important;
    padding: 12px 24px !important;
    border-radius: 4px !important;
    font-size: 1.05rem !important;
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease-in-out !important;
    width: auto !important;
    margin-bottom: 5px;
}

.j-collapse .g-array-item-read-more a.button:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.8) !important;
    color: #ffffff !important;
    transform: none !important;
    /* Prevent clipping against overflow:hidden container */
}

/* Mobile Adjustments */
@media (max-width: 50.99rem) {
    .j-collapse .g-array-item-image {
        aspect-ratio: 16 / 9;
    }

    .j-collapse .accordion-header .title {
        font-size: 1.1rem;
    }

    .j-collapse .g-array-item-text p {
        font-size: 1rem !important;
    }

    .j-collapse .g-content-array .g-grid:not(:first-child) .g-content {
        padding: 0;
    }
}

/*  */

.site-home #g-container-main {
    background: url(/images/template/bg-calendar.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.site-home #g-container-main {
    position: relative;
}

.site-home #g-container-main::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(var(--primary-color-rgb), 0.8);
    backdrop-filter: blur(27px);
    -webkit-backdrop-filter: blur(27px);
    z-index: 0;
}

.site-home #g-container-main>.g-container {
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/*  */

.j-collapse .g-joomla-articles {
    background-color: rgba(var(--default-white-rgb), 0.20);
    padding: 1.5rem;
    border-radius: 12px;
}

/*  */

.j-buttons-white a.button {
    /* Layout & Sizing */
    display: inline-block;
    padding: 15px 30px;

    /* The "Ghost" Look */
    background-color: transparent;
    color: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 4px;
    /* Adjust for more or less rounded corners */

    /* Typography */
    text-decoration: none;
    font-family: sans-serif;
    /* Replace with your site's font */
    font-size: 20px;
    font-weight: 500;

    /* Smooth interaction */
    transition: all 0.3s ease;
}

/* Hover State */
.j-buttons-white a.button:hover {
    background-color: rgba(255, 255, 255, 0.1);
    /* Subtle white tint */
    border-color: rgba(255, 255, 255, 0.8);
    color: #ffffff;
}

.j-buttons-white #g-mainbar .plan-button a.button {
    display: grid;
    margin: auto;
    margin-top: 0;
    margin-bottom: 2rem;
    width: fit-content;
}

.calendar-button a.button {
    margin-top: 2rem;
}

/* Mary Statue Background Effect */
.site-home #g-container-main .g-container {
    position: relative;
}

@media (min-width: 50.99rem) {
    .site-home #g-container-main .g-container::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: url("/images/template/mary-statue.png");
        background-repeat: no-repeat;
        background-position: right bottom;
        background-size: contain;
        transform: translateY(40%);
        opacity: 0.15;
        pointer-events: none;
        z-index: 0;
    }
}

.site-home #g-container-main .g-grid {
    position: relative;
    z-index: 1;
}

.site-home #g-container-main {
    overflow: hidden;
}

/*  */

/* --- j-pastors-welcome --- */

.j-pastors-welcome .g-content-array {
    background-color: rgba(var(--background-color-rgb), 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
}

.j-pastors-welcome .g-grid {
    margin: 0 !important;
}

.j-pastors-welcome .g-array-item {
    display: grid !important;
    grid-template-columns: min-content 1fr;
    grid-template-areas:
        "image title"
        "image text"
        "image button";
    column-gap: clamp(1.5rem, 5vw, 4rem);
    align-items: start;
    width: 100%;
}

.j-pastors-welcome .g-array-item-image {
    grid-area: image;
    flex: none !important;
    width: clamp(200px, 20vw, 350px);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    line-height: 0;
    margin: 0 !important;
}

.j-pastors-welcome .g-array-item-image img {
    width: 100% !important;
    height: auto !important;
    display: block;
    object-fit: cover;
}

.j-pastors-welcome .g-array-item-title {
    grid-area: title;
    margin: 0 0 0.5rem 0 !important;
    align-self: end;
}

.j-pastors-welcome .g-array-item-title,
.j-pastors-welcome .g-array-item-title a {
    color: rgb(var(--secondary-color-rgb)) !important;
    font-size: clamp(1.5rem, 2.8vw, 2.5rem);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.1;
    text-decoration: none !important;
    font-weight: 500;
    border: none !important;
    background: none !important;
}

.j-pastors-welcome .g-array-item-title::after,
.j-pastors-welcome .g-array-item-title a::after {
    display: none !important;
}

.j-pastors-welcome .g-array-item-text {
    grid-area: text;
    color: rgba(var(--default-black-rgb), 0.6);
    font-size: 1.15rem;
    line-height: 1.6;
    margin: 0 !important;
    align-self: center;
}

.j-pastors-welcome .g-array-item-text p {
    margin: 0;
}

.j-pastors-welcome .g-array-item-read-more {
    grid-area: button;
    margin: 1rem 0 0 0 !important;
    align-self: start;
}

.j-pastors-welcome .g-array-item-read-more a.button {
    background-color: rgb(var(--secondary-color-rgb)) !important;
    color: rgb(var(--default-white-rgb)) !important;
    padding: 12px 28px !important;
    border-radius: 6px !important;
    font-size: 1.1rem !important;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    transition: all 0.3s ease;
    border: none !important;
    white-space: nowrap;
    /* Prevent wrapping */
}

/* Icon for button - Using pseudo element for the mail icon */
.j-pastors-welcome .g-array-item-read-more a.button::before {
    content: "\f0e0";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 1.2rem;
}

.j-pastors-welcome .g-array-item-read-more a.button:hover {
    background-color: rgb(var(--tertiary-color-rgb)) !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(var(--secondary-color-rgb), 0.3);
}

/* Mobile Breakpoint Styles (50.99rem) */
@media (max-width: 50.99rem) {
    .j-pastors-welcome .g-array-item {
        grid-template-columns: 1fr;
        grid-template-areas:
            "image"
            "title"
            "text"
            "button";
        text-align: center;
        justify-items: center;
        gap: 1.5rem;
    }

    .j-pastors-welcome .g-array-item-image {
        width: 100%;
        max-width: 280px;
    }

    .j-pastors-welcome .g-array-item-title {
        margin-top: 1rem !important;
    }
}

/*  */

.site-home #g-expanded {
    background-image: url(/images/template/bg-pastors-welcome.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.site-home #g-expanded {
    position: relative;
}

.site-home #g-expanded::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 0;
}

.site-home #g-expanded>.g-container {
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 3rem !important;
    position: relative;
    z-index: 1;
}

.site-home #g-expanded .g-item-title {
    border-bottom: none !important;
}

/*  */

.pastor-ad {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/*  */

/* SIDE MENU COMPONENT STYLES */
.arrow-side-menu {
    background-color: var(--primary-color);
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.arrow-side-menu .moduletable {
    margin: 0;
}

.arrow-side-menu ul.nav.menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.arrow-side-menu ul.nav.menu li {
    border-bottom: 1px solid rgba(var(--secondary-color-rgb), 0.3);
    position: relative;
    transition: all 0.3s ease;
}

.arrow-side-menu ul.nav.menu li:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.arrow-side-menu ul.nav.menu li a {
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    padding: 1.15rem 1.75rem;
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.12em;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
    width: 100%;
}

/* Gold Side Indicator */
.arrow-side-menu ul.nav.menu li a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: var(--secondary-color);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover & Active States */
.arrow-side-menu ul.nav.menu li:hover a,
.arrow-side-menu ul.nav.menu li.current a,
.arrow-side-menu ul.nav.menu li.active a {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    padding-left: 2.25rem;
}

.arrow-side-menu ul.nav.menu li:hover a::before,
.arrow-side-menu ul.nav.menu li.current a::before,
.arrow-side-menu ul.nav.menu li.active a::before {
    width: 5px;
}

/* Decorative Chevron on Hover */
.arrow-side-menu ul.nav.menu li a::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: '\f061';
    /* fa-arrow-right */
    position: absolute;
    right: 1.5rem;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
    color: var(--secondary-color);
    font-size: 1.4rem;
}

.arrow-side-menu ul.nav.menu li:hover a::after {
    opacity: 1;
    transform: translateX(0);
}

/*  */

/* Cathedral Footer Styling */
.cathedral-footer {
    position: relative;
    overflow: hidden;
    color: #ffffff;
    padding: 2rem 0;
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    z-index: 1;
}

.cathedral-footer .footer-main-content {
    width: 100%;
    max-width: 100%;
    height: auto !important;
}

.cathedral-footer .footer-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 3rem;
    gap: 2rem;
    height: auto !important;
}

.cathedral-footer .footer-logo-container {
    flex: 0 0 auto;
}

.cathedral-footer .footer-logo {
    height: clamp(80px, 12vw, 140px);
    width: auto;
    transition: transform 0.3s ease;
    margin-bottom: -2.5rem;
}

.cathedral-footer .footer-logo:hover {
    transform: scale(1.05);
}

.cathedral-footer .footer-info-container {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: clamp(2rem, 12.5vw, 14rem);
}

.cathedral-footer .footer-contact-details {
    flex: 0 0 auto;
    text-align: left;
    padding: 1rem 0;
}

.cathedral-footer .footer-address {
    color: #ffffff !important;
    font-weight: 500 !important;
    font-size: 1.1rem;
    margin: 0 0 0.5rem 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.cathedral-footer .footer-meta {
    color: #ffffff !important;
    font-size: 1.1rem;
    margin: 0 !important;
    opacity: 0.9;
}

.cathedral-footer .footer-meta a {
    color: #ffffff !important;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.cathedral-footer .footer-meta a:hover {
    opacity: 0.7;
}

.cathedral-footer .footer-social-icons {
    display: flex;
    gap: 15px;
    justify-content: flex-end;
}

.cathedral-footer .social-icon {
    color: #ffffff;
    font-size: 1.25rem;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.cathedral-footer .social-icon:hover {
    transform: translateY(-3px);
    opacity: 0.7;
}

.cathedral-footer .footer-divider-graphic {
    width: 100%;
    height: 5vw;
    background-image: url('/images/template/footer-line.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 1rem;
}

.cathedral-footer .footer-bottom-nav {
    padding: 0 3rem;
    margin-top: -2.5rem;
    margin-bottom: 2rem;
}

.cathedral-footer .footer-link-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-end;
    gap: 0;
}

.cathedral-footer .footer-link-list li {
    display: flex;
    align-items: center;
}

.cathedral-footer .footer-link-list li:not(:last-child)::after {
    content: "|";
    color: #ffffff;
    margin: 0 1.5rem;
    opacity: 0.5;
}

.cathedral-footer .footer-link-list a {
    color: #ffffff;
    text-decoration: none;
    text-transform: none !important;
    font-weight: 500;
    font-size: 1.15rem;
    transition: opacity 0.3s ease;
}

.cathedral-footer .footer-link-list a:hover {
    opacity: 0.7;
}

/* Mobile Breakpoint */
@media screen and (max-width: 50.99rem) {
    .cathedral-footer .footer-top-row {
        flex-direction: column;
        padding: 1rem 1rem 0rem 1rem;
        gap: 2rem;
    }

    .cathedral-footer .footer-logo {
        margin-bottom: 0;
        height: 10rem;
    }

    .cathedral-footer .footer-info-container {
        flex-direction: column;
        gap: 1.5rem;
        width: 100%;
    }

    .cathedral-footer {
        padding: 0;
    }

    .cathedral-footer .footer-contact-details {
        margin: 0;
    }

    .cathedral-footer .social-icon {
        font-size: 2rem;
    }

    .cathedral-footer .footer-address,
    .cathedral-footer .footer-meta {
        font-size: 1.3rem !important;
    }

    .cathedral-footer .footer-social-icons {
        justify-content: center;
    }

    .cathedral-footer .footer-divider-graphic {
        display: none;
        /* Hide complex graphic on small mobile or simplify */
    }

    .cathedral-footer .footer-bottom-nav {
        margin-top: 1rem;
        padding: 0 1rem;
    }

    .cathedral-footer .footer-link-list {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1rem;
    }

    .cathedral-footer .footer-link-list a {
        font-size: 1.4rem !important;
    }

    .cathedral-footer .footer-link-list li:not(:last-child)::after {
        display: none;
    }
}

@media screen and (max-width: 1087px) {
    .cathedral-footer .footer-divider-graphic {
        height: 10vw;
        min-height: 115px;
    }
}

@media screen and (min-width: 1920px) {
    .j-mass-times .g-content-array {
        padding: 1.5rem 4rem !important;
    }
}

/*  */

/* Move admin footer to the left and layout as a row */
.adminfootericon {
    left: auto !important;
    left: 3rem !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 15px !important;
    width: auto !important;
    height: auto !important;
    bottom: 13px;
}

/* Hide the line breaks to allow flex row layout */
.adminfootericon br {
    display: none !important;
}

/* Ensure links don't have unexpected margins in the new row layout */
.adminfootericon a {
    white-space: nowrap !important;
    transition: opacity 0.3s ease !important;
}

.adminfootericon a:hover {
    opacity: 0.7 !important;
}

/*  */

#g-footer {
    position: relative;
    background-image: url(/images/template/bg-footer.jpg) !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#g-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(var(--primary-color-rgb), 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 0;
}

#g-footer a:hover {
    opacity: 0.5 !important;
    color: white;
}

/*  */

@media (min-width: 50.99rem) {
    .withmaxwidth:not(.sponsorshippage) :is(#g-top, #g-container-main, #g-above, #g-feature, #g-showcase, #g-utility, #g-container-main, #g-expanded, #g-extension, #g-bottom, #g-footer)>.g-container {
        padding: 0 !important;
    }
}

/*  */

.j-pastors-welcome {
    padding: 2rem 2rem 0 2rem;
}

/*  */

.j-banners {
    display: flex;
    justify-content: center;
    padding: 1.5rem 0;
}

.j-banners table {
    width: 100% !important;
    border: none !important;
    margin: 0 auto;
}

.j-banners .g-content {
    padding: 0;
    margin: 0;
}

.j-banners tbody {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.j-banners tr {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    row-gap: 1rem;
    width: 100%;
}

.j-banners td {
    display: block !important;
    padding: 0 !important;
    border: none !important;
    width: auto !important;
    max-width: 100% !important;
}

.j-banners td>div,
.j-banners td>div>div {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    margin: 0 auto;
}

.j-banners td>div>div {
    display: grid !important;
}

.j-banners a {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
}

.j-banners img {
    position: relative !important;
    display: block;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    margin: 0 auto;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    backface-visibility: hidden;
    transform: translateZ(0);
    border-radius: 4px;
}

.j-banners a:hover img {
    transform: translateY(-4px) translateZ(0);
    box-shadow: 0 4px 15px rgba(var(--primary-color-rgb), 0.3);
}

@media (max-width: 50.99rem) {
    .j-banners {
        padding: 0;
    }

    .j-banners table {
        display: block !important;
        width: 100% !important;
    }

    .j-banners tbody {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0.5rem !important;
        width: 100%;
    }

    .j-banners tr {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        width: fit-content !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    .j-banners td {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .j-banners div[style*="width: 330px"] {
        max-width: 100% !important;
    }
}

/*  */

@media (max-width: 50.99rem) {
    .withmaxwidth:not(.sponsorshippage) :is(#g-top, #g-container-main, #g-above, #g-feature, #g-showcase, #g-utility, #g-container-main, #g-expanded, #g-extension, #g-bottom, #g-footer)>.g-container {
        padding: 0 !important;
    }

    .j-banners {
        padding-bottom: 2rem;
    }

    #g-expanded .j-banners {
        padding: 2rem 0;
    }

    #g-footer>.g-container>.g-grid>.g-block {
        padding: 0;
    }
}

/* --- J-MENU STYLES --- */
.j-menu .g-main-nav {
    position: relative;
    z-index: 20;
}

.j-menu .g-main-nav .g-toplevel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    /* gap: 1rem; */
    margin: 60px 0 0 0;
    padding: 1rem;
    list-style: none;
    background-color: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border-top: 5px solid rgb(var(--secondary-color-rgb));
}

.j-menu .g-main-nav .g-toplevel>li {
    position: relative;
    margin: 0;
    padding: 0;
    transition: all 0.2s ease-out;
}

.j-menu .g-main-nav .g-toplevel .g-menu-item-container {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    color: #000000;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.j-menu .g-main-nav .g-toplevel .g-menu-item-container:hover,
.j-menu .g-main-nav .g-toplevel .g-menu-item-container:focus {
    background-color: rgba(var(--primary-color-rgb), 0.05);
}

.j-menu .g-menu-item-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.j-menu .g-menu-item-title {
    font-size: 1rem;
    font-weight: 700;
}

.j-menu .g-menu-item-subtitle {
    font-size: 0.85rem;
    color: #888;
    opacity: 0.7;
    margin-top: 0.15rem;
    text-transform: none;
    font-weight: 400;
}

.j-menu .g-menu-parent-indicator {
    margin-left: 0.5rem;
    color: rgb(var(--secondary-color-rgb));
    transition: transform 0.3s ease;
}

.j-menu .g-main-nav .g-toplevel>li:hover .g-menu-parent-indicator,
.j-menu .g-main-nav .g-toplevel>li:focus-within .g-menu-parent-indicator {
    transform: translateY(2px);
}

.j-menu .g-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: max-content;
    min-width: 380px;
    max-width: 550px;
    background-color: rgba(var(--primary-color-rgb), 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    padding: 1rem 0;
    margin-top: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 100;
}

.j-menu .g-main-nav .g-toplevel>li:hover .g-dropdown,
.j-menu .g-main-nav .g-toplevel>li:focus-within .g-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.j-menu .g-sublevel {
    list-style: none;
    margin: 0;
    padding: 0;
}

.j-menu .g-dropdown-column {
    padding: 0;
}

.j-menu .g-sublevel li {
    margin: 0;
    padding: 0;
}

.j-menu .g-sublevel .g-menu-item-container {
    display: block;
    padding: 10px 24px;
    color: #ffffff !important;
    text-decoration: none;
    transition: all 0.35s ease;
}

.j-menu .g-sublevel .g-menu-item-container:hover,
.j-menu .g-sublevel .g-menu-item-container:focus {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff !important;
}

.j-menu .g-sublevel .g-menu-item-container:hover .g-menu-item-content,
.j-menu .g-sublevel .g-menu-item-container:focus .g-menu-item-content {
    transform: translateX(12px);
}

.j-menu .g-sublevel .g-menu-item-title {
    font-size: 1rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
    color: #ffffff !important;
}

.j-menu .g-sublevel .g-menu-item-subtitle {
    color: #ffffff !important;
    opacity: 0.9;
}

.j-menu .g-go-back .g-menu-item-container {
    color: #ffffff;
    text-transform: uppercase;
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.j-menu .g-go-back .g-menu-item-container:hover,
.j-menu .g-go-back .g-menu-item-container:focus {
    background-color: transparent;
    padding-left: 24px;
    color: #ffffff;
    opacity: 0.8;
}

@media screen and (max-width: 50.99rem) {
    .j-menu .g-main-nav .g-toplevel {
        flex-direction: column;
        align-items: stretch;
        margin-top: 2rem;
        background-color: transparent;
        box-shadow: none;
        border-top: none;
    }

    .j-menu .g-main-nav .g-toplevel>li {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .j-menu .g-main-nav .g-toplevel .g-menu-item-container {
        background-color: #ffffff;
        border-radius: 6px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .j-menu .g-dropdown {
        position: static;
        width: 100%;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background-color: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        padding: 0.5rem 0 0.5rem 1rem;
        margin: 0;
        display: none;
    }

    .j-menu .g-main-nav .g-toplevel>li.active .g-dropdown,
    .j-menu .g-main-nav .g-toplevel>li:hover .g-dropdown,
    .j-menu .g-main-nav .g-toplevel>li:focus-within .g-dropdown {
        display: block;
    }

    .j-menu .g-sublevel .g-menu-item-container {
        padding: 0.75rem 1rem;
        color: rgb(var(--primary-color-rgb)) !important;
        background-color: rgba(var(--primary-color-rgb), 0.05);
        margin-bottom: 0.25rem;
        border-radius: 4px;
    }

    .j-menu .g-sublevel .g-menu-item-container:hover,
    .j-menu .g-sublevel .g-menu-item-container:focus {
        background-color: rgba(var(--primary-color-rgb), 0.1);
        color: rgb(var(--primary-color-rgb)) !important;
        padding-left: 1.5rem;
    }

    .j-menu .g-go-back .g-menu-item-container {
        color: rgba(var(--default-black-rgb), 0.6);
        border-bottom-color: rgba(0, 0, 0, 0.1);
    }

    .j-menu .g-go-back .g-menu-item-container:hover,
    .j-menu .g-go-back .g-menu-item-container:focus {
        background-color: transparent;
        color: #000000;
    }

    .j-menu .g-sublevel .g-menu-item-title,
    .j-menu .g-sublevel .g-menu-item-subtitle {
        color: rgb(var(--primary-color-rgb)) !important;
    }

    .j-menu .g-sublevel .g-menu-item-subtitle {
        opacity: 0.7;
    }
}

/* Align dropdown to the left of the anchor by anchoring its right edge */
.j-menu .g-toplevel .g-dropdown-left {
    left: auto !important;
    right: 0 !important;
}

.g-block:has(#g-aside .j-banners) {
    display: grid;
    align-items: center;
    justify-content: center;
    margin: auto;
}

.site-sub .g-block:has(#g-aside .j-banners) {
    align-items: start;
    margin-top: 0 !important;
}

@media (max-width: 50.99rem) {
    .g-offcanvas-toggle {
        top: 0;
        left: 0;
        border-radius: 0 0 50% 0
    }
}


@media only screen and (max-width: 50.99rem) {
    .site-sub #g-container-main {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .site-sub .j-banners {
        padding-top: 1rem;
    }
}

/* Ensure the button block is at the front of the stacking context */
.j-home-button {
    position: relative;
    z-index: 10;
}

/* Ensure the anchor tag fills the space and is treated as a hit-area */
.j-home-button a {
    position: relative;
    z-index: 11;
    pointer-events: auto !important;
}

/* Optional: Add a hover state to verify it's working */
.j-home-button a:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Tab Content Visibility */
.j-mass-tab-content {
    display: none;
}

@keyframes fadeInTab {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.j-mass-tab-content.active {
    display: block;
    animation: fadeInTab 0.4s ease-out forwards;
}

.j-collapse .g-array-item-read-more {
    display: none;
}

/*  */

/* Scoped Element Class: .mobile-fixed-nav */

@media (max-width: 50.99rem) {
    .mobile-fixed-nav #g-mobile-fixed-nav {
        height: auto !important;
        top: auto !important;
        bottom: 0 !important;
        width: 100%;
        display: block !important;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .mobile-fixed-nav .pwa-quicklinks {
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 70px;
        width: 100%;
    }

    .mobile-fixed-nav .ql-item {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        text-decoration: none;
        color: rgba(255, 255, 255, 0.8) !important;
        transition: all 0.3s ease;
    }

    .mobile-fixed-nav .ql-item i {
        font-size: 1.4rem;
        margin-bottom: 4px;
        color: inherit !important;
    }

    .mobile-fixed-nav .ql-item span {
        font-size: 0.65rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-weight: 600;
    }

    /* Hover and Interaction states */
    .mobile-fixed-nav .ql-item:hover,
    .mobile-fixed-nav .ql-item:active {
        color: #ffffff !important;
        transform: translateY(-2px);
    }

    .mobile-fixed-nav .donate-special i {
        color: #ff4d4d !important;
        /* Heart highlight */
    }
}

/* Ensure hidden on desktop to follow mobile-only logic */
@media (min-width: 51rem) {
    .mobile-fixed-nav #g-mobile-fixed-nav {
        display: none !important;
    }
}