/**
 * SideKit – offcanvas menu for Joomla
 * @copyright  (C) 2026 Thrane.nu
 * @license    GNU General Public License version 2 or later; see LICENSE.txt
 *
 * Public custom properties (set them on .sk-i-ID or in your template):
 * --sk-width, --sk-max-width, --sk-height, --sk-bg, --sk-color, --sk-link, --sk-active,
 * --sk-hover-bg, --sk-divider, --sk-divider-width, --sk-overlay, --sk-overlay-blur,
 * --sk-duration, --sk-ease, --sk-radius, --sk-indent, --sk-font, --sk-font-size,
 * --sk-font-size-sub, --sk-item-py, --sk-shadow, --sk-offset,
 * --sk-trigger-color, --sk-trigger-bg
 */

/* ---------- Theme (private defaults, overridden by the public --sk-* vars) ---------- */
.sk-panel {
  --_bg: #ffffff;
  --_sub-bg: rgba(0, 0, 0, .025);
  --_color: #1f2328;
  --_muted: #6b7280;
  --_link: #1f2328;
  --_active: #0b5ed7;
  --_hover: rgba(0, 0, 0, .045);
  --_divider: rgba(0, 0, 0, .08);
  --_ease: cubic-bezier(.22, .61, .36, 1);
  color-scheme: light;
}

.sk-panel[data-theme="dark"] {
  --_bg: #16181d;
  --_sub-bg: rgba(255, 255, 255, .03);
  --_color: #e8eaed;
  --_muted: #9aa0a6;
  --_link: #e8eaed;
  --_active: #7ab7ff;
  --_hover: rgba(255, 255, 255, .06);
  --_divider: rgba(255, 255, 255, .09);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  .sk-panel[data-theme="auto"] {
    --_bg: #16181d;
    --_sub-bg: rgba(255, 255, 255, .03);
    --_color: #e8eaed;
    --_muted: #9aa0a6;
    --_link: #e8eaed;
    --_active: #7ab7ff;
    --_hover: rgba(255, 255, 255, .06);
    --_divider: rgba(255, 255, 255, .09);
    color-scheme: dark;
  }
}

/* ---------- Panel ---------- */
.sk-panel {
  position: fixed;
  inset: 0 0 0 auto;
  box-sizing: border-box;
  width: min(var(--sk-width, 85%), var(--sk-max-width, 100vw));
  max-width: none;
  height: 100%;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--sk-bg, var(--_bg));
  color: var(--sk-color, var(--_color));
  font-family: var(--sk-font, inherit);
  box-shadow: var(--sk-shadow, 0 0 24px rgba(0, 0, 0, .12));
  opacity: 1;
  transform: translateX(100%);
  transition:
    transform var(--sk-duration, 300ms) var(--sk-ease, var(--_ease)),
    opacity var(--sk-duration, 300ms) var(--sk-ease, var(--_ease));
}

.sk-panel *,
.sk-panel *::before,
.sk-panel *::after {
  box-sizing: border-box;
}

.sk-panel:not([open]) {
  display: none;
}

.sk-panel[data-pos="right"] {
  inset: 0 0 0 auto;
  border-radius: var(--sk-radius, 0) 0 0 var(--sk-radius, 0);
}

.sk-panel[data-pos="left"] {
  inset: 0 auto 0 0;
  transform: translateX(-100%);
  border-radius: 0 var(--sk-radius, 0) var(--sk-radius, 0) 0;
}

.sk-panel[data-pos="top"],
.sk-panel[data-pos="bottom"] {
  width: 100%;
  height: var(--sk-height, auto);
  max-height: 100dvh;
}

.sk-panel[data-pos="top"] {
  inset: 0 0 auto 0;
  transform: translateY(-100%);
  border-radius: 0 0 var(--sk-radius, 0) var(--sk-radius, 0);
}

.sk-panel[data-pos="bottom"] {
  inset: auto 0 0 0;
  transform: translateY(100%);
  border-radius: var(--sk-radius, 0) var(--sk-radius, 0) 0 0;
}

