/* === Design tokens === */

:root {
    /* Turquoise of the logo: decorative accents only, too light for white text or text on white */
    --parish-teal: #00B2A1;
    /* Darker turquoise, readable on white and under white text (WCAG AA) */
    --parish-teal-strong: #008275;
    --parish-teal-stronger: #006b60;
    --parish-teal-soft: rgba(0, 178, 161, .08);
    --parish-teal-focus: rgba(0, 178, 161, .3);
    /* Deep green-blue for headings, echoing the logo colors */
    --parish-heading: #12403b;
    /* Warm stone, inspired by the tuffeau of the cathedral */
    --parish-stone: #f3ece0;
    --parish-stone-hover: #e9dcc5;
    --parish-stone-border: #d9c7a5;
    --parish-stone-text: #5c4520;
    --parish-text: #222826;
    --parish-surface: #f4f7f6;

    /* Bootstrap variables */
    --bs-primary: var(--parish-teal-strong);
    --bs-primary-rgb: 0, 130, 117;
    --bs-link-color: var(--parish-teal-strong);
    --bs-link-color-rgb: 0, 130, 117;
    --bs-link-hover-color: var(--parish-teal-stronger);
    --bs-link-hover-color-rgb: 0, 107, 96;
    --bs-body-color: var(--parish-text);
    --bs-body-font-family: LatoWeb, sans-serif;
    --bs-body-font-size: 1.0625rem;
    --bs-body-line-height: 1.65;
    --bs-border-radius: .5rem;
    --bs-border-radius-lg: .75rem;
    --bs-border-radius-sm: .375rem;
    --bs-focus-ring-color: var(--parish-teal-focus);
}

/* Anchors of the menu (e.g. life#baptism) scroll smoothly, unless the visitor reduces motion */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* === Global font === */

html > body {
    font-family: LatoWeb, sans-serif;
    height: 100%;
    color: var(--parish-text);
    background-color: #FFFFFF;
}

a {
    color: var(--parish-teal-strong);
    /* Bootstrap 5 underlines links by default, Bootstrap 4 only did it on hover */
    text-decoration: none;
}

/* :where() keeps the specificity of a plain "a" so that .btn, .nav-link... are not underlined */
a:where(:hover) {
    color: var(--parish-teal-stronger);
    text-decoration: underline;
    text-underline-offset: .2em;
}

/* h4 is the usual subtitle of the pages, under an h1 */
h1, h2, h3, h4 {
    font-family: LoraWeb, Georgia, serif;
    font-weight: 600;
    color: var(--parish-heading);
    letter-spacing: -.01em;
    line-height: 1.25;
}

/* Bootstrap 3 heading margins, removed since Bootstrap 4 */
h1, h2, h3 {
    margin-top: 20px;
    margin-bottom: 10px;
}

/* More air before a new section than inside it */
h1 {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

h4, h5, h6 {
    margin-top: 10px;
    margin-bottom: 10px;
}

.trix-content-editable h1 {
    font-size: 20px;
}

.back-to-top {
    cursor: pointer;
    position: fixed;
    bottom: 20px;
    right: 20px;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s, visibility .4s;
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
}

/* === Icons (public/img/icons.svg, see templates/icon.html.twig) === */
.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -.125em;
    fill: currentColor;
}

/* After a link opening another site */
.icon.icon-external {
    width: .7em;
    height: .7em;
    margin-left: .25em;
    vertical-align: 0;
}

/* Small help sign after a word explained by a tooltip */
.icon.icon-sup {
    width: .8em;
    height: .8em;
    vertical-align: super;
}

/* === Entrance animations === */
/* Home tiles and icon cards fade in when they scroll into view, without JavaScript;
   browsers without scroll-driven animations, and visitors who reduce motion, just see them */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .home-tile,
        .icon-grid .card {
            animation: fade-in-up linear both;
            animation-timeline: view();
            /* Already fully visible once a fifth of the element is in view */
            animation-range: entry 0% cover 20%;
        }
    }
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* === Nav bar === */
/* The header stays at the top of the screen and becomes compact once the page is scrolled
   (.is-compact, set by specific.js). Each size is a pair of variables: in compact mode the
   space kept under the header grows by as much as the header shrinks, so that the page content
   does not move while the header animates. */
