@import url('//fonts.googleapis.com/css2?family=Raleway:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
/************ TEMPLATE  ************
Rotator Size: 1600x669 (super wide, 2.39:1)

/************ FONTS  ************
Headings and body font: Raleway
font-family: 'Raleway', sans-serif;

/************ COLORS  ************
Navy: #001642; rgba(0,22,66,0)
Gold: #a8996a; rgba(168,153,106,0)
Grey: #bcbec0 (Not used in Mockup, but could use as another accent)

/************ NOTES ************
-Menu bar: rgba(0,22,66,.6)
-Let's start with just one image for the rotator for now (static)
-Rotator overlay: rgba(0,0,0,.3)
-Calendar: the whole section, text & button included, have a dropshadow
-QL overlay: rgba(0,22,66,.5)
-QL text has a heavier dropshadow for legibility
-news images have subtle dropshadow
-footer icons: meant to mimic what we talked about for the mobile footer sticky 'menu' to help make it look app-like on mobile 
-ministry subpage layout like this: https://www.cccparish.org/formation-ministries

/********** SCHOOL NOTES ***************
-there are no notes specifying styles, so do the normal thing and color flip to your heart's content
- From Design Notes: documents that should be their own button: calendar, application for enrollment, athletics, PTO, Lunch Program,  Principal, Powerschool, Clever, AR Books, Weekly Bulletin, Other School Documents, CGS, EFunds 
************/

.parish-1 {
    --primary-color: #001642;
    --secondary-color: #a8996a;

    --primary-font-family: 'Raleway', sans-serif;

    --primary-rgb: 0, 22, 66;
    --secondary-rgb: 168, 153, 106;

    --default-white: #ffffff;
    --default-black: #000000;

    --title-font-family: 'Raleway', sans-serif;
    --body-font-family: 'Raleway', sans-serif;

    --default-box-shadow: 0px 0px 10px rgba(0, 0, 0, .5);

    --rok-mini-text: var(--default-white);

    --ql-title-color: var(--default-white);
    --ql-bg-opacity: .7;
    --ql-bg-hover-opacity: .9;

    --ph-title-color: var(--secondary-color);
    --ph-width: 20vw;
    --ph-title-font-size-mobile: 4vw;
}

.school-1 {
    --primary-color: #a8996a;
    --secondary-color: #001642;

    --primary-font-family: 'Raleway';

    --primary-rgb: 168, 153, 106;
    --secondary-rgb: 0, 22, 66;

    --default-white: #ffffff;
    --default-black: #000000;

    --title-font-family: 'Raleway';
    --body-font-family: 'Raleway';

    --default-box-shadow: 0px 0px 10px rgba(0, 0, 0, .5);

    --rok-mini-text: var(--default-white);

    --ql-title-color: var(--default-white);
    --ql-bg-opacity: .5;
    --ql-bg-hover-opacity: .7;

    --ph-title-color: var(--secondary-color);
    --ph-width: 30vw;
    --ph-title-font-size-mobile: 4vw;
}

.grid-lower-title-links {
    --grid-img-width: 24vw;
    --grid-title-color: var(--primary-color);
    --grid-bg-hover: rgba(var(--primary-rgb), .2);
    --grid-title-font-size-desktop: 1.5vw;
    --grid-box-shadow: 0px 0px 10px rgba(0, 0, 0, .25);
}

.grid-lower-title {
    --grid-img-width: 24vw;
    --grid-title-color: var(--primary-color);
    --grid-bg-hover: rgba(var(--primary-rgb), .2);
    --grid-title-font-size-desktop: 1.5vw;
    --grid-box-shadow: 0px 0px 10px rgba(0, 0, 0, .25);
}

.grid-dm {
    --grid-title-font-size-mobile: 5vw;
}

body {
    color: #333;
    font-family: 'Lato', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: .75rem 0;
    line-height: 1.3;
    font-weight: normal;
}

p {
    line-height: 1.3;
}

.page-header h1 {
    text-transform: none;
    font-size: 3rem;
}

h1 {
    color: #001642;
    font-size: 3.5rem;
    font-weight: bold;
    font-family: 'Raleway', sans-serif;
}

h2 {
    font-variant-caps: small-caps;
    color: #001642;
    font-size: 2.5rem;
    font-family: 'Raleway', sans-serif;
    font-weight: bold;
}

.page-header h2 {
    padding-bottom: 0.25rem;
    line-height: 2.5rem;
}

h3 {
    color: #001642;
    font-size: 2rem;
    border-bottom: 1px solid #cdbe79;
    line-height: 1.3;
    margin: 0 0 10px 0;
}

h3.lato {
    font-family: 'Lato', sans-serif;
}

h4 {
    color: #a8996a;
    font-size: 2rem;
}

h4.lato {
    font-family: 'Lato', sans-serif;
}

h5 {
    background: #a8996a;
    font-size: 1.75rem;
    color: white;
    border-radius: .2rem;
    padding: .5rem;
}

h6 {
    color: #001642;
    font-size: 1.5rem;
    text-transform: uppercase;
    font-weight: bold;
}

h6.mixed {
    text-transform: none;
}

a {
    color: #a8996a;
}

a:hover {
    color: black;
}

.outline-24 a {
    color: #082e80;
}

.login-button {
    color: var(--default-white) !important;
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
    h1 {font-size: 2.2rem;   }

    h2 {font-size: 1.75rem;   }

    h3 {font-size: 1.75rem;   }

    h4 {font-size: 1.75rem;   }
    h5 {font-size: 1.2rem;   }

    h6 {font-size: 1.2rem;   }

    p {
        font-size: 1rem;
        margin-bottom: 4px;
    }

    h1,  h2,  h3 {  line-height: 1.2;
    }

    h4,
    h5,
    h6,
    p {
        line-height: 1.1;
    }
}

@media only screen and (max-width: 767px) {
    h1 {
        font-size: 2.2rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    h3 {
        font-size: 1.75rem;
    }

    h4 {
        font-size: 1.75rem;
    }

    h5 {
        font-size: 1.2rem;
    }

    h6 {
        font-size: 1.2rem;
    }

    p {
        font-size: 1rem;
        margin-bottom: 4px;
    }

    h1,
    h2,
    h3 {
        line-height: 1.2;
    }

    h4,
    h5,
    h6,
    p {
        line-height: 1.1;
    }
}


.readon, .button,  .btn, p.readmore .btn, .sprocket-lists-portrait-container>li .sprocket-lists-portrait-item>a span,
.listentobutton.moduletable a {
    background: var(--primary-color);
    font-family: 'Lato', sans-serif;
}


/*************** HOMELAYOUT ***************/
.g-title {
    font-family: var(--title-font-family);
    color: var(--secondary-color);
}


/*************** OFFCANVAS ****************/
.g-offcanvas-toggle {
    color: #ffffff;
}

/*************** TOP **********************/

/*************** NAVIGATION ***************/
.parish-home.homelayout #g-navigation .g-grid>.g-block>.g-content {
    margin: 0;
    padding: 0;
}

.outline-17 #g-navigation .m-logo {
    width: 250px;
}

