/*FONTS ex: @import url('... */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&family=Tinos:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/******* SITE DEFAULTS *************/

html body {
--primary-color-rgb: 0,57,114;      /* Deep Royal Blue (#003972) */
--secondary-color-rgb: 117,28,28;   /* Sacred Red (#751c1c) */
--tertiary-color-rgb: 0,152,255;    /* Bright Sky Blue (#0098ff) */
--gray-color-rgb: 63,63,63;          /* Charcoal Gray (#3f3f3f) */
--background-color-rgb: 255,255,255; /* White */

--title-font-family: 'Tinos', serif;
--body-font-family: 'Source Sans 3', sans-serif;
	
--last-break-point: 50.99rem;
--site-max-width: 1920px;
--site-container-max-width: var(--site-max-width);
	
--slideshow-height: min(36vw, 810px);
--slideshow-width: min(100vw, 1920px);
	
--slideshow-height-mobile: 56.25vw;
--slideshow-width-mobile: 100vw;
	
--ql-num-boxes: 5;

--site-border-radius: 0.5rem;

--section-footer-bg: var(--primary-color);

--ql-toplinks-item-hover-transform-mobile: none;
--ql-toplinks-title-color-mobile: black;
--ql-toplinks-icon-color-mobile: var(--primary-color);
--ql-toplinks-icon-color-hover-mobile: var(--ql-toplinks-title-color-hover-mobile);
	
--side-menu-bg: var(--primary-color);
--side-menu-font-size-desktop: 1.1rem;
--side-menu-font-family: var(--body-font-family);
--side-menu-font-weight: normal;
--side-menu-bg-hover: var(--secondary-color);

}

/* navigation */

.ole-faithful.stock {
    --section-navigation-bg: var(--default-white);
    --main-menu-bg-color: var(--default-white);
    --main-menu-text-color: var(--default-black);
    --main-menu-text-color-hover: var(--primary-color);
    --main-menu-sub-bg: rgba(var(--primary-color-rgb),1);
    --main-menu-sub-bg-hover: var(--secondary-color);
    --navigation-social-item-color: var(--secondary-color);
    --navigation-social-item-color-hover: var(--primary-color);
    --navigation-menu-box-shadow: none;
    --ql-toplinks-title-color: var(--default-black);
    --ql-toplinks-title-color-hover: var(--default-white);
    --ql-toplinks-title-color-mobile: black;
    --ql-toplinks-item-background: rgba(255,255,255, 0);
    --ql-toplinks-item-background-hover: rgba(var(--primary-color-rgb), .8);
    --ql-toplinks-item-background-mobile: rgba(255,255,255, 0);
    --ql-toplinks-item-background-hover-mobile: rgba(var(--primary-color-rgb), .8);

    --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);

    --ql-toplinks-icon-color: var(--primary-color);
}

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

@media (max-width: 50.99rem) {
    .withmaxwidth.site-home :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;
    }
}

@media (min-width: 50.99rem) {
    .ole-faithful > .g-container > .g-grid:has(.ql-toplinks-studius) {
        padding: calc(min(1vw, 14.4px) + 0.5rem) calc(min(2vw, 28.8px) + 0.5rem) !important;
    }
}

/* slideshow */

.site-home {
    --section-slideshow-bg: var(--default-white);
    --mass-times-block-padding: calc(min(1vw, 14.4px) + 0.5rem) calc(min(2vw, 28.8px) + 0.5rem) !important;
}

.mass-times-block {
    border-radius: var(--site-border-radius);
    overflow: auto;
    background-color: white;
    box-shadow: var(--default-box-shadow);
    --mass-times-block-title-font-size: min(3vw, 43.2px);
    --mass-times-block-para-font-size: min(1.35vw, 20px);
}

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

.site-home .mass-times-block a.button {
    width: 100%;
    padding: 0.75rem 1rem;
    text-align: center;
    text-transform: capitalize;
    margin: auto;
    color: white;
    border-radius: var(--site-border-radius);
    font-size: 1.35rem;
    margin-top: 1rem;
    background-color: var(--secondary-color);
}

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

