/**
 * Lumen site template - core stylesheet.
 * Minimalist single-column editorial: one narrow reading measure, generous
 * whitespace, hairline rules, monochrome surface + a single per-site accent.
 * Accent is set via body.variant-* classes (anti-footprint).
 */

:root {
    --ne-bg: #ffffff;
    --ne-surface: #ffffff;
    --ne-border: #e6e6e6;
    --ne-text: #1a1a1a;
    --ne-text-muted: #6b6b6b;
    --ne-heading: #0a0a0a;
    --ne-radius: 0;
    --ne-measure: 720px;
    --ne-font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --ne-font-head: var(--ne-font-body);

    /* Accent defaults (azure); overridden by variant classes below. */
    --ne-accent: #2563eb;
    --ne-accent-dark: #1d4ed8;
    --ne-accent-contrast: #ffffff;
}

/* -------- Per-site accent variants (anti-footprint) -------- */
.variant-azure   { --ne-accent: #2563eb; --ne-accent-dark: #1d4ed8; }
.variant-emerald { --ne-accent: #059669; --ne-accent-dark: #047857; }
.variant-crimson { --ne-accent: #dc2626; --ne-accent-dark: #b91c1c; }
.variant-violet  { --ne-accent: #7c3aed; --ne-accent-dark: #6d28d9; }
.variant-amber   { --ne-accent: #d97706; --ne-accent-dark: #b45309; }
.variant-slate   { --ne-accent: #475569; --ne-accent-dark: #334155; }

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body.site {
    margin: 0;
    padding: 0;
    background: var(--ne-bg);
    color: var(--ne-text);
    font-family: var(--ne-font-body);
    font-size: 19px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

/* -------- Typography -------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--ne-font-head);
    color: var(--ne-heading);
    line-height: 1.2;
    margin: 2.2rem 0 0.9rem;
    font-weight: 650;
    letter-spacing: -0.02em;
}

h1 { font-size: 2.4rem; margin-top: 0; }
h2 { font-size: 1.7rem; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }

p {
    margin: 0 0 1.35rem;
}

a {
    color: var(--ne-accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease;
}

a:hover,
a:focus {
    color: var(--ne-accent-dark);
    border-bottom-color: currentColor;
    text-decoration: none;
}

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

blockquote {
    margin: 1.8rem 0;
    padding: 0 0 0 1.25rem;
    border-left: 2px solid var(--ne-accent);
    color: var(--ne-text-muted);
    font-style: italic;
}

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

/* -------- Layout containers -------- */
.container {
    width: 100%;
    max-width: var(--ne-measure);
    margin-inline: auto;
    padding-inline: 1.5rem;
}

/* Reading column: the single comfortable measure everything sits in. */
.reading-column {
    max-width: var(--ne-measure);
}

.wrapper-fluid .container {
    /* Even in fluid mode, keep the editorial measure for readability. */
    max-width: var(--ne-measure);
}

.full-width {
    width: 100%;
}

/* -------- Header / branding (minimal chrome) -------- */
.site-header {
    background: var(--ne-surface);
    border-bottom: 1px solid var(--ne-border);
}

.site-header.is-sticky {
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: saturate(1.1) blur(6px);
}

.header-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    padding-block: 1.4rem;
}

.branding {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.brand-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    border: 0;
}

.brand-logo-text {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ne-heading);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.brand-logo-img {
    max-height: 30px;
    width: auto;
}

.site-tagline {
    margin: 0;
    font-size: 0.8rem;
    color: var(--ne-text-muted);
    letter-spacing: 0.02em;
}

/* -------- Navigation (minimal, inline text) -------- */
.site-nav ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
    margin: 0;
    padding: 0;
}

.site-nav a {
    display: inline-block;
    color: var(--ne-text-muted);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 0;
    padding: 0;
}

.site-nav a:hover,
.site-nav a:focus,
.site-nav .current > a,
.site-nav .active > a {
    color: var(--ne-heading);
    text-decoration: none;
}

/* -------- Banner -------- */
.site-banner {
    border-bottom: 1px solid var(--ne-border);
    padding-block: 1.5rem;
}

/* -------- Main -------- */
.site-main {
    padding-block: 4rem;
}

.main-content {
    background: var(--ne-surface);
}

.position-top-a,
.position-bottom-a {
    margin-block: 1.5rem;
}

.position-top-a .moduletable,
.position-bottom-a .moduletable {
    margin-bottom: 1.5rem;
}

/* Breadcrumbs kept quiet. */
.breadcrumb {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 2rem;
    padding: 0;
    font-size: 0.8rem;
    color: var(--ne-text-muted);
}

.breadcrumb a {
    color: var(--ne-text-muted);
    border: 0;
}

/* -------- Related / partner strip (relocated network interlink slots) -------- */
.related-strip {
    border-top: 1px solid var(--ne-border);
    padding-block: 3rem;
}

.related-strip .moduletable {
    margin-bottom: 2rem;
}

.related-strip .moduletable:last-child {
    margin-bottom: 0;
}

.related-strip .moduletable > h3,
.related-strip .moduletable > .mod-title {
    margin: 0 0 1rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ne-text-muted);
}

.related-strip ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.related-strip li {
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--ne-border);
}

.related-strip li:last-child {
    border-bottom: 0;
}

.related-strip a {
    border: 0;
}

/* -------- Buttons (minimal, hairline) -------- */
.btn {
    display: inline-block;
    padding: 0.55rem 1.3rem;
    border-radius: var(--ne-radius);
    border: 1px solid var(--ne-heading);
    background: transparent;
    color: var(--ne-heading);
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: 0.03em;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.4;
}

.btn:hover,
.btn:focus {
    background: var(--ne-heading);
    color: var(--ne-bg);
    text-decoration: none;
}

.btn-primary {
    background: var(--ne-accent);
    color: var(--ne-accent-contrast);
    border-color: var(--ne-accent);
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--ne-accent-dark);
    border-color: var(--ne-accent-dark);
    color: var(--ne-accent-contrast);
}

.btn-secondary {
    background: transparent;
    color: var(--ne-accent);
    border-color: var(--ne-border);
}

/* -------- Footer (site name + year only) -------- */
.site-footer {
    background: var(--ne-surface);
    color: var(--ne-text-muted);
    border-top: 1px solid var(--ne-border);
    margin-top: 0;
    padding-block: 2.5rem;
}

.site-footer a {
    color: var(--ne-text-muted);
}

.footer-modules {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.footer-modules .moduletable {
    background: transparent;
    border: 0;
    padding: 0;
}

.footer-copyright {
    margin: 0;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    color: var(--ne-text-muted);
}

/* -------- Error page -------- */
.error-card .page-header {
    color: var(--ne-heading);
}

.error-badge {
    display: inline-block;
    background: var(--ne-accent);
    color: var(--ne-accent-contrast);
    border-radius: var(--ne-radius);
    padding: 0.1rem 0.6rem;
    font-weight: 700;
}

/* -------- Offline page -------- */
.offline-site {
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    background: var(--ne-bg);
    padding: 1.5rem;
}

.offline-card {
    background: var(--ne-surface);
    border: 1px solid var(--ne-border);
    border-radius: var(--ne-radius);
    padding: 2.5rem;
    max-width: 420px;
    width: 100%;
}

.offline-card .form-control {
    display: block;
    width: 100%;
    padding: 0.6rem 0.75rem;
    margin-bottom: 1rem;
    border: 1px solid var(--ne-border);
    border-radius: var(--ne-radius);
    font-size: 1rem;
}

.offline-card label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 600;
    font-size: 0.85rem;
}

.offline-card fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   Content area — com_content articles (front page / category / single)
   Styles both the template's own override markup (.ne-*) and Joomla core
   fallback markup (.blog-item, dl.article-info, ul.tags, .pagination, icon-*)
   so non-overridden views stay minimalist too. Editorial identity: single
   reading measure, generous whitespace, hairline rules, monochrome + one accent.
   ========================================================================== */

/* -------- Accessibility helper -------- */
.visually-hidden,
.sr-only,
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Joomla core emits empty icon-font spans (no icon font shipped) — hide them,
   except pagination arrows, which get plain glyphs below. */
span[class^="icon-"],
span[class*=" icon-"] {
    display: none;
}

.pagination span[class^="icon-"],
.pagination span[class*=" icon-"] {
    display: inline;
    font-family: var(--ne-font-body);
}

.pagination .icon-angle-double-left::before  { content: "\00AB"; }
.pagination .icon-angle-left::before         { content: "\2039"; }
.pagination .icon-angle-right::before        { content: "\203A"; }
.pagination .icon-angle-double-right::before { content: "\00BB"; }

/* Neutralise stray Bootstrap float utilities from core layouts. */
.float-start, .float-end, .float-md-end {
    float: none;
}

/* -------- Page / category headers -------- */
.main-content .page-header {
    margin: 0 0 2.5rem;
}

.main-content .page-header h1,
.main-content .page-header h2 {
    margin: 0;
}

.category-desc {
    color: var(--ne-text-muted);
    margin: 0 0 2.5rem;
}

/* -------- Article stream (featured / category blog) -------- */
.blog-items {
    display: block;
}

.blog-item {
    padding-bottom: 3rem;
    margin-bottom: 3rem;
    border-bottom: 1px solid var(--ne-border);
}

.blog-items:last-child .blog-item:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.ne-post-title,
.blog-item .item-title {
    margin: 0 0 0.6rem;
    font-size: 1.9rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.ne-post-title a,
.blog-item .item-title a {
    color: var(--ne-heading);
    border: 0;
}

.ne-post-title a:hover,
.ne-post-title a:focus,
.blog-item .item-title a:hover,
.blog-item .item-title a:focus {
    color: var(--ne-accent);
    text-decoration: none;
}

/* Single quiet meta line: author · date · category · views. */
.ne-post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.7rem;
    margin: 0 0 1.6rem;
    color: var(--ne-text-muted);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ne-post-meta .ne-meta {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35em;
}

.ne-post-meta .ne-meta + .ne-meta::before {
    content: "\00B7";
    margin-right: 0.7rem;
    color: var(--ne-border);
}

.ne-post-meta a {
    color: var(--ne-text-muted);
    border: 0;
}

.ne-post-meta a:hover {
    color: var(--ne-heading);
    text-decoration: none;
}

/* Fallback: Joomla core <dl class="article-info"> on non-overridden views —
   flattened onto one muted line, "Details" term hidden. */
dl.article-info {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 1.1rem;
    margin: 0 0 1.6rem;
    padding: 0;
    color: var(--ne-text-muted);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

dl.article-info dt.article-info-term {
    display: none;
}

dl.article-info dd {
    margin: 0;
}

dl.article-info a {
    color: var(--ne-text-muted);
    border: 0;
}

dl.article-info a:hover {
    color: var(--ne-heading);
}

/* Intro copy inside stream items. */
.ne-post-intro,
.blog-item .item-content {
    color: var(--ne-text);
}

figure.item-image,
figure.float-start,
figure.float-end {
    margin: 0 0 1.35rem;
}

/* -------- Tag chips (understated hairline, no fill) -------- */
.ne-post-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    margin: 1.6rem 0;
}

.ne-tags-label {
    color: var(--ne-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

ul.tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
}

ul.tags li {
    margin: 0;
    padding: 0;
}

ul.tags a,
ul.tags a.btn,
ul.tags a.btn-info {
    display: inline-block;
    padding: 0.15em 0.7em;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.6;
    color: var(--ne-text-muted);
    background: transparent;
    border: 1px solid var(--ne-border);
    border-radius: var(--ne-radius);
    text-decoration: none;
}

ul.tags a:hover,
ul.tags a:focus {
    color: var(--ne-heading);
    border-color: var(--ne-heading);
    text-decoration: none;
}

/* -------- Read more (minimal accent text link, no button chrome) -------- */
.ne-readmore-wrap {
    margin: 1.6rem 0 0;
}

.ne-readmore,
.readmore .btn,
p.readmore a {
    display: inline-block;
    padding: 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--ne-accent);
    color: var(--ne-accent);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1.4;
}

.ne-readmore:hover,
.ne-readmore:focus,
.readmore .btn:hover,
.readmore .btn:focus,
p.readmore a:hover,
p.readmore a:focus {
    color: var(--ne-accent-dark);
    border-bottom-color: var(--ne-accent-dark);
    background: transparent;
    text-decoration: none;
}

/* -------- Pagination (minimal, hairline) -------- */
.ne-pagination,
.pagination__wrapper,
.com-content-category-blog__navigation {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--ne-border);
}

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

.pagination .page-link {
    display: inline-block;
    min-width: 2.4em;
    padding: 0.4em 0.7em;
    border: 1px solid var(--ne-border);
    border-radius: var(--ne-radius);
    background: transparent;
    color: var(--ne-text-muted);
    text-align: center;
    text-decoration: none;
    line-height: 1.3;
    font-size: 0.85rem;
}

.pagination a.page-link:hover,
.pagination a.page-link:focus,
.pagination .page-item.active .page-link,
.pagination .active > .page-link,
.pagination a.page-link[aria-current] {
    background: var(--ne-accent);
    border-color: var(--ne-accent);
    color: var(--ne-accent-contrast);
    text-decoration: none;
}

.pagination .page-item.disabled .page-link,
.pagination span.page-link {
    opacity: 0.4;
}

p.counter {
    margin: 0 0 1rem;
    color: var(--ne-text-muted);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
}

/* -------- Single article -------- */
.ne-article-header {
    margin: 0 0 2.5rem;
}

.ne-article-header .ne-post-title {
    font-size: 2.4rem;
    margin-bottom: 1.2rem;
}

.ne-entry-content,
.com-content-article__body {
    color: var(--ne-text);
}

.ne-entry-content h2,
.com-content-article__body h2 {
    margin-top: 2.4rem;
}

.ne-entry-content h3,
.com-content-article__body h3 {
    margin-top: 2rem;
}

.ne-entry-content ul,
.ne-entry-content ol,
.com-content-article__body ul,
.com-content-article__body ol {
    margin: 0 0 1.35rem;
    padding-left: 1.4rem;
}

.ne-entry-content li,
.com-content-article__body li {
    margin: 0 0 0.4rem;
}

/* Clean tables / preformatted / inline code in article bodies. */
.ne-entry-content table,
.com-content-article__body table,
.ne-post-intro table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.35rem;
    font-size: 0.95rem;
}

.ne-entry-content th,
.ne-entry-content td,
.com-content-article__body th,
.com-content-article__body td,
.ne-post-intro th,
.ne-post-intro td {
    border-bottom: 1px solid var(--ne-border);
    padding: 0.6em 0.8em;
    text-align: left;
}

.ne-entry-content th,
.com-content-article__body th,
.ne-post-intro th {
    font-weight: 650;
    border-bottom-width: 2px;
}

.ne-entry-content pre,
.com-content-article__body pre,
.ne-post-intro pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: #f6f6f6;
    padding: 1rem 1.2rem;
    overflow-x: auto;
    border-left: 2px solid var(--ne-border);
    border-radius: var(--ne-radius);
    font-size: 0.85rem;
    line-height: 1.6;
    margin: 0 0 1.35rem;
}

