/* 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;
}

/* Buildr adds this empty grid column when its select-menu slot exists. It is visible only at the
   site's own nav-collapse width; its carried grid CSS supplies the matching bottom gutter. */
#mobile-menu-wrap { display: none; }

.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-start: 0;
    z-index: 30;
    width: 0;
    padding: 0;
    overflow-y: auto;
    color: #fff;
    background: var(--wesa-brand);
    box-shadow: 0 0 2rem rgba(0, 0, 0, .25);
    transition: width .3s ease-in-out;
}

.wesa-offcanvas.sb-style-overlay { z-index: 30; }
.wesa-offcanvas.sb-active { width: 100%; }

.wesa-offcanvas-close {
    position: absolute;
    inset-block-start: .5rem;
    inset-inline-end: 1rem;
    z-index: 1;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
}

.wesa-offcanvas .off-canvas-body { padding: 4.5rem 1.5rem 1.5rem; }
.wesa-offcanvas .off-canvas-menu { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.wesa-offcanvas .off-canvas-menu > li { margin-block-end: 1rem; }
.wesa-offcanvas .off-canvas-menu a,
.wesa-offcanvas .off-canvas-menu .zen-menu-heading { color: inherit; }
.wesa-offcanvas .off-canvas-menu .zen-menu-child { position: static; display: block; }

/* 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; }

/* UIkit's heading margin, which is what the source titles sit on: 20px below, none above. In px
   because these sites set a 13px root, where .5rem came out at 6.5px against the source's 20. */
.wk-title { margin-block: 0 20px; }

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

/* Switcher → tab list plus panels (see js/template.js)
   The nav carried UIkit's subnav metrics, and the sites' stylesheets were written against them: they
   set only type and the selected state, and expect the spacing to already be there. So reproduce
   those metrics rather than invent spacing — in px, because these sites set a 13px root and rem
   values land somewhere else entirely. Structure keeps normal specificity, since the carried theme
   styles bare `ul` and would otherwise put the nav back on the browser's list indent; appearance
   drops to zero specificity so a site's own rule always wins. */
.wk-switcher-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: 0 0 1rem -20px;
    padding: 0;
    list-style: none;
}

.wk-switcher-nav > li {
    flex: none;
    padding-left: 20px;
}

/* Widgetkit emitted this alignment class and UIkit gave it meaning; nothing else does now. */
.wk-switcher-nav.uk-flex-center { justify-content: center; }

:where(.wk-switcher-nav a) {
    display: block;
    padding: 5px 10px;
    background: transparent;
    text-decoration: none;
}

/* Only for sites whose stylesheet does not style the selected tab itself. */
:where(.wk-switcher-nav .uk-active > a) { text-decoration: underline; }

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

/* Widgetkit printed these UIkit utility classes and UIkit gave them meaning. Supplying just the two
   the switcher relies on, scoped to it: the gap between the tabs and the panel, and the centred media
   the switcher template asked for. Deliberately not the whole framework — UIkit's own spacing applied
   to this simplified markup inflates it (see the hero). */
.wk-switcher-panels.uk-margin-top { margin-top: 20px; }
.wk-switcher .wk-media.uk-text-center { text-align: center; }
.wk-switcher-nav.uk-flex-right { justify-content: flex-end; }

/* Panel transitions, reproducing the UIkit animations Widgetkit named in the widget's settings.
   Same durations and keyframes as the build the Joomla 3 site shipped. */
.wk-switcher-panel[class*="uk-animation-"] {
    /* UIkit's Switcher overrides the generic .5s animation with its own 200ms. */
    animation-duration: .2s;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
}

.wk-switcher-panel.uk-animation-fade {
    animation-name: uk-fade;
    animation-timing-function: linear;
}

.wk-switcher-panel.uk-animation-slide-left-small { animation-name: uk-fade-left-small; }
.wk-switcher-panel.uk-animation-slide-right-small { animation-name: uk-fade-right-small; }

