/* ==========================================================================
   roskam template - additions for Joomla 4/5/6
   Loaded after bootstrap.css, theme.css and custom.css (the unchanged CSS of
   the old yoo_master2 template). Keep this file small: the old CSS does the look.
   ========================================================================== */

/*
 * Joomla 4+ core layouts that this template does not override (e.g. com_users,
 * com_contact, com_finder) hide labels with .visually-hidden (Bootstrap 5).
 * The old CSS only knows .element-invisible, so add the same rule here.
 */
.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/*
 * Embedded video (Roskam TV, Vimeo). On the old site the iframes keep their
 * fixed size (320 x 180/240): bootstrap.css sets "iframe { max-width: none }".
 * That is kept on purpose, so the page looks exactly the same.
 * To let them shrink on very small phones (< 370 px wide), remove the comment:
 *
 * .uk-article iframe { max-width: 100%; }
 */

/*
 * prefers-reduced-motion: the off-canvas menu, dropdowns and fades switch (almost) instantly.
 * A very short duration instead of "none", because UIkit 2 waits for the "transitionend"
 * event before it finishes closing the off-canvas menu. jQuery animations (smooth scroll)
 * are switched off in roskam.js. No change for visitors without this setting.
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    -webkit-animation-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
    -webkit-transition-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
