/* =========================================================================
   Shungite Forum : template.css
   "The science. The stones. The practice."

   Palette derives from the mineral itself: black carbon, gold pyrite veins
   in elite shungite, a cool teal for science/water and warm amber for
   anecdotal/practice content. The C60 fullerene motif is the only
   decoration that earns its place.
   ========================================================================= */

:root {
    /* Mineral surfaces */
    --sf-black:        #050505;
    --sf-coal:         #0a0a0a;
    --sf-stone:        #141414;
    --sf-stone-2:      #1a1a1a;
    --sf-stone-3:      #232323;
    --sf-vein:         #1a1a1a;

    /* Pyrite gold (the inclusions in elite shungite) */
    --sf-gold:         #c9a96e;
    --sf-gold-bright:  #e2c98c;
    --sf-gold-deep:    #8b7340;

    /* Pyrite silver (Type II noble inclusions) */
    --sf-silver:       #d8d8d8;

    /* Semantic accents */
    --sf-science:      #5fa8a3;
    --sf-science-bg:   rgba(95, 168, 163, 0.10);
    --sf-stones-acc:   #c9a96e;
    --sf-stones-bg:    rgba(201, 169, 110, 0.10);
    --sf-practice:     #d49a3a;
    --sf-practice-bg:  rgba(212, 154, 58, 0.10);
    --sf-disputed:     #c9534a;

    /* Type text */
    --sf-text:         #e8e8e8;
    --sf-text-soft:    #b8b8b8;
    --sf-text-mute:    #8a8a8a;
    --sf-text-faint:   #5a5a5a;
    --sf-link:         #e2c98c;
    --sf-link-hover:   #ffd98a;

    /* Geometry */
    --sf-radius:       4px;
    --sf-radius-lg:    8px;
    --sf-shadow:       0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.4);
    --sf-shadow-lg:    0 12px 40px -10px rgba(0,0,0,0.6);

    /* Type */
    --sf-font-display: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --sf-font-body:    "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --sf-font-mono:    "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

    /* Layout */
    --sf-container:    1200px;
    --sf-gutter:       1.125rem;
    --sf-gutter-lg:    2.025rem;
}

/* ----- reset / base ---------------------------------------------------- */

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

/* Fallback font tuned to match Inter's metrics so first-paint with the system
   font has the same line-height / x-height / advance widths. Eliminates layout
   shift when Inter eventually loads (or never does, with display=optional). */
@font-face {
    font-family: "Inter Fallback";
    src: local("Arial"), local("Helvetica Neue"), local("Helvetica"), local("sans-serif");
    size-adjust: 107%;
    ascent-override: 90%;
    descent-override: 22%;
    line-gap-override: 0%;
}

html {
    background: var(--sf-black);
    color-scheme: dark;
    /* Sticky header is ~65px tall. When the user clicks an in-page
       anchor (e.g. forum permalinks like #72), the browser scrolls
       the target into view but the sticky header would otherwise
       cover it. scroll-padding offsets the scroll position with
       extra room for visual breathing space. */
    scroll-padding-top: 110px;
}

body {
    margin: 0;
    font-family: var(--sf-font-body);
    font-size: 15.6px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    color: var(--sf-text);
    background: var(--sf-coal);
    /* Hexagonal C60 lattice in the deep background, barely there */
    background-image:
        radial-gradient(circle at 20% 0%, rgba(201, 169, 110, 0.04) 0%, transparent 40%),
        radial-gradient(circle at 80% 100%, rgba(95, 168, 163, 0.03) 0%, transparent 40%);
    background-attachment: fixed;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: var(--sf-link); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--sf-link-hover); text-decoration: underline; text-underline-offset: 3px; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--sf-font-display);
    font-weight: 600;
    color: var(--sf-text);
    letter-spacing: -0.0225em;
    line-height: 1.2;
    margin: 0 0 0.6em;
}
h1 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
h2 { font-size: 1.575rem; }
h3 { font-size: 1.275rem; }

p { margin: 0 0 1.05em; }
strong { color: var(--sf-text); font-weight: 600; }
small { color: var(--sf-text-mute); }

code, pre, kbd, samp { font-family: var(--sf-font-mono); font-size: 0.9075em; }
pre { background: var(--sf-black); padding: 1.05rem; border-radius: var(--sf-radius); overflow-x: auto; border: 1px solid var(--sf-vein); }
code { background: var(--sf-stone-2); padding: 0.1125em 0.45em; border-radius: 3px; color: var(--sf-gold-bright); }
pre code { background: none; padding: 0; color: inherit; }

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

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

/* Skip link */
.sf-skip {
    position: absolute; left: -9999px; top: 0;
    padding: 0.6rem 1.05rem; background: var(--sf-gold); color: var(--sf-black);
    font-weight: 600; z-index: 10000;
}
.sf-skip:focus { left: 1.05rem; top: 1.05rem; }

.sf-container { max-width: var(--sf-container); margin: 0 auto; padding: 0 var(--sf-gutter); }
@media (min-width: 768px) { .sf-container { padding: 0 var(--sf-gutter-lg); } }

/* ----- header ---------------------------------------------------------- */

.sf-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border-bottom: 1px solid var(--sf-vein);
}
.sf-header__inner {
    display: flex; align-items: center; gap: 1.5rem;
    min-height: 63.9px;
    padding-top: 0.45rem; padding-bottom: 0.45rem;
}

.sf-brand {
    display: inline-flex; align-items: center; gap: 0.675rem;
    color: var(--sf-text); text-decoration: none;
}
.sf-brand:hover { text-decoration: none; }
.sf-brand__mark {
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--sf-gold);
    width: 36px; height: 36px;
    animation: sf-brand-rotate 540s linear infinite;
}
@keyframes sf-brand-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .sf-brand__mark { animation: none; }
}
.sf-brand__mark--sm { width: 27.6px; height: 27.6px; }
.sf-brand__mark--sm svg { width: 27.6px; height: 27.6px; }
.sf-brand__text { display: flex; flex-direction: column; line-height: 1; }
.sf-brand__name { font-family: var(--sf-font-display); font-weight: 700; font-size: 1.08rem; letter-spacing: 0.0075em; }
.sf-brand__sub { font-size: 0.72rem; color: var(--sf-text-mute); letter-spacing: 0.18em; text-transform: uppercase; margin-top: 2px; }

.sf-nav { flex: 1 1 auto; }
.sf-nav ul { display: flex; gap: 0.225rem; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.sf-nav a {
    display: inline-block; padding: 0.45rem 0.9rem;
    color: var(--sf-text-soft); font-size: 0.9375rem; font-weight: 500;
    border-radius: var(--sf-radius);
}
.sf-nav a:hover { color: var(--sf-text); background: var(--sf-stone-2); text-decoration: none; }
.sf-nav .current > a, .sf-nav .active > a { color: var(--sf-gold-bright); background: var(--sf-stone-2); }

.sf-header__tools { display: flex; align-items: center; gap: 0.45rem; }

/* ----- buttons --------------------------------------------------------- */

.sf-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
    padding: 0.5625rem 1.125rem;
    font-family: var(--sf-font-body); font-size: 0.9075rem; font-weight: 500;
    line-height: 1; border-radius: var(--sf-radius);
    border: 1px solid transparent; cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
}
.sf-btn:hover { text-decoration: none; }
.sf-btn--lg { padding: 0.825rem 1.575rem; font-size: 1.05rem; }
.sf-btn--gold {
    background: var(--sf-gold); color: var(--sf-black); font-weight: 600;
    border-color: var(--sf-gold);
}
.sf-btn--gold:hover { background: var(--sf-gold-bright); border-color: var(--sf-gold-bright); color: var(--sf-black); }
.sf-btn--ghost {
    background: transparent; color: var(--sf-text-soft);
    border-color: var(--sf-vein);
}
.sf-btn--ghost:hover { color: var(--sf-text); border-color: var(--sf-text-mute); background: var(--sf-stone-2); }

/* ----- hero ------------------------------------------------------------ */

.sf-hero { position: relative; overflow: hidden; padding: 6rem 0 4.95rem; isolation: isolate; }
.sf-hero__bg {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
}
.sf-hero__grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(180deg, transparent 0%, var(--sf-coal) 90%),
        linear-gradient(rgba(201,169,110,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201,169,110,0.04) 1px, transparent 1px);
    background-size: 100% 100%, 60px 60px, 60px 60px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}
.sf-hero__c60 {
    position: absolute; right: -10%; top: 50%;
    transform: translateY(-50%);
    width: 720px; max-width: 90vw; aspect-ratio: 1 / 1;
    color: var(--sf-gold);
    opacity: 0.55;
    animation: sf-rotate 90s linear infinite;
}
@media (max-width: 900px) {
    .sf-hero__c60 { right: -40%; opacity: 0.25; }
}
@keyframes sf-rotate {
    from { transform: translateY(-50%) rotate(0deg); }
    to   { transform: translateY(-50%) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .sf-hero__c60 { animation: none; }
}

.sf-hero__inner { position: relative; max-width: 720px; }
.sf-hero__eyebrow {
    font-size: 0.78rem; letter-spacing: 0.2325em; text-transform: uppercase;
    color: var(--sf-gold); margin: 0 0 1.5rem; font-weight: 500;
}
.sf-hero__title {
    font-size: clamp(2.5rem, 6vw, 4.2rem);
    margin: 0 0 1.05rem;
    background: linear-gradient(180deg, #ffffff 0%, #c9c4b6 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.sf-hero__lede { font-size: 1.275rem; color: var(--sf-text); font-weight: 500; margin-bottom: 1.05rem; }
.sf-hero__copy { color: var(--sf-text-soft); font-size: 1.05rem; margin-bottom: 2.025rem; max-width: 56ch; }
.sf-hero__cta { display: flex; flex-wrap: wrap; gap: 0.675rem; margin-bottom: 3rem; }

.sf-hero__pillars {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: 1fr; gap: 1.05rem;
    border-top: 1px solid var(--sf-vein); padding-top: 1.5rem;
}
@media (min-width: 600px) { .sf-hero__pillars { grid-template-columns: repeat(3, 1fr); } }
.sf-hero__pillars li { display: flex; flex-direction: column; gap: 0.45rem; color: var(--sf-text-soft); font-size: 0.9075rem; }

.sf-pillar {
    display: inline-block; align-self: flex-start;
    font-size: 0.675rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
    padding: 0.225rem 0.6rem; border-radius: 99px;
    border: 1px solid currentColor;
}
.sf-pillar--science  { color: var(--sf-science); }
.sf-pillar--stones   { color: var(--sf-stones-acc); }
.sf-pillar--practice { color: var(--sf-practice); }

/* ----- main / layout --------------------------------------------------- */

.sf-banner { padding: 1.05rem 0; }
.sf-main { padding: 2.25rem 0 2.25rem; }
.sf-layout {
    display: grid; gap: 2.025rem;
    grid-template-columns: 1fr;
}
/* Default: content takes remaining space, sidebar fixed at 280px on the right.
   This works for the common case (sidebar-right only). When a sidebar-left
   module exists, the .has-sidebar-left override below kicks in. */
.has-sidebar.sf-body .sf-layout { grid-template-columns: 1fr 280px; }
.has-sidebar-left.sf-body .sf-layout { grid-template-columns: 240px 1fr 280px; }
.has-sidebar-left.sf-body.no-sidebar-right .sf-layout { grid-template-columns: 240px 1fr; }
@media (max-width: 900px) {
    .has-sidebar.sf-body .sf-layout,
    .has-sidebar-left.sf-body .sf-layout,
    .has-sidebar-left.sf-body.no-sidebar-right .sf-layout { grid-template-columns: 1fr; }
}

.sf-content { min-width: 0; }

/* Card-style module wrapper (sf_card) */
.sf-mod {
    background: var(--sf-stone); border: 1px solid var(--sf-vein);
    border-radius: var(--sf-radius-lg); padding: 1.275rem;
    box-shadow: var(--sf-shadow);
    margin-bottom: 1.5rem;
}
.sf-mod__title {
    font-family: var(--sf-font-display); font-size: 0.78rem;
    text-transform: uppercase; letter-spacing: 0.18em;
    color: var(--sf-gold); margin: 0 0 1.05rem;
}

/* ----- footer ---------------------------------------------------------- */

.sf-footer { background: var(--sf-black); border-top: 1px solid var(--sf-vein); padding: 3rem 0 0; margin-top: 4.05rem; }
.sf-footer__cols {
    display: grid; gap: 2.025rem;
    grid-template-columns: 1fr;
}
@media (min-width: 720px) { .sf-footer__cols { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.sf-footer__brand p { color: var(--sf-text-soft); margin-top: 0.45rem; }
.sf-footer__col h3, .sf-footer__col .moduletitle {
    font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.18em;
    color: var(--sf-gold); margin: 0 0 1.05rem;
}
.sf-footer__col ul { list-style: none; padding: 0; margin: 0; }
.sf-footer__col li { padding: 0.3rem 0; }
.sf-footer__col a { color: var(--sf-text-soft); }
.sf-footer__col a:hover { color: var(--sf-gold-bright); }

.sf-footer__legal {
    margin-top: 3rem; border-top: 1px solid var(--sf-vein); padding: 1.5rem 0;
    font-size: 0.825rem; color: var(--sf-text-mute);
}
.sf-footer__legal p { margin: 0 0 0.45rem; }
.sf-footer__disclaimer { font-size: 0.78rem; color: var(--sf-text-faint); max-width: 80ch; }

/* ----- claim badges (used by plg_system_shungiteclaims) ---------------- */

.sf-claim {
    display: inline-flex; align-items: center; gap: 0.3375rem;
    padding: 0.18rem 0.5625rem;
    font-size: 0.72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.09em;
    border-radius: 3px;
    border: 1px solid transparent;
    line-height: 1.3;
    vertical-align: middle;
}
.sf-claim__icon { font-size: 0.9em; }
.sf-claim--cited       { color: var(--sf-science);   background: var(--sf-science-bg);  border-color: var(--sf-science); }
.sf-claim--replicated  { color: var(--sf-science);   background: var(--sf-science-bg);  border-color: var(--sf-science); }
.sf-claim--anecdotal   { color: var(--sf-practice);  background: var(--sf-practice-bg); border-color: var(--sf-practice); }
.sf-claim--speculative { color: var(--sf-text-mute); background: var(--sf-stone-2);     border-color: var(--sf-vein); }
.sf-claim--disputed    { color: var(--sf-disputed);  background: rgba(201,83,74,0.10);  border-color: var(--sf-disputed); }

.sf-claim-row {
    display: flex; flex-wrap: wrap; gap: 0.45rem;
    margin: 0.6rem 0 0.825rem;
    padding: 0.6rem 0.825rem;
    background: var(--sf-stone);
    border-left: 3px solid var(--sf-gold);
    border-radius: 0 var(--sf-radius) var(--sf-radius) 0;
    font-size: 0.825rem;
}
.sf-claim-row strong { color: var(--sf-gold); margin-right: 0.45rem; }

/* ----- Kunena content overrides --------------------------------------- */

#kunena, #Kunena, .layout--main {
    color: var(--sf-text); font-family: var(--sf-font-body);
}

#kunena h1, #kunena h2, #kunena h3, #kunena h4 { font-family: var(--sf-font-display); color: var(--sf-text); }

#kunena .table, #kunena table.kunena-listcat, #kunena .kcategory-list {
    background: var(--sf-stone); border: 1px solid var(--sf-vein);
    border-radius: var(--sf-radius-lg); overflow: hidden;
}
#kunena .table th, #kunena thead th {
    background: var(--sf-stone-3) !important; color: var(--sf-gold) !important;
    font-family: var(--sf-font-display); font-size: 0.78rem;
    text-transform: uppercase; letter-spacing: 0.1275em;
    border-color: var(--sf-vein) !important;
    padding: 0.825rem 1.05rem !important;
}
#kunena .table td, #kunena tbody td {
    background: transparent !important;
    border-color: var(--sf-vein) !important;
    color: var(--sf-text-soft) !important;
    padding: 0.9rem 1.05rem !important;
}
#kunena tr:hover td { background: var(--sf-stone-2) !important; }

#kunena.layout .repliesnum, #kunena.layout .viewsnum { font-size: 0.9375rem; font-weight: 500; }
@media (max-width: 600px) {
    #kunena.layout .repliesnum, #kunena.layout .viewsnum { font-size: 0.825rem; }
}

#kunena a { color: var(--sf-link); }
#kunena a:hover { color: var(--sf-link-hover); }

#kunena .btn, #kunena button.btn {
    background: var(--sf-stone-3); color: var(--sf-text);
    border: 1px solid var(--sf-vein); border-radius: var(--sf-radius);
    padding: 0.5625rem 1.05rem; font-weight: 500;
    transition: all 0.15s ease;
}
#kunena .btn:hover { border-color: var(--sf-gold); color: var(--sf-gold-bright); }
#kunena .btn-primary {
    background: var(--sf-gold); color: var(--sf-black);
    border-color: var(--sf-gold); font-weight: 600;
}
#kunena .btn-primary:hover { background: var(--sf-gold-bright); border-color: var(--sf-gold-bright); color: var(--sf-black); }

#kunena .breadcrumb {
    background: transparent; padding: 0.6rem 0; margin-bottom: 1.05rem;
    font-size: 0.825rem; color: var(--sf-text-mute);
    border-bottom: 1px solid var(--sf-vein);
}
#kunena .breadcrumb a { color: var(--sf-text-soft); }

#kunena .kmsgavatar img, #kunena .kavatar img { border: 2px solid var(--sf-vein); border-radius: 50%; }

/* Forum post body */
#kunena .ksignature, #kunena .kmsgsignature { color: var(--sf-text-mute); border-top: 1px dashed var(--sf-vein); padding-top: 0.825rem; font-size: 0.825rem; }
#kunena .kmsg { background: var(--sf-stone) !important; border: 1px solid var(--sf-vein); border-radius: var(--sf-radius-lg); padding: 1.5rem; color: var(--sf-text); }
#kunena .kmsgtext, #kunena .kmsg__body, #kunena .kmsg .post-content { color: var(--sf-text); line-height: 1.7; }
#kunena blockquote, #kunena .kmessage blockquote {
    background: var(--sf-stone-2); border-left: 3px solid var(--sf-gold);
    padding: 0.825rem 1.05rem; margin: 1.05rem 0; border-radius: 0 var(--sf-radius) var(--sf-radius) 0;
    color: var(--sf-text-soft);
}

/* Kunena modules (latest topics, stats) */
.mod-kunenalatest, .mod-kunenastats {
    color: var(--sf-text-soft);
}
.mod-kunenalatest a, .mod-kunenastats a { color: var(--sf-link); }
.mod-kunenalatest .ktopic-label, .mod-kunenalatest h4 { color: var(--sf-text); }

/* ----- forms ----------------------------------------------------------- */

input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="url"], textarea, select {
    background: var(--sf-stone); color: var(--sf-text);
    border: 1px solid var(--sf-vein); border-radius: var(--sf-radius);
    padding: 0.5625rem 0.825rem; font-family: var(--sf-font-body); font-size: 0.9375rem;
    transition: border-color 0.15s ease;
}
input:focus, textarea:focus, select:focus {
    outline: none; border-color: var(--sf-gold);
    box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.15);
}

/* ----- tables (generic) ----------------------------------------------- */

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.75rem 1.05rem; border-bottom: 1px solid var(--sf-vein); }
th { color: var(--sf-gold); font-family: var(--sf-font-display); font-weight: 600;
     font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1275em; }

/* ----- system messages / Bootstrap alerts -------------------------------
   Unified system: every Bootstrap .alert variant gets a dark theme +
   semantic accent stripe + readable text. Scoped to override Bootstrap
   defaults that ship with J5/J6 (.alert-info defaults to cyan #cff4fc).
   Coordinates with the joomla-alert web component rules further down so
   both old-style and new-style alerts match.

   Variants:
     .alert / .alert-secondary  → neutral (gold-tinted info)
     .alert-success             → green
     .alert-warning/.alert-notice → amber
     .alert-danger/.alert-error → red
     .alert-info                → muted gold (was loud cyan; clashes with palette)
*/
.alert, #system-message-container .alert {
    --bs-alert-color: var(--sf-text);
    --bs-alert-bg: var(--sf-stone-2);
    --bs-alert-border-color: var(--sf-vein);
    --bs-alert-link-color: var(--sf-gold-bright);
    border-radius: var(--sf-radius);
    padding: 0.825rem 1.125rem;
    margin-bottom: 1.05rem;
    border: 1px solid var(--bs-alert-border-color);
    background: var(--bs-alert-bg);
    color: var(--bs-alert-color);
    font-size: 0.9075rem;
    line-height: 1.55;
}
.alert .alert-link, .alert a:not(.btn) {
    color: var(--bs-alert-link-color);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.alert .alert-heading, .alert h4 {
    color: inherit;
    font-weight: 600;
    font-size: 1.05rem;
    margin-bottom: 0.45rem;
}
.alert-secondary {
    --bs-alert-bg: var(--sf-stone-2);
    --bs-alert-border-color: var(--sf-vein-light, var(--sf-vein));
    --bs-alert-color: var(--sf-text-soft);
}
/* INFO — neutral gold-tinted instead of clashing cyan */
.alert-info {
    --bs-alert-bg: rgba(201, 169, 110, 0.06);
    --bs-alert-border-color: rgba(201, 169, 110, 0.30);
    --bs-alert-color: var(--sf-text-soft);
    --bs-alert-link-color: var(--sf-gold-bright);
}
.alert-success {
    --bs-alert-bg: rgba(72, 163, 72, 0.10);
    --bs-alert-border-color: rgba(72, 163, 72, 0.40);
    --bs-alert-color: #b8e0b8;
}
.alert-warning, .alert-notice {
    --bs-alert-bg: var(--sf-practice-bg);
    --bs-alert-border-color: var(--sf-practice);
    --bs-alert-color: var(--sf-practice);
}
.alert-danger, .alert-error {
    --bs-alert-bg: rgba(201, 83, 74, 0.10);
    --bs-alert-border-color: var(--sf-disputed);
    --bs-alert-color: #f5b8b6;
}

/* Dismissible alert close-X button — Bootstrap 5 .btn-close inside .alert */
.alert.alert-dismissible {
    padding-right: 3rem;
}
.alert.alert-dismissible .btn-close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    padding: 1.05rem 1.125rem;
    background: transparent;
    border: 0;
    opacity: 0.5;
    filter: invert(1);
}
.alert.alert-dismissible .btn-close:hover { opacity: 0.9; }

/* ----- mobile tightening ----------------------------------------------- */

@media (max-width: 720px) {
    .sf-header__inner { flex-wrap: wrap; gap: 0.6rem; min-height: auto; padding: 0.6rem 1.05rem; }
    .sf-nav { order: 3; flex-basis: 100%; }
    .sf-nav ul { gap: 0.1125rem; }
    .sf-nav a { padding: 0.45rem 0.6rem; font-size: 0.8925rem; }
    .sf-hero { padding: 4.05rem 0 3rem; }
    .sf-header__tools .sf-btn:not(.sf-btn--gold) { display: none; }
    /* Kunena adds 3rem (48px) margin top + bottom on every section block,
       which adds up to ~100px gaps between sections on mobile. Tighten. */
    body.sf-body #kunena .kfrontend { margin: 1.05rem 0 !important; }
    body.sf-body #kunena .kfrontend.section { margin: 1.05rem 0 !important; }
    /* Hide the section collapse button on mobile — eats vertical space and is
       barely discoverable (an outline icon top-right of each section). */
    body.sf-body #kunena .kfrontend > h2.btn-toolbar { display: none !important; }
    /* Tighten Kunena topic post cards on mobile: default 1.5rem padding on
       both the outer wrapper and inner kmsg eats most of the viewport width. */
    body.sf-body #kunena .col-md-10,
    body.sf-body #kunena .col-md-10.message-published {
        padding-left: 0.45rem !important;
        padding-right: 0.45rem !important;
    }
    body.sf-body #kunena .col-md-10 > .p-4 {
        padding: 0.45rem !important;
    }
    body.sf-body #kunena .kmsg,
    body.sf-body #kunena .kunena-message,
    body.sf-body .kmessage,
    body.sf-body .layout--main .post {
        padding: 0.6rem !important;
        border: 0 !important;
        border-radius: 0 !important;
        margin: 0.45rem 0 !important;
    }
    /* Kunena .mykmsg-header has hardcoded margin: -15px / -20px which leaks
       outside the parent on narrow widths — neutralize it. */
    body.sf-body #kunena .mykmsg-header {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* Hide the avatar/profile sidebar column inside each post on mobile —
       it cuts post width by ~17% with no payoff at this size. */
    body.sf-body #kunena .row.message > .col-md-2 { display: none !important; }
    body.sf-body #kunena .row.message > .col-md-10 { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }
}

/* Tablet and small-laptop range (721px–991px): same post-card simplification
   as phone — too narrow for the heavy nested padding to look right. Keep
   16px text but cut the padding/border bloat. */
@media (min-width: 721px) and (max-width: 991px) {
    body.sf-body #kunena .col-md-10,
    body.sf-body #kunena .col-md-10.message-published {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    body.sf-body #kunena .col-md-10 > .p-4 { padding: 0.75rem !important; }
    body.sf-body #kunena .kmsg,
    body.sf-body #kunena .kunena-message,
    body.sf-body .kmessage,
    body.sf-body .layout--main .post {
        padding: 1.05rem !important;
        border: 0 !important;
        border-radius: 0 !important;
        margin: 0.6rem 0 !important;
    }
    body.sf-body #kunena .mykmsg-header {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Phone-view rules continued: CTA buttons, footer mobile layout, etc. */
@media (max-width: 720px) {
    /* "Log in / Create account" CTA buttons on guest topic pages — shrink for phone */
    body.sf-body #kunena .col-md-10 > p > a.btn-link {
        font-size: 0.825rem !important;
        padding: 0.3rem 0.5625rem !important;
        margin: 0 0.15rem !important;
    }
    /* Footer: trim huge top margin + padding for mobile, give footer cols
       proper gap between stacked cards. */
    body.sf-body .sf-footer {
        margin-top: 2.025rem !important;
        padding-top: 2.025rem !important;
    }
    body.sf-body .sf-footer__cols {
        row-gap: 2.025rem !important;
        padding: 0 1.05rem 1.5rem !important;
    }
    body.sf-body .sf-footer__col { padding: 0 !important; }
    body.sf-body .sf-footer__legal { padding: 1.05rem !important; }
    /* Hide footer brand block on mobile — header already shows brand identity.
       Keep only the "Create an account" CTA from that block. */
    body.sf-body .sf-footer__brand svg,
    body.sf-body .sf-footer__brand-name,
    body.sf-body .sf-footer__brand-sub { display: none !important; }

    /* Phone legal row: stack all four items in a centered column. Higher
       specificity needed to beat the desktop grid + text-align: left rules. */
    body.sf-body footer.sf-footer .sf-footer__legal-inner > div.mod-custom {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 0.45rem !important;
        grid-template-columns: none !important;
        grid-template-areas: none !important;
    }
    body.sf-body footer.sf-footer .sf-footer__legal-inner > div.mod-custom > p,
    body.sf-body footer.sf-footer .sf-footer__legal-inner .sf-footer__legal-meta,
    body.sf-body footer.sf-footer .sf-footer__legal-inner .sf-footer__legal-links,
    body.sf-body footer.sf-footer .sf-footer__legal-inner .sf-footer__credit {
        margin: 0 !important;
        text-align: center !important;
        justify-self: center !important;
        flex: 0 0 auto !important;
    }
}

/* =========================================================================
   Bootstrap utilities Joomla expects but doesn't ship to the frontend.
   From The AI Joomla Blueprint, Part 4.
   ========================================================================= */

.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;
}

.collapse:not(.show) { display: none; }
.collapsing { height: 0; overflow: hidden; transition: height .35s ease; }

.btn-close {
    box-sizing: content-box; width: 1.05em; height: 1.05em; padding: 0.225em;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em no-repeat;
    border: 0; border-radius: .375rem; opacity: .6; cursor: pointer;
}
.btn-close:hover { opacity: 1; }

.btn-check { position: absolute; clip: rect(0,0,0,0); pointer-events: none; }
.form-check { display: flex; align-items: center; gap: 0.45rem; min-height: 1.5rem; }
.form-check input[type="checkbox"], .form-check input[type="radio"] {
    appearance: auto; color-scheme: dark; accent-color: var(--sf-gold);
    flex-shrink: 0; width: auto; padding: 0;
}

.form-horizontal { display: block; }
.form-horizontal .control-group, .form-horizontal .control-label { float: none; width: auto; text-align: left; }
.form-horizontal .controls { margin-left: 0; }

/* Bootstrap grid (not loaded on frontend) */
.row { display: flex; flex-wrap: wrap; margin-right: -0.45rem; margin-left: -0.45rem; }
[class^="col-"], [class*=" col-"] { padding-right: 0.45rem; padding-left: 0.45rem; box-sizing: border-box; }
.col-12, .col-md-12, .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
.col-6, .col-md-6 { flex: 0 0 50%; max-width: 50%; }
.col-4, .col-md-4 { flex: 0 0 33.333%; max-width: 33.333%; }
.col-3, .col-md-3 { flex: 0 0 25%; max-width: 25%; }