.site-home .mass-times-block p {
    color: black;
}

.site-home #g-slideshow .g-container {
    z-index: 10;
}

.site-home .g-swiper.swiper-container-horizontal>.swiper-pagination-bullets {
    left: 1rem;
    bottom: 2rem;
    transform: initial;
}

.site-home .modern-dots .g-swiper.swiper-container-horizontal>.swiper-pagination-bullets {
    padding-left: 0;
    padding-bottom: 0;
}

.site-home #g-slideshow::after {
    background-color: rgba(var(--primary-color-rgb), .85);
    backdrop-filter: blur(20px);
    z-index: 1;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    position: absolute;
    content: '';
}

.site-home .floatator .fullwidth-swiper{
    border: 2px solid white;
    border-radius: var(--site-border-radius);
}

.slideshow-spacing > .g-container > .g-grid > .g-block.size-100 {
    height: initial;
}

/* quicklinks */

#g-slideshow .ql-box-title {
    padding-top: 2rem !important;
    padding-bottom: 1.5rem !important;
}

@media only screen and (min-width: 50.99rem) {
    .ql-box-title {
        margin: 0;
        padding: 0;
    }

    .ql-box-title > .g-content {
        margin: 0;
        padding: 0;
    }
    .ql-box-title > .g-content > div {
        margin: 0;
        padding: 0;
    }
    .ql-box-title .g-blockcontent {
        margin: 0;
        padding: 0;
    }
    .ql-box-title .g-blockcontent-subcontent {
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: row;
        gap: min(3vw, 3rem);
    }
    .ql-box-title .g-blockcontent-subcontent-block {
        margin: 0;
        padding: 0;
        position: relative;
        border-radius: var(--site-border-radius);
        overflow: hidden;
        box-shadow: 4px 4px 8px rgba(0,0,0,.4);
        background: var(--default-white);
        transition: .3s all ease-in-out;
        border: 2px solid white;
    }
    .ql-box-title .g-blockcontent-subcontent-block:hover {
        background: #dee8ff;
    }
    .ql-box-title .g-blockcontent-subcontent-block-content {
        margin: 0;
        padding: 0;
        transition: .3s all ease-in-out;
    }
    .ql-box-title .g-blockcontent-subcontent-img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 16/9;
        object-position: center;
        object-fit: cover;
        transition: .3s all ease-in-out;
    }
    .ql-box-title .g-blockcontent-subcontent-title {
        margin: 0;
        padding: min(1.5vw, 1.5rem);
        display: flex;
        justify-content: left;
        align-items: center;
        transition: .3s all ease-in-out;
    }
    .ql-box-title .g-blockcontent-subcontent-title-text {
        margin: 0;
        padding: 0;
        text-align: center;
        color: var(--primary-color);
        font-family: var(--body-font-family);
        font-size: min(1.5vw, 1.5rem);
        font-weight: 400;
        text-transform: none;
        font-variant-caps: normal;
        line-height: 1;
        transition: .3s all ease-in-out;
    }
    .ql-box-title .g-blockcontent-buttons {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
    }
    .ql-box-title .g-blockcontent-buttons a {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
    }
}