.outline-25 #g-navigation .m-logo {
    width: 250px;
}

.outline-24 #g-navigation .m-logo {
    width: 250px;
}

@media only screen and (min-width: 50.99rem) {
    .parish-home.homelayout #g-navigation {
        position: relative;
        height: 42vw !important;
        width: 100%;
    }

    .parish-home.homelayout #g-navigation>.g-grid {
        position: absolute;
    }

    .parish-home.homelayout #g-navigation>.g-grid:nth-child(2) {
        top: 0;
        left: 0;
        right: 0;
        height: 5vw;
        width: 100%;
        z-index: 12;
    }

    .parish-home.homelayout #g-navigation>.g-grid:nth-child(3) {
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        z-index: 10;
    }

    .parish-home.homelayout #g-navigation>.g-grid:nth-child(4) {
        top: 6vw;
        left: 30%;
        right: 0;
        z-index: 11;
        width: 70%;
        display: flex;
        flex-direction: column;
    }

    .parish-home.homelayout #g-navigation>.g-grid:nth-child(2) :is(.g-block, .g-block > .g-content, .g-main-nav, .g-toplevel) {
        height: 100%;
    }

    .parish-home.homelayout #g-navigation .m-logo img {
        height: 4vw;
        width: 350px;
    }

    .parish-home.homelayout #g-navigation>.g-grid:nth-child(4)>.g-block {
        flex: 1;
        width: 100%;
    }

    .parish-home.homelayout #g-navigation>.g-grid:nth-child(4)>.g-block:nth-child(2) {
        padding-top: 1vw;
        padding-right: 4vw;
    }

    .school-home.homelayout #g-navigation {
        position: relative;
        /* height: 42vw !important; */
        width: 100%;
    }

    .school-home.homelayout #g-navigation .g-container>.g-grid {
        /* position: absolute; */
    }

    .school-home.homelayout #g-navigation .g-container>.g-grid:nth-child(2) {
        top: 0;
        left: 0;
        right: 0;
        /* height: 5vw; */
        width: 100%;
        z-index: 12;
    }

    .school-home.homelayout #g-navigation .g-container>.g-grid:nth-child(3) {
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        z-index: 10;
    }

    .school-home.homelayout #g-navigation .g-container>.g-grid:nth-child(4) {
        top: 6vw;
        left: 30%;
        right: 0;
        z-index: 11;
        width: 70%;
        display: flex;
        flex-direction: column;
    }

    .school-home.homelayout #g-navigation .g-container>.g-grid:nth-child(2) :is(.g-block, .g-block > .g-content, .g-main-nav, .g-toplevel) {
        height: 100%;
    }

    .school-home.homelayout #g-navigation .m-logo img {
        height: 4vw;
    }

    .school-home.homelayout #g-navigation .g-container>.g-grid:nth-child(4)>.g-block {
        flex: 1;
        width: 100%;
    }

    .school-home.homelayout #g-navigation .g-container>.g-grid:nth-child(4)>.g-block:nth-child(2) {
        padding-top: 1vw;
        padding-right: 4vw;
    }


    .rok-mini-particle .rme-badge {
        box-shadow: 0px 0px 10px rgba(0, 0, 0, .5);
    }

    .rok-mini-particle .rme-items li {
        margin: 15px 15px;
    }

    .rok-mini-particle :is(.rme-title, .rme-date, .rme-time) {
        text-shadow: 0px 0px #000000;
    }
}