.navbar-wrapper {
    --logo-height-expanded: 64px;
    --logo-height-compact: 40px;
    --header-padding-y-expanded: .5rem;
    --header-padding-y-compact: .25rem;
    --menu-link-padding-y-expanded: .5rem;
    --menu-link-padding-y-compact: .5rem;
    --header-transition: .3s ease;

    /* Current sizes */
    --logo-height: var(--logo-height-expanded);
    --header-padding-y: var(--header-padding-y-expanded);
    --menu-link-padding-y: var(--menu-link-padding-y-expanded);

    position: sticky;
    top: 0;
    /* Above the offcanvas backdrop (1040) appended to the body, so that the mobile menu panel stays on top */
    z-index: 1045;
    margin-bottom: 20px;
    /* The header itself is transparent: only its surface is painted and clickable, so that the
       space kept under a compact header shows the page and lets clicks through */
    pointer-events: none;
    transition: padding-bottom var(--header-transition);
}

.navbar-surface {
    /* White edge above the header: with a fractional scroll position, the stuck header may be drawn
       a fraction of a pixel below the top of the screen, which would show the page through a hairline */
    --surface-top-edge: 0 -2px 0 #FFFFFF;
    pointer-events: auto;
    background-color: #FFFFFF;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    box-shadow: var(--surface-top-edge);
    transition: box-shadow var(--header-transition);
}

@media (min-width: 992px) {
    .navbar-wrapper {
        --logo-height-expanded: 96px;
        --logo-height-compact: 56px;
        --header-padding-y-expanded: .75rem;
        --menu-link-padding-y-compact: .25rem;
    }
}

.navbar-wrapper.is-compact {
    --logo-height: var(--logo-height-compact);
    --header-padding-y: var(--header-padding-y-compact);
    --menu-link-padding-y: var(--menu-link-padding-y-compact);
    /* Padding rather than margin: a margin would collapse with the one of the page title */
    padding-bottom: calc((var(--logo-height-expanded) - var(--logo-height-compact))
        + 2 * (var(--header-padding-y-expanded) - var(--header-padding-y-compact))
        + 2 * (var(--menu-link-padding-y-expanded) - var(--menu-link-padding-y-compact)));
}

.navbar-wrapper.is-compact .navbar-surface {
    /* Shadow below the header only: its negative spread keeps the blur from rising above it */
    box-shadow: var(--surface-top-edge), 0 6px 12px -6px rgba(0, 0, 0, .15);
}

@media (prefers-reduced-motion: reduce) {
    .navbar-wrapper {
        --header-transition: 0s;
    }
}

/* Anchors (e.g. life#baptism) are not hidden under the header */
html {
    scroll-padding-top: 90px;
}

@media (min-width: 992px) {
    html {
        scroll-padding-top: 140px;
    }
}

/* Brand takes the whole first line, centered above the menu.
   navbar-expand-lg forbids wrapping from 992px, so it is allowed again here. */
.navbar.navbar-expand-lg {
    flex-wrap: wrap;
    /* Bootstrap 4 horizontal padding, Bootstrap 5 sets it to 0 */
    --bs-navbar-padding-x: 1rem;
    --bs-navbar-padding-y: var(--header-padding-y);
    transition: padding var(--header-transition);
}

.navbar .navbar-brand {
    flex: 0 0 100%;
    margin-right: 0;
    text-align: center;
}

.navbar-brand img {
    display: block;
    height: var(--logo-height);
    margin: 0 auto;
    transition: height var(--header-transition);
}

/* On small screens, the toggle button sits on the right of the centered logo */
.navbar .navbar-toggler {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    border: none;
}