.flex-row      { flex-direction: row !important; }
.flex-column   { flex-direction: column !important; }
.flex-grow-0   { flex-grow: 0 !important; }
.flex-grow-1   { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-shrink-1 { flex-shrink: 1 !important; }

/* Pagination : dark theme */
.pagination { display: inline-flex; gap: 0.225rem; padding: 0; list-style: none; margin: 1.5rem 0; }
.pagination .page-item .page-link, .pagination .page-link {
    display: inline-block; padding: 0.45rem 0.825rem;
    background: var(--sf-stone); border: 1px solid var(--sf-vein);
    color: var(--sf-text-soft); border-radius: var(--sf-radius);
    font-size: 0.9075rem; text-decoration: none;
}
.pagination .page-link:hover { color: var(--sf-gold-bright); border-color: var(--sf-gold); }
.pagination .active .page-link {
    background: var(--sf-gold); border-color: var(--sf-gold); color: var(--sf-black); font-weight: 600;
}
.pagination .disabled .page-link { opacity: 0.4; cursor: not-allowed; }

/* Pagination icon glyphs (icomoon not loaded) */
.icon-angle-double-left::before  { content: '«'; }
.icon-angle-left::before         { content: '‹'; }
.icon-angle-right::before        { content: '›'; }
.icon-angle-double-right::before { content: '»'; }

/* Tag pills (Bootstrap btn-info default) */
.tags { list-style: none; padding: 0; margin: 0.45rem 0; display: flex; flex-wrap: wrap; gap: 0.3375rem; }
.tags .list-inline-item { display: inline-block; }
.tags a.btn-info, .tags .btn-info {
    display: inline-block; padding: 0.1875rem 0.675rem; border-radius: 99px;
    background: var(--sf-stone-3); color: var(--sf-gold-bright);
    border: 1px solid var(--sf-vein); font-size: 0.78rem; text-decoration: none;
}
.tags a.btn-info:hover { border-color: var(--sf-gold); }

/* List group */
.list-group { --bs-list-group-bg: var(--sf-stone); --bs-list-group-border-color: var(--sf-vein); --bs-list-group-color: var(--sf-text-soft); }

/* Tables : table-striped fix for Bootstrap 5.3 box-shadow approach */
.table > :not(caption) > * > * { box-shadow: none !important; --bs-table-accent-bg: transparent; }
.table { --bs-table-bg: transparent; --bs-table-hover-bg: rgba(201, 169, 110, 0.05);
         --bs-table-striped-bg: rgba(255,255,255,0.02); --bs-table-border-color: var(--sf-vein); }

/* Read more : strip Bootstrap btn background */
.readmore a, .readmore .btn { background: none !important; padding: 0; color: var(--sf-link); border: 0; }
.readmore a::after { content: ' →'; opacity: 0.7; }

/* (Older alert overrides removed — consolidated into the unified .alert
   block above; .alert-info now uses muted gold tint, not loud cyan.) */

/* mod_menu nav links : Joomla outputs no class on <a> */
.sf-nav .menu .nav-item > a,
.sf-nav .mod-menu .nav-item > a {
    display: inline-block; padding: 0.45rem 0.9rem;
    color: var(--sf-text-soft); font-size: 0.9375rem; font-weight: 500;
    border-radius: var(--sf-radius); text-decoration: none;
}
.sf-nav .menu .nav-item > a:hover { color: var(--sf-text); background: var(--sf-stone-2); }
.sf-nav .menu .current > a, .sf-nav .menu .active > a { color: var(--sf-gold-bright); background: var(--sf-stone-2); }

/* Hide the auto-generated submenu toggle button (we don't show submenus in main nav) */
.sf-nav .mod-menu__toggle-sub { display: none; }
.sf-nav .mod-menu__sub { display: none; }

/* Joomla web components */
joomla-tab { background: transparent !important; color: var(--sf-text) !important; }
joomla-alert { --jui-alert-bg: var(--sf-stone); --jui-alert-color: var(--sf-text); --jui-alert-border-color: var(--sf-vein); }

/* =========================================================================
   Heavy Kunena Aurelia overrides. Their stylesheet sets a white background
   and light-theme colors on every panel. We have to override at the body
   level and re-paint each Kunena container, otherwise it leaks through.
   ========================================================================= */

body.sf-body { background: var(--sf-coal) !important; color: var(--sf-text) !important; }

/* Sticky footer: on short pages, push the footer to the viewport bottom.
   Body becomes a flex column; main grows to consume free vertical space. */
body.sf-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body.sf-body > main.sf-main { flex: 1 0 auto; }
body.sf-body > footer.sf-footer { flex: 0 0 auto; }

body.sf-body #kunena,
body.sf-body .layout,
body.sf-body .layout--main,
body.sf-body .kunena-block,
body.sf-body .kunena-card,
body.sf-body .Kunena,
body.sf-body div[id^="Kunena"] {
    background: transparent !important;
    color: var(--sf-text) !important;
}

body.sf-body #kunena h1,
body.sf-body #kunena h2,
body.sf-body #kunena h3,
body.sf-body #kunena h4,
body.sf-body #kunena h5,
body.sf-body .layout--main h1,
body.sf-body .layout--main h2,
body.sf-body .layout--main h3 {
    color: var(--sf-text) !important;
    font-family: var(--sf-font-display) !important;
}

body.sf-body #kunena a,
body.sf-body .layout--main a {
    color: var(--sf-link) !important;
}
body.sf-body #kunena a:hover,
body.sf-body .layout--main a:hover {
    color: var(--sf-link-hover) !important;
}

/* Kunena category list panels */
body.sf-body #kunena .table,
body.sf-body #kunena table,
body.sf-body .layout--main .table,
body.sf-body .layout--main table {
    background: var(--sf-stone) !important;
    color: var(--sf-text) !important;
    border: 1px solid var(--sf-vein) !important;
    border-radius: var(--sf-radius-lg) !important;
    overflow: hidden;
}
body.sf-body #kunena thead th,
body.sf-body #kunena .table thead th,
body.sf-body .layout--main thead th {
    background: var(--sf-stone-3) !important;
    color: var(--sf-gold) !important;
    border-color: var(--sf-vein) !important;
    text-transform: uppercase;
    letter-spacing: 0.1275em;
    font-size: 0.78rem;
    padding: 0.825rem 1.05rem !important;
}
body.sf-body #kunena tbody td,
body.sf-body #kunena .table tbody td,
body.sf-body .layout--main tbody td {
    background: transparent !important;
    color: var(--sf-text-soft) !important;
    border-color: var(--sf-vein) !important;
    padding: 0.9rem 1.05rem !important;
}
body.sf-body #kunena tbody tr:hover td { background: var(--sf-stone-2) !important; }

/* Kunena post body cards */
body.sf-body #kunena .kmsg,
body.sf-body #kunena .kunena-message,
body.sf-body .kmessage,
body.sf-body .layout--main .post {
    background: var(--sf-stone) !important;
    border: 1px solid var(--sf-vein) !important;
    border-radius: var(--sf-radius-lg) !important;
    padding: 1.5rem !important;
    color: var(--sf-text) !important;
    margin-bottom: 1.05rem;
}
/* Phone view: tighten the post-body padding so text gets more horizontal
   space. Placed AFTER the desktop rule so it wins on equal specificity. */
@media (max-width: 720px) {
    body.sf-body #kunena .kmsg,
    body.sf-body #kunena .kunena-message,
    body.sf-body .kmessage,
    body.sf-body .layout--main .post {
        padding: 0.75rem !important;
        border-radius: 6px !important;
        margin-bottom: 0.75rem !important;
    }
    /* Also slim the .col-md-10 wrapper and inner .p-4 spacer on phone */
    body.sf-body #kunena .row.message > .col-md-10.message-published {
        padding: 0.45rem !important;
    }
    body.sf-body #kunena .col-md-10 > .shadow-none.p-4 {
        padding: 0 !important;
    }
    /* Topic-page search input: take full width of its parent on phone */
    body.sf-body.option-kunena.view-topic #kunena .kunena-search .input-group {
        max-width: 100% !important;
    }
    body.sf-body.option-kunena.view-topic #kunena .float-end:has(.kunena-search) {
        width: 100% !important;
        margin-bottom: 0.75rem !important;
    }
}

/* Hide the redundant in-topic Kunena search bar — duplicates the sidebar
   search and adds noise to the topic header. Kunena renders this in either
   <h2 class="float-end"> or <div class="float-end"> depending on layout
   variant, so target both. */
body.sf-body.option-kunena.view-topic #kunena h2.float-end:has(.kunena-search),
body.sf-body.option-kunena.view-topic #kunena div.float-end:has(> .kunena-search),
body.sf-body.option-kunena.view-topics #kunena h2.float-end:has(.kunena-search),
body.sf-body.option-kunena.view-topics #kunena div.float-end:has(> .kunena-search) {
    display: none !important;
}

/* Empty topic-actions toolbar (#topic-actions-toolbar) renders as a hairline
   divider with no buttons — Kunena outputs the wrapper unconditionally even
   when the action set is empty for the current user. Hide when empty so we
   don't get a stray phantom line under the topic title. */
body.sf-body.option-kunena.view-topic #kunena #topic-actions-toolbar:not(:has(.btn, button, a)) {
    display: none !important;
}

/* Phone view-topic: tighten the gap between post body and footer. Default
   stack on phone is sf-main padding-bottom 20.4px (5 ✗) + .row.message
   margin-bottom 20px (2 ✗) + footer margin-top 24px + footer padding-top
   24px = ~88px. Drop to 369-safe values: 7.2 + 7.2 + 0 + 14.4 = 28.8 (9 ✓). */
@media (max-width: 720px) {
    body.sf-body.view-topic main.sf-main,
    body.sf-body.view-topics main.sf-main {
        /* 14.4px → 9 ✓ */
        padding-bottom: 0.9rem !important;
    }
    body.sf-body.view-topic #kunena .row.message {
        /* 7.2px → 9 ✓ (Kunena default 20px = 2 ✗) */
        margin-top: 0.45rem !important;
        margin-bottom: 0.45rem !important;
    }
    body.sf-body.view-topic .sf-footer,
    body.sf-body.view-topics .sf-footer {
        margin-top: 0 !important;
        /* 14.4px → 9 ✓ */
        padding-top: 0.9rem !important;
    }
    /* Phone topic-title: smaller font + roomier line-height. Default
       1.575rem (25.2 → 9 ✓) at line-height 1 is cramped on long 4-line
       titles. Drop to 1.35rem (21.6 → 9 ✓) with line-height 1.35
       (21.6×1.35=29.16, fractional ok). */
    body.sf-body.view-topic #kunena h1 {
        font-size: 1.35rem !important;
        line-height: 1.35 !important;
    }
}

/* Breadcrumbs */
body.sf-body .breadcrumb,
body.sf-body #kunena .breadcrumb {
    background: transparent !important;
    color: var(--sf-text-mute) !important;
    padding: 0.6rem 0 !important;
}

/* Kunena buttons. Aurelia ships its own .btn defaults that come through pale.
   :not(.btn-close) excludes Bootstrap's icon-only close button — that one
   is a tiny SVG-bg X with its own width/height/padding rules. Slamming
   our padding+border+background on it kills the X icon entirely. */
body.sf-body #kunena .btn:not(.btn-close),
body.sf-body #kunena button:not(.btn-close),
body.sf-body .layout--main .btn:not(.btn-close),
body.sf-body .layout--main button:not(.btn-close) {
    background: var(--sf-stone-3) !important;
    color: var(--sf-text) !important;
    border: 1px solid var(--sf-vein) !important;
    border-radius: var(--sf-radius) !important;
    padding: 0.5625rem 1.05rem !important;
    font-weight: 500 !important;
}
body.sf-body #kunena .btn:hover { border-color: var(--sf-gold) !important; color: var(--sf-gold-bright) !important; }
body.sf-body #kunena .btn-primary,
body.sf-body .layout--main .btn-primary {
    background: var(--sf-gold) !important;
    color: var(--sf-black) !important;
    border-color: var(--sf-gold) !important;
    font-weight: 600 !important;
}

/* Kunena form controls */
body.sf-body #kunena input[type="text"],
body.sf-body #kunena input[type="search"],
body.sf-body #kunena input[type="email"],
body.sf-body #kunena input[type="password"],
body.sf-body #kunena textarea,
body.sf-body #kunena select,
body.sf-body .layout--main input,
body.sf-body .layout--main textarea,
body.sf-body .layout--main select {
    background: var(--sf-stone) !important;
    color: var(--sf-text) !important;
    border: 1px solid var(--sf-vein) !important;
}

/* Kunena's "Skip to content" / "Sign in / Join" / category login bar */
body.sf-body .kunena-login,
body.sf-body .kunena-actions,
body.sf-body .layout--main .topiclist,
body.sf-body .layout--main .topiclist__row {
    background: var(--sf-stone) !important;
    color: var(--sf-text) !important;
    border-color: var(--sf-vein) !important;
}

/* Statistics panel that ships under category list */
body.sf-body .kunena-stats,
body.sf-body #kstats,
body.sf-body .kstats {
    background: var(--sf-stone) !important;
    border: 1px solid var(--sf-vein) !important;
    border-radius: var(--sf-radius-lg) !important;
    padding: 1.275rem !important;
}

/* Bootstrap utility fallbacks Kunena assumes */
body.sf-body .text-muted { color: var(--sf-text-mute) !important; }
body.sf-body .bg-light, body.sf-body .bg-white { background: var(--sf-stone) !important; color: var(--sf-text) !important; }

/* Powered-by Kunena footer line should at least be visible */
body.sf-body .layout--footer { color: var(--sf-text-mute) !important; }
body.sf-body .layout--footer a { color: var(--sf-link) !important; }

/* Section header rows in the Kunena category index */
body.sf-body #kunena .ksection,
body.sf-body #kunena .ksectionname {
    background: var(--sf-stone-3) !important;
    color: var(--sf-gold) !important;
    border-color: var(--sf-vein) !important;
    padding: 0.75rem 1.05rem !important;
    font-family: var(--sf-font-display) !important;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.825rem;
}

/* Default fallback: any direct child div in #kunena that has its own bg */
body.sf-body #kunena > div { color: var(--sf-text) !important; }

/* =========================================================================
   Hide Kunena's bundled navbar. We have our own header nav at the top of
   the page, the Kunena one is a duplicate that ships hard-coded with a
   light Bootstrap bg.
   ========================================================================= */

body.sf-body #kunena > nav.navbar,
body.sf-body #kunena > .navbar { display: none !important; }

/* Bootstrap dropdown panels (login dropdown, etc.) */
body.sf-body .dropdown-menu {
    --bs-dropdown-bg: var(--sf-stone) !important;
    --bs-dropdown-color: var(--sf-text) !important;
    --bs-dropdown-link-color: var(--sf-text) !important;
    --bs-dropdown-link-hover-color: var(--sf-gold-bright) !important;
    --bs-dropdown-link-hover-bg: var(--sf-stone-2) !important;
    --bs-dropdown-link-active-bg: var(--sf-gold) !important;
    --bs-dropdown-link-active-color: var(--sf-black) !important;
    --bs-dropdown-border-color: var(--sf-vein) !important;
    --bs-dropdown-divider-bg: var(--sf-vein) !important;
    --bs-dropdown-header-color: var(--sf-text-mute) !important;
    background-color: var(--sf-stone) !important;
    border-color: var(--sf-vein) !important;
    color: var(--sf-text) !important;
}
body.sf-body .dropdown-menu a,
body.sf-body .dropdown-menu .dropdown-item {
    color: var(--sf-text) !important;
}
body.sf-body .dropdown-menu .dropdown-item:hover {
    background: var(--sf-stone-2) !important;
    color: var(--sf-gold-bright) !important;
}

/* Bootstrap input-group icon boxes (the lock/person SVG slot beside inputs) */
body.sf-body .input-group-text {
    background: var(--sf-stone-3) !important;
    color: var(--sf-text-soft) !important;
    border-color: var(--sf-vein) !important;
}

/* btn-light / btn-outline-* defaults bleed white in places */
body.sf-body .btn-light,
body.sf-body .btn-outline-primary,
body.sf-body .btn-outline-secondary {
    background: var(--sf-stone-3) !important;
    color: var(--sf-text) !important;
    border-color: var(--sf-vein) !important;
}
body.sf-body .btn-light:hover,
body.sf-body .btn-outline-primary:hover,
body.sf-body .btn-outline-secondary:hover {
    background: var(--sf-stone-2) !important;
    border-color: var(--sf-gold) !important;
    color: var(--sf-gold-bright) !important;
}

/* Empty-section messages (the "no categories" h4) */
body.sf-body #kunena .table td h4 {
    color: var(--sf-text-mute) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    font-size: 1.05rem !important;
}

/* Kunena offcanvas (mobile menu drawer) */
body.sf-body .offcanvas {
    background: var(--sf-stone) !important;
    color: var(--sf-text) !important;
    border-color: var(--sf-vein) !important;
}
body.sf-body .offcanvas-title { color: var(--sf-gold) !important; }

/* Kunena form-text helpers and form-check-label inside dropdowns */
body.sf-body .custom-control-label,
body.sf-body .form-check-label,
body.sf-body label { color: var(--sf-text) !important; }

/* =========================================================================
   Compact top nav so all items fit on one row at 1024px and up.
   ========================================================================= */

.sf-nav .menu .nav-item > a,
.sf-nav .mod-menu .nav-item > a,
.sf-nav a {
    padding: 0.45rem 0.675rem !important;
    font-size: 0.8925rem !important;
    white-space: nowrap;
}
.sf-header__inner { gap: 2.025rem !important; }
@media (max-width: 1100px) {
    .sf-header__tools .sf-btn--ghost { display: none; }  /* keep only Join button on small */
}

/* Brand subtitle: width-matched to the brand name above via justify trick */
.sf-brand__text { max-width: 219.9px; min-width: 0; }
.sf-brand__sub {
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-size: 0.6075rem;
    text-align: justify;
    text-align-last: justify;
    letter-spacing: 0.0375em;
    overflow: hidden;
    white-space: nowrap;
}

/* "Please Log in or Create an account to join the conversation" prompt
   at the bottom of topic threads. Currently bare text; turn it into a
   proper card. */
body.sf-body #kunena .row.message > .col-md-10:has(> p > a.btn-link),
body.sf-body #kunena div.message-published:has(> p > a.btn-link) {
    background: var(--sf-stone) !important;
    border: 1px solid var(--sf-vein) !important;
    border-radius: var(--sf-radius-lg) !important;
    padding: 1.275rem 1.5rem !important;
}
/* Center only the actual login/register prompt paragraph */
body.sf-body #kunena .col-md-10 > p:has(> a.btn-link) {
    text-align: center;
}
body.sf-body #kunena .col-md-10 > p > a.btn-link {
    display: inline-block;
    color: var(--sf-gold-bright) !important;
    font-weight: 600;
    padding: 0.3375rem 0.675rem;
    border: 1px solid var(--sf-vein);
    border-radius: var(--sf-radius);
    margin: 0 0.1875rem;
    text-decoration: none !important;
    transition: all 0.15s ease;
}
body.sf-body #kunena .col-md-10 > p > a.btn-link:hover {
    border-color: var(--sf-gold);
    background: var(--sf-stone-2);
}

/* =========================================================================
   com_users (Login / Registration / Profile / Password reset / Username
   reminder). Joomla ships these forms unstyled outside of Cassiopeia.
   Selectors per the AI Joomla Blueprint Part 14.
   ========================================================================= */

body.sf-body .com-users-login,
body.sf-body .com-users-registration,
body.sf-body .com-users-profile,
body.sf-body .com-users-reset,
body.sf-body .com-users-remind {
    max-width: 480px;
    margin: 2.025rem auto;
    background: var(--sf-stone);
    border: 1px solid var(--sf-vein);
    border-radius: var(--sf-radius-lg);
    padding: 2.025rem;
}

body.sf-body .com-users-login fieldset,
body.sf-body .com-users-registration fieldset,
body.sf-body .com-users-profile fieldset,
body.sf-body .com-users-reset fieldset,
body.sf-body .com-users-remind fieldset {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.sf-body .com-users-login__form .control-group,
body.sf-body .com-users-registration__form .control-group,
body.sf-body .com-users-profile__edit .control-group,
body.sf-body .com-users-reset__form .control-group,
body.sf-body .com-users-remind__form .control-group {
    margin-bottom: 1.05rem;
}

body.sf-body .com-users-login .control-label,
body.sf-body .com-users-registration .control-label,
body.sf-body .com-users-profile .control-label,
body.sf-body .com-users-reset .control-label,
body.sf-body .com-users-remind .control-label {
    margin-bottom: 0.3375rem;
    font-size: 0.825rem;
    color: var(--sf-text-soft);
}
body.sf-body .com-users-login .control-label label,
body.sf-body .com-users-registration .control-label label,
body.sf-body .com-users-profile .control-label label,
body.sf-body .com-users-reset .control-label label,
body.sf-body .com-users-remind .control-label label { color: var(--sf-text-soft) !important; }
body.sf-body .star { color: var(--sf-gold); }

body.sf-body .com-users-login input[type="text"],
body.sf-body .com-users-login input[type="password"],
body.sf-body .com-users-login input[type="email"],
body.sf-body .com-users-registration input[type="text"],
body.sf-body .com-users-registration input[type="password"],
body.sf-body .com-users-registration input[type="email"],
body.sf-body .com-users-profile input[type="text"],
body.sf-body .com-users-profile input[type="password"],
body.sf-body .com-users-profile input[type="email"],
body.sf-body .com-users-reset input[type="text"],
body.sf-body .com-users-reset input[type="password"],
body.sf-body .com-users-reset input[type="email"],
body.sf-body .com-users-remind input[type="text"],
body.sf-body .com-users-remind input[type="email"] {
    width: 100%;
    background: var(--sf-coal) !important;
    color: var(--sf-text) !important;
    border: 1px solid var(--sf-vein) !important;
    border-radius: var(--sf-radius);
    padding: 0.675rem 0.9rem;
    font-size: 0.9375rem;
}
body.sf-body .com-users-login input:focus,
body.sf-body .com-users-registration input:focus,
body.sf-body .com-users-profile input:focus,
body.sf-body .com-users-reset input:focus,
body.sf-body .com-users-remind input:focus {
    border-color: var(--sf-gold) !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(201,169,110,0.15);
}

/* Password show/hide toggle button */
body.sf-body .input-password-toggle {
    background: var(--sf-stone-3) !important;
    color: var(--sf-text-soft) !important;
    border: 1px solid var(--sf-vein) !important;
    border-left: 0 !important;
    padding: 0.5625rem 0.825rem !important;
    border-radius: 0 var(--sf-radius) var(--sf-radius) 0 !important;
    cursor: pointer;
}
body.sf-body .input-password-toggle:hover { color: var(--sf-gold-bright) !important; border-color: var(--sf-gold) !important; }
body.sf-body .password-group .input-group { display: flex; align-items: stretch; }
body.sf-body .password-group input { border-radius: var(--sf-radius) 0 0 var(--sf-radius) !important; }

/* Remember-me row */
body.sf-body .com-users-login__remember .form-check { gap: 0.45rem; margin: 1.05rem 0; }

/* Submit button */
body.sf-body .com-users-login__submit,
body.sf-body .com-users-registration__submit,
body.sf-body .com-users-reset__submit,
body.sf-body .com-users-remind__submit {
    margin-top: 1.275rem;
}
body.sf-body .com-users-login__form button[type="submit"],
body.sf-body .com-users-registration__form button[type="submit"],
body.sf-body .com-users-profile__edit button[type="submit"],
body.sf-body .com-users-reset__form button[type="submit"],
body.sf-body .com-users-remind__form button[type="submit"],
body.sf-body .com-users-login button.btn.btn-primary,
body.sf-body .com-users-registration button.btn.btn-primary {
    display: block !important;
    width: 100%;
    background: var(--sf-gold) !important;
    color: var(--sf-black) !important;
    border: 1px solid var(--sf-gold) !important;
    border-radius: var(--sf-radius);
    padding: 0.75rem 1.05rem !important;
    font-weight: 600 !important;
    font-size: 0.9375rem !important;
    cursor: pointer;
    transition: background 0.15s ease;
}
body.sf-body .com-users-login button[type="submit"]:hover,
body.sf-body .com-users-registration button[type="submit"]:hover,
body.sf-body .com-users-profile button[type="submit"]:hover,
body.sf-body .com-users-reset button[type="submit"]:hover,
body.sf-body .com-users-remind button[type="submit"]:hover {
    background: var(--sf-gold-bright) !important;
}

/* Forgot password / username / register link list under login */
body.sf-body .com-users-login__options.list-group {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-top: 1.5rem;
    padding-top: 1.275rem;
    border-top: 1px solid var(--sf-vein);
    background: transparent !important;
}
body.sf-body .com-users-login__options .list-group-item {
    display: block !important;
    padding: 0.45rem 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--sf-text-soft) !important;
    font-size: 0.9rem;
    text-align: center;
}
body.sf-body .com-users-login__options .list-group-item:hover {
    color: var(--sf-gold-bright) !important;
}

/* Page header on the login/registration pages */
body.sf-body.option-users .page-header,
body.sf-body.option-users h1 {
    text-align: center;
    margin-bottom: 1.5rem;
    color: var(--sf-gold);
    font-family: var(--sf-font-display);
}

/* Inline help blocks */
body.sf-body .com-users-registration .form-text,
body.sf-body .form-text { color: var(--sf-text-mute); font-size: 0.8325rem; }

/* Validation error highlight */
body.sf-body input.invalid,
body.sf-body .com-users-login input.invalid,
body.sf-body .com-users-registration input.invalid {
    border-color: var(--sf-disputed) !important;
}

/* Registration form: separate <form#member-registration> + <fieldset><legend>
   structure that the login selectors don't cover. */

body.sf-body form#member-registration {
    max-width: 480px;
    margin: 2.025rem auto;
    background: var(--sf-stone);
    border: 1px solid var(--sf-vein);
    border-radius: var(--sf-radius-lg);
    padding: 2.025rem;
}
body.sf-body form#member-registration fieldset {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 0 1.5rem !important;
}
body.sf-body form#member-registration legend {
    font-family: var(--sf-font-display);
    font-weight: 600;
    color: var(--sf-gold);
    font-size: 1.125rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    width: auto;
    padding: 0 0 0.6rem 0;
    margin-bottom: 1.05rem;
    border-bottom: 1px solid var(--sf-vein);
}
body.sf-body form#member-registration .control-group { margin-bottom: 1.05rem; }
body.sf-body form#member-registration .control-label {
    display: block;
    margin-bottom: 0.3375rem;
    font-size: 0.825rem;
}
body.sf-body form#member-registration .control-label label,
body.sf-body form#member-registration label { color: var(--sf-text-soft) !important; }
body.sf-body form#member-registration input[type="text"],
body.sf-body form#member-registration input[type="email"],
body.sf-body form#member-registration input[type="password"],
body.sf-body form#member-registration textarea,
body.sf-body form#member-registration select {
    width: 100%;
    background: var(--sf-coal) !important;
    color: var(--sf-text) !important;
    border: 1px solid var(--sf-vein) !important;
    border-radius: var(--sf-radius);
    padding: 0.675rem 0.9rem;
    font-size: 0.9375rem;
}
body.sf-body form#member-registration input:focus,
body.sf-body form#member-registration textarea:focus,
body.sf-body form#member-registration select:focus {
    border-color: var(--sf-gold) !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(201,169,110,0.15);
}

/* Password rules + strength meter */
body.sf-body form#member-registration .small.text-muted {
    margin: 0.45rem 0;
    font-size: 0.825rem;
    color: var(--sf-text-mute) !important;
}
body.sf-body meter {
    width: 100%;
    height: 6px;
    border: 0;
    border-radius: 3px;
    background: var(--sf-stone-3);
}
body.sf-body meter::-webkit-meter-bar { background: var(--sf-stone-3); border-radius: 3px; }
body.sf-body meter::-webkit-meter-optimum-value { background: var(--sf-science); }
body.sf-body meter::-webkit-meter-suboptimum-value { background: var(--sf-practice); }
body.sf-body meter::-webkit-meter-even-less-good-value { background: var(--sf-disputed); }

/* Captcha row spacing */
body.sf-body form#member-registration #jform_captcha-lbl,
body.sf-body form#member-registration .powcaptcha-status {
    color: var(--sf-text-soft);
}

/* Submit button */
body.sf-body form#member-registration button[type="submit"],
body.sf-body button.com-users-registration__register {
    display: block !important;
    width: 100%;
    background: var(--sf-gold) !important;
    color: var(--sf-black) !important;
    border: 1px solid var(--sf-gold) !important;
    border-radius: var(--sf-radius);
    padding: 0.75rem 1.05rem !important;
    font-weight: 600 !important;
    font-size: 0.9375rem !important;
    cursor: pointer;
    margin-top: 0.45rem;
}
body.sf-body form#member-registration button[type="submit"]:hover,
body.sf-body button.com-users-registration__register:hover {
    background: var(--sf-gold-bright) !important;
    border-color: var(--sf-gold-bright) !important;
}

/* Required-field-asterisk legend at top */
body.sf-body #jform_spacer-lbl,
body.sf-body .red { color: var(--sf-gold) !important; }

