/* =====================================================================
   St. Bonaventure — Home Preview 2026 (Ticket 36789)
   Loaded ONLY on Gantry outline 70 "#Home Preview 2026" (menu item 234).
   Every rule is scoped to html body.site-home so it beats override.css.
   v8 layout: quicklinks > news + sponsor ads > Facebook band >
              bulletins + Faith & Helpful Links (feeds) > footer.
   ===================================================================== */

html body.site-home {
    --hp-red: var(--primary-color, #950f03);
    --hp-blue: var(--secondary-color, #003e72);
    --hp-gold: var(--tertiary-color, #e5ab67);
    --hp-cream: #f7f3ec;
    --hp-radius: 1rem;
    --hp-shadow: 0 .5rem 1.5rem rgba(0, 30, 60, .12);
    --hp-shadow-lift: 0 .75rem 1.75rem rgba(0, 30, 60, .17);
    --hp-lift: -3px;
    --hp-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Shared section heading (Seas-style wide caps) ---------- */
html body.site-home #g-above .hp-news .g-title,
html body.site-home .hp-faith-title .g-title,
html body.site-home .widget-title .g-title {
    margin: 0;
    padding: 0;
    text-align: center;
    font-family: var(--title-font-family);
    font-weight: 700;
    font-size: clamp(1.6rem, 3vw, 2.6rem);
    line-height: 1.15;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-variant-caps: normal;
    color: var(--hp-blue) !important;
}
html body.site-home #g-above .hp-news .g-title:after,
html body.site-home .hp-faith-title .g-title:after,
html body.site-home .widget-title .g-title:after {
    content: '';
    display: block;
    width: 4rem;
    height: 3px;
    margin: .75rem auto 0;
    background: var(--hp-gold);
    border-radius: 3px;
}

/* ---------- Shared pill button ---------- */
html body.site-home #g-above .hp-news .g-array-item-read-more .button,
html body.site-home #g-above .news-button .button,
html body.site-home .widget-wrapper .widget-button .button,
html body.site-home .hp-feed-more {
    display: inline-block;
    margin: 0;
    padding: .7rem 1.6rem;
    border: 0;
    border-radius: 999px;
    background: var(--hp-red);
    color: #fff;
    font-family: var(--title-font-family);
    font-size: 1rem;
    line-height: 1.2;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
}
html body.site-home #g-above .hp-news .g-array-item-read-more .button,
html body.site-home .hp-feed-more {
    padding: .55rem 1.25rem;
    font-size: .85rem;
}

/* =====================================================================
   QUICKLINKS (#g-header) — icon above label
   ===================================================================== */
html body.site-home #g-header {
    background: var(--hp-cream);
}
html body.site-home .hp-ql .g-blockcontent-subcontent-block {
    background: #fff;
    border: 0;
    border-top: 4px solid var(--hp-blue);
    border-radius: var(--hp-radius);
    box-shadow: var(--hp-shadow);
}
html body.site-home .hp-ql .g-blockcontent-subcontent-block-content {
    flex-direction: column;
    gap: .6rem;
}
html body.site-home .hp-ql .g-blockcontent-subcontent-title-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: rgba(0, 62, 114, .1);
    color: var(--hp-blue);
    font-size: 1.5rem;
}
html body.site-home .hp-ql .g-blockcontent-subcontent-title,
html body.site-home .hp-ql .g-blockcontent-subcontent-title-text {
    color: var(--hp-blue);
}
/* Give Online — white card, gold accent */
html body.site-home .hp-ql .g-blockcontent-subcontent-block.ql-give {
    background: #fff;
    border-top-color: var(--hp-gold);
    box-shadow: var(--hp-shadow), inset 0 0 0 2px rgba(229, 171, 103, .55);
}
html body.site-home .hp-ql .ql-give .g-blockcontent-subcontent-title-icon {
    background: rgba(229, 171, 103, .3);
    color: var(--hp-red);
}
html body.site-home .hp-ql .ql-give .g-blockcontent-subcontent-title,
html body.site-home .hp-ql .ql-give .g-blockcontent-subcontent-title-text {
    color: var(--hp-red);
}
@media only screen and (min-width: 50.99rem) {
    html body.site-home #g-header > .g-container {
        padding: min(3vw, 3rem) min(4vw, 4rem) !important;
    }
    html body.site-home .hp-ql .g-blockcontent-subcontent {
        align-items: stretch;
    }
    html body.site-home .hp-ql .g-blockcontent-subcontent-block {
        padding: min(2vw, 2rem) min(1vw, 1rem);
    }
    html body.site-home .hp-ql .g-blockcontent-subcontent-block.ql-give {
        flex: 1.25;
    }
    html body.site-home .hp-ql .ql-give .g-blockcontent-subcontent-title-icon {
        width: 4.25rem;
        height: 4.25rem;
        font-size: 1.9rem;
    }
    html body.site-home .hp-ql .ql-give .g-blockcontent-subcontent-title-text {
        font-size: min(1.8vw, 1.8rem);
    }
}
@media only screen and (max-width: 50.99rem) {
    html body.site-home #g-header > .g-container {
        padding: 2rem 1rem !important;
    }
    /* Two quicklinks per row; Give Online spans the full row */
    html body.site-home .hp-ql .g-blockcontent-subcontent {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .75rem;
    }
    html body.site-home .hp-ql .g-blockcontent-subcontent-block {
        width: auto;
        max-width: none;
        margin: 0;
        padding: 1.25rem .75rem;
    }
    html body.site-home .hp-ql .g-blockcontent-subcontent-block.ql-give {
        grid-column: 1 / -1;
    }
    html body.site-home .hp-ql .g-blockcontent-subcontent-title-text {
        font-size: 1.15rem;
    }
}

/* =====================================================================
   NEWS & EVENTS + SPONSOR ADS (#g-above)
   Background photo on a parallax layer (::before), white veil (::after).
   ===================================================================== */
html body.site-home #g-above {
    position: relative;
    overflow: hidden;
    background: none;
    isolation: isolate;
}
html body.site-home #g-above:before {
    content: '';
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: 0;
    right: 0;
    background: url('/images/template/bg-news-events.jpg') 50% 50% / cover no-repeat;
    transform: translate3d(0, var(--hp-par, 0px), 0);
    will-change: transform;
    z-index: 0;
}
html body.site-home #g-above:after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .88);
    z-index: 1;
}
html body.site-home #g-above > .g-container {
    position: relative;
    z-index: 2;
}
html body.site-home #g-above > .g-container > .g-grid:first-child {
    align-items: flex-start;
    gap: min(2.5vw, 2.5rem);
    flex-wrap: nowrap;
}
html body.site-home #g-above .hp-news > .g-content {
    display: flex;
    flex-direction: column;
    gap: min(2.5vw, 2.5rem);
    margin: 0;
    padding: 0;
}

/* News cards: one item per .g-grid (contentarray columns "1") */
html body.site-home #g-above .hp-news .g-content-array {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: min(2vw, 1.75rem);
}
html body.site-home #g-above .hp-news .g-content-array > .g-grid {
    flex: 1 1 0;
    max-width: 26rem;
    margin: 0;
    padding: 0 !important;
    align-items: stretch !important;
    background: transparent !important;
    border: 0;
    border-radius: var(--hp-radius);
    box-shadow: none !important;
    transform: none !important;
}
html body.site-home #g-above .hp-news .g-content-array > .g-grid > .g-block,
html body.site-home #g-above .hp-news .g-content-array > .g-grid > .g-block > .g-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    margin: 0;
    padding: 0;
}
html body.site-home #g-above .hp-news .g-array-item {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin: 0;
    padding: 0;
    background: #fff;
    border-radius: var(--hp-radius);
    box-shadow: var(--hp-shadow);
    overflow: hidden;
}
html body.site-home #g-above .hp-news .g-array-item-image {
    margin: 0;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}