@media only screen and (max-width: 50.99rem) {
    .homelayout #g-navigation>.g-grid:nth-child(1) {
        height: 20vw;
    }

    .homelayout #g-navigation .g-logo img {
        width: 80%;
        margin: auto;
        display: grid;
        padding: 1rem 0;
    }

    .homelayout #g-navigation>.g-grid:nth-child(4) .button {
        background: var(--secondary-color);
        margin: 5vw 0;
    }
}


/*************** SLIDESHOW ****************/
/*************** HEADER *******************/
/*************** ABOVE ********************/
.parish-home.homelayout #g-above {
    padding: 2vw 0 !important;
}

.g-content-array .g-array-item .g-array-item-text {
    font-size: 1.1rem;
}

/*************** SHOWCASE *****************/
/*************** UTILITY ******************/



/*************** FEATURE ******************/
.homelayout #g-feature .submod-button .button {
    background: var(--secondary-color);
    padding: 1.2rem 3vw;
}

.homelayout #g-feature .submod-button .button:hover {
    background: #777;
}

@media only screen and (max-width: 50.99rem) {
    .ph-default-mobile .g-content-array>.g-grid>.g-block>.g-content {
        box-shadow: none;
    }
}
@media only screen and (min-width: 50.99rem) {
    .circle-links .g-blockcontent-subcontent-block {
        width: 14%;
    }
}