.navbar .navbar-toggler:focus {
    box-shadow: 0 0 0 .25rem var(--parish-teal-focus);
}

/* Menu links: the active section and the hovered link are underlined in turquoise */
.navbar .navbar-nav {
    --bs-nav-link-color: var(--parish-text);
    --bs-nav-link-hover-color: var(--parish-teal-strong);
    --bs-navbar-active-color: var(--parish-teal-strong);
    --bs-navbar-nav-link-padding-x: .5rem;
}

.navbar .navbar-nav .nav-link {
    position: relative;
    padding-top: var(--menu-link-padding-y);
    padding-bottom: var(--menu-link-padding-y);
    /* Fixed line height, so that the height of the menu only depends on its padding */
    line-height: 1.5rem;
    transition: color .15s, padding var(--header-transition);
}

.navbar .navbar-nav .show > .nav-link,
.navbar .navbar-nav .active > .nav-link {
    color: var(--parish-teal-strong);
}

/* Underline drawn with ::before, since ::after is the dropdown caret */
.navbar .navbar-nav .nav-link::before {
    content: "";
    position: absolute;
    left: var(--bs-navbar-nav-link-padding-x);
    right: var(--bs-navbar-nav-link-padding-x);
    bottom: calc(var(--menu-link-padding-y) - 6px);
    height: 2px;
    border-radius: 1px;
    background-color: var(--parish-teal);
    transform: scaleX(0);
    transition: transform .2s ease, bottom var(--header-transition);
}

.navbar .navbar-nav .nav-link:hover::before,
.navbar .navbar-nav .show > .nav-link::before,
.navbar .navbar-nav .active > .nav-link::before {
    transform: scaleX(1);
}

.navbar .dropdown-menu {
    --bs-dropdown-font-size: .95rem;
    --bs-dropdown-border-color: transparent;
    --bs-dropdown-border-radius: var(--bs-border-radius-lg);
    --bs-dropdown-padding-y: .5rem;
    --bs-dropdown-item-padding-y: .4rem;
    --bs-dropdown-link-color: var(--parish-text);
    --bs-dropdown-link-hover-color: var(--parish-teal-stronger);
    --bs-dropdown-link-hover-bg: var(--parish-teal-soft);
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: var(--parish-teal-strong);
}

@media (min-width: 992px) {
    .navbar .navbar-nav {
        font-size: 14px;
    }

    /* Menu centered under the logo */
    .navbar .offcanvas .offcanvas-body {
        justify-content: center;
    }

    .navbar .dropdown-menu {
        box-shadow: 0 8px 24px rgba(0, 0, 0, .1);
    }
}

@media (min-width: 1200px) {
    .navbar .navbar-nav {
        font-size: 15px;
        --bs-navbar-nav-link-padding-x: .65rem;
    }
}

/* On large screens with a mouse, dropdowns open on hover */
@media (min-width: 992px) and (hover: hover) {
    .navbar-nav .dropdown:hover .dropdown-menu {
        display: block;
        /* Bootstrap 5 only positions the menu when it is opened by Popper */
        top: 100%;
        left: 0;
        margin-top: 0;
    }
}

