/* Native Joomla shell. Shared colour roles come from /media/rikoooo/palette.css.
   Existing Rikoooo surface styles retain ownership of their content components. */
html:has(body.riko-native) {
    font: 400 16px/1.55 "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    color: var(--riko-text);
    background-color: var(--riko-page-bg);
    background-image: var(--riko-page-texture), linear-gradient(180deg, var(--riko-page-wash), var(--riko-page-bg));
    background-size: var(--riko-page-texture-size), 100% 900px;
    background-repeat: var(--riko-page-texture-repeat), no-repeat;
    background-position: center top;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.riko-native {
    position: relative;
    z-index: 0;
    min-width: 0;
    margin: 0;
    color: var(--riko-on-brand-muted);
    background: transparent;
    font: 400 16px/1.55 "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    overflow-wrap: break-word;
}

.riko-native *,
.riko-native *::before,
.riko-native *::after { box-sizing: border-box; }
.riko-native [hidden] { display: none !important; }
.riko-native :where(img, svg, video, canvas) { max-width: 100%; }
.riko-native :where(img, video) { height: auto; }
.riko-native :where(iframe) { max-width: 100%; border: 0; }
.riko-native :where(a) { color: var(--riko-link); text-underline-offset: .18em; }
.riko-native :where(a:hover) { color: var(--riko-action-hover); }
.riko-native :where(button, input, select, textarea) { font: inherit; }
.riko-native :where(button, [type="button"], [type="submit"], summary) { cursor: pointer; }
.riko-native :where(h1, h2, h3, h4, h5, h6) { color: var(--riko-ink); font-family: inherit; font-weight: 600; line-height: 1.25; }
.riko-native :where(h1) { font-size: clamp(1.75rem, 1.3rem + 1.3vw, 2.5rem); }
.riko-native :where(h2) { font-size: 1.5rem; }
.riko-native :where(h3) { font-size: 1.2rem; }
.riko-native :where(p, ul, ol, dl, blockquote, figure) { margin-block: 0 1em; }
.riko-native :where(hr) { margin-block: 1.5rem; border: 0; border-top: 1px solid var(--riko-line); }
.riko-native :where(table) { border-collapse: collapse; max-width: 100%; }
.riko-native :where(th, td) { padding: .6rem .75rem; border-bottom: 1px solid var(--riko-line); text-align: start; }
.riko-native :where(pre) { max-width: 100%; padding: 1rem; overflow: auto; background: var(--riko-surface-soft); }
.riko-native :where(button, a, input, select, textarea, summary):focus-visible { outline: 3px solid var(--riko-focus); outline-offset: 3px; }
.riko-native :where([disabled], [aria-disabled="true"]) { cursor: default; }

.riko-native .visually-hidden,
.riko-native .riko-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.riko-native .riko-skip-link {
    position: fixed;
    z-index: 11000;
    top: 8px;
    left: 8px;
    padding: .75rem 1rem;
    color: var(--riko-action-contrast);
    background: var(--riko-action);
    transform: translateY(-180%);
}
.riko-native .riko-skip-link:focus { transform: none; }
.riko-native .riko-totop-placeholder { position: fixed; z-index: 1000; right: 20px; bottom: 20px; }
.riko-native .riko-totop-placeholder .tm-totop-scroller { position: static; display: grid; width: 44px; height: 44px; place-items: center; color: var(--riko-action); text-decoration: none; }
.riko-native .riko-totop-placeholder .tm-totop-scroller::before { display: block; width: 12px; height: 12px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; content: ""; transform: translateY(3px) rotate(-45deg); }

/* Positions stay in the document flow; module counts need no JavaScript grid. */
body.riko-native .riko-site-shell,
body.riko-native .tm-inner-container {
    width: calc(100% - 32px) !important;
    max-width: 1520px !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
}
.riko-native .riko-site-main,
.riko-native .tm-container { min-width: 0; margin-block: 20px 10px; }
.riko-native .riko-page-columns { --riko-page-columns: minmax(0, 1fr); display: grid; grid-template-columns: var(--riko-page-columns); gap: 0; align-items: start; max-width: 100%; margin-inline-start: -5px; }
.riko-native .riko-page-columns > :is(.riko-main-column, .riko-sidebar) { padding-inline-start: 5px; }
.riko-native :is(.riko-main-column, .riko-sidebar, .tm-content, .riko-module) { min-width: 0; }
.riko-native .riko-sidebar--a { grid-column: 1; grid-row: 1; }
.riko-native .riko-sidebar--b { grid-column: -2; grid-row: 1; }
.riko-native .has-sidebar-a > .riko-main-column { grid-column: 2; }
.riko-native .has-sidebar-b:not(.has-sidebar-a) > .riko-main-column { grid-column: 1; }
.riko-native .riko-module-grid { display: grid; grid-template-columns: var(--riko-module-columns, minmax(0, 1fr)); gap: 5px 0; max-width: 100%; margin: 0 0 0 -5px; }
.riko-native .riko-module-grid > * { min-width: 0; padding-inline-start: 5px; }
.riko-native .riko-background-cover { background-size: cover; background-position: 50% 50%; }
.riko-native .riko-background-content { position: relative; }
.riko-native .riko-grid-stack { grid-template-columns: minmax(0, 1fr); }
.riko-native .riko-grid-collapse { gap: 0; margin-inline-start: 0; }
.riko-native .riko-grid-collapse > * { padding-inline-start: 0; }
.riko-native .riko-banner { display: grid; grid-template-columns: minmax(0, 1fr); max-width: none; margin-inline-start: -5px; }
.riko-native .riko-banner > * { min-width: 0; margin: 0; padding-inline-start: 5px; }
.riko-native .riko-banner.has-menu-side { grid-template-columns: 1fr 3fr; }
.riko-native .riko-sidebar > * + *,
.riko-native .riko-main-column > * + * { margin-block-start: 5px; }
.riko-native .riko-module__title { margin: 0 0 7px; padding-bottom: 15px; font-size: 19px; line-height: 25px; }
.riko-native #tm-content { min-width: 0; }
.riko-native #tm-footer { display: block; }
.riko-native #tm-footer > * { min-width: 0; }
.riko-native .riko-site-container { box-sizing: border-box; max-width: 1540px; margin-inline: auto; padding-inline: 5px; }

/* Joomla hides modules during MFA; the challenge owns its reading surface. */
body.riko-native.com_users.view-captive .riko-site-shell > .tm-container,
body.riko-native.com_users.view-captive #tm-content {
    background: none !important;
    border: 0;
    box-shadow: none;
    padding: 0 !important;
}
body.riko-native.com_users.view-captive #tm-middle { margin-inline: 0; }
body.riko-native.com_users.view-captive #tm-main { padding-inline: 0; }
body.riko-native.com_users.view-captive #tm-content { width: min(100%, 820px); margin-inline: auto; }
body.riko-native.com_users.view-captive #tm-content::before { display: none; }
body.riko-native.com_users.view-captive #tm-content .riko-mfa-page { width: 100%; margin: 0; }
body.riko-native.com_users.view-captive .riko-header-account > a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    padding: 8px 14px;
    border: 1px solid var(--riko-on-brand-muted);
    border-radius: 8px;
    color: var(--riko-on-brand);
}
body.riko-native.com_users.view-captive .riko-header-account > a:is(:hover, :focus-visible) {
    background: color-mix(in srgb, var(--riko-inverse) 12%, transparent);
    color: var(--riko-on-brand);
}