/*************** EXPANDED *****************/


@media only screen and (min-width: 50.99rem) {
    .sq-ph-2 .g-content-array>.g-grid {
        width: 25%;
        max-width: 25%;
    }
}


/*************** EXTENSION ****************/
#g-extension {
    padding: 2vw 0 !important;
}

/*#g-extension {position: fixed; bottom: 0; left: 0; right: 0; width: 100%; height: 6rem; z-index: 10; background: #001842; align-items: center; display: flex;}
#g-extension .g-grid {width: 100%;}
#g-extension .g-grid .g-block .g-content {padding: 0; margin: 0;}*/

/*************** BOTTOM *******************/
/*************** FOOTER *******************/
/*#g-container-footer {margin-bottom: 6rem;}*/
#g-footer a {
    color: #ffffff;
}

#g-footer .g-content-array {
    margin: 0;
}

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

@media only screen and (max-width: 50.99rem) {
    #g-footer>.g-container>.g-grid>.g-block {
        padding: 4vw;
    }

}

/*************** COPYRIGHT ****************/
/*************** MODULES ******************/
.moduletable .nav.menu,
.moduletable .unstyled {
    background: var(--primary-color);
}

.moduletable .nav.menu li.current.active a,
.moduletable .nav.menu li a:hover {
    color: var(--primary-color);
    background: var(--secondary-color);
}


/*************** SECTIONS *****************/



/*************** MOBILE *******************/


/*************** ADS **********************/

/*************** MOBILE NAVIGATION *******************/
/*
@media only screen and (max-width: 50.99rem) {
    .mobile-nav-bar {display: flex; flex-direction: row; height: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%;}
    .mobile-nav-bar div {flex: 1; display: flex; justify-content: center; align-items: center;}
    .mobile-nav-bar a {font-size: 2rem; display: flex; align-items: center; justify-content: center; flex-direction: column; color: #A99869; height: 100%; width: 100%;}
    .mobile-nav-bar p {margin: 0;}
}*/

/************ MINISTRY PAGE  ************/
.wtaministrylayout .item {
    display: flex;
    flex-direction: column;
}

.wtaministrylayout .item .pull-left.item-image {
    order: 2;
}

.wtaministrylayout .item .pull-left.item-image img {
    /*border-radius: 4px; box-shadow: 2px 2px 5px rgba(0,0,0,0.2);*/
    padding: 0.5rem 0;
}

.wtaministrylayout .item .page-header {
    order: 1;
}

.wtaministrylayout .item table {
    order: 3;
    margin: 0;
}

.wtaministrylayout .item p {
    order: 4;
}

.wtaministrylayout .pull-left.item-image {
    margin: 0;
}

.wtaministrylayout .button {
    font-size: 1rem;
    border: 1px solid #879382;
    border-radius: 25px;
    text-transform: uppercase;
    padding: 1rem 1.5rem;
}

.wtaministrylayout .button:hover {
    color: #879382;
    background: transparent;
}

.wtaministrylayout .item p {
    text-align: center;
}

.wtaministrylayout .page-header h2 {
    line-height: 1.2;
    font-weight: 400;
    font-size: 1.7rem;
    border-bottom: 0px solid #E2EDE9;
    margin: 3px 0 0 0;
    padding: 0;
    text-align: center;
    font-variant-caps: normal;
}

.wtaministrylayout .nav.menu a {
    word-break: normal;
}

.wtaministrylayout h2 a {
    word-break: normal;
}

@media only screen and (max-width: 767px) {
    .wtaministrylayout .item {
        padding-bottom: 30px;
    }

    .wtaministrylayout .item .pull-left.item-image img {
        text-align: center;
    }
}