@media only screen and (max-width: 50.99rem) {
    .ql-box-title {
        margin: 0;
        padding: 0;
    }
    .ql-box-title > .g-content {
        margin: 0;
        padding: 0;
    }
    .ql-box-title > .g-content > div {
        margin: 0;
        padding: 0;
    }
    .ql-box-title .g-blockcontent {
        margin: 0;
        padding: 0;
    }
    .ql-box-title .g-blockcontent-subcontent {
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1rem;
    }
    .ql-box-title .g-blockcontent-subcontent-block {
        margin: 0;
        padding: 0;
        position: relative;
        border-radius: var(--site-border-radius);
        overflow: hidden;
        box-shadow: 4px 4px 8px rgba(0,0,0,.4);
        background: var(--default-white);
        transition: .3s all ease-in-out;
        border: 2px solid white;
        flex: 1;
        min-width: calc(50% - .5rem);
        max-width: calc(50% - .5rem);
    }
    .ql-box-title .g-blockcontent-subcontent-block:hover {
        background: #dee8ff;
    }
    .ql-box-title .g-blockcontent-subcontent-block-content {
        margin: 0;
        padding: 0;
        transition: .3s all ease-in-out;
    }
    .ql-box-title .g-blockcontent-subcontent-img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 16/9;
        object-position: center;
        object-fit: cover;
        transition: .3s all ease-in-out;
    }
    .ql-box-title .g-blockcontent-subcontent-title {
        margin: 0;
        padding: 1rem;
        display: flex;
        justify-content: left;
        align-items: center;
        transition: .3s all ease-in-out;
    }
    .ql-box-title .g-blockcontent-subcontent-title-text {
        margin: 0;
        padding: 0;
        text-align: center;
        color: var(--primary-color);
        font-family: var(--body-font-family);
        font-size: 4vw;
        font-weight: 400;
        text-transform: none;
        font-variant-caps: normal;
        line-height: 1;
        transition: .3s all ease-in-out;
    }
    .ql-box-title .g-blockcontent-buttons {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
    }
    .ql-box-title .g-blockcontent-buttons a {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
    }
}

/*  */

/* main */

.site-home #g-container-main {
    padding: calc(min(1vw, 14.4px) + 2.5rem) calc(min(2vw, 28.8px) + 0.5rem) !important;
}

.red-line-heading {
    display: flex;
    align-items: center; /* Keeps the bar centered vertically with the text */
    margin-bottom: 2rem !important;
    margin-top: 0 !important;
}

.site-home #g-container-main {
    background: url('/images/template/fluer-de-lis.svg');
    background-size: 50%;
    background-position: bottom right;
    position: relative;
    background-repeat: no-repeat;
}

.site-home #g-container-main::after {
    content: '';
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.90);
    top: 0;
    right: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
}

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

@media (max-width: 50.99rem) {
    .red-line-heading {
        margin-bottom: 2rem;
    }

    .helpful-links {
        padding: 0;
    }
}

.red-line-heading::before {
    content: "";
    display: inline-block;
    width: 0.25em;             /* Thickness of the bar (adjust as needed) */
    height: 1em;               /* Height of the bar relative to font size */
    background-color: var(--secondary-color); /* Dark red color */
    margin-right: 0.5em;       /* Space between the bar and the text */
    flex-shrink: 0;            /* Prevents bar from shrinking on small screens */
}

.facebook-title .red-line-heading {
    max-width: 375px;
    margin: auto;
}

.site-home #g-mainbar {
    padding: 0 2rem;
}

.site-home #g-mainbar .g-joomla-articles {
    gap: 0 !important;
}

.site-home #g-mainbar .g-joomla-articles > .g-grid {
    padding: 1.25rem 0;
    border-top: 1px solid black;
}

.site-home #g-mainbar .grid-articles {
    --grid-scale-amount: 0.98;
}

.site-home #g-mainbar .g-joomla-articles > .g-grid:last-child {
    border-bottom: 1px solid black;
}

.site-home #g-container-main > div > div > div.g-block.size-15 {
    display: grid;
    align-items: center;
}

.news-button a {
    background-color: var(--secondary-color);
}

/* expanded */

.site-home #g-expanded .mission-statement {
    padding: calc(min(1vw, 14.4px) + 2rem) calc(min(2vw, 28.8px) + 0.5rem) !important;
    position: relative;
    background: url('/images/template/bg/bg-expanded.jpg') no-repeat center center;
    background-size: cover;
}

.site-home #g-expanded .mission-statement :is(h1,h2,h3,h4,h5,h6,p,a,div) {
    color: white;
}