.riko-native .riko-footer-columns { display: flex; width: 100%; align-items: center; justify-content: space-between; }
.riko-native .riko-breadcrumbs { padding-block: .75rem; }
.riko-native .riko-breadcrumbs :is(ol, ul) { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0; list-style: none; }

/* Native hooks share the original Rikoooo header skin and its exact
   desktop/tablet/mobile geometry; no framework layout is loaded. */
/* Header controls retain their established geometry while reading content
   uses the larger native text scale. */
body.riko-native .riko-global-header,
body.riko-native .riko-menu-dialog { font: 400 14px/18px "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif; }
body.riko-native .riko-global-header { position: relative; z-index: 1000; }
/* Guest registration remains a native link beside the existing login control. */
body.riko-native .riko-global-header .riko-header-account:has(> .riko-header-signup) { display: flex; align-items: center; gap: 8px; }
body.riko-native .riko-global-header .riko-header-signup { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid var(--riko-action); border-radius: 8px; color: var(--riko-action-contrast); background: var(--riko-action); font-size: 13px; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; }
body.riko-native .riko-global-header .riko-header-signup:is(:hover, :focus-visible) { border-color: var(--riko-action-hover); color: var(--riko-action-contrast); background: var(--riko-action-hover); }
/* Preserve the authored toolbar geometry without the old float/clearfix rules. */
body.riko-native .riko-global-header #tm-toolbar .riko-toolbar-r { margin: 0 !important; justify-self: start; text-align: start; }
body.riko-native .riko-global-header #tm-toolbar .riko-toolbar-l > .riko-module { margin-inline-end: 10px; }
body.riko-native .riko-global-header #tm-toolbar .riko-toolbar-links { margin-inline-start: 10px; }
body.riko-native .riko-global-header #tm-toolbar .riko-utility-nav { padding-inline: 4px !important; }
body.riko-native .riko-global-header .riko-header-controls { gap: 16px; }
body.riko-native .riko-global-header .riko-public-menu__toggle::after { box-sizing: content-box; }
body.riko-native .riko-global-header .riko-header-brand > .riko-brand-small { display: none !important; }
.riko-native .riko-header-primary { flex: 1 1 auto; width: 100%; min-width: 0; }
.riko-native #riko-primary-menu { width: 100%; min-width: 0; }
.riko-native .tm-header { display: flex; width: 100%; align-items: center; justify-content: space-between; }
.riko-native .riko-header__actions { display: none; align-items: center; gap: 8px; }

.riko-native .riko-header-primary :is(ul, ol),
.riko-native .riko-menu-dialog :is(ul, ol) { margin: 0; padding: 0; list-style: none; }
.riko-native .riko-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.riko-native .riko-nav li { margin: 0; padding: 0; list-style: none; }
.riko-native .riko-nav li { position: relative; min-width: 0; }
.riko-native .riko-nav a,
.riko-native .riko-nav .nav-header,
.riko-native .riko-nav .separator { display: block; padding: 12px 13px; color: var(--riko-on-brand); font-size: .9rem; font-weight: 600; line-height: 1.3; text-decoration: none; }
.riko-native .riko-nav > li > a { white-space: nowrap; }
.riko-native .riko-nav :is(a:hover, a:focus-visible),
.riko-native .riko-nav > .active > a,
.riko-native .riko-nav a[aria-current="page"] { color: var(--riko-on-brand); background: color-mix(in srgb, var(--riko-inverse) 12%, transparent); border-radius: 7px; }
.riko-native .riko-nav :is(a, button):focus-visible { outline-color: var(--riko-focus-on-brand); }
.riko-native .riko-nav :is(.parent, .riko-has-submenu) > :is(a, .nav-header, .separator) { padding-inline-end: 44px; }
.riko-native .riko-nav .riko-submenu-toggle { position: absolute; inset-block-start: 4px; inset-inline-end: 2px; display: grid; width: 36px; height: 36px; place-items: center; padding: 0; border: 0; border-radius: 6px; color: var(--riko-on-brand); background: transparent; }
.riko-native .riko-nav .riko-submenu-toggle::after,
html.riko-js[data-riko-nav-pending] .riko-native .riko-global-header .riko-nav > li.parent > .nav-header::after { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; content: ""; transform: translateY(-2px) rotate(45deg); }
.riko-native .riko-nav .riko-submenu-toggle[aria-expanded="true"]::after { transform: translateY(2px) rotate(225deg); }
.riko-native .riko-nav .riko-submenu-toggle:hover { background: color-mix(in srgb, var(--riko-inverse) 12%, transparent); }
.riko-native .riko-nav > li > .riko-submenu-toggle.mod-menu__toggle-sub,
html.riko-js[data-riko-nav-pending] .riko-native .riko-global-header .riko-nav > li.parent > .nav-header { position: static; display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 0; height: 44px; min-height: 44px; gap: 7px; margin: 0; padding: 0 10px; border: 1px solid transparent; border-radius: 7px; color: var(--riko-on-brand-muted); background: transparent; font-size: 16px; font-weight: 600; line-height: 44px; }
.riko-native .riko-nav .riko-submenu-toggle.mod-menu__toggle-sub > .nav-header { display: inline; min-height: 0; margin: 0; padding: 0; color: inherit; font: inherit; line-height: inherit; }
.riko-native .riko-nav .riko-submenu-toggle.mod-menu__toggle-sub:hover { color: var(--riko-on-brand); background: color-mix(in srgb, var(--riko-inverse) 7%, transparent); }
body.riko-native .riko-global-header .riko-submenu-toggle.mod-menu__toggle-sub::after,
html.riko-js[data-riko-nav-pending] body.riko-native .riko-global-header .riko-nav > li.parent > .nav-header::after { border-width: 1.5px; }
.riko-native .riko-nav > li > ul { position: absolute; z-index: 200; inset-block-start: 100%; inset-inline-start: 0; width: max-content; min-width: 14rem; max-width: min(24rem, calc(100vw - 32px)); padding: 8px; border: 1px solid var(--riko-line); border-radius: 10px; color: var(--riko-text); background: var(--riko-surface); box-shadow: 0 12px 28px color-mix(in srgb, var(--riko-brand-deep) 18%, transparent); }
.riko-native .riko-nav > li:last-child > ul { inset-inline-start: auto; inset-inline-end: 0; }
html:not(.riko-js) .riko-native .riko-nav > li > ul { position: static; }
/* The head bootstrap closes pending menus before their native handlers are ready.
   Without JavaScript, or after a failed setup, the complete navigation stays visible. */
html.riko-js[data-riko-nav-pending] .riko-global-header .riko-nav > li > ul { display: none; }
.riko-native .riko-nav ul a,
.riko-native .riko-nav ul :is(.nav-header, .separator) { min-height: 40px; padding: 10px 12px; color: var(--riko-ink); white-space: normal; }
.riko-native .riko-nav ul :is(a:hover, a:focus-visible, a[aria-current="page"]) { color: var(--riko-link); background: var(--riko-action-soft); }
.riko-native .riko-nav ul :is(a, button):focus-visible { outline-color: var(--riko-focus); }
.riko-native .riko-nav ul .riko-submenu-toggle { color: var(--riko-ink); }
.riko-native .riko-nav ul .riko-submenu-toggle:hover { background: var(--riko-action-soft); }
.riko-native .riko-nav ul ul { margin-inline-start: 12px; border-inline-start: 1px solid var(--riko-line); }
body.riko-native .riko-global-header .tm-navbar .riko-submenu { z-index: 100000; display: grid; min-width: 246px; gap: 3px; margin-top: 10px; padding: 10px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--riko-line) 20%, transparent); border-radius: 10px; background: var(--riko-surface); box-shadow: 0 24px 58px color-mix(in srgb, var(--riko-brand-deep) 22%, transparent); }
body.riko-native .riko-global-header .tm-navbar .riko-submenu::before { position: absolute; top: 0; right: 18px; left: 18px; height: 3px; border-radius: 0 0 999px 999px; background: var(--riko-brand-end); content: ""; }
body.riko-native .riko-global-header .tm-navbar .riko-submenu > li > a { position: relative; display: flex; min-height: 42px; align-items: center; padding: 0 14px 0 18px; border: 1px solid transparent; border-radius: 12px; color: var(--riko-ink); background: transparent; font-size: 14px; font-weight: 900; line-height: 42px; text-decoration: none; transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease; }
body.riko-native .riko-global-header .tm-navbar .riko-submenu > li > a::before { position: absolute; top: 12px; bottom: 12px; left: 7px; width: 3px; border-radius: 999px; background: transparent; content: ""; }
body.riko-native .riko-global-header .tm-navbar .riko-submenu > li > a:is(:hover, :focus) { border-color: color-mix(in srgb, var(--riko-focus) 18%, transparent); color: var(--riko-focus); background: linear-gradient(90deg, color-mix(in srgb, var(--riko-action-soft-hover) 95%, transparent), color-mix(in srgb, var(--riko-surface) 88%, transparent)); transform: translateX(2px); }
body.riko-native .riko-global-header .tm-navbar .riko-submenu > li > a:is(:hover, :focus)::before { background: var(--riko-action-hover); }
.riko-native .riko-menu-toggle { display: none; align-items: center; justify-content: center; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; border: 1px solid color-mix(in srgb, var(--riko-line) 24%, transparent); border-radius: 8px; color: var(--riko-on-brand); background: color-mix(in srgb, var(--riko-inverse) 5%, transparent); }
.riko-native .riko-menu-toggle svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 2; }
.riko-native .riko-menu-toggle:focus-visible { outline-color: var(--riko-focus-on-brand); }