.item-page .item-image {
    max-width: 40%;
    text-align: right;
    float: right;
    margin: 0 0 1.5rem 1.5rem;
    padding-right: 0;
    padding-left: 10px;
}

.bulletin-subscribe-padding {
    padding-left: 10vw !important;
    padding-right: 10vw !important;
}

/********************hide forgot password reset options in sidebar**********************/

#g-aside form div.userdata ul.unstyled {
    display: none;
}

.school-home .rok-mini-particle .rme-description {
    color: #001642
}

.welcome-block {
    padding: 80px 15px;
    background-color: #ffffff;
}

.welcome-block .g-array-item-text {
    max-width: 850px;
    margin: 0 auto;
}

.welcome-block h2 {
    color: var(--secondary-color);
    font-size: 3.2rem;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.welcome-block p {
    font-size: 1.15rem;
    line-height: 1.7;
    color: #444;
    margin-bottom: 25px;
}

.welcome-block .button {
    background-color: var(--secondary-color) !important;
    border-radius: 4px !important;
    padding: 14px 35px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.welcome-block .button:hover {
    background-color: var(--primary-color) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.welcome-block .button a {
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 700;
    text-transform: uppercase;
}

@media (max-width: 50.99rem) {
    .welcome-block {
        padding: 50px 20px;
    }

    .welcome-block h2 {
        font-size: 2.2rem;
    }

    .welcome-block p {
        font-size: 1.05rem;
    }
}

.welcome-block #contentarray-3942-particle,
#blockcontent-5636-particle,
#contentarray-9016-particle,
#custom-4580-particle,
.school-home #rok-mini>.g-content,
#custom-3251-particle {
    padding: 0;
    margin: 0;
}

.school-home #g-feature {
    padding: 2rem 0;
}

/*  */

/* Scoped Quicklinks Spacing Adjustments */
.school-home .ql-dm {
    width: 100% !important;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.school-home .ql-dm .g-blockcontent-subcontent {
    gap: 2rem;
}

.school-home .ql-dm .g-blockcontent-subcontent-block {
    width: auto !important;
    height: auto !important;
    flex: 0 1 auto !important;
}

/* Mobile Spacing */
@media (max-width: 50.99rem) {
    .school-home .ql-dm .g-blockcontent-subcontent {
        gap: 1rem;
        padding: 1rem;
        justify-content: center;
    }

    .school-home .ql-dm .g-blockcontent-subcontent-block {
        width: 47% !important;
    }
}

/* Scoped Footer Overrides */
.school-1 #g-container-footer {
    border-top: 6px solid var(--secondary-color);
}

.school-1 #g-container-footer footer#g-footer {
    padding: 50px 0;
    background: var(--primary-color) !important;
    color: var(--default-white) !important;
}

.school-1 #g-container-footer footer#g-footer .g-grid {
    justify-content: flex-start;
    align-items: center;
    text-align: left;
}

.school-1 #g-container-footer .g-block.size-15 {
    flex-basis: 15% !important;
    max-width: 15% !important;
    width: 15% !important;
}

.school-1 #g-container-footer .g-block.size-85 {
    flex-basis: 85% !important;
    max-width: 85% !important;
    width: 85% !important;
}

.school-1 #g-container-footer .g-logo img {
    max-width: 140px;
    height: auto;
    transition: none;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
}

.school-1 #g-container-footer .g-logo:hover img {
    transform: none;
}

.school-1 #g-container-footer .g-array-item-text p {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin: 0;
    flex-wrap: wrap;
    text-align: center;
}

.school-1 #g-container-footer .g-array-item-text a {
    color: var(--default-white) !important;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    padding: 10px 15px;
    border-radius: 6px;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0);
    border: 1px solid rgba(255, 255, 255, 0);
}