.site-home #g-expanded .mission-statement::after {
    background-color: rgba(var(--primary-color-rgb), .85);
    backdrop-filter: blur(7px);
    z-index: 1;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    position: absolute;
    content: '';
}

.site-home #g-expanded .mission-statement .g-joomla-articles {
    z-index: 10;
    position: relative;
}

/* calendar */

.site-home #g-expanded .g-grid:has(.calendar-title) {
    padding: calc(min(2vw, 28.8px) + 0.5rem) calc(min(2vw, 28.8px) + 0.5rem) 0 calc(min(2vw, 28.8px) + 0.5rem);
}

.site-home #g-expanded .g-grid:has(.calendar-widget) {
    padding: 0 calc(min(2vw, 28.8px) + 0.5rem) 1rem calc(min(2vw, 28.8px) + 0.5rem); 
}

.site-home #g-expanded .g-grid:has(.calendar-button) {
    padding: 0 calc(min(2vw, 28.8px) + 0.5rem) calc(min(2vw, 28.8px) + 0.5rem) calc(min(2vw, 28.8px) + 0.5rem);
}

.calendar-title h1 {
    line-height: 1;
    margin-top: 0;
}

/*  */

/* extension */

.site-home #g-extension {
    padding: calc(min(1vw, 14.4px) + 0.5rem) calc(min(2vw, 28.8px) + 0.5rem) !important;
    position: relative;
}

.site-home #g-extension {
    padding: calc(min(1vw, 14.4px) + 2rem) calc(min(2vw, 28.8px) + 0.5rem) !important;
    position: relative;
    background: url('/images/template/bg/bg-extension.jpg') no-repeat top center;
    background-size: cover;
}

.site-home #g-extension .g-container {
    z-index: 10;
}

.site-home #g-extension::after {
    background-color: rgba(var(--primary-color-rgb), .85);
    backdrop-filter: blur(7px);
    z-index: 1;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    position: absolute;
    content: '';
}

.site-home #g-extension .helpful-title h1 {
    color: white;
}

.helpful-links h4 span {
    color: white !important;
    text-align: center;
    background-color: var(--secondary-color);
    padding: 1rem !important;
    width: 100%;
    border-radius: var(--site-border-radius);
    text-transform: capitalize;
}

.helpful-links h4 {
    color: white !important;
    padding: 0 !important;
    padding-top: 0.75rem !important;
    text-transform: capitalize;
}

.helpful-links .g-blockcontent-subcontent-block {
    border: 0.75rem solid white;
}

.helpful-links img {
    border-radius: var(--site-border-radius);
}

/*  */

/* Footer */

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

address {
    margin-bottom: 0 !important;
    font-weight: 400 !important;
}

#g-footer :is(h1,h2,h3,h4,h5,h6) {
    border-bottom: none;
    font-weight: bold !important;
}

/* --- Grid Layout --- */
#g-footer .g-footer-inner {
  display: grid;
  max-width: 1900px;
  margin: 0 auto;
  gap: 3rem;
  grid-template-columns: 2fr 1.2fr 1fr;
  width: 100%;
}

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

/* --- Breakpoint --- */
@media (max-width: 50.99rem) {
  #g-footer .g-footer-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  #g-footer .g-contact-section {
    flex-direction: column;
  }

  #g-footer>.g-container>.g-grid>.g-block {
    padding: 2rem 10%;
  }
}

/* --- Typography & Resets --- */
#g-footer h2,
#g-footer h3 {
  font-weight: normal;
  margin-top: 0;
  line-height: 1.2;
}

#g-footer h3 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: rgba(255, 255, 255, 0.9);
}

#g-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#g-footer a {
  color: #fff;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

#g-footer a:hover {
  opacity: 0.7;
}

/* --- Specific Widget Styles --- */

/* Widget 1: Contact */
#g-footer .g-contact-section {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  justify-content: center;
}

#g-footer .g-logo {
  flex-shrink: 0;
  width: 100px;
  /* Removed fixed height so it scales naturally, but you can add it back if needed */
}

