@import url('https://fonts.googleapis.com/css2?family=Besley:ital,wght@0,400..900;1,400..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/******* SITE DEFAULTS *************/
html body {
    --primary-color-rgb: 30,57,87;       /* Deep Navy Blue (#1e3957) */
    --secondary-color-rgb: 202,164,93;   /* Warm Gold (#caa45d) */
    --tertiary-color-rgb: 155,180,201;   /* Mist Blue (#9bb4c9) */
    --background-color-rgb: 239,239,239; /* Soft Gray (#efefef) */

    --default-white-rgb: 255,255,255;
    --default-black-rgb: 0,0,0;

    --title-font-family: 'Besley', serif;
    --body-font-family: 'Open_Sans', sans-serif;
        
    --last-break-point: 50.99rem;
    --site-max-width: 1920px;
        
    --slideshow-height: min(56.25vw, 810px);
    --slideshow-width: min(100vw, 1440px);
        
    --slideshow-height-mobile: 56.25vw;
    --slideshow-width-mobile: 100vw;

    --site-container-max-width: 1600px;

    --ql-background-color: rgba(var(--background-color-rgb), 1);
    --ql-background-hover: rgba(var(--secondary-color-rgb), 1);

    --mass-times-block-title-color: var(--default-white);
    --mass-times-block-title-color-mobile: var(--default-white);
    --mass-times-block-bg: rgba(255, 255, 255, 0.10);
    --mass-times-block-mt-big-title-border-color: var(--secondary-color);
    --mass-times-block-para-color: var(--default-white);
    --mass-times-block-para-color-mobile: var(--default-white);
    --mass-times-block-padding: 2vw;

    --mass-times-block-title-margin: 0 0 min(1.5vw, 1rem) 0;

    --site-border-radius: 5px;

    --slideshow-height: 42vw;

    --navigation-toplevel-menu-item-font-family: var(--navigation-menu-item-font-family);
    --section-above-bg: var(--primary-color);
    --section-feature-bg: var(--primary-color);

    --section-page-surround-bg: rgb(var(--background-color-rgb));
    --section-container-top-bg: rgb(var(--background-color-rgb));
    --section-top-bg: rgb(var(--background-color-rgb));
    --section-navigation-bg: rgb(var(--background-color-rgb));
    --section-slideshow-bg: rgb(var(--background-color-rgb));
    --section-header-bg: rgb(var(--background-color-rgb));
    --section-above-bg: rgb(var(--background-color-rgb));
    --section-feature-bg: rgb(var(--background-color-rgb));
    --section-showcase-bg: rgb(var(--background-color-rgb));
    --section-utility-bg: rgb(var(--background-color-rgb));
    --section-container-main-bg: rgb(var(--background-color-rgb));
    --section-sidebar-bg: transparent;
    --section-mainbar-bg: transparent;
    --section-aside-bg: transparent;
    --section-expanded-bg: rgb(var(--background-color-rgb));
    --section-extension-bg: rgb(var(--background-color-rgb));
    --section-bottom-bg: rgb(var(--background-color-rgb));
    --section-container-footer-bg: rgb(var(--background-color-rgb));
    --section-footer-bg: var(--primary-color);
    --section-copyright-bg: var(--primary-color);
    --section-offcanvas-bg: var(--primary-color);
    --section-offcanvas-bg-overlay: rgba(0,0,0,.25);

    --headlines-section-padding: 2vw 3vw;
    --slideshow-section-padding: 2vw 3vw;
    --widget-parthenon-section-padding: 3vw 3vw;

    --widget-feed-box-border-radius: 5px;

    --ql-font-size-mobile: 1.5rem;

    --mass-times-block-title-font-size-mobile: min(6vw, 30px);

    --slideshow-width: min(100vw, 1669px);
}

:is(section, header, footer).s-padding-2 > .g-container {
    padding: 3vw !important;
}

.site-home {
    --section-above-bg: var(--primary-color);
    --section-feature-bg: var(--primary-color);
    --section-expanded-bg: var(--primary-color);
}

.ole-faithful.stock {
    --ql-toplinks-title-color: var(--primary-color);
    --section-navigation-bg: rgb(var(--background-color-rgb));
    --main-menu-bg-color: rgb(var(--background-color-rgb));
    --main-menu-text-color: var(--primary-color);
    --main-menu-text-color-hover: var(--primary-color);
    --main-menu-sub-bg: var(--primary-color);
    --main-menu-sub-bg-hover: #173352;
    --navigation-social-item-color: var(--primary-color);
    --navigation-social-item-color-hover: var(--secondary-color);
    --navigation-menu-box-shadow: none;
    --ql-toplinks-title-color-hover: var(--secondary-color);
    --ql-toplinks-title-color-mobile: var(--primary-color);
    --ql-toplinks-item-background: rgba(255,255,255, 0);
    --ql-toplinks-item-background-hover: rgba(var(--secondary-color-rgb), 0);
    --ql-toplinks-item-background-mobile: rgba(255,255,255, 0);
    --ql-toplinks-item-background-hover-mobile: rgba(var(--secondary-color-rgb), .8);
    --ql-toplinks-icon-color: var(--primary-color);
    --ql-toplinks-icon-color-mobile: var(--primary-color);
    --ql-toplinks-icon-color-hover: var(--secondary-color);
    --navigation-floating-social-bg: var(--secondary-color);
    --navigation-floating-social-search-box-border: 2px solid var(--default-white);
    --navigation-floating-social-items-color: var(--default-white);
    --navigation-floating-social-items-color-hover: var(--primary-color);
    --navigation-toplevel-menu-item-font-family: var(--title-font-family);
    --ql-toplinks-item-gap: 1.25rem;
    --navigation-mobile-toplinks-padding: 1rem 0;
}

#g-navigation {
    --section-navigation-bg: rgb(var(--background-color-rgb));
}