.sk-panel[data-pos="full"],
.sk-panel.sk-full {
  inset: 0;
  width: 100%;
  height: 100dvh;
  border-radius: 0;
  box-shadow: none;
}

.sk-panel[data-pos="full"] {
  transform: scale(.98);
  opacity: 0;
}

.sk-panel[data-anim="fade"] {
  transform: none;
  opacity: 0;
}

.sk-panel.sk-open {
  transform: none;
  opacity: 1;
}

.sk-panel::backdrop {
  background: var(--sk-overlay, rgba(0, 0, 0, .5));
  backdrop-filter: blur(var(--sk-overlay-blur, 0px));
  -webkit-backdrop-filter: blur(var(--sk-overlay-blur, 0px));
  opacity: 0;
  transition: opacity var(--sk-duration, 300ms) ease;
}

.sk-panel.sk-open::backdrop {
  opacity: 1;
}

.sk-panel[data-pos="full"]::backdrop,
.sk-panel.sk-full::backdrop {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.sk-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100dvh;
}

/* ---------- Header ---------- */
.sk-header {
  display: flex;
  flex: none;
  align-items: center;
  gap: .75rem;
  min-height: 64px;
  padding: .625rem .75rem .625rem 1.25rem;
  border-bottom: var(--sk-divider-width, 1px) solid var(--sk-divider, var(--_divider));
}

.sk-header.sk-close-at-left {
  padding: .625rem 1.25rem .625rem .75rem;
}

.sk-brand {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: .75rem;
  min-width: 0;
}

.sk-logo {
  display: block;
  max-width: 100%;
  max-height: 40px;
  width: auto;
  height: auto;
}

.sk-logo-link {
  display: block;
  line-height: 0;
}