/* Ensures the image fits the container fluidly */
#g-footer .g-logo img {
  width: 100%;
  height: auto;
  display: block;
}

#g-footer .g-contact-details h2 {
  font-size: 2.1rem;
  margin-bottom: 1rem;
}

#g-footer address {
  font-style: normal;
  font-size: 1.2rem;
  line-height: 1.6;
  /* opacity: 0.9; */
}

/* Widget 2: Hours */
#g-footer .g-hours-section li {
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
  /* opacity: 0.9; */
}

#g-footer .g-hours-section strong {
  font-weight: 400;
}

/* Widget 3: Links */
#g-footer .g-links-section li {
  margin-bottom: 0.8rem;
}

#g-footer .g-links-section a {
  text-transform: uppercase;
  /* font-weight: 700; */
  font-size: 1.2rem;
  /* letter-spacing: 0.05em; */
  /* opacity: 0.9; */
}

/*  */

.site-home #g-footer {
    background: url('/images/template/bg/bg-footer.jpg') no-repeat center center;
    background-size: cover;
    --section-footer-bg: transparent;
}

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

.site-home #g-footer .g-container {
    z-index: 10;
    position: relative;
}

.site-home #g-footer::after {
    background-color: rgba(var(--primary-color-rgb), .90);
    backdrop-filter: blur(5px);
    z-index: 1;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    position: absolute;
    content: '';
}

/*  */

/* =============================================================
  Calendar Widget Styles
  Scoped under .horizontal-cards
  =============================================================
*/

/* --- Main Container --- */
.horizontal-cards .rokminievents3 {
  position: relative;
  width: 100%;
}

/* --- Card List (Flex Container) --- */
.horizontal-cards .rme-items {
  display: flex;
  /* flex-wrap: nowrap; */
  gap: 15px;
  list-style-type: none;
  padding: 0;
  /* Add margin to create "gutters" for the arrows */
  margin: 0 45px; 
  width: auto; /* Allow margin to control width */
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
}

/* --- Individual Event Card --- */
.horizontal-cards .rme-item {
  background-color: #363636;
  border: none;
  border-radius: 8px;
  padding: 20px;
  flex: 1 1 0;
  min-width: 160px;
  display: block;
  width: auto;
  height: auto;
  text-align: left;
}

/* --- Date "Badge" Area --- */
.horizontal-cards .rme-badge {
  float: none;
  background-color: transparent;
  width: auto;
  height: auto;
  margin: 0 0 10px 0;
  text-align: left;
  display: flex;
  flex-direction: column-reverse;
}

/* --- Date - Month ("JUN") --- */
.horizontal-cards .rme-month {
  display: block;
  font-family: var(--title-font-family);
  font-size: 1.1rem;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  line-height: 1.2;
  padding: 0;
}

/* --- Date - Day ("08") --- */
.horizontal-cards .rme-day {
  display: block;
  font-size: 2.5rem;
  font-family: var(--title-font-family);
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
  padding: 0;
}

/* --- Description Area (Time/Title) --- */
.horizontal-cards .rme-description {
  background: none;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
}

/* --- Time ("6:30PM - 8:30PM") --- */
.horizontal-cards .rme-time {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.4;
  margin-bottom: 5px;
}

/* --- Title ("Parish Event") --- */
.horizontal-cards .rme-title {
  display: block;
  font-size: 0.9rem;
  font-weight: 400;
  color: #ffffff;
  text-decoration: none;
  line-height: 1.4;
}

/* --- Hide unused details p tag --- */
.horizontal-cards .rme-details {
  display: none;
}

/* =============================================================
  Arrows (Font Awesome)
  =============================================================
*/

/* Neutralize the timeline bar */
.horizontal-cards .rme-timeline {
  position: static;
  height: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
}