.site-home {
    --section-slideshow-bg: var(--primary-color);
}

/* Navigation */

@media (max-width: 50.99rem) {
    .ole-faithful > .g-container > .g-grid:has(.ql-toplinks-studius) {
        padding:  1.5rem 2rem !important;
    }
    }

#g-navigation .g-toplevel {
    padding: 0 2rem;
}

.site #g-navigation .g-logo img {
    max-width: 400px;
}

.g-main-nav .g-sublevel>li:hover>.g-menu-item-container, .g-main-nav .g-sublevel>li.active>.g-menu-item-container {
    background-color: #102842;
}

@media (max-width: 50.99rem) {
    #g-navigation .g-logo img {
        width: 75%;
        margin: auto;
        padding: 1rem 0 1rem 1rem;
    }

    .ole-faithful > .g-container > .g-grid:has(.ql-toplinks-studius) {
        padding: 1rem 1rem !important;
    }
    
    .ql-toplinks-studius {
        padding: 0 !important;
    }
}

/*  */

/* Feature */

.site-home #g-feature :is(h1,h3,h4,h5,h6,p,a) {
    color: var(--default-white) !important;
}

.site-home #g-feature {
    padding: 2vw 2vw 3vw 2vw !important;
}

.mission-statement {
    display: flex;
    flex-direction: row;
    margin: auto;
    justify-content: center;
}

.mission-statement p {
    margin: 0;
    line-height: 2;
}

.mission-statement div {
    display: flex;
    align-items: center;
}

.mission-statement div:first-child {
    flex-basis: auto;
    border-right: 3px solid var(--secondary-color);
    padding-right: 2rem;
}

.mission-statement div:first-child h2 {
    color: var(--secondary-color) !important;
    font-size: clamp(2rem, 3vw, 3.5rem);
}

.mission-statement div:last-child {
    flex-basis: 70%;
    padding-left: 2rem;
}

.g-array-item-text:has(.mission-statement) {
    margin: 0 !important;
}

/*  */

/* Slideshow */

.mass-times-block {
    --mass-times-block-title-font-weight: 400;
}

#g-slideshow > div {
    max-width: initial !important;
}

.mass-times-block .g-array-item-text {
    background-color: rgba(255, 255, 255, 0.10);
    border-radius: var(--site-border-radius);
    overflow: hidden;
}

.mass-times-block .g-array-item-text > h3:first-child {
    font-size: clamp(2rem, 2.75vw, 3.5rem);
    color: var(--secondary-color);
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--secondary-color);
    margin-bottom: 1rem;
}

.mass-times-block h1 {
    font-weight: bold !important;
    font-size: min(5vw, 25px) !important;
}

@media (max-width: 1400px) {
    .mass-times-block .g-array-item-text {
        overflow-y: auto;
    }
}

@media (min-width: 50.99rem) {
    .mass-times-block,
    .mass-times-block > .g-content
    .mass-times-block .g-content-array,
    .mass-times-block .g-grid,
    .mass-times-block .g-block,
    .mass-times-block .g-array-item,
    .mass-times-block .g-array-item-text {
        height: var(--slideshow-height) !important;
        max-height: var(--slideshow-height) !important;
    }
}

