@charset "utf-8";
/* eMJey-Forum 2.0 — base stylesheet
 * Modern shell that wraps Kunena 7 / Aurelia. Brown / beige BAD25 palette,
 * fully responsive. RTL adjustments live in template_rtl.css; Kunena-specific
 * tweaks live in forum-kunena.css.
 */

/* ---------- Tokens ---------- */
:root {
    --emjey-bg-page:        #2a2a2a;     /* dark frame around the centered shell  */
    --emjey-bg-shell:       #1a1f3a;     /* deep blue band behind the white card  */
    --emjey-bg-content:     #ffffff;     /* card surface where Kunena renders     */
    --emjey-bg-banner:      #333333;     /* matches the BAD25 banner edge         */
    --emjey-bg-copyright:   #333333;     /* matches the copyright strip edge      */
    --emjey-text:           #2a2a2a;
    --emjey-muted:          #6b6b6b;
    --emjey-link:           #1f4f9e;
    --emjey-link-hover:     #c41e3a;
    --emjey-radius:         8px;
    --emjey-shadow:         0 4px 14px rgba(0, 0, 0, .25);
    --emjey-shell-max:      1100px;
    --emjey-font:           Tahoma, Geneva, "Vazirmatn", "IRANSans", "B Nazanin", Arial, sans-serif;
    --emjey-content-pad:    1.25rem;
}

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

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--emjey-bg-page);
    color: var(--emjey-text);
    font-family: var(--emjey-font);
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
    min-height: 100vh;
}

a {
    color: var(--emjey-link);
    text-decoration: none;
}
a:hover, a:focus { color: var(--emjey-link-hover); text-decoration: underline; }

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

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

/* ---------- Shell ---------- */
.emjey-shell {
    width: 100%;
    max-width: var(--emjey-shell-max);
    margin: 0 auto;
    background: var(--emjey-bg-shell);
    box-shadow: var(--emjey-shadow);
    text-align: start;
    overflow: hidden; /* clips banner edges to the rounded shell only */
}

/* ---------- Banner ---------- */
.emjey-banner {
    background: var(--emjey-bg-banner);
    text-align: center;
    line-height: 0; /* removes phantom whitespace under the image */
}
.emjey-banner-link { display: block; }
.emjey-banner-img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
}
.emjey-banner-modules {
    line-height: 1.4;
    background: var(--emjey-bg-banner);
    color: #fff;
    padding: .5rem 1rem;
    text-align: center;
}
.emjey-banner-modules a { color: #ffd479; }

/* ---------- Site menu in the forum header ----------
   mod_menu renders a bare <ul>; without this the items butt together. */
.emjey-forum-sitemenu ul,
.emjey-banner-modules ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .35rem 1.6rem;
}
.emjey-forum-sitemenu li,
.emjey-banner-modules li { margin: 0; }
.emjey-forum-sitemenu a,
.emjey-banner-modules a {
    display: inline-block;
    padding: .15rem .1rem;
    text-decoration: none;
    white-space: nowrap;
}
.emjey-forum-sitemenu a:hover,
.emjey-forum-sitemenu a:focus-visible,
.emjey-banner-modules a:hover,
.emjey-banner-modules a:focus-visible {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.emjey-forum-sitemenu .current > a,
.emjey-forum-sitemenu .active > a { color: #fff; font-weight: 600; }

@media (max-width: 640px) {
    .emjey-forum-sitemenu ul,
    .emjey-banner-modules ul { gap: .3rem 1rem; font-size: .92rem; }
}

/* ---------- User menu ---------- */
.emjey-usermenu {
    background: #ffffff;
    border-bottom: 1px solid #e0d8c4;
    padding: .6rem 1rem;
    text-align: center;
}
.emjey-usermenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    justify-content: center;
}
.emjey-usermenu li { margin: 0; padding: 0; }
.emjey-usermenu a {
    display: inline-block;
    padding: .35rem .75rem;
    border-radius: 4px;
    color: var(--emjey-text);
    font-weight: 600;
}
.emjey-usermenu a:hover,
.emjey-usermenu .current > a,
.emjey-usermenu .active > a {
    background: #f0e9d8;
    color: var(--emjey-link-hover);
    text-decoration: none;
}

/* ---------- Main content card ---------- */
.emjey-main {
    background: var(--emjey-bg-content);
    color: var(--emjey-text);
    padding: var(--emjey-content-pad);
    text-align: start;
    min-height: 240px;
    /* IMPORTANT: do NOT set overflow:hidden here — it clips Kunena dropdowns / tooltips */
}

/* When something inside the main area uses Bootstrap rows, behave correctly */
.emjey-main > .row { margin-inline: 0; }

/* ---------- Footer modules + copyright ---------- */
.emjey-footer-modules {
    background: #f7f1e1;
    border-top: 1px solid #e0d8c4;
    padding: 1rem;
}
.emjey-copyright {
    background: var(--emjey-bg-copyright);
    text-align: center;
    line-height: 0;
}
.emjey-copyright-img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

/* ---------- Joomla messages ---------- */
#system-message-container { margin: 0 0 1rem 0; }

/* ---------- Edit-module / front-end-edit popup containment ---------- */
/* Joomla shows admin-only inline edit popups when logged in; those were
   leaking out of the legacy table cell. Keep them positioned correctly. */
.jmoddiv, .jmodedit, .jmodinside {
    position: relative;
    z-index: 5;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    :root { --emjey-content-pad: .85rem; }
    body { font-size: 13px; }
    .emjey-shell { max-width: 100%; }
    .emjey-usermenu ul { gap: .25rem .5rem; }
}

@media (max-width: 480px) {
    .emjey-usermenu a { padding: .25rem .45rem; font-size: 12px; }
}

/* ---------- Print ---------- */
@media print {
    body { background: #fff; }
    .emjey-banner, .emjey-usermenu, .emjey-footer-modules, .emjey-copyright { display: none; }
    .emjey-shell { box-shadow: none; max-width: 100%; }
}