/* ==================================================================
   Siavash — Joomla 6 site template
   Light "fabric" theme (petrol-blue / sage accents) with an optional
   dark "neon glass" mode, carried over from the Finalsepehr themes.

   Direction: this one file serves RTL (fa, ar) and LTR (en). It uses
   only logical properties (margin-inline-*, inset-inline-*, text-align:
   start/end, float: inline-*), so nothing here needs an -rtl twin.

   Colours: every colour is a token on :root. Accent and mode are
   switched by attributes the template prints on <html>:
     data-accent="petrol|sage"   data-mode="light|dark" (absent = auto)
   ================================================================== */

/* -------------------------------------------------------------- font */
@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/vazirmatn/Vazirmatn%5Bwght%5D.woff2') format('woff2-variations'),
         url('../fonts/vazirmatn/Vazirmatn%5Bwght%5D.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ------------------------------------------------------------ tokens */
:root {
    --font-sans: 'Vazirmatn', 'Noto Sans Arabic', 'Geeza Pro', Tahoma, 'Segoe UI', Arial, sans-serif;
    --font-serif: Charter, 'Bitstream Charter', 'Sitka Text', 'Iowan Old Style', Cambria, Georgia, serif;
    --font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
    --font-body: var(--font-sans);
    --font-heading: var(--font-sans);
    --line-height-base: 1.75;
    --line-height-prose: 2;

    color-scheme: light;

    /* base surfaces and text */
    --bg: #f5f5f3;
    --panel: rgba(255, 255, 255, .74);
    --panel-strong: rgba(255, 255, 255, .92);
    --surface: linear-gradient(180deg, #ffffff, #fcfcfb);
    --surface-card: linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(252, 252, 251, .94));
    --surface-solid: #ffffff;
    --glass: rgba(255, 255, 255, .72);
    --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, .55);
    --border: rgba(48, 52, 56, .12);
    --border-strong: rgba(48, 52, 56, .2);
    --hairline: rgba(48, 52, 56, .10);
    --text: #303438;
    --ink-soft: #545b63;
    --muted: #5f666d;
    --heading: #23272b;

    /* accent: petrol blue (default) */
    --primary: #456575;
    --primary-2: #527182;
    --primary-rgb: 69, 101, 117;
    --accent-text: #3a5563;
    --link: #3d6070;
    --link-hover: #2c4855;
    --btn-grad: linear-gradient(180deg, #547482, #405e6c);
    --btn-grad-hover: linear-gradient(180deg, #5b7d8b, #466573);
    --btn-border: rgba(24, 40, 48, .4);
    --accent-fill: rgba(var(--primary-rgb), .14);
    --accent-fill-hover: rgba(var(--primary-rgb), .24);
    --accent-line: rgba(var(--primary-rgb), .4);
    --ring: 0 0 0 3px rgba(var(--primary-rgb), .16);
    --focus: rgba(var(--primary-rgb), .55);

    /* status */
    --danger: #b04337;
    --success: #3e7d52;
    --warning: #a97a2b;
    --info: #35607d;
    --success-text: #2f6b45;
    --danger-text: #a03a2f;
    --warning-text: #7d5516;
    --info-text: #35607d;
    --success-fill: rgba(62, 125, 82, .10);
    --danger-fill: rgba(176, 67, 55, .08);
    --warning-fill: rgba(169, 122, 43, .10);
    --info-fill: rgba(53, 96, 125, .09);

    /* neutral fills */
    --fill-soft: rgba(48, 52, 56, .04);
    --fill-hover: rgba(48, 52, 56, .08);
    --fill-strong: rgba(48, 52, 56, .14);
    --fill-sunken: rgba(48, 52, 56, .06);

    /* depth and shape */
    --shadow-1: 0 1px 2px rgba(35, 41, 46, .05), 0 4px 10px rgba(35, 41, 46, .06), 0 14px 30px rgba(35, 41, 46, .07);
    --shadow-2: 0 2px 3px rgba(35, 41, 46, .06), 0 12px 22px rgba(35, 41, 46, .10), 0 24px 48px rgba(35, 41, 46, .10);
    --shadow-header: 0 6px 18px rgba(35, 41, 46, .06);
    --radius-s: 6px;
    --radius-m: 8px;
    --radius-l: 12px;
    --field-bg: linear-gradient(180deg, #ffffff, #f6f7f5);
    --field-inset: inset 0 1px 2px rgba(35, 41, 46, .06);
    --secondary-bg: linear-gradient(180deg, #ffffff, #f2f3f1);
    --secondary-bg-hover: linear-gradient(180deg, #ffffff, #ebede9);

    /* fabric backdrop (light only) */
    --backdrop:
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='240'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='240'%20height='240'%20filter='url(%23n)'%20opacity='0.05'/%3E%3C/svg%3E"),
        linear-gradient(112deg, transparent 34%, rgba(48, 52, 56, .04) 45%, transparent 56%),
        linear-gradient(112deg, transparent 62%, rgba(48, 52, 56, .03) 72%, transparent 82%),
        radial-gradient(1100px 460px at 88% -120px, rgba(48, 52, 56, .09), transparent 65%),
        radial-gradient(900px 480px at -8% 108%, rgba(48, 52, 56, .06), transparent 60%),
        linear-gradient(rgba(245, 245, 243, .70), rgba(245, 245, 243, .30)),
        url("../images/fabric.jpg");
    --backdrop-size: 240px 240px, auto, auto, auto, auto, auto, auto;
    --backdrop-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;

    --shell: 1200px;
    --prose: 46rem;
    --header-h: 72px;
}

/* accent: sage green */
:root[data-accent="sage"] {
    --primary: #4a6b54;
    --primary-2: #6f8573;
    --primary-rgb: 74, 107, 84;
    --accent-text: #3d5a46;
    --link: #44654d;
    --link-hover: #324c39;
    --btn-grad: linear-gradient(180deg, #557a5f, #44634c);
    --btn-grad-hover: linear-gradient(180deg, #5c8266, #486850);
    --btn-border: rgba(26, 44, 31, .4);
}

/* dark "neon glass" mode — same structure, other tokens */
:root[data-mode="dark"] {
    color-scheme: dark;

    --bg: #07111f;
    --panel: rgba(255, 255, 255, .075);
    --panel-strong: rgba(255, 255, 255, .12);
    --surface: linear-gradient(180deg, rgba(20, 32, 52, .92), rgba(15, 26, 44, .92));
    --surface-card: linear-gradient(180deg, rgba(22, 35, 57, .88), rgba(15, 26, 44, .88));
    --surface-solid: #0f1a2c;
    --glass: rgba(9, 18, 33, .72);
    --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, .06);
    --border: rgba(255, 255, 255, .13);
    --border-strong: rgba(255, 255, 255, .2);
    --hairline: rgba(255, 255, 255, .09);
    --text: #e8edf4;
    --ink-soft: #c3cdda;
    --muted: #a8b4c5;
    --heading: #f8fafc;

    --primary: #7c3aed;
    --primary-2: #2563eb;
    --primary-rgb: 124, 58, 237;
    --accent-text: #c4b5fd;
    --link: #a5b4fc;
    --link-hover: #c7d2fe;
    --btn-grad: linear-gradient(135deg, #7c3aed, #2563eb);
    --btn-grad-hover: linear-gradient(135deg, #8b5cf6, #3b82f6);
    --btn-border: rgba(255, 255, 255, .14);

    --danger: #ef4444;
    --success: #22c55e;
    --warning: #f59e0b;
    --info: #60a5fa;
    --success-text: #86efac;
    --danger-text: #fca5a5;
    --warning-text: #fcd34d;
    --info-text: #93c5fd;
    --success-fill: rgba(34, 197, 94, .12);
    --danger-fill: rgba(239, 68, 68, .12);
    --warning-fill: rgba(245, 158, 11, .12);
    --info-fill: rgba(96, 165, 250, .12);

    --fill-soft: rgba(255, 255, 255, .05);
    --fill-hover: rgba(255, 255, 255, .09);
    --fill-strong: rgba(255, 255, 255, .14);
    --fill-sunken: rgba(0, 0, 0, .22);

    --shadow-1: 0 18px 45px rgba(0, 0, 0, .22);
    --shadow-2: 0 22px 55px rgba(0, 0, 0, .34);
    --shadow-header: 0 10px 30px rgba(0, 0, 0, .25);
    --field-bg: rgba(255, 255, 255, .06);
    --field-inset: inset 0 1px 2px rgba(0, 0, 0, .25);
    --secondary-bg: rgba(255, 255, 255, .08);
    --secondary-bg-hover: rgba(255, 255, 255, .14);

    --backdrop:
        radial-gradient(circle at 15% 15%, rgba(37, 99, 235, .25), transparent 36%),
        radial-gradient(circle at 85% 80%, rgba(124, 58, 237, .22), transparent 38%);
    --backdrop-size: auto, auto;
    --backdrop-repeat: no-repeat, no-repeat;
}

/* auto mode: no data-mode attribute → follow the OS */
@media (prefers-color-scheme: dark) {
    :root:not([data-mode]) {
        color-scheme: dark;

        --bg: #07111f;
        --panel: rgba(255, 255, 255, .075);
        --panel-strong: rgba(255, 255, 255, .12);
        --surface: linear-gradient(180deg, rgba(20, 32, 52, .92), rgba(15, 26, 44, .92));
        --surface-card: linear-gradient(180deg, rgba(22, 35, 57, .88), rgba(15, 26, 44, .88));
        --surface-solid: #0f1a2c;
        --glass: rgba(9, 18, 33, .72);
        --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, .06);
        --border: rgba(255, 255, 255, .13);
        --border-strong: rgba(255, 255, 255, .2);
        --hairline: rgba(255, 255, 255, .09);
        --text: #e8edf4;
        --ink-soft: #c3cdda;
        --muted: #a8b4c5;
        --heading: #f8fafc;

        --primary: #7c3aed;
        --primary-2: #2563eb;
        --primary-rgb: 124, 58, 237;
        --accent-text: #c4b5fd;
        --link: #a5b4fc;
        --link-hover: #c7d2fe;
        --btn-grad: linear-gradient(135deg, #7c3aed, #2563eb);
        --btn-grad-hover: linear-gradient(135deg, #8b5cf6, #3b82f6);
        --btn-border: rgba(255, 255, 255, .14);

        --danger: #ef4444;
        --success: #22c55e;
        --warning: #f59e0b;
        --info: #60a5fa;
        --success-text: #86efac;
        --danger-text: #fca5a5;
        --warning-text: #fcd34d;
        --info-text: #93c5fd;
        --success-fill: rgba(34, 197, 94, .12);
        --danger-fill: rgba(239, 68, 68, .12);
        --warning-fill: rgba(245, 158, 11, .12);
        --info-fill: rgba(96, 165, 250, .12);

        --fill-soft: rgba(255, 255, 255, .05);
        --fill-hover: rgba(255, 255, 255, .09);
        --fill-strong: rgba(255, 255, 255, .14);
        --fill-sunken: rgba(0, 0, 0, .22);

        --shadow-1: 0 18px 45px rgba(0, 0, 0, .22);
        --shadow-2: 0 22px 55px rgba(0, 0, 0, .34);
        --shadow-header: 0 10px 30px rgba(0, 0, 0, .25);
        --field-bg: rgba(255, 255, 255, .06);
        --field-inset: inset 0 1px 2px rgba(0, 0, 0, .25);
        --secondary-bg: rgba(255, 255, 255, .08);
        --secondary-bg-hover: rgba(255, 255, 255, .14);

        --backdrop:
            radial-gradient(circle at 15% 15%, rgba(37, 99, 235, .25), transparent 36%),
            radial-gradient(circle at 85% 80%, rgba(124, 58, 237, .22), transparent 38%);
        --backdrop-size: auto, auto;
        --backdrop-repeat: no-repeat, no-repeat;
    }
}

/* Latin pages: formal serif for reading text and headings (template option). */
:root[data-latin="serif"]:not([dir="rtl"]) {
    --font-heading: var(--font-serif);
    --line-height-prose: 1.75;
}
:root[dir="ltr"] { --line-height-prose: 1.75; }

/* Arabic: slightly larger, airier glyphs. */
:root[data-lang="ar"] { --line-height-prose: 2.1; }

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

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (max-width: 640px) { html { font-size: 17px; } }
@media (max-width: 360px) { html { font-size: 16px; } }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--text);
    background-color: var(--bg);
    background-image: var(--backdrop);
    background-size: var(--backdrop-size);
    background-repeat: var(--backdrop-repeat);
    background-attachment: fixed;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: var(--line-height-base);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(var(--primary-rgb), .88); color: #fff; }

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 .6em;
    font-family: var(--font-heading);
    color: var(--heading);
    line-height: 1.45;
    font-weight: 800;
}
:root[data-latin="serif"]:not([dir="rtl"]) :is(h1, h2, h3, h4, h5, h6) { font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); }
h2 { font-size: clamp(1.4rem, 2.6vw, 1.85rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; }
h5, h6 { font-size: 1rem; }

p { margin: 0 0 1em; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .22em; transition: color .15s ease; }
a:hover { color: var(--link-hover); }

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

hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }

small, .small { font-size: .875em; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

[hidden], .hidden { display: none !important; }

.shell { width: min(var(--shell), calc(100% - 32px)); margin-inline: auto; }

.skip-link {
    position: absolute;
    inset-inline-start: 16px;
    top: -60px;
    z-index: 100;
    padding: 10px 16px;
    border-radius: var(--radius-s);
    background: var(--btn-grad);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    transition: top .15s ease;
}
.skip-link:focus { top: 12px; color: #fff; }

/* Numerals and Latin runs inside RTL text keep their own direction. */
code, kbd, samp, pre { font-family: var(--font-mono); font-size: .9em; direction: ltr; unicode-bidi: isolate; }

/* ------------------------------------------------- reading progress */
.reading-progress {
    position: fixed;
    inset-inline: 0;
    top: 0;
    height: 3px;
    z-index: 60;
    pointer-events: none;
}
.reading-progress > span {
    display: block;
    height: 100%;
    width: 100%;
    background: var(--btn-grad);
    transform: scaleX(var(--progress, 0));
    transform-origin: left center;
}
[dir="rtl"] .reading-progress > span { transform-origin: right center; }

/* ----------------------------------------------------- glass header */
.site-header {
    z-index: 40;
    border-bottom: 1px solid var(--border);
    background: var(--glass);
    -webkit-backdrop-filter: blur(14px) saturate(1.05);
    backdrop-filter: blur(14px) saturate(1.05);
    box-shadow: var(--shadow-header), var(--glass-highlight);
}
.site-header.is-sticky { position: sticky; top: 0; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .site-header { background: var(--panel-strong); }
    :root[data-mode="dark"] .site-header { background: #0b1626; }
}

.site-topbar {
    border-bottom: 1px solid var(--hairline);
    font-size: .85rem;
    color: var(--muted);
}
.site-topbar .shell { min-height: 34px; display: flex; align-items: center; gap: 16px; justify-content: space-between; }
.site-topbar p { margin: 0; }

.header-inner {
    min-height: var(--header-h);
    display: flex;
    align-items: center;
    gap: 20px;
}

/* brand */
.brand { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.brand-link {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--heading);
    text-decoration: none;
    font-weight: 800;
    font-size: 1.15rem;
    line-height: 1.2;
}
.brand-link:hover { color: var(--heading); }
.brand-logo { display: block; max-height: 46px; width: auto; }
.brand-mark {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-m);
    background: var(--btn-grad);
    border: 1px solid var(--btn-border);
    color: #fff;
    font-size: 1.15rem;
    font-weight: 800;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 2px 6px rgba(35, 41, 46, .18);
}
.brand-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-tagline { margin: 3px 0 0; font-size: .8rem; color: var(--muted); line-height: 1.4; }

/* navigation (mod_menu default layout) */
.site-nav { margin-inline-start: auto; }
.site-nav .mod-menu {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-nav .mod-menu > li { position: relative; display: flex; align-items: center; }
.site-nav .mod-menu > li > a,
.site-nav .mod-menu > li > span,
.site-nav .mod-menu > li > button.mod-menu__toggle-sub:first-child {
    display: inline-flex;
    align-items: center;
    padding: 9px 13px;
    border-radius: var(--radius-s);
    color: var(--ink-soft);
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.site-nav .mod-menu > li > a:hover,
.site-nav .mod-menu > li > span:hover { color: var(--text); background: var(--fill-hover); }
.site-nav .mod-menu > li.active > a,
.site-nav .mod-menu > li.current > a {
    color: var(--heading);
    background: var(--accent-fill);
    box-shadow: inset 0 -2px 0 var(--primary);
}
.site-nav .mod-menu__toggle-sub {
    padding: 6px;
    margin-inline-start: -8px;
    border-radius: var(--radius-s);
    color: var(--muted);
    cursor: pointer;
}
.site-nav .mod-menu__toggle-sub:hover { color: var(--text); background: var(--fill-hover); }
.site-nav .mod-menu [class*="icon-"] { margin-inline-start: 0; font-size: .7rem; }
.site-nav .mod-menu__toggle-sub:first-child [class*="icon-"] { margin-inline-start: .4rem; }

.site-nav .mod-menu__sub {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-start: 0;
    z-index: 50;
    min-width: 220px;
    margin: 0;
    padding: 6px;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    background: var(--surface-solid);
    box-shadow: var(--shadow-2);
}
.site-nav .mod-menu__sub .mod-menu__sub { position: static; box-shadow: none; border: 0; padding: 0 12px 0 0; padding-inline: 12px 0; }
.site-nav .mod-menu__sub li { display: block; }
.site-nav .mod-menu__sub a,
.site-nav .mod-menu__sub span:not([class*="icon-"]) {
    display: block;
    padding: 8px 12px;
    border-radius: var(--radius-s);
    color: var(--ink-soft);
    text-decoration: none;
    font-size: .92rem;
}
.site-nav .mod-menu__sub a:hover { color: var(--text); background: var(--fill-hover); }
.site-nav .mod-menu__sub li.current > a { color: var(--heading); background: var(--accent-fill); }

/* header tools */
.header-tools { display: flex; align-items: center; gap: 8px; }
.site-nav + .header-tools { margin-inline-start: 6px; }
.brand + .header-tools { margin-inline-start: auto; }

.icon-button {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-s);
    background: var(--secondary-bg);
    color: var(--ink-soft);
    cursor: pointer;
    box-shadow: var(--glass-highlight), 0 1px 2px rgba(35, 41, 46, .08);
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.icon-button:hover { color: var(--text); border-color: var(--accent-line); background: var(--secondary-bg-hover); }
.icon-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mode-toggle .i-moon { display: none; }
:root[data-mode="dark"] .mode-toggle .i-sun { display: none; }
:root[data-mode="dark"] .mode-toggle .i-moon { display: block; }
@media (prefers-color-scheme: dark) {
    :root:not([data-mode]) .mode-toggle .i-sun { display: none; }
    :root:not([data-mode]) .mode-toggle .i-moon { display: block; }
}

.nav-toggle { display: none; }
.nav-toggle .bars { display: grid; gap: 4px; width: 18px; }
.nav-toggle .bars span { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform .18s ease, opacity .18s ease; }
.nav-toggle[aria-expanded="true"] .bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* search module in the header */
.header-search form { margin: 0; }
.header-search .mod-finder,
.header-search .awesomplete { margin: 0; }
.header-search label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.header-search input[type="search"],
.header-search input[type="text"] {
    width: 200px;
    min-height: 40px;
    padding: 8px 12px;
}
.header-search .input-group { flex-wrap: nowrap; }

/* language switcher (mod_languages) */
.mod-languages ul { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.mod-languages .lang-block { flex-direction: column; }
.mod-languages li { margin: 0; }
.mod-languages a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 5px 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-s);
    color: var(--ink-soft);
    font-size: .85rem;
    font-weight: 700;
    text-decoration: none;
}
.mod-languages a:hover { color: var(--text); background: var(--fill-hover); }
.mod-languages .lang-active a { color: var(--heading); border-color: var(--border-strong); background: var(--secondary-bg); }
.mod-languages img { display: block; border-radius: 2px; }
.mod-languages .badge, .mod-languages .label { background: none; color: inherit; padding: 0; font-size: inherit; }
.header-language .mod-languages__select .btn { min-height: 40px; padding: 6px 12px; }

/* --------------------------------------------------------- banner */
.site-banner { padding: 46px 0 8px; }
.site-banner .shell > * + * { margin-top: 16px; }
.site-banner .mod-custom,
.site-banner .banner-overlay {
    position: relative;
    padding: clamp(28px, 5vw, 56px);
    border: 1px solid var(--border);
    border-radius: var(--radius-l);
    background:
        linear-gradient(135deg, rgba(var(--primary-rgb), .10), rgba(var(--primary-rgb), .03) 60%),
        var(--surface);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}
.site-banner .mod-custom::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 4px;
    background: var(--btn-grad);
}
.site-banner h1, .site-banner h2 { font-size: clamp(1.8rem, 4vw, 2.9rem); margin-bottom: 12px; }
.site-banner p { color: var(--muted); font-size: 1.08rem; max-width: 52rem; }
.site-banner p:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------- layout */
.site-body { flex: 1 0 auto; padding: 36px 0 64px; }

.layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}
.has-sidebar-left .layout { grid-template-columns: 290px minmax(0, 1fr); }
.has-sidebar-right .layout { grid-template-columns: minmax(0, 1fr) 300px; }
.has-sidebar-left.has-sidebar-right .layout { grid-template-columns: 250px minmax(0, 1fr) 270px; }

.main-column { min-width: 0; }
.main-column:focus { outline: none; }
.main-column > * + * { margin-top: 22px; }
.main-column > .mod-breadcrumbs__wrapper + * { margin-top: 16px; }

.sidebar { display: grid; gap: 20px; min-width: 0; }
@media (min-width: 992px) {
    .sidebar { position: sticky; top: calc(var(--header-h) + 20px); }
    .site-header:not(.is-sticky) ~ .site-body .sidebar { top: 20px; }
}

.module-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: 28px;
}
.row-bottom-a, .row-bottom-b { margin-top: 32px; margin-bottom: 0; }

/* ------------------------------------------- panels (module chrome) */
.panel, .card {
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    background: var(--surface);
    box-shadow: var(--shadow-1);
}
.panel { padding: 22px 24px; }
.panel-title, .card-header {
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--hairline);
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--heading);
    display: flex;
    align-items: center;
    gap: 10px;
}
.panel-title::before {
    content: "";
    flex: none;
    width: 4px;
    height: 1.05em;
    border-radius: 2px;
    background: var(--btn-grad);
}
.card { overflow: hidden; }
.card-header { margin: 0; padding: 14px 20px; }
.card-body { padding: 20px; }
.panel-body > :last-child, .card-body > :last-child { margin-bottom: 0; }

/* list modules inside panels (latest, popular, categories, archive, vertical menu) */
.panel ul.mod-list,
.panel ul.mod-menu,
.panel ul.mod-articlescategory,
.panel ul.mod-articleslatest,
.panel ul.mod-articlespopular,
.panel ul.mod-articlescategories,
.panel ul.archive-module,
.panel .categories-module {
    margin: 0;
    padding: 0;
    list-style: none;
}
.panel ul.mod-list > li,
.panel ul.mod-menu > li,
.panel .categories-module > li {
    border-bottom: 1px solid var(--hairline);
}
.panel ul.mod-list > li:last-child,
.panel ul.mod-menu > li:last-child,
.panel .categories-module > li:last-child { border-bottom: 0; }
.panel ul.mod-list > li > a,
.panel ul.mod-menu > li > a,
.panel .categories-module > li > a,
.panel .categories-module h4 a {
    display: block;
    padding: 9px 2px;
    color: var(--ink-soft);
    text-decoration: none;
    transition: color .15s ease, padding .15s ease;
}
.panel ul.mod-list > li > a:hover,
.panel ul.mod-menu > li > a:hover { color: var(--link); padding-inline-start: 8px; }
.panel ul.mod-menu > li.current > a { color: var(--heading); font-weight: 700; }
.panel ul.mod-menu .mod-menu__sub { padding-inline-start: 14px; list-style: none; }
.panel .mod-menu__toggle-sub { display: none; }
.panel .mod-menu__sub[aria-hidden] { display: block; }

/* ---------------------------------------------------------- footer */
.site-footer {
    flex-shrink: 0;
    margin-top: auto;
    border-top: 1px solid var(--border);
    background: var(--glass);
    -webkit-backdrop-filter: blur(12px) saturate(1.05);
    backdrop-filter: blur(12px) saturate(1.05);
    color: var(--muted);
    font-size: .92rem;
}
.footer-modules {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 28px;
    padding: 36px 0 28px;
}
.footer-title { margin: 0 0 12px; font-size: .95rem; font-weight: 800; color: var(--heading); }
.footer-col ul { margin: 0; padding: 0; list-style: none; }
.footer-col li { padding: 3px 0; }
.footer-col a { color: var(--ink-soft); text-decoration: none; }
.footer-col a:hover { color: var(--link); text-decoration: underline; }
.footer-col .mod-menu__toggle-sub { display: none; }
.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 0;
}
.footer-modules + .footer-bottom { border-top: 1px solid var(--hairline); }
.footer-copy { margin: 0; }
.back-top {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-soft);
    text-decoration: none;
    font-weight: 700;
    font-size: .88rem;
}
.back-top:hover { color: var(--link); }

/* ========================================================== content */

/* page header */
.page-header { margin-bottom: 22px; }
.page-header h1, .page-header h2 { margin: 0; }
.com-content-category-blog > .page-header h1,
.blog-featured > .page-header h1,
.com-content-category > .page-header h1,
.com-content-categories > .page-header h1 {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.category-desc {
    margin-bottom: 26px;
    color: var(--muted);
    font-size: 1.05rem;
}
.category-desc::after { content: ""; display: table; clear: both; }
.category-desc img { border-radius: var(--radius-m); }

/* blog lists → matte cards */
.blog-items { display: grid; gap: 20px; margin-bottom: 26px; }
.blog-items.columns-2, .blog-items.masonry-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.blog-items.columns-3, .blog-items.masonry-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.blog-items.columns-4, .blog-items.masonry-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.blog-item {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    background: var(--surface-card);
    box-shadow: var(--shadow-1);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.blog-item:hover { transform: translateY(-2px); border-color: var(--accent-line); box-shadow: var(--shadow-2); }
.blog-item .item-content { display: flex; flex-direction: column; flex: 1; padding: 22px 24px; }
.blog-item .item-content > :last-child { margin-bottom: 0; }
.blog-item .page-header { margin-bottom: 8px; }
.blog-item .page-header h2,
.blog-item .item-title { font-size: 1.3rem; line-height: 1.5; margin: 0; }
.blog-item .page-header h2 a,
.blog-item .item-title a { color: var(--heading); text-decoration: none; }
.blog-item .page-header h2 a:hover,
.blog-item .item-title a:hover { color: var(--link); }
.blog-item p { color: var(--ink-soft); }
.items-leading .blog-item .page-header h2,
.items-leading .blog-item .item-title { font-size: clamp(1.4rem, 2.6vw, 1.8rem); }

/* intro and full images */
.item-image { margin: 0; }
.item-image img { display: block; width: 100%; border-radius: 0; }
.blog-item > .item-image img, .blog-item .item-image:first-child img { aspect-ratio: 16 / 9; object-fit: cover; }
.item-image.float-start, .item-image.float-end { max-width: 42%; }
.blog-item .item-image.float-start { float: none; max-width: none; }
.blog-item .item-image.float-end { float: none; max-width: none; }
figure.item-image figcaption, .item-image .caption { padding: 8px 4px 0; font-size: .85rem; color: var(--muted); }

/* article meta (dl.article-info) */
.article-info {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0 0 14px;
    font-size: .84rem;
    color: var(--muted);
}
[data-latin] .article-info { font-family: var(--font-sans); }
.article-info dt { flex-basis: 100%; height: 0; overflow: hidden; }
.article-info dd { margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.article-info dd [class*="icon-"] { opacity: .7; }
.article-info a { color: var(--accent-text); text-decoration: none; font-weight: 700; }
.article-info a:hover { text-decoration: underline; }
.article-info .category-name a, .article-info .parent-category-name a {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 4px;
    background: var(--accent-fill);
}

/* read more */
.readmore { margin-top: auto; padding-top: 12px; }
.readmore .btn {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: var(--link);
    font-weight: 700;
    min-height: 0;
}
.readmore .btn:hover { color: var(--link-hover); background: none; text-decoration: underline; }
.readmore .btn [class*="icon-"] { font-size: .75em; transition: transform .15s ease; }
.readmore .btn:hover .icon-chevron-right { transform: translateX(3px); }
.readmore .btn:hover .icon-chevron-left { transform: translateX(-3px); }

/* "more articles" list under a blog */
.items-more {
    padding: 20px 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    background: var(--panel);
}
.items-more ol, .items-more ul { margin: 0; padding-inline-start: 1.2em; }
.items-more li { padding: 4px 0; }

.cat-children { margin-top: 28px; }
.cat-children > h3 { font-size: 1.1rem; }

/* single article */
.com-content-article {
    padding: clamp(22px, 4vw, 44px);
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    background: var(--surface);
    box-shadow: var(--shadow-1);
}
.com-content-article > .page-header {
    margin-bottom: 14px;
}
.com-content-article > .page-header h1,
.com-content-article > .page-header h2 {
    font-size: clamp(1.75rem, 3.6vw, 2.6rem);
    line-height: 1.4;
}
.com-content-article .article-info {
    padding-bottom: 16px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--hairline);
}
.com-content-article .item-image { margin: 0 0 26px; }
.com-content-article .item-image img { border-radius: var(--radius-m); }
.com-content-article .item-image.float-start { float: inline-start; margin-inline-end: 24px; }
.com-content-article .item-image.float-end { float: inline-end; margin-inline-start: 24px; }

/* the prose itself */
.com-content-article__body,
.com-content-category-blog .item-content > p,
.prose {
    line-height: var(--line-height-prose);
    font-size: 1.05rem;
}
:root[data-latin="serif"]:not([dir="rtl"]) .com-content-article__body,
:root[data-latin="serif"]:not([dir="rtl"]) .blog-item .item-content { font-family: var(--font-serif); }
:root[data-latin="serif"]:not([dir="rtl"]) .com-content-article__body { font-size: 1.12rem; }

.com-content-article__body { max-width: var(--prose); }
.has-sidebar-left.has-sidebar-right .com-content-article__body,
.has-sidebar-right .com-content-article__body { max-width: none; }

.com-content-article__body > :first-child { margin-top: 0; }
.com-content-article__body h2,
.com-content-article__body h3,
.com-content-article__body h4 { margin-top: 1.8em; }
.com-content-article__body h2 { font-size: 1.55rem; }
.com-content-article__body h3 { font-size: 1.28rem; }
.com-content-article__body p { margin-bottom: 1.15em; }
.com-content-article__body ul,
.com-content-article__body ol { padding-inline-start: 1.4em; margin: 0 0 1.2em; }
.com-content-article__body li { margin-bottom: .35em; }
.com-content-article__body li::marker { color: var(--primary); }
.com-content-article__body img { border-radius: var(--radius-s); }
.com-content-article__body figure { margin: 1.8em 0; }
.com-content-article__body figcaption { margin-top: 8px; font-size: .88rem; color: var(--muted); text-align: center; }
.com-content-article__body a { color: var(--link); text-decoration: underline; text-decoration-color: rgba(var(--primary-rgb), .35); }
.com-content-article__body a:hover { text-decoration-color: currentColor; }

blockquote {
    margin: 1.6em 0;
    padding: 16px 22px;
    border-inline-start: 4px solid var(--primary);
    border-radius: 0 var(--radius-s) var(--radius-s) 0;
    background: var(--fill-soft);
    color: var(--ink-soft);
    font-size: 1.05em;
}
[dir="rtl"] blockquote { border-radius: var(--radius-s) 0 0 var(--radius-s); }
blockquote > :last-child { margin-bottom: 0; }
blockquote cite, blockquote footer { display: block; margin-top: 8px; font-size: .88em; color: var(--muted); font-style: normal; }

pre {
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    background: var(--fill-sunken);
    overflow-x: auto;
    line-height: 1.6;
    text-align: left;
}
:not(pre) > code {
    padding: .12em .4em;
    border-radius: 4px;
    background: var(--fill-strong);
    color: var(--heading);
}

mark { padding: 0 .2em; border-radius: 3px; background: rgba(var(--primary-rgb), .18); color: inherit; }
abbr[title] { text-decoration: underline dotted; cursor: help; }

/* tables */
table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: .95rem; }
th, td { padding: 11px 12px; text-align: start; border-bottom: 1px solid var(--border); vertical-align: top; }
thead th { color: var(--ink-soft); font-size: .86rem; font-weight: 800; background: var(--fill-soft); border-bottom-color: var(--border-strong); }
tbody tr:hover > * { background: var(--fill-soft); }
.com-content-article__body table { display: block; overflow-x: auto; }
caption { caption-side: bottom; padding-top: 8px; color: var(--muted); font-size: .85rem; text-align: start; }

/* tags */
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.tags .list-inline-item { margin: 0; }
.tags .btn, .tags a {
    display: inline-flex;
    padding: 4px 11px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-s);
    background: var(--secondary-bg);
    color: var(--ink-soft);
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: none;
    min-height: 0;
}
.tags .btn:hover, .tags a:hover { color: #fff; background: var(--btn-grad); border-color: var(--btn-border); }

/* article prev / next */
.pagenavigation { margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--hairline); }
.pagenavigation .pagination { display: flex; justify-content: space-between; gap: 12px; }
.pagenavigation .btn { max-width: 48%; }
.pagenavigation .btn.next { margin-inline-start: auto; }

/* content icons (print / email / edit) */
.icons { float: inline-end; }
.icons .btn-group { position: relative; }
.icons .dropdown-toggle { padding: 4px 8px; min-height: 0; }

/* category list (table view) */
.com-content-category__table, .category.table { background: var(--surface); border-radius: var(--radius-m); overflow: hidden; box-shadow: var(--shadow-1); }
.com-content-category__table td, .com-content-category__table th { padding: 12px 16px; }
.com-content-categories__items .com-content-categories__item,
.com-content-categories .com-content-categories__item {
    padding: 16px 20px;
    margin-bottom: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    background: var(--surface-card);
}

/* archive and featured */
.blog-featured .blog-item { min-height: 100%; }
.com-content-archive .page-header + form { margin-bottom: 20px; }
.com-content-archive__items { list-style: none; padding: 0; display: grid; gap: 16px; }
.com-content-archive__items > li { padding: 18px 22px; border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--surface-card); }

/* ------------------------------------------------------- pagination */
.com-content-category-blog__navigation, .com-content-category-blog__pagination, .w-100 { width: 100%; }
.pagination__wrapper { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin: 28px 0 0; }
.counter { color: var(--muted); font-size: .88rem; }
.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    justify-content: center;
}
.page-item { margin: 0; }
.page-link {
    display: inline-grid;
    place-items: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-s);
    background: var(--secondary-bg);
    color: var(--ink-soft);
    font-weight: 700;
    text-decoration: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