html body.site-home #g-above .hp-news .g-array-item-image a {
    display: block;
    height: 100%;
}
html body.site-home #g-above .hp-news .g-array-item-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
html body.site-home #g-above .hp-news .g-array-item-title,
html body.site-home #g-above .hp-news .g-array-item-text,
html body.site-home #g-above .hp-news .g-array-item-details,
html body.site-home #g-above .hp-news .g-array-item-read-more {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}
html body.site-home #g-above .hp-news .g-array-item-title {
    margin: 1.1rem 0 .4rem;
    font-family: var(--title-font-family);
    font-size: 1.3rem;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
html body.site-home #g-above .hp-news .g-array-item-title a {
    color: var(--hp-blue);
}
/* Three lines of intro on every card, so Read More sits close under it */
html body.site-home #g-above .hp-news .g-array-item-text {
    flex: 0 0 auto;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 1rem;
    line-height: 1.55;
    color: #333;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
html body.site-home #g-above .hp-news .g-array-item-read-more {
    order: 4;
    position: static;
    opacity: 1;
    width: auto;
    height: auto;
    margin: auto 0 0;
    padding-top: .9rem;
    padding-bottom: 1.25rem;
}
html body.site-home #g-above .hp-news .g-array-item-read-more a.button {
    position: static;
    opacity: 1;
    width: auto;
    height: auto;
}
html body.site-home #g-above .news-button > .g-content {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}

/* Sponsor ads beside the news */
html body.site-home #g-above .side-ads {
    align-self: stretch;
}
html body.site-home #g-above .side-ads > .g-content {
    margin: 0;
    padding: 0;
}
html body.site-home #g-above .side-ads .moduletable {
    margin: 0;
    padding: 1.25rem 1rem 1.5rem;
    background: #fff;
    border-radius: var(--hp-radius);
    border-top: 4px solid var(--hp-gold);
    box-shadow: var(--hp-shadow);
    text-align: center;
}
html body.site-home #g-above .side-ads .moduletable:before {
    content: 'Thank You to Our Sponsors';
    display: block;
    margin: 0 0 1rem;
    font-family: var(--title-font-family);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--hp-blue);
}
html body.site-home #g-above .side-ads .table-container,
html body.site-home #g-above .side-ads table {
    width: auto;
    margin: 0 auto;
}
html body.site-home #g-above .side-ads tbody {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
}
html body.site-home #g-above .side-ads tr {
    display: block;
}
html body.site-home #g-above .side-ads td {
    display: block;
    padding: 0 !important;
}
html body.site-home #g-above .side-ads img {
    border-radius: .35rem;
}

@media only screen and (min-width: 50.99rem) {
    html body.site-home #g-above > .g-container {
        padding: min(5vw, 5rem) min(4vw, 4rem) !important;
    }
}
/* Tablet and phone: news full width, button, then the ads in a row */
@media only screen and (max-width: 63.99rem) {
    html body.site-home #g-above > .g-container {
        display: flex;
        flex-direction: column;
        gap: min(4vw, 2.5rem);
    }
    html body.site-home #g-above > .g-container > .g-grid:first-child {
        display: contents;
    }
    html body.site-home #g-above .g-block.hp-news {
        order: 1;
        flex: none;
        width: 100%;
        max-width: 100%;
    }
    html body.site-home #g-above > .g-container > .g-grid:not(:first-child) {
        order: 2;
    }
    html body.site-home #g-above .g-block.side-ads {
        order: 3;
        flex: none;
        width: 100%;
        max-width: 100%;
    }
}
@media only screen and (max-width: 50.99rem) {
    html body.site-home #g-above > .g-container {
        padding: 2.5rem 1rem !important;
    }
    html body.site-home #g-above .hp-news .g-content-array {
        flex-direction: column;
        align-items: stretch;
    }
    html body.site-home #g-above .hp-news .g-content-array > .g-grid {
        flex: none;
        max-width: none;
    }
}

/* =====================================================================
   FACEBOOK BAND (#g-feature) — blue band, faint photo at low opacity
   ===================================================================== */
html body.site-home #g-feature {
    display: block;
    position: relative;
    background: var(--hp-blue);
}
html body.site-home #g-feature:before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('/images/template/bg-news-events.jpg') 50% 50% / cover no-repeat;
    opacity: .12;
    z-index: 1;
}
html body.site-home #g-feature > .g-container {
    position: relative;
    z-index: 2;
}
html body.site-home #g-feature .facebook-widget-container {
    flex: 0 1 46rem;
    max-width: 46rem;
    margin: 0 auto;
}
html body.site-home #g-feature .facebook-widget-container .g-content,
html body.site-home #g-feature .facebook-widget-container .g-grid,
html body.site-home #g-feature .facebook-widget-container .g-block,
html body.site-home #g-feature .facebook-widget-container .g-array-item,
html body.site-home #g-feature .facebook-widget-container .g-array-item-text {
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}
html body.site-home #g-feature .widget-wrapper {
    border-top-color: var(--hp-gold);
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .3);
}
@media only screen and (min-width: 50.99rem) {
    html body.site-home #g-feature > .g-container {
        padding: min(5vw, 5rem) min(4vw, 4rem) !important;
    }
}
@media only screen and (max-width: 50.99rem) {
    html body.site-home #g-feature > .g-container {
        padding: 2.5rem 1rem !important;
    }
}

/* =====================================================================
   UNIFORM WIDGET CARDS — Facebook, Bulletins, Faith & Helpful Links
   ===================================================================== */
html body.site-home .widget-wrapper,
html body.site-home .hp-faith > .g-content {
    height: 820px !important;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin: 0;
    padding: 1.75rem 1.5rem;
    background: #fff;
    border-radius: var(--hp-radius);
    border-top: 4px solid var(--hp-red);
    box-shadow: var(--hp-shadow);
    box-sizing: border-box;
}
html body.site-home .widget-wrapper .widget-feed {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    border-radius: calc(var(--hp-radius) * .6);
    box-shadow: none;
    background: #fafafa;
}
html body.site-home .facebook-widget-wrapper .widget-feed {
    overflow-y: auto;
    padding: 0;
}
html body.site-home .bulletin-widget-wrapper .widget-feed {
    padding: 1rem 2rem !important;
    overflow-y: auto;
}
html body.site-home .widget-wrapper .widget-button {
    display: flex;
    justify-content: center;
}

/* ---------- Bulletins + Faith column (#g-container-main) ---------- */
html body.site-home #g-container-main {
    position: relative;
    background: var(--hp-cream);
}
html body.site-home .hp-faith > .g-content .platform-content,
html body.site-home .hp-faith > .g-content .moduletable {
    margin: 0;
    padding: 0;
}
html body.site-home .hp-faith > .g-content > .platform-content:has(.hp-feed) {
    flex: 1 1 0;
    min-height: 0;
}

