:root {
    --pc-content-width: 1440px;
    --pc-font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
    --pc-base-font-size: 16px;
    --pc-page-gutter: clamp(16px, 3vw, 40px);
    --pc-section-gap: clamp(1rem, 2vw, 2rem);
    --pc-section-gap-third: clamp(0.333333rem, 0.666667vw, 0.666667rem);
    --pc-block-space: clamp(1.5rem, 4vw, 3.5rem);
    --pc-text: #1d2733;
    --pc-background: #ffffff;
    --pc-surface: #f4f6f8;
    --pc-dark-surface: #203a57;
    --pc-footer-surface: #1b314a;
    --pc-on-link: #ffffff;
    --pc-on-link-hover: #ffffff;
    --pc-on-dark-surface: #ffffff;
    --pc-on-footer-surface: #ffffff;
    --pc-on-info: #111111;
    --pc-border: #d7dde3;
    --pc-link: #145ea8;
    --pc-link-hover: #0d477f;
    --pc-focus: #0d477f;
    --pc-radius: 0.5rem;
    --pc-button-radius: 0.45rem;
    --pc-button-bg: var(--pc-link);
    --pc-button-color: var(--pc-on-link);
    --pc-button-border: var(--pc-link);
    --pc-button-hover-bg: var(--pc-link-hover);
    --pc-button-hover-color: var(--pc-on-link-hover);
    --pc-button-hover-border: var(--pc-link-hover);
    --pc-pagination-radius: 0.4rem;
    --pc-pagination-border: var(--pc-border);
    --pc-pagination-bg: var(--pc-background);
    --pc-pagination-color: var(--pc-text);
    --pc-pagination-active-bg: var(--pc-link);
    --pc-pagination-active-color: var(--pc-on-link);
    --pc-pagination-active-border: var(--pc-link);
    color-scheme: var(--pc-color-scheme, light);
}

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

html {
    font-family: var(--pc-font-family);
    font-size: var(--pc-base-font-size);
    line-height: 1.5;
    color: var(--pc-text);
    background: var(--pc-background);
}

body {
    margin: 0;
    min-width: 20rem;
    overflow-x: clip;
    background: var(--pc-background);
}

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

a {
    color: var(--pc-link);
}

a:hover {
    color: var(--pc-link-hover);
}

/* 0.24.1: shared PureCanvas typography scale and lightweight UI primitives.
   Scope stays on Joomla core output and normal module positions so custom DB Tools
   components keep full control of their own UI. */
.purecanvas-site :where(
    .pc-position,
    .com-content-article, .com-content-category-blog, .com-content-featured, .com-content-category, .com-content-archive,
    .com-contact, .com-users-login, .com-users-registration, .com-users-profile, .com-users-remind, .com-users-reset,
    .com-finder, .com-tags
) :where(h1, h2, h3, h4, h5, h6) {
    margin-block-start: 0;
    font-family: inherit;
    font-weight: 700;
    line-height: 1.15;
}
.purecanvas-site :where(.pc-position, .com-content-article, .com-content-category-blog, .com-content-featured, .com-content-category, .com-content-archive, .com-contact, .com-users-login, .com-users-registration, .com-users-profile, .com-users-remind, .com-users-reset, .com-finder, .com-tags) h1 { font-size: clamp(2.1rem, 4vw, 3rem); }
.purecanvas-site :where(.pc-position, .com-content-article, .com-content-category-blog, .com-content-featured, .com-content-category, .com-content-archive, .com-contact, .com-users-login, .com-users-registration, .com-users-profile, .com-users-remind, .com-users-reset, .com-finder, .com-tags) h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); }
.purecanvas-site :where(.pc-position, .com-content-article, .com-content-category-blog, .com-content-featured, .com-content-category, .com-content-archive, .com-contact, .com-users-login, .com-users-registration, .com-users-profile, .com-users-remind, .com-users-reset, .com-finder, .com-tags) h3 { font-size: clamp(1.55rem, 2.8vw, 2rem); }
.purecanvas-site :where(.pc-position, .com-content-article, .com-content-category-blog, .com-content-featured, .com-content-category, .com-content-archive, .com-contact, .com-users-login, .com-users-registration, .com-users-profile, .com-users-remind, .com-users-reset, .com-finder, .com-tags) h4 { font-size: clamp(1.3rem, 2.2vw, 1.55rem); }
.purecanvas-site :where(.pc-position, .com-content-article, .com-content-category-blog, .com-content-featured, .com-content-category, .com-content-archive, .com-contact, .com-users-login, .com-users-registration, .com-users-profile, .com-users-remind, .com-users-reset, .com-finder, .com-tags) h5 { font-size: clamp(1.12rem, 1.8vw, 1.3rem); }
.purecanvas-site :where(.pc-position, .com-content-article, .com-content-category-blog, .com-content-featured, .com-content-category, .com-content-archive, .com-contact, .com-users-login, .com-users-registration, .com-users-profile, .com-users-remind, .com-users-reset, .com-finder, .com-tags) h6 { font-size: 1rem; }

.purecanvas-site :where(.pc-position, .com-content-article, .com-content-category-blog, .com-content-featured, .com-content-category, .com-content-archive, .com-contact, .com-users-login, .com-users-registration, .com-users-profile, .com-users-remind, .com-users-reset, .com-finder, .com-tags) :where(.display-1, .display-2, .display-3, .display-4, .display-5, .display-6) {
    margin-block: 0 0.35em;
    font-family: inherit;
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -0.025em;
}
.purecanvas-site :where(.pc-position, .com-content-article, .com-content-category-blog, .com-content-featured, .com-content-category, .com-content-archive, .com-contact, .com-users-login, .com-users-registration, .com-users-profile, .com-users-remind, .com-users-reset, .com-finder, .com-tags) .display-1 { font-size: clamp(3.25rem, 7vw, 5.5rem); }
.purecanvas-site :where(.pc-position, .com-content-article, .com-content-category-blog, .com-content-featured, .com-content-category, .com-content-archive, .com-contact, .com-users-login, .com-users-registration, .com-users-profile, .com-users-remind, .com-users-reset, .com-finder, .com-tags) .display-2 { font-size: clamp(3rem, 6.3vw, 5rem); }
.purecanvas-site :where(.pc-position, .com-content-article, .com-content-category-blog, .com-content-featured, .com-content-category, .com-content-archive, .com-contact, .com-users-login, .com-users-registration, .com-users-profile, .com-users-remind, .com-users-reset, .com-finder, .com-tags) .display-3 { font-size: clamp(2.65rem, 5.6vw, 4.5rem); }
.purecanvas-site :where(.pc-position, .com-content-article, .com-content-category-blog, .com-content-featured, .com-content-category, .com-content-archive, .com-contact, .com-users-login, .com-users-registration, .com-users-profile, .com-users-remind, .com-users-reset, .com-finder, .com-tags) .display-4 { font-size: clamp(2.3rem, 4.9vw, 4rem); }
.purecanvas-site :where(.pc-position, .com-content-article, .com-content-category-blog, .com-content-featured, .com-content-category, .com-content-archive, .com-contact, .com-users-login, .com-users-registration, .com-users-profile, .com-users-remind, .com-users-reset, .com-finder, .com-tags) .display-5 { font-size: clamp(2rem, 4.2vw, 3.5rem); }
.purecanvas-site :where(.pc-position, .com-content-article, .com-content-category-blog, .com-content-featured, .com-content-category, .com-content-archive, .com-contact, .com-users-login, .com-users-registration, .com-users-profile, .com-users-remind, .com-users-reset, .com-finder, .com-tags) .display-6 { font-size: clamp(1.75rem, 3.5vw, 3rem); }

.purecanvas-site :where(.pc-position, .com-content-article, .com-content-category-blog, .com-content-featured, .com-content-category, .com-content-archive, .com-contact, .com-users-login, .com-users-registration, .com-users-profile, .com-users-remind, .com-users-reset, .com-finder, .com-tags) .badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25em 0.58em;
    border-radius: 999px;
    font-size: 0.78em;
    font-weight: 700;
    line-height: 1;
}
.purecanvas-site :where(.pc-position, .com-content-article, .com-content-category-blog, .com-content-featured, .com-content-category, .com-content-archive, .com-contact, .com-users-login, .com-users-registration, .com-users-profile, .com-users-remind, .com-users-reset, .com-finder, .com-tags) :where(.badge.bg-primary, .badge.text-bg-primary) { color: var(--pc-on-link); background: var(--pc-primary) !important; }
.purecanvas-site :where(.pc-position, .com-content-article, .com-content-category-blog, .com-content-featured, .com-content-category, .com-content-archive, .com-contact, .com-users-login, .com-users-registration, .com-users-profile, .com-users-remind, .com-users-reset, .com-finder, .com-tags) :where(.badge.bg-secondary, .badge.text-bg-secondary) { color: var(--pc-on-dark-surface); background: var(--pc-secondary) !important; }
.purecanvas-site :where(.pc-position, .com-content-article, .com-content-category-blog, .com-content-featured, .com-content-category, .com-content-archive, .com-contact, .com-users-login, .com-users-registration, .com-users-profile, .com-users-remind, .com-users-reset, .com-finder, .com-tags) :where(.badge.bg-success, .badge.text-bg-success) { color: #fff; background: var(--pc-success) !important; }
.purecanvas-site :where(.pc-position, .com-content-article, .com-content-category-blog, .com-content-featured, .com-content-category, .com-content-archive, .com-contact, .com-users-login, .com-users-registration, .com-users-profile, .com-users-remind, .com-users-reset, .com-finder, .com-tags) :where(.badge.bg-danger, .badge.text-bg-danger) { color: #fff; background: var(--pc-danger) !important; }
.purecanvas-site :where(.pc-position, .com-content-article, .com-content-category-blog, .com-content-featured, .com-content-category, .com-content-archive, .com-contact, .com-users-login, .com-users-registration, .com-users-profile, .com-users-remind, .com-users-reset, .com-finder, .com-tags) :where(.badge.bg-warning, .badge.text-bg-warning) { color: #181818; background: var(--pc-warning) !important; }
.purecanvas-site :where(.pc-position, .com-content-article, .com-content-category-blog, .com-content-featured, .com-content-category, .com-content-archive, .com-contact, .com-users-login, .com-users-registration, .com-users-profile, .com-users-remind, .com-users-reset, .com-finder, .com-tags) :where(.badge.bg-info, .badge.text-bg-info) { color: var(--pc-on-info); background: var(--pc-info) !important; }
.purecanvas-site :where(.pc-position, .com-content-article, .com-content-category-blog, .com-content-featured, .com-content-category, .com-content-archive, .com-contact, .com-users-login, .com-users-registration, .com-users-profile, .com-users-remind, .com-users-reset, .com-finder, .com-tags) :where(.badge.bg-light, .badge.text-bg-light) { color: var(--pc-text); background: var(--pc-light) !important; border: 1px solid var(--pc-border); }
.purecanvas-site :where(.pc-position, .com-content-article, .com-content-category-blog, .com-content-featured, .com-content-category, .com-content-archive, .com-contact, .com-users-login, .com-users-registration, .com-users-profile, .com-users-remind, .com-users-reset, .com-finder, .com-tags) :where(.badge.bg-dark, .badge.text-bg-dark) { color: var(--pc-on-dark-surface); background: var(--pc-dark) !important; }

.purecanvas-site :where(.pc-position, .com-content-article, .com-content-category-blog, .com-content-featured, .com-content-category, .com-content-archive, .com-contact, .com-users-login, .com-users-registration, .com-users-profile, .com-users-remind, .com-users-reset, .com-finder, .com-tags) .progress {
    display: flex;
    overflow: hidden;
    min-height: 1rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--pc-border) 65%, var(--pc-background));
}
.purecanvas-site :where(.pc-position, .com-content-article, .com-content-category-blog, .com-content-featured, .com-content-category, .com-content-archive, .com-contact, .com-users-login, .com-users-registration, .com-users-profile, .com-users-remind, .com-users-reset, .com-finder, .com-tags) .progress-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pc-on-link);
    background: var(--pc-primary);
    font-size: 0.75em;
    font-weight: 700;
    transition: width 0.3s ease;
}
.purecanvas-site :where(.pc-position, .com-content-article, .com-content-category-blog, .com-content-featured, .com-content-category, .com-content-archive, .com-contact, .com-users-login, .com-users-registration, .com-users-profile, .com-users-remind, .com-users-reset, .com-finder, .com-tags) .progress-bar.bg-success { background: var(--pc-success) !important; }
.purecanvas-site :where(.pc-position, .com-content-article, .com-content-category-blog, .com-content-featured, .com-content-category, .com-content-archive, .com-contact, .com-users-login, .com-users-registration, .com-users-profile, .com-users-remind, .com-users-reset, .com-finder, .com-tags) .progress-bar.bg-danger { background: var(--pc-danger) !important; }
.purecanvas-site :where(.pc-position, .com-content-article, .com-content-category-blog, .com-content-featured, .com-content-category, .com-content-archive, .com-contact, .com-users-login, .com-users-registration, .com-users-profile, .com-users-remind, .com-users-reset, .com-finder, .com-tags) .progress-bar.bg-warning { color: #181818; background: var(--pc-warning) !important; }
.purecanvas-site :where(.pc-position, .com-content-article, .com-content-category-blog, .com-content-featured, .com-content-category, .com-content-archive, .com-contact, .com-users-login, .com-users-registration, .com-users-profile, .com-users-remind, .com-users-reset, .com-finder, .com-tags) .progress-bar.bg-info { color: var(--pc-on-info); background: var(--pc-info) !important; }

.purecanvas-site :where(.pc-position, .com-content-article, .com-content-category-blog, .com-content-featured, .com-content-category, .com-content-archive, .com-contact, .com-users-login, .com-users-registration, .com-users-profile, .com-users-remind, .com-users-reset, .com-finder, .com-tags) :where(.spinner-border, .spinner-grow) {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    color: var(--pc-primary);
    vertical-align: -0.125em;
}
.purecanvas-site :where(.pc-position, .com-content-article, .com-content-category-blog, .com-content-featured, .com-content-category, .com-content-archive, .com-contact, .com-users-login, .com-users-registration, .com-users-profile, .com-users-remind, .com-users-reset, .com-finder, .com-tags) .spinner-border {
    border: 0.24em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: pc-spinner-border 0.75s linear infinite;
}
.purecanvas-site :where(.pc-position, .com-content-article, .com-content-category-blog, .com-content-featured, .com-content-category, .com-content-archive, .com-contact, .com-users-login, .com-users-registration, .com-users-profile, .com-users-remind, .com-users-reset, .com-finder, .com-tags) .spinner-grow {
    border-radius: 50%;
    background: currentColor;
    opacity: 0;
    animation: pc-spinner-grow 0.9s linear infinite;
}
@keyframes pc-spinner-border { to { transform: rotate(360deg); } }
@keyframes pc-spinner-grow { 0% { transform: scale(0); opacity: 0; } 50% { opacity: 1; } 100% { transform: scale(1); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .purecanvas-site :where(.progress-bar, .spinner-border, .spinner-grow) {
        animation: none !important;
        transition: none !important;
    }
}

/* Joomla adds explanatory link text such as “Mere om: …” for screen readers.
   PureCanvas must provide the standard utility class so it stays visually hidden. */
.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;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 0.2rem solid var(--pc-focus);
    outline-offset: 0.15rem;
}

.pc-page {
    width: min(100%, var(--pc-content-width));
    margin-inline: auto;
    padding-inline: var(--pc-page-gutter);
    display: flex;
    flex-direction: column;
}

.pc-system-messages {
    margin: 0;
}

/* 0.21.2: the Joomla message container may exist even when it contains no
   visible message. Never let the empty wrapper create a strip above Topbar;
   spacing belongs only to actual alerts. */
.pc-system-messages > * {
    margin-block: 0;
}

.pc-system-messages > #system-message-container:empty {
    display: none;
}

.pc-system-messages :is(.alert, joomla-alert) {
    margin-block: 1rem;
}

/* 0.24.56: Top/Bund is an outer layout distance. The concrete values are
   written directly on the frontend elements by index.php. pc-page is a flex
   column, so vertical margins cannot collapse between Sections/Component. */
.pc-section--standard,
.pc-component {
    padding-block: 0;
}

.pc-section__inner {
    display: flex;
    align-items: stretch;
    gap: var(--pc-section-gap);
}

.pc-position {
    flex: var(--pc-weight, 1) 1 0;
    min-width: 0;
    padding: var(--pc-pos-pad-top, 0px) var(--pc-pos-pad-right, 0px) var(--pc-pos-pad-bottom, 0px) var(--pc-pos-pad-left, 0px);
}

.pc-position > :first-child,
.pc-component > :first-child {
    margin-top: 0;
}

.pc-position > :last-child,
.pc-component > :last-child {
    margin-bottom: 0;
}

.pc-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.65rem 1rem;
    border: 1px solid var(--pc-button-border);
    border-radius: var(--pc-button-radius);
    color: var(--pc-button-color);
    background: var(--pc-button-bg);
    text-decoration: none;
}

.pc-button:hover,
.pc-button:focus-visible {
    border-color: var(--pc-button-hover-border);
    color: var(--pc-button-hover-color);
    background: var(--pc-button-hover-bg);
}