a.page-link:hover { color: var(--text); border-color: var(--accent-line); background: var(--secondary-bg-hover); }
.page-item.active .page-link { color: #fff; background: var(--btn-grad); border-color: var(--btn-border); }
.page-item.disabled .page-link { opacity: .45; }

/* ------------------------------------------------------ breadcrumbs */
.mod-breadcrumbs__wrapper { margin: 0; }
.breadcrumb, .mod-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 0;
    margin: 0;
    padding: 0 !important;
    list-style: none;
    font-size: .86rem;
    color: var(--muted);
    background: none;
}
.mod-breadcrumbs__divider { margin-inline-end: 8px; color: var(--muted); opacity: .7; }
.mod-breadcrumbs__here { margin-inline-end: 6px; }
.breadcrumb-item { display: inline-flex; align-items: center; }
.breadcrumb-item + .breadcrumb-item::before {
    content: "/";
    padding-inline: 8px;
    color: var(--border-strong);
}
.breadcrumb-item a { color: var(--ink-soft); text-decoration: none; }
.breadcrumb-item a:hover { color: var(--link); text-decoration: underline; }
.breadcrumb-item.active { color: var(--text); font-weight: 700; }

/* ----------------------------------------------------------- alerts */
#system-message-container:empty { display: none; }
#system-message-container joomla-alert,
.alert {
    position: relative;
    display: block;
    margin: 0 0 18px;
    padding: 13px 16px;
    padding-inline-start: 18px;
    border: 1px solid var(--border);
    border-inline-start: 4px solid var(--info);
    border-radius: var(--radius-s);
    background: var(--panel-strong);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: var(--glass-highlight), 0 1px 3px rgba(35, 41, 46, .05);
    color: var(--text);
    line-height: 1.7;
}
joomla-alert[type="success"], .alert-success { border-inline-start-color: var(--success); background: var(--success-fill); }
joomla-alert[type="danger"], joomla-alert[type="error"], .alert-danger, .alert-error { border-inline-start-color: var(--danger); background: var(--danger-fill); }
joomla-alert[type="warning"], .alert-warning { border-inline-start-color: var(--warning); background: var(--warning-fill); }
joomla-alert[type="info"], .alert-info, joomla-alert[type="notice"] { border-inline-start-color: var(--info); background: var(--info-fill); }
joomla-alert .alert-heading { margin: 0; }
joomla-alert .alert-wrapper { display: block; }
joomla-alert .alert-message, joomla-alert div { margin: 0; }
joomla-alert .joomla-alert--close,
joomla-alert .joomla-alert-button--close {
    position: absolute;
    top: 8px;
    inset-inline-end: 10px;
    padding: 0 6px;
    border: 0;
    background: none;
    color: var(--muted);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}