/* Feed panels (Joomla Feed Display modules 148 and 149) */
html body.site-home .hp-faith .moduletable.hp-feed {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.1rem 1.25rem 1.25rem;
    background: var(--hp-cream);
    border-radius: calc(var(--hp-radius) * .75);
    box-sizing: border-box;
    overflow: hidden;
}
html body.site-home .hp-faith .moduletable.hp-feed > h3.g-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0 0 .6rem;
    padding: 0;
    font-family: var(--title-font-family);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--hp-red) !important;
}
html body.site-home .hp-faith .moduletable.hp-feed > h3.g-title:before {
    font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free', FontAwesome;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: var(--hp-gold);
    color: var(--hp-blue);
    font-size: .95rem;
    letter-spacing: 0;
}
html body.site-home .hp-faith .hp-feed-readings > h3.g-title:before { content: '\f518'; }
html body.site-home .hp-faith .hp-feed-saint > h3.g-title:before { content: '\f684'; }
html body.site-home .hp-faith .hp-feed .feed {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    text-align: left !important;
}
html body.site-home .hp-faith .hp-feed ul.newsfeed {
    flex: 1;
    min-height: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
html body.site-home .hp-faith .hp-feed ul.newsfeed > li {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: 0;
}
/* Saint feed lists 3 days; the script shows today's. No script: the first. */
html body.site-home .hp-faith .hp-feed-saint ul.newsfeed > li:not(:first-child),
html body.site-home .hp-faith .hp-feed-saint ul.newsfeed.hp-picked > li {
    display: none;
}
html body.site-home .hp-faith .hp-feed-saint ul.newsfeed.hp-picked > li.hp-today {
    display: flex;
}
html body.site-home .hp-faith .hp-feed .feed-link {
    display: block;
    margin: 0 0 .5rem;
    font-family: var(--title-font-family);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.25;
}
html body.site-home .hp-faith .hp-feed .feed-link a {
    color: var(--hp-blue);
}
html body.site-home .hp-faith .hp-feed .feed-item-description {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    color: #333;
    font-size: .98rem;
    line-height: 1.55;
}
/* Readings: show only the reading references (h4), not the full text */
html body.site-home .hp-faith .hp-feed-readings .feed-item-description {
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}
html body.site-home .hp-faith .hp-feed-readings .feed-item-description > *:not(h4) {
    display: none !important;
}
html body.site-home .hp-faith .hp-feed-readings .feed-item-description h4 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0 .75rem;
    margin: 0;
    padding: .4rem 0;
    border-bottom: 1px solid rgba(0, 62, 114, .12);
    font-family: inherit;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.4;
    color: #333;
}
html body.site-home .hp-faith .hp-feed-readings .feed-item-description h4:last-of-type {
    border-bottom: 0;
}
html body.site-home .hp-faith .hp-feed-readings .feed-item-description h4 a {
    font-weight: 400;
    color: var(--hp-blue);
}
html body.site-home .hp-faith .hp-feed-saint .feed-item-description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
}
html body.site-home .hp-faith .hp-feed-more {
    align-self: flex-start;
    margin-top: .9rem;
}

/* Helpful links list (Custom module 151) */
html body.site-home .hp-faith .hp-linklist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
html body.site-home .hp-faith .hp-linklist li {
    margin: 0;
    padding: 0;
}
html body.site-home .hp-faith .hp-linklist a {
    display: flex;
    align-items: center;
    gap: .85rem;
    height: 100%;
    padding: .85rem 1rem;
    background: #fff;
    border: 1px solid rgba(0, 62, 114, .14);
    border-radius: calc(var(--hp-radius) * .75);
    box-shadow: 0 .25rem .75rem rgba(0, 30, 60, .06);
    color: #444;
    font-size: .88rem;
    line-height: 1.35;
    text-decoration: none;
    box-sizing: border-box;
}
html body.site-home .hp-faith .hp-linklist i {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: rgba(0, 62, 114, .1);
    color: var(--hp-blue);
    font-size: 1.05rem;
}
html body.site-home .hp-faith .hp-linklist strong {
    display: block;
    font-family: var(--title-font-family);
    font-size: 1.05rem;
    color: var(--hp-blue);
}
html body.site-home .hp-faith .hp-linklist a:focus-visible {
    outline: 3px solid var(--hp-gold);
    outline-offset: 2px;
}

@media only screen and (min-width: 50.99rem) {
    html body.site-home #g-container-main > .g-container {
        padding: min(5vw, 5rem) min(4vw, 4rem) !important;
    }
    html body.site-home #g-mainbar > .g-grid,
    html body.site-home #g-mainbar > .g-container > .g-grid {
        align-items: stretch;
        flex-wrap: nowrap;
        gap: min(3vw, 3rem);
    }
}
@media only screen and (max-width: 50.99rem) {
    html body.site-home #g-container-main > .g-container {
        padding: 2.5rem 1rem !important;
    }
    html body.site-home .widget-wrapper {
        height: 640px !important;
        padding: 1.25rem 1rem;
    }
    html body.site-home .hp-faith > .g-content {
        height: auto !important;
        padding: 1.25rem 1rem;
        margin-top: 2rem;
    }
    html body.site-home .hp-faith > .g-content > .platform-content:has(.hp-feed) {
        flex: none;
    }
    html body.site-home .bulletin-widget-wrapper .widget-feed {
        padding: 1rem !important;
    }
}
@media only screen and (max-width: 35.99rem) {
    html body.site-home .hp-faith .hp-linklist {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* =====================================================================
   FOOTER — church photo under a semi-transparent red veil, logo medallion
   ===================================================================== */
html body.site-home #g-footer {
    position: relative;
    isolation: isolate;
    background: var(--hp-red) url('/images/stories/parish-pics/church.jpg') 50% 40% / cover no-repeat;
}
html body.site-home #g-footer:before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(149, 15, 3, .82) 0%, rgba(110, 10, 2, .9) 100%);
    z-index: 0;
}
html body.site-home #g-footer > .g-container {
    position: relative;
    z-index: 1;
}
html body.site-home #g-footer .g-content-array,
html body.site-home #g-footer .g-content-array .g-grid,
html body.site-home #g-footer .g-content-array .g-block,
html body.site-home #g-footer .g-array-item {
    background: transparent;
}
html body.site-home #g-footer .footer-content:before {
    content: '';
    display: block;
    width: 7.5rem;
    height: 7.5rem;
    margin: 0 0 1.25rem;
    border-radius: 50%;
    background: #fff url('/images/template/apple-touch-icon.png') 50% 50% / 112% auto no-repeat;
    box-shadow: 0 0 0 4px var(--hp-gold), 0 .75rem 1.75rem rgba(0, 0, 0, .35);
}
@media only screen and (max-width: 50.99rem) {
    html body.site-home #g-footer .footer-content:before {
        width: 6rem;
        height: 6rem;
        margin-left: auto;
        margin-right: auto;
    }
}

/* =====================================================================
   TRANSLATE BUTTON (in the navigation social icons)
   ===================================================================== */