.pc-offline-card,
.pc-error-card {
    width: min(42rem, calc(100% - 2rem));
    margin: 10vh auto 0;
    padding: clamp(1.5rem, 5vw, 3rem);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius);
    background: var(--pc-surface);
}

.pc-error-code {
    margin: 0;
    font-size: clamp(3rem, 12vw, 7rem);
    font-weight: 700;
    line-height: 1;
}

@media (max-width: 47.99rem) {
    .pc-section__inner {
        flex-direction: column;
    }

    .pc-position {
        flex-basis: auto;
        width: 100%;
    }
}


/* 0.4 topbar section preset. Content remains ordinary Joomla modules. */
.pc-section--topbar {
    --pc-topbar-background: var(--pc-topbar-surface, var(--pc-dark-surface));
    --pc-topbar-dropdown-background: var(--pc-topbar-surface, var(--pc-dark-surface));
    --pc-topbar-text: var(--pc-on-topbar-surface, var(--pc-on-dark-surface));
    --pc-topbar-hover: color-mix(in srgb, var(--pc-topbar-text) 14%, transparent);
    --pc-topbar-height: 0px;
    position: relative;
    z-index: 100;
    isolation: isolate;
    overflow: visible;
    padding-block: 0.75rem;
    color: var(--pc-topbar-text);
    background: transparent;
}

/* Full viewport width, but only the actual height of the topbar.
   A 100vmax box-shadow would also cover later sections when the topbar
   is raised above them for dropdown menus. */
.pc-section--topbar::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset-block: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: var(--pc-topbar-background);
    pointer-events: none;
}

.pc-section--topbar .pc-section__inner {
    align-items: center;
}

.pc-section--topbar .pc-position,
.pc-section--topbar .moduletable,
.pc-section--topbar .moduletable > :first-child,
.pc-section--topbar .moduletable > :last-child {
    margin-top: 0;
    margin-bottom: 0;
}

.pc-section--topbar a {
    color: var(--pc-topbar-text);
}

.pc-section--topbar img {
    display: block;
    width: auto;
    max-height: 4rem;
}

.pc-section--topbar .mod-menu,
.pc-section--topbar ul.mod-menu {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.2rem 0.65rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pc-section--topbar .mod-menu > li,
.pc-section--topbar ul.mod-menu > li {
    margin: 0;
    padding: 0;
}

.pc-section--topbar .mod-menu > li > a,
.pc-section--topbar .mod-menu > li > span,
.pc-section--topbar ul.mod-menu > li > a,
.pc-section--topbar ul.mod-menu > li > span {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding: 0.45rem 0.7rem;
    border-radius: 0.35rem;
    color: var(--pc-topbar-text);
    text-decoration: none;
}

/* Joomla may keep route-path classes such as active/current on more than the
   concrete item. Neutralise those in Topbar; PureCanvas' URL matcher below is
   the single source of truth for visual current state. */
.pc-section--topbar .mod-menu > li:not(.pc-current-item):not(.pc-current-parent) > a.active,
.pc-section--topbar .mod-menu > li.active:not(.pc-current-item):not(.pc-current-parent) > a,
.pc-section--topbar .mod-menu > li.current:not(.pc-current-item):not(.pc-current-parent) > a,
.pc-section--topbar ul.mod-menu > li:not(.pc-current-item):not(.pc-current-parent) > a.active,
.pc-section--topbar ul.mod-menu > li.active:not(.pc-current-item):not(.pc-current-parent) > a,
.pc-section--topbar ul.mod-menu > li.current:not(.pc-current-item):not(.pc-current-parent) > a {
    color: var(--pc-topbar-text);
    background: transparent !important;
}

/* PureCanvas marks the concrete menu item from the actual frontend URL.
   This avoids Joomla route-path classes keeping Home highlighted on subpages. */
.pc-section--topbar .mod-menu > li.pc-current-item > a,
.pc-section--topbar .mod-menu > li.pc-current-parent > a,
.pc-section--topbar .mod-menu > li > a:hover,
.pc-section--topbar .mod-menu > li > a:focus-visible {
    background: var(--pc-topbar-hover) !important;
}

.pc-section--topbar .pc-position:last-child {
    text-align: right;
}

@media (max-width: 47.99rem) {
    .pc-section--topbar .pc-section__inner {
        align-items: stretch;
        gap: 0.75rem;
    }

    .pc-section--topbar .mod-menu,
    .pc-section--topbar ul.mod-menu {
        justify-content: center;
    }

    .pc-section--topbar .pc-position,
    .pc-section--topbar .pc-position:last-child {
        text-align: center;
    }

    .pc-section--topbar img {
        margin-inline: auto;
    }
}

/* 0.4.2: accessible dropdown styling for Joomla menu subitems in a topbar. */
.pc-section--topbar .mod-menu > li.parent,
.pc-section--topbar ul.mod-menu > li.parent {
    position: relative;
    display: flex;
    align-items: center;
}

.pc-section--topbar .mod-menu__toggle-sub {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    min-width: 2rem;
    height: 2.5rem;
    margin: 0 0 0 -0.35rem;
    padding: 0;
    border: 0;
    border-radius: 0.35rem;
    color: var(--pc-topbar-text);
    background: transparent;
    cursor: pointer;
}

.pc-section--topbar .mod-menu__toggle-sub:hover,
.pc-section--topbar .mod-menu__toggle-sub:focus-visible,
.pc-section--topbar .mod-menu__toggle-sub[aria-expanded="true"] {
    background: var(--pc-topbar-hover);
}

.pc-section--topbar .mod-menu__toggle-sub .icon-chevron-down {
    display: block;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 0.12rem solid currentColor;
    border-bottom: 0.12rem solid currentColor;
    transform: rotate(45deg) translate(-0.08rem, -0.08rem);
    transition: transform 0.15s ease;
}

.pc-section--topbar .mod-menu__toggle-sub[aria-expanded="true"] .icon-chevron-down {
    transform: rotate(225deg) translate(-0.08rem, -0.08rem);
}

.pc-section--topbar .mod-menu__sub {
    position: absolute;
    z-index: 1100;
    top: calc(100% + 0.25rem);
    left: 0;
    display: none;
    width: max-content;
    min-width: 14rem;
    max-width: min(22rem, calc(100vw - 2rem));
    margin: 0;
    padding: 0.4rem;
    list-style: none;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0.45rem;
    background: var(--pc-topbar-dropdown-background);
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.24);
}

.pc-section--topbar .mod-menu__sub.show-menu,
.pc-section--topbar .mod-menu__sub[aria-hidden="false"] {
    display: block;
}

.pc-section--topbar .mod-menu__sub[aria-hidden="true"]:not(.show-menu) {
    display: none;
}

.pc-section--topbar .mod-menu__sub > li {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
}

.pc-section--topbar .mod-menu__sub a,
.pc-section--topbar .mod-menu__sub span:not(.visually-hidden) {
    display: flex;
    width: 100%;
    min-height: 2.4rem;
    align-items: center;
    padding: 0.5rem 0.7rem;
    border-radius: 0.3rem;
    color: var(--pc-topbar-text);
    text-decoration: none;
    white-space: normal;
}

.pc-section--topbar .mod-menu__sub a:hover,
.pc-section--topbar .mod-menu__sub a:focus-visible,
.pc-section--topbar .mod-menu__sub li.pc-current-item > a,
.pc-section--topbar .mod-menu__sub li.pc-current-parent > a {
    background: color-mix(in srgb, var(--pc-topbar-text) 14%, transparent);
}

/* Deeper levels remain grouped beneath their parent inside the dropdown. */
.pc-section--topbar .mod-menu__sub .mod-menu__sub {
    position: static;
    width: auto;
    min-width: 0;
    max-width: none;
    margin: 0.15rem 0 0.25rem 0.6rem;
    padding: 0 0 0 0.45rem;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0;
    box-shadow: none;
}

/* Joomla 6.1 only renders a toggle button for the first menu level.
   Deeper lists therefore have no independent control and must remain visible
   whenever their first-level submenu is open. The ancestor submenu still
   controls the complete branch visibility. */
.pc-section--topbar .mod-menu__sub .mod-menu__sub {
    display: block;
}

/* 0.24.48: Joomla 6.1 renders toggle controls only at the menu start level.
   Nested lists are part of the opened branch. Force those descendants visible
   even if Joomla has left aria-hidden="true" on the nested UL. */
.pc-section--topbar .mod-menu__sub.show-menu .mod-menu__sub,
.pc-section--topbar .mod-menu__sub[aria-hidden="false"] .mod-menu__sub,
.pc-section--topbar .mod-menu__sub .mod-menu__sub.pc-menu-nested-visible {
    display: block !important;
}

@media (max-width: 47.99rem) {
    .pc-section--topbar .mod-menu,
    .pc-section--topbar ul.mod-menu {
        flex-direction: column;
        align-items: stretch;
    }

    .pc-section--topbar .mod-menu > li,
    .pc-section--topbar ul.mod-menu > li,
    .pc-section--topbar .mod-menu > li.parent,
    .pc-section--topbar ul.mod-menu > li.parent {
        width: 100%;
    }

    .pc-section--topbar .mod-menu > li.parent,
    .pc-section--topbar ul.mod-menu > li.parent {
        flex-wrap: wrap;
    }

    .pc-section--topbar .mod-menu > li > a,
    .pc-section--topbar .mod-menu > li > span,
    .pc-section--topbar ul.mod-menu > li > a,
    .pc-section--topbar ul.mod-menu > li > span {
        flex: 1 1 auto;
    }

    .pc-section--topbar .mod-menu__toggle-sub {
        margin-left: auto;
    }

    .pc-section--topbar .mod-menu__sub {
        position: static;
        flex: 1 0 100%;
        width: 100%;
        min-width: 0;
        max-width: none;
        margin-top: 0.25rem;
        box-shadow: none;
    }
}


/* 0.4.4: dropdowns extend above later sections, while the topbar
   background remains limited to the topbar's own height. */
.pc-section--topbar .pc-section__inner,
.pc-section--topbar .pc-position,
.pc-section--topbar .moduletable {
    overflow: visible;
}

/* 0.4.5: closing dropdowns on outside click is handled by template.js. */

/* 0.5.0: responsive main-menu button for Joomla menu modules in a topbar. */
.pc-mobile-menu-toggle {
    display: none;
}

@media (max-width: 47.99rem) {
    .pc-mobile-menu-container {
        width: 90%;
        max-width: 100%;
        margin-inline: auto;
    }

    .pc-section--mobile-menu-width-100 .pc-mobile-menu-container { width: 100%; }
    .pc-section--mobile-menu-width-90 .pc-mobile-menu-container { width: 90%; }
    .pc-section--mobile-menu-width-80 .pc-mobile-menu-container { width: 80%; }
    .pc-section--mobile-menu-width-420 .pc-mobile-menu-container { width: min(100%, 420px); }

    .pc-section--mobile-menu-align-left .pc-mobile-menu-container { margin-left: 0; margin-right: auto; }
    .pc-section--mobile-menu-align-center .pc-mobile-menu-container { margin-left: auto; margin-right: auto; }
    .pc-section--mobile-menu-align-right .pc-mobile-menu-container { margin-left: auto; margin-right: 0; }

    .pc-mobile-menu-toggle {
        width: 100%;
        min-height: 2.75rem;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.55rem 0.75rem;
        border: 1px solid color-mix(in srgb, var(--pc-topbar-text) 22%, transparent);
        border-radius: 0.4rem;
        color: var(--pc-topbar-text);
        background: color-mix(in srgb, var(--pc-topbar-text) 8%, transparent);
        font: inherit;
        font-weight: 600;
        cursor: pointer;
    }

    .purecanvas-js .pc-mobile-menu-toggle {
        display: flex;
    }

    .pc-mobile-menu-toggle:hover,
    .pc-mobile-menu-toggle:focus-visible,
    .pc-mobile-menu-toggle[aria-expanded="true"] {
        background: color-mix(in srgb, var(--pc-topbar-text) 14%, transparent);
    }

    .pc-mobile-menu-toggle__icon {
        position: relative;
        display: inline-flex;
        width: 1.35rem;
        height: 1rem;
        flex-direction: column;
        justify-content: space-between;
    }

    .pc-mobile-menu-toggle__icon span {
        display: block;
        width: 100%;
        height: 0.12rem;
        border-radius: 999px;
        background: currentColor;
        transition: transform 0.18s ease, opacity 0.18s ease;
        transform-origin: center;
    }

    .pc-mobile-menu-toggle[aria-expanded="true"] .pc-mobile-menu-toggle__icon span:nth-child(1) {
        transform: translateY(0.44rem) rotate(45deg);
    }

    .pc-mobile-menu-toggle[aria-expanded="true"] .pc-mobile-menu-toggle__icon span:nth-child(2) {
        opacity: 0;
    }

    .pc-mobile-menu-toggle[aria-expanded="true"] .pc-mobile-menu-toggle__icon span:nth-child(3) {
        transform: translateY(-0.44rem) rotate(-45deg);
    }

    .purecanvas-js .pc-section--topbar ul.mod-menu.pc-mobile-menu {
        display: none;
        margin-top: 0.5rem;
        padding-top: 0.35rem;
        border-top: 1px solid color-mix(in srgb, var(--pc-topbar-text) 16%, transparent);
    }

    .purecanvas-js .pc-section--topbar ul.mod-menu.pc-mobile-menu.pc-mobile-menu-open {
        display: flex;
    }
}


/* 0.6.0: sticky, transparent and overlay behaviour for topbar sections. */
.pc-section--topbar.pc-section--sticky {
    position: sticky;
    top: 0;
    z-index: 1200;
}

.pc-section--topbar.pc-section--transparent {
    --pc-topbar-background: transparent;
}

.pc-section--topbar.pc-section--transparent.pc-section--transparency-25 {
    --pc-topbar-background: color-mix(in srgb, var(--pc-topbar-surface, var(--pc-dark-surface)) 75%, transparent);
}

.pc-section--topbar.pc-section--transparent.pc-section--transparency-50 {
    --pc-topbar-background: color-mix(in srgb, var(--pc-topbar-surface, var(--pc-dark-surface)) 50%, transparent);
}

.pc-section--topbar.pc-section--transparent.pc-section--transparency-75 {
    --pc-topbar-background: color-mix(in srgb, var(--pc-topbar-surface, var(--pc-dark-surface)) 25%, transparent);
}

.pc-section--topbar.pc-section--transparent.pc-section--transparency-100 {
    --pc-topbar-background: transparent;
}

.pc-section--topbar.pc-section--overlay-next {
    margin-bottom: calc(var(--pc-section-space-bottom, 0px) - var(--pc-topbar-height, 0px));
}

/* Keep the following item's explicit top spacing intact. The Topbar overlay is
   created by the Topbar's own negative bottom margin; user spacing on the next
   Section/Component must remain additive instead of being silently reset. */

/* Dropdowns remain readable even when the topbar itself is transparent. */
.pc-section--topbar.pc-section--transparent .mod-menu__sub {
    --pc-topbar-text: var(--pc-on-topbar-surface, var(--pc-on-dark-surface));
    --pc-topbar-hover: color-mix(in srgb, var(--pc-topbar-text) 14%, transparent);
    color: var(--pc-topbar-text);
    background: var(--pc-topbar-dropdown-background);
}