@media (max-width: 50.99rem) {

    .site-home #g-slideshow {
        padding: 1rem !important;
    }

    .site-home .mass-times-block {
        margin-top: 1rem !important;
    }

    .mission-statement div:last-child {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .mission-statement p {
        text-align: center;
    }

    #swiper-9733-particle {
        border-radius: var(--site-border-radius);
        overflow: hidden;
    }

    .site-sub #g-utility {
        padding: 3rem 0 0 0 !important;
    }
}

/* ABOVE */

#g-above .ql-square-1 .g-blockcontent-subcontent-title-text {
    text-shadow: none;
    border: none;
}

#g-above .ql-square-1 .g-blockcontent-subcontent-title-text {
    text-align: center;
}

#g-above .ql-square-1 .g-blockcontent-subcontent-block {
    flex: 1 !important;
    padding: 0 !important;
    border-radius: var(--site-border-radius);
    overflow: hidden;
    box-shadow: var(--default-box-shadow);
}

#g-above .ql-square-1 .g-blockcontent-subcontent {
    gap: 1.5rem;
}

@media (min-width: 50.99rem) {

    #g-above .ql-square-1 .g-blockcontent-subcontent-block {
        min-width: 200px;
    }

    #g-above .ql-height-13vw .g-blockcontent-subcontent-block-content {
        height: 125px;
    }

    .site-sub #g-utility {
        padding-top: 2rem !important;
    }
}

@media (max-width: 50.99rem) {
    #g-above .ql-square-1 .g-blockcontent-subcontent-block {
        flex-basis: 35% !important;
    }

    #g-above .ql-dm .g-blockcontent-subcontent-title {
        color: var(--primary-color);
    }

    .site-sub #g-bottom {
        padding-bottom: 2rem !important;
    }

    .ql-dm {
        padding: 0 !important;
    }

}

a.whitebutton {
    color: white !important;
    background-color: transparent;
    padding: 1rem 2rem !important;
    border-radius: 5px;
    font-size: clamp(1rem, 2vw, 1.25rem);
}

a.whitebutton:hover,
a.whitebutton:active {
    color: var(--secondary-color) !important;
    background-color: transparent;
    padding: 1rem 2rem !important;
    border-radius: 5px;
    font-size: clamp(1rem, 2vw, 1.25rem);
    border: 2px solid white;
}

/*  */

/* Showcase */

.site-home #contentarray-6765-particle > div > div > div > div > div > div {
    margin: 0 !important;
}

.site-home #contentarray-6765-particle img,
.site-home #contentarray-6765-particle .g-joomla-articles .g-grid {
    border-radius: var(--site-border-radius) !important;
}

.site-home #contentarray-6765-particle {
    --grid-scale-amount: 1.01;
}

.site-home #contentarray-6765-particle .g-item-title a {
    pointer-events: none;
}

.site-home #contentarray-6765-particle p {
    margin: 0;
}

.site-home #contentarray-6765-particle .g-array-item {
    position: relative;
}

/* Style for the new close button */
        .close-article-btn {
            position: absolute;
            top: 12px;
            right: 12px;
            z-index: 10;
            
            /* Styling */
            background-color: #f1f5f9;
            color: #64748b;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            border: none;
            
            /* Centering the 'x' */
            display: flex;
            align-items: center;
            justify-content: center;
            
            /* Text styling */
            font-size: 20px;
            font-weight: bold;
            line-height: 1;
            
            cursor: pointer;
            transition: all 0.2s ease;
        }

        /* Hover effect */
        .close-article-btn:hover {
            background-color: #e2e8f0;
            color: #1e293b;
            transform: scale(1.1);
        }

.site-home #contentarray-6765-particle:has(.g-joomla-articles) {
    padding: 3vw 2vw;
}

.site-home .grid-articles {
    margin-bottom: 0 !important;
}

@media (max-width: 50.99rem) {
    .mission-statement {
        flex-direction: column;
        padding: 2rem 1rem 3rem 1rem;
    }

    .mission-statement > div:first-child {
        padding: 0;
        border-bottom: 2px solid var(--secondary-color);
        border-right: none !important;
        justify-content: center;
        margin-bottom: 1rem;
    }

    .mission-statement > div:first-child h2 {
        font-size: 2.5rem;
    }

    .mission-statement > div:nth-child(2) {
        justify-content: center;

    }

    .site-home #contentarray-6765-particle:has(.g-joomla-articles) {
        padding: 2rem 0;
    }

    .site-home.withmaxwidth :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 1.5rem !important;
    }
}
 