html body.site-home #g-navigation .nav-social-icons .g-social {
    display: flex;
    align-items: center;
    justify-content: inherit;
    gap: .75rem;
}
html body.site-home #g-navigation .g-grid:has(> .nav-social-icons) {
    overflow: visible;
}
html body .hp-tr {
    position: relative;
    display: inline-block;
}
html body .hp-tr-toggle {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    padding: .4rem .85rem;
    border: 2px solid var(--secondary-color, #003e72);
    border-radius: 999px;
    background: #fff;
    color: var(--secondary-color, #003e72);
    font-family: inherit;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}
html body .hp-tr-toggle i {
    font-size: 1.1rem;
}
html body .hp-tr-menu {
    position: absolute;
    top: calc(100% + .4rem);
    right: 0;
    z-index: 1000;
    min-width: 11rem;
    margin: 0;
    padding: .4rem 0;
    list-style: none;
    background: #fff;
    border-radius: .6rem;
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .2);
}
html body .hp-tr-menu[hidden] {
    display: none;
}
html body .hp-tr-menu li {
    margin: 0;
    padding: 0;
}
html body .hp-tr-menu button {
    display: block;
    width: 100%;
    margin: 0;
    padding: .5rem 1rem;
    border: 0;
    background: none;
    color: #222;
    font-family: inherit;
    font-size: .95rem;
    text-align: left;
    cursor: pointer;
}
html body .hp-tr-menu button[aria-checked="true"] {
    font-weight: 700;
    color: var(--primary-color, #950f03);
}
html body .hp-tr-menu button:hover,
html body .hp-tr-menu button:focus-visible {
    background: rgba(0, 62, 114, .08);
}
html body .hp-tr-toggle:focus-visible {
    outline: 3px solid var(--tertiary-color, #e5ab67);
    outline-offset: 2px;
}
html body .hp-tr[data-busy] .hp-tr-toggle {
    opacity: .6;
    cursor: progress;
}

/* =====================================================================
   REVEAL ON SCROLL — hidden state only with motion allowed and JS on.
   Reveal rules come BEFORE hover rules; one transition list per element.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
    html body.site-home.hp-js .hp-reveal {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity .7s var(--hp-ease), transform .7s var(--hp-ease), box-shadow .3s var(--hp-ease), border-color .3s var(--hp-ease);
    }
    html body.site-home.hp-js .hp-reveal.hp-in {
        opacity: 1;
        transform: none;
    }
}

/* =====================================================================
   HOVER — one gentle lift for every card, one color change for every
   button. After the reveal rules.
   ===================================================================== */
@media (hover: hover) {
    html body.site-home .hp-ql .g-blockcontent-subcontent-block,
    html body.site-home #g-above .hp-news .g-array-item,
    html body.site-home .hp-faith .hp-linklist a {
        transition: opacity .7s var(--hp-ease), transform .3s var(--hp-ease), box-shadow .3s var(--hp-ease), border-color .3s var(--hp-ease);
    }
    html body.site-home .hp-ql .g-blockcontent-subcontent-block:hover,
    html body.site-home #g-above .hp-news .g-array-item:hover,
    html body.site-home .hp-faith .hp-linklist a:hover {
        transform: translateY(var(--hp-lift));
        box-shadow: var(--hp-shadow-lift);
    }
    html body.site-home .hp-ql .g-blockcontent-subcontent-block.ql-give:hover {
        box-shadow: var(--hp-shadow-lift), inset 0 0 0 2px rgba(229, 171, 103, .8);
    }
    html body.site-home .hp-faith .hp-linklist a:hover {
        border-color: rgba(0, 62, 114, .3);
    }
    html body.site-home #g-above .hp-news .g-array-item-image img {
        transition: transform .5s var(--hp-ease);
    }
    html body.site-home #g-above .hp-news .g-array-item:hover .g-array-item-image img {
        transform: scale(1.02);
    }
    html body.site-home #g-above .hp-news .g-array-item-title a,
    html body.site-home .hp-faith .hp-feed .feed-link a {
        transition: color .25s var(--hp-ease);
    }
    html body.site-home #g-above .hp-news .g-array-item-title a:hover,
    html body.site-home .hp-faith .hp-feed .feed-link a:hover {
        color: var(--hp-red);
    }
    html body.site-home #g-above .hp-news .g-array-item-read-more .button,
    html body.site-home #g-above .news-button .button,
    html body.site-home .widget-wrapper .widget-button .button,
    html body.site-home .hp-feed-more,
    html body .hp-tr-toggle {
        transition: background-color .25s var(--hp-ease), color .25s var(--hp-ease);
    }
    html body.site-home #g-above .hp-news .g-array-item-read-more .button:hover,
    html body.site-home #g-above .news-button .button:hover,
    html body.site-home .widget-wrapper .widget-button .button:hover,
    html body.site-home .hp-feed-more:hover {
        background: var(--hp-blue);
        color: #fff;
    }
    html body .hp-tr-toggle:hover {
        background: var(--secondary-color, #003e72);
        color: #fff;
    }
}
/* A revealed card that is hovered keeps its lift (hp-in sets transform:none). */
@media (hover: hover) and (prefers-reduced-motion: no-preference) and (scripting: enabled) {
    html body.site-home.hp-js .hp-ql .g-blockcontent-subcontent-block.hp-reveal.hp-in:hover,
    html body.site-home.hp-js #g-above .hp-news .g-array-item.hp-reveal.hp-in:hover {
        transform: translateY(var(--hp-lift));
    }
}
@media (prefers-reduced-motion: reduce) {
    html body.site-home .hp-ql .g-blockcontent-subcontent-block:hover,
    html body.site-home #g-above .hp-news .g-array-item:hover,
    html body.site-home .hp-faith .hp-linklist a:hover,
    html body.site-home #g-above .hp-news .g-array-item:hover .g-array-item-image img {
        transform: none;
    }
    html body.site-home #g-above:before {
        transform: none;
    }
}

/* ---------- v8.1: grid.2.0 sets min-width 30% on each card; three cards plus gaps then wrap ---------- */
html body.site-home #g-above .hp-news .g-content-array > .g-grid {
    min-width: 0;
}
@media only screen and (min-width: 50.99rem) {
    html body.site-home #g-above .hp-news .g-content-array {
        flex-wrap: nowrap;
    }
}
/* Saint text: a clean four-line clamp (no half line under the clamp) */
html body.site-home .hp-faith .hp-feed-saint .feed-item-description {
    flex: 0 0 auto;
    -webkit-line-clamp: 4;
}
html body.site-home .hp-faith-title .g-title {
    font-size: clamp(1.5rem, 2.3vw, 2.3rem);
}

/* ---------- v8.2: sponsor ads without a card or label ---------- */
html body.site-home #g-above .side-ads .moduletable {
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
html body.site-home #g-above .side-ads .moduletable:before {
    content: none;
    display: none;
}

/* ---------- v8.3: full titles; hard 3-line cap on the intro ---------- */
html body.site-home #g-above .hp-news .g-array-item-title {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}
html body.site-home #g-above .hp-news .g-array-item-text {
    max-height: calc(1.55em * 3);
}
/* ---------- v8.4: rotator-width sections; ads centered; View All under the news ---------- */
@media only screen and (min-width: 50.99rem) {
    html body.site-home #g-header > .g-container,
    html body.site-home #g-above > .g-container {
        padding-left: calc(min(2vw, 1.8rem) + 2px) !important;
        padding-right: calc(min(2vw, 1.8rem) + 2px) !important;
    }
}
@media only screen and (min-width: 64rem) {
    html body.site-home #g-above > .g-container {
        display: grid;
        grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
        gap: min(2.5vw, 2.5rem);
    }
    html body.site-home #g-above > .g-container > .g-grid {
        display: contents;
    }
    html body.site-home #g-above > .g-container > .g-grid > .g-block {
        flex: none;
        width: auto;
        max-width: none;
        min-width: 0;
    }
    html body.site-home #g-above .g-block.hp-news {
        grid-column: 1;
        grid-row: 1;
    }
    html body.site-home #g-above > .g-container > .g-grid:not(:first-child) > .g-block {
        grid-column: 1;
        grid-row: 2;
    }
    html body.site-home #g-above .g-block.side-ads {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
    }
}
/* =====================================================================
   v9: Facebook + Bulletins side by side; Daily Faith in two columns with
   Helpful Links in one row below; bottom ads half over the footer.
   ===================================================================== */