/* Generic safety net: any plain <button> still showing default chrome */
body.sf-body button:not(.input-password-toggle):not(.btn-close):not(.navbar-toggler):not(.mod-menu__toggle-sub) {
    appearance: none;
    -webkit-appearance: none;
    border-style: solid !important;
}

/* Tone down Kunena section card borders. The default .border + .shadow-lg
   on a dark theme reads as a bright frame. Soften both. */
body.sf-body #kunena .kfrontend.border,
body.sf-body #kunena .section.border,
body.sf-body #kunena .border {
    border-color: var(--sf-vein) !important;
    box-shadow: none !important;
}
body.sf-body #kunena .shadow-lg,
body.sf-body #kunena .shadow,
body.sf-body #kunena .shadow-sm {
    box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset !important;
}
body.sf-body #kunena .section,
body.sf-body #kunena .kfrontend.rounded {
    background: var(--sf-stone) !important;
}
body.sf-body #kunena .card-header {
    background: var(--sf-stone-3) !important;
    border-bottom: 1px solid var(--sf-vein) !important;
    color: var(--sf-text) !important;
}
body.sf-body #kunena .card-header a { color: var(--sf-text) !important; }
body.sf-body #kunena .card-header small { color: var(--sf-text-mute) !important; font-weight: 400; }

/* Pagination active page: was gold-on-gold (invisible). Force black text on gold. */
body.sf-body .pagination .page-item.active .page-link,
body.sf-body .pagination .active > .page-link,
body.sf-body .pagination .page-link.active {
    background: var(--sf-gold) !important;
    border-color: var(--sf-gold) !important;
    color: var(--sf-black) !important;
    font-weight: 700 !important;
}
body.sf-body .pagination .page-item.disabled .page-link {
    color: var(--sf-text-faint) !important;
    background: var(--sf-stone) !important;
    border-color: var(--sf-vein) !important;
}

/* Regular usernames (.kwho-user) + the placeholder avatar SVG default to
   Kunena's light-blue rgb(83,136,180). Repaint to match the moderator
   treatment so all profileboxes share the gold/text-soft palette. */
body.sf-body #kunena .kwho-user,
body.sf-body #kunena .kwho-user.hasTooltip {
    color: var(--sf-gold) !important;
    font-weight: 500;
}
body.sf-body #kunena ul.profilebox .kwho-user {
    color: var(--sf-gold) !important;
}
body.sf-body #kunena ul.profilebox .kwho-user .rounded svg.bi-person {
    color: var(--sf-text-soft) !important;
    width: 36px !important;
    height: 36px !important;
    opacity: 0.7;
}

/* Topic Author label under the avatar: light blue + grey 1px borders. Repaint. */
body.sf-body #kunena .topic-starter,
body.sf-body #kunena .topic-author {
    background: var(--sf-stone-3) !important;
    color: var(--sf-gold) !important;
    border: 1px solid var(--sf-vein) !important;
    border-top: 0 !important;
    border-radius: 0 0 var(--sf-radius) var(--sf-radius) !important;
    font-size: 0.6rem !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase;
    /* 5.4px L/R (369: 9), 3.6px T/B (369: 9). Avatar column is only ~80px
       wide on view-topic, so dense letter-spacing + 9.6px side padding
       caused "TOPIC AUTHOR" to clip. */
    padding: 3.6px 5.4px !important;
    line-height: 1.2 !important;
    margin-top: 0 !important;
    display: inline-block !important;
    white-space: normal !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

/* Empty footer strip on Kunena category list table: tfoot row contains
   a stray .form-group > .input-group with no children, so it just renders
   a 28px gold-bordered band of nothing under the topic list. Hide it. */
body.sf-body #kunena form#categoryactions table tfoot {
    display: none !important;
}

/* New Topic page: the category <select> sits on the same stone-2 panel
   background, making it nearly invisible. Drop it onto stone-3 so it
   stands out as an interactive control. */
body.sf-body #kunena select#postcatid,
body.sf-body #kunena select#postcatid.form-select {
    background-color: var(--sf-stone-3) !important;
    border: 1px solid var(--sf-vein) !important;
    color: var(--sf-text) !important;
    min-height: 42px;
}
body.sf-body #kunena select#postcatid:focus {
    border-color: var(--sf-gold) !important;
    box-shadow: 0 0 0 2px rgba(201, 169, 110, 0.15) !important;
    outline: none !important;
}

/* Bootstrap's .form-control:focus paints a blue border + cyan halo. Repaint
   to gold inside Kunena (Subject input on New Topic, plus all .form-control
   inputs in the forum). Specificity of .form-control:focus (0,2,0) beats our
   bare input:focus (0,1,1) — bump back up by chaining #kunena. */
body.sf-body #kunena .form-control:focus,
body.sf-body #kunena input.form-control:focus,
body.sf-body #kunena textarea.form-control:focus,
body.sf-body #kunena select.form-control:focus,
body.sf-body #kunena select.form-select:focus {
    border-color: var(--sf-gold) !important;
    box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.15) !important;
    outline: none !important;
}

/* Profile-box card on the left side of each post (avatar column).
   Currently has Bootstrap default light shadow. */
body.sf-body #kunena .row.message > .col-md-2,
body.sf-body #kunena ul.profilebox {
    background: var(--sf-stone) !important;
    border: 1px solid var(--sf-vein) !important;
    border-radius: var(--sf-radius-lg) !important;
    box-shadow: none !important;
    padding: 0.45rem !important;
}
body.sf-body #kunena ul.profilebox { padding: 0 !important; list-style: none; }
body.sf-body #kunena ul.profilebox li {
    padding: 0.225rem 0.45rem; text-align: center;
    font-size: 0.78rem; line-height: 1.35;
    color: var(--sf-text-soft);
}
body.sf-body #kunena ul.profilebox a { color: var(--sf-link) !important; font-weight: 500; }

/* Register-page note (com_users registration view, mod_custom in below-content position) */
.sf-register-note {
    text-align: center;
    margin: 1.5rem auto 0;
    color: var(--sf-text-soft);
    font-size: 0.9375rem;
}


/* Kunena create-topic form: attachments + subscribe section spacing.
   Bootstrap .mb-5 (3rem) is doubled on the outer wrapper AND the inner row, and
   the form-postform > h2 rule adds another 1.5rem on top. Same compounding on
   .p-3 padding (form has 1.75rem, .shadow-lg adds 1rem, inner row adds 1rem),
   leaving the attachments / subscribe sections far too padded. */
body.sf-body #kunena form#postform > div.shadow-lg.mb-5 { margin-bottom: 1.275rem !important; }
body.sf-body #kunena #kpost-attachments.mb-5 { margin-bottom: 0 !important; }
body.sf-body #kunena form#postform > h2 { margin-top: 0.45rem !important; }
/* Strip the inner-row .p-3 inside .shadow-lg — outer box already paddings */
body.sf-body #kunena form#postform > div.shadow-lg > div.form-group.row.p-3 {
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* And the .controls inside .form-group.row gets row-gutter padding it doesn't need
   when the parent is no longer a real row (we just neutralised .p-3 above) */
body.sf-body #kunena form#postform > div.shadow-lg > div.form-group.row > .controls {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Breathing room between Subject input row and Topic-icon row inside the same
   .shadow-lg wrapper. Default Bootstrap .form-group has no gap so the rows sit
   flush together. Desktop only: phone view stacks naturally. */
@media (min-width: 768px) {
    body.sf-body #kunena form#postform > div.shadow-lg > div.form-group.row + div.form-group.row {
        margin-top: 1.05rem;
    }
}

/* Tighten the gap between sibling Kunena .kfrontend panels (Members → Statistics
   on /topics/mode-replies). Kunena ships .kfrontend with margin-top: 3rem and
   margin-bottom: 3rem, plus Bootstrap's .mt-4 adds another 1.5rem. The combined
   ~4.5rem gap is too much between two adjacent info panels. */
body.sf-body #kunena .kfrontend.mt-4 { margin-top: 1.05rem !important; }
body.sf-body #kunena .kfrontend { margin-bottom: 1.05rem !important; }
/* Section blocks (top-level Community / Marketplace headers etc) lack .mt-4
   so they fall back to kunena.css 3rem margin — tighten to match info panels. */
body.sf-body #kunena .kfrontend.section { margin-top: 1.5rem !important; margin-bottom: 1.05rem !important; }
/* Last kfrontend panel sits next to .sf-main padding + footer — drop its mb */
body.sf-body #kunena .kfrontend:last-child { margin-bottom: 0 !important; }

/* Footer-gap tightening lives in the FOOTER POLISH PASS section (.sf-footer
   rule with !important padding-top + margin-top). Keep all footer spacing
   adjustments there to avoid cascade conflicts. */

/* Pagination disabled-state styling. Bootstrap leaves .page-item.disabled .page-link
   with no border or background by default, so Start/Prev/End/Next read as bare text
   when on the first or last page. Match the resting style with reduced opacity. */
body.sf-body #kunena .pagination .page-item.disabled .page-link,
body.sf-body .pagination .page-item.disabled .page-link {
    display: inline-block !important;
    padding: 0.45rem 0.825rem !important;
    border: 1px solid var(--sf-vein) !important;
    border-radius: 3.6px !important;
    background-color: var(--sf-stone) !important;
    color: var(--sf-text-mute) !important;
    font-size: 0.9075rem !important;
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}
/* The "..." gap item that Bootstrap renders without .page-link class needs the same treatment */
body.sf-body #kunena .pagination .page-item.disabled > a:not(.page-link),
body.sf-body .pagination .page-item.disabled > a:not(.page-link) {
    display: inline-block !important;
    padding: 0.45rem 0.45rem !important;
    color: var(--sf-text-mute) !important;
    font-size: 0.9075rem !important;
    opacity: 0.55;
}

/* Kill Bootstrap's green "valid" / has-success border + glow on the post-category select.
   Joomla form-validate adds .valid + .form-control-success after focus; the result is a
   green ring that clashes with the dark theme. Override to keep our normal vein border. */
body.sf-body #kunena select#postcatid,
body.sf-body #kunena select#postcatid.form-select,
body.sf-body #kunena select#postcatid.valid,
body.sf-body #kunena select#postcatid.form-control-success,
body.sf-body #kunena .has-success select#postcatid {
    border-color: var(--sf-vein) !important;
    box-shadow: none !important;
    background-image: none !important;
    outline: none !important;
}
body.sf-body #kunena select#postcatid:focus,
body.sf-body #kunena select#postcatid:active,
body.sf-body #kunena select#postcatid.valid:focus,
body.sf-body #kunena select#postcatid.form-control-success:focus {
    border-color: var(--sf-gold) !important;
    box-shadow: 0 0 0 2px rgba(196, 162, 73, 0.18) !important;
    outline: none !important;
}

/* Phone view: kill the focus/active border-color and box-shadow change on the
   category select. On mobile the gold ring on tap reads as a "validation error"
   to some users. Keep the resting vein border in all states. */
@media (max-width: 600px) {
    body.sf-body #kunena select#postcatid,
    body.sf-body #kunena select#postcatid:focus,
    body.sf-body #kunena select#postcatid:active,
    body.sf-body #kunena select#postcatid.valid,
    body.sf-body #kunena select#postcatid.valid:focus,
    body.sf-body #kunena select#postcatid.form-control-success,
    body.sf-body #kunena select#postcatid.form-control-success:focus,
    body.sf-body #kunena select#postcatid.form-select:focus {
        border-color: var(--sf-vein) !important;
        box-shadow: none !important;
        outline: none !important;
    }
}
/* Username in profilebox stays prominent (it's typically the first li or a strong/b inside) */
body.sf-body #kunena ul.profilebox li:first-child,
body.sf-body #kunena ul.profilebox li strong,
body.sf-body #kunena ul.profilebox li b {
    font-size: 0.9375rem; color: var(--sf-text); font-weight: 600;
}

/* =========================================================================
   Footer (4-column, dark with a thin gold rule on top of the legal bar)
   ========================================================================= */

.sf-footer {
    background: linear-gradient(180deg, var(--sf-coal) 0%, var(--sf-black) 100%);
    border-top: 1px solid var(--sf-vein);
    padding: 3rem 0 0;
    margin-top: 4.05rem;
    position: relative;
}
.sf-footer::before {
    content: "";
    position: absolute; left: 0; right: 0; top: -1px; height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--sf-gold) 30%, var(--sf-gold) 70%, transparent 100%);
    opacity: 0.4;
}

.sf-footer__cols {
    display: grid;
    gap: 2.025rem;
    grid-template-columns: 1fr;
    padding-bottom: 3rem;
}
@media (min-width: 720px) {
    .sf-footer__cols { grid-template-columns: 1.4fr 1fr 1.4fr 1fr; }
}

.sf-footer__col { min-width: 0; }

.sf-footer__brand .sf-brand__mark--sm { color: var(--sf-gold); display: inline-flex; margin-bottom: 0.6rem; }
.sf-footer__brand-name { color: var(--sf-text); margin: 0 0 0.1875rem; font-family: var(--sf-font-display); font-size: 1.05rem; }
.sf-footer__brand-sub { color: var(--sf-text-mute); font-size: 0.675rem; letter-spacing: 0.1725em; text-transform: uppercase; margin: 0 0 1.2rem; }
.sf-footer__cta { display: inline-flex; padding: 0.45rem 0.9rem; font-size: 0.825rem; }

.sf-footer__title {
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.18em;
    color: var(--sf-gold); margin: 0 0 1.05rem; font-family: var(--sf-font-display); font-weight: 600;
}

.sf-footer__list { list-style: none; padding: 0; margin: 0; }
.sf-footer__list li { padding: 0.0375rem 0; line-height: 1.4; }
.sf-footer__list a {
    color: var(--sf-text-soft);
    font-size: 0.9rem;
    transition: color 0.15s ease;
}
.sf-footer__list a:hover { color: var(--sf-gold-bright); text-decoration: none; }

.sf-footer__topics a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
}
.sf-footer__muted { color: var(--sf-text-faint); font-size: 0.825rem; font-style: italic; }
.sf-footer__extra { margin-top: 1.05rem; padding-top: 1.05rem; border-top: 1px solid var(--sf-vein); }

/* Forum stats DL we built earlier: tighten in the footer column */
.sf-footer__col .sf-stats { font-size: 0.825rem; }

.sf-footer__legal {
    border-top: 1px solid var(--sf-vein);
    padding: 1.275rem 0;
    background: var(--sf-black);
}
.sf-footer__legal-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem 1.5rem;
    font-size: 0.78rem;
    color: var(--sf-text-mute);
}
.sf-footer__legal-inner p { margin: 0; }
.sf-footer__legal-meta { color: var(--sf-text-faint); font-size: 0.75rem; }
.sf-footer__credit {
    color: var(--sf-text-faint);
    font-size: 0.75rem;
    margin: 0 !important;
    margin-left: auto !important;
    text-align: right;
    white-space: nowrap;
}
.sf-footer__credit a {
    color: var(--sf-text-soft);
    text-decoration: none;
    transition: color 0.15s ease;
}
.sf-footer__credit a:hover { color: var(--sf-gold-bright); }

/* Hide Kunena's "Time to create page: 0.004s" footer line */
body.sf-body #kunena .layout--footer,
body.sf-body #kunena .pull-right .float-right,
body.sf-body #kunena .processing-time,
body.sf-body #kunena .page-creation-time { display: none !important; }

/* Footer overrides — fix CTA contrast + general polish */

/* The "Create an account" gold CTA in the footer was inheriting the
   .sf-footer__col a { color: var(--sf-text-soft) } rule, making the
   gold button read with light-grey text. Restore the button's black text. */
.sf-footer .sf-btn--gold,
.sf-footer .sf-btn--gold:link,
.sf-footer .sf-btn--gold:visited {
    color: var(--sf-black) !important;
}
.sf-footer .sf-btn--gold:hover {
    color: var(--sf-black) !important;
    background: var(--sf-gold-bright);
}

/* Brand sub in footer: single line, no justify wrapping */
.sf-footer__brand-sub {
    font-size: 0.675rem;
    letter-spacing: 0.1725em;
    margin-bottom: 1.2rem;
    white-space: nowrap;
    max-width: none;
}

/* Active pagination "1" was inheriting gold link color via #kunena a !important.
   Force black on the <a> element directly. */
body.sf-body #kunena .pagination .page-item.active a.page-link,
body.sf-body #kunena .pagination .active > a.page-link,
body.sf-body #kunena a.page-link.active,
body.sf-body .pagination .page-item.active a,
body.sf-body .pagination li.active a {
    color: var(--sf-black) !important;
    background: var(--sf-gold) !important;
    border-color: var(--sf-gold) !important;
    font-weight: 700 !important;
}

/* Quote / "Replied by ... on topic ..." header in posts.
   Default Aurelia uses rgba(229,229,229,0.4) which reads as light grey on dark. */
body.sf-body #kunena .mykmsg-header {
    background: var(--sf-stone-3) !important;
    color: var(--sf-text-soft) !important;
    font-weight: 500 !important;
    border-radius: var(--sf-radius) var(--sf-radius) 0 0 !important;
    border: 1px solid var(--sf-vein) !important;
    border-bottom: 0 !important;
}
body.sf-body #kunena .mykmsg-header em { color: var(--sf-gold-bright); font-style: normal; font-weight: 600; }
body.sf-body #kunena .mykmsg-header a { color: var(--sf-gold-bright) !important; }

/* Hide the orange Kunena RSS / large-kicon block at the top-right of topics */
body.sf-body #kunena .pull-right.large-kicon,
body.sf-body #kunena .large-kicon { display: none !important; }

/* Sidebar Latest topics panel: visible only on desktop (>= 992px) */
.sf-side-recent { margin-bottom: 1.5rem; }
.sf-side-recent__list { list-style: none; padding: 0; margin: 0; }
.sf-side-recent__list li { padding: 0.3375rem 0; border-bottom: 1px solid var(--sf-vein); }
.sf-side-recent__list li:last-child { border-bottom: 0; }
.sf-side-recent__list a {
    display: block;
    color: var(--sf-text-soft);
    font-size: 0.8925rem;
    line-height: 1.35;
    overflow-wrap: break-word;
    word-break: break-word;
}
.sf-side-recent__list a:hover { color: var(--sf-gold-bright); }

/* Hide entire right sidebar below 992px so the forum content isn't squeezed */
@media (max-width: 991px) {
    body.sf-body .sf-sidebar--right { display: none; }
    body.sf-body.has-sidebar .sf-layout { grid-template-columns: 1fr !important; }
}

/* Layout: when sidebar is on, content + sidebar grid */
body.sf-body .sf-layout { display: grid; gap: 2.025rem; grid-template-columns: 1fr; }
@media (min-width: 992px) {
    body.sf-body.is-home .sf-layout,
    body.sf-body.option-kunena .sf-layout {
        grid-template-columns: 1fr 280px;
    }
}

/* Hide Kunena's "Board Categories" jump dropdown form on category pages.
   It's redundant once the user is already inside a category — the breadcrumb
   above and the sub-category cards below cover navigation. */
body.sf-body #kunena form:has(> div > select#catid),
body.sf-body #kunena #catid,
body.sf-body #kunena select#catid {
    display: none !important;
}

/* Note: Kunena breadcrumb display is handled later in this file, near
   the bottom — kept visible on topic + category pages, hidden on home. */

/* Section card header: leave Kunena's natural styling. Don't try to force-
   match the sidebar height — they're different elements with different
   purposes and forcing alignment makes the section header feel inflated. */

/* Hide the per-subcategory orange RSS icons in the category list rows.
   Inline styled (transform/color), so we hide the wrapping <a> that holds
   the bi-rss SVG. */
body.sf-body #kunena tr td h3 small a:has(> svg.bi-rss),
body.sf-body #kunena h3 small a:has(> svg.bi-rss),
body.sf-body #kunena svg.bi-rss { display: none !important; }

/* =========================================================================
   FULL RESPONSIVE PASS (mobile-first overrides applied at breakpoints)
   Breakpoints: 480 (small phone), 720 (large phone), 992 (tablet), 1200 (desktop)
   ========================================================================= */

/* --- Container fluid below 1200px so we use full viewport width on tablets --- */
@media (max-width: 1199px) {
    .sf-container { padding: 0 1.05rem; }
}

/* --- HEADER --- */

@media (max-width: 991px) {
    .sf-header__inner {
        flex-wrap: wrap;
        gap: 0.45rem;
        min-height: auto;
        padding: 0.675rem 0;
    }
    .sf-brand { order: 1; flex: 1 1 auto; }
    .sf-header__tools { order: 2; }
    .sf-nav { order: 3; flex: 1 1 100%; margin-top: 0.45rem; padding-top: 0.45rem; border-top: 1px solid var(--sf-vein); }
    .sf-nav ul { gap: 0; flex-wrap: wrap; }
    .sf-nav .menu .nav-item > a,
    .sf-nav .mod-menu .nav-item > a,
    .sf-nav a {
        padding: 0.45rem 0.6rem !important;
        font-size: 0.825rem !important;
    }
    /* Hide login/register text buttons; keep just the gold Join CTA */
    .sf-header__tools .sf-btn--ghost { display: none; }
}
@media (max-width: 480px) {
    .sf-brand__name { font-size: 0.9375rem; }
    .sf-brand__sub { font-size: 0.5625rem; letter-spacing: 0.12em; }
    .sf-brand__mark { width: 30px; height: 30px; }
    .sf-brand__mark svg { width: 30px; height: 30px; }
    .sf-nav .menu .nav-item > a,
    .sf-nav .mod-menu .nav-item > a,
    .sf-nav a { padding: 0.3375rem 0.45rem !important; font-size: 0.825rem !important; }
    .sf-header__tools .sf-btn { padding: 0.45rem 0.675rem; font-size: 0.8325rem; }
}

/* --- HERO is gone, but cover any future use --- */
@media (max-width: 720px) {
    .sf-hero { padding: 3rem 0 2.025rem; }
    .sf-hero__title { font-size: 2.025rem; }
    .sf-hero__c60 { display: none; }
}

/* --- MAIN LAYOUT --- */
@media (max-width: 991px) {
    body.sf-body .sf-layout { grid-template-columns: 1fr !important; gap: 1.5rem; }
    body.sf-body .sf-sidebar--right,
    body.sf-body .sf-sidebar--left { display: none !important; }
    .sf-main { padding: 1.5rem 0 2.5312rem; }
}

/* --- FOOTER 4 -> 2 -> 1 columns --- */
@media (max-width: 991px) {
    .sf-footer__cols { grid-template-columns: 1fr 1fr !important; gap: 2.025rem; }
    .sf-footer { padding-top: 2.5312rem; margin-top: 2.5312rem; }
}
@media (max-width: 480px) {
    .sf-footer__cols { grid-template-columns: 1fr !important; gap: 1.5rem; }
    /* Keep flex-row even at narrow widths; let the inner mod-custom rule
       handle wrap so weblio.no can margin-left:auto to the far right. */
    .sf-footer__legal-inner { flex-direction: row; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
}

/* --- KUNENA FORUM TABLES: the big one. Default Kunena renders wide tables
       that overflow on mobile. Force them into block-stacked rows. --- */

@media (max-width: 720px) {
    body.sf-body #kunena .table,
    body.sf-body #kunena table.table-responsive {
        display: block;
        width: 100%;
    }
    body.sf-body #kunena .table thead { display: none; }
    body.sf-body #kunena .table tbody,
    body.sf-body #kunena .table tr {
        display: block;
        width: 100%;
    }
    body.sf-body #kunena .table tbody tr {
        border-bottom: 1px solid var(--sf-vein);
        padding: 0.75rem 0.45rem;
    }
    body.sf-body #kunena .table tbody td {
        display: block !important;
        padding: 0.225rem 0.45rem !important;
        border: 0 !important;
        background: transparent !important;
    }
    /* Hide leading icon column on mobile */
    body.sf-body #kunena .table tbody td:first-child:has(svg.bi-folder),
    body.sf-body #kunena #kcat-icon { display: none !important; }
    /* Last-post column compresses */
    body.sf-body #kunena .table tbody td .moveup { display: inline-block; margin-right: 0.45rem; }
}

/* Forum post on mobile: avatar column stacks above message body */
@media (max-width: 720px) {
    body.sf-body #kunena .row.message {
        flex-direction: column;
    }
    body.sf-body #kunena .row.message > .col-md-2 {
        max-width: none;
        flex-basis: auto;
        margin-bottom: 0.75rem;
    }
    body.sf-body #kunena .row.message > .col-md-10 {
        padding: 1.275rem !important;
    }
    body.sf-body #kunena .profilebox {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.45rem;
        justify-content: flex-start;
    }
    body.sf-body #kunena .profilebox li {
        display: inline-flex;
        padding: 0.225rem 0.45rem !important;
        text-align: left;
    }
    body.sf-body #kunena .topic-starter,
    body.sf-body #kunena .topic-author {
        font-size: 0.6rem !important;
        padding: 0.1875rem 0.45rem !important;
    }
}

/* Hide Kunena's "Moderators: ..." line on category index — at all widths. */
body.sf-body #kunena div.moderators { display: none !important; }


/* Tablet (721-991px): the .col-md-2 avatar column is narrow but the badge
   keeps its desktop padding+letter-spacing, so "TOPIC AUTHOR" overflows the
   gold-bordered profile box. Shrink it here. */
@media (min-width: 721px) and (max-width: 991px) {
    body.sf-body #kunena .topic-starter,
    body.sf-body #kunena .topic-author {
        font-size: 0.5625rem !important;
        letter-spacing: 0.06em !important;
        padding: 3.6px 6px !important;
    }
}

/* Section card-headers on mobile */
@media (max-width: 720px) {
    body.sf-body #kunena .card-header {
        padding: 0.6rem 0.825rem !important;
    }
    body.sf-body #kunena .card-header a { font-size: 1.05rem; }
    body.sf-body #kunena .card-header small { font-size: 0.675rem; }
    body.sf-body #kunena h1 { font-size: 1.425rem; }
    body.sf-body #kunena h2 { font-size: 1.125rem; }
}

/* Hide the float-end search/btn-toolbar on mobile inside topic header */
@media (max-width: 720px) {
    body.sf-body #kunena .float-end h2,
    body.sf-body #kunena h2.float-end,
    body.sf-body #kunena .btn-toolbar.float-end .kunena-search,
    body.sf-body #kunena .btn-toolbar.float-end form {
        float: none !important;
        display: block;
        margin: 0.75rem 0;
    }
    body.sf-body #kunena .btn-toolbar.float-end {
        float: none !important;
        margin-top: 0.45rem;
    }
    body.sf-body #kunena .float-start { float: none !important; }
}

/* Pagination on mobile: tighten and wrap */
@media (max-width: 480px) {
    body.sf-body .pagination { flex-wrap: wrap; gap: 0.1875rem; }
    body.sf-body .pagination .page-link { padding: 0.45rem 0.6rem; font-size: 0.825rem; }
}

/* Forms on mobile: full width, larger touch targets */
@media (max-width: 720px) {
    body.sf-body input[type="text"],
    body.sf-body input[type="email"],
    body.sf-body input[type="password"],
    body.sf-body input[type="search"],
    body.sf-body input[type="url"],
    body.sf-body textarea,
    body.sf-body select {
        width: 100%;
        font-size: 15.6px;  /* prevents iOS zoom on focus */
        padding: 0.7rem 0.9rem;
    }
    body.sf-body .com-users-login,
    body.sf-body .com-users-registration,
    body.sf-body .com-users-profile,
    body.sf-body .com-users-reset,
    body.sf-body .com-users-remind,
    body.sf-body form#member-registration {
        max-width: 100%;
        margin: 1.05rem 0;
        padding: 1.275rem;
    }
}

/* Topic-row layout on mobile (the "23 minutes ago" / "by burt" meta line) */
@media (max-width: 720px) {
    body.sf-body #kunena .row.message > .col-md-10 small.float-end {
        float: none !important;
        display: block;
        margin: 0 0 0.75rem;
        font-size: 0.78rem;
    }
}

/* Kunena breadcrumb: shown at top of every Kunena page EXCEPT Home (view=home).
   Native Kunena renders it inside the page near the bottom — we re-position it
   to the top of the kunena container using flex order. Hidden on the forum
   index since that's already "you are here". */
body.sf-body #kunena {
    display: flex !important;
    flex-direction: column;
}
body.sf-body #kunena nav.pagination-container-links {
    order: -1;
    margin: 0 0 1.275rem !important;
    padding: 0 !important;
    background: transparent !important;
}
body.sf-body #kunena .mod-kunena-breadcrumbs {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    font-size: 0.825rem;
    color: var(--sf-text-faint);
}
body.sf-body #kunena .mod-kunena-breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}
body.sf-body #kunena .mod-kunena-breadcrumbs__item + .mod-kunena-breadcrumbs__item::before {
    content: "/";
    color: var(--sf-text-faint);
    opacity: 0.6;
    margin-right: 0.45rem;
}
body.sf-body #kunena .mod-kunena-breadcrumbs__item a {
    color: var(--sf-text-soft) !important;
    text-decoration: none;
}
body.sf-body #kunena .mod-kunena-breadcrumbs__item a:hover {
    color: var(--sf-gold-bright) !important;
}
body.sf-body #kunena .mod-kunena-breadcrumbs__item.active,
body.sf-body #kunena .mod-kunena-breadcrumbs__item[aria-current="page"] {
    color: var(--sf-text);
}
/* Hide the breadcrumb on the forum index (view=home) — redundant there. */
body.sf-body.view-home #kunena nav.pagination-container-links,
body.sf-body.is-home #kunena nav.pagination-container-links {
    display: none !important;
}

