/*
 * Article pages (/mtd-itsa/...) - Bootstrap 5 with AccountsDesk brand colours.
 * Layout, spacing and type scale follow government design-system patterns:
 * readable ~19px body text, strong headings, a two-thirds reading column and a side panel.
 */
:root {
    --brand-navy: #09203f;
    --brand-slate: #537895;
    --brand-blue: #50a1ff;
    --brand-link: #0b5cab;
    --brand-link-hover: #09203f;
    --text: #1d2330;
    --text-muted: #55606e;
    --border: #d5dae0;
    --surface: #f3f5f8;
    --focus: #ffbf47;

    --bs-primary: var(--brand-navy);
    --bs-primary-rgb: 9, 32, 63;
    --bs-link-color: var(--brand-link);
    --bs-link-color-rgb: 11, 92, 171;
    --bs-link-hover-color: var(--brand-link-hover);
    --bs-link-hover-color-rgb: 9, 32, 63;
    --bs-body-color: var(--text);
    --bs-body-font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    --bs-body-font-size: 1.1875rem;
    --bs-body-line-height: 1.6;
}

.articles-site {
    color: var(--text);
    background: #fff;
}

.btn-primary {
    --bs-btn-bg: var(--brand-navy);
    --bs-btn-border-color: var(--brand-navy);
    --bs-btn-hover-bg: #0f3162;
    --bs-btn-hover-border-color: #0f3162;
    --bs-btn-active-bg: #0f3162;
    --bs-btn-active-border-color: #0f3162;
    font-weight: 600;
}

/* Accessibility */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    padding: .75rem 1rem;
    background: var(--focus);
    color: #000;
    font-weight: 600;
}

.skip-link:focus {
    left: 0;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
.form-control:focus {
    outline: 3px solid var(--focus);
    outline-offset: 0;
    box-shadow: 0 0 0 5px rgba(0, 0, 0, .9);
}

/* Header */
.site-header {
    background: var(--brand-navy);
    border-bottom: 5px solid var(--brand-blue);
}

.site-header .navbar {
    padding-top: .75rem;
    padding-bottom: .75rem;
}

.site-header .nav-link {
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
}

.site-header .nav-link:hover,
.site-header .nav-link:focus {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 6px;
}

.site-header .nav-cta {
    border: 2px solid #fff;
    border-radius: .25rem;
    margin-left: .5rem;
}

.site-header .navbar-toggler {
    border-color: rgba(255, 255, 255, .7);
}

/* Breadcrumbs */
.breadcrumb-bar {
    padding: .9rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 1rem;
}

.breadcrumb-bar .breadcrumb-item + .breadcrumb-item::before {
    content: "\203A";
    color: var(--text-muted);
}

.breadcrumb-bar .breadcrumb-item.active {
    color: var(--text-muted);
}

/* Page structure */
.main-wrapper {
    padding-top: 2.5rem;
    padding-bottom: 4rem;
}

.page-heading {
    margin-bottom: 1.5rem;
}

.page-title {
    margin-bottom: 1rem;
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--brand-navy);
}

.page-lead {
    margin-bottom: 0;
    font-size: 1.4375rem;
    line-height: 1.5;
    color: var(--text);
}

@media (min-width: 768px) {
    .page-title { font-size: 3rem; }
}

.section-title {
    margin: 0 0 1rem;
    padding-top: 1rem;
    border-top: 4px solid var(--brand-navy);
    font-size: 1.5rem;
    font-weight: 700;
}

/* Article body */
.article-meta {
    margin-bottom: 2rem;
    padding: .75rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 1rem;
}

.article-meta .tag {
    display: inline-block;
    margin: .5rem .35rem 0 0;
    padding: .15rem .6rem;
    border-radius: .25rem;
    background: var(--surface);
    color: var(--brand-navy);
    font-size: .875rem;
    font-weight: 600;
}

.article-body h2 { margin: 2.5rem 0 1rem; font-size: 1.75rem; font-weight: 700; line-height: 1.25; color: var(--brand-navy); }
.article-body h3 { margin: 2rem 0 .75rem; font-size: 1.4375rem; font-weight: 700; line-height: 1.3; color: var(--brand-navy); }
.article-body h4 { margin: 1.5rem 0 .5rem; font-size: 1.1875rem; font-weight: 700; }
.article-body p, .article-body ul, .article-body ol, .article-body blockquote { margin-bottom: 1.25rem; }
.article-body li { margin-bottom: .5rem; }
.article-body a { text-decoration: underline; text-underline-offset: 3px; }
.article-body a:hover { text-decoration-thickness: 3px; }
.article-body img { max-width: 100%; height: auto; }

/* Screenshots */
.article-body p > img, .article-body img.screenshot {
    display: block;
    margin: 1rem 0;
    border: 1px solid var(--border);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(9, 32, 63, .15);
}

/* Call to action */
.cta-box {
    margin: 3rem 0 1rem;
    padding: 2rem;
    border-left: 8px solid var(--brand-blue);
    background: var(--brand-navy);
    color: #fff;
}
.cta-title { margin-bottom: .5rem; font-size: 1.5rem; font-weight: 700; color: #fff; }
.cta-text { margin-bottom: 1.25rem; }
.cta-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.cta-btn {
    display: inline-block;
    padding: .75rem 1.75rem;
    border: 2px solid #fff;
    border-radius: 4px;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
}
.cta-btn-primary { background: var(--brand-blue); border-color: var(--brand-blue); color: var(--brand-navy); }
.cta-btn-primary:hover { background: #fff; border-color: #fff; color: var(--brand-navy); }
.cta-btn-secondary { background: transparent; color: #fff; }
.cta-btn-secondary:hover { background: #fff; color: var(--brand-navy); }
.cta-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.article-body blockquote {
    padding: 1rem 1.25rem;
    border-left: 8px solid var(--brand-blue);
    background: var(--surface);
}

.article-body blockquote p:last-child { margin-bottom: 0; }

.article-body table { width: 100%; margin-bottom: 1.5rem; border-collapse: collapse; font-size: 1.0625rem; }
.article-body th, .article-body td { padding: .75rem 1rem .75rem 0; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.article-body th { border-bottom: 2px solid var(--brand-navy); font-weight: 700; }
.article-body code { padding: .1rem .35rem; border-radius: 3px; background: var(--surface); font-size: .9em; }

/* Side panel */
.side-panel {
    margin-top: 2rem;
    padding: 1.25rem;
    border-top: 5px solid var(--brand-navy);
    background: var(--surface);
}

@media (min-width: 992px) {
    .side-panel { margin-top: 0; }
}

.side-panel-title {
    margin-bottom: 1rem;
    font-size: 1.25rem;
    font-weight: 700;
}

.side-panel-item {
    padding: .6rem 0;
    border-bottom: 1px solid var(--border);
}

/* Listings */
.article-list-item {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--border);
}

.article-list-title {
    margin-bottom: .4rem;
    font-size: 1.4375rem;
    font-weight: 700;
}

.article-card-meta {
    color: var(--text-muted);
    font-size: .9375rem;
}

.topic-list li {
    padding: .5rem 0;
    font-weight: 600;
}

.article-search { max-width: 560px; }

/* Footer */
.site-footer {
    padding: 3rem 0 2rem;
    border-top: 5px solid var(--brand-navy);
    background: var(--surface);
    font-size: 1rem;
}

.footer-heading {
    margin-bottom: .75rem;
    font-size: 1.125rem;
    font-weight: 700;
}

.footer-links li { margin-bottom: .4rem; }
.footer-note { color: var(--text-muted); font-size: .9375rem; }