/* On small screens, the menu is a full screen panel where sections unfold like an accordion */
@media (max-width: 991.98px) {
    .navbar .offcanvas {
        --bs-offcanvas-width: 100%;
        --bs-offcanvas-border-width: 0;
    }

    .navbar .offcanvas-title {
        font-family: LoraWeb, Georgia, serif;
        font-size: 1.5rem;
        font-weight: 600;
        color: var(--parish-heading);
    }

    .navbar .offcanvas-body {
        padding-top: 0;
    }

    .navbar .navbar-nav {
        font-size: 1.15rem;
    }

    .navbar .navbar-nav > .nav-item {
        border-bottom: 1px solid var(--bs-border-color);
    }

    .navbar .navbar-nav .nav-link {
        padding-top: .85rem;
        padding-bottom: .85rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .navbar .navbar-nav .nav-link::before {
        display: none;
    }

    .navbar .dropdown-menu {
        --bs-dropdown-font-size: 1.05rem;
        --bs-dropdown-padding-y: 0;
        --bs-dropdown-item-padding-x: 1rem;
        --bs-dropdown-item-padding-y: .6rem;
        margin-bottom: .75rem;
        background-color: var(--parish-surface);
    }
}

/* === Home banner === */
/* Same height whatever the format of the pictures chosen by the administrators: each picture is
   shown whole (contain), over a blurred and darkened copy of itself that fills the banner. */
.home-banner {
    --banner-height: clamp(280px, 30vw, 420px);
    position: relative;
    height: var(--banner-height);
    overflow: hidden;
    margin-bottom: 2rem;
    border-radius: var(--bs-border-radius-lg);
    background-color: var(--parish-heading);
}

.home-banner .carousel-inner,
.home-banner .carousel-item {
    height: 100%;
}

.home-banner-backdrop,
.home-banner-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.home-banner-backdrop {
    object-fit: cover;
    filter: blur(24px) brightness(.55);
    /* Hides the light edges of the blur */
    transform: scale(1.15);
}

.home-banner-image {
    object-fit: contain;
    /* On small screens the caption takes the bottom of the banner: the picture stays above it */
    object-position: center top;
}

@media (min-width: 768px) {
    .home-banner-image {
        object-position: center;
    }
}

/* Title, excerpt and button at the bottom, white on a dark gradient whatever the picture */
.home-banner-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: 2.5rem 1rem 2.25rem;
    text-align: center;
    color: #FFFFFF;
    background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, .5) 65%, transparent);
}

@media (min-width: 768px) {
    .home-banner-caption {
        padding: 4rem 5rem 2.5rem;
    }
}

.home-banner-title {
    margin: 0 0 .25rem;
    font-size: clamp(1.35rem, 2.6vw, 2.25rem);
    color: #FFFFFF;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .45);
    /* Long titles never change the height of the banner */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.home-banner-caption p {
    max-width: 60ch;
    margin: 0 auto .75rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
}

.home-banner .carousel-control-prev,
.home-banner .carousel-control-next {
    width: 4rem;
    z-index: 2;
}

/* Round dark background, so that the arrows stay visible on light pictures */
.home-banner .carousel-control-prev-icon,
.home-banner .carousel-control-next-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .35);
    background-size: 1rem;
}

.home-banner .carousel-indicators {
    margin-bottom: .5rem;
    z-index: 2;
}

.home-banner .carousel-indicators [data-bs-target] {
    width: 1.5rem;
    border-radius: 2px;
}

/* === Photo carousels (cathedral, Saint-Julien) === */
/* The pictures are often narrower than the carousel: the default white arrows would sit on the
   white page. Solid dark discs keep them visible over any background. */
.photo-carousel .carousel-control-prev,
.photo-carousel .carousel-control-next {
    width: 4rem;
    opacity: .85;
}

.photo-carousel .carousel-control-prev:hover,
.photo-carousel .carousel-control-next:hover,
.photo-carousel .carousel-control-prev:focus-visible,
.photo-carousel .carousel-control-next:focus-visible {
    opacity: 1;
}

.photo-carousel .carousel-control-prev-icon,
.photo-carousel .carousel-control-next-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: var(--parish-heading);
    background-size: 1.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}

/* The whole picture fits in the screen, so the arrows (vertically centered) stay in view */
.photo-carousel .carousel-item img {
    max-height: 80vh;
    width: auto;
}

.image-with-margin img {
    margin-top: 20px;
}

/* === Leaflet === */

#map-container {
    height: 400px
}

.leaflet-top .leaflet-control {
    z-index: 2;
}

.leaflet-top.leaflet-left {
    z-index: 500;
}

/* === Home tiles === */
/* The pictures are round PNGs with a transparent background */
.home-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .5rem;
    text-align: center;
    color: var(--parish-heading);
    border-radius: var(--bs-border-radius-lg);
}