/* Style the arrows */
.horizontal-cards .rme-arrow {
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%); 
  /* Light grey background */
  background: rgba(0, 0, 0, 0.35);
  color: #ffffff !important;
  border: none;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  /* Line-height must match height for vertical centering */
  line-height: 35px; 
  text-align: center;
  cursor: pointer;
  z-index: 10;
  bottom: auto;
  margin: 0;
}

/* Add our Font Awesome icon */
.horizontal-cards .rme-arrow::before {
  /* Use a Font Awesome font stack */
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", sans-serif;
  font-weight: 900; /* This selects the "solid" icon style */
  font-size: 22px; /* Icon size */
  color: #ffffff;
  
  /* These are required for FA to render correctly */
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
}

/* Position arrows in the "gutter" we made with margin */
.horizontal-cards .rme-arrow.left {
  left: 5px; 
  right: auto;
  font-size: 0;
}

/* Font Awesome Unicode for "angle-left" */
.horizontal-cards .rme-arrow.left::before {
  content: '\f104';
}

.horizontal-cards .rme-arrow.right {
  right: 5px; 
  left: auto;
  font-size: 0;
}

/* Font Awesome Unicode for "angle-right" */
.horizontal-cards .rme-arrow.right::before {
  content: '\f105';
}

/* =============================================================
  Mobile Breakpoint
  Breakpoint: 50.99rem (approx 815px)
  =============================================================
*/
@media (max-width: 50.99rem) {
  
  .horizontal-cards .rme-items {
    /* Change to vertical stacking */
    flex-direction: column;
    /* Add vertical gap */
    gap: 1rem;
    /* Remove gutter margin on mobile */
    margin: 0;
    /* Remove horizontal scroll */
    overflow-x: visible; 
    scroll-snap-type: none;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  
  .horizontal-cards .rme-items::-webkit-scrollbar {
    display: none;
  }

  .horizontal-cards .rme-item {
    /* Override desktop flex properties.
       This sets grow/shrink to 0 and basis (height) to auto.
       The item will then stretch horizontally by default. */
    flex: 0 0 auto; 
    scroll-snap-align: none; /* Remove scroll-snap */
    margin: 0;
  }
  
  .horizontal-cards .rme-arrow {
    display: none;
  }
  
  .horizontal-cards .rokminievents3 {
    padding: 0;
  }
}

@media (max-width: 50.99rem) {
    #g-bottom {
        padding: 2rem 0 !important;
    }

    .red-line-heading {
        font-size: 3rem;
    }

    .site-home #g-mainbar {
        padding: 2rem 0.5rem !important;
    }

    .news-button {
        padding: 1rem 0;
    }

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

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

    .site-home #g-container-main > div > div > div.g-block:nth-child(1) {
        order: 2;
    }

    .site-home #g-container-main > div > div > div.g-block:nth-child(2) {
        order: 1;
    }

    #g-navigation img {
        padding-top: 1rem;
    }

    .ql-toplinks-studius {
        padding-bottom: 0 !important;
    }
}

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

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

.helpful-links .g-block.g-blockcontent-subcontent-block.g-blockcontent-subcontent-block-none:hover {
    transform: scale(0.98);
}

/*  */

/* * -------------------------------------
 * New Title Styles (Your Request)
 * ---------------------------------------
 */

/* 1. Make the h1 a flex container */
.mission-statement .mission-title h1 {
  display: flex;
  justify-content: center; /* Center the entire group (line-text-line) */
  align-items: center; /* Vertically align the lines with the text */
  font-size: 56px;
  font-weight: bold; /* Make text bold as seen in the image */
  color: #ffffff;
  line-height: 1.3;
  margin-top: 0 !important;
}

/* 2. Create the horizontal lines */
.mission-statement .mission-title h1::before,
.mission-statement .mission-title h1::after {
  content: ''; /* Required to display pseudo-elements */
  display: block;
  height: 1px; /* Line thickness */
  width: 80px; /* Line length (adjust as needed) */
  background-color: #ffffff; /* Line color */
}

/* 3. Add spacing between lines and text */
.mission-statement .mission-title h1::before {
  margin-right: 30px; /* Space on the left of the text */
}

