.text-shadow {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.overflow-hidden {
    overflow: hidden;
}

.text-balance {
    text-wrap: balance;
}

.justify-content-space-between {
    justify-content: space-between;
}

.text-clamp-1,
.text-clamp-1 a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.text-clamp-2,
.text-clamp-2 a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.text-clamp-3,
.text-clamp-3 a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.text-wrap-balance {
    text-wrap: balance;
}

.height-100 {
    height: 100%;
}

.width-100 {
    width: 100%;
}

:where(.wp-site-blocks) > * {
    margin-block-start: 0;
    margin-block-end: 0;
}

.events_widget .em.pixelbones h3 {
    --font-size: 5px !important;
}

.wp-block-navigation-submenu li {
    min-width: 280px;
    font-size: 0.9rem !important;
}

.leaflet-container {
    z-index: 1;
}

header {
    background: #ffffff;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease;

    animation: add-border linear both;
    animation-timeline: scroll();
    animation-range: 0px 50px; /* Starts at 0px, finished by 50px scroll */
}

header.wp-block-template-part {
    position: sticky;
    top: var(--wp-admin--admin-bar--height, 0);
    z-index: 99;
}

.wp-block-site-logo img {
    /* Apply the scroll animation */
    animation: shrink-logo linear both;
    animation-timeline: scroll();
    animation-range: 0px 50px; /* Matches your header border timing */
}

.scale-60 img {
    /* Apply the scroll animation */
    animation: shrink-logo-60 linear both;
    animation-timeline: scroll();
    animation-range: 0px 50px; /* Matches your header border timing */
}

.bg-lines {
    background: url(assets/images/bg-lines.svg);
    background-repeat: repeat-x;
    background-position: center;

}
@keyframes shrink-logo-60 {
    to {
        width: 80%;
    }
}

@keyframes shrink-logo {
    to {
        width: 70%;
    }
}

@keyframes add-border {
    to {
        border-bottom: 1px solid #efefefef;
    }
}

@media screen and (max-width: 600px) {
    header.wp-block-template-part {
        top: 0;
    }

    .wp-block-site-logo img {
        width: 135px;
    }
}

/* 1. The UL (Flex Container) */
ul.query-slider__wrapper.wp-block-post-template {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important; /* Align everything to the left */
    gap: 10px !important; /* This is your actual gap */
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Hide scrollbars */
ul.query-slider__wrapper::-webkit-scrollbar { display: none; }
ul.query-slider__wrapper { -ms-overflow-style: none; scrollbar-width: none; }

/* 2. The LI (The Slide) */
ul.query-slider__wrapper > li.wp-block-post {
    /* This is the fix: auto width allows the slide to be exactly as wide as your 180px image */
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    scroll-snap-align: start !important;
}

/* 3. The Inner Group and its children */
.query-slider__item {
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
    display: block !important;
}

/* Neutralize WordPress centering margins on children */
.query-slider__item > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
}

/* Remove extra bottom margin from the image container */
.query-slider__item .wp-block-post-featured-image {
    margin-bottom: 8px !important;
}

    /* GRAVITY FORMS */

    /* Hide required descritpion on small forms */
.gf-small-form_wrapper .gform_required_legend {
    display: none;
}

/* Sets the spacing between form elements */
.gf-small-form {
    --gf-form-gap-y: 20px;
    --gf-icon-ctrl-checkbox: #000000;
}

/* Submenu links */
.wp-block-navigation .has-child .wp-block-navigation__submenu-container>.wp-block-navigation-item>.wp-block-navigation-item__content {
    padding: 1em 1em;
}

@media (max-width: 781px) {
    .reverse-columns {
        display: flex;
        flex-direction: column-reverse;
    }
}

/* PAGINATION */

/* Shared look for core Query Pagination, core Comments Pagination and the
   apppresser-search Facet Pagination block (which reuses core's class names,
   so the core selectors cover it). Matched to the Event Calendar Plus event
   grid's pagination so they all read as the same control.

   Colours read from custom properties with palette defaults. The Facet
   Pagination block sets the --apps-pagination-* ones inline from its Color
   panel; core blocks just get the defaults. The defaults sit at low
   specificity so block presets and inline styles always win. */
:where(.wp-block-query-pagination, .wp-block-comments-pagination) {
    --apps-pagination-item-background: var(--wp--preset--color--base);
    --apps-pagination-item-border: #e2e8f0;
    --apps-pagination-hover-background: var(--wp--preset--color--light-gray);
    --apps-pagination-accent: var(--wp--preset--color--medium-blue);
    --apps-pagination-accent-text: var(--wp--preset--color--base);

    color: #475569;
    font-size: 0.95rem;
    font-weight: 600;
}

/* nav-qualified to outrank the single-class flex layout rules WordPress
   generates for these blocks. */
nav.wp-block-query-pagination,
nav.wp-block-comments-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

/* Centered by default; the block's own Justification control still wins. */
nav.wp-block-query-pagination:not([class*='is-content-justification']),
nav.wp-block-comments-pagination:not([class*='is-content-justification']) {
    justify-content: center;
}

/* Core pagination spacing comes from theme.json block gap; the facet listing
   sits outside that flow so it carries its own margins. */
.apps-pagination.wp-block-query-pagination {
    margin-top: 3.5rem;
    margin-bottom: 2rem;
}

.wp-block-query-pagination-numbers,
.wp-block-comments-pagination-numbers {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* The Facet Page Numbers block copies its colour settings onto each number
   link; the strip itself must not paint them. !important beats the preset
   classes. */
.apps-pagination .apps-pagination-numbers.has-background {
    background: none !important;
}

:where(.wp-block-query-pagination, .wp-block-comments-pagination) .page-numbers,
:where(.wp-block-query-pagination, .wp-block-comments-pagination) .wp-block-query-pagination-previous,
:where(.wp-block-query-pagination, .wp-block-comments-pagination) .wp-block-query-pagination-next,
:where(.wp-block-query-pagination, .wp-block-comments-pagination) .wp-block-comments-pagination-previous,
:where(.wp-block-query-pagination, .wp-block-comments-pagination) .wp-block-comments-pagination-next {
    color: inherit;
    text-decoration: none;
}

.wp-block-query-pagination-numbers .page-numbers,
.wp-block-comments-pagination-numbers .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 8px;
    border: 1px solid var(--apps-pagination-item-border);
    border-radius: 10px;
    background-color: var(--apps-pagination-item-background);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.wp-block-query-pagination-previous,
.wp-block-query-pagination-next,
.wp-block-comments-pagination-previous,
.wp-block-comments-pagination-next {
    display: inline-flex;
    align-items: center;
    height: 42px;
    padding: 0 1.25rem;
    border: 1px solid var(--apps-pagination-item-border);
    border-radius: 10px;
    background-color: var(--apps-pagination-item-background);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.wp-block-query-pagination-numbers .page-numbers:hover,
.wp-block-comments-pagination-numbers .page-numbers:hover,
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover,
.wp-block-comments-pagination-previous:hover,
.wp-block-comments-pagination-next:hover {
    border-color: var(--apps-pagination-accent);
    background-color: var(--apps-pagination-hover-background);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    color: var(--apps-pagination-accent);
    transform: translateY(-2px);
}

.wp-block-query-pagination-numbers .page-numbers.current,
.wp-block-comments-pagination-numbers .page-numbers.current {
    border-color: var(--apps-pagination-accent);
    background-color: var(--apps-pagination-accent);
    box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--apps-pagination-accent) 30%, transparent);
    color: var(--apps-pagination-accent-text);
}

/* After the hover rule so the ellipsis stays flat. */
.wp-block-query-pagination-numbers .page-numbers.dots,
.wp-block-comments-pagination-numbers .page-numbers.dots {
    border: none;
    background: transparent;
    box-shadow: none;
}

.wp-block-query-pagination-numbers .page-numbers.dots:hover,
.wp-block-comments-pagination-numbers .page-numbers.dots:hover {
    transform: none;
}