/* 0.7.0: optional edge-to-edge section content. */
.pc-section--fullwidth {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.pc-section--fullwidth > .pc-section__inner {
    width: 100%;
    max-width: none;
}


/* 0.7.1: active empty positions intentionally remain layout slots. */
.pc-position:empty {
    min-height: 0;
}


/* 0.8.0: user-controlled section and position spacing.
   0.24.54: pc-page is a column flex container so vertical margins on sibling
   Sections/Component never collapse. This makes Top/Bottom spacing deterministic. */

/* 0.8.2: tablet layout capacity is three width units per row.
   Rows that use fewer than three units still expand relatively to the full row. */
@media (min-width: 48rem) and (max-width: 64rem) {
    .pc-section__inner {
        flex-wrap: wrap;
    }

    .pc-position {
        flex-grow: var(--pc-weight, 1);
        flex-shrink: 1;
    }

    .pc-position--weight-1 {
        flex-basis: calc(33.333333% - var(--pc-section-gap-third) - var(--pc-section-gap-third));
    }

    .pc-position--weight-2 {
        flex-basis: calc(66.666667% - var(--pc-section-gap-third));
    }

    .pc-position--weight-3,
    .pc-position--weight-4,
    .pc-position--weight-5,
    .pc-position--weight-6 {
        flex-basis: 100%;
    }
}


/* 0.8.3: per-position responsive visibility. */
@media (min-width: 48rem) and (max-width: 64rem) {
    .pc-position--hide-tablet {
        display: none !important;
    }
}

@media (max-width: 47.99rem) {
    .pc-position--hide-mobile {
        display: none !important;
    }
}

/* 0.8.4 section visibility. Keep desktop/widescreen unaffected. */
@media (min-width: 48rem) and (max-width: 64rem) {
    .pc-section--hide-tablet {
        display: none !important;
    }
}

@media (max-width: 47.99rem) {
    .pc-section--hide-mobile {
        display: none !important;
    }
}


/* 0.9.0: simple Pure background presets for standard sections and positions. */

.pc-section--surface-template {
    color: var(--pc-text);
    background: var(--pc-background);
}
.pc-section--surface-light {
    background: var(--pc-surface);
}

.pc-section--surface-dark {
    color: var(--pc-on-dark-surface);
    background: var(--pc-dark-surface);
}

.pc-section--surface-dark a,
.pc-position--surface-dark a {
    color: var(--pc-on-dark-surface);
}

.pc-position--surface-light {
    background: var(--pc-surface);
}

.pc-position--surface-dark {
    color: var(--pc-on-dark-surface);
    background: var(--pc-dark-surface);
}


/* 0.10.0: Component follows the same simple width/background/visibility model as sections. */
.pc-component--fullwidth {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* 0.24.72: Componentens ydre region har altid 20 px grundafstand til
   browserkanten. Editorens venstre/højre værdi er ekstra afstand oveni og
   skrives direkte på .pc-component af index.php. */

.pc-component--surface-light {
    background: var(--pc-surface);
}

.pc-component--surface-dark {
    color: var(--pc-on-dark-surface);
    background: var(--pc-dark-surface);
}

.pc-component--surface-dark a {
    color: var(--pc-on-dark-surface);
}

@media (min-width: 48rem) and (max-width: 64rem) {
    .pc-component--hide-tablet {
        display: none !important;
    }
}

@media (max-width: 47.99rem) {
    .pc-component--hide-mobile {
        display: none !important;
    }
}

/* A light position inside a dark Topbar must not inherit white menu text.
   Dropdowns remain dark and reset the text colour locally. */
.pc-section--topbar .pc-position--surface-light {
    --pc-topbar-text: var(--pc-text);
    color: var(--pc-text);
    background: var(--pc-surface);
}

.pc-section--topbar .pc-position--surface-light .mod-menu__sub {
    --pc-topbar-text: var(--pc-on-dark-surface);
    color: var(--pc-on-dark-surface);
}


/* 0.16.1: transparent topbars can protect the menu from busy imagery.
   The overlay is applied to the menu module shell only, not the full topbar. */
.pc-section--topbar.pc-section--transparent {
    --pc-menu-overlay-opacity: 58%;
}

.pc-section--topbar.pc-section--transparent.pc-section--menu-overlay-strength-low {
    --pc-menu-overlay-opacity: 38%;
}

.pc-section--topbar.pc-section--transparent.pc-section--menu-overlay-strength-medium {
    --pc-menu-overlay-opacity: 58%;
}

.pc-section--topbar.pc-section--transparent.pc-section--menu-overlay-strength-high {
    --pc-menu-overlay-opacity: 76%;
}

.pc-section--topbar.pc-section--transparent .pc-menu-shell {
    width: fit-content;
    max-width: 100%;
    padding: 0.25rem 0.35rem;
    border-radius: 0.65rem;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.pc-section--topbar.pc-section--transparent.pc-section--menu-overlay-light .pc-menu-shell {
    background: rgba(255, 255, 255, 0.58);
    background: color-mix(in srgb, var(--pc-background) var(--pc-menu-overlay-opacity), transparent);
    border: 1px solid color-mix(in srgb, var(--pc-border) 55%, transparent);
}

.pc-section--topbar.pc-section--transparent.pc-section--menu-overlay-dark .pc-menu-shell {
    background: rgba(24, 30, 38, 0.58);
    background: color-mix(in srgb, var(--pc-dark-surface) var(--pc-menu-overlay-opacity), transparent);
    border: 1px solid color-mix(in srgb, #ffffff 18%, transparent);
}

.pc-section--topbar.pc-section--transparent.pc-section--menu-overlay-theme .pc-menu-shell {
    background: rgba(20, 94, 168, 0.58);
    background: color-mix(in srgb, var(--pc-link) var(--pc-menu-overlay-opacity), transparent);
    border: 1px solid color-mix(in srgb, var(--pc-link-hover) 48%, transparent);
}

.pc-section--topbar.pc-section--transparent.pc-section--menu-overlay-blur .pc-menu-shell {
    -webkit-backdrop-filter: blur(8px) saturate(115%);
    backdrop-filter: blur(8px) saturate(115%);
}

/* Automatic text tone follows the chosen menu protection. With no protection,
   normal theme text is used; the user can still force light or dark explicitly. */
.pc-section--topbar.pc-section--transparent.pc-section--topbar-text-auto {
    --pc-topbar-text: var(--pc-text);
    --pc-topbar-hover: rgba(0, 0, 0, 0.08);
}

.pc-section--topbar.pc-section--transparent.pc-section--topbar-text-auto.pc-section--menu-overlay-dark {
    --pc-topbar-text: var(--pc-on-dark-surface);
    --pc-topbar-hover: color-mix(in srgb, var(--pc-on-dark-surface) 14%, transparent);
}

.pc-section--topbar.pc-section--transparent.pc-section--topbar-text-auto.pc-section--menu-overlay-theme {
    --pc-topbar-text: var(--pc-on-link);
    --pc-topbar-hover: color-mix(in srgb, var(--pc-on-link) 14%, transparent);
}

.pc-section--topbar.pc-section--transparent.pc-section--topbar-text-dark {
    --pc-topbar-text: var(--pc-text);
    --pc-topbar-hover: rgba(0, 0, 0, 0.08);
}

.pc-section--topbar.pc-section--transparent.pc-section--topbar-text-light {
    --pc-topbar-text: #ffffff;
    --pc-topbar-hover: rgba(255, 255, 255, 0.14);
}

/* Dropdowns always use the protected dark dropdown palette regardless of the
   text tone selected for the transparent main menu. */
.pc-section--topbar.pc-section--transparent .mod-menu__sub {
    --pc-topbar-text: var(--pc-on-dark-surface);
    --pc-topbar-hover: color-mix(in srgb, var(--pc-on-dark-surface) 14%, transparent);
    color: var(--pc-on-dark-surface);
}

@media (max-width: 47.99rem) {
    .pc-section--topbar.pc-section--transparent .pc-menu-shell {
        width: 100%;
    }
}

/* Component sidebars. The six-unit concept is kept simple:
   no sidebar = 6; one sidebar = 2 + 4; both = 1 + 4 + 1. */
.pc-component__inner {
    display: flex;
    width: 100%;
    align-items: stretch;
    gap: var(--pc-section-gap);
}

.pc-component__main {
    min-width: 0;
    flex: 6 1 0;
}

.pc-component__inner--left .pc-component__sidebar,
.pc-component__inner--right .pc-component__sidebar {
    flex: 2 1 0;
}

.pc-component__inner--left .pc-component__main,
.pc-component__inner--right .pc-component__main {
    flex: 4 1 0;
}

.pc-component__inner--both .pc-component__sidebar {
    flex: 1 1 0;
}

.pc-component__inner--both .pc-component__main {
    flex: 4 1 0;
}

.pc-component__sidebar {
    min-width: 0;
    padding: var(--pc-sidebar-pad-top, 0px) var(--pc-sidebar-pad-right, 0px) var(--pc-sidebar-pad-bottom, 0px) var(--pc-sidebar-pad-left, 0px);
}

@media (min-width: 48rem) and (max-width: 64rem) {
    .pc-component__inner--both .pc-component__sidebar--hide-tablet,
    .pc-component__inner--left .pc-component__sidebar--hide-tablet,
    .pc-component__inner--right .pc-component__sidebar--hide-tablet {
        display: none !important;
    }

    .pc-component__inner--both:has(.pc-component__sidebar--left.pc-component__sidebar--hide-tablet) .pc-component__sidebar--right,
    .pc-component__inner--both:has(.pc-component__sidebar--right.pc-component__sidebar--hide-tablet) .pc-component__sidebar--left {
        flex: 2 1 0;
    }

    .pc-component__inner--both:has(.pc-component__sidebar--left.pc-component__sidebar--hide-tablet) .pc-component__main,
    .pc-component__inner--both:has(.pc-component__sidebar--right.pc-component__sidebar--hide-tablet) .pc-component__main {
        flex: 4 1 0;
    }

    .pc-component__inner--both:has(.pc-component__sidebar--left.pc-component__sidebar--hide-tablet):has(.pc-component__sidebar--right.pc-component__sidebar--hide-tablet) .pc-component__main {
        flex: 1 1 100%;
    }
}

@media (max-width: 47.99rem) {
    .pc-component__inner {
        flex-direction: column;
    }

    .pc-component__main,
    .pc-component__sidebar {
        width: 100%;
        flex: 0 0 auto !important;
    }

    .pc-component__sidebar--hide-mobile {
        display: none !important;
    }
}

/* 0.20.0: restrained styling for Joomla core component output.
   This stays inside template scope: PureCanvas styles Joomla's normal output,
   but does not add settings to individual modules or custom components. */
.pc-component__main :where(
    .com-content-article,
    .com-content-category-blog,
    .com-content-featured,
    .com-content-category,
    .com-content-archive,
    .com-contact,
    .com-users-login,
    .com-users-registration,
    .com-users-profile,
    .com-users-remind,
    .com-users-reset,
    .com-finder,
    .com-tags
) {
    min-width: 0;
}

.pc-component__main :where(
    .com-content-article,
    .com-content-category-blog,
    .com-content-featured,
    .com-content-category,
    .com-content-archive,
    .com-contact,
    .com-users-login,
    .com-users-registration,
    .com-users-profile,
    .com-users-remind,
    .com-users-reset,
    .com-finder,
    .com-tags
) :where(h1, h2, h3, h4, h5, h6) {
    margin-block: 0 0.65em;
    color: inherit;
    line-height: 1.2;
    text-wrap: balance;
}

.pc-component__main :where(.page-header, .item-title, .blog-item .item-title) {
    margin-bottom: 0.75rem;
}

.pc-component__main :where(.page-header h1, .page-header h2, .item-title) {
    margin: 0;
}

.pc-component__main :where(.article-info, .article-info-term, .createdby, .published, .modified, .hits) {
    color: color-mix(in srgb, currentColor 68%, transparent);
    font-size: 0.9em;
}

.pc-component__main .article-info {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}

.pc-component__main .article-info > * {
    margin: 0;
}

.pc-component__main :where(.com-content-article, .com-content-category-blog, .com-content-featured) {
    display: flow-root;
}

.pc-component__main :where(.com-content-article, .com-content-category-blog, .com-content-featured) .item-image {
    max-width: 100%;
    margin: 0 0 1.25rem;
}

.pc-component__main :where(.com-content-article, .com-content-category-blog, .com-content-featured) .item-image img,
.pc-component__main .com-content-article__body img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--pc-radius);
}

.pc-component__main :where(.com-content-article, .com-content-category-blog, .com-content-featured) .item-image .caption {
    margin-top: 0.4rem;
    color: color-mix(in srgb, currentColor 68%, transparent);
    font-size: 0.875em;
    line-height: 1.4;
}

/* Joomla's content image layouts use Bootstrap-compatible float class names.
   PureCanvas implements only the small subset required by com_content. */
.pc-component__main :where(.com-content-article, .com-content-category-blog, .com-content-featured) .item-image.float-start {
    float: inline-start;
    width: min(42%, 24rem);
    margin-inline: 0 1.25rem;
}

.pc-component__main :where(.com-content-article, .com-content-category-blog, .com-content-featured) .item-image.float-end {
    float: inline-end;
    width: min(42%, 24rem);
    margin-inline: 1.25rem 0;
}

.pc-component__main :where(.com-content-article, .com-content-category-blog, .com-content-featured) .item-image.float-none {
    float: none;
}

.pc-component__main :where(.blog-items, .blog-featured) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

/* Joomla uses columns-N for across-first ordering and masonry-N for
   down-first ordering. Across is pure CSS Grid. Down uses the same grid
   plus a tiny framework-free JS placement helper so sparse result sets are
   balanced across every configured column instead of leaving empty columns. */
.pc-component__main .blog-items.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pc-component__main .blog-items.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pc-component__main .blog-items.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pc-component__main .blog-items.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pc-component__main .blog-items.columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.pc-component__main .blog-items.masonry-2,
.pc-component__main .blog-items.masonry-3,
.pc-component__main .blog-items.masonry-4,
.pc-component__main .blog-items.masonry-5,
.pc-component__main .blog-items.masonry-6 {
    display: grid;
    grid-template-columns: repeat(var(--pc-blog-columns, 1), minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

.pc-component__main .blog-items.masonry-2 { --pc-blog-columns: 2; }
.pc-component__main .blog-items.masonry-3 { --pc-blog-columns: 3; }
.pc-component__main .blog-items.masonry-4 { --pc-blog-columns: 4; }
.pc-component__main .blog-items.masonry-5 { --pc-blog-columns: 5; }
.pc-component__main .blog-items.masonry-6 { --pc-blog-columns: 6; }

.pc-component__main .blog-items[class*="masonry-"] > .blog-item {
    display: block;
    width: auto;
    margin: 0;
    break-inside: auto;
}

.pc-component__main .blog-item {
    min-width: 0;
    padding-bottom: clamp(1.25rem, 2.5vw, 2rem);
    border-bottom: 1px solid var(--pc-border);
}

.pc-component__main .blog-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}


/* 0.23.8: complete the framework-free Joomla article/blog presentation. */
.pc-component__main :where(.com-content-article__body, .blog-item .item-content) > :first-child {
    margin-top: 0;
}

.pc-component__main :where(.com-content-article__body, .blog-item .item-content) > :last-child {
    margin-bottom: 0;
}

.pc-component__main :where(.com-content-article__body, .blog-item .item-content) :where(p, ul, ol, blockquote, pre) {
    margin-block: 0 1rem;
}

.pc-component__main :where(.com-content-article__body, .blog-item .item-content) blockquote {
    padding: 0.25rem 0 0.25rem 1rem;
    border-inline-start: 0.25rem solid var(--pc-border);
    color: color-mix(in srgb, currentColor 82%, transparent);
}

.pc-component__main :where(.com-content-article__body, .blog-item .item-content) pre {
    max-width: 100%;
    overflow-x: auto;
    padding: 0.85rem 1rem;
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius);
    background: var(--pc-surface);
}

.pc-component__main :where(.com-content-article, .com-content-category-blog, .com-content-featured) .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 1.1rem;
    padding: 0;
    list-style: none;
}

.pc-component__main :where(.com-content-article, .com-content-category-blog, .com-content-featured) .tags > li {
    margin: 0;
}

.pc-component__main :where(.com-content-article, .com-content-category-blog, .com-content-featured) .tags .btn {
    min-height: 0;
    padding: 0.3rem 0.6rem;
    border: 1px solid color-mix(in srgb, var(--pc-link) 32%, var(--pc-border));
    border-radius: 999px;
    color: var(--pc-link);
    background: color-mix(in srgb, var(--pc-link) 8%, var(--pc-background));
    font-size: 0.875em;
    font-weight: 600;
}

.pc-component__main :where(.com-content-article, .com-content-category-blog, .com-content-featured) .tags .btn:hover,
.pc-component__main :where(.com-content-article, .com-content-category-blog, .com-content-featured) .tags .btn:focus-visible {
    border-color: var(--pc-link);
    color: var(--pc-on-link);
    background: var(--pc-link);
}

.pc-component__main :where(.com-content-article, .com-content-category-blog, .com-content-featured) .badge {
    display: inline-flex;
    align-items: center;
    margin-inline-start: 0.45rem;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    font-size: 0.72em;
    font-weight: 700;
    line-height: 1.2;
    vertical-align: middle;
}

.pc-component__main :where(.com-content-article, .com-content-category-blog, .com-content-featured) .badge.bg-warning {
    color: #2d2500;
    background: #f3c84b;
}

.pc-component__main .com-content-article__links,
.pc-component__main .items-more {
    margin-block: 1.25rem;
}

.pc-component__main .com-content-article__links ul,
.pc-component__main .com-content-blog__links {
    margin: 0;
    padding-inline-start: 1.3rem;
}

.pc-component__main .com-content-article__links li + li,
.pc-component__main .com-content-blog__links li + li {
    margin-top: 0.35rem;
}

.pc-component__main .pagenavigation {
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
    padding-top: 1rem;
    border-top: 1px solid var(--pc-border);
}

.pc-component__main .pagenavigation > .pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0;
}

.pc-component__main .pagenavigation .previous {
    margin-inline-end: auto;
}

.pc-component__main .pagenavigation .next {
    margin-inline-start: auto;
}