/* Every home section lines up with the rotator edge */
@media only screen and (min-width: 50.99rem) {
    html body.site-home #g-feature > .g-container,
    html body.site-home #g-container-main > .g-container {
        padding-left: calc(min(2vw, 1.8rem) + 2px) !important;
        padding-right: calc(min(2vw, 1.8rem) + 2px) !important;
    }
}

/* ---------- Facebook + Bulletins (#g-feature) ---------- */
html body.site-home #g-feature .bulletin-widget-container .g-content,
html body.site-home #g-feature .bulletin-widget-container .g-grid,
html body.site-home #g-feature .bulletin-widget-container .g-block,
html body.site-home #g-feature .bulletin-widget-container .g-array-item,
html body.site-home #g-feature .bulletin-widget-container .g-array-item-text {
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}
@media only screen and (min-width: 50.99rem) {
    html body.site-home #g-feature .g-grid:has(> .widget-container) {
        flex-wrap: nowrap;
        align-items: stretch;
        gap: min(3vw, 3rem);
    }
    html body.site-home #g-feature .facebook-widget-container,
    html body.site-home #g-feature .bulletin-widget-container {
        flex: 1 1 0;
        width: auto;
        max-width: none;
        margin: 0;
    }
}
@media only screen and (max-width: 50.99rem) {
    html body.site-home #g-feature .bulletin-widget-container {
        margin-top: 2rem;
    }
}

/* Bulletins: the two newest side by side (override.css shows only one) */
html body.site-home #g-feature .bulletin-feed .koowa_media {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem !important;
    align-items: start;
}
html body.site-home #g-feature .bulletin-feed .koowa_media > .koowa_media__item {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
}
html body.site-home #g-feature .bulletin-feed .koowa_media > .koowa_media__item:nth-child(n+3) {
    display: none !important;
}
html body.site-home #g-feature .bulletin-feed .koowa_media > .koowa_media__item .koowa_media__item__thumbnail {
    display: block !important;
    height: auto !important;
}
html body.site-home #g-feature .bulletin-feed .koowa_media__item__thumbnail img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: .5rem;
    box-shadow: var(--hp-shadow);
}

/* ---------- Daily Faith + Helpful Links (#g-container-main) ---------- */
html body.site-home .hp-faith > .g-content {
    height: auto !important;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: min(2.5vw, 2rem);
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
html body.site-home .hp-faith > .g-content > :has(.hp-faith-title),
html body.site-home .hp-faith > .g-content > :has(.hp-links-mod) {
    grid-column: 1 / -1;
}
html body.site-home .hp-faith > .g-content > :has(.hp-feed) {
    display: flex;
    flex: none;
}
html body.site-home .hp-faith > .g-content > :has(.hp-links-mod) {
    margin-top: min(3vw, 2.5rem);
}
html body.site-home .hp-faith-title .g-title {
    font-size: clamp(1.6rem, 3vw, 2.6rem);
}
html body.site-home .hp-links-mod .g-title {
    margin: 0 0 1.5rem;
    padding: 0;
    text-align: center;
    font-family: var(--title-font-family);
    font-weight: 700;
    font-size: clamp(1.3rem, 2vw, 1.8rem);
    line-height: 1.15;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--hp-blue) !important;
}
html body.site-home .hp-links-mod .g-title:after {
    content: '';
    display: block;
    width: 3rem;
    height: 3px;
    margin: .6rem auto 0;
    background: var(--hp-gold);
    border-radius: 3px;
}

/* Feed cards: white, red top border, like the other cards */
html body.site-home .hp-faith .moduletable.hp-feed {
    flex: 1;
    width: 100%;
    height: auto;
    padding: 1.75rem 1.5rem;
    background: #fff;
    border-radius: var(--hp-radius);
    border-top: 4px solid var(--hp-red);
    box-shadow: var(--hp-shadow);
}
html body.site-home .hp-faith .moduletable.hp-feed > h3.g-title {
    gap: .8rem;
    margin: 0 0 1rem;
    font-size: clamp(1.25rem, 1.8vw, 1.6rem);
    letter-spacing: .04em;
    text-transform: none;
    color: var(--hp-blue) !important;
}
html body.site-home .hp-faith .moduletable.hp-feed > h3.g-title:before {
    width: 2.6rem;
    height: 2.6rem;
    font-size: 1.1rem;
}
html body.site-home .hp-faith .hp-feed-saint .feed-item-description {
    -webkit-line-clamp: 6;
}

/* Helpful links: one row of four cards */
html body.site-home .hp-faith .hp-linklist {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: min(2vw, 1.25rem);
}
@media only screen and (max-width: 63.99rem) {
    html body.site-home .hp-faith .hp-linklist {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media only screen and (max-width: 50.99rem) {
    html body.site-home .hp-faith > .g-content {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }
}
@media only screen and (max-width: 35.99rem) {
    html body.site-home .hp-faith .hp-linklist {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Bottom ads: no red band, half over the footer ----------
   The script sets --hp-ad-h to the ad row height. No script: no overlap. */
html body.site-home #g-bottom {
    position: relative;
    z-index: 3;
    margin-bottom: calc(var(--hp-ad-h, 0px) / -2);
    background: linear-gradient(180deg,
        var(--hp-cream) calc(100% - var(--hp-ad-h, 0px) / 2),
        transparent calc(100% - var(--hp-ad-h, 0px) / 2)) !important;
}
html body.site-home #g-bottom > .g-container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
html body.site-home #g-bottom img {
    border-radius: .35rem;
    box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .28);
}
html body.site-home #g-footer {
    padding-top: calc(var(--hp-ad-h, 0px) / 2);
}
/* ---------- v9.1: shared CSS forces these margins; win them back ---------- */
html body.site-home #g-bottom {
    margin-bottom: calc(var(--hp-ad-h, 0px) / -2) !important;
}
html body.site-home .hp-faith > .g-content .moduletable {
    margin: 0 !important;
}
/* ---------- v9.2: footer clears the ads; one-line bulletin labels ---------- */
html body.site-home #g-footer {
    padding-top: calc(var(--hp-ad-h, 0px) / 2) !important;
}
html body.site-home #g-feature .bulletin-feed .koowa_media__item__label {
    height: auto !important;
    padding: .65rem .75rem !important;
}
html body.site-home #g-feature .bulletin-feed .koowa_media__item__label .overflow_container {
    font-size: clamp(.85rem, 1.1vw, 1rem);
    white-space: nowrap;
}
/* =====================================================================
   v10: quicklinks inside the rotator section; one large bulletin plus a
   button for the one before; footer photo parallax; small fixes.
   ===================================================================== */

/* Quicklinks now sit in #g-slideshow, on the rotator background */
html body.site-home #g-slideshow .g-grid:has(> .hp-ql) {
    margin-top: min(3vw, 2.5rem);
}
@media only screen and (min-width: 50.99rem) {
    html body.site-home #g-slideshow > .g-container {
        padding-bottom: min(4vw, 3.5rem) !important;
    }
}