.alert-link { font-weight: 700; color: inherit; }

/* ------------------------------------------------------------ forms */
label, .form-label { display: inline-block; margin-bottom: 6px; font-weight: 700; color: var(--heading); }
fieldset { margin: 0 0 22px; padding: 0; border: 0; min-width: 0; }
legend {
    width: 100%;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--hairline);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--heading);
}

.control-group, .form-group, .mb-3 { margin-bottom: 18px; }
.control-label { margin-bottom: 4px; }
.controls { min-width: 0; }
.form-text, .control-group .form-text, small.form-text { display: block; margin-top: 6px; font-size: .84rem; color: var(--muted); }

.form-control,
.form-select,
.inputbox,
input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="url"], input[type="tel"], input[type="number"], input[type="date"],
input[type="datetime-local"], select, textarea {
    display: block;
    width: 100%;
    min-height: 46px;
    padding: 11px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-s);
    background: var(--field-bg);
    color: var(--text);
    font: inherit;
    line-height: 1.5;
    box-shadow: var(--field-inset);
    transition: border-color .15s ease, box-shadow .15s ease;
    appearance: none;
}
textarea, textarea.form-control { min-height: 130px; resize: vertical; }
select, .form-select {
    padding-inline-end: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23707780' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E"), var(--field-bg);
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 12px 12px, auto;
}
[dir="rtl"] select, [dir="rtl"] .form-select { background-position: left 13px center; }
select[multiple], select[size]:not([size="1"]) { padding-inline-end: 14px; background-image: none; }