/* Generic: no horizontal scroll anywhere */
body.sf-body { overflow-x: hidden; }
body.sf-body img { max-width: 100%; height: auto; }
body.sf-body iframe { max-width: 100%; }

/* Code blocks should scroll horizontally rather than break the layout */
body.sf-body pre,
body.sf-body code,
body.sf-body .kmsg pre {
    overflow-x: auto;
    word-break: break-word;
    max-width: 100%;
}

/* Long URLs in posts wrap */
body.sf-body #kunena .kmsg a,
body.sf-body #kunena .kmsg .bbcode_url {
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Mobile hero CTA buttons stack */
@media (max-width: 480px) {
    .sf-hero__cta { flex-direction: column; align-items: stretch; }
    .sf-btn--lg { width: 100%; }
}

/* Sidebar latest-topics card on mobile (when shown) gets natural width */
.sf-side-recent { box-sizing: border-box; }

/* Skip link visible properly on mobile too */
.sf-skip:focus { left: 0.45rem; top: 0.45rem; right: 0.45rem; }

/* =========================================================================
   HAMBURGER (mobile nav drawer)
   ========================================================================= */

.sf-hamburger {
    display: none;
    width: 40.5px; height: 40.5px;
    background: transparent;
    border: 1px solid var(--sf-vein);
    border-radius: var(--sf-radius);
    cursor: pointer;
    padding: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3.6px;
    margin-left: auto;
    transition: border-color 0.15s ease;
}
.sf-hamburger:hover { border-color: var(--sf-gold); }
.sf-hamburger__bar {
    display: block;
    width: 18px; height: 2px;
    background: var(--sf-text);
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.sf-hamburger[aria-expanded="true"] .sf-hamburger__bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
.sf-hamburger[aria-expanded="true"] .sf-hamburger__bar:nth-child(2) {
    opacity: 0;
}
.sf-hamburger[aria-expanded="true"] .sf-hamburger__bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* Mobile (< 992px): swap horizontal nav for hamburger drawer */
@media (max-width: 991px) {
    .sf-hamburger { display: flex; }
    .sf-header__inner { flex-wrap: nowrap; }
    .sf-brand { flex: 1 1 auto; }
    .sf-header__tools { display: none; }   /* drawer carries the auth links */
    .sf-nav {
        position: fixed;
        top: 0; right: 0; bottom: 0;
        width: 279.9px; max-width: 80vw;
        background: var(--sf-stone-3);
        border-left: 1px solid rgba(201,169,110,0.18);
        padding: 4.95rem 1.275rem 2.025rem;
        transform: translateX(100%);
        transition: transform 0.25s ease;
        z-index: 200;
        overflow-y: auto;
        box-shadow: -10px 0 40px rgba(0,0,0,0.5);
        flex: none;
        margin-top: 0;
        border-top: 0;
    }
    .sf-nav.is-open { transform: translateX(0); }
    .sf-nav ul { flex-direction: column; gap: 0; }
    .sf-nav .menu .nav-item,
    .sf-nav .mod-menu .nav-item,
    .sf-nav .nav-item {
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .sf-nav .menu .nav-item > a,
    .sf-nav .mod-menu .nav-item > a,
    .sf-nav a {
        display: block;
        padding: 0.825rem 0.45rem !important;
        font-size: 1.05rem !important;
        width: 100%;
        color: var(--sf-text) !important;
        font-weight: 500;
    }
    .sf-nav .menu .nav-item.current > a,
    .sf-nav .mod-menu .nav-item.current > a,
    .sf-nav .nav-item.active > a {
        color: var(--sf-gold) !important;
    }
    .sf-nav .menu .nav-item > a:hover,
    .sf-nav .mod-menu .nav-item > a:hover,
    .sf-nav a:hover {
        color: var(--sf-gold-bright) !important;
    }

    /* Drawer is a flex column; auth buttons go ABOVE the menu items
       (primary CTAs at top), nav items below. */
    .sf-nav { display: flex; flex-direction: column; }
    .sf-nav__actions { order: 1; }
    .sf-nav > ul.mod-menu,
    .sf-nav > ul#mod-menu1,
    .sf-nav .moduletable { order: 2; }

    /* Mobile drawer action buttons (New Topic, Sign in/Sign out, Join).
       Shown ONLY in mobile drawer; hidden on desktop. Stacked vertically
       at the top of the drawer, separated from menu links by a vein
       border, so they read as actions, not nav. */
    .sf-nav__actions {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        margin-bottom: 1.275rem;
        padding-bottom: 1.275rem;
        border-bottom: 1px solid var(--sf-vein);
    }
    .sf-nav__actions .sf-nav__btn {
        display: flex !important;
        width: 100%;
        padding: 0.75rem 1.05rem !important;
        font-size: 0.9375rem !important;
        font-weight: 600;
        text-align: center;
        justify-content: center;
        line-height: 1;
        border-radius: var(--sf-radius);
    }
    .sf-nav__actions .sf-btn--gold.sf-nav__btn {
        background: var(--sf-gold) !important;
        color: var(--sf-coal) !important;
        border: 1px solid var(--sf-gold) !important;
    }
    .sf-nav__actions .sf-btn--ghost.sf-nav__btn {
        background: transparent !important;
        color: var(--sf-text-soft) !important;
        border: 1px solid var(--sf-vein) !important;
    }
    /* Drawer search input — sits above the action buttons inside .sf-nav__actions */
    .sf-nav__search {
        display: flex;
        align-items: stretch;
        background: var(--sf-stone-3);
        border: 1px solid var(--sf-vein);
        border-radius: var(--sf-radius);
        overflow: hidden;
    }
    .sf-nav__search input[type="search"] {
        flex: 1 1 auto;
        background: transparent !important;
        border: 0 !important;
        color: var(--sf-text) !important;
        font-size: 0.9rem !important;
        padding: 0.675rem 0.9rem !important;
        min-width: 0;
        appearance: none;
        outline: none;
    }
    .sf-nav__search input[type="search"]::placeholder {
        color: var(--sf-text-mute);
    }
    .sf-nav__search button {
        flex: 0 0 auto;
        background: transparent !important;
        border: 0 !important;
        border-left: 1px solid var(--sf-vein) !important;
        color: var(--sf-text-soft) !important;
        padding: 0 0.9rem !important;
        cursor: pointer;
        transition: color 0.15s ease, background 0.15s ease;
    }
    .sf-nav__search button:hover {
        color: var(--sf-gold-bright) !important;
        background: rgba(201, 169, 110, 0.06) !important;
    }
}
/* Hide drawer search on desktop — sidebar already has search */
@media (min-width: 992px) {
    .sf-nav__search { display: none !important; }
}
/* Hide drawer action buttons on desktop — same actions live in
   .sf-header__tools at this breakpoint, so showing both would duplicate. */
@media (min-width: 992px) {
    .sf-nav__actions { display: none; }
}

/* Mobile drawer behaviour (< 992px) — backdrop, body lock, z-index, and the
   critical backdrop-filter override on the sticky header. Without the
   backdrop-filter override the fixed drawer is contained-block-trapped inside
   the header and gets overlapped by the main content area (see Blueprint
   Part 3, "backdrop-filter on sticky nav breaks mobile menu"). */
@media (max-width: 991px) {
    /* Body backdrop when drawer open. Pointer-events: none so clicks pass to
       menu links above; outer document-click handler catches taps on the
       backdrop area to close the drawer. */
    body.sf-nav-open::after {
        content: "";
        position: fixed; inset: 0;
        background: rgba(0,0,0,0.35);
        z-index: 150;
        opacity: 1;
        transition: opacity 0.25s ease;
        pointer-events: none;
    }
    body.sf-nav-open { overflow: hidden; }
    /* Ensure drawer + its contents are clickable (above backdrop z-index 150,
       below z-index of any modal). */
    .sf-nav { z-index: 200; }
    .sf-nav.is-open,
    .sf-nav.is-open * { pointer-events: auto !important; }
    .sf-nav .nav-item > a {
        position: relative;
        z-index: 1;
        cursor: pointer;
    }

    /* Sticky header must NOT have backdrop-filter on mobile, otherwise the
       fixed drawer is contained-block-trapped inside the header. */
    .sf-header {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(10, 10, 10, 0.97);
    }
}

/* Footer 3-col layout with wide center: brand (1fr), latest-topics (2fr), sections (1fr) */
@media (min-width: 720px) {
    body.sf-body .sf-footer__cols--3 { grid-template-columns: 1fr 2fr 1fr !important; }
    body.sf-body .sf-footer__cols--4 { grid-template-columns: 1fr 2fr 1fr 1fr !important; }
}
/* Latest topics title length cap (mod_kunenalatest config sets 50, but
   the wider column lets us show more — bump truncation visually) */
body.sf-body .sf-footer .mod-kunenalatest a,
body.sf-body .sf-footer__col .latestlist a {
    white-space: normal;
    overflow-wrap: break-word;
}

/* =========================================================================
   FOOTER MODULE STYLING (mod_kunenalatest + mod_menu in footer)
   ========================================================================= */

/* mod_kunenalatest in footer: list reset only.
   Visual styling consolidated below in the polish-pass block. */
body.sf-body .sf-footer .klatest,
body.sf-body .sf-footer .klatest-items,
body.sf-body .sf-footer .klatest-itemdetails {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* mod_menu in footer: clean vertical list, themed like other footer lists.
   gap MUST be 0 — any gap between LIs adds vertical drift between rows,
   making this column taller per-row than the Latest Topics column. */
body.sf-body .sf-footer .mod-menu,
body.sf-body .sf-footer ul.nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
    gap: 0 !important;
    row-gap: 0 !important;
}
body.sf-body .sf-footer .mod-menu .nav-item {
    list-style: none;
    padding: 0;
}
body.sf-body .sf-footer .mod-menu a {
    display: block;
    padding: 0.225rem 0;
    color: var(--sf-text-soft) !important;
    font-size: 0.9075rem;
    font-weight: 500;
}
body.sf-body .sf-footer .mod-menu a:hover {
    color: var(--sf-gold-bright) !important;
    text-decoration: none;
}
body.sf-body .sf-footer .mod-menu .current > a,
body.sf-body .sf-footer .mod-menu .active > a {
    color: var(--sf-gold-bright) !important;
}

/* Each footer column gets a title from sf_footer chrome — make sure the
   mod-menu wrapping ul doesn't collide with title spacing */
body.sf-body .sf-footer__col h3.sf-footer__title + ul.mod-menu,
body.sf-body .sf-footer__col h3.sf-footer__title + .klatest {
    margin-top: 0;
}

/* Hide the "Home" item in the footer Sections menu — it's a routing anchor */
body.sf-body .sf-footer .mod-menu .item-101 { display: none; }

/* (Spacing and alignment are set in the polish-pass block below.) */

/* =========================================================================
   FOOTER POLISH PASS — make the whole area cohesive
   ========================================================================= */

/* Top edge gold accent line that runs across, subtle */
.sf-footer { padding: 1.5rem 0 0 !important; margin-top: 0 !important; }
.sf-footer::before {
    content: "";
    position: absolute; left: 0; right: 0; top: -1px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--sf-gold) 50%, transparent);
    opacity: 0.35;
}

.sf-footer__cols {
    align-items: start;
    padding-bottom: 3rem !important;
}

/* All footer columns share the same baseline grid */
.sf-footer__col { padding: 0 0.225rem; }
.sf-footer__col > h3.sf-footer__title:first-child {
    margin-top: 0;
    margin-bottom: 1.125rem;
}

/* Brand column: tighten + center the mark vertically with the brand name */
.sf-footer__brand {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.sf-footer__brand svg { margin: 0 !important; }
.sf-footer__brand-name { font-size: 1.05rem; margin: 0 !important; }
.sf-footer__brand-sub {
    margin: 0 0 0.75rem !important;
    font-size: 0.675rem;
    letter-spacing: 0.1725em;
    color: var(--sf-text-mute);
}
.sf-footer__cta { margin-top: 0.225rem; align-self: flex-start; }

/* Latest topics column: align to the brand column's first text baseline.
   The brand column has a 28px svg + 0.5rem gap before the brand name.
   The latest-topics column has nothing above the first item. So push the
   list down by ~36px so its first row lines up with the brand name. */
@media (min-width: 720px) {
    body.sf-body .sf-footer__cols .sf-footer__col:nth-child(2) > * {
        margin-top: 2.4rem;  /* aligns first topic with brand name */
    }
    body.sf-body .sf-footer__cols .sf-footer__col:nth-child(3) > * {
        margin-top: 2.4rem;  /* aligns Sections list with brand name */
    }
}

/* Both footer modules (Latest Topics + Sections menu) — identical row styling.
   The LI gets only the bottom-border. The padding lives on the inner <a> so
   both modules use the SAME box model and rows align horizontally. */

/* Strip everything from the LIs so only the border remains.
   FIXED HEIGHT on every row so the math is deterministic — no drift
   from sub-pixel border widths or any padding inheritance. The link
   inside fills the whole 38px box. */
body.sf-body .sf-footer .klatest-item,
body.sf-body .sf-footer .mod-menu .nav-item {
    padding: 0 !important;
    margin: 0 !important;
    height: 38.1px !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid var(--sf-vein) !important;
    list-style: none !important;
    overflow: hidden !important;
}

/* Hide Recent from the footer Forum Menu only — it's already in the header,
   and the footer's Latest Topics column already shows recent activity. This
   also makes the footer Forum Menu = 7 items, matching Latest Topics = 7,
   so both columns align perfectly row-for-row top to bottom. */
body.sf-body .sf-footer #mod-menu121 .item-151 {
    display: none !important;
}

body.sf-body .sf-footer .klatest-item:last-child,
body.sf-body .sf-footer .mod-menu .nav-item:last-child {
    border-bottom: 0 !important;
}

/* Hide the topic icon — titles start at the column edge */
body.sf-body .sf-footer .klatest-topicicon { display: none !important; }
body.sf-body .sf-footer .klatest-itemdetails {
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
}
body.sf-body .sf-footer .klatest-subject {
    padding: 0 !important;
    margin: 0 !important;
    flex: 1 1 auto;
    min-width: 0;
}

/* The inner link in BOTH modules uses ONE identical rule, single style.
   display:block + nowrap + ellipsis means every row is exactly the same
   height across both columns regardless of title length, so rows align
   100% horizontally from top to bottom. Long topic titles get truncated
   with … rather than wrapping. */
body.sf-body .sf-footer .klatest-subject a,
body.sf-body .sf-footer .klatest-subject a.topictitle,
body.sf-body .sf-footer .mod-menu a {
    display: block !important;
    padding: 0.45rem 0 !important;
    margin: 0 !important;
    font-size: 0.8925rem !important;
    line-height: 1.5 !important;
    color: var(--sf-text-soft) !important;
    font-weight: 400 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: normal !important;
    transition: color 0.18s ease;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
}
body.sf-body .sf-footer .klatest-item:hover .klatest-subject a,
body.sf-body .sf-footer .mod-menu a:hover { color: var(--sf-gold-bright) !important; }

/* PHONE ONLY (<= 720px): wrap Latest Topic titles to 3 lines so long titles
   like "Shungite removes 90% of cesium and 97% of strontium..." don't clip.
   Must come AFTER the desktop single-line rule for cascade order. */
@media (max-width: 720px) {
    body.sf-body .sf-footer .klatest-subject a,
    body.sf-body .sf-footer .klatest-subject a.topictitle {
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        white-space: normal !important;
        text-overflow: clip !important;
        line-height: 1.4 !important;
        word-break: break-word !important;
        overflow: hidden !important;
    }
    body.sf-body .sf-footer .klatest-item {
        height: auto !important;
        min-height: 38.1px !important;
        padding: 0.225rem 0 !important;
        overflow: visible !important;
    }
}

/* TABLET ONLY (721-991px): allow up to 3 lines on footer latest-topics
   titles. Single-line ellipsis is too aggressive at this width because
   the column is narrow but the viewport accommodates a few extra lines.
   Must come AFTER the desktop single-line rule for cascade order. */
@media (min-width: 721px) and (max-width: 991px) {
    body.sf-body .sf-footer .klatest-subject a,
    body.sf-body .sf-footer .klatest-subject a.topictitle {
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        white-space: normal !important;
        text-overflow: clip !important;
        line-height: 1.4 !important;
        word-break: break-word !important;
        overflow: hidden !important;
    }
    body.sf-body .sf-footer .klatest-item {
        height: auto !important;
        min-height: 38.1px !important;
        padding: 0.225rem 0 !important;
        overflow: visible !important;
    }

    /* Hide footer brand SVG on tablet (the header brand mark is enough at
       this size). Use visibility:hidden, not display:none, so the SVG keeps
       its 32px+0.6rem-margin box and "Shungite Forum" stays at the same
       vertical position relative to the rest of the footer column. Add a
       small extra top offset so the brand-name lines up with adjacent
       columns the way it did before the SVG was hidden. */
    body.sf-body .sf-footer .sf-footer__brand svg,
    body.sf-body .sf-footer #mod-custom119 svg { visibility: hidden !important; }
    body.sf-body .sf-footer .sf-footer__brand { padding-top: 0.45rem !important; }
}

/* PHONE + TABLET (<= 991px): non-klatest mobile-friendly tweaks that should
   apply at both small breakpoints. */
@media (max-width: 991px) {
    /* Hide the topic-level Action dropdown (mod/lock/sticky/etc.) on phone
       and tablet. Takes up space at the top of every topic page without
       offering much value; per-post action toolbars remain available. */
    body.sf-body #kunena #topic-actions-toolbar {
        display: none !important;
    }

    /* Search box on phone/tablet: stretch to fill the column instead of
       sitting narrow next to nothing. */
    body.sf-body .sf-sidebar .mod-finder,
    body.sf-body .sf-sidebar .mod-search,
    body.sf-body .sf-sidebar #mod-search-searchword,
    body.sf-body .sf-sidebar form[role="search"],
    body.sf-body .sf-sidebar .input-group {
        width: 100% !important;
        max-width: 100% !important;
    }
    body.sf-body .sf-sidebar #mod-search-searchword.form-control {
        flex: 1 1 0% !important;
        min-width: 0 !important;
        width: auto !important;
    }
}

/* Hide Kunena's built-in breadcrumb everywhere — it only shows the leaf
   segment (e.g. "Media" on /podcasts) with no ancestor chain. We use
   Joomla core mod_breadcrumbs in `above-content` instead, which walks
   the full menu tree and gives a real navigation trail. */
body.sf-body #kunena nav.pagination-container-links ol.mod-kunena-breadcrumbs,
body.sf-body #kunena nav.pagination-container-links:has(.mod-kunena-breadcrumbs) {
    display: none !important;
}

/* Joomla core breadcrumbs styled for dark theme. Module 17 lives in the
   above-content position with class suffix .sf-breadcrumbs. Hidden on the
   real home page (root URL) since there's no path to show. */
body.sf-body.is-home .moduletable.sf-breadcrumbs,
body.sf-body.is-home .mod-breadcrumbs {
    display: none !important;
}
body.sf-body .moduletable.sf-breadcrumbs,
body.sf-body .mod-breadcrumbs {
    margin: 0 0 1.275rem 0;
    padding: 0;
    background: none;
    border: 0;
}
body.sf-body .mod-breadcrumbs__wrapper,
body.sf-body ol.mod-breadcrumbs,
body.sf-body ol.breadcrumb {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    font-size: 0.8325rem;
    color: var(--sf-text-mute);
    background: none;
}
body.sf-body ol.mod-breadcrumbs li,
body.sf-body ol.breadcrumb li.breadcrumb-item {
    display: inline-flex;
    align-items: center;
    color: var(--sf-text-mute);
}
body.sf-body ol.mod-breadcrumbs li + li::before,
body.sf-body ol.breadcrumb li.breadcrumb-item + li.breadcrumb-item::before {
    content: "›";
    color: var(--sf-vein-light);
    margin-right: 0.45rem;
    font-size: 0.9375rem;
    line-height: 1;
}
body.sf-body ol.mod-breadcrumbs li a,
body.sf-body ol.breadcrumb li.breadcrumb-item a {
    color: var(--sf-text-soft);
    text-decoration: none;
    transition: color 0.15s ease;
}
body.sf-body ol.mod-breadcrumbs li a:hover,
body.sf-body ol.breadcrumb li.breadcrumb-item a:hover {
    color: var(--sf-gold);
}
body.sf-body ol.mod-breadcrumbs li.active,
body.sf-body ol.breadcrumb li.breadcrumb-item.active {
    color: var(--sf-text);
    font-weight: 500;
}

/* On Kunena topic view, hide the redundant active breadcrumb item (the topic
   title is already shown as the page H1). Keep the folder trail and add a
   trailing chevron after the new last visible item. */
body.sf-body.option-kunena.view-topic ol.mod-breadcrumbs li.breadcrumb-item.active {
    display: none;
}
body.sf-body.option-kunena.view-topic ol.mod-breadcrumbs li.breadcrumb-item:not(.active):last-of-type::after {
    content: "›";
    color: var(--sf-vein-light);
    margin-left: 0.45rem;
    font-size: 0.9375rem;
    line-height: 1;
}

/* Footer legal bar: refined */
.sf-footer__legal {
    margin-top: 0;
    padding: 1.5rem 0 !important;
    border-top: 1px solid var(--sf-vein);
    background: rgba(0,0,0,0.3);
}
/* Legal bar spans full viewport width so credit can float to the far right.
   Override .sf-container max-width that's also applied via the markup. */
.sf-footer__legal-inner.sf-container {
    max-width: 1200px !important;
    padding-left: 2.025rem !important;
    padding-right: 2.025rem !important;
    margin: 0 auto !important;
}
.sf-footer__legal-inner {
    font-size: 0.78rem;
    color: var(--sf-text-mute);
}
/* The three legal lines (©, contributions notice, weblio credit) live inside
   the footer-bottom mod-custom div. Lay them out as one row, with the credit
   pushed to the far right. */
/* Footer-bottom 2-row layout via CSS grid:
   Row 1: legal-meta disclaimer (centered, full width)
   Row 2: © (left) | Privacy/Terms/Cookies (center) | weblio.no (right)
   Single mod_custom with 4 <p> children, ordered: ©, legal-meta, links, credit. */
.sf-footer__legal-inner > div.mod-custom {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
        "meta  meta  meta"
        "copy  links credit";
    align-items: center;
    gap: 0.45rem 1.5rem;
    width: 100%;
}
.sf-footer__legal-inner > div.mod-custom > p { margin: 0 !important; }
.sf-footer__legal-inner > div.mod-custom > p:nth-of-type(1) { /* © */
    grid-area: copy;
    justify-self: start;
}
.sf-footer__legal-inner .sf-footer__legal-meta {
    grid-area: meta;
    justify-self: center;
    text-align: center;
}
.sf-footer__legal-inner .sf-footer__legal-links {
    grid-area: links;
    justify-self: center;
    text-align: center;
    margin: 0 !important;
}
.sf-footer__credit {
    grid-area: credit;
    justify-self: end;
    margin: 0 !important;
}
.sf-footer__legal-inner > div.mod-custom > p { margin: 0 !important; }
.sf-footer__legal-meta {
    color: var(--sf-text-faint) !important;
    font-size: 0.7275rem !important;
    text-align: left !important;
    max-width: 100%;
    margin: 0 !important;
    flex: 1 1 auto;
}
.sf-footer__credit {
    margin-left: auto !important;
    flex: 0 0 auto;
}
.sf-footer__legal-links {
    color: var(--sf-text-faint) !important;
    font-size: 0.7275rem !important;
    margin: 0 !important;
    flex: 0 0 auto;
}
.sf-footer__legal-links a {
    color: var(--sf-text-soft);
    text-decoration: none;
    transition: color 0.15s ease;
}
.sf-footer__legal-links a:hover { color: var(--sf-gold-bright); }

/* Mobile: collapse alignment offsets */
@media (max-width: 719px) {
    body.sf-body .sf-footer__cols .sf-footer__col:nth-child(2) > *,
    body.sf-body .sf-footer__cols .sf-footer__col:nth-child(3) > * {
        margin-top: 0 !important;
    }
    .sf-footer__legal-inner { flex-direction: row; align-items: center; flex-wrap: wrap; }
    .sf-footer__legal-meta { text-align: left; max-width: 100%; }
}

/* =========================================================================
   FOOTER ATMOSPHERE — fullerene/graphene hex lattice bg + warm core glow
   The hex pattern is a CSS conic-gradient stack approximating the C60 cage
   surface. Subtle (4-6% opacity) so it reads as texture, not decoration.
   ========================================================================= */

.sf-footer {
    overflow: hidden;
    isolation: isolate;
}

/* Hex lattice via two layered gradients offset to make hexagons.
   Encoded as inline SVG so it scales without raster artifacts. */
.sf-footer::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 96' fill='none' stroke='%23c9a96e' stroke-width='0.6' opacity='0.55'><polygon points='14,4 28,12 28,28 14,36 0,28 0,12'/><polygon points='42,4 56,12 56,28 42,36 28,28 28,12'/><polygon points='14,52 28,60 28,76 14,84 0,76 0,60'/><polygon points='42,52 56,60 56,76 42,84 28,76 28,60'/><polygon points='28,28 42,36 42,52 28,60 14,52 14,36'/></svg>");
    background-repeat: repeat;
    background-size: 84px 144px;
    opacity: 0.07;
    pointer-events: none;
    mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
}

/* Warm gold core glow that sits behind the hex grid */
.sf-footer::before {
    background:
        linear-gradient(90deg, transparent, var(--sf-gold) 50%, transparent) top/100% 1px no-repeat,
        radial-gradient(ellipse 60% 80% at 50% 100%, rgba(201,169,110,0.10), transparent 70%),
        radial-gradient(ellipse 30% 50% at 20% 0%, rgba(95,168,163,0.05), transparent 70%);
    opacity: 1;
    height: auto;
    bottom: 0;
}

/* Make sure footer cols sit above the bg layers */
.sf-footer__cols, .sf-footer__legal { position: relative; z-index: 1; }

/* C60 buckyball ghost in the footer — same front-face geometry as the header logo
   (1 pentagon + 5 hexagons), scaled and rotated slowly for atmosphere. */
.sf-footer .sf-footer__cols::after {
    content: "";
    position: absolute;
    right: -120px;
    bottom: -80.1px;
    width: 360px;
    height: 360px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23c9a96e' stroke-linecap='round' stroke-linejoin='round'><g stroke-width='0.45' stroke-opacity='0.9'><polygon points='32.00,22.37 33.18,11.11 43.53,6.51 52.68,13.16 51.50,24.42 41.16,29.02'/><polygon points='41.16,29.02 52.23,26.67 59.81,35.08 56.31,45.85 45.24,48.20 37.66,39.79'/><polygon points='37.66,39.79 43.32,49.59 37.66,59.40 26.34,59.40 20.68,49.59 26.34,39.79'/><polygon points='26.34,39.79 18.76,48.20 7.69,45.85 4.19,35.08 11.77,26.67 22.84,29.02'/><polygon points='22.84,29.02 12.50,24.42 11.32,13.16 20.47,6.51 30.82,11.11 32.00,22.37'/></g><polygon points='32.00,22.37 41.16,29.02 37.66,39.79 26.34,39.79 22.84,29.02' fill='%23c9a96e' fill-opacity='0.55' stroke='%23c9a96e' stroke-width='0.45' stroke-opacity='1'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.18;
    z-index: -1;
    pointer-events: none;
    animation: sf-footer-rotate 540s linear infinite;
}
@keyframes sf-footer-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .sf-footer .sf-footer__cols::after { animation: none; }
}

/* Make .sf-footer__cols positioned so the ::after anchors */
.sf-footer__cols { position: relative; }

/* Hide the buckyball ghost on small screens (it'd push horizontal scroll) */
@media (max-width: 720px) {
    .sf-footer .sf-footer__cols::after { display: none; }
    .sf-footer::after { opacity: 0.04; }
}

/* =========================================================================
   Category page polish
   ========================================================================= */

/* Category description: was rendered as an alert. Strip the alert chrome
   and present it as a plain subtitle. */
body.sf-body #kunena h1.alert.alert-info,
body.sf-body #kunena h1[id^="category-headerdesc"] {
    background: transparent !important;
    border: 0 !important;
    border-left: 3px solid var(--sf-gold) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0.45rem 0.825rem !important;
    margin: 0 0 1.05rem !important;
    font-size: 0.9375rem !important;
    font-weight: 400 !important;
    color: var(--sf-text-soft) !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
    font-family: var(--sf-font-body) !important;
}
body.sf-body #kunena h1.alert .btn-close { display: none !important; }

/* Hide the inline scroll-to-top/bottom arrow column in the topic table.
   Pure noise on a forum with short lists. */
body.sf-body #kunena form#categoryactions table th.center:first-child,
body.sf-body #kunena form#categoryactions table th[scope="row"].center,
body.sf-body #kunena form#categoryactions table td.center.d-md-table-cell:first-child,
body.sf-body #kunena form#categoryactions table tfoot th.center:first-child {
    display: none !important;
}

/* Hide pagination Start/End/Prev/Next when only 1 page — when all four
   non-active items are .disabled, hide the whole nav. */