/* Bulletins: newest full width (top of the cover), the one before as a button */
html body.site-home #g-feature .bulletin-feed .koowa_media {
    display: flex !important;
    flex-direction: column;
    gap: 1rem !important;
}
html body.site-home #g-feature .bulletin-feed .koowa_media > .koowa_media__item:nth-child(2) .koowa_media__item__thumbnail {
    display: none !important;
}
html body.site-home #g-feature .bulletin-feed .koowa_media > .koowa_media__item:first-child .koowa_media__item__thumbnail img {
    aspect-ratio: 16 / 11;
    object-fit: cover;
    object-position: 50% 0;
}
html body.site-home #g-feature .bulletin-feed .koowa_media > .koowa_media__item:nth-child(2) {
    display: flex !important;
    justify-content: center;
}
html body.site-home #g-feature .bulletin-feed .koowa_media > .koowa_media__item:nth-child(2) .koowa_media__item__label {
    padding: .55rem 1.4rem !important;
    background: #fff !important;
    border: 2px solid var(--hp-blue) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    color: var(--hp-blue) !important;
}
html body.site-home #g-feature .bulletin-feed .koowa_media > .koowa_media__item:nth-child(2) .overflow_container {
    color: var(--hp-blue) !important;
    font-size: .95rem;
}
html body.site-home #g-feature .bulletin-feed .koowa_media > .koowa_media__item:nth-child(2) .overflow_container:before {
    content: 'Previous Bulletin: ';
}
html body.site-home #g-feature .bulletin-feed .koowa_media > .koowa_media__item:nth-child(2) a:hover .koowa_media__item__label,
html body.site-home #g-feature .bulletin-feed .koowa_media > .koowa_media__item:nth-child(2) a:focus-visible .koowa_media__item__label {
    background: var(--hp-blue) !important;
}
html body.site-home #g-feature .bulletin-feed .koowa_media > .koowa_media__item:nth-child(2) a:hover .overflow_container,
html body.site-home #g-feature .bulletin-feed .koowa_media > .koowa_media__item:nth-child(2) a:focus-visible .overflow_container {
    color: #fff !important;
}

/* Footer: the church photo moves slowly on its own layer (like News & Events) */
html body.site-home #g-footer {
    overflow: hidden;
    background: var(--hp-red);
}
html body.site-home #g-footer:after {
    content: '';
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: 0;
    right: 0;
    background: url('/images/stories/parish-pics/church.jpg') 50% 40% / cover no-repeat;
    transform: translate3d(0, var(--hp-par, 0px), 0);
    will-change: transform;
    z-index: -1;
}

/* Feed titles: space between the circle icon and the rule under it */
html body.site-home .hp-faith .moduletable.hp-feed > h3.g-title {
    padding-bottom: .85rem;
}

/* News cards: the red line follows the card corners */
html body.site-home #g-above .hp-news .g-content-array > .g-grid {
    border-bottom: 0 !important;
    border-radius: var(--hp-radius) !important;
    overflow: visible !important;
}
html body.site-home #g-above .hp-news .g-array-item {
    border-bottom: 3px solid var(--hp-red);
}
/* ---------- v10.1: newest bulletin uses the full widget width ---------- */
html body.site-home #g-feature .bulletin-widget-wrapper .widget-feed {
    padding: 1rem 1.25rem !important;
}
html body.site-home #g-feature .bulletin-feed .koowa_media--gallery,
html body.site-home #g-feature .bulletin-feed .koowa_media_wrapper,
html body.site-home #g-feature .bulletin-feed .koowa_media_contents,
html body.site-home #g-feature .bulletin-feed .koowa_media {
    width: 100% !important;
    max-width: none !important;
}
html body.site-home #g-feature .bulletin-feed .koowa_media > .koowa_media__item:first-child .koowa_media__item__content-holder {
    padding: .5rem !important;
}
html body.site-home #g-feature .bulletin-feed .koowa_media > .koowa_media__item:first-child .koowa_media__item__thumbnail {
    padding: 0 !important;
}
/* ---------- v10.2: the DOCman link is inline-block; make the newest bulletin fill the row ---------- */
html body.site-home #g-feature .bulletin-feed .koowa_media > .koowa_media__item:first-child,
html body.site-home #g-feature .bulletin-feed .koowa_media > .koowa_media__item:first-child .koowa_media__item__content,
html body.site-home #g-feature .bulletin-feed .koowa_media > .koowa_media__item:first-child .koowa_media__item__link,
html body.site-home #g-feature .bulletin-feed .koowa_media > .koowa_media__item:first-child .koowa_media__item__content-holder,
html body.site-home #g-feature .bulletin-feed .koowa_media > .koowa_media__item:first-child .koowa_media__item__thumbnail {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
}
html body.site-home #g-feature .bulletin-feed .koowa_media > .koowa_media__item:first-child .koowa_media__item__label {
    width: 100%;
    margin: .5rem 0 0;
    box-sizing: border-box;
}
/* ---------- v10.3: center the previous-bulletin button; let it wrap on phones ---------- */
html body.site-home #g-feature .bulletin-feed .koowa_media > .koowa_media__item:nth-child(2) {
    width: 100% !important;
}
html body.site-home #g-feature .bulletin-feed .koowa_media > .koowa_media__item:nth-child(2) .overflow_container {
    white-space: normal;
    text-align: center;
}
@media only screen and (max-width: 50.99rem) {
    html body.site-home #g-feature .bulletin-widget-wrapper {
        height: auto !important;
    }
    html body.site-home #g-feature .bulletin-widget-wrapper .widget-feed {
        flex: none;
    }
}

/* =====================================================================
   v11: the blurred parallax photo moves from News & Events to the rotator
   section; the newest bulletin shows its whole first page (8.5 x 11).
   ===================================================================== */

/* Rotator + quicklinks: blurred photo on a slow parallax layer */
html body.site-home #g-slideshow {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--hp-blue) !important;
}
html body.site-home #g-slideshow:before {
    content: '';
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: -2rem;
    right: -2rem;
    background: url('/images/template/bg-news-events.jpg') 50% 50% / cover no-repeat;
    filter: blur(6px);
    transform: translate3d(0, var(--hp-par, 0px), 0);
    will-change: transform;
    z-index: 0;
}
html body.site-home #g-slideshow:after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .3);
    z-index: 1;
}
html body.site-home #g-slideshow > .g-container {
    position: relative;
    z-index: 2;
}

/* News & Events: plain background, no photo */
html body.site-home #g-above {
    background: var(--hp-cream);
}
html body.site-home #g-above:before,
html body.site-home #g-above:after {
    content: none;
}

@media (prefers-reduced-motion: reduce) {
    html body.site-home #g-slideshow:before {
        transform: none;
    }
}