.form-control:hover, .form-select:hover, input:hover, select:hover, textarea:hover { border-color: var(--accent-line); }
.form-control:focus, .form-select:focus,
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--focus);
    box-shadow: var(--ring), var(--field-inset);
}
.form-control::placeholder, input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; }
.form-control:disabled, .form-control[readonly], input:disabled { opacity: .65; cursor: not-allowed; }
.form-control-sm, .input-small { min-height: 36px; padding: 6px 10px; font-size: .9rem; }
.invalid, .form-control.invalid, .is-invalid { border-color: var(--danger) !important; }
.form-control-feedback, .invalid-feedback { margin-top: 4px; font-size: .84rem; color: var(--danger-text); }
.star { color: var(--danger-text); }

/* checkbox / radio */
input[type="checkbox"], input[type="radio"], .form-check-input {
    width: 1.1em;
    height: 1.1em;
    margin: 0;
    vertical-align: middle;
    accent-color: var(--primary);
}
.form-check { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.form-check-label { margin: 0; font-weight: 400; cursor: pointer; }
.form-check-inline { display: inline-flex; margin-inline-end: 16px; }

/* input groups */
.input-group { position: relative; display: flex; align-items: stretch; width: 100%; }
.input-group > .form-control, .input-group > input { flex: 1 1 auto; width: 1%; min-width: 0; }
.input-group > :not(:first-child) { margin-inline-start: -1px; }
.input-group > :not(:last-child) { border-start-end-radius: 0; border-end-end-radius: 0; }
.input-group > :not(:first-child) { border-start-start-radius: 0; border-end-start-radius: 0; }
.input-group-text {
    display: flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-s);
    background: var(--fill-soft);
    color: var(--muted);
}
.input-password-toggle { min-width: 46px; }