body.sf-body #kunena .pagination:has(.page-item.disabled:nth-child(1)):has(.page-item.disabled:nth-child(2)):has(.page-item.disabled:nth-child(4)):has(.page-item.disabled:nth-child(5)) {
    display: none;
}

/* Category page header: show "Science" as a clean page heading.
   Kunena uses .card-header h1 with a "66 topics" small inside. */
body.sf-body.option-kunena.view-category #kunena div.kfrontend > h1.card-header {
    display: block !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 0.6rem !important;
    font-size: clamp(1.25rem, 1.9vw, 1.55rem) !important;
    font-weight: 700 !important;
    font-family: var(--sf-font-display) !important;
    color: var(--sf-text) !important;
    letter-spacing: -0.0225em !important;
    line-height: 1.15 !important;
}
body.sf-body.option-kunena.view-category #kunena div.kfrontend > h1.card-header a {
    color: var(--sf-text) !important;
    text-decoration: none !important;
}
body.sf-body.option-kunena.view-category #kunena div.kfrontend > h1.card-header small {
    font-size: 0.5625em !important;
    font-weight: 400 !important;
    color: var(--sf-text-mute) !important;
    margin-left: 0.6rem !important;
    letter-spacing: 0 !important;
}
body.sf-body.option-kunena.view-category #kunena div.kfrontend.section {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Stronger hide for the scroll-arrow column — covers all rows */
body.sf-body #kunena form#categoryactions table tr > th:first-child,
body.sf-body #kunena form#categoryactions table tr > td:first-child {
    display: none !important;
}
/* Re-show the first child only when it's actually the icon column wrapper
   (don't kill subject rows). The above is too aggressive — instead target
   only cells with .center class which are the arrow columns. */
body.sf-body #kunena form#categoryactions table tr > th:first-child,
body.sf-body #kunena form#categoryactions table tr > td:first-child {
    display: revert !important;
}
body.sf-body #kunena form#categoryactions table tr > th.center:first-child:has(svg.bi-arrow-down),
body.sf-body #kunena form#categoryactions table tr > th.center:first-child:has(svg.bi-arrow-up),
body.sf-body #kunena form#categoryactions table tfoot tr > th.center:first-child {
    display: none !important;
}

/* Hide the pagination block when the active page sits between "Start/Prev"
   and "Next/End" all of which are .disabled (single-page list). */
body.sf-body #kunena nav.d-none.d-sm-block:has(ul.pagination li.page-item.disabled + li.page-item.disabled + li.page-item.active + li.page-item.disabled + li.page-item.disabled),
body.sf-body #kunena nav.d-block.d-sm-none:has(ul.pagination li.page-item.active:only-child) {
    display: none !important;
}

/* Hide Kunena's duplicate category-description blocks (they're already shown
   in the table header as `.bg-faded.p-2`). One source of truth. */
body.sf-body #kunena h1[id^="category-headerdesc"],
body.sf-body #kunena div[id^="category-headerdesc"],
body.sf-body #kunena div[id^="topic-item-category-headerdesc"],
body.sf-body #kunena .alert.alert-info[id*="headerdesc"] {
    display: none !important;
}

/* Bootstrap's default a:hover { text-decoration: underline } leaks into Kunena
   and the footer Latest Topics. Kill it everywhere and let our own hover
   styling (color shift / carbon-bond chain) carry the affordance. */
body.sf-body a:hover,
body.sf-body #kunena a:hover,
body.sf-body .klatest a:hover { text-decoration: none !important; }

/* =========================================================================
   Footer Latest Topics + Sections menu — make them feel alive
   ========================================================================= */

/* Brighter doc icons in Latest Topics, settle as gold hint */
body.sf-body .sf-footer .klatest-topicicon a,
body.sf-body .sf-footer .klatest-topicicon svg {
    color: var(--sf-gold-deep) !important;
    transition: color 0.15s ease;
}
body.sf-body .sf-footer .klatest-item:hover .klatest-topicicon svg {
    color: var(--sf-gold) !important;
}

/* (Latest Topics row styling is unified with Sections menu in the earlier
   "Both footer modules" block. No per-LI padding here — that block sets
   padding on the inner <a> so both modules have identical row heights.) */
body.sf-body .sf-footer .klatest-item { position: relative; }

/* Topic icons (footer + sidebar): swap Kunena's document icon for a gold hexagon.
   Size in em so it scales with the title's font-size in each context. */
body.sf-body .klatest .klatest-topicicon a > svg {
    display: none !important;
}
body.sf-body .klatest .klatest-topicicon a {
    display: inline-block;
    width: 0.825em;
    height: 0.9375em;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16' fill='%23c9a96e' fill-opacity='0.7'><polygon points='7,1 13,4.5 13,11.5 7,15 1,11.5 1,4.5'/></svg>") center/contain no-repeat;
    transition: filter 0.18s ease;
}
body.sf-body .klatest .klatest-item:hover .klatest-topicicon a {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16' fill='%23e2c98c'><polygon points='7,1 13,4.5 13,11.5 7,15 1,11.5 1,4.5'/></svg>");
}

/* Kunena search results page — Bootstrap accordion + legend dark-mode overrides.
   Without these, legends are dark-on-dark (invisible) and accordion bodies are white. */
body.sf-body #kunena .accordion-item {
    --bs-accordion-bg: var(--sf-stone-2, #131313);
    --bs-accordion-color: var(--sf-text);
    --bs-accordion-active-bg: var(--sf-stone-3, #1a1a1a);
    --bs-accordion-active-color: var(--sf-text);
    --bs-accordion-border-color: var(--sf-vein);
    --bs-accordion-btn-bg: var(--sf-stone-3, #1a1a1a);
    --bs-accordion-btn-color: var(--sf-text);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(201,169,110,.18);
    background: var(--sf-stone-2, #131313) !important;
    color: var(--sf-text) !important;
    border-color: var(--sf-vein) !important;
}
body.sf-body #kunena .accordion-button {
    background: var(--sf-stone-3, #1a1a1a) !important;
    color: var(--sf-text) !important;
    border-radius: 0 !important;
}
body.sf-body #kunena .accordion-button:not(.collapsed) {
    background: var(--sf-stone-3, #1a1a1a) !important;
    color: var(--sf-gold) !important;
    box-shadow: inset 0 -1px 0 var(--sf-vein) !important;
}
body.sf-body #kunena .accordion-body {
    background: var(--sf-stone-2, #131313) !important;
    color: var(--sf-text-soft) !important;
}
body.sf-body #kunena fieldset legend {
    color: var(--sf-text) !important;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.0075em;
    text-transform: uppercase;
    margin-bottom: 0.6rem;
}

/* ============================================================
   KUNENA ADVANCED SEARCH PAGE (view=search)
   Two-column form on desktop, single column below 720px.
   Fieldsets become subtle grouped cards; legends are mini titles.
   ============================================================ */
body.sf-body.option-kunena.view-search #kunena fieldset {
    margin-bottom: 1.125rem;
    padding: 0.9rem 0.9rem 0.225rem;
    background: var(--sf-stone, #141414);
    border: 1px solid var(--sf-vein);
    border-radius: 6px;
}
body.sf-body.option-kunena.view-search #kunena fieldset legend {
    float: none !important;
    width: auto !important;
    padding: 0 !important;
    margin-bottom: 0.9rem !important;
    color: var(--sf-gold) !important;
    font-size: 0.825rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase;
    line-height: 1.2;
}
/* Form row layout — keep BS row/col gutters but tighten on phone */
body.sf-body.option-kunena.view-search #kunena fieldset .row {
    margin-left: 0;
    margin-right: 0;
}
body.sf-body.option-kunena.view-search #kunena .form-group {
    margin-bottom: 0.9rem;
}
body.sf-body.option-kunena.view-search #kunena .form-control,
body.sf-body.option-kunena.view-search #kunena .form-select {
    /* Unify heights: 9px top + 13.2px right + 9px bottom + 13.2px left, 14.4px font.
       Text input + select both render at 42.5px now. 369: 9, 13+2=5✗, 14+4=9.
       Switch right/left to 9.6px (15→6) so all four sides root-sum to 9 or 6. */
    margin-bottom: 0 !important;
    padding: 0.5625rem 0.825rem !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    min-height: 0 !important;
    height: auto !important;
}
body.sf-body.option-kunena.view-search #kunena .form-select {
    /* Right padding higher to clear the chevron icon. 36px → 9 ✓ */
    padding-right: 2.25rem !important;
}
/* Drop Bootstrap's .mb-3 from inline selects — fieldset gap handles spacing */
body.sf-body.option-kunena.view-search #kunena .form-select.mb-3,
body.sf-body.option-kunena.view-search #kunena .form-control.mb-3 {
    margin-bottom: 0 !important;
}
/* Checkbox + label row tidy */
body.sf-body.option-kunena.view-search #kunena .checkbox {
    display: flex;
    align-items: center;
    min-height: 47.7px;
    margin-bottom: 0.9rem;
}
body.sf-body.option-kunena.view-search #kunena .checkbox label {
    display: inline-flex;
    align-items: center;
    gap: 0.5625rem;
    color: var(--sf-text) !important;
    font-size: 0.9375rem;
    margin: 0;
    cursor: pointer;
}
body.sf-body.option-kunena.view-search #kunena .checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--sf-gold);
    cursor: pointer;
}
/* Accordion header for "Search Options" (collapsible expansion below) */
body.sf-body.option-kunena.view-search #kunena .accordion-header .accordion-button {
    background: var(--sf-stone-2, #1a1a1a) !important;
    color: var(--sf-gold) !important;
    font-size: 0.825rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase;
    padding: 0.825rem 1.125rem !important;
    border: 1px solid var(--sf-vein) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
}
body.sf-body.option-kunena.view-search #kunena .accordion-header .accordion-button:not(.collapsed) {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
body.sf-body.option-kunena.view-search #kunena .accordion-header .accordion-button::after {
    filter: invert(0.7) sepia(0.5) saturate(2) hue-rotate(0deg);
}
body.sf-body.option-kunena.view-search #kunena #searchoptions .accordion-body {
    background: var(--sf-stone, #141414) !important;
    border: 1px solid var(--sf-vein) !important;
    border-top: 0 !important;
    border-radius: 0 0 6px 6px !important;
    padding: 1.125rem !important;
    margin-bottom: 1.125rem !important;
}
/* Phone view (≤720px): stack everything single-column */
@media (max-width: 720px) {
    body.sf-body.option-kunena.view-search #kunena fieldset.col-md-6,
    body.sf-body.option-kunena.view-search #kunena fieldset.col-md-4 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    body.sf-body.option-kunena.view-search #kunena fieldset .col-md-6,
    body.sf-body.option-kunena.view-search #kunena fieldset .col-md-4 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}
/* Tablet (721-991px): "Search by Keyword" + "Search by User Name" sit side
   by side at this width but the inner col-md-6 splits get cramped — collapse
   them to full-width inside each fieldset. */
@media (min-width: 721px) and (max-width: 991px) {
    body.sf-body.option-kunena.view-search #kunena fieldset .col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* Allow select option text to be visible even in narrow columns by truncating
   gracefully rather than clipping mid-character. */
body.sf-body.option-kunena.view-search #kunena .form-select {
    text-overflow: ellipsis;
}

/* Bootstrap datepicker calendar popup — keep it on-screen and themed. */
body.sf-body .datepicker.datepicker-dropdown {
    background: var(--sf-stone-3, #232323) !important;
    border: 1px solid var(--sf-vein) !important;
    border-radius: 6px !important;
    padding: 0.45rem !important;
    z-index: 1080 !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5) !important;
    color: var(--sf-text) !important;
    max-width: calc(100vw - 1.8rem);
}
body.sf-body .datepicker table {
    width: 100%;
}
body.sf-body .datepicker table th,
body.sf-body .datepicker table td {
    color: var(--sf-text) !important;
    background: transparent !important;
    border-radius: 4px;
    padding: 0.225rem 0.45rem !important;
}
body.sf-body .datepicker table th.dow {
    color: var(--sf-gold) !important;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.0825em;
}
body.sf-body .datepicker table td.day:hover,
body.sf-body .datepicker table td.day.focused {
    background: var(--sf-stone-2, #1a1a1a) !important;
    color: var(--sf-gold) !important;
}
body.sf-body .datepicker table td.day.active,
body.sf-body .datepicker table td.day.active:hover {
    background: var(--sf-gold) !important;
    color: var(--sf-coal, #0a0a0a) !important;
}
body.sf-body .datepicker table td.old,
body.sf-body .datepicker table td.new {
    color: var(--sf-text-mute) !important;
}
body.sf-body .datepicker .datepicker-switch:hover,
body.sf-body .datepicker .prev:hover,
body.sf-body .datepicker .next:hover {
    background: var(--sf-stone-2, #1a1a1a) !important;
    color: var(--sf-gold) !important;
}
@media (max-width: 720px) {
    body.sf-body .datepicker.datepicker-dropdown {
        left: 0.9rem !important;
        right: 0.9rem !important;
        width: auto !important;
        max-width: calc(100vw - 1.8rem);
    }
}
body.sf-body #kunena .btn-outline-primary {
    background: transparent !important;
    color: var(--sf-text) !important;
    border: 1px solid var(--sf-gold) !important;
}
body.sf-body #kunena .btn-outline-primary:hover {
    background: var(--sf-gold) !important;
    color: var(--sf-coal) !important;
}

/* Hide Kunena's "Category / Last Post" column-header band on section tables.
   It's redundant noise — every section block on the home page repeats it. */
body.sf-body #kunena div[id^="section"] table > tbody > tr:first-child:has(> td > div.p-2) {
    display: none !important;
}

/* Sidebar: stack modules with consistent vertical spacing */
body.sf-body .sf-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Sidebar search box: small input + icon button matching dark/gold aesthetic. */
.sf-search { margin: 0; }
.sf-search__row {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--sf-vein);
    border-radius: var(--sf-radius);
    background: var(--sf-stone-2, #131313);
    overflow: hidden;
    transition: border-color 0.15s ease;
}
.sf-search__row:focus-within { border-color: var(--sf-gold); }
.sf-search__row input[type="search"] {
    flex: 1 1 auto;
    background: transparent;
    border: 0 !important;
    color: var(--sf-text);
    font: inherit;
    font-size: 0.8925rem;
    padding: 0.45rem 0.6rem;
    outline: none;
    appearance: none;
    min-width: 0;
}
.sf-search__row input[type="search"]::placeholder { color: var(--sf-text-faint); }
.sf-search__row input[type="search"]::-webkit-search-cancel-button { display: none; }
.sf-search__row button {
    flex: 0 0 auto;
    background: transparent;
    border: 0 !important;
    border-left: 1px solid var(--sf-vein) !important;
    color: var(--sf-text-soft);
    padding: 0 0.675rem;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}
.sf-search__row button:hover {
    color: var(--sf-gold-bright);
    background: rgba(201, 169, 110, 0.06);
}

/* Sidebar Latest Topics: same single-line treatment as footer, scoped to sidebar */
body.sf-body .sf-sidebar .klatest,
body.sf-body .sf-sidebar .klatest-items,
body.sf-body .sf-sidebar .klatest-itemdetails {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
body.sf-body .sf-sidebar .klatest-item {
    /* 7.2px top/bottom (0.45rem -> 9 ✓), 3.6px left inset so titles
       don't sit flush against the panel edge. */
    padding: 0.45rem 0 0.45rem 0.225rem !important;
    border-bottom: 1px solid var(--sf-vein) !important;
    font-size: 0.84rem;
    transition: background 0.15s ease;
}
body.sf-body .sf-sidebar .klatest-item:last-child { border-bottom: 0 !important; }
body.sf-body .sf-sidebar .klatest-item:hover {
    background: rgba(201, 169, 110, 0.045);
}
body.sf-body .sf-sidebar .klatest-itemdetails {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.45rem !important;
}
body.sf-body .sf-sidebar .klatest-topicicon {
    /* Hide the per-row doc icon in the sidebar — every row is a topic, the
       icon adds noise and steals horizontal space. Titles sit flush-left
       like the cleaner view-category render. */
    display: none !important;
}
body.sf-body .sf-sidebar .klatest-subject { flex: 1 1 auto; min-width: 0; padding: 0 !important; }
body.sf-body .sf-sidebar .klatest-subject a,
body.sf-body .sf-sidebar .klatest-subject a.topictitle {
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    color: var(--sf-text-soft) !important;
    font-size: 0.84rem !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: break-word;
    transition: color 0.18s ease;
}
body.sf-body .sf-sidebar .klatest-item:hover .klatest-subject a {
    color: var(--sf-gold-bright) !important;
}

/* Make the entire Latest Topics row clickable: stretch the title link to cover
   the whole .klatest-item via a transparent overlay. The icon link stays clickable
   too (higher z-index). Visually nothing moves. */
body.sf-body .klatest .klatest-item { position: relative; }
body.sf-body .klatest .klatest-subject a.topictitle::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}
body.sf-body .klatest .klatest-topicicon,
body.sf-body .klatest .klatest-subject {
    position: relative;
    z-index: 2;
}
body.sf-body .klatest .klatest-item { cursor: pointer; }
body.sf-body .sf-footer .klatest-subject::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    height: 6px;
    width: 100%;
    max-width: 129.9px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 6' fill='none' stroke='%23c9a96e' stroke-width='1' stroke-linecap='round'><line x1='8' y1='3' x2='34' y2='3'/><line x1='40' y1='3' x2='66' y2='3'/><line x1='72' y1='3' x2='98' y2='3'/><line x1='104' y1='3' x2='122' y2='3'/><circle cx='5' cy='3' r='1.6' fill='%23c9a96e' stroke='none'/><circle cx='37' cy='3' r='1.6' fill='%23c9a96e' stroke='none'/><circle cx='69' cy='3' r='1.6' fill='%23c9a96e' stroke='none'/><circle cx='101' cy='3' r='1.6' fill='%23c9a96e' stroke='none'/><circle cx='125' cy='3' r='1.6' fill='%23c9a96e' stroke='none'/></svg>");
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: background-size 0.28s cubic-bezier(.5,.05,.3,1);
    pointer-events: none;
}
body.sf-body .sf-footer .klatest-item:hover .klatest-subject::after {
    background-size: 100% 100%;
}

/* Sections menu: same flat treatment as Latest Topics — no left bar, no
   left padding. Current page just gets gold text. */
body.sf-body .sf-footer .mod-menu .nav-item::before { display: none !important; }
body.sf-body .sf-footer .mod-menu .current > a,
body.sf-body .sf-footer .mod-menu .active > a {
    color: var(--sf-gold-bright) !important;
}

/* Mobile header layout: brand left, nav between (drawer-hidden), hamburger right */
@media (max-width: 991px) {
    .sf-header__inner {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding-left: 1.05rem !important;
        padding-right: 1.05rem !important;
    }
    .sf-brand     { order: 1; flex: 1 1 auto; margin-right: auto; }
    .sf-nav       { order: 2; }
    .sf-header__tools { order: 3; }
    .sf-hamburger { order: 4; margin-left: 0 !important; flex: 0 0 auto; }
}

/* Hamburger needs internal padding so the bars don't kiss the border */
.sf-hamburger {
    padding: 9px 7.8px !important;
    width: 44.1px !important;
    height: 44.1px !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    gap: 0 !important;
}
.sf-hamburger__bar {
    width: 100% !important;
    height: 2px !important;
    align-self: stretch !important;
}

/* Category-list table: my earlier rule hid the first scroll-arrow column,
   but Kunena uses the same first td in body rows for the folder icon and
   in header rows for "Category | Last Post" labels with an empty first cell.
   Result: header rows have empty first cell = 0 width, so columns shift.
   Make tbody header rows hide their empty first td properly. */
body.sf-body #kunena form#categoryactions table tbody tr:first-child td:first-child:has(.p-2:empty),
body.sf-body #kunena form#categoryactions table tbody tr td:first-child .p-2:empty {
    display: none !important;
}
/* Make the "Category | Last Post" label row align with content rows below */
body.sf-body #kunena form#categoryactions table tbody tr:has(td .p-2:not(:empty)) {
    border-bottom: 1px solid var(--sf-vein) !important;
    background: var(--sf-stone-3) !important;
}
body.sf-body #kunena form#categoryactions table tbody tr td .p-2:not(:empty) {
    color: var(--sf-gold) !important;
    font-size: 0.75rem !important;
    text-transform: uppercase;
    letter-spacing: 0.1275em;
    font-weight: 600;
    padding: 0.45rem 1.05rem !important;
}

/* ============================================================
   LEGAL PAGES (Privacy, Terms, Cookies)
   ============================================================
   - Hide all the Joomla com_content meta noise: "Details",
     "Written by Admin", "Category: Uncategorised", "Published",
     "Hits: N". None of it is useful on a legal page.
   - Single-column layout (sidebar already hidden via index.php).
   - Narrower body, comfy line height, proper heading rhythm.
*/
body.sf-body.is-legal .item-page .article-info,
body.sf-body.is-legal .item-page .article-info-term,
body.sf-body.is-legal .item-page dl.article-info,
body.sf-body.is-legal .item-page .createdby,
body.sf-body.is-legal .item-page .category-name,
body.sf-body.is-legal .item-page .published,
body.sf-body.is-legal .item-page .modified,
body.sf-body.is-legal .item-page .hits,
body.sf-body.is-legal .item-page .icon-calendar,
body.sf-body.is-legal .item-page .icon-user,
body.sf-body.is-legal .item-page .icon-folder-open {
    display: none !important;
}

/* Hide it generally too — these meta fields are useless on every
   article on this site, not just legal pages. */
body.sf-body .item-page > dl.article-info,
body.sf-body .item-page .article-info-term {
    display: none !important;
}

body.sf-body.is-legal .sf-content {
    max-width: 759.9px;
    margin: 0 auto;
}

body.sf-body.is-legal .item-page {
    background: var(--sf-stone-2);
    border: 1px solid var(--sf-vein);
    border-radius: 7.8px;
    padding: 2.5312rem 3rem;
    margin: 1.05rem 0 3rem;
}

body.sf-body.is-legal .page-header h1,
body.sf-body.is-legal .page-header h2,
body.sf-body.is-legal .item-page > h1,
body.sf-body.is-legal .item-page > h2 {
    color: var(--sf-text);
    font-size: 2.025rem;
    font-weight: 700;
    margin: 0 0 1.5rem;
    padding-bottom: 1.05rem;
    border-bottom: 1px solid var(--sf-vein);
    letter-spacing: -0.0225em;
}

body.sf-body.is-legal .item-page h2 {
    color: var(--sf-gold);
    font-size: 1.125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 2.25rem 0 0.825rem;
    padding: 0;
    border: 0;
}

body.sf-body.is-legal .item-page h2:first-of-type {
    margin-top: 0.45rem;
}

body.sf-body.is-legal .item-page p {
    color: var(--sf-text);
    line-height: 1.7;
    margin: 0 0 1.05rem;
}

body.sf-body.is-legal .item-page ul,
body.sf-body.is-legal .item-page ol {
    color: var(--sf-text);
    line-height: 1.7;
    margin: 0 0 1.275rem;
    padding-left: 1.5rem;
}

body.sf-body.is-legal .item-page li {
    margin: 0.3375rem 0;
}

body.sf-body.is-legal .item-page strong {
    color: var(--sf-text);
    font-weight: 600;
}

body.sf-body.is-legal .item-page a {
    color: var(--sf-gold);
    text-decoration: underline;
    text-decoration-color: rgba(201, 169, 110, 0.4);
    text-underline-offset: 2px;
}
body.sf-body.is-legal .item-page a:hover {
    text-decoration-color: var(--sf-gold);
}

body.sf-body.is-legal .item-page table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.05rem 0 1.5rem;
    font-size: 0.9075rem;
}
body.sf-body.is-legal .item-page table th,
body.sf-body.is-legal .item-page table td {
    border: 1px solid var(--sf-vein);
    padding: 0.675rem 0.825rem;
    text-align: left;
    vertical-align: top;
}
body.sf-body.is-legal .item-page table thead th {
    background: var(--sf-stone-3);
    color: var(--sf-gold);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.0675em;
}
body.sf-body.is-legal .item-page table code {
    background: var(--sf-stone-3);
    color: var(--sf-text);
    padding: 0.1125rem 0.3375rem;
    border-radius: 3px;
    font-size: 0.825em;
}

body.sf-body.is-legal .item-page em {
    color: var(--sf-text-soft);
    font-style: italic;
}

@media (max-width: 720px) {
    body.sf-body.is-legal .item-page {
        padding: 1.5rem 1.275rem;
        margin: 0.45rem 0 2.025rem;
    }
    body.sf-body.is-legal .page-header h1,
    body.sf-body.is-legal .item-page > h1 {
        font-size: 1.5rem;
    }
    body.sf-body.is-legal .item-page h2 {
        font-size: 1.05rem;
    }
}

/* ============================================================
   KUNENA SEARCH RESULTS — drop the heavy alert borders
   ============================================================
   The search result rows render each match as an .alert-secondary
   header on top of a kmessage card. Both have visible borders
   that pop against the page bg. Drop them to a subtle vein color.
*/
body.sf-body #kunena_search_results .mykmsg-header.alert,
body.sf-body #kunena_search_results .mykmsg-header.alert-secondary {
    border: 0 !important;
    border-bottom: 1px solid var(--sf-vein) !important;
    background: transparent !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0.75rem 1.05rem !important;
}
/* Make the search-result header VISIBLE and the title link prominent.
   Force block+padding so the header isn't collapsed/hidden somewhere. */
body.sf-body #kunena_search_results .mykmsg-header,
body.sf-body #kunena_search_results .mykmsg-header.alert,
body.sf-body #kunena_search_results .mykmsg-header.alert-secondary {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
    color: var(--sf-text-soft) !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--sf-vein) !important;
    border-radius: 0 !important;
    margin: 0 0 0.45rem 0 !important;
    padding: 0.45rem 0.9rem !important;
    font-size: 0.825rem !important;
}
/* The first <em> wraps the title link — force block so the title becomes
   a proper heading-style line, with the "was created by" sentence below. */
body.sf-body #kunena_search_results .mykmsg-header > em:first-child {
    display: block !important;
    font-style: normal !important;
    margin-bottom: 0.225rem !important;
}
body.sf-body #kunena_search_results .mykmsg-header a.topictitle,
body.sf-body #kunena_search_results .mykmsg-header em > a.topictitle,
body.sf-body #kunena_search_results .mykmsg-header a.hasTooltip {
    display: inline-block !important;
    visibility: visible !important;
    color: var(--sf-gold) !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    font-style: normal !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
}
body.sf-body #kunena_search_results .mykmsg-header a.topictitle:hover,
body.sf-body #kunena_search_results .mykmsg-header a.hasTooltip:hover {
    color: var(--sf-gold-bright) !important;
    text-decoration: underline !important;
}
body.sf-body #kunena_search_results .mykmsg-header em:not(:first-child) {
    color: var(--sf-text-soft) !important;
    font-style: normal !important;
}

/* Search results layout: slim the avatar column, widen the post column */
@media (min-width: 992px) {
    body.sf-body #kunena_search_results > .col-md-2 {
        flex: 0 0 9% !important;
        max-width: 9% !important;
    }
    body.sf-body #kunena_search_results > .col-md-10 {
        flex: 0 0 90% !important;
        max-width: 90% !important;
    }
}

/* Date sits ABOVE the post box, right-aligned. Stop floating (which
   nests it inside the col), make it a full-width block with text-align
   right so it visually anchors above the badger card. */
body.sf-body #kunena_search_results .col-md-10 > small.float-end {
    float: none !important;
    display: block !important;
    width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 0.45rem !important;
    text-align: right !important;
    color: var(--sf-text-mute) !important;
    font-size: 0.78rem !important;
}
body.sf-body #kunena_search_results .col-md-10 > small.float-end .kdate {
    color: var(--sf-text-mute) !important;
    font-size: 0.78rem !important;
}
body.sf-body #kunena_search_results .badger-left,
body.sf-body #kunena_search_results .message-published,
body.sf-body #kunena_search_results .khistory {
    border: 1px solid var(--sf-vein) !important;
    border-radius: 6px !important;
    background: var(--sf-stone-2) !important;
    margin-bottom: 1.275rem !important;
    overflow: hidden;
}
body.sf-body #kunena_search_results .kmessage {
    padding: 1.05rem 1.275rem !important;
    background: transparent !important;
    border: 0 !important;
}

/* ============================================================
   KUNENA SEARCH PAGE — Advanced Search accordion + results header
   ============================================================
   The accordion-item wraps Advanced Search in a stone-3 border that
   reads as a heavy outline. Use vein color and only on the bottom
   to match the rest of the site's understated cards.
*/
body.sf-body #kunena #main-search.accordion .accordion-item {
    border: 1px solid var(--sf-vein) !important;
    border-radius: 7.8px !important;
    background: var(--sf-stone-2) !important;
    overflow: hidden;
}
body.sf-body #kunena #detail-searchoptions.accordion-flush .accordion-item {
    border: 0 !important;
    border-top: 1px solid var(--sf-vein) !important;
    border-radius: 0 !important;
    background: transparent !important;
}
body.sf-body #kunena #main-search .accordion-button,
body.sf-body #kunena #detail-searchoptions .accordion-button {
    background: transparent !important;
    border: 0 !important;
    color: var(--sf-text) !important;
    font-weight: 600;
    padding: 0.825rem 1.125rem !important;
}
body.sf-body #kunena #main-search .accordion-button:not(.collapsed),
body.sf-body #kunena #detail-searchoptions .accordion-button:not(.collapsed) {
    color: var(--sf-gold) !important;
    box-shadow: inset 0 -1px 0 var(--sf-vein) !important;
}