/* Bulletins: the newest one is the whole first page, no frame; the button below matches its width */
html body.site-home #g-feature .bulletin-widget-wrapper .widget-feed,
html body.site-home #g-feature .bulletin-feed {
    background: none !important;
    padding: 0 !important;
}
html body.site-home #g-feature .bulletin-feed .koowa_media {
    align-items: center;
    gap: .75rem !important;
}
html body.site-home #g-feature .bulletin-feed .koowa_media > .koowa_media__item:first-child,
html body.site-home #g-feature .bulletin-feed .koowa_media > .koowa_media__item:nth-child(2) {
    width: min(100%, 24rem) !important;
    margin: 0 !important;
    padding: 0 !important;
}
html body.site-home #g-feature .bulletin-feed .koowa_media > .koowa_media__item:first-child .koowa_media__item__content-holder,
html body.site-home #g-feature .bulletin-feed .koowa_media > .koowa_media__item:first-child .koowa_media__item__content,
html body.site-home #g-feature .bulletin-feed .koowa_media > .koowa_media__item:first-child .koowa_media__item__link {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
}
html body.site-home #g-feature .bulletin-feed .koowa_media > .koowa_media__item:first-child .koowa_media__item__thumbnail {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
}
html body.site-home #g-feature .bulletin-feed .koowa_media > .koowa_media__item:first-child .koowa_media__item__thumbnail img {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    aspect-ratio: 8.5 / 11;
    object-fit: contain;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: 0 .35rem 1rem rgba(0, 30, 60, .18) !important;
}
html body.site-home #g-feature .bulletin-feed .koowa_media > .koowa_media__item:first-child .koowa_media__item__label {
    margin: .75rem 0 0 !important;
}
html body.site-home #g-feature .bulletin-feed .koowa_media > .koowa_media__item:nth-child(2) a,
html body.site-home #g-feature .bulletin-feed .koowa_media > .koowa_media__item:nth-child(2) .koowa_media__item__content,
html body.site-home #g-feature .bulletin-feed .koowa_media > .koowa_media__item:nth-child(2) .koowa_media__item__content-holder,
html body.site-home #g-feature .bulletin-feed .koowa_media > .koowa_media__item:nth-child(2) .koowa_media__item__label {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box;
}
html body.site-home #g-feature .bulletin-feed .koowa_media > .koowa_media__item:nth-child(2) .koowa_media__item__content-holder {
    padding: 0 !important;
}
html body.site-home #g-feature .bulletin-feed .koowa_media > .koowa_media__item:nth-child(2) .koowa_media__item__label {
    border-radius: .5rem !important;
}
/* ---------- v11.1: much stronger blur on the rotator-section photo ---------- */
html body.site-home #g-slideshow:before {
    left: -5rem;
    right: -5rem;
    filter: blur(32px) saturate(1.1);
}
html body.site-home #g-slideshow:after {
    background: rgba(255, 255, 255, .35);
}
/* ---------- v11.2: Translate button takes clicks. The shared CSS sets pointer-events:none
   on the absolute social-icons grid over the navigation; the button inherited it. ---------- */
html body.site-home #g-navigation .hp-tr,
html body.site-home #g-navigation .hp-tr * {
    pointer-events: auto;
}
/* ---------- v11.3: rotator-section photo is the stained-glass window (blue and gold when blurred) ---------- */
html body.site-home #g-slideshow:before {
    background: url('/images/template/masstimes.jpg') 50% 35% / cover no-repeat;
}
/* ---------- v11.4: outline on the newest bulletin page ---------- */
html body.site-home #g-feature .bulletin-feed .koowa_media > .koowa_media__item:first-child .koowa_media__item__thumbnail img {
    box-sizing: border-box;
    border: 2px solid var(--hp-blue) !important;
    background: #fff;
}

/* ---------- v11.5: quick links fade in one at a time on page load ----------
   CSS animation, so the cards start hidden on first paint (no flash) and need
   no JS. Fill mode "backwards" only: after the fade the hover lift works. */
@keyframes hp-ql-in {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
    html body.site-home .hp-ql .g-blockcontent-subcontent-block {
        animation: hp-ql-in .7s var(--hp-ease) backwards;
        animation-delay: .25s;
    }
    html body.site-home .hp-ql .g-blockcontent-subcontent-block:nth-child(2) { animation-delay: .4s; }
    html body.site-home .hp-ql .g-blockcontent-subcontent-block:nth-child(3) { animation-delay: .55s; }
    html body.site-home .hp-ql .g-blockcontent-subcontent-block:nth-child(4) { animation-delay: .7s; }
    html body.site-home .hp-ql .g-blockcontent-subcontent-block:nth-child(5) { animation-delay: .85s; }
    html body.site-home .hp-ql .g-blockcontent-subcontent-block:nth-child(n+6) { animation-delay: 1s; }
}

/* ---------- v12: Mass Times card is exactly as tall as the rotator ----------
   The rotator is --slideshow-height tall. The card used to grow taller (its
   caps came from a 75vh rule). Pin the card to the rotator height, tighten the
   headings so the whole list still fits, and let the text be the only thing
   that scrolls if the office ever adds more lines. ---------- */
@media only screen and (min-width: 50.99rem) {
    html body.site-home #g-slideshow .g-block.mass-times-block {
        height: var(--slideshow-height) !important;
        max-height: var(--slideshow-height) !important;
        min-height: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box;
    }
    /* every wrapper between the card and the text has to be able to shrink */
    html body.site-home #g-slideshow .mass-times-block > .g-content,
    html body.site-home #g-slideshow .mass-times-block .g-content-array,
    html body.site-home #g-slideshow .mass-times-block .g-content-array > .g-grid,
    html body.site-home #g-slideshow .mass-times-block .g-content-array > .g-grid > .g-block,
    html body.site-home #g-slideshow .mass-times-block .g-content-array > .g-grid > .g-block > .g-content,
    html body.site-home #g-slideshow .mass-times-block .g-array-item {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        height: auto;
        min-height: 0;
        margin: 0;
    }
    html body.site-home #g-slideshow .mass-times-block .g-array-item {
        overflow: hidden;
    }
    html body.site-home #g-slideshow .mass-times-block .g-array-item-text {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 62, 114, .4) transparent;
    }
    html body.site-home #g-slideshow .mass-times-block .g-array-item-text::-webkit-scrollbar {
        width: 6px;
    }
    html body.site-home #g-slideshow .mass-times-block .g-array-item-text::-webkit-scrollbar-thumb {
        background: rgba(0, 62, 114, .4);
        border-radius: 3px;
    }
    /* tighter type so the whole list fits without scrolling */
    html body.site-home #g-slideshow .mass-times-block h2.mt-big-title {
        font-size: 2.25rem;
        line-height: 1.12;
        margin: 0 0 .3rem;
    }
    html body.site-home #g-slideshow .mass-times-block h4 {
        font-size: 1.15rem;
        line-height: 1.2;
        margin: .5rem 0 .15rem;
    }
    html body.site-home #g-slideshow .mass-times-block p {
        margin: 0 0 .3rem;
        line-height: 1.45;
    }
    /* Office Hours call to action is a real button */
    html body.site-home #g-slideshow .mass-times-block .mt-cta {
        margin: .5rem 0 0;
    }
    html body.site-home #g-slideshow .mass-times-block .mt-cta .button {
        display: inline-block;
        padding: .5rem 1rem;
        font-size: .85rem;
        line-height: 1.2;
        letter-spacing: .04em;
        text-transform: uppercase;
        text-decoration: none;
        border: 0;
        border-radius: 6px;
        background: var(--hp-red, #950f03);
        color: #fff;
        transition: background-color .25s var(--hp-ease), color .25s var(--hp-ease);
    }
    html body.site-home #g-slideshow .mass-times-block .mt-cta .button:hover,
    html body.site-home #g-slideshow .mass-times-block .mt-cta .button:focus {
        background: var(--hp-blue, #003e72);
        color: #fff;
    }
}