/* ---------------------------------------------------------- buttons */
.btn, .button, button.validate, input[type="submit"], input[type="button"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-s);
    background: var(--secondary-bg);
    color: var(--text);
    font: inherit;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--glass-highlight), 0 1px 2px rgba(35, 41, 46, .08);
    transition: background .15s ease, box-shadow .15s ease, border-color .15s ease, transform .1s ease;
    user-select: none;
}
.btn:hover, .button:hover { color: var(--text); background: var(--secondary-bg-hover); border-color: var(--accent-line); }
.btn:active, .button:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(35, 41, 46, .10); }
.btn:disabled, .btn.disabled { opacity: .55; pointer-events: none; }

.btn-primary, .button-primary, button.validate, input[type="submit"], .btn-success {
    border-color: var(--btn-border);
    background: var(--btn-grad);
    color: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .16),
        inset 0 -1px 0 rgba(0, 0, 0, .18),
        0 1px 2px rgba(35, 41, 46, .24),
        0 3px 7px rgba(35, 41, 46, .14);
}
.btn-primary:hover, .button-primary:hover, button.validate:hover, input[type="submit"]:hover, .btn-success:hover {
    color: #fff;
    background: var(--btn-grad-hover);
    border-color: var(--btn-border);
}
.btn-primary:active, button.validate:active { box-shadow: inset 0 2px 5px rgba(0, 0, 0, .24), 0 1px 2px rgba(35, 41, 46, .18); }
.btn-danger { color: #fff; border-color: rgba(74, 26, 20, .4); background: linear-gradient(180deg, #bd5446, #a63f33); }
.btn-danger:hover { color: #fff; background: linear-gradient(180deg, #c55e50, #ad4639); border-color: rgba(74, 26, 20, .4); }
.btn-link { border-color: transparent; background: none; box-shadow: none; color: var(--link); }
.btn-link:hover { background: var(--fill-hover); border-color: transparent; color: var(--link-hover); }
.btn-sm { min-height: 34px; padding: 5px 11px; font-size: .86rem; }
.btn-lg { min-height: 52px; padding: 13px 24px; font-size: 1.05rem; }
.btn-group { display: inline-flex; position: relative; }

/* ---------------------------------------------- dropdown (bootstrap) */
.dropdown-menu {
    position: absolute;
    z-index: 60;
    display: none;
    min-width: 11rem;
    margin: 6px 0 0;
    padding: 6px;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    background: var(--surface-solid);
    box-shadow: var(--shadow-2);
    text-align: start;
}
.dropdown-menu.show { display: block; }
.dropdown-menu li { margin: 0; }
.dropdown-menu a, .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius-s);
    color: var(--ink-soft);
    text-decoration: none;
    white-space: nowrap;
}
.dropdown-menu a:hover, .dropdown-item:hover { background: var(--fill-hover); color: var(--text); }
.dropdown-toggle::after {
    content: "";
    display: inline-block;
    margin-inline-start: 4px;
    border-top: .35em solid currentColor;
    border-inline: .3em solid transparent;
    vertical-align: middle;
}