.pc-component__main .com-content-category-blog__navigation {
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.pc-component__main .com-content-category-blog__counter {
    margin: 0 0 0.75rem;
    color: color-mix(in srgb, currentColor 68%, transparent);
    font-size: 0.9em;
}

@media (max-width: 63.99rem) {
    .pc-component__main .blog-items.columns-3,
    .pc-component__main .blog-items.columns-4,
    .pc-component__main .blog-items.columns-5,
    .pc-component__main .blog-items.columns-6 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pc-component__main .blog-items.masonry-3,
    .pc-component__main .blog-items.masonry-4,
    .pc-component__main .blog-items.masonry-5,
    .pc-component__main .blog-items.masonry-6 {
        --pc-blog-columns: 2;
    }
}

@media (max-width: 47.99rem) {
    .pc-component__main .blog-items.columns-2,
    .pc-component__main .blog-items.columns-3,
    .pc-component__main .blog-items.columns-4,
    .pc-component__main .blog-items.columns-5,
    .pc-component__main .blog-items.columns-6 {
        grid-template-columns: minmax(0, 1fr);
    }

    .pc-component__main .blog-items.masonry-2,
    .pc-component__main .blog-items.masonry-3,
    .pc-component__main .blog-items.masonry-4,
    .pc-component__main .blog-items.masonry-5,
    .pc-component__main .blog-items.masonry-6 {
        --pc-blog-columns: 1;
    }

    .pc-component__main :where(.com-content-article, .com-content-category-blog, .com-content-featured) .item-image.float-start,
    .pc-component__main :where(.com-content-article, .com-content-category-blog, .com-content-featured) .item-image.float-end {
        float: none;
        width: auto;
        margin-inline: 0;
    }

    .pc-component__main .pagenavigation > .pagination {
        align-items: stretch;
        flex-direction: column;
    }

    .pc-component__main .pagenavigation :where(.previous, .next) {
        width: 100%;
        margin-inline: 0;
    }
}

/* 0.24.18: Joomla blog down-order placement now balances sparse item sets across all configured columns.
   0.24.17: Joomla 6.1 article/blog completion based on current core markup.
   PureCanvas supplies only the framework-free presentation primitives Joomla's
   standard com_content output expects. */
.pc-component__main .com-content-category-blog > .category-desc,
.pc-component__main .com-content-category-blog__description {
    display: flow-root;
    margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
}

.pc-component__main :where(.com-content-category-blog > .category-desc, .com-content-category-blog__description) > :first-child {
    margin-top: 0;
}

.pc-component__main :where(.com-content-category-blog > .category-desc, .com-content-category-blog__description) > :last-child {
    margin-bottom: 0;
}

.pc-component__main :where(.com-content-category-blog > .category-desc, .com-content-category-blog__description) img {
    max-width: 100%;
    height: auto;
    border-radius: var(--pc-radius);
}

.pc-component__main :where(.com-content-article__body, .blog-item .item-content, .category-desc) figure {
    max-width: 100%;
    margin: 1.25rem 0;
}

.pc-component__main :where(.com-content-article__body, .blog-item .item-content, .category-desc) figcaption {
    margin-top: 0.4rem;
    color: color-mix(in srgb, currentColor 68%, transparent);
    font-size: 0.875em;
    line-height: 1.4;
}

.pc-component__main :where(.com-content-article__body, .blog-item .item-content, .category-desc) :where(video, iframe) {
    max-width: 100%;
}

.pc-component__main :where(.com-content-article__body, .blog-item .item-content) hr {
    margin: 1.5rem 0;
    border: 0;
    border-top: 1px solid var(--pc-border);
}

.pc-component__main :where(.com-content-article, .blog-item) .icons {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 0.65rem;
}

.pc-component__main :where(.com-content-article, .blog-item) .icons > .float-end {
    margin-inline-start: auto;
}

.pc-component__main :where(.com-content-article, .blog-item) .article-info a {
    color: var(--pc-link);
    text-decoration: none;
}

.pc-component__main :where(.com-content-article, .blog-item) .article-info a:hover,
.pc-component__main :where(.com-content-article, .blog-item) .article-info a:focus-visible {
    text-decoration: underline;
}

.pc-component__main .blog-item .readmore {
    margin: 1.1rem 0 0;
}

.pc-component__main .com-content-category-blog__children {
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
    padding-top: 1rem;
    border-top: 1px solid var(--pc-border);
}

.pc-component__main .com-content-category-blog__child {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--pc-border);
}

.pc-component__main .com-content-category-blog__child:last-child {
    border-bottom: 0;
}

.pc-component__main .com-content-category-blog__child > .page-header.item-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.65rem;
    margin: 0 0 0.45rem;
}

.pc-component__main .com-content-category-blog__child > .page-header.item-title > .btn {
    min-width: 2rem;
    min-height: 2rem;
    margin-inline-start: auto;
    padding: 0.25rem 0.5rem;
}

.pc-component__main .com-content-category-blog__navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
}

.pc-component__main .com-content-category-blog__pagination {
    flex: 1 1 auto;
    min-width: 0;
}

.pc-component__main .com-content-category-blog__counter {
    flex: 0 0 auto;
    margin: 0;
}

@media (max-width: 47.99rem) {
    .pc-component__main .com-content-category-blog__navigation {
        align-items: stretch;
        flex-direction: column;
    }

    .pc-component__main .com-content-category-blog__counter {
        order: -1;
    }
}

.purecanvas-site :where(.pc-component__main, .pc-position) :where(.readmore a, a.btn, button.btn, input.btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.65rem;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--pc-button-border);
    border-radius: var(--pc-button-radius);
    color: var(--pc-button-color);
    background: var(--pc-button-bg);
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}

.purecanvas-site :where(.pc-component__main, .pc-position) :where(.readmore a, a.btn, button.btn, input.btn):not(:disabled):not(.disabled):hover,
.purecanvas-site :where(.pc-component__main, .pc-position) :where(.readmore a, a.btn, button.btn, input.btn):not(:disabled):not(.disabled):focus-visible {
    border-color: var(--pc-button-hover-border);
    color: var(--pc-button-hover-color);
    background: var(--pc-button-hover-bg);
}

.purecanvas-site :where(.pc-component__main, .pc-position) :where(a.btn, button.btn, input.btn):where(:disabled, .disabled, [aria-disabled="true"]) {
    opacity: 0.5;
    cursor: not-allowed;
}

.purecanvas-site :where(.pc-component__main, .pc-position) a.btn:where(.disabled, [aria-disabled="true"]) {
    pointer-events: none;
}

/* Joomla standard module form controls inherit the same base visual language.
   Class-based scope avoids restyling every custom component input in a module position. */
.purecanvas-site .pc-position :where(.form-control, .form-select) {
    max-width: 100%;
    min-height: 2.65rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--pc-border);
    border-radius: calc(var(--pc-radius) * 0.75);
    color: var(--pc-text);
    background: var(--pc-background);
    font: inherit;
}

.purecanvas-site .pc-position :where(.form-control, .form-select):focus {
    border-color: var(--pc-link);
    box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--pc-link) 18%, transparent);
}

.purecanvas-site .pc-position :where(.form-control, .form-select):disabled {
    color: color-mix(in srgb, var(--pc-text) 58%, transparent);
    background: color-mix(in srgb, var(--pc-surface) 82%, var(--pc-background));
    cursor: not-allowed;
}

.pc-component__main :where(form:not(.form-no-styling)) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
    width: 100%;
    max-width: 100%;
    min-height: 2.65rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--pc-border);
    border-radius: calc(var(--pc-radius) * 0.75);
    color: var(--pc-text);
    background: var(--pc-background);
    font: inherit;
}

.pc-component__main :where(form:not(.form-no-styling)) textarea {
    min-height: 8rem;
    resize: vertical;
}

.pc-component__main :where(form:not(.form-no-styling)) :where(label, .form-label) {
    display: inline-block;
    margin-bottom: 0.35rem;
    font-weight: 600;
}

.pc-component__main :where(.control-group, .form-group, .mb-3) {
    margin-bottom: 1rem;
}

.pc-component__main :where(table, .category.table) {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

.pc-component__main :where(table, .category.table) :where(th, td) {
    padding: 0.7rem 0.8rem;
    border-bottom: 1px solid var(--pc-border);
    text-align: start;
    vertical-align: top;
}

.pc-component__main :where(table, .category.table) th {
    font-weight: 700;
    background: color-mix(in srgb, var(--pc-surface) 70%, transparent);
}

.pc-component__main :where(.pagination__wrapper, nav.pagination) {
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.pc-component__main ul.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pc-component__main ul.pagination > li > :where(a, span) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    min-height: 2.5rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--pc-pagination-border);
    border-radius: var(--pc-pagination-radius);
    color: var(--pc-pagination-color);
    background: var(--pc-pagination-bg);
    text-decoration: none;
}

.pc-component__main ul.pagination li:not(.disabled) > a:hover,
.pc-component__main ul.pagination li:not(.disabled) > a:focus-visible,
.pc-component__main ul.pagination .active :where(a, span) {
    border-color: var(--pc-pagination-active-border);
    color: var(--pc-pagination-active-color);
    background: var(--pc-pagination-active-bg);
}

.pc-component__main ul.pagination .disabled :where(a, span) {
    opacity: 0.48;
    cursor: default;
}

.pc-component__main ul.pagination .disabled a {
    pointer-events: none;
}

.pc-component__main :where(.alert, .system-message-container) {
    border-radius: var(--pc-radius);
}

@media (max-width: 47.99rem) {
    .pc-component__main :where(table, .category.table) {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }
}

/* 0.24.4: Joomla core forms, login and system messages follow Elementdesign.
   These rules stay inside Joomla/core template scope and do not style custom
   component interfaces such as DB Tools / Lens Media. */
.pc-component__main :where(form:not(.form-no-styling)) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea):focus {
    border-color: var(--pc-link);
    box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--pc-link) 18%, transparent);
}

.pc-component__main :where(form:not(.form-no-styling)) :where(input, textarea)::placeholder {
    color: color-mix(in srgb, var(--pc-text) 52%, transparent);
    opacity: 1;
}

.pc-component__main :where(form:not(.form-no-styling)) :where(input:disabled, select:disabled, textarea:disabled) {
    color: color-mix(in srgb, var(--pc-text) 58%, transparent);
    background: color-mix(in srgb, var(--pc-surface) 82%, var(--pc-background));
    cursor: not-allowed;
}

.pc-component__main :where(form:not(.form-no-styling)) :where(input[readonly], textarea[readonly]) {
    background: color-mix(in srgb, var(--pc-surface) 48%, var(--pc-background));
}

.pc-component__main :where(form:not(.form-no-styling)) :where(input[type="checkbox"], input[type="radio"]) {
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--pc-link);
}

.pc-component__main :where(form:not(.form-no-styling)) .form-check {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.pc-component__main :where(form:not(.form-no-styling)) .form-check-label {
    margin: 0;
    font-weight: 400;
}

.pc-component__main :where(form:not(.form-no-styling)) .input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.pc-component__main :where(form:not(.form-no-styling)) .input-group > :where(input, select, textarea, .form-control) {
    min-width: 0;
    flex: 1 1 auto;
}

.pc-component__main :where(form:not(.form-no-styling)) .input-group > .btn {
    flex: 0 0 auto;
}

.pc-component__main :where(form:not(.form-no-styling)) .input-group-text {
    display: inline-flex;
    align-items: center;
    padding-inline: 0.75rem;
    border: 1px solid var(--pc-border);
    color: var(--pc-text);
    background: var(--pc-surface);
}

.pc-component__main :where(.com-users-login, .com-users-registration, .com-users-remind, .com-users-reset) fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.pc-component__main :where(.com-users-login, .com-users-registration, .com-users-remind, .com-users-reset) legend {
    width: 100%;
    margin-bottom: 1rem;
    padding: 0;
    font-size: 1.15em;
    font-weight: 700;
}

.pc-component__main .com-users-login__description {
    max-width: 48rem;
    margin-bottom: 1.25rem;
}

.pc-component__main .com-users-login__image {
    display: block;
    margin-top: 1rem;
    border-radius: var(--pc-radius);
}

.pc-component__main .com-users-login__form {
    width: min(100%, 34rem);
    margin: 1rem 0 0;
    padding: clamp(1rem, 3vw, 1.5rem);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius);
    background: color-mix(in srgb, var(--pc-surface) 62%, var(--pc-background));
}

.pc-component__main .com-users-login__remember {
    margin-block: 0.8rem 1rem;
}

.pc-component__main .com-users-login__submit {
    margin-bottom: 0.75rem;
}

.pc-component__main .com-users-login__submit:last-of-type {
    margin-bottom: 0;
}

.pc-component__main .com-users-login__options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    width: min(100%, 34rem);
    margin-top: 1rem;
}

.pc-component__main .com-users-login__options .list-group-item {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    padding: 0.3rem 0;
    color: var(--pc-link);
    background: transparent;
    text-decoration: none;
}