/*  */

/* Main */

.site-home {
    --headlines-section-padding: 4vw 3vw 4vw 3vw;
}

.grid-sideways.grid-articles.grid-wide {
    --grid-grid-height: min(20vw, 200px);
    --grid-grid-ar-width-mult: 1.78;
}

#custom-4753-particle > a {
    background-color: #d1d1d1 !important;
    color: black !important;
    text-transform: none !important;
    font-weight: normal !important;
}

.site-home #g-container-main .grid-articles {
    --grid-gap: 0rem;
}

#contentarray-6756-particle > div {
    padding-bottom: 2rem;
}

.bulletin-picture-list .bulletin-container .bulletin:not(.bulletin:first-child) a {
    color: var(--default-white) !important;
    border: 2px solid white !important;
    background-color: transparent !important;
}

.bulletin-picture-list .bulletin-container .bulletin:not(.bulletin:first-child) p {
    color: white !important;
}

.bulletin-picture-list .widget-button a {
    max-width: 350px;
    color: var(--default-white) !important;
    border: 2px solid white !important;
    background-color: transparent !important;
    margin: auto;
    border-radius: var(--site-border-radius);
    text-align: center;
    width: 100%;
    display: grid;
    font-size: clamp(1.2rem, 21.6px, 1.5rem);
}

.site-home #contentarray-6756-particle > div > .g-grid {
    background-color: transparent !important;
    padding: 2rem 0;
    border-bottom: 2px solid var(--secondary-color);
}

#contentarray-6756-particle > h2 {
    color: var(--secondary-color) !important;
    font-weight: normal !important;
    padding-bottom: 2rem !important;
    margin-bottom: 0rem !important;
    border-bottom: 2px solid var(--secondary-color) !important;
    font-size: clamp(2rem, 3vw, 3.5rem) !important;
}

.widget-title .g-title {
    text-align: center !important;
    color: var(--secondary-color) !important;
    border: none !important;
    font-weight: normal !important;
    font-size: clamp(1.75rem, 2.5vw, 3rem) !important;
    line-height: 1 !important;
}

.bulletin-picture-list .bulletin-variables{
    padding: var(--widget-feed-box-padding);
}

#custom-5956-particle > div.widget-title > h3 {
    padding-bottom: min(1vw, 14.4px);
}

@media (max-width: 50.99rem) {

    #contentarray-6756-particle {
        padding-top: 2rem !important;
    }

    #contentarray-6756-particle .g-title {
        font-size: 2.5rem !important;
    }

    #contentarray-6765-particle .g-item-title a {
        font-size: 1.5rem !important;
    }

    .site-home #g-container-main {
        padding: 2rem 0 !important;
    }

    #contentarray-6765-particle .g-array-item-title {
        padding: 0 !important;
    }

    #contentarray-6765-particle .g-array-item {
        grid-template-columns: 1fr 2.5fr !important;
    }

    #contentarray-6765-particle .g-array-item-image {
        width: fit-content !important;
    }

    .site-home #g-extension .ql-square-1 .g-blockcontent-subcontent-block {
        aspect-ratio: 1600/1200 !important;
    }

}

/*  */

/* expanded */

.bulletin-picture-list .bulletin-variables {
    --bulletin-border-radius: var(--site-border-radius);
    --load-more-border-radius: var(--bulletin-border-radius);
    --big-bulletin-font-size: clamp(1.5rem, 21.6px, 2rem);
    --small-bulletin-font-size: clamp(1.2rem, 21.6px, 1.5rem);
    --bulletin-container-padding: 2rem;
    --big-bulletin-size: 90%;
    --bulletin-title-color: var(--default-white);
    --bulletin-text-background-color: rgba(var(--primary-color-rgb), 0.95);
    --bulletin-list-background-color: var(--default-white);
    --bulletin-gaps: 1rem;
    --bulletin-list-row-height: 3rem;
    --bulletin-text-hover-color: var(--default-black);
    --bulletin-margins: var(--bulletin-gaps);
    --load-more-button-display: none;
    --bulletin-min-width: 125px;
    --bulletin-max-width: 350px;
}

.site-home #bulletins > div:nth-child(1) > a > div.bulletin-date-container {
    border-right: 2px solid white;
    border-left: 2px solid white;
    border-bottom: 2px solid white;
}

.daily-readings :is(h2,h3,h4,h5,h6,p,a) {
    color: var(--default-black) !important;
}

.daily-readings .widget-feed {
    background-color: rgb(var(--background-color-rgb)) !important;
    border-radius: var(--site-border-radius);
}