.mission-statement .mission-title h1::after {
  margin-left: 30px; /* Space on the right of the text */
}

/* * ---------------------------------------
 * Optional: Styles for the description text
 * (From your original inline styles)
 * ---------------------------------------
 */

.mission-statement .mission-text p {
  font-size: 22px;
  line-height: 1.3; /* 22.88px / 17.6px */
}

.mission-statement .mission-text p em {
  font-style: italic;
}

/* * ---------------------------------------
 * NEW: Mobile Responsive Styles
 * ---------------------------------------
 */
@media (max-width: 50.99rem) { /* Approx 816px */

  .mission-statement .mission-title h1 {
    /* Reduce font size for smaller screens */
    font-size: 32px; 
    line-height: 1.4;
  }

  .mission-statement .mission-title h1::before,
  .mission-statement .mission-title h1::after {
    /* Shorter lines for mobile */
    width: 40px; 
  }

  .mission-statement .mission-title h1::before {
    margin-right: 20px; /* Reduce space */
  }

  .mission-statement .mission-title h1::after {
    margin-left: 20px; /* Reduce space */
  }

  /* Reduce description text size */
  .mission-statement .mission-text p {
    font-size: 16px; 
  }
}

.news-button a.button {
    padding: 1rem 2rem;
    font-size: clamp(1rem, 1.3vw, 2rem);
}

.side-menu-particle {
  margin-bottom: 2rem !important;
}

/* --- Layout --- */
/* Switch container to a vertical list column */
.grid-list .g-content-array {
    display: flex;
    flex-direction: column;
    row-gap: 0;
    padding: 0;
}

/* Force individual grid wrappers to take full width so they stack */
.grid-list .g-grid {
    width: 100%;
    max-width: 100%;
    flex-basis: auto;
    height: auto !important;
    block-size: auto !important;
}

/* --- Item Styling --- */
/* The main list item container */
.grid-list .g-array-item {
    position: relative;
    padding: 1rem 0; /* Spacing above and below text */
    /* Create the separator line defined in the image */
    border-bottom: 2px solid rgb(0, 57, 114);
    background-color: transparent;
    /* Ensure smooth transition for hover effects */
    transition: background-color 0.2s ease, transform 0.2s ease;

    /* Reset styles that might bleed in from base theme card styles */
    border-top: none;
    border-left: none;
    border-right: none;
    box-shadow: none;
    border-radius: 0;
}

/* Hover Effect */
.grid-list .g-array-item:hover {
    /* Subtle background color change */
    background-color: rgba(0, 57, 114, 0.05);
    /* STOP SCALE EFFECT: Override the base theme's scaling animation */
    transform: none !important;
}

/* --- Typography & Content --- */
/* Title container cleanup */
.grid-list .g-item-title {
    border: none !important; /* Removes the box border from base CSS */
    margin: 0;
    padding: 0;
}

/* Link styling */
.grid-list .g-item-title a {
    text-decoration: none;
    color: rgb(0, 57, 114);
    font-weight: 500; /* Optional: gives it a bit more weight like the image */
}

/* NO UNDERLINE ON HOVER: Explicitly ensure text doesn't underline */
.grid-list .g-item-title a:hover {
    text-decoration: none;
}

/* --- Clickable Area --- */
/* Make the absolute full row clickable by stretching the link's pseudo-element */
.grid-list .g-item-title a::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

/* --- Hiding Elements --- */
/* Hide description text to match image */
.grid-list .g-array-item-text {
    display: none !important;
}

/* Hide images to match image */
.grid-list .g-array-item-image {
    display: none !important;
}

/*  */

.modern-alert {
    background-color: white;
}

.modern-alert :is(h1,h2,h3,h4,h5,h6,p,a,div) {
    color: black;
}

#modernAlert {
    border-radius: 1rem;
}

.modern-alert .g-array-item :is(h1, h2, h3, h4, h5, h6, p, a) {
    color: black;
}