/* Components the migrated sites' own stylesheets do not provide: the converted Widgetkit blocks,
   the slider and tabs behaviour, the off-canvas panel and the sticky header. Layout, typography and
   the grid come from the site's carried theme (css/legacy.css); css/fallback.css stands in when a
   site has none. */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Off-canvas: the old templates used a jQuery plugin; this is the same idea without jQuery. */
.wesa-offcanvas-toggle {
    display: none;
    position: fixed;
    inset-block-start: 1rem;
    inset-inline-end: 1rem;
    z-index: 30;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid currentColor;
    border-radius: .25rem;
    background: #fff;
    color: var(--wesa-brand);
    cursor: pointer;
}

.wesa-offcanvas-toggle__bar,
.wesa-offcanvas-toggle__bar::before,
.wesa-offcanvas-toggle__bar::after {
    display: block;
    width: 1.25rem;
    height: 2px;
    margin-inline: auto;
    background: currentColor;
    content: '';
}

.wesa-offcanvas-toggle__bar::before { transform: translateY(-6px); }

.wesa-offcanvas-toggle__bar::after { transform: translateY(4px); }

.wesa-offcanvas {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: 29;
    width: min(20rem, 85vw);
    padding: 4.5rem 1.5rem 1.5rem;
    overflow-y: auto;
    background: #fff;
    box-shadow: 0 0 2rem rgba(0, 0, 0, .25);
}

/* Minimal reset the carried theme may not include. */
body { margin: 0; }

img, video { max-width: 100%; height: auto; }

/* The old template kept the header in view with a script; this is the same result in CSS. The id
   selector matches the carried theme's own `#logowrap { position: relative }`, which would win otherwise. */
#logowrap[data-scroll-sticky],
[data-scroll-sticky] {
    position: sticky;
    inset-block-start: 0;
    z-index: 25;
    background: #fff;
}

/* Converted Widgetkit blocks ------------------------------------------------------------------ */
.wk-media { margin: 0 0 1rem; }

.wk-title { margin-block: 0 .5rem; }

.wk-link { display: inline-block; margin-block-start: .5rem; }

/* Switcher → tab list plus panels (see js/template.js) */
.wk-switcher-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.wk-switcher-nav a {
    display: block;
    padding: .5rem 1rem;
    border: 1px solid currentColor;
    border-radius: .25rem;
    text-decoration: none;
}

.wk-switcher-nav a[aria-selected="true"] { background: var(--wesa-brand); color: #fff; }

.wk-switcher-panel[hidden] { display: none; }

.wk-switcher-left, .wk-switcher-right { display: flex; gap: var(--wesa-gap); align-items: flex-start; }

.wk-switcher-left .wk-switcher-nav, .wk-switcher-right .wk-switcher-nav { flex-direction: column; flex: 0 0 14rem; }

.wk-switcher-right { flex-direction: row-reverse; }

.wk-switcher-panels { flex: 1 1 auto; min-width: 0; }

/* Accordion → native <details> */
.wk-accordion-item { border-block-end: 1px solid rgba(0, 0, 0, .12); }

.wk-accordion-item > summary {
    padding: .75rem 0;
    font-weight: 600;
    color: var(--wesa-brand);
    cursor: pointer;
}

.wk-accordion-content { padding-block-end: 1rem; }

/* Grid and slideset → responsive columns from the widget's own settings */
.wk-grid, .wk-slideset {
    display: grid;
    gap: var(--wesa-gap);
    margin: 0;
    padding: 0;
    list-style: none;
    grid-template-columns: repeat(var(--wk-columns, 1), minmax(0, 1fr));
}

.wk-grid[data-columns="2"], .wk-slideset[data-columns="2"] { --wk-columns: 2; }
.wk-grid[data-columns="3"], .wk-slideset[data-columns="3"] { --wk-columns: 3; }
.wk-grid[data-columns="4"], .wk-slideset[data-columns="4"] { --wk-columns: 4; }

@media (min-width: 960px) {
    .wk-grid[data-columns-l="3"] { --wk-columns: 3; }
    .wk-grid[data-columns-l="4"] { --wk-columns: 4; }
}

@media (min-width: 1200px) {
    .wk-grid[data-columns-xl="4"] { --wk-columns: 4; }
    .wk-grid[data-columns-xl="5"] { --wk-columns: 5; }
}

.wk-card, .wk-slide { margin: 0; }

/* Slideset slider: a horizontal track, as the source site's slider had, moved by the script. */
.wk-slideset-slider--ready { overflow: hidden; }

.wk-slideset-slider--ready .wk-slideset {
    display: flex !important;
    flex-wrap: nowrap !important;
    transition: transform .4s ease;
    /* Let the script own horizontal drag; vertical scrolling stays with the page. */
    touch-action: pan-y;
    cursor: grab;
}

.wk-slideset-slider--ready .wk-slideset:active { cursor: grabbing; }

/* Text selection and image dragging both abort the drag gesture mid-swipe. */
.wk-slideset-slider--ready .wk-slide { user-select: none; -webkit-user-select: none; }
.wk-slideset-slider--ready .wk-slide img { -webkit-user-drag: none; }
.wk-slideset-slider--ready .wk-slide { flex: 0 0 100%; max-width: 100%; }
.wk-slideset-slider--ready:focus-visible { outline: 2px solid var(--wesa-brand); outline-offset: 2px; }

.wk-slideset-nav {
    display: flex;
    gap: .5rem;
    justify-content: center;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

/* Zero specificity: these are a fallback for sites whose own stylesheet does not style the dots.
   A carried `.uk-dotnav` rule from the site's Joomla 3 theme wins over all of them, which is the
   point — the dots should look like the site's, not like ours. */
:where(.wk-slideset-nav a) {
    display: block;
    width: 14px;
    height: 14px;
    border: 1px solid currentColor;
    border-radius: 50%;
}

:where(.wk-slideset-nav .uk-active a) { background: currentColor; }

/* Map → address plus a link to the coordinates */
.wk-map-marker { font-style: normal; }

.wk-map-link { display: inline-block; }

/* Small screens ------------------------------------------------------------------------------- */
@media (max-width: 782px) {
    :root { --wesa-gap: 1rem; }

    .wesa-offcanvas-toggle { display: block; }

    #navwrap { display: none; }

    .wk-switcher-left, .wk-switcher-right { display: block; }

    .wk-grid, .wk-slideset { --wk-columns: 1 !important; }
}

@media print {
    .wesa-offcanvas, .wesa-offcanvas-toggle, #navwrap, #footerwrap { display: none !important; }
}