/* "Search Results (Searched for: nancy)" header */
body.sf-body #kunena > h2 {
    margin: 1.5rem 0 1.05rem !important;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--sf-vein);
    font-size: 1.425rem !important;
    color: var(--sf-text) !important;
}
body.sf-body #kunena > h2 small {
    color: var(--sf-text-mute) !important;
    font-size: 0.675em !important;
    font-weight: 400 !important;
    margin-left: 0.45rem;
}

/* Submit/Cancel buttons sit flush against the bottom of the Search
   accordion frame — give them breathing room. */
body.sf-body #kunena #detail-searchoptions > .text-center.mt-3 {
    padding: 1.05rem 1.05rem 1.5rem !important;
    margin-top: 0 !important;
}
body.sf-body #kunena #detail-searchoptions > .text-center.mt-3 .btn + .btn {
    margin-left: 0.75rem;
}

/* ============================================================
   SIDEBAR USER MENU (Member Menu module, Registered users only)
   ============================================================ */
.sf-usermenu {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.sf-usermenu li {
    margin: 0 !important;
    padding: 0 !important;
    border-top: 1px solid var(--sf-vein);
}
.sf-usermenu li:first-child {
    border-top: 0;
}
.sf-usermenu li a {
    display: block;
    padding: 0.6rem 0.825rem;
    color: var(--sf-text) !important;
    text-decoration: none !important;
    font-size: 0.9075rem;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.sf-usermenu li a:hover,
.sf-usermenu li a:focus {
    color: var(--sf-gold) !important;
    background: var(--sf-stone-3);
}
.sf-usermenu__primary {
    background: linear-gradient(135deg, rgba(201, 169, 110, 0.12), rgba(201, 169, 110, 0.04));
    border-bottom: 1px solid var(--sf-vein);
}
.sf-usermenu__primary a {
    color: var(--sf-gold-bright) !important;
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: 0.0225em;
}
.sf-usermenu__primary a:hover {
    background: rgba(201, 169, 110, 0.18) !important;
    color: var(--sf-gold-bright) !important;
}
.sf-usermenu__icon {
    display: inline-block;
    width: 1.125em;
    margin-right: 0.45em;
    text-align: center;
    color: var(--sf-gold);
    font-weight: 700;
}
.sf-usermenu__signout {
    background: rgba(0, 0, 0, 0.15);
}
.sf-usermenu__signout a {
    color: var(--sf-text-soft) !important;
    font-size: 0.825rem;
}
.sf-usermenu__signout a:hover {
    color: var(--sf-text) !important;
}

/* ============================================================
   TOP-NAV USER DROPDOWN (heading parent + 8 children)
   ============================================================
   Joomla mod_menu renders parent "heading" type as a non-link
   container. The desktop nav already renders submenus on hover
   per the existing .sf-nav rules. Just ensure the User parent
   gets the right visual treatment.
*/
.sf-nav .mod-menu li.item-140 > .mod-menu__heading,
.sf-nav .mod-menu li[class*="parent"] > .mod-menu__heading {
    color: var(--sf-gold) !important;
    cursor: default;
}

/* ============================================================
   JOOMLA-ALERT (system messages) — dark-theme override
   ============================================================
   Joomla's <joomla-alert> web component injects light-theme
   bg/border/color via CSS custom properties. We override those
   custom properties + the bg/color directly because the inline
   style sets background-color from var() and our earlier reset
   only set bg/color/border-color tokens not the actual props.
*/
joomla-alert,
joomla-alert[type="warning"],
joomla-alert[type="danger"],
joomla-alert[type="success"],
joomla-alert[type="info"],
joomla-alert[type="notice"],
joomla-alert[type="message"],
joomla-alert[type="error"] {
    --jui-alert-bg: var(--sf-stone-2) !important;
    --jui-alert-color: var(--sf-text) !important;
    --jui-alert-border-color: var(--sf-vein) !important;
    --jui-alert-warning-background-color: var(--sf-stone-2) !important;
    --jui-alert-warning-border-color: var(--sf-vein) !important;
    --jui-alert-warning-color: var(--sf-text) !important;
    --jui-alert-danger-background-color: rgba(180, 60, 60, 0.12) !important;
    --jui-alert-danger-border-color: rgba(220, 80, 80, 0.45) !important;
    --jui-alert-danger-color: #f5b8b6 !important;
    --jui-alert-success-background-color: rgba(72, 163, 72, 0.12) !important;
    --jui-alert-success-border-color: rgba(72, 163, 72, 0.4) !important;
    --jui-alert-success-color: #b8e0b8 !important;
    --jui-alert-info-background-color: rgba(201, 169, 110, 0.06) !important;
    --jui-alert-info-border-color: rgba(201, 169, 110, 0.30) !important;
    --jui-alert-info-color: var(--sf-text-soft) !important;
    background: var(--sf-stone-2) !important;
    background-color: var(--sf-stone-2) !important;
    color: var(--sf-text) !important;
    border-color: var(--sf-vein) !important;
}
joomla-alert[type="danger"],
joomla-alert[type="error"] {
    background: rgba(180, 60, 60, 0.12) !important;
    background-color: rgba(180, 60, 60, 0.12) !important;
    border-color: rgba(220, 80, 80, 0.45) !important;
    color: #f5b8b6 !important;
}
joomla-alert[type="success"] {
    background: rgba(72, 163, 72, 0.12) !important;
    background-color: rgba(72, 163, 72, 0.12) !important;
    border-color: rgba(72, 163, 72, 0.4) !important;
    color: #b8e0b8 !important;
}
joomla-alert[type="warning"] {
    background: rgba(201, 169, 110, 0.10) !important;
    background-color: rgba(201, 169, 110, 0.10) !important;
    border-color: rgba(201, 169, 110, 0.45) !important;
    color: var(--sf-gold-bright, #d6b97f) !important;
}
joomla-alert .alert-message,
joomla-alert .alert-wrapper,
joomla-alert .alert-heading {
    color: inherit !important;
}
joomla-alert .joomla-alert--close {
    color: inherit !important;
    opacity: 0.7;
}
joomla-alert .joomla-alert--close:hover {
    opacity: 1;
}

/* ============================================================
   COM_USERS PROFILE / EDIT — Joomla user profile pages
   ============================================================ */
body.sf-body .com-users-profile,
body.sf-body .com-users-profile-edit {
    max-width: 720px !important;
    background: var(--sf-stone-2) !important;
    border: 1px solid var(--sf-vein) !important;
    border-radius: 7.8px !important;
    padding: 2.025rem 2.25rem !important;
}

body.sf-body .com-users-profile fieldset,
body.sf-body .com-users-profile-edit fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 1.725rem;
}
body.sf-body .com-users-profile fieldset + fieldset,
body.sf-body .com-users-profile-edit fieldset + fieldset {
    padding-top: 1.5rem;
    border-top: 1px solid var(--sf-vein);
}

body.sf-body .com-users-profile legend,
body.sf-body .com-users-profile-edit legend {
    color: var(--sf-gold) !important;
    font-size: 0.825rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.1125em;
    padding: 0 !important;
    margin: 0 0 1.05rem !important;
    width: auto;
    border-bottom: 0;
}

body.sf-body .com-users-profile dl.dl-horizontal,
body.sf-body .com-users-profile-edit dl.dl-horizontal {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 0.6rem 1.275rem;
    margin: 0;
}
body.sf-body .com-users-profile dl.dl-horizontal dt,
body.sf-body .com-users-profile-edit dl.dl-horizontal dt {
    color: var(--sf-text-soft) !important;
    font-weight: 500;
    font-size: 0.9075rem;
    margin: 0 !important;
    padding: 0.3375rem 0;
    text-align: left;
}
body.sf-body .com-users-profile dl.dl-horizontal dd,
body.sf-body .com-users-profile-edit dl.dl-horizontal dd {
    color: var(--sf-text) !important;
    margin: 0 !important;
    padding: 0.3375rem 0;
    border-bottom: 1px solid var(--sf-vein);
}
body.sf-body .com-users-profile dl.dl-horizontal dt:last-of-type,
body.sf-body .com-users-profile dl.dl-horizontal dd:last-of-type {
    border-bottom: 0;
}

/* Edit Profile button (toolbar) */
body.sf-body .com-users-profile__edit.btn-toolbar {
    list-style: none;
    margin: 0 0 1.05rem !important;
    padding: 0;
}
body.sf-body .com-users-profile__edit .btn-group {
    display: inline-block;
    width: auto !important;
}
body.sf-body .com-users-profile__edit .btn,
body.sf-body .com-users-profile__edit .btn.btn-primary {
    display: inline-flex !important;
    align-items: center;
    gap: 0.45rem;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--sf-gold) !important;
    border: 1px solid var(--sf-gold) !important;
    padding: 0.45rem 1.05rem !important;
    border-radius: 3.6px !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: background 0.15s ease, color 0.15s ease;
}
body.sf-body .com-users-profile__edit .btn:hover,
body.sf-body .com-users-profile__edit .btn.btn-primary:hover {
    background: var(--sf-gold) !important;
    background-color: var(--sf-gold) !important;
    color: var(--sf-coal) !important;
}
body.sf-body .com-users-profile__edit .icon-user-edit::before {
    content: "✎";
    font-style: normal;
}

@media (max-width: 720px) {
    body.sf-body .com-users-profile,
    body.sf-body .com-users-profile-edit {
        padding: 1.275rem 1.125rem !important;
    }
    body.sf-body .com-users-profile dl.dl-horizontal,
    body.sf-body .com-users-profile-edit dl.dl-horizontal {
        grid-template-columns: 1fr;
        gap: 0.1125rem 0;
    }
    body.sf-body .com-users-profile dl.dl-horizontal dt,
    body.sf-body .com-users-profile-edit dl.dl-horizontal dt {
        padding-bottom: 0.1125rem;
        border-bottom: 0;
    }
    body.sf-body .com-users-profile dl.dl-horizontal dd,
    body.sf-body .com-users-profile-edit dl.dl-horizontal dd {
        padding-top: 0;
        margin-bottom: 0.6rem !important;
    }
}

/* ============================================================
   KUNENA NEW TOPIC / REPLY FORM
   ============================================================ */
body.sf-body #kunena form#postform {
    background: var(--sf-stone-2);
    border: 1px solid var(--sf-vein);
    border-radius: 7.8px;
    padding: 1.725rem 1.725rem 1.05rem;
    margin-top: 0.45rem;
}
body.sf-body #kunena h1 {
    font-size: 1.575rem !important;
    margin-bottom: 1.275rem !important;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--sf-vein);
}
body.sf-body #kunena form#postform > h2,
body.sf-body #kunena form#postform fieldset legend {
    color: var(--sf-gold) !important;
    font-size: 0.825rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.1125em;
    margin: 1.5rem 0 0.825rem !important;
    padding: 0;
    border-bottom: 0;
}

/* Form-row labels */
body.sf-body #kunena form#postform .col-md-2 label,
body.sf-body #kunena form#postform .control-label {
    color: var(--sf-text-soft) !important;
    font-weight: 500;
    font-size: 0.9075rem;
    padding-top: 0.5625rem;
}

/* Topic-icon radio picker — turn into a swatch row */
body.sf-body #kunena #iconset_topicList {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}
body.sf-body #kunena #iconset_topicList input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
body.sf-body #kunena #iconset_topicList label.radio.inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--sf-vein);
    border-radius: 6px;
    background: var(--sf-stone-3);
    color: var(--sf-text-soft);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
    margin: 0 !important;
}
body.sf-body #kunena #iconset_topicList label.radio.inline:hover {
    border-color: var(--sf-gold);
    color: var(--sf-gold);
}
body.sf-body #kunena #iconset_topicList input[type="radio"]:checked + label.radio.inline {
    border-color: var(--sf-gold);
    background: rgba(201, 169, 110, 0.15);
    color: var(--sf-gold-bright);
}
body.sf-body #kunena #iconset_topicList svg {
    width: 1.5em;
    height: 1.5em;
}
/* Phone view: bigger tap targets and larger glyphs since the icons are
   what the user actually picks from. */
@media (max-width: 600px) {
    body.sf-body #kunena #iconset_topicList { gap: 0.5625rem; }
    body.sf-body #kunena #iconset_topicList label.radio.inline {
        width: 56.1px;
        height: 56.1px;
    }
    body.sf-body #kunena #iconset_topicList svg {
        width: 1.6875em;
        height: 1.6875em;
    }
}

/* Bootstrap nav-tabs (Message / Private message) */
body.sf-body #kunena .nav-tabs {
    border-bottom: 1px solid var(--sf-vein) !important;
    margin-bottom: 1.05rem;
    gap: 0.225rem;
}
body.sf-body #kunena .nav-tabs .nav-link,
body.sf-body #kunena .nav-tabs button.nav-link {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--sf-text-soft) !important;
    border: 1px solid transparent !important;
    border-bottom: 0 !important;
    border-radius: 6px 6px 0 0 !important;
    padding: 0.6rem 1.125rem !important;
    margin-bottom: -1px !important;
    font-weight: 500 !important;
}
body.sf-body #kunena .nav-tabs .nav-link:hover,
body.sf-body #kunena .nav-tabs button.nav-link:hover {
    color: var(--sf-text) !important;
    border-color: var(--sf-vein) var(--sf-vein) transparent !important;
}
body.sf-body #kunena .nav-tabs .nav-link.active,
body.sf-body #kunena .nav-tabs button.nav-link.active {
    background: var(--sf-stone-2) !important;
    background-color: var(--sf-stone-2) !important;
    color: var(--sf-gold) !important;
    border-color: var(--sf-vein) var(--sf-vein) var(--sf-stone-2) !important;
}

/* Badges — shared base styling for all states */
body.sf-body #kunena .badge.bg-info,
body.sf-body #kunena .badge.bg-warning,
body.sf-body #kunena .badge.bg-success,
body.sf-body #kunena .badge.bg-danger,
body.sf-body #kunena .badge.bg-secondary,
body.sf-body #kunena .badge.bg-primary {
    border: 1px solid var(--sf-vein);
    font-weight: 500 !important;
    font-size: 0.78rem !important;
    padding: 0.45rem 0.675rem !important;
    border-radius: 3.6px !important;
    margin-right: 0.45rem;
    margin-bottom: 0.45rem;
    display: inline-block;
    line-height: 1.4;
    white-space: normal;
    text-align: left;
}
/* Per-state colors — dark-theme-friendly tints with semantic meaning */
body.sf-body #kunena .badge.bg-success {
    /* Online — muted forest green tint */
    background-color: rgba(46, 125, 50, 0.22) !important;
    color: #7cc78a !important;
    border-color: rgba(46, 125, 50, 0.45) !important;
}
body.sf-body #kunena .badge.bg-secondary {
    /* Offline — neutral grey, blends into the dark theme */
    background-color: var(--sf-stone-3) !important;
    color: var(--sf-text-mute) !important;
    border-color: var(--sf-vein) !important;
}
body.sf-body #kunena .badge.bg-info {
    /* Info pills (allowed file types etc) — gold accent */
    background-color: var(--sf-stone-3) !important;
    color: var(--sf-text-soft) !important;
    border-color: var(--sf-vein) !important;
    border-left: 3px solid var(--sf-gold) !important;
}
body.sf-body #kunena .badge.bg-warning {
    /* Warnings — muted amber */
    background-color: rgba(217, 154, 62, 0.18) !important;
    color: #d9a84e !important;
    border-color: rgba(217, 154, 62, 0.4) !important;
}
body.sf-body #kunena .badge.bg-danger {
    /* Banned / errors — muted red */
    background-color: rgba(176, 60, 60, 0.2) !important;
    color: #d97070 !important;
    border-color: rgba(176, 60, 60, 0.45) !important;
}
body.sf-body #kunena .badge.bg-primary {
    /* Primary — muted teal accent (rare) */
    background-color: rgba(95, 168, 163, 0.18) !important;
    color: #7fc4bf !important;
    border-color: rgba(95, 168, 163, 0.4) !important;
}

/* Attachments drop zone — make it feel like an actual drop target */
body.sf-body #kunena #kattach_form {
    background: var(--sf-stone-2);
    border: 2px dashed var(--sf-vein);
    border-radius: 7.8px;
    padding: 1.5rem 1.05rem;
    margin: 0.75rem 0;
    transition: border-color 0.15s ease, background 0.15s ease;
    cursor: pointer;
}
body.sf-body #kunena #kattach_form:hover {
    border-color: var(--sf-gold);
    background: var(--sf-stone-3);
}
body.sf-body #kunena #klabel_info_drop_browse {
    color: var(--sf-text-soft) !important;
    padding: 0.45rem 1.05rem !important;
    font-size: 0.9075rem;
    text-align: center;
    display: flex !important;
    flex-direction: column;
    gap: 0.45rem;
    align-items: center;
    justify-content: center;
}
/* Add an upload-style icon before the label text */
body.sf-body #kunena #klabel_info_drop_browse::before {
    content: "";
    display: block;
    width: 32.1px;
    height: 32.1px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a96e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.75;
}

/* Submit area at the bottom of the form */
body.sf-body #kunena form#postform .btn-toolbar,
body.sf-body #kunena form#postform .actions {
    padding: 1.05rem 0 0.45rem;
    margin-top: 1.5rem;
    border-top: 1px solid var(--sf-vein);
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* ============================================================
   KUNENA USER PROFILE PAGE (view=user)
   ============================================================ */
body.sf-body #kunena h1.float-start {
    font-size: 1.5rem !important;
    margin: 0 !important;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--sf-vein);
    flex: 1;
}
body.sf-body #kunena h2.float-end {
    margin: 0 0 1.05rem 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* Stats columns (Register Date / Posts / Rank etc) */
body.sf-body #kunena .list-group.list-group-flush {
    background: var(--sf-stone-2);
    border: 1px solid var(--sf-vein);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 1.05rem;
}
body.sf-body #kunena .list-group.list-group-flush .list-group-item {
    background: transparent !important;
    border-top: 1px solid var(--sf-vein) !important;
    border-bottom: 0 !important;
    color: var(--sf-text) !important;
    padding: 0.675rem 1.05rem !important;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
}
body.sf-body #kunena .list-group.list-group-flush .list-group-item:first-child {
    border-top: 0 !important;
}
body.sf-body #kunena .list-group.list-group-flush .list-group-item strong {
    color: var(--sf-text-soft) !important;
    font-weight: 500;
    font-size: 0.8925rem;
}
body.sf-body #kunena .list-group.list-group-flush .list-group-item span {
    color: var(--sf-text) !important;
    text-align: right;
}

/* ============================================================
   KUNENA TOPICS-LIST PAGE (My Posts / Subscriptions / Unread)
   ============================================================ */
body.sf-body #kunena form#ktopicsform {
    margin-top: 0.45rem;
}
body.sf-body #kunena form#ktopicsform table.table {
    background: var(--sf-stone-2) !important;
    border: 1px solid var(--sf-vein) !important;
    border-radius: 7.8px !important;
    overflow: hidden;
    margin-top: 0.45rem !important;
    box-shadow: none !important;
}
body.sf-body #kunena form#ktopicsform table.table thead th {
    background: var(--sf-stone-3) !important;
    border-bottom: 1px solid var(--sf-vein) !important;
}
body.sf-body #kunena form#ktopicsform table.table tbody tr {
    border-bottom: 1px solid var(--sf-vein);
}
body.sf-body #kunena form#ktopicsform table.table tbody tr:last-child {
    border-bottom: 0;
}
body.sf-body #kunena form#ktopicsform table.table tbody tr:hover {
    background: rgba(201, 169, 110, 0.04) !important;
}
body.sf-body #kunena form#ktopicsform table.table tbody td {
    border: 0 !important;
    padding: 0.825rem 1.05rem !important;
    vertical-align: middle !important;
}
body.sf-body #kunena form#ktopicsform table.table tbody th.text-center {
    background: transparent !important;
    color: var(--sf-text-soft) !important;
    font-weight: 400 !important;
    font-size: 0.9375rem !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    padding: 2.025rem 1.05rem !important;
}

/* PHONE (<= 720px): compact the Recent Topics rows. The default Kunena
   block-stacked render is loose: title + Category line + "Topic started
   X by Y" line + a Replies/Views row + a "Last Post by..." block adds up
   to ~280px per row. Tighten everything to 369-safe values and hide the
   verbose Replies/Views cells (visit the topic for that detail). */
@media (max-width: 720px) {
    body.sf-body #kunena form#ktopicsform table.table tbody td {
        /* 7.2px / 10.8px → 9 ✓ */
        padding: 0.45rem 0.675rem !important;
        font-size: 0.84rem !important;
        line-height: 1.35 !important;
    }
    /* Hide the standalone Replies / Views <td> on phone — Kunena renders
       this as a separate block-stacked cell which doubles row height. */
    body.sf-body #kunena form#ktopicsform table.table tbody td:has(> div > span.replies),
    body.sf-body #kunena form#ktopicsform table.table tbody td:has(> .views) {
        display: none !important;
    }
    /* Topic title gets a touch more weight, less line-height noise */
    body.sf-body #kunena form#ktopicsform table.table tbody a.topictitle {
        font-size: 0.9rem !important;
        line-height: 1.35 !important;
        font-weight: 600 !important;
    }
    /* Started/Category meta: drop to muted text, single line if possible */
    body.sf-body #kunena form#ktopicsform table.table tbody .started,
    body.sf-body #kunena form#ktopicsform table.table tbody .ktopic-category {
        font-size: 0.78rem !important;
        line-height: 1.35 !important;
        color: var(--sf-text-soft) !important;
        margin-top: 0.225rem !important;
    }
    /* The phone-only "Last Post by X / Y minutes ago" block */
    body.sf-body #kunena form#ktopicsform table.table tbody #klastpostphone {
        font-size: 0.78rem !important;
        line-height: 1.35 !important;
        margin-top: 0.45rem !important;
    }
    /* Row top/bottom padding + visible divider so threads don't blur into
       each other on phone. Stronger gold-tinted line at 1px, 14.4px gap
       above/below content (369: 9). */
    body.sf-body #kunena form#ktopicsform table.table tbody tr {
        display: block !important;
        padding: 0.9rem 0.675rem !important;
        border-bottom: 1px solid rgba(201, 169, 110, 0.18) !important;
    }
    body.sf-body #kunena form#ktopicsform table.table tbody tr:last-child {
        border-bottom: 0 !important;
    }
    body.sf-body #kunena form#ktopicsform table.table tbody tr:hover {
        background: rgba(201, 169, 110, 0.05) !important;
    }
    /* Hide the tfoot — Kunena emits four <th> cells with only "back to
       top" anchors. On phone these render as three empty padded rectangles
       above the first topic row (the up-arrow th has d-md-table-cell so
       it's hidden, but the three trailing empty cells aren't). */
    body.sf-body #kunena form#ktopicsform table.table tfoot {
        display: none !important;
    }
}

/* Filter dropdown + search input row above the table */
body.sf-body #kunena .form-select.filter,
body.sf-body #kunena #sel {
    width: auto !important;
    min-width: 159.9px;
    margin-right: 0.45rem;
}

/* Search input group on listing pages */
body.sf-body #kunena .kunena-search input[type="search"] {
    flex: 1;
}
body.sf-body #kunena .kunena-search .input-group {
    max-width: 399.9px;
    margin-left: auto;
}

/* Breathing room between the search row (.float-end) and the
   pagination row (.float-start) directly below it on listing pages. */
body.sf-body #kunena > div.float-end:has(.kunena-search) {
    margin-bottom: 1.275rem;
}

/* Empty topics-list h1 small */
body.sf-body #kunena h1 small {
    color: var(--sf-text-mute) !important;
    font-size: 0.675em !important;
    font-weight: 400 !important;
    margin-left: 0.45rem;
    display: inline-block;
}

/* Suppress Bootstrap tooltip injection on Kunena search-result links — the
   tooltip leaks the entire raw post body on hover, which is loud and ugly. */

/* Placeholder text — default browser opacity is too dim on dark bg.
   Bump opacity and use a softer color so placeholders are readable
   without competing with actual entered text. */
::placeholder,
input::placeholder,
textarea::placeholder,
.sf-search__row input[type="search"]::placeholder,
body.sf-body input::placeholder,
body.sf-body textarea::placeholder,
body.sf-body #kunena input::placeholder {
    color: var(--sf-text-soft) !important;
    opacity: 0.75 !important;
}

/* ============================================================
   KUNENA WHO'S ONLINE / STATS / MEMBERS CARDS (homepage)
   ============================================================
   The card-header was 0.5rem/1rem (cramped) and the card-body
   row had no left padding offset so the icon column kissed the
   left edge with no breathing room. Bump padding everywhere. */
body.sf-body #kunena .kfrontend.shadow-lg.rounded.mt-4.border > h2.card-header,
body.sf-body #kunena .kfrontend > h2.card-header {
    padding: 0.825rem 1.275rem !important;
    border-bottom: 1px solid var(--sf-vein) !important;
    margin-bottom: 0;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.0675em;
}
body.sf-body #kunena .kfrontend.shadow-lg.rounded.mt-4.border > h2.card-header a,
body.sf-body #kunena .kfrontend > h2.card-header a {
    color: var(--sf-gold) !important;
    font-size: 0.825rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.0675em;
}
body.sf-body #kunena .kfrontend > .card-body {
    padding: 1.275rem 1.5rem !important;
}
body.sf-body #kunena #kwho .card-body .container,
body.sf-body #kunena #kstats .card-body .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100%;
}
body.sf-body #kunena #kwho .row,
body.sf-body #kunena #kstats .row {
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0;
}
body.sf-body #kunena #kwho .col-md-1,
body.sf-body #kunena #kstats .col-md-1 {
    flex: 0 0 auto;
    width: auto;
    padding: 0;
}
body.sf-body #kunena #kwho .col-md-11,
body.sf-body #kunena #kstats .col-md-11 {
    flex: 1;
    width: auto;
    padding: 0;
}
body.sf-body #kunena #kwho ul.list-unstyled,
body.sf-body #kunena #kstats ul.list-unstyled {
    margin: 0;
    padding: 0;
    list-style: none;
}
body.sf-body #kunena #kwho ul.list-unstyled li,
body.sf-body #kunena #kstats ul.list-unstyled li {
    color: var(--sf-text-soft);
    font-size: 0.9075rem;
    line-height: 1.6;
    padding: 0.15rem 0;
}
body.sf-body #kunena #kwho ul.list-unstyled strong,
body.sf-body #kunena #kstats ul.list-unstyled strong {
    color: var(--sf-text);
    font-weight: 600;
}
body.sf-body #kunena #kwho .col-md-1 svg,
body.sf-body #kunena #kstats .col-md-1 svg {
    width: 27.6px;
    height: 27.6px;
    color: var(--sf-gold);
    opacity: 0.8;
}
body.sf-body #kunena #kwho li.btn-link,
body.sf-body #kunena #kstats li.btn-link {
    background: transparent !important;
    padding: 0 !important;
    margin: 0;
}

/* ============================================================
   KUNENA POST AUTHOR SIDEBAR (profile-expand)
   ============================================================
   The "Less" button is rendered as .btn .btn-outline-primary which
   inherits our gold-bordered button styling — way too prominent for
   a tiny utility toggle. Strip it down. Also add proper spacing
   between Posts/Thank you/etc stat lines. */
body.sf-body #kunena .profile-expand {
    padding: 0.675rem 0;
}
body.sf-body #kunena .profile-expand .heading.btn,
body.sf-body #kunena .profile-expand span.heading {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--sf-text-mute) !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0.225rem 0.45rem !important;
    font-size: 0.78rem !important;
    font-weight: 400 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
    cursor: pointer;
    margin-bottom: 0.45rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3375rem;
}
body.sf-body #kunena .profile-expand .heading.btn:hover,
body.sf-body #kunena .profile-expand span.heading:hover {
    color: var(--sf-gold) !important;
    opacity: 1;
    background: transparent !important;
}
body.sf-body #kunena .profile-expand .heading svg {
    width: 0.825em !important;
    height: 0.825em !important;
}
body.sf-body #kunena .profile-expand .content ul {
    list-style: none !important;
    margin: 0.225rem 0 0 !important;
    padding: 0 !important;
}
body.sf-body #kunena .profile-expand .content ul li {
    color: var(--sf-text-soft) !important;
    font-size: 0.8325rem !important;
    line-height: 1.5 !important;
    padding: 0.18rem 0 !important;
    margin: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}
body.sf-body #kunena .profile-expand .content ul li:first-child {
    border-top: 0;
}

/* ============================================================
   "+ NEW TOPIC" PRIMARY ACTION BUTTON (logged-in users only)
   ============================================================
   Sits in the header next to (or in place of, on phone) the
   hamburger toggle. Green = universal "create / new" signal,
   stands apart from gold (brand) and gray (utility). */