.home-tile img {
    display: block;
    width: min(220px, 70vw);
    height: auto;
    aspect-ratio: 1;
    transition: transform .6s ease-in-out;
}

.home-tile-label {
    margin-top: 1rem;
    font-family: LoraWeb, Georgia, serif;
    font-size: 1.2rem;
    font-weight: 500;
    transition: color .15s;
}

.home-tile:hover {
    text-decoration: none;
}

.home-tile:hover img {
    transform: scale(1.06);
}

.home-tile:hover .home-tile-label {
    color: var(--parish-teal-strong);
}

@media (prefers-reduced-motion: reduce) {
    .home-tile img {
        transition: none;
    }

    .home-tile:hover img {
        transform: none;
    }
}

/* === Footer === */
/* Full width, light text on the deep green of the headings */
.site-footer {
    --footer-bg: var(--parish-heading);
    --footer-text: rgba(255, 255, 255, .85);
    --footer-link: #9be7dd;
    margin-top: 3rem;
    padding-top: 2.5rem;
    background-color: var(--footer-bg);
    color: var(--footer-text);
    font-size: .95rem;
    /* Below the footer of short pages, the color goes on to the bottom of the screen: a shadow moved down
       by its own spread only extends downwards, and does not change the scrollable height of the page */
    box-shadow: 0 100vh 0 100vh var(--footer-bg);
}

.site-footer a {
    color: var(--footer-link);
}

.site-footer a:hover {
    color: #FFFFFF;
}

.site-footer a:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 2px;
    border-radius: 2px;
}

/* White version of the logo */
.site-footer-logo img {
    display: block;
    width: 150px;
    height: auto;
    margin-bottom: 1.25rem;
    filter: brightness(0) invert(1);
    opacity: .9;
}

.site-footer-title {
    margin: 0 0 1rem;
    font-size: 1.25rem;
    color: #FFFFFF;
}

.site-footer-contact {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin: 0;
    font-style: normal;
}

.site-footer-links {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer-line {
    display: flex;
    gap: .6rem;
    align-items: baseline;
    /* Long words never overflow the column */
    min-width: 0;
    overflow-wrap: anywhere;
}

.site-footer-line > .icon {
    flex: 0 0 auto;
    color: var(--parish-teal);
    /* Aligned on the first line of text */
    transform: translateY(.1em);
}

.site-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .25rem 1.25rem;
    margin-top: 2.5rem;
    padding: 1.25rem 0;
    border-top: 1px solid rgba(255, 255, 255, .15);
    font-size: .875rem;
    text-align: center;
}

/* On small screens, the back to top button stays clear of the footer links */
@media (max-width: 767.98px) {
    .site-footer-bottom {
        padding-left: 4rem;
        padding-right: 4rem;
    }
}

/* === Header === */

.contentBlock {
    background-color: #FFF;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}

/* === Images === */
/* Bootstrap 3 img-responsive was a block: captions after an image always go below it */
.img-fluid {
    display: block;
}

img.article_img {
    max-width: 250px;
}

img.article_big_img {
    max-width: 500px;
}

img.with-small-max-height {
    max-height: 160px;
}

img.with-max-height {
    max-height: 230px;
}

img.with-big-max-height {
    max-height: 300px;
}

img.center {
    margin: auto;
}

/* Bootstrap 3 thumbnails were migrated to cards: keep images responsive and centered */
.card > img,
.card > a > img,
.card > a > picture > img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 4px auto 0;
}

/* Grid of icon cards: same image format and same card height on each line */
.icon-grid > [class*="col-"] {
    display: flex;
}

.icon-grid > [class*="col-"] > .card {
    flex: 1 1 auto;
}

.icon-grid > [class*="col-"] > .card > a > img {
    width: 100%;
    max-width: none;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    /* Keep the top of portrait pictures, where faces usually are */
    object-position: center top;
    margin: 0;
}

