/* The public site's blocks. The live builder loads this too, so its preview matches the site. */
.site-page {
    color: #1f2937;
    display: flow-root;
    font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    margin: 0 auto;
    max-width: 1100px;
    padding: 32px 24px;
}

.site-page,
.site-page * {
    box-sizing: border-box;
}

.site-page > * + *,
.site-col > * + * {
    margin-top: 24px;
}

.site-page img {
    border-radius: 8px;
    display: block;
    height: auto;
    max-width: 100%;
}

.site-heading {
    color: #111827;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

/* No specificity, so the space between blocks at the top of this file still applies. */
:where(.site-heading, .site-list, .site-image) {
    margin: 0;
}

.site-text {
    overflow-wrap: anywhere;
}

.site-text > :first-child {
    margin-top: 0;
}

.site-text > :last-child {
    margin-bottom: 0;
}

.site-list {
    padding-inline-start: 20px;
}



.site-image figcaption {
    color: #6b7280;
    font-size: 14px;
    margin-top: 8px;
}

.site-hero,
.site-cta {
    background-color: #111827;
    background-position: center;
    background-size: cover;
    border-radius: 12px;
    color: #fff;
    overflow-wrap: anywhere;
    overflow: hidden;
    padding: 64px 32px;
    position: relative;
    text-align: center;
}

.site-hero h1,
.site-cta h2 {
    color: inherit;
    line-height: 1.2;
    margin: 0 0 12px;
}

.site-hero p,
.site-cta p {
    margin: 0 0 16px;
}

.site-hero-video {
    height: 100%;
    inset: 0;
    object-fit: cover;
    position: absolute;
    width: 100%;
}

.site-hero-inner {
    position: relative;
}

.site-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.site-btn {
    border: 1px solid transparent;
    border-radius: 8px;
    display: inline-block;
    font-weight: 600;
    padding: 10px 18px;
    text-decoration: none;
}

.site-btn.is-primary {
    background: #2563eb;
    color: #fff;
}

.site-btn.is-outline {
    border-color: currentColor;
    color: inherit;
}

.site-box {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
}

.site-box h3 {
    margin: 12px 0 8px;
}

.site-box p {
    margin: 0;
}

.site-stat {
    text-align: center;
}

.site-stat-number {
    color: #111827;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
}

.site-accordion {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 16px;
}

.site-accordion + .site-accordion {
    margin-top: 8px;
}

.site-accordion summary {
    cursor: pointer;
    font-weight: 600;
}

.site-accordion[open] summary {
    margin-bottom: 8px;
}

.site-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.site-tab-input {
    opacity: 0;
    position: absolute;
}

.site-tab {
    border-bottom: 2px solid transparent;
    color: #6b7280;
    cursor: pointer;
    font-weight: 600;
    order: 1;
    padding: 8px 14px;
}

.site-tab-panel {
    display: none;
    order: 2;
    padding-top: 16px;
    width: 100%;
}

.site-tab-input:checked + .site-tab {
    border-bottom-color: #2563eb;
    color: #2563eb;
}

.site-tab-input:focus-visible + .site-tab {
    outline: 2px solid #2563eb;
}

.site-tab-input:checked + .site-tab + .site-tab-panel {
    display: block;
}

.site-quotes {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.site-quote {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin: 0;
    padding: 20px;
}

.site-quote blockquote {
    margin: 0 0 12px;
}

.site-quote figcaption {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.site-quote figcaption img {
    border-radius: 50%;
    height: 40px;
    object-fit: cover;
    width: 40px;
}

.site-quote figcaption span {
    color: #6b7280;
    font-size: 14px;
}

.site-cols {
    display: flex;
    gap: var(--gap, 24px);
}

.gap-none {
    --gap: 0;
}

.gap-small {
    --gap: 12px;
}

.gap-medium {
    --gap: 24px;
}

.gap-large {
    --gap: 48px;
}

.valign-center .site-cols {
    align-items: center;
}

.valign-bottom .site-cols {
    align-items: flex-end;
}

.valign-top .site-cols {
    align-items: flex-start;
}

.site-col {
    flex: var(--col, 50) 1 0;
    min-width: 0;
}

.site-section.is-full {
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50%);
}

.site-unlock {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.site-unlock .input {
    flex: 1;
    min-width: 0;
}

@media (max-width: 900px) {
    .stack-tablet .site-cols {
        flex-direction: column;
    }

    .stack-tablet .site-col {
        flex: none;
        width: 100%;
    }
}

@media (max-width: 600px) {
    .stack-mobile .site-cols {
        flex-direction: column;
    }

    .stack-mobile .site-col {
        flex: none;
        width: 100%;
    }

    .site-hero,
    .site-cta {
        padding: 40px 20px;
    }
}

/* The Style tab of a block, section or column. Values: App\Core\BlockRenderer::styleAttributes. */
.blk-tc :is(h1, h2, h3, h4, h5, h6, p, li, blockquote, figcaption, small, summary, .site-list a, .site-text a, .site-heading, .site-stat-number, .site-hero, .site-cta, .site-tab) {
    color: inherit;
}

.blk-fs :is(h1, h2, h3, h4, h5, h6, p, li, blockquote, figcaption, summary, .site-text, .site-stat-number) {
    font-size: inherit;
}

.blk-ta :is(.site-hero, .site-cta, .site-stat) {
    text-align: inherit;
}

.blk-ta-start .site-actions {
    justify-content: flex-start;
}

.blk-ta-end .site-actions {
    justify-content: flex-end;
}

/* A Hero or Call to Action paints its own dark background, which would hide the one chosen in the Style tab. */
.blk-bg > :is(.site-hero, .site-cta) {
    background-color: transparent;
}

@media (min-width: 901px) {
    .blk-hide-desktop {
        display: none;
    }
}

@media (min-width: 601px) and (max-width: 900px) {
    .blk-hide-tablet {
        display: none;
    }
}

@media (max-width: 600px) {
    .blk-hide-mobile {
        display: none;
    }
}

/* Spacing per device. !important: the desktop value is an inline style.
   Phones also match the tablet query, so a phone without its own value takes the tablet's. */
@media (max-width: 900px) {
    .blk-pt-t { padding-block-start: var(--blk-pt-t) !important; }
    .blk-pb-t { padding-block-end: var(--blk-pb-t) !important; }
    .blk-ps-t { padding-inline-start: var(--blk-ps-t) !important; }
    .blk-pe-t { padding-inline-end: var(--blk-pe-t) !important; }
    .blk-mt-t { margin-block-start: var(--blk-mt-t) !important; }
    .blk-mb-t { margin-block-end: var(--blk-mb-t) !important; }
}

@media (max-width: 600px) {
    .blk-pt-m { padding-block-start: var(--blk-pt-m) !important; }
    .blk-pb-m { padding-block-end: var(--blk-pb-m) !important; }
    .blk-ps-m { padding-inline-start: var(--blk-ps-m) !important; }
    .blk-pe-m { padding-inline-end: var(--blk-pe-m) !important; }
    .blk-mt-m { margin-block-start: var(--blk-mt-m) !important; }
    .blk-mb-m { margin-block-end: var(--blk-mb-m) !important; }
}

/* Each block's own settings. Variables come from the Style tab: PageBlock::SPECS 'styles'. */
.site-text a {
    color: var(--bk-link, #2563eb);
}

.site-list {
    display: flex;
    flex-direction: column;
    gap: var(--bk-gap, 6px);
    list-style: none;
    padding-inline-start: 0;
}

.site-list li {
    align-items: baseline;
    display: flex;
    gap: 10px;
}

.site-list li::before {
    color: var(--bk-icon-color, #2563eb);
    flex-shrink: 0;
    font-weight: 700;
}

.site-list.is-check li::before {
    content: '\2713';
}

.site-list.is-arrow li::before {
    content: '\2192';
}

[dir=rtl] .site-list.is-arrow li::before {
    content: '\2190';
}

.site-list.is-bullet li::before {
    content: '\2022';
}

.site-list.is-number {
    counter-reset: site-list;
}

.site-list.is-number li {
    counter-increment: site-list;
}

.site-list.is-number li::before {
    content: counter(site-list) '.';
}

.site-image {
    display: flex;
    flex-direction: column;
    max-width: var(--bk-img-w, 100%);
}

.site-image.is-center {
    margin-inline: auto;
}

.site-image.is-end {
    margin-inline-start: auto;
}

.site-image img,
.site-gallery img,
.site-slide img {
    aspect-ratio: var(--ratio, auto);
    border-radius: var(--bk-img-r, 8px);
    object-fit: cover;
    width: 100%;
}

.site-image figcaption {
    color: var(--bk-caption, #6b7280);
}

.site-gallery {
    --cols-now: var(--cols, 3);
    display: grid;
    gap: var(--gap, 12px);
    grid-template-columns: repeat(var(--cols-now), minmax(0, 1fr));
}

.site-gallery-item {
    display: block;
    min-width: 0;
}

.site-carousel {
    --slides-now: var(--slides, 1);
}

.site-carousel-view {
    position: relative;
}

.site-carousel-track {
    display: flex;
    gap: var(--gap, 12px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.site-carousel-track::-webkit-scrollbar {
    display: none;
}

.site-slide {
    flex: 0 0 calc((100% - (var(--slides-now) - 1) * var(--gap, 12px)) / var(--slides-now));
    min-width: 0;
    scroll-snap-align: start;
}

.site-carousel-arrow {
    align-items: center;
    background: var(--bk-nav, rgba(17, 24, 39, .6));
    border: 0;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: flex;
    font-size: 24px;
    height: 40px;
    inset-block-start: calc(50% - 20px);
    justify-content: center;
    line-height: 1;
    position: absolute;
    width: 40px;
}

.site-carousel-arrow:hover {
    background: rgba(17, 24, 39, .85);
}

.site-carousel-arrow.is-prev {
    inset-inline-start: 10px;
}

.site-carousel-arrow.is-next {
    inset-inline-end: 10px;
}

[dir=rtl] .site-carousel-arrow span {
    display: inline-block;
    transform: scaleX(-1);
}

.site-carousel-dots {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 12px;
}

.site-carousel-dot {
    background: var(--bk-nav, #1f2937);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    height: 10px;
    opacity: .3;
    padding: 0;
    width: 10px;
}

.site-carousel-dot.is-active {
    opacity: 1;
}

.site-carousel-arrow:focus-visible,
.site-carousel-dot:focus-visible,
.site-carousel-track:focus-visible,
.site-gallery-item:focus-visible,
.site-social-icon:focus-visible,
.site-accordion summary:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.site-lightbox {
    background: none;
    border: 0;
    max-height: 100vh;
    max-width: 100vw;
    padding: 0;
}

.site-lightbox::backdrop {
    background: rgba(0, 0, 0, .88);
}

.site-lightbox img {
    display: block;
    max-height: 90vh;
    max-width: 90vw;
}

.site-lightbox button {
    background: rgba(17, 24, 39, .75);
    border: 0;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    font-size: 22px;
    height: 40px;
    line-height: 1;
    position: fixed;
    width: 40px;
}

.site-lightbox .is-close {
    inset-block-start: 16px;
    inset-inline-end: 16px;
}

.site-lightbox .is-prev {
    inset-block-start: calc(50% - 20px);
    inset-inline-start: 16px;
}

.site-lightbox .is-next {
    inset-block-start: calc(50% - 20px);
    inset-inline-end: 16px;
}

.site-video,
.site-map {
    aspect-ratio: var(--ratio, 16 / 9);
    background: #f3f4f6;
    border-radius: var(--bk-img-r, 8px);
    overflow: hidden;
}

.site-video iframe,
.site-video video,
.site-map iframe {
    border: 0;
    display: block;
    height: 100%;
    width: 100%;
}

.site-map {
    aspect-ratio: auto;
    height: var(--bk-map-h, 400px);
}

.site-hero,
.site-cta {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: var(--bk-min-h, 0);
}

.site-hero::after,
.site-cta::after {
    background: var(--bk-overlay, transparent);
    content: '';
    inset: 0;
    opacity: var(--bk-overlay-o, 1);
    pointer-events: none;
    position: absolute;
}

.site-hero-inner {
    width: 100%;
    z-index: 1;
}

.site-hero h1,
.site-cta h2 {
    color: var(--bk-title-color, inherit);
}

.site-hero p,
.site-cta p {
    color: var(--bk-body-color, inherit);
}

.site-btn.is-primary {
    background: var(--bk-btn-bg, #2563eb);
    color: var(--bk-btn-color, #fff);
}

.site-btn.is-outline {
    color: var(--bk-btn-color, inherit);
}

.site-box {
    background: var(--bk-item-bg, transparent);
    border-color: var(--bk-item-border, #e5e7eb);
    border-radius: var(--bk-item-r, 12px);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.site-box.is-start {
    flex-direction: row;
}

.site-box-image {
    flex-shrink: 0;
    width: var(--bk-img-w, 64px);
}

.site-box-text {
    flex: 1;
    min-width: 0;
}

.site-box h3 {
    color: var(--bk-title-color, inherit);
    margin: 0 0 8px;
}

.site-box p {
    color: var(--bk-body-color, inherit);
}

.site-stat-number {
    color: var(--bk-number, #111827);
    font-size: var(--bk-number-size, 40px);
}

.site-stat-title {
    color: var(--bk-body-color, inherit);
}

.site-accordions {
    display: flex;
    flex-direction: column;
    gap: var(--bk-gap, 8px);
}

.site-accordion {
    background: var(--bk-item-bg, transparent);
    border-color: var(--bk-item-border, #e5e7eb);
    border-radius: var(--bk-item-r, 8px);
    overflow: hidden;
    padding: 0;
}

.site-accordion + .site-accordion {
    margin-top: 0;
}

.site-accordion summary {
    align-items: center;
    background: var(--bk-title-bg, transparent);
    color: var(--bk-title-color, inherit);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    list-style: none;
    padding: 12px 16px;
}

.site-accordion summary::-webkit-details-marker {
    display: none;
}

.site-accordion summary::after {
    content: '+';
    flex-shrink: 0;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
}

.site-accordion[open] summary::after {
    content: '\2212';
}

.site-accordion[open] summary {
    margin-bottom: 0;
}

.site-accordion-body {
    color: var(--bk-body-color, inherit);
    padding: 12px 16px 16px;
}

.site-tab {
    border-radius: 6px 6px 0 0;
    color: var(--bk-title-color, #6b7280);
}

.site-tab-input:checked + .site-tab {
    background: var(--bk-title-bg, transparent);
    border-bottom-color: var(--bk-active, #2563eb);
    color: var(--bk-active, #2563eb);
}

.site-tab-panel {
    background: var(--bk-item-bg, transparent);
    color: var(--bk-body-color, inherit);
    padding: 16px;
}

.site-quotes {
    --quote-cols: var(--cols, 2);
    grid-template-columns: repeat(var(--quote-cols), minmax(0, 1fr));
}

.site-quote {
    background: var(--bk-item-bg, transparent);
    border-color: var(--bk-item-border, #e5e7eb);
    border-radius: var(--bk-item-r, 12px);
}

.site-quote blockquote {
    color: var(--bk-body-color, inherit);
}

.site-quote figcaption strong {
    color: var(--bk-title-color, inherit);
}

.site-social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.site-social.at-center {
    justify-content: center;
}

.site-social.at-end {
    justify-content: flex-end;
}

.site-social-icon {
    align-items: center;
    background: var(--bk-item-bg, #2563eb);
    color: var(--bk-icon-color, #fff);
    display: flex;
    height: calc(var(--bk-icon-size, 20px) * 2);
    justify-content: center;
    width: calc(var(--bk-icon-size, 20px) * 2);
}

.site-social-icon svg {
    fill: currentColor;
    height: var(--bk-icon-size, 20px);
    width: var(--bk-icon-size, 20px);
}

.is-circle .site-social-icon {
    border-radius: 50%;
}

.is-rounded .site-social-icon {
    border-radius: 8px;
}

/* The Button block: one button or a group. Its Style tab sets the --bk-btn-* variables. */
.site-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bk-gap, 12px);
    justify-content: flex-start;
}

.site-buttons.at-center {
    justify-content: center;
}

.site-buttons.at-end {
    justify-content: flex-end;
}

.site-buttons.is-column {
    align-items: flex-start;
    flex-direction: column;
}

.site-buttons.is-column.at-center {
    align-items: center;
}

.site-buttons.is-column.at-end {
    align-items: flex-end;
}

.site-buttons.at-justify > .site-btn {
    flex: 1 1 0;
}

.site-buttons.is-column.at-justify {
    align-items: stretch;
}

.site-buttons .site-btn {
    align-items: center;
    border: 1px solid transparent;
    border-radius: var(--bk-btn-r, 8px);
    display: inline-flex;
    gap: var(--bk-btn-icon-gap, .5em);
    justify-content: center;
    line-height: 1.2;
    text-align: center;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.site-buttons .site-btn.is-small {
    font-size: .875em;
    padding: 7px 14px;
}

.site-buttons .site-btn.is-large {
    font-size: 1.125em;
    padding: 14px 28px;
}

.site-buttons .site-btn.is-primary {
    background: var(--bk-btn-bg, #2563eb);
    border-color: var(--bk-btn-border, var(--bk-btn-bg, #2563eb));
    color: var(--bk-btn-color, #fff);
}

.site-buttons .site-btn.is-secondary {
    background: var(--bk-btn-bg, #111827);
    border-color: var(--bk-btn-border, var(--bk-btn-bg, #111827));
    color: var(--bk-btn-color, #fff);
}

.site-buttons .site-btn.is-outline {
    background: transparent;
    border-color: var(--bk-btn-border, currentColor);
    color: var(--bk-btn-color, inherit);
}

.site-buttons .site-btn.is-text {
    background: none;
    border-color: transparent;
    color: var(--bk-btn-color, #2563eb);
    padding-inline: 0;
}

@media (hover: hover) {
    .site-buttons .site-btn:is(.is-primary, .is-secondary):hover {
        background: var(--bk-btn-hover-bg, var(--bk-btn-bg, #1d4ed8));
        border-color: var(--bk-btn-hover-bg, var(--bk-btn-border, var(--bk-btn-bg, #1d4ed8)));
        color: var(--bk-btn-hover-color, var(--bk-btn-color, #fff));
        filter: brightness(.9);
    }

    /* A chosen hover background is used as it is. */
    [style*="--bk-btn-hover-bg"] .site-buttons .site-btn:hover {
        filter: none;
    }

    .site-buttons .site-btn.is-outline:hover {
        background: var(--bk-btn-hover-bg, var(--bk-btn-border, #111827));
        border-color: var(--bk-btn-hover-bg, var(--bk-btn-border, #111827));
        color: var(--bk-btn-hover-color, #fff);
    }

    .site-buttons .site-btn.is-text:hover {
        color: var(--bk-btn-hover-color, var(--bk-btn-color, #2563eb));
        text-decoration: underline;
    }
}

.site-buttons .site-btn:focus-visible {
    outline: 2px solid var(--bk-btn-bg, #2563eb);
    outline-offset: 2px;
}

.site-btn-icon {
    color: var(--bk-btn-icon-color, currentColor);
    fill: none;
    flex: none;
    height: var(--bk-btn-icon-size, 1.1em);
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: var(--bk-btn-icon-size, 1.1em);
}

.site-btn-icon.is-fill {
    fill: currentColor;
    stroke: none;
}

/* An uploaded SVG: shapes with no colour of their own take the button's (or the icon) colour. */
.site-btn-icon.is-custom {
    display: inline-flex;
    fill: currentColor;
    stroke: none;
}

.site-btn-icon.is-custom svg {
    display: block;
    height: 100%;
    width: 100%;
}

.site-btn-icon.is-image {
    object-fit: contain;
}

/* Icon above or below the label. */
.site-btn:is(.icon-top, .icon-bottom) {
    flex-direction: column;
}

/* Arrows point the way the text reads. */
:dir(rtl) .site-btn-icon.is-arrow,
.rtl .site-btn-icon.is-arrow {
    transform: scaleX(-1);
}

@media (max-width: 600px) {
    .site-buttons.stack-mobile {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 900px) {
    .site-gallery {
        --cols-now: var(--cols-t, 2);
    }

    .site-carousel {
        --slides-now: var(--slides-t, 1);
    }

    .site-quotes {
        --quote-cols: min(var(--cols, 2), 2);
    }
}

@media (max-width: 600px) {
    .site-gallery {
        --cols-now: var(--cols-m, 1);
    }

    .site-carousel {
        --slides-now: var(--slides-m, 1);
    }

    .site-quotes {
        --quote-cols: 1;
    }
}