/* The browser's native dialog supplies the modal focus boundary and Escape. */
.riko-menu-open,
.riko-content-dialog-open { overflow: hidden; }
.riko-native .riko-menu-dialog {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(390px, calc(100% - 20px));
    height: 100%;
    height: 100dvh;
    max-height: none;
    max-width: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    overscroll-behavior: contain;
    border: 0;
    color: var(--riko-on-brand);
    background: transparent;
    box-shadow: none;
}
.riko-native .riko-menu-dialog::backdrop { background: var(--riko-overlay); }
.riko-native .riko-menu-dialog > .uk-offcanvas-bar { position: relative; inset: auto; display: block; transform: none; visibility: visible; }
.riko-native .riko-menu-dialog:has(.riko-offcanvas-head) .riko-menu-close { display: none; }
.riko-native .riko-menu-dialog__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block-end: 16px; margin-block-end: 12px; border-bottom: 1px solid var(--riko-line); }
.riko-native .riko-menu-dialog__title { margin: 0; color: var(--riko-ink); font-size: 1.35rem; }
.riko-native .riko-menu-dialog [data-riko-menu-close] { display: grid; flex: 0 0 44px; width: 44px; height: 44px; place-items: center; padding: 0; border: 1px solid var(--riko-line); border-radius: 8px; color: var(--riko-ink); background: var(--riko-surface-soft); font-size: 1.7rem; line-height: 1; }
.riko-native .riko-menu-dialog .riko-menu-close { display: flex; width: auto; min-width: 44px; margin-inline-start: auto; margin-block-end: 14px; padding-inline: 12px; font-size: 1rem; }
.riko-native .riko-menu-dialog .riko-nav { display: block; }
.riko-native .riko-menu-dialog .riko-nav > li { border-bottom: 1px solid var(--riko-line); }
.riko-native .riko-menu-dialog .riko-nav :is(a, .nav-header, .separator) { min-height: 48px; padding: 14px 10px; color: var(--riko-ink); white-space: normal; }
.riko-native .riko-menu-dialog .riko-nav :is(a:hover, a:focus-visible, a[aria-current="page"]),
.riko-native .riko-menu-dialog .riko-nav > .active > a { color: var(--riko-link); background: var(--riko-action-soft); }
.riko-native .riko-menu-dialog .riko-nav :is(a, button):focus-visible { outline-color: var(--riko-focus); }
.riko-native .riko-menu-dialog .riko-nav .riko-has-submenu > :is(a, .nav-header, .separator) { padding-inline-end: 48px; }
.riko-native .riko-menu-dialog .riko-nav .riko-submenu-toggle { inset-block-start: 5px; width: 40px; height: 40px; color: var(--riko-ink); }
.riko-native .riko-menu-dialog .riko-nav .riko-submenu-toggle:hover { background: var(--riko-action-soft); }
.riko-native .riko-menu-dialog .riko-nav > li > ul { position: static; width: auto; min-width: 0; max-width: none; padding: 0 0 10px 12px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.riko-native .riko-menu-dialog .riko-nav ul a { font-size: .9rem; font-weight: 400; }
.riko-native .riko-menu-dialog .riko-menu-tools { display: grid; gap: 16px; margin-block-start: 24px; }
.riko-native .riko-content-dialog { width: min(760px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 24px; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--riko-line); border-radius: 12px; color: var(--riko-text); background: var(--riko-surface); box-shadow: 0 20px 64px color-mix(in srgb, var(--riko-brand-deep) 24%, transparent); }
.riko-native .riko-content-dialog::backdrop { background: var(--riko-overlay); }
.riko-native .riko-content-dialog [data-riko-dialog-close] { display: flex; min-height: 44px; margin: 0 0 16px auto; padding: 8px 12px; border: 1px solid var(--riko-line); border-radius: 6px; color: var(--riko-ink); background: var(--riko-surface-soft); }

/* Core Joomla forms and messages work without a vendor framework stylesheet. */
.riko-native :where(.control-group, .mb-3) { margin-block-end: 1rem; }
.riko-native :where(label, .control-label) { display: block; margin-block-end: .3rem; color: var(--riko-ink); }
.riko-native :where(.form-control, .form-select, input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="url"], input[type="number"], select, textarea) { max-width: 100%; min-height: 44px; padding: .6rem .75rem; border: 1px solid var(--riko-line-strong); border-radius: 6px; color: var(--riko-ink); background: var(--riko-surface); }
.riko-native :where(.form-control, .form-select, textarea) { width: 100%; }
.riko-native :where(input[type="checkbox"], input[type="radio"]) { width: 1.1em; height: 1.1em; accent-color: var(--riko-action); }
.riko-native :where(input, textarea)::placeholder { color: var(--riko-muted); opacity: 1; }
.riko-native :where(fieldset) { min-width: 0; margin: 0 0 1.5rem; padding: 1rem; border: 1px solid var(--riko-line); border-radius: 8px; }
.riko-native :where(legend) { width: auto; max-width: 100%; padding-inline: .4rem; color: var(--riko-ink); font-weight: 600; }
.riko-native :where(.btn) { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: .5rem; padding: .6rem 1rem; border: 1px solid var(--riko-line-strong); border-radius: 6px; color: var(--riko-ink); background: var(--riko-surface-soft); font: inherit; line-height: 1.3; text-align: center; text-decoration: none; cursor: pointer; }
.riko-native :where(.btn:hover) { color: var(--riko-link); background: var(--riko-action-soft-hover); }
.riko-native :where(.btn-primary) { border-color: var(--riko-action); color: var(--riko-action-contrast); background: var(--riko-action); }
.riko-native :where(.btn-primary:hover) { border-color: var(--riko-action-hover); color: var(--riko-action-contrast); background: var(--riko-action-hover); }
.riko-native :where(.form-text, .text-muted, .small) { color: var(--riko-muted); font-size: .875rem; }
.riko-native :where(.invalid, [aria-invalid="true"]) { border-color: var(--riko-danger); }
.riko-native :where(.alert, joomla-alert) { display: block; position: relative; padding: 1rem; margin-block-end: 1rem; border: 1px solid var(--riko-line); border-radius: 8px; color: var(--riko-text); background: var(--riko-surface); }
.riko-native :where(.alert-success, joomla-alert[type="success"]) { border-color: var(--riko-success); color: var(--riko-success); background: var(--riko-success-surface); }
.riko-native :where(.alert-warning, joomla-alert[type="warning"]) { border-color: var(--riko-warning); color: var(--riko-warning); background: var(--riko-warning-surface); }
.riko-native :where(.alert-danger, .alert-error, joomla-alert[type="danger"]) { border-color: var(--riko-danger); color: var(--riko-danger); background: var(--riko-danger-surface); }
.riko-native :where(.pagination) { display: flex; flex-wrap: wrap; gap: .35rem; padding: 0; list-style: none; }
.riko-native :where(.pagination a, .pagination span) { display: inline-flex; min-width: 40px; min-height: 40px; align-items: center; justify-content: center; padding: .4rem .7rem; border: 1px solid var(--riko-line); border-radius: 5px; color: var(--riko-link); background: var(--riko-surface); text-decoration: none; }
.riko-native :where(.pagination .active span) { color: var(--riko-action-contrast); border-color: var(--riko-action); background: var(--riko-action); }