.sk-title {
  overflow: hidden;
  font-size: 1.125rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sk-close {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-width: 44px;
  height: 44px;
  padding: 0 .65rem;
  border: 0;
  border-radius: 10px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: .9375rem;
  cursor: pointer;
}

.sk-close:hover {
  background: var(--sk-hover-bg, var(--_hover));
}

.sk-close-icon {
  position: relative;
  width: 18px;
  height: 18px;
}

.sk-close-icon::before,
.sk-close-icon::after {
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  content: "";
  transform: rotate(45deg);
}

.sk-close-icon::after {
  transform: rotate(-45deg);
}

.sk-close--floating {
  position: absolute;
  top: .625rem;
  right: .75rem;
  z-index: 5;
}

.sk-panel[data-pos="left"] .sk-close--floating {
  right: .75rem;
}

.sk-no-header .sk-nav {
  padding-top: 64px;
}

/* ---------- Navigation ---------- */
.sk-nav {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.sk-root {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.sk-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sk-root > .sk-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sk-item {
  margin: 0;
  padding: 0;
}

.sk-row {
  display: flex;
  align-items: stretch;
  border-bottom: var(--sk-divider-width, 1px) solid var(--sk-divider, var(--_divider));
}

.sk-link {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: .65rem;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  margin: 0;
  padding: var(--sk-item-py, .7rem) 1.25rem;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--sk-link, var(--_link));
  font: inherit;
  font-size: var(--sk-font-size, 1.125rem);
  line-height: 1.35;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

.sk-sub .sk-link {
  font-size: var(--sk-font-size-sub, 1rem);
}

a.sk-link:hover,
button.sk-link:hover,
.sk-toggle:hover {
  background: var(--sk-hover-bg, var(--_hover));
  color: var(--sk-link, var(--_link));
}

.sk-heading {
  cursor: default;
  font-weight: 600;
}

.sk-text {
  flex: 0 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.sk-active > .sk-row > .sk-link {
  font-weight: 600;
}

.sk-current > .sk-row > .sk-link {
  color: var(--sk-active, var(--_active));
  font-weight: 650;
  box-shadow: inset 3px 0 0 var(--sk-active, var(--_active));
}

.sk-panel :focus-visible {
  outline: 2px solid var(--sk-active, var(--_active));
  outline-offset: -2px;
}

.sk-icon {
  flex: none;
  width: 1.25em;
  text-align: center;
}

.sk-img {
  flex: none;
  width: auto;
  max-height: 1.5em;
}

.sk-badge {
  flex: none;
  margin-inline-start: auto;
  padding: .2em .6em;
  border-radius: 999px;
  background: var(--sk-badge-bg, #0d6efd);
  color: var(--sk-badge-fg, #fff);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.25;
}

.sk-separator {
  padding: 1.1rem 1.25rem .4rem;
  border-bottom: var(--sk-divider-width, 1px) solid var(--sk-divider, var(--_divider));
  color: var(--_muted);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sk-separator:empty {
  padding: 0;
  border-bottom-width: 4px;
}

/* ---------- Toggles and arrows ---------- */
.sk-toggle--arrow {
  display: grid;
  flex: 0 0 52px;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-inline-start: var(--sk-divider-width, 1px) solid var(--sk-divider, var(--_divider));
  background: none;
  color: var(--sk-link, var(--_link));
  cursor: pointer;
}

.sk-toggle--row .sk-arrow {
  margin-inline-start: auto;
}

.sk-toggle--row .sk-badge + .sk-arrow {
  margin-inline-start: .5rem;
}

.sk-arrow {
  position: relative;
  display: inline-block;
  flex: none;
  width: 14px;
  height: 14px;
  transition: transform var(--sk-duration, 300ms) var(--_ease);
}

/* Chevron */
.sk-arrow--chevron .sk-arrow::before {
  position: absolute;
  top: 1px;
  left: 3px;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  content: "";
  transform: rotate(45deg);
}

.sk-mode--accordion.sk-arrow--chevron .sk-expanded > .sk-row .sk-arrow {
  transform: rotate(180deg);
}

.sk-mode--drilldown.sk-arrow--chevron .sk-arrow {
  transform: rotate(-90deg);
}

/* Plus / minus */
.sk-arrow--plus .sk-arrow::before,
.sk-arrow--plus .sk-arrow::after {
  position: absolute;
  top: calc(50% - 1px);
  left: 1px;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  content: "";
  transition: transform var(--sk-duration, 300ms) var(--_ease);
}

.sk-arrow--plus .sk-arrow::after {
  transform: rotate(90deg);
}

.sk-mode--accordion.sk-arrow--plus .sk-expanded > .sk-row .sk-arrow::after {
  transform: rotate(90deg) scaleX(0);
}

/* Triangle */
.sk-arrow--triangle .sk-arrow::before {
  position: absolute;
  top: 2px;
  left: 4px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid currentColor;
  content: "";
}

.sk-mode--accordion.sk-arrow--triangle .sk-expanded > .sk-row .sk-arrow {
  transform: rotate(90deg);
}

/* ---------- Accordion ---------- */
.sk-mode--accordion .sk-sub {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  background: var(--_sub-bg);
  transition:
    grid-template-rows var(--sk-duration, 300ms) var(--_ease),
    visibility 0s linear var(--sk-duration, 300ms);
}

.sk-mode--accordion .sk-sub > .sk-list {
  min-height: 0;
  overflow: hidden;
}

.sk-mode--accordion .sk-expanded > .sk-sub {
  grid-template-rows: 1fr;
  visibility: visible;
  transition:
    grid-template-rows var(--sk-duration, 300ms) var(--_ease),
    visibility 0s;
}

.sk-mode--accordion .sk-level-2 > .sk-row > .sk-link { padding-inline-start: calc(1.25rem + var(--sk-indent, 16px)); }
.sk-mode--accordion .sk-level-3 > .sk-row > .sk-link { padding-inline-start: calc(1.25rem + var(--sk-indent, 16px) * 2); }
.sk-mode--accordion .sk-level-4 > .sk-row > .sk-link { padding-inline-start: calc(1.25rem + var(--sk-indent, 16px) * 3); }
.sk-mode--accordion .sk-level-5 > .sk-row > .sk-link,
.sk-mode--accordion .sk-level-6 > .sk-row > .sk-link,
.sk-mode--accordion .sk-level-7 > .sk-row > .sk-link { padding-inline-start: calc(1.25rem + var(--sk-indent, 16px) * 4); }

.sk-panel.sk-no-anim .sk-sub,
.sk-panel.sk-no-anim .sk-arrow,
.sk-panel.sk-no-anim .sk-arrow::after {
  transition: none !important;
}

/* ---------- Drill-down ---------- */
.sk-mode--drilldown .sk-sub {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  visibility: hidden;
  background: var(--sk-bg, var(--_bg));
  transform: translateX(100%);
  transition:
    transform var(--sk-duration, 300ms) var(--_ease),
    visibility 0s linear var(--sk-duration, 300ms);
}

.sk-mode--drilldown .sk-sub > .sk-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sk-mode--drilldown .sk-expanded > .sk-sub {
  visibility: visible;
  transform: none;
  transition:
    transform var(--sk-duration, 300ms) var(--_ease),
    visibility 0s;
}

/* The level underneath an open submenu is hidden from keyboard and screen readers. */
.sk-covered > .sk-sub-head,
.sk-covered > .sk-list > li > .sk-row,
.sk-covered > .sk-list > .sk-separator {
  visibility: hidden;
  transition: visibility 0s linear var(--sk-duration, 300ms);
}

.sk-sub-head {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-start;
  border-bottom: var(--sk-divider-width, 1px) solid var(--sk-divider, var(--_divider));
}

.sk-back {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
  margin: .375rem .5rem 0;
  padding: .25rem .75rem;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--sk-active, var(--_active));
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
}

.sk-back:hover {
  background: var(--sk-hover-bg, var(--_hover));
}

.sk-back-icon {
  width: 8px;
  height: 8px;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: rotate(45deg);
}

.sk-sub-title {
  padding: .25rem 1.25rem .875rem;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
}

/* ---------- Footer ---------- */
.sk-footer {
  flex: none;
  padding: 1rem 1.25rem;
  border-top: var(--sk-divider-width, 1px) solid var(--sk-divider, var(--_divider));
  color: var(--_muted);
  font-size: .875rem;
}

.sk-footer > :first-child { margin-top: 0; }
.sk-footer > :last-child { margin-bottom: 0; }
.sk-footer a { color: var(--sk-active, var(--_active)); }

.sk-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
}

/* ---------- Trigger button ---------- */
.sk-trigger {
  --_bw: 24px;
  --_bt: 2px;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  padding: .5rem;
  border: 0;
  background: none;
  color: var(--sk-trigger-color, currentColor);
  font: inherit;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.sk-size--small { --_bw: 20px; }
.sk-size--large { --_bw: 30px; --_bt: 3px; }

.sk-tbg--circle,
.sk-tbg--rounded {
  padding: .7rem;
  background: var(--sk-trigger-bg, rgba(0, 0, 0, .06));
}

.sk-tbg--circle { border-radius: 999px; }
.sk-tbg--rounded { border-radius: 12px; }

.sk-trigger--fixed-tl,
.sk-trigger--fixed-tr,
.sk-trigger--fixed-bl,
.sk-trigger--fixed-br {
  position: fixed;
  z-index: 1030;
}

.sk-trigger--fixed-tl { top: var(--sk-offset, 16px); left: var(--sk-offset, 16px); }
.sk-trigger--fixed-tr { top: var(--sk-offset, 16px); right: var(--sk-offset, 16px); }
.sk-trigger--fixed-bl { bottom: var(--sk-offset, 16px); left: var(--sk-offset, 16px); }
.sk-trigger--fixed-br { right: var(--sk-offset, 16px); bottom: var(--sk-offset, 16px); }

.sk-trigger:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.sk-burger {
  position: relative;
  display: inline-block;
  flex: none;
  width: var(--_bw);
  height: calc(var(--_bw) * .75);
  transition: transform .35s var(--_ease, ease);
}

.sk-burger > span {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--_bt);
  border-radius: var(--_bt);
  background: currentColor;
  transition: top .15s ease .15s, transform .15s ease 0s, opacity .1s ease .1s, width .2s ease, left .2s ease;
}

.sk-burger > span:nth-child(1) { top: 0; }
.sk-burger > span:nth-child(2) { top: calc(50% - var(--_bt) / 2); }
.sk-burger > span:nth-child(3) { top: calc(100% - var(--_bt)); }

/* Squeeze (default): lines slide together, then rotate. */
.sk-trigger[aria-expanded="true"] .sk-burger > span {
  transition: top .15s ease 0s, transform .15s ease .15s, opacity .1s ease .1s, width .2s ease, left .2s ease;
}

.sk-trigger[aria-expanded="true"] .sk-burger > span:nth-child(1) { top: calc(50% - var(--_bt) / 2); transform: rotate(45deg); }
.sk-trigger[aria-expanded="true"] .sk-burger > span:nth-child(2) { opacity: 0; }
.sk-trigger[aria-expanded="true"] .sk-burger > span:nth-child(3) { top: calc(50% - var(--_bt) / 2); transform: rotate(-45deg); }

/* Classic: everything at once. */
.sk-burger--classic .sk-burger > span,
.sk-burger--classic[aria-expanded="true"] .sk-burger > span {
  transition: top .25s ease, transform .25s ease, opacity .2s ease;
}

/* Spin: the icon turns half a round while the cross forms. */
.sk-burger--spin .sk-burger > span,
.sk-burger--spin[aria-expanded="true"] .sk-burger > span {
  transition: top .3s ease, transform .3s ease, opacity .2s ease;
}

.sk-burger--spin[aria-expanded="true"] .sk-burger {
  transform: rotate(180deg);
}

/* Arrow: the lines form an arrow pointing the way the panel closes. */
.sk-burger--arrow .sk-burger > span,
.sk-burger--arrow[aria-expanded="true"] .sk-burger > span {
  transition: top .25s ease, transform .25s ease, width .25s ease, left .25s ease, opacity .2s ease;
}

.sk-burger--arrow[aria-expanded="true"] .sk-burger > span:nth-child(1),
.sk-burger--arrow[aria-expanded="true"] .sk-burger > span:nth-child(3) {
  top: calc(50% - var(--_bt) / 2);
  left: 45%;
  width: 55%;
  transform-origin: calc(100% - var(--_bt) / 2) 50%;
}

.sk-burger--arrow[aria-expanded="true"] .sk-burger > span:nth-child(1) { transform: rotate(40deg); }
.sk-burger--arrow[aria-expanded="true"] .sk-burger > span:nth-child(2) { opacity: 1; }
.sk-burger--arrow[aria-expanded="true"] .sk-burger > span:nth-child(3) { transform: rotate(-40deg); }
.sk-burger--arrow.sk-dir--left[aria-expanded="true"] .sk-burger { transform: scaleX(-1); }

/* ---------- Page states ---------- */
html.sk-locked {
  overflow: hidden;
}

html.sk-locked body {
  padding-inline-end: var(--sk-sbw, 0px);
}

html.sk-push-anim body > :not(.sk-panel):not(script):not(style) {
  transition: transform var(--sk-push-duration, 300ms) var(--_ease, cubic-bezier(.22, .61, .36, 1));
}

html.sk-pushed body {
  overflow-x: hidden;
}

html.sk-pushed body > :not(.sk-panel):not(script):not(style) {
  transform: translateX(var(--sk-push, 0));
}

@media (prefers-reduced-motion: reduce) {
  .sk-panel,
  .sk-panel::backdrop,
  .sk-panel *,
  .sk-trigger *,
  html.sk-push-anim body > * {
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
}