/* ----------------------------------------------- badges, cards, misc */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--accent-fill);
    color: var(--accent-text);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.5;
}
.badge.bg-warning, .bg-warning { background: var(--warning-fill) !important; color: var(--warning-text) !important; }
.badge.bg-danger, .bg-danger { background: var(--danger-fill) !important; color: var(--danger-text) !important; }
.badge.bg-success, .bg-success { background: var(--success-fill) !important; color: var(--success-text) !important; }
.badge.bg-info, .bg-info { background: var(--info-fill) !important; color: var(--info-text) !important; }
.badge.bg-secondary, .bg-secondary { background: var(--fill-strong) !important; color: var(--ink-soft) !important; }
.badge.bg-primary, .bg-primary { background: var(--btn-grad) !important; color: #fff !important; }

.system-unpublished { opacity: .7; outline: 2px dashed var(--warning); outline-offset: -2px; }

.list-unstyled, .list-inline { padding-inline-start: 0; list-style: none; }
.list-inline-item { display: inline-block; }
.list-inline-item:not(:last-child) { margin-inline-end: .5rem; }

.table { width: 100%; }
.table-striped > tbody > tr:nth-of-type(odd) > * { background: var(--fill-soft); }
.table-responsive { overflow-x: auto; }

/* ---------------------------------------------------- user forms */
.com-users-login, .com-users-registration, .com-users-remind, .com-users-reset,
.com-users-profile, .com-users-profile-edit, .com-contact-contact .contact-form,
.com-finder, .com-tags-tag, .com-tags-tags, .com-contact-featured, .com-contact-category {
    padding: clamp(20px, 3.5vw, 36px);
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    background: var(--surface);
    box-shadow: var(--shadow-1);
}
.com-users-login, .com-users-remind, .com-users-reset { max-width: 520px; margin-inline: auto; }
.com-users-login__options, .com-users-login .list-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--hairline);
}
.list-group { padding: 0; margin: 0; list-style: none; }
.list-group-item, .com-users-login__options a { display: block; padding: 4px 0; color: var(--link); text-decoration: none; font-size: .92rem; }
.list-group-item:hover, .com-users-login__options a:hover { text-decoration: underline; }
.mod-login .mod-login__userdata, .mod-login .control-group { margin-bottom: 12px; }
.mod-login .mod-login__options { list-style: none; padding: 0; margin: 12px 0 0; font-size: .88rem; }
.mod-login .mod-login__submit .btn { width: 100%; }