.pc-component__main .com-users-login__options .list-group-item:hover,
.pc-component__main .com-users-login__options .list-group-item:focus-visible {
    color: var(--pc-link-hover);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.pc-component__main :where(.com-users-registration, .com-users-remind, .com-users-reset) > form {
    width: min(100%, 48rem);
}

.pc-system-messages :is(.alert, joomla-alert) {
    display: block;
    position: relative;
    padding: 0.85rem 1rem;
    border: 1px solid var(--pc-border);
    border-inline-start-width: 0.32rem;
    border-radius: var(--pc-radius);
    color: var(--pc-text);
    background: var(--pc-surface);
}

.pc-system-messages :is(.alert-success, joomla-alert[type="success"]) {
    border-color: var(--pc-success);
    background: color-mix(in srgb, var(--pc-success) 10%, var(--pc-background));
}

.pc-system-messages :is(.alert-info, joomla-alert[type="info"], joomla-alert[type="message"]) {
    border-color: var(--pc-link);
    background: color-mix(in srgb, var(--pc-link) 9%, var(--pc-background));
}

.pc-system-messages :is(.alert-warning, joomla-alert[type="warning"], joomla-alert[type="notice"]) {
    border-color: var(--pc-link);
    background: color-mix(in srgb, var(--pc-link) 11%, var(--pc-background));
}

.pc-system-messages :is(.alert-danger, .alert-error, joomla-alert[type="danger"], joomla-alert[type="error"]) {
    border-color: var(--pc-danger);
    background: color-mix(in srgb, var(--pc-danger) 9%, var(--pc-background));
}

/* Joomla 6 uses .alert-message for message content inside the alert wrapper.
   Never style that nested content as a second semantic alert. */
.pc-system-messages :is(.alert, joomla-alert) :where(.alert-message, .alert-notice, .joomla-alert--content, .joomla-alert--message) {
    color: inherit;
    background: transparent;
    border: 0;
}

.pc-system-messages :where(.alert-heading, .joomla-alert--heading) {
    margin: 0 0 0.3rem;
    color: inherit;
    font-weight: 700;
}

.pc-system-messages :where(p, ul, ol):last-child {
    margin-bottom: 0;
}

/* 0.21.3: semantic Footer and template-managed logo in Topbar.
   User Top/Bund distance is applied as an outer margin in index.php; this is
   only the Footer's structural internal breathing room. */
.pc-section--footer {
    position: relative;
    padding-block: 1.25rem;
}

.pc-section--footer.pc-section--surface-template {
    color: var(--pc-on-footer-surface);
    background: var(--pc-footer-surface, var(--pc-dark-surface));
}

.pc-section--footer.pc-section--surface-template a {
    color: var(--pc-on-footer-surface);
}

.pc-section--footer.pc-section--surface-dark {
    color: var(--pc-on-dark-surface);
    background: var(--pc-dark-surface);
}

.pc-section--footer.pc-section--surface-dark a {
    color: var(--pc-on-dark-surface);
}

.pc-section--topbar.pc-section--has-logo .pc-position--logo {
    position: relative;
    overflow: visible;
}

.pc-site-logo {
    position: relative;
    z-index: 110;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: min(100%, var(--pc-logo-max-width, 160px));
    text-decoration: none;
    line-height: 0;
}

/* Normal-mode placement uses auto margins. The logo therefore has to be a
   block-level flex box; auto side margins do not centre an inline-flex box. */
.pc-site-logo--normal {
    display: flex;
    width: fit-content;
}

.pc-site-logo img {
    display: block;
    width: auto;
    height: auto;
    max-width: min(100%, var(--pc-logo-max-width, 160px));
    max-height: var(--pc-logo-max-height, 80px);
    object-fit: contain;
}

/* Horizontal logo placement is relative to the chosen logo position.
   Left/right can reserve a user-controlled distance from that position edge;
   centre ignores the edge distance. The same rules are used by Normal and
   Overlap so switching display mode does not unexpectedly move the logo. */
.pc-section--topbar.pc-section--logo-align-left .pc-site-logo--normal {
    margin-left: var(--pc-logo-edge-gap, 20px);
    margin-right: auto;
}

.pc-section--topbar.pc-section--logo-align-center .pc-site-logo--normal {
    margin-inline: auto;
}

.pc-section--topbar.pc-section--logo-align-right .pc-site-logo--normal {
    margin-left: auto;
    margin-right: var(--pc-logo-edge-gap, 20px);
}

/* Overlap keeps the Topbar height independent of the logo. The logo starts
   at the top of the Topbar and can continue DOWN over the following section. */
.pc-site-logo--overlap {
    position: absolute;
    top: 0;
    margin: 0;
}

.pc-section--topbar.pc-section--logo-align-left .pc-site-logo--overlap {
    left: var(--pc-logo-edge-gap, 20px);
    right: auto;
    transform: translateY(var(--pc-logo-offset, 0px));
}

.pc-section--topbar.pc-section--logo-align-center .pc-site-logo--overlap {
    left: 50%;
    right: auto;
    transform: translate(-50%, var(--pc-logo-offset, 0px));
}

.pc-section--topbar.pc-section--logo-align-right .pc-site-logo--overlap {
    left: auto;
    right: var(--pc-logo-edge-gap, 20px);
    transform: translateY(var(--pc-logo-offset, 0px));
}

/* A user-controlled clearance solves the two opposite overlap cases:
   0px lets the logo intentionally cover the next area, while larger values
   reserve room without increasing the Topbar itself. */
.pc-section--topbar.pc-section--logo-overlap {
    margin-bottom: calc(var(--pc-section-space-bottom, 0px) + var(--pc-logo-clearance, 0px));
}

/* When the next section deliberately starts behind the Topbar, logo
   clearance must not change that overlap distance. Mixing clearance into the
   negative Topbar margin made part of the transparent Topbar sit over the page
   background and part over the next section, which produced visible stripes. */
.pc-section--topbar.pc-section--overlay-next.pc-section--logo-overlap {
    margin-bottom: calc(var(--pc-section-space-bottom, 0px) - var(--pc-topbar-height, 0px));
}

@media (max-width: 47.99rem) {
    .pc-site-logo {
        max-width: min(100%, var(--pc-logo-mobile-max-width, var(--pc-logo-max-width, 160px)));
    }

    .pc-site-logo img {
        max-width: min(100%, var(--pc-logo-mobile-max-width, var(--pc-logo-max-width, 160px)));
        max-height: var(--pc-logo-mobile-max-height, var(--pc-logo-max-height, 80px));
    }

    .pc-site-logo--overlap {
        position: relative;
        left: auto !important;
        right: auto !important;
        top: auto;
        transform: translateY(var(--pc-logo-offset, 0px)) !important;
    }

    .pc-section--topbar.pc-section--logo-align-left .pc-site-logo--overlap {
        margin-left: var(--pc-logo-edge-gap, 20px);
        margin-right: auto;
    }

    .pc-section--topbar.pc-section--logo-align-center .pc-site-logo--overlap {
        margin-inline: auto;
    }

    .pc-section--topbar.pc-section--logo-align-right .pc-site-logo--overlap {
        margin-left: auto;
        margin-right: var(--pc-logo-edge-gap, 20px);
    }

    .pc-section--topbar.pc-section--logo-overlap,
    .pc-section--topbar.pc-section--overlay-next.pc-section--logo-overlap {
        margin-bottom: var(--pc-section-space-bottom, 0px);
    }
}

/* 0.23.0: compact mobile navigation.
   The closed mobile menu is now only a burger button. When a Topbar logo is
   enabled, logo and burger share one compact row and the logo automatically
   sits opposite the selected burger side. The expanded menu opens beneath
   that row and retains the configured expanded width. */
@media (max-width: 47.99rem) {
    .pc-section--topbar {
        padding-block: 0.5rem;
    }

    .pc-section--topbar .pc-section__inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.5rem 0.75rem;
    }

    .pc-section--topbar .pc-position {
        width: 100%;
    }

    .pc-section--topbar .pc-position:not(.pc-position--logo):not(.pc-position--mobile-menu) {
        grid-column: 1 / -1;
    }

    .pc-section--topbar .pc-position--mobile-menu {
        width: auto;
        min-width: 0;
        padding: 0;
    }

    .pc-section--topbar.pc-section--mobile-menu-align-right .pc-position--logo {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        text-align: left;
    }

    .pc-section--topbar.pc-section--mobile-menu-align-right .pc-position--mobile-menu {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }

    .pc-section--topbar.pc-section--mobile-menu-align-left .pc-position--mobile-menu {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
    }

    .pc-section--topbar.pc-section--mobile-menu-align-left .pc-position--logo {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        text-align: right;
    }

    /* On mobile the desktop logo alignment is deliberately overridden: the
       burger side determines where the logo goes, so the two never compete. */
    .pc-section--topbar.pc-section--mobile-menu-align-right .pc-position--logo .pc-site-logo {
        margin-left: 0 !important;
        margin-right: auto !important;
    }

    .pc-section--topbar.pc-section--mobile-menu-align-left .pc-position--logo .pc-site-logo {
        margin-left: auto !important;
        margin-right: 0 !important;
    }

    .pc-mobile-menu-container,
    .pc-section--topbar.pc-section--transparent .pc-mobile-menu-container.pc-menu-shell {
        position: static;
        width: auto;
        max-width: none;
        margin: 0;
    }

    .pc-mobile-menu-toggle {
        width: 2.9rem;
        min-width: 2.9rem;
        height: 2.9rem;
        min-height: 2.9rem;
        justify-content: center;
        gap: 0;
        padding: 0.7rem;
        border-radius: 0.5rem;
    }

    .pc-mobile-menu-toggle__icon {
        width: 1.55rem;
        height: 1.15rem;
    }

    .purecanvas-js .pc-section--topbar ul.mod-menu.pc-mobile-menu {
        position: absolute;
        z-index: 1150;
        top: calc(100% + 0.35rem);
        display: none;
        margin: 0;
        padding: 0.5rem;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 0.55rem;
        color: var(--pc-on-dark-surface);
        background: var(--pc-topbar-dropdown-background);
        box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.24);
        --pc-topbar-text: var(--pc-on-dark-surface);
        --pc-topbar-hover: color-mix(in srgb, var(--pc-on-dark-surface) 14%, transparent);
    }

    .purecanvas-js .pc-section--topbar ul.mod-menu.pc-mobile-menu.pc-mobile-menu-open {
        display: flex;
    }

    .pc-section--mobile-menu-width-100 ul.mod-menu.pc-mobile-menu { width: 100%; }
    .pc-section--mobile-menu-width-90 ul.mod-menu.pc-mobile-menu { width: 90%; }
    .pc-section--mobile-menu-width-80 ul.mod-menu.pc-mobile-menu { width: 80%; }
    .pc-section--mobile-menu-width-420 ul.mod-menu.pc-mobile-menu { width: min(100%, 420px); }

    .pc-section--mobile-menu-align-right ul.mod-menu.pc-mobile-menu {
        left: auto;
        right: 0;
    }

    .pc-section--mobile-menu-align-left ul.mod-menu.pc-mobile-menu {
        left: 0;
        right: auto;
    }
}

@media (max-width: 47.99rem) {
    /* If logo and menu happen to share the same Joomla position, keep the
       compact row usable instead of forcing one of them into a second row. */
    .pc-section--topbar .pc-position--logo.pc-position--mobile-menu {
        grid-column: 1 / -1;
        grid-row: 1;
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
    }

    .pc-section--topbar.pc-section--mobile-menu-align-left .pc-position--logo.pc-position--mobile-menu {
        flex-direction: row-reverse;
    }
}

@media (max-width: 47.99rem) {
    .pc-section--topbar .pc-position:empty {
        display: none;
    }
}

@media (max-width: 47.99rem) {
    /* Keep the expanded panel anchored to the Topbar itself, even when the
       menu shares a position with the logo (logo positions are relative on desktop). */
    .pc-section--topbar .pc-position--mobile-menu {
        position: static;
    }
}

/* 0.24.5: neutralise Joomla's legacy horizontal login form layout and keep
   passkey/extra-login icons at UI size. Registration is intentionally unchanged. */
.pc-component__main .com-users-login {
    width: min(100%, 48rem);
    margin-inline: auto;
}

.pc-component__main .com-users-login :where(.page-header, .com-users-login__description, .com-users-login__form, .com-users-login__options) {
    margin-inline: auto;
}

.pc-component__main .com-users-login__description {
    width: min(100%, 34rem);
}

.pc-component__main .com-users-login__form.form-horizontal .control-group {
    display: block;
    width: 100%;
    margin-bottom: 1rem;
}

.pc-component__main .com-users-login__form.form-horizontal :where(.control-label, .controls) {
    float: none;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    text-align: start;
}

.pc-component__main .com-users-login__form.form-horizontal .control-label {
    display: block;
    margin-bottom: 0.35rem;
}

.pc-component__main .com-users-login__submit .controls {
    display: flex;
    align-items: center;
    width: 100%;
}

.pc-component__main .com-users-login__submit .btn {
    gap: 0.55rem;
}

.pc-component__main .com-users-login__submit .btn.w-100 {
    width: 100%;
}

.pc-component__main .com-users-login__submit .btn :where(svg, img.icon, .icon) {
    width: 1.4rem !important;
    height: 1.4rem !important;
    max-width: 1.4rem !important;
    max-height: 1.4rem !important;
    flex: 0 0 1.4rem;
    object-fit: contain;
}

.pc-component__main .com-users-login__image {
    width: auto;
    max-width: min(100%, 24rem);
    max-height: 20rem;
    object-fit: contain;
}

@media (max-width: 47.99rem) {
    .pc-component__main .com-users-login {
        width: 100%;
    }

    .pc-component__main .com-users-login__form {
        padding: 1rem;
    }
}

/* 0.24.13: optional PureCanvas compact alternative layout for Joomla mod_login.
   These rules apply only when the module layout "PureCanvas kompakt" is selected.
   Standard mod_login output is intentionally left to Joomla. */
.pc-login-compact {
    display: grid;
    gap: 0.22rem;
    width: 100%;
    max-width: 19rem;
    margin: 0;
    color: inherit;
    font: inherit;
    font-size: 0.78rem;
    line-height: 1.15;
    text-align: left;
}

.pc-login-compact :where(p, ul) {
    margin-block: 0;
}

.pc-login-compact__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.3rem;
    min-width: 0;
}

.pc-login-compact__field {
    min-width: 0;
}

.pc-login-compact :where(input[type="text"], input[type="password"]) {
    width: 100%;
    min-width: 0;
    min-height: 1.75rem;
    padding: 0.2rem 0.42rem;
    border: 1px solid var(--pc-border);
    border-radius: calc(var(--pc-radius) * 0.7);
    color: var(--pc-text);
    background: var(--pc-background);
    font: inherit;
    font-size: 0.76rem;
}

.pc-login-compact :where(input[type="text"], input[type="password"]):focus {
    border-color: var(--pc-link);
    outline: 0;
    box-shadow: 0 0 0 0.16rem color-mix(in srgb, var(--pc-link) 18%, transparent);
}

.pc-login-compact__password {
    display: flex;
    align-items: stretch;
    min-width: 0;
}

.pc-login-compact__password > input {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

.pc-login-compact__password-toggle {
    display: inline-flex;
    flex: 0 0 1.75rem;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    min-height: 1.75rem;
    padding: 0;
    border: 1px solid var(--pc-border);
    border-inline-start: 0;
    border-radius: 0 calc(var(--pc-radius) * 0.7) calc(var(--pc-radius) * 0.7) 0;
    color: var(--pc-text);
    background: var(--pc-surface);
    cursor: pointer;
}

.pc-login-compact__password-toggle :where(.icon-eye, .icon-eye-slash) {
    position: relative;
    display: block;
    width: 0.92rem;
    height: 0.58rem;
    border: 1.4px solid currentColor;
    border-radius: 50% / 60%;
    box-sizing: border-box;
}

.pc-login-compact__password-toggle :where(.icon-eye, .icon-eye-slash)::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 50%;
    background: currentColor;
    transform: translate(-50%, -50%);
}

.pc-login-compact__password-toggle .icon-eye-slash::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 50%;
    left: -0.1rem;
    width: 1.08rem;
    height: 1.4px;
    background: currentColor;
    transform: rotate(-35deg);
    transform-origin: center;
}

.pc-login-compact__controls {
    display: block;
    min-width: 0;
}

.pc-login-compact__remember {
    display: inline-flex;
    align-items: center;
    gap: 0.24rem;
    min-width: max-content;
    font-size: 0.68rem;
    white-space: nowrap;
}

.pc-login-compact__remember input {
    flex: 0 0 0.9rem;
    width: 0.9rem;
    height: 0.9rem;
    margin: 0;
    accent-color: var(--pc-link);
}

.pc-login-compact__remember label {
    margin: 0;
}

.pc-login-compact__actions {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(3.8rem, 0.72fr) max-content;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
}

.pc-login-compact__actions:not(:has(.pc-login-compact__extra)) {
    grid-template-columns: minmax(4.3rem, 1fr) max-content;
}

.pc-login-compact__actions .btn,
.pc-login-compact--logout .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.28rem;
    width: 100%;
    min-height: 1.75rem;
    padding: 0.18rem 0.38rem;
    border: 1px solid var(--pc-button-border);
    border-radius: var(--pc-button-radius);
    color: var(--pc-button-color);
    background: var(--pc-button-bg);
    font: inherit;
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 1.05;
    text-decoration: none;
    cursor: pointer;
}

.pc-login-compact__actions .btn:hover,
.pc-login-compact__actions .btn:focus-visible,
.pc-login-compact--logout .btn:hover,
.pc-login-compact--logout .btn:focus-visible {
    border-color: var(--pc-button-hover-border);
    color: var(--pc-button-hover-color);
    background: var(--pc-button-hover-bg);
}

.pc-login-compact__actions .btn :where(svg, img, .icon, [class^="icon-"], [class*=" icon-"]) {
    width: 0.95rem !important;
    height: 0.95rem !important;
    max-width: 0.95rem !important;
    max-height: 0.95rem !important;
    flex: 0 0 0.95rem;
    object-fit: contain;
}

.pc-login-compact__options {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.62rem;
    line-height: 1.1;
    white-space: nowrap;
}