.daily-readings img {
    aspect-ratio: 1600/900;
    border-radius: var(--site-border-radius);
}

.daily-readings .newsfeed {
    margin: 0 !important;
    list-style-type: none;
}

.daily-readings .dr-feed-box {
    margin-top: 1rem;
}

.daily-readings .widget-feed {
    padding: 1rem;
}

.daily-readings .feed-link a {
    color: var(--primary-color) !important;
    font-weight: bold;
    font-size: clamp(1.5rem, 1.75vw, 2rem);
}

.daily-readings .feed-item-date {
    font-weight: bold;
    margin-top: 1rem;
    display: none;
}

.daily-readings .feed-item-description > h4 {
    font-size: clamp(1.15rem, 1.25vw, 1.5rem);
    font-weight: bold;
}

.daily-readings .widget-feed {
    border-radius: var(--site-border-radius);
}

.widget-button a {
    color: var(--default-white) !important;
    border: 2px solid white !important;
    background-color: transparent !important;
    margin: auto;
    border-radius: var(--site-border-radius);
    text-align: center;
    width: 100%;
    display: grid;
    font-weight: normal !important;
    text-transform: none !important;
    font-size: clamp(1.2rem, 21.6px, 1.5rem);
}

@media (max-width: 50.99rem) {
    .widget-title .g-title {
        font-size: 2.5rem !important;
        padding-bottom: 1rem !important;
    }

    .site-home #g-expanded {
        padding: 3rem 0 !important;
        --widget-section-gap-mobile: 3rem;
    }
}

/*  */

/* extension */

.site-home #g-extension {
    padding: 3vw 3vw 0 3vw !important;

    --ql-background-color: rgba(0,0,0, 0.5);
    --ql-title-color: var(--default-white);
    --ql-background-hover: rgba(0,0,0,0.7);
}

.site-home #g-extension .ql-square-1 .g-blockcontent-subcontent-block {
    flex: 33%;
}

.site-home #g-extension .ql-square-1 {
    padding-top: 1.5vw;
}

.site-home #g-extension .ql-height-13vw .g-blockcontent-subcontent-block-content {
    height: 100%;
}

.site-home #g-extension .ql-square-1 .g-blockcontent-subcontent-block {
    aspect-ratio: 1600/900;
    padding: 1.5vw;

}

.site-home #g-extension .ql-square-1 .g-blockcontent-subcontent-title-text {
    border-bottom: none !important;
}

@media (max-width: 50.99rem) {
    .site-home #g-extension {
        padding: 3rem 0 !important;
        --ql-font-size-mobile: 1.5rem;
    }

    .site-home #g-bottom {
        padding-bottom: 3rem !important;
    }
}

/*  */

/* Footer */

#searchForm .btn, #finder-search .btn {
    background-color: var(--primary-color) !important;
}

#g-footer :is(h1,h2,h3,h4,h5,h6,p,a) {
    color: var(--default-white) !important;
}

#contentarray-5523-particle h1 {
    color: var(--secondary-color) !important;
    margin-bottom: 1.5rem;
    font-size: clamp(2.5rem, 2.75vw, 3rem);
}

.side-menu-particle {
    background-color: var(--primary-color);
    margin-bottom: 2rem !important;
}

/*  */

.site-home .grid-sideways .g-array-item {
    height: 100%!important;
    display: grid!important;
    grid-template-areas: "image title"!important;
    grid-template-rows: var(--grid-grid-height)!important;
    grid-template-columns: var(--grid-column-calc) auto!important;
    column-gap: var(--grid-column-gap)!important;
}

#contentarray-6765-particle {
    display: none;
}

#contentarray-6765-particle:has(.g-grid) {
    display: block;
}

#contentarray-6756-particle .g-content-array > .g-grid:nth-child(2) .g-array-item,
#contentarray-6756-particle .g-content-array > .g-grid:nth-child(4) .g-array-item {
    grid-template-areas: "title image" !important;
    grid-template-columns: auto var(--grid-column-calc) !important;
}

#contentarray-3150-particle .g-title {
    padding-bottom: 1.25vw;
}

/* copyright */

@media (max-width: 50.99rem) {
    .adminfootericon {
        bottom: 5px;
    }

}

@media (display-mode: standalone) {
    .g-offcanvas-toggle {
        color: var(--primary-color);
    }
}

/*  */

#module-logo-135-particle {
    background-color: white;
}

/* .mass-times-block {
    overflow-y: scroll;
} */