/* Webworks mobile action bar: fixed to the bottom of the screen on phones, slides up when shown.
   Colours come from the theme through the chosen UIkit class (navbar container, card or tile).
   The doubled class outranks the theme's own padding and radius for those classes (e.g. uk-tile's 40px).
   Position, offsets and stacking use a third selector part (0,3,0): a theme's own
   .uk-navbar-container:not(.uk-navbar-transparent) rule (position: relative; z-index: 990, as in Devstack) is (0,2,0)
   and would win on load order alone, as it does on Joomla where element CSS loads before the theme's. */
.ww-actionbar.ww-actionbar:not(.ww-actionbar-preview) {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 972; /* under the TOC's mobile list and backdrop, over back to top */
}
.ww-actionbar.ww-actionbar {
    box-sizing: border-box;
    margin: 0 !important;
    border-radius: 0;
    container-type: inline-size;
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.3s;
}
/* Padding also needs (0,3,0): Devstack's .uk-navbar-container:not(.uk-navbar) sets padding-top: 16px; padding-bottom: 0 at (0,2,0) */
.ww-actionbar.ww-actionbar.ww-actionbar {
    padding: 10px calc(16px + env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px));
}
:where(.ww-actionbar) { border: 0; box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.25); }
.ww-actionbar.is-visible {
    transform: none;
    visibility: visible;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s;
}

.ww-actionbar-inner { display: flex; align-items: center; gap: 12px; max-width: 600px; margin: 0 auto; }
.ww-actionbar-text { flex: 1; min-width: 0; margin: 0; line-height: 1.3; }
.ww-actionbar-button { flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.ww-actionbar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* With supporting text, the button takes only the room it needs */
.ww-actionbar-inner:has(.ww-actionbar-text) .ww-actionbar-button { flex: none; max-width: 65%; }

/* Narrow phones: drop the supporting text, full-width button */
@container (max-width: 359px) {
    .ww-actionbar .ww-actionbar-text { display: none; }
    .ww-actionbar .ww-actionbar-inner .ww-actionbar-button { flex: 1; max-width: none; }
}

/* Two buttons share the row, the first (main) one wider so it stays the more prominent. The template leaves the supporting text out.
   Padding is trimmed so both fit at 320px; labels still cut off with an ellipsis rather than wrapping, so the bar's height never changes.
   After the narrow-phone rule above so its full-width flex doesn't win. The display is set again here because UIkit's .uk-button
   (inline-block) can win over the first rule on load order, and then a long label would spill out instead of getting its ellipsis. */
.ww-actionbar .ww-actionbar-inner.ww-actionbar-two .ww-actionbar-button { flex: 3 1 0; max-width: none; padding-inline: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.ww-actionbar .ww-actionbar-inner.ww-actionbar-two .ww-actionbar-second { flex-grow: 2; }

/* Phones only */
/* The width blocks below and further down are for UIkit's default breakpoints. When the site's style changes one, Breakpoints::rewriteAll writes them again at the style's widths and the element gets ww-actionbar-bp, which the :where(:not(.ww-actionbar-bp)) in each selector skips (:where keeps their weight). */
@media (min-width: 960px) { .ww-actionbar:not(.ww-actionbar-preview):where(:not(.ww-actionbar-bp)) { display: none !important; } }

/* In the builder: where it's placed, shown at every width, so it can be selected */
.ww-actionbar.ww-actionbar-preview { transform: none; visibility: visible; transition: none; }

@media (prefers-reduced-motion: reduce) {
    .ww-actionbar.ww-actionbar, .ww-actionbar.is-visible { transition: none; }
}