.pc-login-compact__options a,
.pc-login-compact__profile {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

.pc-login-compact__pretext,
.pc-login-compact__posttext,
.pc-login-compact__greeting {
    font-size: 0.68rem;
}

/* The compact layout should not inflate an otherwise slim topbar. */
.pc-section--topbar:has(.pc-login-compact) {
    padding-block: 0.4rem;
}

.pc-section--topbar .pc-position > .moduletable:has(.pc-login-compact) {
    width: min(100%, 19rem);
    max-width: 19rem;
    margin-inline: auto;
}

.pc-section--topbar .pc-position > .moduletable:has(.pc-login-compact) > :is(h2, h3, h4) {
    margin: 0 0 0.12rem;
    font-size: 0.78rem;
    line-height: 1;
    text-align: left;
}

.pc-section--topbar .pc-position > .moduletable:has(.pc-login-compact) .pc-login-compact {
    width: 100%;
    max-width: none;
    margin: 0;
}

.pc-login-compact--logout {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.pc-login-compact--logout .pc-login-compact__profile {
    grid-column: 1;
}

.pc-login-compact--logout .pc-login-compact__login-button {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: auto;
}

@media (max-width: 35rem) {
    .pc-login-compact {
        max-width: 18rem;
    }

    .pc-login-compact__fields {
        grid-template-columns: 1fr;
    }

    .pc-login-compact__actions,
    .pc-login-compact__actions:not(:has(.pc-login-compact__extra)) {
        grid-template-columns: 1fr;
    }

    .pc-login-compact__remember {
        justify-self: start;
    }

    .pc-login-compact__options {
        flex-wrap: wrap;
        white-space: normal;
    }

    .pc-login-compact--logout {
        grid-template-columns: 1fr;
    }

    .pc-login-compact--logout .pc-login-compact__login-button {
        grid-column: 1;
        grid-row: auto;
        width: 100%;
    }
}

/* Registration uses Joomla's real translated Show/Hide password text. The
   core passwordview script updates this span when the button is pressed. */
.pc-component__main .com-users-registration .input-password-toggle {
    width: auto;
    min-width: 7rem;
    padding-inline: 0.65rem;
    white-space: nowrap;
}

.pc-component__main .com-users-registration .input-password-toggle > :where(.icon-eye, .icon-eye-slash) {
    display: none;
}

.pc-component__main .com-users-registration .input-password-toggle > .visually-hidden {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: nowrap !important;
    border: 0 !important;
}


/* 0.24.19: framework-free presentation for Joomla standard modules.
   PureCanvas styles Joomla's output only; module functionality and settings stay in Joomla. */

/* Breadcrumbs */
.purecanvas-site .pc-position .mod-breadcrumbs__wrapper {
    width: 100%;
    min-width: 0;
}

.purecanvas-site .pc-position .mod-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.5rem;
    margin: 0;
    padding: 0.45rem 0;
    list-style: none;
    color: color-mix(in srgb, var(--pc-text) 72%, transparent);
    font-size: 0.92em;
}

.purecanvas-site .pc-position .mod-breadcrumbs > li {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.purecanvas-site .pc-position .mod-breadcrumbs__item::before {
    content: "›";
    margin-inline-end: 0.5rem;
    color: color-mix(in srgb, currentColor 58%, transparent);
    font-weight: 700;
}

.purecanvas-site .pc-position .mod-breadcrumbs__item:first-of-type::before,
.purecanvas-site .pc-position .mod-breadcrumbs__here + .mod-breadcrumbs__item::before,
.purecanvas-site .pc-position .mod-breadcrumbs__divider + .mod-breadcrumbs__item::before {
    content: "";
    margin: 0;
}

.purecanvas-site .pc-position .mod-breadcrumbs__item + .mod-breadcrumbs__item::before {
    content: "›";
    margin-inline-end: 0.5rem;
}

.purecanvas-site .pc-position .mod-breadcrumbs a {
    color: var(--pc-link);
    text-decoration: none;
}

.purecanvas-site .pc-position .mod-breadcrumbs a:hover,
.purecanvas-site .pc-position .mod-breadcrumbs a:focus-visible {
    color: var(--pc-link-hover);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.purecanvas-site .pc-position .mod-breadcrumbs__item.active {
    color: var(--pc-text);
    font-weight: 600;
}

/* Smart Search module (mod_finder) */
.purecanvas-site .pc-position .mod-finder {
    display: grid;
    gap: 0.45rem;
    width: 100%;
    min-width: 0;
}

.purecanvas-site .pc-position .mod-finder > label {
    margin: 0;
    font-weight: 600;
}

.purecanvas-site .pc-position .mod-finder__search.input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-width: 0;
}

.purecanvas-site .pc-position .mod-finder__search > .form-control {
    min-width: 0;
    flex: 1 1 auto;
    width: 1%;
}

.purecanvas-site .pc-position .mod-finder__search > .form-control + .btn {
    flex: 0 0 auto;
    margin-inline-start: -1px;
    white-space: nowrap;
}

.purecanvas-site .pc-position .mod-finder__advanced-link {
    display: inline-block;
    width: fit-content;
    margin-top: 0.15rem;
}

.purecanvas-site .pc-position .mod-finder__advanced {
    display: grid;
    gap: 0.55rem;
    margin-top: 0.35rem;
}

.purecanvas-site .pc-position .mod-finder__advanced :where(select, .form-select) {
    width: 100%;
}

/* Menu modules outside Topbar: neutral vertical navigation.
   Topbar keeps its dedicated horizontal/dropdown rules above. */
.purecanvas-site .pc-section:not(.pc-section--topbar) .pc-position > :where(.moduletable, .module) > ul.mod-menu,
.purecanvas-site .pc-section:not(.pc-section--topbar) .pc-position > ul.mod-menu {
    display: grid;
    gap: 0.18rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.purecanvas-site .pc-section:not(.pc-section--topbar) .pc-position ul.mod-menu li {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

.purecanvas-site .pc-section:not(.pc-section--topbar) .pc-position ul.mod-menu :where(a, span:not(.visually-hidden)) {
    display: flex;
    align-items: center;
    min-height: 2.35rem;
    padding: 0.42rem 0.58rem;
    border-radius: calc(var(--pc-radius) * 0.7);
    color: inherit;
    text-decoration: none;
}

.purecanvas-site .pc-section:not(.pc-section--topbar) .pc-position ul.mod-menu li > a:hover,
.purecanvas-site .pc-section:not(.pc-section--topbar) .pc-position ul.mod-menu li > a:focus-visible,
.purecanvas-site .pc-section:not(.pc-section--topbar) .pc-position ul.mod-menu li.current > a,
.purecanvas-site .pc-section:not(.pc-section--topbar) .pc-position ul.mod-menu li.active > a {
    color: var(--pc-link);
    background: color-mix(in srgb, var(--pc-link) 10%, transparent);
}

.purecanvas-site .pc-section:not(.pc-section--topbar) .pc-position ul.mod-menu .mod-menu__toggle-sub {
    position: absolute;
    inset-block-start: 0.18rem;
    inset-inline-end: 0.18rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: calc(var(--pc-radius) * 0.6);
    color: inherit;
    background: transparent;
    cursor: pointer;
}

.purecanvas-site .pc-section:not(.pc-section--topbar) .pc-position ul.mod-menu .mod-menu__toggle-sub:hover,
.purecanvas-site .pc-section:not(.pc-section--topbar) .pc-position ul.mod-menu .mod-menu__toggle-sub:focus-visible,
.purecanvas-site .pc-section:not(.pc-section--topbar) .pc-position ul.mod-menu .mod-menu__toggle-sub[aria-expanded="true"] {
    background: color-mix(in srgb, var(--pc-link) 10%, transparent);
}

.purecanvas-site .pc-section:not(.pc-section--topbar) .pc-position ul.mod-menu .mod-menu__toggle-sub .icon-chevron-down {
    display: block;
    width: 0.5rem;
    height: 0.5rem;
    border-inline-end: 0.12rem solid currentColor;
    border-block-end: 0.12rem solid currentColor;
    transform: rotate(45deg) translate(-0.08rem, -0.08rem);
}

.purecanvas-site .pc-section:not(.pc-section--topbar) .pc-position ul.mod-menu .mod-menu__sub {
    display: none;
    margin: 0.15rem 0 0.25rem 0.65rem;
    padding: 0 0 0 0.65rem;
    list-style: none;
    border-inline-start: 1px solid var(--pc-border);
}

.purecanvas-site .pc-section:not(.pc-section--topbar) .pc-position ul.mod-menu .mod-menu__sub.show-menu,
.purecanvas-site .pc-section:not(.pc-section--topbar) .pc-position ul.mod-menu .mod-menu__sub[aria-hidden="false"] {
    display: grid;
    gap: 0.12rem;
}

.purecanvas-site .pc-section:not(.pc-section--topbar) .pc-position ul.mod-menu .mod-menu__sub[aria-hidden="true"]:not(.show-menu) {
    display: none;
}


/* Deeper Joomla menu levels do not get toggle buttons. They belong to the
   opened first-level branch and are therefore rendered as part of that branch. */
.purecanvas-site .pc-section:not(.pc-section--topbar) .pc-position ul.mod-menu .mod-menu__sub .mod-menu__sub {
    display: grid;
    gap: 0.12rem;
}


.purecanvas-site .pc-section:not(.pc-section--topbar) .pc-position ul.mod-menu .mod-menu__sub.show-menu .mod-menu__sub,
.purecanvas-site .pc-section:not(.pc-section--topbar) .pc-position ul.mod-menu .mod-menu__sub[aria-hidden="false"] .mod-menu__sub,
.purecanvas-site .pc-section:not(.pc-section--topbar) .pc-position ul.mod-menu .mod-menu__sub .mod-menu__sub.pc-menu-nested-visible {
    display: grid !important;
    gap: 0.12rem;
}

/* Custom HTML: keep author content intact while normalising only the outer flow. */
.purecanvas-site .pc-position .mod-custom {
    min-width: 0;
    overflow-wrap: anywhere;
}

.purecanvas-site .pc-position .mod-custom > :first-child {
    margin-block-start: 0;
}

.purecanvas-site .pc-position .mod-custom > :last-child {
    margin-block-end: 0;
}

.purecanvas-site .pc-position .mod-custom :where(figure, picture) {
    max-width: 100%;
}

.purecanvas-site .pc-position .mod-custom iframe,
.purecanvas-site .pc-position .mod-custom video {
    max-width: 100%;
}

@media (max-width: 35rem) {
    .purecanvas-site .pc-position .mod-breadcrumbs {
        gap: 0.2rem 0.35rem;
        font-size: 0.86em;
    }

    .purecanvas-site .pc-position .mod-finder__search.input-group {
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .purecanvas-site .pc-position .mod-finder__search > .form-control {
        width: 100%;
        flex-basis: 100%;
    }

    .purecanvas-site .pc-position .mod-finder__search > .form-control + .btn {
        width: 100%;
        margin-inline-start: 0;
    }
}

/* 0.24.21: component-sidebar module polish, theme-consistent messages and
   restrained article typography. These are presentation-only changes. */

/* Joomla component sidebars are rendered outside .pc-position, so give their
   standard modules the same restrained PureCanvas presentation. */
.pc-component__sidebar > :where(.moduletable, .module) {
    min-width: 0;
    margin: 0 0 1.35rem;
}

.pc-component__sidebar > :where(.moduletable, .module) > :where(h2, h3, h4) {
    margin: 0 0 0.65rem;
    padding: 0 0 0.4rem;
    border-bottom: 1px solid color-mix(in srgb, var(--pc-border) 78%, transparent);
    font-size: 1.05rem;
    line-height: 1.25;
}

.pc-component__sidebar :where(ul.mod-list, ul.mod-menu) {
    display: grid;
    gap: 0.18rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pc-component__sidebar :where(ul.mod-list, ul.mod-menu) li {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pc-component__sidebar :where(ul.mod-list, ul.mod-menu) li > a,
.pc-component__sidebar ul.mod-menu li > span:not(.visually-hidden) {
    display: flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.34rem 0.48rem;
    border-radius: calc(var(--pc-radius) * 0.65);
    color: var(--pc-link);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.pc-component__sidebar :where(ul.mod-list, ul.mod-menu) li > a:hover,
.pc-component__sidebar :where(ul.mod-list, ul.mod-menu) li > a:focus-visible,
.pc-component__sidebar ul.mod-menu li.current > a,
.pc-component__sidebar ul.mod-menu li.active > a {
    color: var(--pc-link-hover);
    background: color-mix(in srgb, var(--pc-link) 9%, transparent);
}

.pc-component__sidebar ul.mod-menu li.parent > :where(a, span:not(.visually-hidden)) {
    padding-inline-end: 2.45rem;
}

.pc-component__sidebar ul.mod-menu .mod-menu__toggle-sub {
    position: absolute;
    z-index: 1;
    inset-block-start: 0.05rem;
    inset-inline-end: 0.05rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: calc(var(--pc-radius) * 0.6);
    color: var(--pc-link);
    background: transparent;
    cursor: pointer;
}

.pc-component__sidebar ul.mod-menu .mod-menu__toggle-sub:hover,
.pc-component__sidebar ul.mod-menu .mod-menu__toggle-sub:focus-visible,
.pc-component__sidebar ul.mod-menu .mod-menu__toggle-sub[aria-expanded="true"] {
    color: var(--pc-link-hover);
    background: color-mix(in srgb, var(--pc-link) 10%, transparent);
}

.pc-component__sidebar ul.mod-menu .mod-menu__toggle-sub .icon-chevron-down {
    display: block;
    width: 0.52rem;
    height: 0.52rem;
    border-inline-end: 0.12rem solid currentColor;
    border-block-end: 0.12rem solid currentColor;
    transform: rotate(45deg) translate(-0.08rem, -0.08rem);
    transition: transform 140ms ease;
}

.pc-component__sidebar ul.mod-menu .mod-menu__toggle-sub[aria-expanded="true"] .icon-chevron-down {
    transform: rotate(225deg) translate(-0.02rem, -0.02rem);
}

.pc-component__sidebar ul.mod-menu .mod-menu__sub {
    display: none;
    gap: 0.1rem;
    margin: 0.12rem 0 0.25rem 0.7rem;
    padding: 0 0 0 0.6rem;
    list-style: none;
    border-inline-start: 1px solid var(--pc-border);
}

.pc-component__sidebar ul.mod-menu .mod-menu__sub.show-menu,
.pc-component__sidebar ul.mod-menu .mod-menu__sub[aria-hidden="false"] {
    display: grid;
}

.pc-component__sidebar ul.mod-menu .mod-menu__sub[aria-hidden="true"]:not(.show-menu) {
    display: none;
}


.pc-component__sidebar ul.mod-menu .mod-menu__sub .mod-menu__sub {
    display: grid;
    gap: 0.1rem;
}


.pc-component__sidebar ul.mod-menu .mod-menu__sub.show-menu .mod-menu__sub,
.pc-component__sidebar ul.mod-menu .mod-menu__sub[aria-hidden="false"] .mod-menu__sub,
.pc-component__sidebar ul.mod-menu .mod-menu__sub .mod-menu__sub.pc-menu-nested-visible {
    display: grid !important;
    gap: 0.1rem;
}

/* Informational Joomla messages, including successful cart/login actions,
   follow the selected PureCanvas accent. Errors keep their red semantics. */
.pc-system-messages :is(.alert-success, joomla-alert[type="success"]) {
    border-color: var(--pc-link);
    background: color-mix(in srgb, var(--pc-link) 10%, var(--pc-background));
}

/* Article pages use a quieter reading scale than the display/typography demo. */
.pc-component__main .com-content-article > :where(.page-header, .com-content-article__title) :where(h1, h2),
.pc-component__main .com-content-article > .page-header:where(h1, h2) {
    font-size: clamp(1.75rem, 2.5vw, 2.2rem);
    line-height: 1.18;
}

.pc-component__main .com-content-article__body {
    font-size: 0.96em;
    line-height: 1.62;
}

.pc-component__main .com-content-article__body h1 {
    font-size: clamp(1.65rem, 2.4vw, 2.05rem);
}

.pc-component__main .com-content-article__body h2 {
    font-size: clamp(1.45rem, 2vw, 1.75rem);
}

.pc-component__main .com-content-article__body h3 {
    font-size: clamp(1.25rem, 1.7vw, 1.48rem);
}

.pc-component__main .com-content-article__body h4 {
    font-size: 1.18rem;
}

.pc-component__main .com-content-article__body h5 {
    font-size: 1.08rem;
}

.pc-component__main .com-content-article__body h6 {
    font-size: 1rem;
}

.pc-component__main .com-content-article__body :where(p, ul, ol) {
    line-height: 1.62;
}


/* 0.24.21: compact Joomla article-list modules in component sidebars and
   restrain blog-card titles independently from the global typography scale. */
.pc-component__sidebar .mod-articles-grid {
    --grid-layout-gap: 0.45rem;
}

.pc-component__sidebar :where(.mod-articles, .mod-articles-items) > li {
    margin: 0;
}

.pc-component__sidebar .mod-articles-item,
.pc-component__sidebar .mod-articles-item-content {
    min-width: 0;
    margin: 0;
}

.pc-component__sidebar .mod-articles-title {
    margin: 0;
    font-size: 1rem;
    line-height: 1.35;
    font-weight: 600;
}

.pc-component__sidebar .mod-articles-title .mod-articles-link {
    display: block;
    padding: 0.38rem 0.48rem;
    border-radius: calc(var(--pc-radius) * 0.65);
    color: var(--pc-link);
    text-decoration: none;
}

.pc-component__sidebar .mod-articles-title .mod-articles-link:hover,
.pc-component__sidebar .mod-articles-title .mod-articles-link:focus-visible,
.pc-component__sidebar .mod-articles-title .mod-articles-link.active {
    color: var(--pc-link-hover);
    background: color-mix(in srgb, var(--pc-link) 9%, transparent);
}

/* A blog-card title is navigation, not a page-level H2. Keep it readable in
   2–6 column layouts while leaving article H1–H6 and Elementdesign untouched. */
.pc-component__main .blog-item .page-header h2,
.pc-component__main .blog-item h2.item-title,
.pc-component__main .blog-item .item-title h2 {
    margin: 0;
    font-size: clamp(1.35rem, 1.9vw, 1.7rem);
    line-height: 1.18;
}

/* 0.24.22: responsive final polish for Joomla core output.
   Presentation only; no module/component settings are introduced. */
@media (max-width: 35rem) {
    /* Joomla's registration password toggle has a useful text label, but its
       desktop minimum width can squeeze the password field on narrow phones. */
    .pc-component__main .com-users-registration .input-group {
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .pc-component__main .com-users-registration .input-group > :where(input, .form-control) {
        width: 100%;
        flex: 1 1 100%;
    }

    .pc-component__main .com-users-registration .input-password-toggle {
        width: 100%;
        min-width: 0;
        flex: 1 1 100%;
    }

    /* Keep long breadcrumb/article labels and nested sidebar navigation inside
       the viewport without changing the desktop presentation. */
    .purecanvas-site .pc-position .mod-breadcrumbs :where(a, span),
    .pc-component__sidebar :where(ul.mod-list, ul.mod-menu) :where(a, span:not(.visually-hidden)) {
        overflow-wrap: anywhere;
    }

    .pc-component__sidebar ul.mod-menu .mod-menu__sub {
        margin-inline-start: 0.4rem;
        padding-inline-start: 0.45rem;
    }

    /* Pagination keeps its design choice but uses slightly less horizontal
       space so Previous/Next and page numbers wrap more naturally on phones. */
    .pc-component__main ul.pagination {
        gap: 0.25rem;
    }

    .pc-component__main ul.pagination > li > :where(a, span) {
        min-width: 2.35rem;
        min-height: 2.35rem;
        padding-inline: 0.5rem;
    }
}

/* 0.24.23: mobile polish based on live-device testing.
   Keep the optional compact login compact, provide framework-free Joomla
   pagination icons, and restrain footer module typography/overflow on phones. */

/* Joomla pagination renders Start/Previous/Next/End as icon-class spans.
   PureCanvas is framework-free, so draw the four navigation glyphs ourselves. */
.pc-component__main ul.pagination :where(
    .icon-angle-double-left,
    .icon-angle-left,
    .icon-angle-right,
    .icon-angle-double-right
) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    font-size: 0;
    line-height: 1;
}

.pc-component__main ul.pagination .icon-angle-double-left::before {
    content: "«";
    font-size: 1rem;
}

.pc-component__main ul.pagination .icon-angle-left::before {
    content: "‹";
    font-size: 1.15rem;
}

.pc-component__main ul.pagination .icon-angle-right::before {
    content: "›";
    font-size: 1.15rem;
}

.pc-component__main ul.pagination .icon-angle-double-right::before {
    content: "»";
    font-size: 1rem;
}

/* Older mobile browsers may ignore overflow-x: clip. Keep hidden as a safe
   fallback and let supporting browsers use clip afterwards. */
body.purecanvas-site {
    overflow-x: hidden;
    overflow-x: clip;
}

@media (max-width: 35rem) {
    /* The compact login already fits a phone in its desktop two-column form.
       Do not expand it into five full-width rows on mobile. */
    .pc-section--topbar .pc-position > .moduletable:has(.pc-login-compact) {
        width: min(calc(100vw - 2rem), 19rem);
        max-width: 19rem;
        margin-inline: auto;
    }

    .pc-login-compact {
        width: 100%;
        max-width: 19rem;
        gap: 0.18rem;
        font-size: 0.72rem;
    }

    .pc-login-compact__fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.25rem;
    }

    .pc-login-compact__actions {
        grid-template-columns: minmax(0, 1.55fr) minmax(3.5rem, 0.72fr) max-content;
        gap: 0.2rem;
    }

    .pc-login-compact__actions:not(:has(.pc-login-compact__extra)) {
        grid-template-columns: minmax(4.3rem, 1fr) max-content;
    }

    .pc-login-compact__remember {
        justify-self: auto;
        font-size: 0.62rem;
    }

    .pc-login-compact__options {
        flex-wrap: wrap;
        gap: 0.18rem 0.32rem;
        font-size: 0.59rem;
        line-height: 1.05;
        white-space: normal;
    }

    /* Footer module headings are navigation/support headings, not display H2/H3.
       Keep them subordinate to page content on small screens. */
    .pc-section--footer .pc-position > :where(.moduletable, .module) > :where(h1, h2, h3, h4),
    .pc-section--footer .pc-position > :where(h1, h2, h3, h4) {
        margin: 0 0 0.65rem;
        font-size: 1.35rem;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    .pc-section--footer .pc-position,
    .pc-section--footer .pc-position > :where(.moduletable, .module),
    .pc-section--footer .pc-position :where(.mod-custom, ul.mod-menu, ul.mod-list) {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    /* Four navigation controls plus page numbers should stay compact enough
       to fit naturally on a phone while retaining a usable touch target. */
    .pc-component__main ul.pagination {
        justify-content: flex-start;
        gap: 0.22rem;
    }

    .pc-component__main ul.pagination :where(a, span) {
        min-width: 2.15rem;
        min-height: 2.15rem;
        padding: 0.3rem 0.42rem;
    }
}

/* 0.24.24: compact mobile Topbar drawer and footer position spacing.
   On phones, ordinary Topbar module positions are presentation-wise moved
   below the Joomla menu inside the burger drawer. This is generic layout
   behaviour: no module type or login setting is special-cased. */
.pc-mobile-drawer {
    display: none;
}

@media (max-width: 47.99rem) {
    .pc-section--topbar.pc-section--has-mobile-drawer .pc-mobile-drawer {
        position: absolute;
        z-index: 1150;
        top: calc(100% + 0.35rem);
        display: none;
        width: 90%;
        max-height: min(75vh, 40rem);
        overflow-y: auto;
        padding: 0.65rem;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 0.55rem;
        color: var(--pc-on-dark-surface);
        background: var(--pc-topbar-dropdown-background);
        box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.24);
        --pc-topbar-text: var(--pc-on-dark-surface);
        --pc-topbar-hover: color-mix(in srgb, var(--pc-on-dark-surface) 14%, transparent);
    }

    .pc-section--topbar.pc-section--has-mobile-drawer .pc-mobile-drawer.pc-mobile-drawer-open {
        display: grid;
        gap: 0.75rem;
    }

    .pc-section--mobile-menu-width-100 .pc-mobile-drawer { width: 100%; }
    .pc-section--mobile-menu-width-90 .pc-mobile-drawer { width: 90%; }
    .pc-section--mobile-menu-width-80 .pc-mobile-drawer { width: 80%; }
    .pc-section--mobile-menu-width-420 .pc-mobile-drawer { width: min(calc(100% - 1rem), 420px); }

    .pc-section--mobile-menu-align-right .pc-mobile-drawer {
        right: 0;
        left: auto;
    }

    .pc-section--mobile-menu-align-left .pc-mobile-drawer {
        right: auto;
        left: 0;
    }

    /* The drawer owns positioning/background. The Joomla menu itself stays a
       normal vertical list inside it. */
    .purecanvas-js .pc-section--topbar .pc-mobile-drawer ul.mod-menu.pc-mobile-menu,
    .purecanvas-js .pc-section--topbar .pc-mobile-drawer ul.mod-menu.pc-mobile-menu.pc-mobile-menu-open {
        position: static;
        display: flex;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .pc-section--topbar .pc-mobile-drawer .pc-position--mobile-drawer-extra {
        width: 100%;
        min-width: 0;
        padding-top: 0.7rem;
        border-top: 1px solid color-mix(in srgb, var(--pc-topbar-text) 16%, transparent);
        text-align: start;
    }

    .pc-section--topbar .pc-mobile-drawer .pc-position--mobile-drawer-extra > :where(.moduletable, .module) {
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
    }

    /* Footer positions become one column on mobile; preserve the user's own
       position padding but guarantee visual separation between positions. */
    .pc-section--footer .pc-section__inner {
        gap: max(1.5rem, var(--pc-section-gap));
    }

    .pc-section--footer .pc-position > :where(.moduletable, .module) + :where(.moduletable, .module) {
        margin-top: 1rem;
    }
}

/* 0.24.52: Footer content keeps a consistent inner gutter on phones.
   The footer surface may be full-width or content-width, but its first and
   last positions must not sit directly against the coloured footer edge.
   Position padding remains user-controlled and is applied inside this gutter. */
@media (max-width: 47.99rem) {
    .pc-section--footer > .pc-section__inner {
        padding-inline: var(--pc-page-gutter);
    }
}

/* 0.24.28: Joomla system pages (error/offline/component-only).
   PureCanvas styles presentation only; Joomla keeps all error/offline behaviour. */
.purecanvas-error,
.purecanvas-offline {
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: clamp(1rem, 4vw, 2.5rem);
    color: var(--pc-text);
    background: color-mix(in srgb, var(--pc-surface) 55%, var(--pc-background));
}

.purecanvas-error .pc-error-card,
.purecanvas-offline .pc-offline-card {
    width: min(42rem, 100%);
    margin: 0;
    padding: clamp(1.35rem, 4vw, 2.5rem);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius);
    color: var(--pc-text);
    background: var(--pc-background);
}

.pc-system-site-name {
    margin: 0 0 1rem;
    color: color-mix(in srgb, var(--pc-text) 68%, transparent);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.purecanvas-error .pc-error-code {
    margin: 0 0 0.5rem;
    color: var(--pc-link);
    font-size: clamp(3rem, 10vw, 5.5rem);
    font-weight: 800;
    line-height: 0.95;
}

.purecanvas-error .pc-error-card h1,
.purecanvas-offline .pc-offline-card h1 {
    margin: 0 0 1rem;
    font-size: clamp(1.7rem, 5vw, 2.45rem);
    line-height: 1.12;
}

.pc-system-actions {
    margin-block: 1.25rem;
}

.pc-error-detail {
    margin: 1.5rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--pc-border);
    color: color-mix(in srgb, var(--pc-text) 72%, transparent);
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.pc-error-detail > span {
    display: inline-flex;
    margin-inline-end: 0.35rem;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    color: var(--pc-button-color);
    background: var(--pc-button-bg);
    font-weight: 700;
}

.pc-error-debug {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--pc-border);
}

.pc-error-debug > summary {
    cursor: pointer;
    color: var(--pc-link);
    font-weight: 700;
}

.pc-error-debug__content {
    margin-top: 1rem;
    max-width: 100%;
    overflow: auto;
    font-size: 0.85rem;
}

.pc-offline-header {
    text-align: center;
}

.pc-offline-header > :last-child {
    margin-bottom: 0;
}

.pc-offline-image {
    margin: 1rem auto;
}

.pc-offline-image img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: min(36vh, 18rem);
    margin-inline: auto;
    object-fit: contain;
    border-radius: var(--pc-radius);
}

.pc-offline-message {
    margin: 0.75rem auto 0;
    max-width: 34rem;
}

.pc-offline-login {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--pc-border);
}

.pc-offline-login fieldset {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    border: 0;
}

.pc-offline-login legend {
    margin: 0;
    padding: 0;
    font-size: 1.2rem;
    font-weight: 700;
}

.pc-offline-login .pc-form-group {
    display: grid;
    gap: 0.35rem;
}

.pc-offline-login label {
    font-weight: 700;
}

.pc-offline-login input[type="text"],
.pc-offline-login input[type="password"] {
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-button-radius);
    color: var(--pc-text);
    background: var(--pc-background);
    font: inherit;
}

.pc-offline-login input[type="text"]:focus,
.pc-offline-login input[type="password"]:focus {
    border-color: var(--pc-focus);
    outline: 0.2rem solid var(--pc-focus);
    outline-offset: 0.12rem;
}

.pc-offline-login .pc-button {
    width: 100%;
    gap: 0.5rem;
    font: inherit;
    cursor: pointer;
}

.pc-offline-login .pc-button--secondary {
    color: var(--pc-link);
    background: transparent;
    border-color: var(--pc-link);
}

.pc-offline-login .pc-button--secondary:hover,
.pc-offline-login .pc-button--secondary:focus-visible {
    color: var(--pc-button-hover-color);
    background: var(--pc-button-hover-bg);
    border-color: var(--pc-button-hover-border);
}

.pc-offline-login .pc-button :where(svg, img) {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
}

.purecanvas-offline .pc-system-messages :is(.alert, joomla-alert),
.purecanvas-error .pc-system-messages :is(.alert, joomla-alert),
.purecanvas-component-only .pc-system-messages :is(.alert, joomla-alert) {
    margin-block: 1rem;
}

.purecanvas-component-only .pc-component-only__page {
    padding-block: var(--pc-page-gutter);
}

.purecanvas-component-only .pc-component {
    margin-block: 0;
}

@media (max-width: 35rem) {
    .purecanvas-error,
    .purecanvas-offline {
        padding: 0;
        place-items: stretch;
    }

    .purecanvas-error .pc-error-card,
    .purecanvas-offline .pc-offline-card {
        width: 100%;
        min-height: 100svh;
        border: 0;
        border-radius: 0;
    }
}

/* 0.24.29: interactive 404 scene. The experience is isolated to error.php;
   normal site layouts and components are unaffected. */
.purecanvas-error--404 {
    display: block;
    min-height: 100svh;
    padding: 0;
    overflow-x: clip;
    color: #eef6ff;
    background:
        radial-gradient(circle at 18% 12%, rgba(77, 119, 204, 0.22), transparent 28rem),
        radial-gradient(circle at 80% 4%, rgba(116, 69, 176, 0.25), transparent 24rem),
        #07101f;
}

.pc-404 {
    width: min(72rem, 100%);
    min-height: 100svh;
    margin-inline: auto;
    padding: clamp(1.15rem, 4vw, 2.75rem) var(--pc-page-gutter) clamp(1.5rem, 5vw, 3rem);
}

.pc-404__copy {
    position: relative;
    z-index: 2;
    max-width: 54rem;
    margin-inline: auto;
    text-align: center;
}

.pc-404 .pc-system-site-name {
    color: rgba(238, 246, 255, 0.65);
}

.pc-404 h1 {
    margin: 0.75rem 0 0.35rem;
    color: color-mix(in srgb, var(--pc-link) 82%, #ffffff);
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.025em;
    text-shadow: 0 0 1.6rem color-mix(in srgb, var(--pc-link) 28%, transparent);
}

.pc-404__subtitle {
    margin: 0 0 1.1rem;
    color: #ffffff;
    font-size: clamp(1.35rem, 3.2vw, 1.8rem);
    font-weight: 800;
    line-height: 1.2;
}

.pc-404__lead,
.pc-404__text {
    margin-inline: auto;
    max-width: 48rem;
}

.pc-404__lead {
    margin-bottom: 0.45rem;
    color: #ffffff;
    font-size: clamp(1.05rem, 2.8vw, 1.35rem);
    font-weight: 800;
}

.pc-404__text {
    margin-top: 0.25rem;
    color: #f6fbff;
    font-size: clamp(1.05rem, 2.45vw, 1.2rem);
    font-weight: 600;
    line-height: 1.6;
    text-wrap: balance;
}

.pc-404-space {
    position: relative;
    width: min(66rem, 100%);
    height: clamp(31rem, 64vw, 42rem);
    min-height: 31rem;
    margin: clamp(1.4rem, 4vw, 2.5rem) auto 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: clamp(1.1rem, 3vw, 2rem);
    background:
        radial-gradient(circle at 75% 20%, rgba(89, 114, 214, 0.22), transparent 18rem),
        linear-gradient(180deg, #07101f 0%, #0a1930 63%, #102443 100%);
    box-shadow: 0 1.6rem 5rem rgba(0,0,0,0.34);
    touch-action: pan-y;
    user-select: none;
}

.pc-404-space__stars,
.pc-404-space__stars::before,
.pc-404-space__stars::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    background-image:
        radial-gradient(circle, rgba(255,255,255,0.95) 0 1px, transparent 1.5px),
        radial-gradient(circle, rgba(182,216,255,0.72) 0 1px, transparent 1.5px);
    background-size: 83px 83px, 137px 137px;
    background-position: 13px 21px, 48px 67px;
}

.pc-404-space__stars::before {
    opacity: 0.55;
    transform: translate(34px, 18px) scale(0.74);
}

.pc-404-space__stars::after {
    opacity: 0.35;
    transform: translate(-28px, 36px) scale(1.18);
}

.pc-404-space__orbit {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.pc-404-space__orbit path {
    fill: none;
    stroke: rgba(213, 230, 255, 0.25);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 8 14;
}

.pc-404-rocket {
    position: absolute;
    z-index: 5;
    top: 8%;
    left: 72%;
    width: clamp(5.5rem, 11vw, 8rem);
    aspect-ratio: 160 / 230;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    cursor: grab;
    transform: translate(-50%, 0) rotate(22deg);
    transform-origin: 50% 50%;
    filter: drop-shadow(0 1rem 1.2rem rgba(0,0,0,0.4));
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}

.pc-404-rocket:hover {
    transform: translate(-50%, 0) rotate(16deg) scale(1.04);
}

.pc-404-rocket:focus-visible {
    outline: 0.2rem solid #ffffff;
    outline-offset: 0.3rem;
    border-radius: 1rem;
}

.pc-404-rocket.is-dragging {
    cursor: grabbing;
    transform: translate(-50%, 0) rotate(-4deg) scale(1.05);
    transition: none;
}

.pc-404-rocket.is-landed {
    pointer-events: none;
    transform: translate(-50%, 0) rotate(0deg) scale(0.86);
    transition: left 0.45s ease, top 0.45s ease, transform 0.45s ease;
}

.pc-404-rocket > svg {
    display: block;
    width: 100%;
    height: 100%;
}

.pc-404-rocket__flame {
    transform-origin: 50% 0;
    animation: pcRocketFlame 0.24s ease-in-out infinite alternate;
}

@keyframes pcRocketFlame {
    from { transform: scaleY(0.86); opacity: 0.9; }
    to { transform: scaleY(1.08); opacity: 1; }
}

.pc-404-space__instruction {
    position: absolute;
    z-index: 3;
    top: 12%;
    left: clamp(1rem, 4vw, 2.5rem);
    width: min(25rem, 48%);
    padding: 0.85rem 1rem;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 1rem;
    color: rgba(238,246,255,0.8);
    background: rgba(5, 13, 28, 0.62);
    backdrop-filter: blur(8px);
}

.pc-404-space__instruction strong,
.pc-404-space__instruction span {
    display: block;
}

.pc-404-space__instruction strong {
    margin-bottom: 0.25rem;
    color: #ffffff;
    font-size: 1.05rem;
}

.pc-404-space__instruction span {
    font-size: 0.9rem;
    line-height: 1.45;
}

.pc-404-earth {
    position: absolute;
    z-index: 1;
    inset-inline: -4%;
    bottom: -1%;
    height: 37%;
    pointer-events: none;
    filter: drop-shadow(0 -0.8rem 2rem rgba(42, 146, 220, 0.18));
}

.pc-404-earth svg {
    width: 100%;
    height: 100%;
}

.pc-404-landing {
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: 4.5%;
    width: min(54%, 29rem);
    height: clamp(7.5rem, 16vw, 10rem);
    transform: translateX(-50%);
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #eef6ff;
    background: rgba(255,255,255,0.11);
    border: 0.18rem dashed rgba(255,255,255,0.78);
    box-shadow: inset 0 0 2.5rem rgba(255,255,255,0.08), 0 0 2rem rgba(77,175,245,0.16);
}

.pc-404-landing.is-ready {
    border-color: #ffffff;
    background: rgba(87, 220, 135, 0.2);
    box-shadow: inset 0 0 2.5rem rgba(92,225,143,0.16), 0 0 2.5rem rgba(92,225,143,0.34);
}

.pc-404-landing__ring {
    position: absolute;
    inset: 18%;
    border: 0.12rem solid rgba(255,255,255,0.58);
    border-radius: 50%;
}

.pc-404-landing__mark {
    font-size: clamp(2.6rem, 8vw, 5rem);
    font-weight: 900;
    line-height: 1;
    opacity: 0.84;
}

.pc-404-landing__label {
    position: absolute;
    bottom: 0.7rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgba(3, 13, 28, 0.65);
}

.pc-404-space__status {
    position: absolute;
    z-index: 7;
    inset-inline: 1rem;
    bottom: 1rem;
    margin: 0;
    color: #ffffff;
    text-align: center;
    font-weight: 800;
    pointer-events: none;
}

.pc-404__fallback {
    margin: 1.25rem 0 0;
    text-align: center;
}

.pc-404__fallback .pc-button {
    min-height: 2.8rem;
}

.purecanvas-error--404 .pc-system-messages,
.purecanvas-error--404 .pc-error-debug {
    width: min(54rem, 100%);
    margin-inline: auto;
}

@media (max-width: 47.99rem) {
    .pc-404 {
        padding-inline: max(1rem, var(--pc-page-gutter));
    }

    .pc-404-space {
        height: 34rem;
        min-height: 34rem;
    }

    .pc-404-space__instruction {
        top: 3.5%;
        left: 1rem;
        width: calc(100% - 2rem);
        padding: 0.7rem 0.8rem;
    }

    .pc-404-rocket {
        top: 28%;
        left: 74%;
        width: 5.7rem;
    }

    .pc-404-earth {
        height: 34%;
    }

    .pc-404-landing {
        bottom: 3.5%;
        width: 72%;
        height: 7.5rem;
    }
}

@media (max-width: 30rem) {
    .pc-404-space {
        height: 31.5rem;
        min-height: 31.5rem;
        border-radius: 1.1rem;
    }

    .pc-404-rocket {
        top: 30%;
        left: 76%;
        width: 5rem;
    }

    .pc-404-landing {
        width: 78%;
        height: 6.8rem;
    }

    .pc-404-landing__label {
        bottom: 0.35rem;
        font-size: 0.7rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pc-404-rocket__flame {
        animation: none;
    }

    .pc-404-rocket,
    .pc-404-rocket.is-landed {
        transition: none;
    }
}

/* 0.24.48: offline / maintenance illustration switched to the approved robot server scene.
   This is presentation only: Joomla still owns offline state and authentication. */
.purecanvas-offline--workshop {
    display: block;
    min-height: 100svh;
    padding: 0;
    color: #edf4fb;
    background:
        radial-gradient(circle at 14% 5%, rgba(255,255,255,0.08), transparent 24rem),
        radial-gradient(circle at 88% 20%, color-mix(in srgb, var(--pc-link) 20%, transparent), transparent 27rem),
        #07111d;
}

.pc-offline-shell {
    width: min(78rem, 100%);
    min-height: 100svh;
    margin-inline: auto;
    padding: clamp(1.15rem, 4vw, 3rem) max(1rem, var(--pc-page-gutter));
    display: grid;
    align-content: center;
    gap: clamp(1.25rem, 3vw, 2rem);
}

.pc-offline-hero {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(24rem, 1.1fr);
    align-items: center;
    gap: clamp(1.5rem, 5vw, 4.5rem);
}

.pc-offline-copy {
    min-width: 0;
}

.pc-offline-site-name {
    margin: 0 0 1rem;
    color: color-mix(in srgb, #edf4fb 70%, transparent);
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.05em;
}

.pc-offline-status {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 1rem;
    padding: 0.42rem 0.78rem;
    border: 1px solid color-mix(in srgb, var(--pc-link) 55%, transparent);
    border-radius: 999px;
    color: #ffffff;
    background: color-mix(in srgb, var(--pc-link) 18%, transparent);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.pc-offline-status > span {
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 50%;
    background: var(--pc-link);
    box-shadow: 0 0 0 0.3rem color-mix(in srgb, var(--pc-link) 18%, transparent);
}

.purecanvas-offline--workshop .pc-offline-copy h1 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(2.15rem, 5vw, 4.6rem);
    line-height: 0.98;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.pc-offline-lead {
    margin: 1.35rem 0 0;
    max-width: 38rem;
    color: #e6eef7;
    font-size: clamp(1.02rem, 1.9vw, 1.3rem);
    line-height: 1.65;
}

.pc-offline-aside {
    margin: 1rem 0 0;
    max-width: 34rem;
    color: color-mix(in srgb, #ffffff 72%, var(--pc-link));
    font-size: 0.95rem;
    font-weight: 700;
    font-style: italic;
}

.pc-offline-custom-message {
    margin: 1.25rem 0 0;
    max-width: 38rem;
    padding: 0.85rem 1rem;
    border-inline-start: 0.22rem solid var(--pc-link);
    border-radius: 0 var(--pc-button-radius) var(--pc-button-radius) 0;
    color: #eef5fc;
    background: rgba(255,255,255,0.07);
}

.purecanvas-offline--workshop .pc-offline-image {
    max-width: 28rem;
    margin: 1.2rem 0 0;
}

.pc-offline-workshop {
    position: relative;
    min-width: 0;
    padding: clamp(0.65rem, 2vw, 1rem);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: clamp(1.15rem, 3vw, 2rem);
    background: rgba(255,255,255,0.045);
    box-shadow: 0 1.5rem 5rem rgba(0,0,0,0.28);
    overflow: hidden;
}

.pc-offline-workshop::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255,255,255,0.06), transparent 38%, rgba(255,255,255,0.025));
}

.pc-offline-workshop__illustration {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    border-radius: clamp(0.9rem, 2.2vw, 1.5rem);
}

.pc-offline-workshop__caption {
    position: relative;
    z-index: 2;
    margin: 0.75rem 0 0.15rem;
    color: color-mix(in srgb, #ffffff 72%, transparent);
    text-align: center;
    font-size: 0.82rem;
    font-weight: 700;
}

.pc-offline-admin {
    width: min(42rem, 100%);
    margin-inline: auto;
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: var(--pc-radius);
    color: #eef5fc;
    background: rgba(255,255,255,0.055);
    overflow: hidden;
}

.pc-offline-admin > summary {
    padding: 0.9rem 1.05rem;
    cursor: pointer;
    color: #f2f7fc;
    font-weight: 800;
    text-align: center;
}

.pc-offline-admin > summary:hover,
.pc-offline-admin > summary:focus-visible {
    color: #ffffff;
    background: rgba(255,255,255,0.06);
}

.purecanvas-offline--workshop .pc-offline-login {
    margin: 0;
    padding: 1rem 1.05rem 1.15rem;
    border-top: 1px solid rgba(255,255,255,0.11);
}

.purecanvas-offline--workshop .pc-offline-login legend,
.purecanvas-offline--workshop .pc-offline-login label {
    color: #f1f6fb;
}

.purecanvas-offline--workshop .pc-offline-login input[type="text"],
.purecanvas-offline--workshop .pc-offline-login input[type="password"] {
    color: var(--pc-text);
    background: var(--pc-background);
}

.purecanvas-offline--workshop .pc-system-messages {
    width: min(52rem, 100%);
    margin-inline: auto;
}

@keyframes pc-offline-gear-spin {
    to { rotate: 360deg; }
}

@keyframes pc-offline-gear-spin-reverse {
    to { rotate: -360deg; }
}

@keyframes pc-offline-spark {
    0% { opacity: 0; scale: 0.45; translate: 0 0; }
    25% { opacity: 1; }
    100% { opacity: 0; scale: 1.2; translate: 0 -18px; }
}

@media (max-width: 58rem) {
    .pc-offline-shell {
        align-content: start;
    }

    .pc-offline-hero {
        grid-template-columns: 1fr;
    }

    .pc-offline-copy {
        text-align: center;
    }

    .pc-offline-lead,
    .pc-offline-aside,
    .pc-offline-custom-message,
    .purecanvas-offline--workshop .pc-offline-image {
        margin-inline: auto;
    }

    .pc-offline-workshop {
        width: min(42rem, 100%);
        margin-inline: auto;
    }
}

@media (max-width: 35rem) {
    .purecanvas-offline--workshop {
        min-height: 100svh;
    }

    .pc-offline-shell {
        padding: 1rem;
    }

    .purecanvas-offline--workshop .pc-offline-copy h1 {
        font-size: clamp(2rem, 11vw, 3rem);
    }

    .pc-offline-workshop {
        border-radius: 1rem;
    }

    .pc-offline-admin {
        border-radius: 1rem;
    }
}




/* 0.24.72: In content-width mode, keep Joomla Contact as one centred content block.
   The contact form already has a 60rem design cap; applying the same cap to the
   contact wrapper aligns heading, contact details and form without affecting
   full-width Component mode or other components. */
.pc-component:not(.pc-component--fullwidth) .pc-component__main .com-contact {
    width: min(100%, 60rem);
    margin-inline: auto;
}

/* 0.24.48: Joomla Contact presentation.
   PureCanvas styles Joomla's normal contact output without changing fields or behaviour. */
.pc-component__main .com-contact .contact-form,
.pc-component__main .com-contact form.contact-form {
    width: min(100%, 60rem);
    margin-top: clamp(1.25rem, 3vw, 2rem);
}

.pc-component__main .com-contact .contact-form fieldset,
.pc-component__main .com-contact form.contact-form fieldset {
    min-width: 0;
    margin: 0;
    padding: clamp(1rem, 2.5vw, 1.5rem);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius);
    background: color-mix(in srgb, var(--pc-surface) 58%, var(--pc-background));
    box-shadow: 0 0.5rem 1.5rem color-mix(in srgb, #000 7%, transparent);
}

.pc-component__main .com-contact .contact-form legend,
.pc-component__main .com-contact form.contact-form legend {
    width: auto;
    max-width: calc(100% - 1rem);
    padding: 0 0.45rem;
    color: var(--pc-text);
    font-size: 1.05rem;
    font-weight: 700;
}

.pc-component__main .com-contact .contact-form :where(.control-group, .form-group, .mb-3) {
    margin-bottom: 1.05rem;
}

.pc-component__main .com-contact .contact-form textarea {
    min-height: clamp(11rem, 28vh, 18rem);
}

.pc-component__main .com-contact .contact-form :where(.btn-primary, button[type="submit"], input[type="submit"]) {
    min-height: 2.7rem;
    padding-inline: 1rem;
    font-weight: 700;
}

.pc-component__main .com-contact .contact-form :where(.captcha, .captchacontainer, .form-control-feedback) {
    margin-block: 0.4rem 1rem;
}

@media (max-width: 35rem) {
    .pc-component__main .com-contact .contact-form fieldset,
    .pc-component__main .com-contact form.contact-form fieldset {
        padding: 0.9rem;
        border-radius: calc(var(--pc-radius) * 0.85);
    }

    .pc-component__main .com-contact .contact-form textarea {
        min-height: 10rem;
    }
}

/* 0.24.48: Joomla frontend editing chrome.
   Joomla injects .jmodedit followed by a role=tooltip element into module
   output when frontend module editing is enabled. PureCanvas is framework-free,
   so provide the small amount of presentation Cassiopeia normally supplies. */
.purecanvas-site .pc-position > *:has(> .jmodedit) {
    position: relative;
}

.purecanvas-site .pc-position .btn.jmodedit {
    position: absolute;
    z-index: 900;
    top: 0.35rem;
    right: 0.35rem;
    left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    min-height: 2rem;
    margin: 0;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--pc-link) 48%, var(--pc-border));
    border-radius: 0.45rem;
    color: var(--pc-on-link);
    background: var(--pc-link);
    box-shadow: 0 0.2rem 0.55rem rgba(0,0,0,0.18);
    font-size: 1rem;
    line-height: 1;
    text-decoration: none;
}

.purecanvas-site .pc-position .btn.jmodedit:hover,
.purecanvas-site .pc-position .btn.jmodedit:focus-visible {
    border-color: var(--pc-button-hover-border);
    color: var(--pc-button-hover-color);
    background: var(--pc-button-hover-bg);
}

.purecanvas-site .jmodedit > .icon-edit,
.purecanvas-site .jmenuedit > .icon-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    font-size: 0;
    line-height: 1;
}

.purecanvas-site .jmodedit > .icon-edit::before,
.purecanvas-site .jmenuedit > .icon-edit::before {
    content: "✎";
    font-family: Arial, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}

/* Joomla emits this tooltip as ordinary markup. Without Bootstrap styling it
   becomes visible page text. Keep it hidden and reveal it only for the edit
   control that describes it. */
.purecanvas-site .jmodedit + [role="tooltip"][id^="tip-"] {
    position: absolute;
    z-index: 905;
    top: 2.7rem;
    right: 0.35rem;
    display: none;
    width: max-content;
    max-width: min(18rem, calc(100vw - 2rem));
    padding: 0.5rem 0.65rem;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 0.45rem;
    color: #f4f7fb;
    background: #132236;
    box-shadow: 0 0.5rem 1.4rem rgba(0,0,0,0.3);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
    pointer-events: none;
}

.purecanvas-site .jmodedit:hover + [role="tooltip"][id^="tip-"],
.purecanvas-site .jmodedit:focus-visible + [role="tooltip"][id^="tip-"] {
    display: block;
}

/* Menu-item editing is also injected by Joomla when enabled. Keep it compact
   and visually subordinate to the site's actual menu item. */
.purecanvas-site .jmenuedit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.45rem;
    height: 1.45rem;
    margin-inline-end: 0.2rem;
    border: 1px solid color-mix(in srgb, var(--pc-link) 40%, var(--pc-border));
    border-radius: 0.35rem;
    color: var(--pc-on-link);
    background: var(--pc-link);
    text-decoration: none;
    vertical-align: middle;
}

.purecanvas-site .jmenuedit:hover,
.purecanvas-site .jmenuedit:focus-visible {
    color: var(--pc-button-hover-color);
    background: var(--pc-button-hover-bg);
    border-color: var(--pc-button-hover-border);
}

@media (max-width: 47.99rem) {
    .purecanvas-site .pc-position .btn.jmodedit {
        top: 0.25rem;
        right: 0.25rem;
        width: 1.85rem;
        height: 1.85rem;
        min-width: 1.85rem;
        min-height: 1.85rem;
    }

    .purecanvas-site .jmodedit + [role="tooltip"][id^="tip-"] {
        top: 2.35rem;
        right: 0.25rem;
        max-width: min(16rem, calc(100vw - 1.5rem));
    }
}

/* 0.24.48: keep Joomla's frontend module-edit control clear of the compact
   logged-in/logout layout. The logout button owns the right edge, so the
   edit control is moved to the module's upper-left corner only for this
   specific alternate layout. */
.purecanvas-site .pc-position > .moduletable:has(.pc-login-compact--logout) > .btn.jmodedit,
.purecanvas-site .pc-position > .module:has(.pc-login-compact--logout) > .btn.jmodedit {
    right: auto;
    left: 0.35rem;
}

.purecanvas-site .pc-position > .moduletable:has(.pc-login-compact--logout) > .jmodedit + [role="tooltip"][id^="tip-"],
.purecanvas-site .pc-position > .module:has(.pc-login-compact--logout) > .jmodedit + [role="tooltip"][id^="tip-"] {
    right: auto;
    left: 0.35rem;
}

@media (max-width: 47.99rem) {
    .purecanvas-site .pc-position > .moduletable:has(.pc-login-compact--logout) > .btn.jmodedit,
    .purecanvas-site .pc-position > .module:has(.pc-login-compact--logout) > .btn.jmodedit {
        right: auto;
        left: 0.25rem;
    }

    .purecanvas-site .pc-position > .moduletable:has(.pc-login-compact--logout) > .jmodedit + [role="tooltip"][id^="tip-"],
    .purecanvas-site .pc-position > .module:has(.pc-login-compact--logout) > .jmodedit + [role="tooltip"][id^="tip-"] {
        right: auto;
        left: 0.25rem;
    }
}


/* 0.24.48: reserve a dedicated edit-control gutter in the compact logout
   module. Moving Joomla's edit control alone made it overlap the greeting;
   reserving space keeps the edit control, profile text and Log af separate. */
.purecanvas-site .pc-position > .moduletable:has(> .jmodedit):has(.pc-login-compact--logout),
.purecanvas-site .pc-position > .module:has(> .jmodedit):has(.pc-login-compact--logout) {
    box-sizing: border-box;
    padding-inline-start: 2.85rem;
}

.purecanvas-site .pc-position > .moduletable:has(> .jmodedit):has(.pc-login-compact--logout) > .btn.jmodedit,
.purecanvas-site .pc-position > .module:has(> .jmodedit):has(.pc-login-compact--logout) > .btn.jmodedit {
    top: 50%;
    left: 0.35rem;
    right: auto;
    translate: 0 -50%;
}

.purecanvas-site .pc-position > .moduletable:has(> .jmodedit):has(.pc-login-compact--logout) > .jmodedit + [role="tooltip"][id^="tip-"],
.purecanvas-site .pc-position > .module:has(> .jmodedit):has(.pc-login-compact--logout) > .jmodedit + [role="tooltip"][id^="tip-"] {
    top: calc(50% + 1.35rem);
    left: 0.35rem;
    right: auto;
}

@media (max-width: 47.99rem) {
    .purecanvas-site .pc-position > .moduletable:has(> .jmodedit):has(.pc-login-compact--logout),
    .purecanvas-site .pc-position > .module:has(> .jmodedit):has(.pc-login-compact--logout) {
        padding-inline-start: 2.55rem;
    }

    .purecanvas-site .pc-position > .moduletable:has(> .jmodedit):has(.pc-login-compact--logout) > .btn.jmodedit,
    .purecanvas-site .pc-position > .module:has(> .jmodedit):has(.pc-login-compact--logout) > .btn.jmodedit {
        left: 0.25rem;
    }

    .purecanvas-site .pc-position > .moduletable:has(> .jmodedit):has(.pc-login-compact--logout) > .jmodedit + [role="tooltip"][id^="tip-"],
    .purecanvas-site .pc-position > .module:has(> .jmodedit):has(.pc-login-compact--logout) > .jmodedit + [role="tooltip"][id^="tip-"] {
        left: 0.25rem;
    }
}