@keyframes uk-fade { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes uk-fade-left-small { 0% { opacity: 0; transform: translateX(-10px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes uk-fade-right-small { 0% { opacity: 0; transform: translateX(10px); } 100% { opacity: 1; transform: translateX(0); } }

@media (prefers-reduced-motion: reduce) {
    .wk-switcher-panel[class*="uk-animation-"] { animation: 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 */
/* A flex row, as UIkit's .uk-grid is — not a CSS grid.
   This has to be flex because the sites size the cards themselves, in per cent, against the row:
   capexpert's application page sets `.uk-child-width-1-4\@xl > * { width: 24% }`, which is 24% of
   the row on the source but was resolving against a 234px grid track here, collapsing every card to
   56px. The three-per-row flow is flex wrapping at 24% plus the gap, not a breakpoint.
   The uk-child-width-1-N classes below are only a fallback for sites that set no width of their own;
   UIkit's breakpoints are s 640, m 960, l 1200, xl 1600. */
.wk-grid, .wk-slideset {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wesa-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

:where(.wk-grid, .wk-slideset) > * { flex: none; width: 100%; }

:where(.wk-grid.uk-child-width-1-2) > * { width: calc(100% / 2 - var(--wesa-gap)); }
:where(.wk-grid.uk-child-width-1-3) > * { width: calc(100% / 3 - var(--wesa-gap)); }
:where(.wk-grid.uk-child-width-1-4) > * { width: calc(100% / 4 - var(--wesa-gap)); }

@media (min-width: 640px) {
    :where(.wk-grid[class*="uk-child-width-1-2@s"]) > * { width: calc(100% / 2 - var(--wesa-gap)); }
    :where(.wk-grid[class*="uk-child-width-1-3@s"]) > * { width: calc(100% / 3 - var(--wesa-gap)); }
}

@media (min-width: 960px) {
    :where(.wk-grid[class*="uk-child-width-1-3@m"]) > * { width: calc(100% / 3 - var(--wesa-gap)); }
    :where(.wk-grid[class*="uk-child-width-1-4@m"]) > * { width: calc(100% / 4 - var(--wesa-gap)); }
}

@media (min-width: 1200px) {
    :where(.wk-grid[class*="uk-child-width-1-3@l"]) > * { width: calc(100% / 3 - var(--wesa-gap)); }
    :where(.wk-grid[class*="uk-child-width-1-4@l"]) > * { width: calc(100% / 4 - var(--wesa-gap)); }
}

@media (min-width: 1600px) {
    :where(.wk-grid[class*="uk-child-width-1-4@xl"]) > * { width: calc(100% / 4 - var(--wesa-gap)); }
    :where(.wk-grid[class*="uk-child-width-1-5@xl"]) > * { width: calc(100% / 5 - var(--wesa-gap)); }
}

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

/* uk-grid-match made every card in a row the same height, which is why the source's rows are taller
   than their tallest card's content. UIkit's own two rules, reproduced. */
.wk-grid.uk-grid-match > * { display: flex; flex-wrap: wrap; }
.wk-grid.uk-grid-match > * > :not([class*="uk-width"]) { box-sizing: border-box; width: 100%; flex: auto; }

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

/* Widgetkit's controls were inline SVG chevrons centred on the slider edges.  The source UIkit
   stylesheet provided only this positioning; keep it scoped to the reconstructed slider rather
   than carrying that framework back into the Joomla 6 site. */
.wk-slideset-slider--ready { position: relative; }

/* The carried site CSS layers slide copy over its image with absolute positioning. Widgetkit's
   `.uk-panel` established the containing block for each individual slide; preserve that base rule
   locally so three slides never share the track as their containing block. */
.wk-slideset-slider--ready .uk-panel { position: relative; }

.wk-slideset-slider--ready .wk-slidenav {
    position: absolute;
    top: 50%;
    z-index: 1;
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    color: rgba(102, 102, 102, .5);
    line-height: 0;
    transform: translateY(-50%);
}

.wk-slideset-slider--ready .wk-slidenav-previous { left: 0; }
.wk-slideset-slider--ready .wk-slidenav-next { right: 0; }
.wk-slideset-slider--ready .wk-slidenav:focus-visible { outline: 2px solid var(--wesa-brand); outline-offset: -2px; }

.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; }

/* Widgetkit left a gap between the track and the dots, so the row was that much taller. It matters
   beyond spacing: these heroes carry a full-bleed background sized `auto`, and a row shorter than the
   image crops it along the bottom edge, which reads as the background being scaled wrongly. Set on
   the track rather than the nav, because the sites' own stylesheets target .uk-slider-nav. */
.wk-slideset-slider--ready .wk-slideset { margin-bottom: 20px; }

/* 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 → an embedded map, with the address kept behind it for print and screen readers */
.wk-map-marker { font-style: normal; }
.wk-map-frame { display: block; border: 0; max-width: 100%; }

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

/* Small screens ------------------------------------------------------------------------------- */
/* The menu collapse itself is emitted by index.php at each site's own navcollapse width. */
@media (max-width: 782px) {
    :root { --wesa-gap: 1rem; }

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

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