@media (max-width: 1240px) {
    .riko-native .riko-header__actions { display: flex; }
    .riko-js .riko-native .riko-header-primary { display: none; }
    .riko-js .riko-native .riko-menu-toggle { display: inline-flex; }
    html:not(.riko-js) body.riko-native .riko-global-header .riko-header-deck { flex-wrap: wrap; }
    html:not(.riko-js) .riko-native .riko-header-primary .riko-nav { display: block; }
}

@media (max-width: 767px) {
    .riko-native .riko-page-columns:is(.has-sidebar-a, .has-sidebar-b, .has-sidebar-a.has-sidebar-b) { grid-template-columns: minmax(0, 1fr); }
    .riko-native .riko-page-columns > :is(.riko-main-column, .riko-sidebar--a, .riko-sidebar--b) { grid-column: 1; grid-row: auto; }
    .riko-native .riko-page-columns > .riko-main-column { order: -1; }
    .riko-native .riko-grid-responsive-medium,
    .riko-native .riko-banner.has-menu-side { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
    .riko-native .riko-menu-dialog::backdrop { background: color-mix(in srgb, var(--riko-brand-deep) 56%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}

@media (max-width: 700px) {
    body.riko-native .riko-site-shell,
    body.riko-native .tm-inner-container { width: calc(100% - 16px) !important; }
    .riko-native .riko-menu-toggle { width: 44px; height: 44px; }
    body.riko-native .riko-global-header .riko-header-deck:has(.riko-header-signup) { padding-inline-start: 12px !important; }
}

@media (prefers-reduced-motion: reduce) {
    .riko-native *, .riko-native *::before, .riko-native *::after { scroll-behavior: auto !important; }
}

@media (forced-colors: active) {
    .riko-native :is(.riko-menu-toggle, .riko-submenu-toggle) { border: 1px solid currentColor; }
}