.sf-newtopic {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.825rem;
    background: var(--sf-green, #2f7a3a);
    color: #fff !important;
    border: 1px solid var(--sf-green-bright, #3f9d4d);
    border-radius: 6px;
    font-size: 0.8925rem;
    font-weight: 600;
    text-decoration: none !important;
    letter-spacing: 0.0225em;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
    white-space: nowrap;
    line-height: 1;
    margin-left: auto;
}
.sf-newtopic:hover {
    background: var(--sf-green-bright, #3f9d4d);
    color: #fff !important;
}
.sf-newtopic:active {
    transform: translateY(1px);
}
.sf-newtopic svg {
    flex-shrink: 0;
}

/* Phone view (≤720px): collapse the text label, keep just the +
   icon. The button still says "Create new topic" via aria-label. */
@media (max-width: 720px) {
    .sf-newtopic {
        padding: 0.45rem;
        margin-left: auto;
        margin-right: 0.45rem;
    }
    .sf-newtopic__text {
        display: none;
    }
    .sf-newtopic svg {
        width: 18px;
        height: 18px;
    }
}

/* Define the green tokens at root level if not already there */
:root {
    --sf-green: #2f7a3a;
    --sf-green-bright: #4ab058;
}

/* ============================================================
   COM_USERS PAGES — tighten oversized typography
   ============================================================
   The page-header h1 inherits the big clamp(1.75rem,3.5vw,2.5rem)
   which renders at 2.5rem on desktop. That's too loud for a form
   heading. Same with the legend letter-spacing. */
body.sf-body.option-users .page-header h1 {
    font-size: 1.575rem !important;
    margin-bottom: 1.05rem !important;
    line-height: 1.25;
}
body.sf-body form#member-registration legend,
body.sf-body .com-users-login__form fieldset > legend {
    font-size: 0.78rem !important;
    letter-spacing: 0.0675em !important;
    padding-bottom: 0.45rem !important;
    margin-bottom: 0.825rem !important;
}
body.sf-body .com-users-registration label,
body.sf-body .com-users-login label,
body.sf-body .com-users-reset label,
body.sf-body .com-users-remind label,
body.sf-body form#member-registration label {
    font-size: 0.825rem !important;
    line-height: 1.4 !important;
}
body.sf-body .com-users-registration .control-group,
body.sf-body .com-users-login .control-group {
    margin-bottom: 0.825rem !important;
}

/* ============================================================
   PAGE SCROLLBAR (dark theme)
   ============================================================
   Default browser scrollbars (light gray) clash with the dark
   page. Style them to blend: thin, stone-colored track, gold-
   tinted thumb on hover. Both Firefox (scrollbar-color) and
   WebKit/Blink (::-webkit-scrollbar) supported. */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--sf-stone-3) var(--sf-coal);
}
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
::-webkit-scrollbar-track {
    background: var(--sf-coal);
    border-left: 1px solid var(--sf-vein);
}
::-webkit-scrollbar-thumb {
    background: var(--sf-stone-3);
    border: 3px solid var(--sf-coal);
    border-radius: 6px;
    transition: background 0.15s ease;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--sf-gold);
}
::-webkit-scrollbar-thumb:active {
    background: var(--sf-gold-bright);
}
::-webkit-scrollbar-corner {
    background: var(--sf-coal);
}

/* Inner scrollable elements (textareas, code blocks, etc) get
   smaller scrollbars without the page-scrollbar border treatment. */
textarea::-webkit-scrollbar,
pre::-webkit-scrollbar,
.kmessage::-webkit-scrollbar,
[style*="overflow"]::-webkit-scrollbar {
    width: 7.8px;
    height: 7.8px;
}
textarea::-webkit-scrollbar-thumb,
pre::-webkit-scrollbar-thumb,
.kmessage::-webkit-scrollbar-thumb {
    border-width: 2px;
    border-radius: 3.6px;
}

/* Phone view: solid header bg so page content doesn't bleed through.
   The 0.85-alpha + blur header looks great on desktop but on phone
   the content scrolls right against the header bottom and any colored
   element (gold breadcrumb, alert border) shows through as a stripe. */
@media (max-width: 720px) {
    .sf-header {
        background: var(--sf-coal) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* Phone view: hide footer "Create an account" CTA — the header Join
   button is already visible at the top of every page, and the footer
   CTA wastes vertical space without adding new conversion paths. */
@media (max-width: 720px) {
    .sf-footer .sf-footer__cta {
        display: none !important;
    }
}

/* Hide Kunena's built-in top nav. We have our own header with the
   primary nav, so Kunena's navbar (the `bg-light` cream-colored bar
   that holds its offcanvas menu + login dropdown) just renders as a
   yellow stripe above every page. The hamburger toggle and login
   dropdown are duplicates of features we already provide. */
body.sf-body #kunena > nav.navbar.navbar-expand-lg.navbar-light,
body.sf-body #kunena > nav.navbar.bg-light {
    display: none !important;
}

/* === PHONE VIEW: tighten footer + content/footer gap === */
@media (max-width: 720px) {
    /* Footer column gap was 2rem, too much when columns stack vertically */
    body.sf-body .sf-footer__cols {
        gap: 1.275rem !important;
        grid-template-columns: 1fr !important;
    }
    /* Footer's own top padding + margin from main creates a huge dead zone */
    body.sf-body .sf-footer {
        padding-top: 1.5rem !important;
        margin-top: 1.5rem !important;
    }
    /* main bottom padding tightened */
    body.sf-body main.sf-main {
        padding-top: 1.05rem !important;
        padding-bottom: 1.275rem !important;
    }
    /* Brand block in footer doesn't need its own bottom margin since the
       column gap handles separation */
    body.sf-body .sf-footer__brand {
        text-align: center;
    }
}

/* === Hide Kunena's redundant navbar (more robust selector) === */
body.sf-body #kunena > nav.navbar,
body.sf-body #kunena nav.navbar.navbar-light,
body.sf-body #kunena .knav-offcanvas {
    display: none !important;
}

/* ============================================================
   KUNENA STATISTICS PAGE (/statistics)
   ============================================================ */
body.sf-body #kunena .statistics > h1 {
    margin-bottom: 1.5rem !important;
}
body.sf-body #kunena .statistics h3 {
    color: var(--sf-gold) !important;
    font-size: 0.9rem !important;
    text-transform: uppercase;
    letter-spacing: 0.1125em;
    font-weight: 600 !important;
    margin: 1.5rem 0 0.825rem !important;
    padding: 0;
}

/* The summary stats card at the top */
body.sf-body #kunena .statistics .card {
    background: var(--sf-stone-2) !important;
    border: 1px solid var(--sf-vein) !important;
    border-radius: 7.8px !important;
    overflow: hidden;
    margin-bottom: 1.5rem;
}
body.sf-body #kunena .statistics .card-header {
    background: var(--sf-stone-3) !important;
    color: var(--sf-text) !important;
    font-size: 0.825rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.1125em;
    padding: 0.75rem 1.125rem !important;
    border-bottom: 1px solid var(--sf-vein) !important;
    margin: 0;
}
body.sf-body #kunena .statistics .card-body {
    padding: 1.05rem 1.275rem !important;
    color: var(--sf-text-soft) !important;
    background: transparent !important;
    line-height: 1.9;
    font-size: 0.9075rem;
}
body.sf-body #kunena .statistics .card-body b {
    color: var(--sf-text) !important;
    font-weight: 600;
    margin-right: 0.45rem;
}
body.sf-body #kunena .statistics .card-body b a {
    color: var(--sf-gold) !important;
}
body.sf-body #kunena .statistics .card-body br {
    margin-bottom: 0.225rem;
}

/* Stats tables: undo the global "td display:block" override that's
   leaking from somewhere else and crushing the layout */
body.sf-body #kunena .statistics table.table {
    background: var(--sf-stone-2) !important;
    border: 1px solid var(--sf-vein) !important;
    border-radius: 7.8px !important;
    overflow: hidden;
    display: table !important;
    width: 100% !important;
}
body.sf-body #kunena .statistics table.table thead {
    display: table-header-group !important;
}
body.sf-body #kunena .statistics table.table thead th {
    background: var(--sf-stone-3) !important;
    color: var(--sf-gold) !important;
    font-size: 0.75rem !important;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 0.675rem 0.825rem !important;
    border-bottom: 1px solid var(--sf-vein) !important;
    font-weight: 600 !important;
}
body.sf-body #kunena .statistics table.table tbody {
    display: table-row-group !important;
}
body.sf-body #kunena .statistics table.table tbody tr {
    display: table-row !important;
    border-bottom: 1px solid var(--sf-vein) !important;
    padding: 0 !important;
}
body.sf-body #kunena .statistics table.table tbody tr:last-child {
    border-bottom: 0 !important;
}
body.sf-body #kunena .statistics table.table tbody td {
    display: table-cell !important;
    padding: 0.675rem 0.825rem !important;
    vertical-align: middle !important;
    color: var(--sf-text-soft) !important;
    border: 0 !important;
    width: auto !important;
}
body.sf-body #kunena .statistics table.table tbody td.center {
    text-align: center;
    color: var(--sf-text-mute) !important;
    width: 36px !important;
    font-variant-numeric: tabular-nums;
    font-size: 0.825rem;
}
body.sf-body #kunena .statistics table.table tbody td a {
    color: var(--sf-text) !important;
    font-weight: 500;
}
body.sf-body #kunena .statistics table.table tbody td a:hover {
    color: var(--sf-gold-bright) !important;
}

/* Progress bars (post counts) */
body.sf-body #kunena .statistics .progress {
    height: 18px !important;
    background: var(--sf-stone-3) !important;
    border-radius: 3.6px !important;
    overflow: hidden;
    border: 1px solid var(--sf-vein);
}
body.sf-body #kunena .statistics .progress-bar {
    background: linear-gradient(90deg, var(--sf-gold-dim, rgba(201,169,110,0.45)), var(--sf-gold)) !important;
    color: var(--sf-coal) !important;
    font-weight: 600 !important;
    font-size: 0.78rem !important;
    text-shadow: none !important;
    padding: 0 0.45rem !important;
    text-align: right !important;
    justify-content: flex-end !important;
    line-height: 18px !important;
}

/* The garish red "kwho-admin" username styling. Keep it visible but in
   our gold theme. Same for kwho-moderator. */
body.sf-body #kunena .kwho-admin,
body.sf-body #kunena a.kwho-admin {
    color: var(--sf-gold-bright) !important;
}
body.sf-body #kunena .kwho-moderator,
body.sf-body #kunena a.kwho-moderator {
    color: #5fa8a3 !important;
}

/* Phone view: footer legal bar had extra horizontal padding making
   it visually narrower than the columns above. Match them so the
   © line, links, and credit align with column content above. */
@media (max-width: 720px) {
    body.sf-body .sf-footer .sf-container,
    body.sf-body .sf-footer__cols {
        padding-left: 1.05rem !important;
        padding-right: 1.05rem !important;
    }
    body.sf-body .sf-footer__legal,
    body.sf-body .sf-footer__legal-inner {
        padding-left: 1.05rem !important;
        padding-right: 1.05rem !important;
    }
}

/* ============================================================
   PHONE VIEW: Members & Stats card cleanup
   ============================================================ */
@media (max-width: 720px) {
    /* Card body needs more breathing room on phone */
    body.sf-body #kunena #kwho .card-body,
    body.sf-body #kunena #kstats .card-body {
        padding: 1.05rem 1.05rem !important;
    }

    /* The icon column was a fixed col-md-1, on phone we want it to
       sit above the text rather than to the side */
    body.sf-body #kunena #kwho .row,
    body.sf-body #kunena #kstats .row {
        flex-direction: column;
        gap: 0.45rem;
        align-items: flex-start;
    }
    body.sf-body #kunena #kwho .col-md-1 svg,
    body.sf-body #kunena #kstats .col-md-1 svg {
        width: 24px;
        height: 24px;
    }

    /* Legend pills: more spacing between rows so they don't crowd */
    body.sf-body #kunena #kwho ul.list-unstyled,
    body.sf-body #kunena #kstats ul.list-unstyled {
        display: flex;
        flex-direction: column;
        gap: 0.3375rem;
    }
    body.sf-body #kunena #kwho ul.list-unstyled li,
    body.sf-body #kunena #kstats ul.list-unstyled li {
        padding: 0.1875rem 0 !important;
        line-height: 1.55 !important;
    }

    /* Inline legend (Site Admin / Mod / Banned / User / Guest) on
       /statistics page wraps to many short rows — make it a flex row
       with wraps so each label sits clean */
    body.sf-body #kunena #kwho .col-md-11 ul.list-unstyled li:has(svg.bi-person),
    body.sf-body #kunena #kwho ul.list-unstyled.list-inline {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.675rem;
    }
}

/* /statistics page: the MEMBERS card legend row (with little person
   icons + Site Administrator / Banned / Moderator / User / Guest)
   was rendering as a wall of icon+text crammed together. Make it a
   proper wrap-flex row with comfortable gaps. */
body.sf-body #kunena .statistics .card .card-body {
    line-height: 1.7;
}
body.sf-body #kunena .statistics .card .card-body > .legend,
body.sf-body #kunena #kwho .legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 1.05rem;
    margin-top: 0.45rem;
    padding-top: 0.45rem;
    border-top: 1px solid var(--sf-vein);
}
body.sf-body #kunena .legend .glyphicon,
body.sf-body #kunena .legend svg {
    margin-right: 0.225rem;
}

/* ============================================================
   PHONE VIEW: Statistics & Members cards (homepage cards)
   The 4-column md-3 stats stack vertically on phone making the
   card 900px+ tall. Pack them into a 2-column grid instead.
   ============================================================ */
@media (max-width: 720px) {
    /* Inner card-body padding was doubled (outer .kfrontend has padding,
       inner #kstats has padding 20px). Tighten inner so card isn't huge. */
    body.sf-body #kunena #kstats,
    body.sf-body #kunena #kwho {
        padding: 0.45rem !important;
    }
    body.sf-body #kunena #kstats .card-body,
    body.sf-body #kunena #kwho .card-body {
        padding: 0.45rem 0.75rem !important;
    }

    /* The .container > .row > col-md-* layout doesn't help on phone.
       Make the row a flex column, drop the outer container padding. */
    body.sf-body #kunena #kstats .container,
    body.sf-body #kunena #kwho .container {
        padding: 0 !important;
        max-width: 100% !important;
    }
    body.sf-body #kunena #kstats .row,
    body.sf-body #kunena #kwho .row {
        margin: 0 !important;
        gap: 0 !important;
        flex-direction: column;
    }
    body.sf-body #kunena #kstats .col-md-1,
    body.sf-body #kunena #kwho .col-md-1 {
        display: none; /* big icon eats space */
    }
    body.sf-body #kunena #kstats [class*="col-md-3"],
    body.sf-body #kunena #kstats [class*="col-md-11"],
    body.sf-body #kunena #kwho [class*="col-md-3"],
    body.sf-body #kunena #kwho [class*="col-md-11"] {
        flex: none;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* Stats list-unstyled: make 2-column grid so 4 stats per col fit
       in a compact 8-cell box rather than 8 stacked rows */
    body.sf-body #kunena #kstats .col-md-3 ul.list-unstyled {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 0.45rem 0.825rem;
        margin: 0 !important;
    }
    body.sf-body #kunena #kstats .col-md-3 ul.list-unstyled li {
        font-size: 0.8325rem !important;
        line-height: 1.4 !important;
        padding: 0.15rem 0 !important;
        display: flex;
        flex-direction: column;
        gap: 0.0375rem;
    }
    body.sf-body #kunena #kstats .col-md-3 ul.list-unstyled li strong {
        color: var(--sf-text) !important;
        font-size: 1.05rem;
    }
}

/* ============================================================
   PHONE VIEW: Statistics card — flatten ALL stat columns into one
   ============================================================
   The row > 4× col-md-3 > ul layout renders as 4 stacked full-width
   lists on phone. Use display:contents to flatten the col wrappers
   and lay out ALL <li> directly in a 2-column grid. */
@media (max-width: 720px) {
    body.sf-body #kunena #kstats .row > .col-md-3 {
        display: contents !important;
    }
    body.sf-body #kunena #kstats .row > .col-md-3 > ul.list-unstyled {
        display: contents !important;
    }
    body.sf-body #kunena #kstats .row {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 0.45rem 1.05rem !important;
        flex-direction: row !important;
    }
    body.sf-body #kunena #kstats .row > .col-md-3 > ul.list-unstyled > li {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        padding: 0.45rem 0.6rem !important;
        background: rgba(255,255,255,0.02);
        border-radius: 3.6px;
        font-size: 0.78rem !important;
        color: var(--sf-text-soft) !important;
        line-height: 1.35 !important;
    }
    body.sf-body #kunena #kstats .row > .col-md-3 > ul.list-unstyled > li strong {
        color: var(--sf-text) !important;
        font-size: 1.05rem;
        font-weight: 600;
        margin-top: 0.1125rem;
    }
    /* Members card: same treatment for the legend list */
    body.sf-body #kunena #kwho .row > .col-md-11 {
        display: block !important;
    }
}

/* ============================================================
   FINAL OVERRIDE: Statistics card on phone — high specificity
   to defeat everything else stacked above it
   ============================================================ */
@media (max-width: 720px) {
    body.sf-body #kunena div#kstats div.card-body div.container div.row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.45rem !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    body.sf-body #kunena div#kstats div.row > div.col-md-1,
    body.sf-body #kunena div#kstats div.row > div.col-md-1 ul {
        display: none !important;
    }
    body.sf-body #kunena div#kstats div.row > div.col-md-3 {
        display: contents !important;
        max-width: none !important;
        width: auto !important;
        flex: none !important;
        padding: 0 !important;
    }
    body.sf-body #kunena div#kstats div.row > div.col-md-3 > ul.list-unstyled {
        display: contents !important;
    }
    body.sf-body #kunena div#kstats div.row > div.col-md-3 > ul.list-unstyled > li {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.1125rem !important;
        padding: 0.45rem 0.675rem !important;
        margin: 0 !important;
        background: rgba(255,255,255,0.025) !important;
        border-radius: 3.6px !important;
        font-size: 0.78rem !important;
        line-height: 1.3 !important;
        color: var(--sf-text-soft) !important;
    }
    body.sf-body #kunena div#kstats div.row > div.col-md-3 > ul.list-unstyled > li strong {
        color: var(--sf-text) !important;
        font-size: 1.05rem !important;
        font-weight: 600 !important;
    }
}

/* Members & Stats cards on desktop: add proper internal spacing.
   Default 2.4px li padding makes lines feel cramped against each
   other. Bump to 0.4rem for breathing room. */
@media (min-width: 721px) {
    body.sf-body #kunena #kwho .card-body,
    body.sf-body #kunena #kstats .card-body {
        padding: 1.5rem 1.725rem !important;
    }
    body.sf-body #kunena #kwho .row,
    body.sf-body #kunena #kstats .row {
        align-items: center !important;
        gap: 1.05rem;
    }
    body.sf-body #kunena #kwho .col-md-1,
    body.sf-body #kunena #kstats .col-md-1 {
        flex: 0 0 auto !important;
        width: auto !important;
    }
    body.sf-body #kunena #kwho .col-md-1 svg,
    body.sf-body #kunena #kstats .col-md-1 svg {
        width: 32.1px !important;
        height: 32.1px !important;
    }
    body.sf-body #kunena #kwho ul.list-unstyled li,
    body.sf-body #kunena #kstats ul.list-unstyled li {
        padding: 0.45rem 0 !important;
        line-height: 1.65 !important;
    }
    body.sf-body #kunena #kwho ul.list-unstyled li + li,
    body.sf-body #kunena #kstats ul.list-unstyled li + li {
        border-top: 1px solid rgba(255,255,255,0.04);
    }
}

/* ============================================================
   TABLET (721-991px): Statistics card uses 2-col grid
   ============================================================
   Desktop has plenty of room for 3 vertical columns of stats but
   tablet (~800px wide) crams them. Use the same 2-column flatten
   as phone, with slightly more comfortable padding/text. */
@media (min-width: 721px) and (max-width: 991px) {
    body.sf-body #kunena div#kstats div.card-body div.container div.row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.45rem 0.75rem !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    body.sf-body #kunena div#kstats div.row > div.col-md-1 {
        display: none !important;
    }
    body.sf-body #kunena div#kstats div.row > div.col-md-3 {
        display: contents !important;
        max-width: none !important;
        width: auto !important;
        flex: none !important;
        padding: 0 !important;
    }
    body.sf-body #kunena div#kstats div.row > div.col-md-3 > ul.list-unstyled {
        display: contents !important;
    }
    body.sf-body #kunena div#kstats div.row > div.col-md-3 > ul.list-unstyled > li {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.15rem !important;
        padding: 0.675rem 0.825rem !important;
        margin: 0 !important;
        background: rgba(255,255,255,0.025) !important;
        border-radius: 3.6px !important;
        border-top: 0 !important;
        font-size: 0.825rem !important;
        line-height: 1.35 !important;
        color: var(--sf-text-soft) !important;
    }
    body.sf-body #kunena div#kstats div.row > div.col-md-3 > ul.list-unstyled > li strong {
        color: var(--sf-text) !important;
        font-size: 1.05rem !important;
        font-weight: 600 !important;
    }
}

/* === FINAL: nuke Kunena's navbar with !important regardless of any
   other display rule that might reset it elsewhere === */
nav.navbar.navbar-light.bg-light,
#kunena nav.navbar,
#kunena > nav.navbar,
.layout > nav.navbar.navbar-light,
.knav-offcanvas {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* === Footer phone padding ===
   Single rule on the footer itself so every child inside (brand,
   latest topics, menu items, legal bar) sits at the same horizontal
   offset from the screen edges. No competing inner-container rules.
   Legal bar grid collapses to a single left-aligned column so © /
   meta / Privacy·Terms·Cookies / weblio.no stack flush-left like
   the menu items above. */
@media (max-width: 720px) {
    body.sf-body footer.sf-footer {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
    body.sf-body footer.sf-footer .sf-container,
    body.sf-body footer.sf-footer .sf-footer__cols,
    body.sf-body footer.sf-footer .sf-footer__legal,
    body.sf-body footer.sf-footer .sf-footer__legal-inner {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* Bump left padding on Latest Topics list links + Forum Menu links
       so they align vertically with the inner content of the cards above
       (Wellness Integration title etc., which sit ~4px further inset than
       the card edge). Footer-legal not touched. */
    body.sf-body footer.sf-footer .klatest-subject a,
    body.sf-body footer.sf-footer .klatest-subject a.topictitle,
    body.sf-body footer.sf-footer .mod-menu a {
        padding-left: 3.6px !important;
    }
    /* Phone legal layout:
       Row 1: disclaimer (full width)
       Row 2: © (left) | Privacy · Terms · Cookies (center) | weblio.no (right) */
    body.sf-body footer.sf-footer .sf-footer__legal-inner > div.mod-custom {
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        grid-template-areas:
            "meta meta meta"
            "copy links credit" !important;
        align-items: center !important;
        gap: 0.45rem 0.75rem !important;
        width: 100% !important;
    }
    body.sf-body footer.sf-footer .sf-footer__legal-inner > div.mod-custom > p:nth-of-type(1) {
        grid-area: copy !important;
        justify-self: start !important;
        text-align: left !important;
    }
    body.sf-body footer.sf-footer .sf-footer__legal-inner .sf-footer__legal-meta {
        grid-area: meta !important;
        justify-self: stretch !important;
        text-align: left !important;
    }
    body.sf-body footer.sf-footer .sf-footer__legal-inner .sf-footer__legal-links {
        grid-area: links !important;
        justify-self: center !important;
        text-align: center !important;
    }
    body.sf-body footer.sf-footer .sf-footer__credit {
        grid-area: credit !important;
        justify-self: end !important;
        text-align: right !important;
    }
}

/* Kunena in-category search button: drop the gold border, match the
   adjacent input's vein border so the search icon sits in a unified
   pill rather than a gold-bordered chip. */
body.sf-body #kunena .kunena-search .input-group button.btn,
body.sf-body #kunena .kunena-search .input-group button.btn-outline-primary {
    border-color: var(--sf-vein) !important;
    border-left-color: transparent !important;
    background: var(--sf-stone-3) !important;
    color: var(--sf-text-soft) !important;
}
body.sf-body #kunena .kunena-search .input-group button.btn:hover {
    color: var(--sf-gold) !important;
    background: var(--sf-stone-2) !important;
}

/* Kunena renders the breadcrumb nav twice on category pages (once
   above content, once below). Our flex order: -1 pulls both to the
   top, showing the breadcrumb twice. Keep only the first. */
body.sf-body #kunena nav.pagination-container-links ~ nav.pagination-container-links {
    display: none !important;
}

/* Phone view: brand name "Shungite Forum" was sized for desktop nav.
   Bump it on phone since the right-side nav is collapsed and the
   brand becomes the dominant header element. */
@media (max-width: 720px) {
    body.sf-body .sf-brand__name {
        font-size: 1.125rem !important;
        line-height: 1.15 !important;
    }
    body.sf-body .sf-brand__sub {
        font-size: 0.6075rem !important;
        line-height: 1.1 !important;
        letter-spacing: 0.12em;
    }
}

/* ============================================================
   KUNENA REPORT MODAL & generic Bootstrap modals inside Kunena
   ============================================================
   The Report message modal shipped with Bootstrap card defaults
   (white bg, dark text) which is invisible on our dark theme.
   Also covers the Quick Reply modal which uses the same pattern. */
body.sf-body #kunena .modal-dialog .card,
body.sf-body #kunena .modal-dialog .card.card-body,
body.sf-body #kunena .modal-content {
    background: var(--sf-stone-2) !important;
    background-color: var(--sf-stone-2) !important;
    color: var(--sf-text) !important;
    border: 1px solid var(--sf-vein) !important;
    border-radius: 7.8px !important;
}
body.sf-body #kunena .modal-dialog .control-group {
    margin-bottom: 1.05rem;
}
body.sf-body #kunena .modal-dialog .control-label,
body.sf-body #kunena .modal-dialog label {
    color: var(--sf-text-soft) !important;
    font-weight: 500;
    font-size: 0.9rem;
    margin-bottom: 0.45rem;
    display: block;
}
body.sf-body #kunena .modal-dialog .controls input[type="text"],
body.sf-body #kunena .modal-dialog .controls textarea,
body.sf-body #kunena .modal-dialog .form-control {
    background: var(--sf-coal) !important;
    background-color: var(--sf-coal) !important;
    color: var(--sf-text) !important;
    border: 1px solid var(--sf-vein) !important;
    border-radius: 3.6px !important;
    padding: 0.45rem 0.75rem !important;
    width: 100% !important;
    font-family: var(--sf-font-body);
    font-size: 0.9375rem;
}
body.sf-body #kunena .modal-dialog .controls input[type="text"]:focus,
body.sf-body #kunena .modal-dialog .controls textarea:focus,
body.sf-body #kunena .modal-dialog .form-control:focus {
    border-color: var(--sf-gold) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.15) !important;
}

/* Modal action buttons */
body.sf-body #kunena .modal-dialog .controls input[type="submit"],
body.sf-body #kunena .modal-dialog .controls .btn {
    margin-right: 0.45rem;
}
body.sf-body #kunena .modal-dialog .controls input[type="submit"].btn-outline-primary,
body.sf-body #kunena .modal-dialog .controls .btn-outline-primary {
    background: var(--sf-gold) !important;
    background-color: var(--sf-gold) !important;
    color: var(--sf-coal) !important;
    border: 1px solid var(--sf-gold) !important;
    font-weight: 600;
}
body.sf-body #kunena .modal-dialog .controls input[type="submit"].btn-outline-primary:hover,
body.sf-body #kunena .modal-dialog .controls .btn-outline-primary:hover {
    background: var(--sf-gold-bright) !important;
    border-color: var(--sf-gold-bright) !important;
}
body.sf-body #kunena .modal-dialog .controls .btn-secondary {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--sf-text-soft) !important;
    border: 1px solid var(--sf-vein) !important;
}
body.sf-body #kunena .modal-dialog .controls .btn-secondary:hover {
    color: var(--sf-text) !important;
    border-color: var(--sf-text-soft) !important;
}

/* Modal backdrop */
body.sf-body .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.7) !important;
}
body.sf-body .modal-backdrop.show {
    opacity: 1 !important;
}

/* Modal header (if present in any modal) */
body.sf-body #kunena .modal-header {
    background: var(--sf-stone-3) !important;
    color: var(--sf-text) !important;
    border-bottom: 1px solid var(--sf-vein) !important;
    padding: 1.05rem 1.275rem !important;
}
body.sf-body #kunena .modal-header .modal-title {
    color: var(--sf-text) !important;
    font-weight: 600;
    font-size: 1.05rem;
}
body.sf-body #kunena .modal-header .btn-close {
    filter: invert(1);
    opacity: 0.7;
}
body.sf-body #kunena .modal-header .btn-close:hover {
    opacity: 1;
}

/* ============================================================
   KUNENA POST ACTION TOOLBAR (Quick Reply, Action dropdown)
   ============================================================
   The btn-toolbar below each post had loud gold borders. Tone
   them to vein color so they read as utility buttons, not CTAs. */