/* For pictures whose important part is at the bottom (e.g. the organ console) */
.icon-grid > [class*="col-"] > .card > a > img.keep-bottom {
    object-position: center bottom;
}

/* Text next to a picture (former Bootstrap 4 media object) */
.media-text {
    padding-right: 10px;
    padding-left: 10px;
}

/* === TextArea === */
textarea.bigHeight {
    height: 200px;
}

div.row.with-head-margin > div {
    margin-top: 5px;
}

/* === Buttons === */
.btn {
    --bs-btn-font-weight: 600;
    transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s, transform .15s;
}

.btn:active {
    transform: translateY(1px);
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--parish-teal-strong);
    --bs-btn-border-color: var(--parish-teal-strong);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--parish-teal-stronger);
    --bs-btn-hover-border-color: var(--parish-teal-stronger);
    --bs-btn-focus-shadow-rgb: 0, 178, 161;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--parish-teal-stronger);
    --bs-btn-active-border-color: var(--parish-teal-stronger);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--parish-teal-strong);
    --bs-btn-disabled-border-color: var(--parish-teal-strong);
}

.btn-primary:hover {
    box-shadow: 0 4px 12px rgba(0, 130, 117, .25);
}

/* Secondary navigation buttons (e.g. the parts of the cathedral), in the warm stone color */
.btn-info {
    --bs-btn-color: var(--parish-stone-text);
    --bs-btn-bg: var(--parish-stone);
    --bs-btn-border-color: var(--parish-stone-border);
    --bs-btn-hover-color: var(--parish-stone-text);
    --bs-btn-hover-bg: var(--parish-stone-hover);
    --bs-btn-hover-border-color: var(--parish-stone-border);
    --bs-btn-focus-shadow-rgb: 217, 199, 165;
    --bs-btn-active-color: var(--parish-stone-text);
    --bs-btn-active-bg: var(--parish-stone-hover);
    --bs-btn-active-border-color: var(--parish-stone-border);
    --bs-btn-disabled-color: var(--parish-stone-text);
    --bs-btn-disabled-bg: var(--parish-stone);
    --bs-btn-disabled-border-color: var(--parish-stone-border);
}

/* === Forms and pagination: turquoise instead of the default Bootstrap blue === */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--parish-teal);
    box-shadow: 0 0 0 .25rem var(--parish-teal-focus);
}

.form-check-input:checked {
    background-color: var(--parish-teal-strong);
    border-color: var(--parish-teal-strong);
}

.pagination {
    --bs-pagination-color: var(--parish-teal-strong);
    --bs-pagination-hover-color: var(--parish-teal-stronger);
    --bs-pagination-focus-color: var(--parish-teal-stronger);
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem var(--parish-teal-focus);
    --bs-pagination-active-bg: var(--parish-teal-strong);
    --bs-pagination-active-border-color: var(--parish-teal-strong);
}

/* Cards keep their rounded corners over their pictures */
.card {
    overflow: hidden;
}

.btn-success {
    --bs-btn-bg: #28a745;
    --bs-btn-border-color: #28a745;
    --bs-btn-hover-bg: #218838;
    --bs-btn-hover-border-color: #1e7e34;
    --bs-btn-focus-shadow-rgb: 72, 180, 97;
    --bs-btn-active-bg: #1e7e34;
    --bs-btn-active-border-color: #1c7430;
    --bs-btn-disabled-bg: #28a745;
    --bs-btn-disabled-border-color: #28a745;
}

.separator {
    border-bottom: 1px solid var(--bs-border-color);
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.img-with-margin img {
    margin-bottom: 15px;
}

/*Full Calendar override: the "classic" theme palette is set on :root, redefine it on the calendar element*/
#calendar {
    /* White page background, with today's column lightly tinted */
    --fc-classic-background: #ffffff;
    --fc-classic-today: var(--parish-teal-soft);
}

trix-toolbar .trix-button-group.trix-button-group--file-tools {
    display: none;
}