.school-1 #g-container-footer .g-array-item-text a:hover {
    color: var(--secondary-color) !important;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-3px);
}

/* Ensure visibility of empty links in snippet */
.school-1 #g-container-footer a[href="/school"]:empty::before {
    content: "School Home";
}

.school-1 #g-container-footer a[href*="contact-us"]:empty::before {
    content: "Contact Us";
}

.school-1 #g-container-footer a[href^="tel:"]:empty::before {
    content: "316-524-6585";
}

.school-1 #g-container-footer a[href^="mailto:"]:empty::before {
    content: "Email Us";
}

.school-1 #g-container-footer #g-copyright {
    background: rgba(0, 0, 0, 0.05) !important;
    background-color: #9d8c5b !important;
    padding: 25px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 0;
}

.school-1 #g-container-footer {
    position: relative;
}

.school-1 #g-container-footer .adminfootericon {
    position: absolute !important;
    bottom: 10px;
    right: 15px;
    inset: auto 15px 10px auto !important;
    text-align: right;
    width: auto !important;
    margin: 0 !important;
    height: auto !important;
    z-index: 105;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.school-1 #g-container-footer .adminfootericon br {
    display: none;
}

.school-1 #g-container-footer .adminfootericon a i {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 0.9rem;
    transition: color 0.3s ease, transform 0.3s ease;
}

.school-1 #g-container-footer .adminfootericon a:hover i {
    color: var(--secondary-color) !important;
    transform: scale(1.1);
}

.school-1 #g-container-footer .web-policy {
    display: contents !important;
}

.school-1 #g-container-footer .web-policy p {
    margin: 0 !important;
    line-height: 1 !important;
}

.school-1 #g-container-footer .web-policy a {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    text-decoration: none;
    display: block;
    margin-top: 4px;
}

.school-1 #g-container-footer .web-policy a:hover {
    color: var(--default-white) !important;
}

.school-1 #g-container-footer .web-policy a:empty::before {
    content: "Web Policy";
}

/* Mobile Footer Optimization */
@media (max-width: 50.99rem) {
    .school-1 #g-container-footer footer#g-footer {
        padding: 40px 15px;
    }

    .school-1 #g-container-footer footer#g-footer .g-grid {
        flex-direction: column;
        text-align: center;
    }

    .school-1 #g-container-footer .g-block.size-15,
    .school-1 #g-container-footer .g-block.size-85 {
        flex-basis: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .school-1 #g-container-footer .g-array-item-text p {
        flex-direction: column;
        gap: 15px;
        justify-content: center;
        font-size: 0;
        /* Hide the text node line separators */
    }

    .school-1 #g-container-footer .g-logo img {
        max-width: 120px;
        margin-bottom: 25px;
    }

    .school-1 #g-container-footer .g-array-item-text a {
        display: inline-block;
        width: auto;
        margin: 0 auto;
        background: transparent;
        padding: 5px 10px;
    }

    .school-1 #g-showcase {
        padding: 0 2rem !important;
    }
}

.school-home .g-array-item-text {
    margin: 0;
}

.welcome-block .g-array-item-text {
    margin: auto;
}


/* --- 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: #ffffff;
    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: row;
    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 (Tan Side Block) */
.j-calendar .cc-dateblockformat {
    background: #E8DDC5;
    width: 100px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 5px;
    border-left: 1px solid #C9A44C;
}

.j-calendar .cc-monthformat {
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    color: #2B2B2B;
    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: #2B2B2B;
    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: #F4EFE4;
}

/* Time/Duration (Matches top line in screenshot) */
.j-calendar .cc-timeofday {
    font-family: inherit;
    font-size: 1.15rem;
    font-weight: 700;
    color: #2B2B2B !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(43, 43, 43, 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;
}

/*  */

.homelayout #g-expanded {
	background: white url(../images/stories/template/schulte-background.jpg) 100% 100% no-repeat;
	background-size: 100%
}