body.sf-body #kunena .btn-toolbar.kmessagepadding .btn,
body.sf-body #kunena .btn-toolbar.kmessagepadding button.btn,
body.sf-body #kunena .btn-toolbar.kmessagepadding .btn-outline-primary,
body.sf-body #kunena .btn-toolbar.kmessagepadding .btn-secondary {
    background: var(--sf-stone-3) !important;
    background-color: var(--sf-stone-3) !important;
    color: var(--sf-text-soft) !important;
    border: 1px solid var(--sf-vein) !important;
    font-size: 0.8925rem !important;
    padding: 0.45rem 0.825rem !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center;
    gap: 0.45rem;
}
body.sf-body #kunena .btn-toolbar.kmessagepadding .btn:hover,
body.sf-body #kunena .btn-toolbar.kmessagepadding button.btn:hover {
    background: var(--sf-stone-2) !important;
    color: var(--sf-gold) !important;
    border-color: var(--sf-gold) !important;
}
body.sf-body #kunena .btn-toolbar.kmessagepadding .btn-group .btn {
    border-radius: 0;
}
body.sf-body #kunena .btn-toolbar.kmessagepadding .btn-group .btn:first-child {
    border-top-left-radius: 3.6px;
    border-bottom-left-radius: 3.6px;
}
body.sf-body #kunena .btn-toolbar.kmessagepadding .btn-group .btn:last-child {
    border-top-right-radius: 3.6px;
    border-bottom-right-radius: 3.6px;
}
body.sf-body #kunena .btn-toolbar.kmessagepadding {
    gap: 0.45rem;
    margin-top: 1.05rem !important;
    padding-top: 1.05rem !important;
    border-top: 1px solid var(--sf-vein);
}

/* Topic post: trim the giant 48px (Bootstrap .mb-5) bottom margin under
   the message body — the Report row + Quick Reply toolbar sit right after,
   and they don't need that much breathing room. */
body.sf-body #kunena .col-md-10 > .shadow-none.p-4.mb-5 {
    margin-bottom: 0.9rem !important;
}
body.sf-body #kunena .col-md-10 > .report.pb-5 {
    padding-bottom: 0 !important;
}
/* Topic-page in-thread search bar: needs breathing room from the row above. */
body.sf-body.option-kunena.view-topic #kunena .kunena-search {
    margin-top: 1.125rem;
    margin-bottom: 0.9rem;
}
/* Topic-page post layout: slim the avatar/profile column so the post body
   gets more reading width without losing the sidebar. col-md-2 (16.6%) →
   12% recovers ~38px of horizontal text space. */
@media (min-width: 992px) {
    body.sf-body.option-kunena.view-topic #kunena .row.message > .col-md-2 {
        flex: 0 0 12%;
        max-width: 12%;
    }
    body.sf-body.option-kunena.view-topic #kunena .row.message > .col-md-10 {
        flex: 0 0 87%;
        max-width: 87%;
    }
}

/* Action dropdown menu (when opened) */
body.sf-body #kunena .dropdown-menu {
    background: var(--sf-stone-2) !important;
    border: 1px solid var(--sf-vein) !important;
    border-radius: 6px !important;
    padding: 0.45rem 0 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
}
body.sf-body #kunena .dropdown-menu .dropdown-item {
    color: var(--sf-text-soft) !important;
    padding: 0.45rem 1.05rem !important;
    font-size: 0.9rem !important;
}
body.sf-body #kunena .dropdown-menu .dropdown-item:hover,
body.sf-body #kunena .dropdown-menu .dropdown-item:focus {
    background: var(--sf-stone-3) !important;
    color: var(--sf-gold) !important;
}
body.sf-body #kunena .dropdown-menu .dropdown-divider {
    border-top: 1px solid var(--sf-vein) !important;
    margin: 0.3rem 0 !important;
}

/* ============================================================
   KUNENA "Must log in to participate" GATE (/topic/create as guest)
   ============================================================
   Render the .kloginform.center as a proper centered login card
   instead of full-width body text + bare form. */
body.sf-body #kunena .kloginform.center {
    max-width: 480px;
    margin: 2.025rem auto;
    background: var(--sf-stone-2);
    border: 1px solid var(--sf-vein);
    border-radius: 7.8px;
    padding: 2.025rem 2.25rem;
}
body.sf-body #kunena .kloginform.center > h1 {
    font-size: 1.275rem !important;
    line-height: 1.4 !important;
    text-align: center;
    margin: 0 0 1.5rem !important;
    padding-bottom: 1.05rem !important;
    border-bottom: 1px solid var(--sf-vein) !important;
    color: var(--sf-text) !important;
    font-weight: 500 !important;
}
body.sf-body #kunena .kloginform.center form {
    display: flex;
    flex-direction: column;
    gap: 0.825rem;
}
body.sf-body #kunena .kloginform.center .control-group {
    margin: 0;
}
body.sf-body #kunena .kloginform.center .input-prepend.input-append {
    display: flex;
    align-items: stretch;
    width: 100%;
}
body.sf-body #kunena .kloginform.center .input-prepend.input-append .add-on {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    background: var(--sf-stone-3);
    border: 1px solid var(--sf-vein);
    border-right: 0;
    border-top-left-radius: 3.6px;
    border-bottom-left-radius: 3.6px;
    color: var(--sf-text-soft);
}
body.sf-body #kunena .kloginform.center .input-prepend.input-append .add-on svg {
    width: 18px;
    height: 18px;
    opacity: 0.8;
}
body.sf-body #kunena .kloginform.center input[type="text"],
body.sf-body #kunena .kloginform.center input[type="password"] {
    flex: 1;
    width: auto !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
body.sf-body #kunena .kloginform.center input[type="text"]:focus,
body.sf-body #kunena .kloginform.center input[type="password"]:focus {
    border-color: var(--sf-gold) !important;
    box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.15) !important;
    outline: none !important;
}
body.sf-body #kunena .kloginform.center button[type="submit"],
body.sf-body #kunena .kloginform.center .btn.btn-outline-primary {
    background: var(--sf-gold) !important;
    background-color: var(--sf-gold) !important;
    color: var(--sf-coal) !important;
    border: 1px solid var(--sf-gold) !important;
    width: 100%;
    padding: 0.75rem 1.05rem !important;
    font-weight: 600 !important;
    font-size: 0.9375rem !important;
    margin-top: 0.45rem;
}
body.sf-body #kunena .kloginform.center button[type="submit"]:hover {
    background: var(--sf-gold-bright) !important;
    border-color: var(--sf-gold-bright) !important;
}
body.sf-body #kunena .kloginform.center #kform-login-submit p {
    margin: 0;
}
body.sf-body #kunena .kloginform.center #kform-login-submit p:last-child {
    margin-top: 1.05rem;
    padding-top: 1.05rem;
    border-top: 1px solid var(--sf-vein);
    text-align: center;
    line-height: 2;
    font-size: 0.8925rem;
}
body.sf-body #kunena .kloginform.center #kform-login-submit p:last-child a {
    color: var(--sf-text-soft) !important;
    text-decoration: none;
}
body.sf-body #kunena .kloginform.center #kform-login-submit p:last-child a:hover {
    color: var(--sf-gold) !important;
}
body.sf-body #kunena .kloginform.center #kform-login-submit p:last-child br {
    display: block;
    content: "";
    margin-top: 0.1875rem;
}

/* Kunena hidden labels need to actually stay hidden (.element-invisible
   is Kunena's screen-reader-only class) */
body.sf-body #kunena .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;
}

/* Hide the per-post "{title} was created by {user}" header strip.
   Redundant: the topic title is at the top of the page, the user
   is shown in the avatar block to the left of each post. */
body.sf-body #kunena .mykmsg-header {
    display: none !important;
}

/* Hide the "Captcha *" label on registration / contact / any com_users form.
   POWCaptcha is invisible by design — proof-of-work runs in a Web Worker
   with nothing for the user to do. Showing a "Captcha *" label sets the
   wrong expectation; people wait for a reCAPTCHA-style puzzle that never
   loads and assume the form is broken. The hidden ALTCHA <input> is still
   in the DOM and submits its proof normally; only the visual chrome goes. */
body.sf-body #jform_captcha-lbl,
body.sf-body .control-group:has(#jform_captcha-lbl) {
    display: none !important;
}
/* Collapse the empty fieldset wrapper that only held the captcha — its
   1.5rem bottom margin pushes .sf-register-note below the fold on phones. */
body.sf-body form#member-registration fieldset:has(#jform_captcha-lbl) {
    display: none !important;
}

/* "Report This" button under each post: Kunena gives it .btn-outline-primary
   with .float-end, but our base #kunena .btn rule overrides padding/display
   so it sits as a full-width chunky button. Repaint as a small, subdued
   inline-flex action — properly right-aligned, low-emphasis (it's a
   moderation tool 99% of users will never click). */
body.sf-body #kunena .report.pb-5 {
    display: flex;
    justify-content: flex-end;
    margin-left: 0 !important;
    padding-bottom: 0.75rem !important;
    padding-right: 0.45rem;
}
body.sf-body #kunena a#btn_report.kbutton-report,
body.sf-body #kunena a.kbutton-report {
    display: inline-flex !important;
    align-items: center;
    gap: 0.45rem;
    width: auto !important;
    padding: 0.45rem 0.75rem !important;
    font-size: 0.78rem !important;
    font-weight: 400 !important;
    color: var(--sf-text-mute) !important;
    background: transparent !important;
    border: 1px solid var(--sf-vein) !important;
    border-radius: var(--sf-radius) !important;
    text-decoration: none !important;
    float: none !important;
    transition: color 0.15s ease, border-color 0.15s ease;
}
body.sf-body #kunena a#btn_report.kbutton-report:hover,
body.sf-body #kunena a.kbutton-report:hover {
    color: var(--sf-text-soft) !important;
    border-color: var(--sf-vein-light) !important;
}
body.sf-body #kunena a.kbutton-report svg {
    width: 0.825em;
    height: 0.825em;
    opacity: 0.7;
}

/* =========================================================================
   FOOTER LATEST TOPICS — mobile: allow up to 5 lines for long titles
   The desktop fixed-row design (38.1px height + nowrap + ellipsis) is for
   row-alignment between Latest Topics and Forum Menu columns. On phone the
   columns stack anyway, so the alignment constraint disappears and we can
   let titles breathe.
   ========================================================================= */
@media (max-width: 720px) {
    /* Row container: drop fixed height, allow content to define it */
    body.sf-body .sf-footer .klatest-item {
        height: auto !important;
        overflow: visible !important;
    }

    /* Title link: allow wrapping, clamp to 5 lines instead of 1 */
    body.sf-body .sf-footer .klatest-subject a,
    body.sf-body .sf-footer .klatest-subject a.topictitle {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 5 !important;
        -webkit-box-orient: vertical !important;
        line-height: 1.4 !important;
        padding: 0.5rem 0 !important;
    }
}

/* =========================================================================
   BACK TO TOP — slim arrow only, fades in on scroll
   ========================================================================= */
.sf-totop {
    position: fixed;
    right: 1.1rem;
    bottom: 1.1rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--sf-vein-light, rgba(201, 169, 110, 0.18));
    border-radius: 50%;
    background: rgba(10, 10, 10, 0.72);
    color: var(--sf-gold, #c9a96e);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, color 0.15s ease, border-color 0.15s ease;
    z-index: 9000;
}
.sf-totop.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.sf-totop:hover {
    color: var(--sf-gold-bright, #e0bd80);
    border-color: var(--sf-gold, #c9a96e);
}
.sf-totop svg {
    width: 14px;
    height: 14px;
    stroke-width: 1.6;
}

/* =========================================================================
   KUNENA QUICK-REPLY MODAL — proper mobile sizing + clean structure
   The Kunena reply modal is an inline-flow pseudo-modal (data-bs-backdrop=
   "false"), not a real overlay. Treat it as an inline form card. Scoped
   tightly to [id^="kreply"][id$="_form"] so it cannot leak into PM, login,
   attachment, or any other Kunena modal.
   ========================================================================= */
body.sf-body #kunena [id^="kreply"][id$="_form"].modal {
    right: 0 !important;
    top: 0.6rem !important;
    width: 100% !important;
    overflow: visible !important;
}

body.sf-body #kunena [id^="kreply"][id$="_form"] .modal-dialog {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

body.sf-body #kunena [id^="kreply"][id$="_form"] .modal-content {
    border-radius: 0.5rem !important;
    border: 1px solid var(--sf-vein) !important;
}

body.sf-body #kunena [id^="kreply"][id$="_form"] .modal-header {
    padding: 0.85rem 1.1rem !important;
    border-bottom: 1px solid var(--sf-vein) !important;
    background: transparent !important;
}

body.sf-body #kunena [id^="kreply"][id$="_form"] .modal-title {
    font-size: 1rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
    flex: 1 1 auto;
    min-width: 0;
}

body.sf-body #kunena [id^="kreply"][id$="_form"] .modal-title a.kwho-user {
    color: var(--sf-gold) !important;
    font-weight: 600;
}

body.sf-body #kunena [id^="kreply"][id$="_form"] .modal-header .btn-close {
    margin: 0 0 0 0.75rem !important;
    padding: 0.4rem !important;
    width: 0.9em !important;
    height: 0.9em !important;
    flex: 0 0 auto;
}

body.sf-body #kunena [id^="kreply"][id$="_form"] .modal-body {
    padding: 1rem 1.1rem !important;
}

body.sf-body #kunena [id^="kreply"][id$="_form"] .modal-body .card-body {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

body.sf-body #kunena [id^="kreply"][id$="_form"] .form-group {
    margin-bottom: 0.85rem;
}

body.sf-body #kunena [id^="kreply"][id$="_form"] .form-group .control-label,
body.sf-body #kunena [id^="kreply"][id$="_form"] .form-group label,
body.sf-body #kunena [id^="kreply"][id$="_form"] .form-group .col-md-12.control-label {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 0 0.35rem 0 !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    color: var(--sf-text-soft) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    float: none !important;
    text-align: left !important;
}

body.sf-body #kunena [id^="kreply"][id$="_form"] .form-control {
    background: var(--sf-stone-1) !important;
    border: 1px solid var(--sf-vein) !important;
    color: var(--sf-text) !important;
    font-size: 0.95rem !important;
    border-radius: 0.35rem !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.sf-body #kunena [id^="kreply"][id$="_form"] .form-control:focus {
    border-color: var(--sf-gold) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 2px rgba(201, 169, 110, 0.15) !important;
}

body.sf-body #kunena [id^="kreply"][id$="_form"] textarea.qreply {
    min-height: 8rem;
    resize: vertical;
    font-family: var(--sf-font-body);
    line-height: 1.5;
}

body.sf-body #kunena [id^="kreply"][id$="_form"] #mesubscribe {
    display: flex !important;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.6rem;
}

body.sf-body #kunena [id^="kreply"][id$="_form"] #mesubscribe input[type="checkbox"] {
    float: none !important;
    margin: 0 !important;
    flex: 0 0 auto;
    width: auto !important;
}

body.sf-body #kunena [id^="kreply"][id$="_form"] #mesubscribe label {
    margin: 0 !important;
    padding: 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 0.85rem !important;
    font-weight: 400 !important;
    cursor: pointer;
    color: var(--sf-text-soft) !important;
}

/* =========================================================================
   KUNENA QUICK-REPLY MODAL — pass 2: visible borders, consistent input bg,
   collapse the Subject<>Message background mismatch
   ========================================================================= */
body.sf-body #kunena [id^="kreply"][id$="_form"] .form-control,
body.sf-body #kunena [id^="kreply"][id$="_form"] input[type="text"],
body.sf-body #kunena [id^="kreply"][id$="_form"] textarea {
    background-color: var(--sf-coal) !important;
    border: 1px solid var(--sf-vein-light, rgba(201, 169, 110, 0.18)) !important;
    border-radius: 0.35rem !important;
    color: var(--sf-text) !important;
    padding: 0.55rem 0.75rem !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
}

body.sf-body #kunena [id^="kreply"][id$="_form"] .form-control:focus,
body.sf-body #kunena [id^="kreply"][id$="_form"] input[type="text"]:focus,
body.sf-body #kunena [id^="kreply"][id$="_form"] textarea:focus {
    border-color: var(--sf-gold) !important;
    background-color: var(--sf-stone-1) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 2px rgba(201, 169, 110, 0.18) !important;
}

body.sf-body #kunena [id^="kreply"][id$="_form"] .form-control::placeholder,
body.sf-body #kunena [id^="kreply"][id$="_form"] textarea::placeholder {
    color: var(--sf-text-faint) !important;
    opacity: 0.7;
}

/* Textarea-specific: a bit more breathing room, monospace-friendly line-height */
body.sf-body #kunena [id^="kreply"][id$="_form"] textarea.qreply,
body.sf-body #kunena [id^="kreply"][id$="_form"] textarea#editor {
    min-height: 9rem !important;
    resize: vertical !important;
    font-family: var(--sf-font-body) !important;
    line-height: 1.6 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* The "Go to editor.." link sits awkwardly with float-end inside a card-body
   — give it proper spacing and stop fighting the floating clearfix */
body.sf-body #kunena [id^="kreply"][id$="_form"] a.gotoeditor {
    float: none !important;
    display: inline-block;
    margin: 0.4rem 0 0 0;
    padding: 0.35rem 0.7rem !important;
    font-size: 0.82rem !important;
    color: var(--sf-text-soft) !important;
    border: 1px solid var(--sf-vein) !important;
    background: transparent !important;
    border-radius: 0.3rem !important;
    text-decoration: none !important;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

body.sf-body #kunena [id^="kreply"][id$="_form"] a.gotoeditor:hover {
    color: var(--sf-gold) !important;
    border-color: var(--sf-gold) !important;
    background: rgba(201, 169, 110, 0.06) !important;
}

/* Card footer (the Submit button row) — separator, padding, button styling */
body.sf-body #kunena [id^="kreply"][id$="_form"] .card-footer {
    background: transparent !important;
    border-top: 1px solid var(--sf-vein) !important;
    padding: 0.85rem 0 0 0 !important;
    margin-top: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    flex-wrap: wrap;
}

body.sf-body #kunena [id^="kreply"][id$="_form"] .card-footer small {
    color: var(--sf-text-faint) !important;
    font-size: 0.78rem !important;
    font-style: italic;
}

body.sf-body #kunena [id^="kreply"][id$="_form"] .card-footer input[type="submit"] {
    background: var(--sf-gold) !important;
    border: 0 !important;
    color: var(--sf-coal) !important;
    font-weight: 600 !important;
    padding: 0.55rem 1.4rem !important;
    border-radius: 0.35rem !important;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.05s ease;
}

body.sf-body #kunena [id^="kreply"][id$="_form"] .card-footer input[type="submit"]:hover {
    background: var(--sf-gold-bright, #e0bd80) !important;
}

body.sf-body #kunena [id^="kreply"][id$="_form"] .card-footer input[type="submit"]:active {
    transform: translateY(1px);
}

/* Collapse the empty trailing <br> after the Go-to-editor link inside card-body */
body.sf-body #kunena [id^="kreply"][id$="_form"] .card-body > br {
    display: none;
}

/* =========================================================================
   KUNENA QUICK-REPLY MODAL — pass 3: clean layout, proper button row
   Replaces ad-hoc float-end / clearfix / br stacking with explicit flex
   sections: [body] [actions] [note].
   ========================================================================= */

/* Strip the float-end positioning Kunena emits on the "Go to editor" link.
   We re-place it as a small inline-link below the message field. */
body.sf-body #kunena [id^="kreply"][id$="_form"] a.gotoeditor,
body.sf-body #kunena [id^="kreply"][id$="_form"] a.gotoeditor.float-end {
    float: none !important;
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--sf-text-faint) !important;
    font-size: 0.78rem !important;
    font-weight: 400 !important;
    text-decoration: underline !important;
    text-decoration-color: var(--sf-vein-light, rgba(201, 169, 110, 0.25)) !important;
    text-underline-offset: 3px;
    transition: color 0.15s ease;
}

body.sf-body #kunena [id^="kreply"][id$="_form"] a.gotoeditor:hover {
    color: var(--sf-gold) !important;
    text-decoration-color: var(--sf-gold) !important;
}

/* Hide stray <br> and clearfixes that Kunena emits to clear floats we no longer use */
body.sf-body #kunena [id^="kreply"][id$="_form"] .card-body > br,
body.sf-body #kunena [id^="kreply"][id$="_form"] .card-body > .clearfix {
    display: none !important;
}

/* Subscribe row: tighten gap with the gotoeditor link
   Layout: subscribe checkbox on the left, "Go to editor" link on the right */
body.sf-body #kunena [id^="kreply"][id$="_form"] .control-group:has(#mesubscribe) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0.4rem 0 0.6rem 0;
}

body.sf-body #kunena [id^="kreply"][id$="_form"] #mesubscribe {
    display: flex !important;
    align-items: center;
    gap: 0.55rem;
    margin: 0 !important;
    flex: 1 1 auto;
    min-width: 0;
}

/* Re-anchor the gotoeditor link onto the subscribe row */
body.sf-body #kunena [id^="kreply"][id$="_form"] .control-group:has(#mesubscribe) ~ a.gotoeditor {
    display: inline-block !important;
    margin-top: -2.5rem !important;
    margin-left: auto !important;
    float: right !important;
    position: relative;
    z-index: 1;
}

/* CARD FOOTER — proper button row with hierarchy
   Layout: [note] flex-grow ··· [cancel] [submit]
   ========================================================================= */
body.sf-body #kunena [id^="kreply"][id$="_form"] .card-footer {
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid var(--sf-vein) !important;
    padding: 0.85rem 0 0 0 !important;
    margin: 0.85rem 0 0 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.6rem !important;
    flex-wrap: wrap !important;
}

/* The BBcode note: small, muted, pushed to the left, line breaks gracefully */
body.sf-body #kunena [id^="kreply"][id$="_form"] .card-footer small {
    color: var(--sf-text-faint) !important;
    font-size: 0.74rem !important;
    font-style: italic;
    margin: 0 auto 0 0 !important;
    flex: 1 1 60%;
    min-width: 0;
}

/* SUBMIT button: primary gold action */
body.sf-body #kunena [id^="kreply"][id$="_form"] .card-footer input[type="submit"],
body.sf-body #kunena [id^="kreply"][id$="_form"] .card-footer button[type="submit"] {
    background: var(--sf-gold) !important;
    background-color: var(--sf-gold) !important;
    border: 0 !important;
    color: #1a1408 !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    padding: 0.55rem 1.4rem !important;
    border-radius: 0.35rem !important;
    cursor: pointer;
    line-height: 1.3 !important;
    transition: background 0.15s ease, transform 0.05s ease;
    flex: 0 0 auto;
    order: 2;
}

body.sf-body #kunena [id^="kreply"][id$="_form"] .card-footer input[type="submit"]:hover,
body.sf-body #kunena [id^="kreply"][id$="_form"] .card-footer button[type="submit"]:hover {
    background: var(--sf-gold-bright, #e0bd80) !important;
    background-color: var(--sf-gold-bright, #e0bd80) !important;
    color: #1a1408 !important;
}

body.sf-body #kunena [id^="kreply"][id$="_form"] .card-footer input[type="submit"]:active {
    transform: translateY(1px);
}

/* CANCEL button: secondary ghost style, sits to the LEFT of submit */
body.sf-body #kunena [id^="kreply"][id$="_form"] .card-footer .btn-secondary,
body.sf-body #kunena [id^="kreply"][id$="_form"] .card-footer button[data-bs-dismiss="modal"],
body.sf-body #kunena [id^="kreply"][id$="_form"] .card-footer a.btn[href*="cancel"],
body.sf-body #kunena [id^="kreply"][id$="_form"] .card-footer .btn:not([type="submit"]):not(.btn-primary) {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid var(--sf-vein) !important;
    color: var(--sf-text-soft) !important;
    font-weight: 500 !important;
    font-size: 0.88rem !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0.35rem !important;
    line-height: 1.3 !important;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    flex: 0 0 auto;
    order: 1;
}

body.sf-body #kunena [id^="kreply"][id$="_form"] .card-footer .btn-secondary:hover,
body.sf-body #kunena [id^="kreply"][id$="_form"] .card-footer button[data-bs-dismiss="modal"]:hover,
body.sf-body #kunena [id^="kreply"][id$="_form"] .card-footer .btn:not([type="submit"]):not(.btn-primary):hover {
    color: var(--sf-text) !important;
    border-color: var(--sf-text-soft) !important;
    background: rgba(255, 255, 255, 0.03) !important;
}

/* Kill any stray <br> elements between or after buttons in the footer */
body.sf-body #kunena [id^="kreply"][id$="_form"] .card-footer br {
    display: none !important;
}

/* =========================================================================
   BACK TO TOP — slim arrow only, no circle, no chrome
   Override the earlier circle/border/backdrop-filter design with a bare
   arrow icon. When the footer enters viewport, the button lifts above it
   to avoid overlap with footer content.
   ========================================================================= */
.sf-totop {
    background: transparent !important;
    border: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    width: auto !important;
    height: auto !important;
    padding: 0.5rem !important;
    border-radius: 0 !important;
    color: var(--sf-gold, #c9a96e);
    transition: opacity 0.2s ease, transform 0.2s ease, color 0.15s ease, bottom 0.25s ease;
}

.sf-totop:hover {
    color: var(--sf-gold-bright, #e0bd80);
    border: 0 !important;
    background: transparent !important;
}

.sf-totop svg {
    width: 18px;
    height: 18px;
    stroke-width: 2;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
}

/* When the footer is in view, lift the button so it doesn't overlap
   footer content (e.g. "Feedback" link in legal row). */
.sf-totop.is-near-footer {
    bottom: var(--sf-totop-footer-offset, 9rem) !important;
}

/* ============================================================
   Book promo (sidebar)
   Cover, title, two CTAs. Matches the gold/stone palette
   established in the rest of the template.
   ============================================================ */

.sf-book-promo {
    background: linear-gradient(180deg, var(--sf-stone-2) 0%, var(--sf-coal) 100%);
    border: 1px solid var(--sf-vein);
    border-radius: var(--sf-radius-lg);
    padding: 1.25rem;
    box-shadow: var(--sf-shadow-lg);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.sf-book-promo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(201, 169, 110, 0.08) 0%, transparent 60%);
    pointer-events: none;
}

.sf-book-promo__cover {
    display: block;
    margin: 0 auto 0.9rem;
    border-radius: var(--sf-radius);
    overflow: hidden;
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(201, 169, 110, 0.18);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    position: relative;
    z-index: 1;
}

.sf-book-promo__cover:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--sf-gold);
}

.sf-book-promo__cover img {
    display: block;
    width: 100%;
    height: auto;
}

.sf-book-promo__title {
    font-family: var(--sf-font-display);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--sf-text);
    margin: 0 0 0.35rem;
    line-height: 1.3;
    position: relative;
    z-index: 1;
}

.sf-book-promo__sub {
    font-size: 0.8125rem;
    color: var(--sf-text-soft);
    line-height: 1.45;
    margin: 0 0 1rem;
    position: relative;
    z-index: 1;
}

.sf-book-promo__alts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
    position: relative;
    z-index: 1;
}

.sf-book-promo__alt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.6rem 0.4rem;
    background: transparent;
    color: var(--sf-text-soft);
    border: 1px solid var(--sf-vein);
    border-radius: var(--sf-radius);
    text-decoration: none;
    transition: all 0.15s ease;
}

.sf-book-promo__alt:hover {
    color: var(--sf-text);
    border-color: var(--sf-gold-deep);
    background: var(--sf-stone-2);
    text-decoration: none;
}

.sf-book-promo__alt-name {
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.sf-book-promo__alt-price {
    font-family: var(--sf-font-display);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--sf-gold);
}

.sf-book-promo__meta {
    margin-top: 0.85rem;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sf-text-mute);
    position: relative;
    z-index: 1;
}

/* ---- Book promo: viewport-specific visibility -------------------- */
.sf-book-promo--desktop { display: block; }
.sf-book-promo--mobile  { display: none; }

@media (max-width: 991px) {
    .sf-book-promo--desktop { display: none; }
    .sf-book-promo--mobile  { display: block; margin: 1.5rem 0; }
}

/* ---- Book promo: hero bundle card -------- */
.sf-book-promo__bundle {
    display: block;
    position: relative;
    margin: 0.4rem 0 1.05rem;
    padding: 1rem 0.9rem 0.85rem;
    background: linear-gradient(180deg, var(--sf-gold) 0%, #b8956a 100%);
    border: 1px solid var(--sf-gold-deep);
    border-radius: var(--sf-radius);
    color: var(--sf-black);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    z-index: 1;
}

.sf-book-promo__bundle:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px -10px rgba(201, 169, 110, 0.65);
    color: var(--sf-black);
    text-decoration: none;
}

.sf-book-promo__bundle-badge {
    position: absolute;
    top: -0.55rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.2rem 0.65rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: var(--sf-coal);
    color: var(--sf-gold);
    border: 1px solid var(--sf-gold-deep);
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.5);
}

.sf-book-promo__bundle-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.55rem;
    margin: 0.15rem 0 0.2rem;
}

.sf-book-promo__bundle-name {
    font-family: var(--sf-font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.sf-book-promo__bundle-price {
    font-family: var(--sf-font-display);
    font-size: 1.2rem;
    font-weight: 700;
}

.sf-book-promo__bundle-formats {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.78;
    text-align: center;
}

.sf-book-promo__free {
    display: block;
    margin-top: 0.85rem;
    font-size: 0.8125rem;
    color: var(--sf-text-soft);
    text-decoration: none;
    text-align: center;
    transition: color 0.2s ease;
    position: relative;
    z-index: 1;
}

.sf-book-promo__free:hover {
    color: var(--sf-gold);
}