.ne-entry-content code,
.com-content-article__body code,
.ne-post-intro code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: #f6f6f6;
    padding: 0.1em 0.35em;
    border-radius: var(--ne-radius);
    font-size: 0.88em;
}

.ne-entry-content pre code,
.com-content-article__body pre code,
.ne-post-intro pre code {
    background: transparent;
    padding: 0;
    font-size: 1em;
}

.ne-article-tags {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--ne-border);
}

/* Sub-category listings + "more articles" link lists. */
.items-more ol,
.items-more ul {
    list-style: none;
    margin: 0 0 1.6rem;
    padding: 0;
}

.items-more li {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--ne-border);
}

.items-more li:last-child {
    border-bottom: 0;
}

.cat-children {
    margin-top: 3rem;
}

/* -------- System messages / alerts (quiet, hairline) -------- */
.alert {
    padding: 1rem 1.2rem;
    margin: 0 0 2rem;
    background: transparent;
    border: 1px solid var(--ne-border);
    border-left: 2px solid var(--ne-accent);
    border-radius: var(--ne-radius);
}

#system-message-container:empty {
    display: none;
}

/* -------- Responsive -------- */
@media (max-width: 640px) {
    body.site {
        font-size: 17px;
    }

    .site-main {
        padding-block: 2.5rem;
    }

    .header-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .site-nav ul {
        gap: 1rem;
    }

    h1 { font-size: 1.9rem; }
    h2 { font-size: 1.45rem; }

    .ne-post-title,
    .blog-item .item-title {
        font-size: 1.55rem;
    }

    .ne-article-header .ne-post-title {
        font-size: 1.9rem;
    }
}