/* ---------- v12.1: Mass Times sub-headings a step larger (Confession / Adoration / Office Hours),
   with the vertical margins tightened so the taller type still fits the rotator height ---------- */
@media only screen and (min-width: 50.99rem) {
    html body.site-home #g-slideshow .mass-times-block h4 {
        font-size: 1.35rem;
        line-height: 1.15;
        margin: .35rem 0 .1rem;
    }
}

/* =====================================================================
   v13 — SUB PAGE CHROME
   The same header and footer treatment as the home page, for every page
   that is not the home page (body.site-sub). Everything above this block
   is scoped to html body.site-home, so these are the sub-page equivalents.
   Loaded on the sub-page outlines (#Outline, #Grid, #Sponsors) and the
   Base Outline so no page is left on the old flat header/footer.
   ===================================================================== */

html body.site-sub {
    --hp-red: var(--primary-color, #950f03);
    --hp-blue: var(--secondary-color, #003e72);
    --hp-gold: var(--tertiary-color, #e5ab67);
    --hp-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---- Footer: church photo under a semi-transparent red veil, crest medallion ---- */
html body.site-sub #g-footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--hp-red);
}
html body.site-sub #g-footer:after {
    content: '';
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: 0;
    right: 0;
    background: url('/images/stories/parish-pics/church.jpg') 50% 40% / cover no-repeat;
    z-index: -1;
}
html body.site-sub #g-footer:before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(149, 15, 3, .82) 0%, rgba(110, 10, 2, .9) 100%);
    z-index: 0;
}
html body.site-sub #g-footer > .g-container {
    position: relative;
    z-index: 1;
}
html body.site-sub #g-footer .g-content-array,
html body.site-sub #g-footer .g-content-array .g-grid,
html body.site-sub #g-footer .g-content-array .g-block,
html body.site-sub #g-footer .g-array-item {
    background: transparent;
}
html body.site-sub #g-footer .footer-content:before {
    content: '';
    display: block;
    width: 7.5rem;
    height: 7.5rem;
    margin: 0 0 1.25rem;
    border-radius: 50%;
    background: #fff url('/images/template/apple-touch-icon.png') 50% 50% / 112% auto no-repeat;
    box-shadow: 0 0 0 4px var(--hp-gold), 0 .75rem 1.75rem rgba(0, 0, 0, .35);
}
@media only screen and (max-width: 50.99rem) {
    html body.site-sub #g-footer .footer-content:before {
        width: 6rem;
        height: 6rem;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ---- Header: navigation lays out the same as the home page ---- */
html body.site-sub #g-navigation .nav-social-icons .g-social {
    display: flex;
    align-items: center;
    justify-content: inherit;
    gap: .75rem;
}
html body.site-sub #g-navigation .g-grid:has(> .nav-social-icons) {
    overflow: visible;
}
html body.site-sub #g-navigation .hp-tr,
html body.site-sub #g-navigation .hp-tr * {
    pointer-events: auto;
}

/* =====================================================================
   v13.1 — SUB PAGE TITLE BANNER + AD STRIP
   1. The page-title banner gets the home page's treatment: the blurred
      stained-glass backdrop behind a cream veil, and the page's own photo
      as a rounded card with a dark foot so the title reads in white caps
      with the gold rule (same title language as the home sections).
   2. The sponsor ad strip above the footer sits on white, not on red.
   ===================================================================== */

/* ---- 1. page-title banner ---- */
html body.site-sub #g-header:has(#hero-grab) {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--hp-cream, #f7f3ec);
    padding: clamp(1.25rem, 2.4vw, 2.25rem) 0 clamp(1.75rem, 3vw, 2.75rem);
}
html body.site-sub #g-header:has(#hero-grab):before {
    content: '';
    position: absolute;
    inset: -3rem;
    background: url('/images/template/masstimes.jpg') 50% 35% / cover no-repeat;
    filter: blur(30px) saturate(1.1);
    z-index: 0;
}
html body.site-sub #g-header:has(#hero-grab):after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .55);
    z-index: 0;
}
html body.site-sub #g-header:has(#hero-grab) > .g-container {
    position: relative;
    z-index: 1;
    width: 90%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}
html body.site-sub #hero-grab {
    position: relative;
    width: 100%;
    height: clamp(170px, 27vw, 380px);
    border-radius: 1rem;
    overflow: hidden;
    background: #ddd;
    box-shadow: 0 1rem 2.5rem rgba(0, 30, 60, .18);
}
html body.site-sub #grid-hero {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1 !important;
}
html body.site-sub #hero-grab:after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(60, 4, 0, .72) 100%);
    z-index: 1;
}
html body.site-sub #hero-title-text {
    position: absolute !important;
    left: clamp(1rem, 2.2vw, 2.25rem) !important;
    right: clamp(1rem, 2.2vw, 2.25rem) !important;
    bottom: clamp(.9rem, 1.6vw, 1.6rem) !important;
    top: auto !important;
    z-index: 2;
    color: #fff !important;
    font-family: var(--title-font-family);
    font-size: clamp(1.35rem, 2.4vw, 2.4rem) !important;
    line-height: 1.15 !important;
    letter-spacing: .12em;
    text-transform: uppercase;
}
html body.site-sub #hero-title-text:after {
    content: '';
    display: block;
    width: 4rem;
    height: 3px;
    margin-top: .85rem;
    background: var(--hp-gold, #e5ab67);
    border-radius: 3px;
}

/* ---- 2. sponsor ad strip on white ---- */
html body.site-sub #g-bottom {
    background: #fff !important;
}

/* =====================================================================
   v13.2 — banner fixes
   The v13.1 rules that used #g-header:has(#hero-grab) did not survive the
   browser's selector parsing, so the band, the veil and the centering never
   landed. Scoped to the theme's own body class instead (every hero-title
   page carries "herotitlepage"), with !important on the few properties that
   the shared CSS re-declares.
   ===================================================================== */
html body.site-sub.herotitlepage #g-header {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--hp-cream, #f7f3ec);
    padding: clamp(1.25rem, 2.4vw, 2.25rem) 0 clamp(1.75rem, 3vw, 2.75rem) !important;
}
html body.site-sub.herotitlepage #g-header:before {
    content: '' !important;
    position: absolute;
    inset: -3rem;
    background: url('/images/template/masstimes.jpg') 50% 35% / cover no-repeat;
    filter: blur(30px) saturate(1.1);
    z-index: 0;
}
html body.site-sub.herotitlepage #g-header:after {
    content: '' !important;
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .55);
    z-index: 0;
}
html body.site-sub.herotitlepage #g-header > .g-container {
    position: relative;
    z-index: 1;
    margin-left: auto !important;
    margin-right: auto !important;
}
html body.site-sub #hero-grab:after {
    content: '' !important;
    position: absolute;
    inset: 0;
    display: block;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 28%, rgba(60, 4, 0, .78) 100%);
    z-index: 1;
    pointer-events: none;
}
html body.site-sub #hero-grab {
    margin-left: auto;
    margin-right: auto;
}

/* ---------- v13.3: give the banner title and its gold rule room above the card edge ---------- */
html body.site-sub #hero-title-text {
    bottom: clamp(1.4rem, 2.2vw, 2rem) !important;
}
html body.site-sub #hero-title-text:after {
    margin-top: .7rem;
}