/* smart search results */
.com-finder__form { margin-bottom: 24px; }
.com-finder__results-list { list-style: none; padding: 0; display: grid; gap: 14px; }
.com-finder__results-list > li, .result__item { padding: 16px 20px; border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--surface-card); }
.result__title-text { font-weight: 800; }
.result__title-url { color: var(--success-text); font-size: .85rem; direction: ltr; unicode-bidi: isolate; }
.highlight { background: rgba(var(--primary-rgb), .18); padding: 0 .15em; border-radius: 2px; }

/* awesomplete suggestions (smart search) */
.awesomplete > ul {
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    background: var(--surface-solid);
    box-shadow: var(--shadow-2);
}

/* ---------------------------------------------------- error/offline */
.error-wrap { max-width: 720px; margin: 20px auto 0; }
.error-card { text-align: center; padding: clamp(28px, 6vw, 56px); }
.error-code {
    margin: 0 0 6px;
    font-size: clamp(3.5rem, 12vw, 6rem);
    font-weight: 900;
    line-height: 1;
    background: var(--btn-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.error-message { font-weight: 700; color: var(--danger-text); }
.error-reasons { display: inline-block; margin: 0 auto 22px; text-align: start; color: var(--muted); }
.error-debug { margin-top: 22px; overflow-x: auto; font-size: .82rem; }

.offline-page .offline-wrap { flex: 1; display: grid; place-items: center; padding: 24px 16px; }
.offline-card { width: min(440px, 100%); padding: 32px; }
.offline-brand { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; margin-bottom: 18px; }
.offline-brand h1 { margin: 0; font-size: 1.5rem; }
.offline-brand .brand-mark { width: 54px; height: 54px; font-size: 1.6rem; }
.offline-message { text-align: center; color: var(--muted); }
.offline-image { display: block; margin: 0 auto 18px; border-radius: var(--radius-m); }

.component-page { background: var(--bg); padding: 20px; display: block; }

/* ------------------------------------------- bootstrap compatibility */
.visually-hidden, .visually-hidden-focusable:not(:focus):not(:focus-within), .sr-only, .element-invisible {
    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;
}
.clearfix::after { content: ""; display: table; clear: both; }
.float-start { float: inline-start !important; }
.float-end { float: inline-end !important; }
.float-none { float: none !important; }
@media (min-width: 768px) {
    .float-md-start { float: inline-start !important; }
    .float-md-end { float: inline-end !important; }
}
.text-start { text-align: start !important; }
.text-end { text-align: end !important; }
.text-center { text-align: center !important; }
.text-muted { color: var(--muted) !important; }
.text-light { color: #fff !important; }
.text-danger { color: var(--danger-text) !important; }
.text-success { color: var(--success-text) !important; }
.text-warning { color: var(--warning-text) !important; }
.fw-bold { font-weight: 700 !important; }
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }
.flex-wrap { flex-wrap: wrap !important; }
.align-items-center { align-items: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-center { justify-content: center !important; }
.gap-2 { gap: .5rem !important; }
.gap-3 { gap: 1rem !important; }
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }
.mw-100 { max-width: 100% !important; }
.ms-auto { margin-inline-start: auto !important; }
.me-auto { margin-inline-end: auto !important; }
.ms-0 { margin-inline-start: 0 !important; }
.me-0 { margin-inline-end: 0 !important; }
.me-1 { margin-inline-end: .25rem !important; }
.me-2 { margin-inline-end: .5rem !important; }
.me-3 { margin-inline-end: 1rem !important; }
.ms-1 { margin-inline-start: .25rem !important; }
.ms-2 { margin-inline-start: .5rem !important; }
.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mt-2 { margin-top: .5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: .5rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.p-0 { padding: 0 !important; }
.pt-3 { padding-top: 1rem !important; }
.pe-2 { padding-inline-end: .5rem !important; }
.px-3 { padding-inline: 1rem !important; }
.py-2 { padding-block: .5rem !important; }
.rounded { border-radius: var(--radius-s) !important; }
.img-fluid { max-width: 100%; height: auto; }
.small { font-size: .875em; }

.row { display: flex; flex-wrap: wrap; margin-inline: -10px; }
.row > * { flex-shrink: 0; width: 100%; max-width: 100%; padding-inline: 10px; }
.col { flex: 1 0 0%; }
@media (min-width: 768px) {
    .col-md-3 { flex: 0 0 auto; width: 25%; }
    .col-md-4 { flex: 0 0 auto; width: 33.333%; }
    .col-md-6 { flex: 0 0 auto; width: 50%; }
    .col-md-8 { flex: 0 0 auto; width: 66.666%; }
    .col-md-9 { flex: 0 0 auto; width: 75%; }
    .col-md-12 { flex: 0 0 auto; width: 100%; }
}
@media (min-width: 992px) {
    .col-lg-3 { flex: 0 0 auto; width: 25%; }
    .col-lg-4 { flex: 0 0 auto; width: 33.333%; }
    .col-lg-6 { flex: 0 0 auto; width: 50%; }
    .col-lg-8 { flex: 0 0 auto; width: 66.666%; }
    .col-lg-9 { flex: 0 0 auto; width: 75%; }
}

/* nav tabs (com_users profile, some extensions) */
.nav-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 0; margin: 0 0 18px; list-style: none; border-bottom: 1px solid var(--border); }
.nav-tabs .nav-link {
    display: block;
    padding: 10px 18px;
    margin-bottom: -1px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--muted);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
.nav-tabs .nav-link:hover { color: var(--text); }
.nav-tabs .nav-link.active { color: var(--heading); border-bottom-color: var(--primary); }
joomla-tab { display: block; }
joomla-tab > div[role="tablist"] { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
joomla-tab button[role="tab"] { padding: 10px 18px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font-weight: 700; cursor: pointer; margin-bottom: -1px; }
joomla-tab button[role="tab"][aria-expanded="true"], joomla-tab button[role="tab"][aria-selected="true"] { color: var(--heading); border-bottom-color: var(--primary); }

/* --------------------------------------------------- responsive */
@media (max-width: 1100px) {
    .has-sidebar-left.has-sidebar-right .layout { grid-template-columns: minmax(0, 1fr) 280px; }
    .has-sidebar-left.has-sidebar-right .sidebar-left { grid-column: 1 / -1; grid-row: 2; }
    .blog-items.columns-4, .blog-items.masonry-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .header-search input[type="search"], .header-search input[type="text"] { width: 160px; }
}

@media (max-width: 991.98px) {
    .has-sidebar-left .layout,
    .has-sidebar-right .layout,
    .has-sidebar-left.has-sidebar-right .layout { grid-template-columns: minmax(0, 1fr); }
    .has-sidebar-left.has-sidebar-right .sidebar-left { grid-row: auto; }
    .sidebar-left { order: 2; }
    .sidebar-right { order: 3; }
    .main-column { order: 1; }
    .blog-items.columns-3, .blog-items.masonry-3,
    .blog-items.columns-4, .blog-items.masonry-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* collapsible header navigation */
    .nav-toggle { display: inline-grid; }
    .header-inner { flex-wrap: wrap; padding-block: 10px; min-height: 0; gap: 10px 14px; }
    .brand { flex: 1 1 auto; }
    .header-tools { margin-inline-start: auto; }
    .site-nav {
        order: 10;
        flex-basis: 100%;
        margin: 0;
        display: none;
        padding: 8px 0 6px;
        border-top: 1px solid var(--hairline);
    }
    .site-nav.is-open { display: block; }
    .site-nav .mod-menu { flex-direction: column; align-items: stretch; gap: 2px; }
    .site-nav .mod-menu > li { flex-wrap: wrap; }
    .site-nav .mod-menu > li > a, .site-nav .mod-menu > li > span { flex: 1; padding: 11px 12px; }
    .site-nav .mod-menu > li.active > a, .site-nav .mod-menu > li.current > a { box-shadow: inset 3px 0 0 var(--primary); }
    [dir="rtl"] .site-nav .mod-menu > li.active > a, [dir="rtl"] .site-nav .mod-menu > li.current > a { box-shadow: inset -3px 0 0 var(--primary); }
    .site-nav .mod-menu__toggle-sub { margin: 0; width: 44px; height: 44px; justify-content: center; }
    .site-nav .mod-menu__sub {
        position: static;
        flex-basis: 100%;
        min-width: 0;
        margin: 2px 0 6px;
        padding: 4px;
        padding-inline-start: 14px;
        border: 0;
        border-inline-start: 2px solid var(--hairline);
        border-radius: 0;
        background: none;
        box-shadow: none;
    }
    .header-search { display: none; }
    /* open menu: the search box joins the menu panel, the buttons stay put */
    .site-nav.is-open ~ .header-tools { display: contents; }
    .site-nav.is-open ~ .header-tools .header-search { display: block; order: 11; flex: 1 0 100%; padding-bottom: 4px; }
    .site-nav.is-open ~ .header-tools .header-search input { width: 100%; }
}

@media (max-width: 640px) {
    .shell { width: calc(100% - 32px); }
    .site-body { padding: 22px 0 44px; }
    .site-banner { padding-top: 22px; }
    .panel { padding: 19px; }
    .blog-item .item-content { padding: 18px; }
    .blog-items.columns-2, .blog-items.masonry-2,
    .blog-items.columns-3, .blog-items.masonry-3,
    .blog-items.columns-4, .blog-items.masonry-4 { grid-template-columns: minmax(0, 1fr); }
    .brand-tagline { display: none; }
    .brand-name { max-width: 52vw; }
    .com-content-article .item-image.float-start,
    .com-content-article .item-image.float-end,
    .item-image.float-start, .item-image.float-end { float: none !important; max-width: none; margin-inline: 0; }
    .pagenavigation .pagination { flex-direction: column; }
    .pagenavigation .btn { max-width: none; }
    .footer-bottom { justify-content: center; text-align: center; }
    .mod-languages a { padding: 5px 7px; }
}

/* ---------------------------------------------------------- motion */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
    .blog-item:hover, .btn:active, .button:active { transform: none; }
}

/* ----------------------------------------------------------- print */
@media print {
    :root { --text: #000; --muted: #444; --heading: #000; --link: #000; }
    body { background: #fff !important; display: block; }
    .site-header, .site-footer, .sidebar, .site-banner, .reading-progress, .skip-link,
    .mod-breadcrumbs__wrapper, .pagenavigation, .icons, .readmore, .module-row { display: none !important; }
    .layout { display: block; }
    .com-content-article, .blog-item { border: 0; box-shadow: none; padding: 0; background: none; }
    .com-content-article__body { max-width: none; }
    .com-content-article__body a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}