/*
 * ACEF theme
 * ----------
 * The design is measured from a-c-e-f.org, not approximated. The site runs the
 * WordPress "inove" theme, whose look comes almost entirely from four small
 * images; each one is sampled and rebuilt here as a gradient, so the theme
 * makes no image requests at all:
 *
 *   header.jpg   a specular band (#8f9396) across the top 20% of a charcoal
 *                panel, then a smooth #454545 → #212121 fall to the base
 *   menu.gif     the navigation strip: #fdfdfd at rest, #f4f5f7 on hover,
 *                #edeff0 for the current tab, with a chevron between items
 *   sidesep.gif  the 1px #ccc rule down the left edge of the sidebar
 *   main_shadow  the #d4d4d4 → #f7f7f7 fade under the content column
 *
 * The two brand colours are sampled from the ACE✕F wordmark: crimson #6f1235
 * and navy #152a55. Body copy is #555, links #2970a6, section rules #ccc.
 *
 * Three deliberate departures from the original:
 *
 *  1. Base size is 16px, not 12px. 12px Verdana is below the accessible
 *     minimum; everything here scales from --acef-base-size, so the
 *     proportions are preserved — set it back to 12px if you disagree.
 *
 *  2. No web fonts are loaded. The original pulls Noto Sans from a CDN, which
 *     would send every visitor's IP address to a third party — for an
 *     association operating under the GDPR, a liability rather than a
 *     convenience. Verdana is a system face on every platform the original
 *     targets, and headings fall back to the system UI face.
 *
 *  3. The boxed shell is fluid below its configured width instead of forcing a
 *     936px horizontal scroll on a phone.
 *
 * Every value the theme configuration exposes arrives as a custom property on
 * :root, injected by the theme class — this file only ever reads them.
 */

:root {
    --acef-header-from:   #454545;
    --acef-header-to:     #212121;
    --acef-header-sheen:  #8f9396;
    --acef-crimson:       #6f1235;
    --acef-navy:          #152a55;
    --acef-link:          #2970a6;
    --acef-nav-from:      #fff;
    --acef-nav-to:        #edeff0;
    --acef-nav-text:      #382e1f;
    --acef-shell:         #dedede;

    --acef-width:         936px;
    --acef-sidebar-width: 300px;
    --acef-base-size:     16px;

    --acef-text:          #555;
    --acef-heading:       #555;
    --acef-muted:         #888;
    --acef-rule:          #ccc;
    --acef-frame:         #a6a6a6;
    --acef-surface:       #fff;
    --acef-focus:         #6f1235;

    /* Verdana is present on every desktop platform the original targets, and
       the fallbacks are metrically close enough that nothing reflows. */
    --acef-font: Verdana, "Bitstream Vera Sans", "DejaVu Sans", Geneva, Tahoma, sans-serif;
    --acef-display: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
                    Arial, "Liberation Sans", sans-serif;
    --acef-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --acef-gap: 1.5rem;
}

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

html {
    font-size: var(--acef-base-size);
    /* The original paints #dedede and fades it to white halfway down the
       viewport, so the boxed panel appears to sit in a lit frame. */
    background: var(--acef-shell) linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 50%) no-repeat;
    background-attachment: fixed;
}

body {
    margin: 0;
    font-family: var(--acef-font);
    font-size: .75rem;          /* 12px at the 16px base — the original's copy size */
    line-height: 1.45;
    color: var(--acef-text);
    -webkit-text-size-adjust: 100%;
}

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

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

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

.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
    position: absolute; left: -9999px;
    background: var(--acef-surface); color: var(--acef-link);
    padding: .6rem 1rem; z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ── The boxed shell ─────────────────────────────────────────────────────── */

/*
 * The original wraps banner, navigation, content and footer in one 936px
 * column with 20px of page above it. That frame is the design; the width is
 * configurable but the frame is what makes it read as the ACEF site.
 */
.shell {
    max-width: var(--acef-width);
    margin: 1.25rem auto;
    background: var(--acef-surface);
    border: 1px solid var(--acef-frame);
    border-top: 0;
}

body.layout-flat .shell {
    max-width: none;
    margin: 0;
    border: 0;
}

/* ── Banner ──────────────────────────────────────────────────────────────── */

.banner {
    /* header.jpg rebuilt: sheen across the top fifth, then the charcoal fall.
       The stops are the sampled rows — 2%, 21% and the hard step at 23%. */
    background:
        linear-gradient(to bottom,
            #4c5053 0,
            var(--acef-header-sheen) 2%,
            #646568 21%,
            var(--acef-header-from) 23%,
            var(--acef-header-to) 100%);
    color: #fff;
    border-bottom: 1px solid var(--acef-frame);
}

.banner__inner {
    padding: 1.15rem 1.25rem 1.1rem;
    display: flex;
    align-items: center;
    gap: var(--acef-gap);
    flex-wrap: wrap;
    min-height: 5.7rem;         /* the original banner is 91px tall */
}

.banner__brand {
    display: flex;
    align-items: center;
    gap: .85rem;
    color: #fff;
    text-decoration: none;
    margin-right: auto;
    min-width: 0;
}
.banner__brand:hover { text-decoration: none; }

.banner__logo { max-height: 3.4rem; width: auto; }

.banner__wordmark { display: flex; flex-direction: column; line-height: 1.2; }

.banner__title {
    font-family: var(--acef-display);
    font-size: 2rem;            /* 32px — the original's 24px scaled to the new base */
    font-weight: 400;
    letter-spacing: -.05em;     /* the original's -1.2px at 24px */
    color: #fff;
}

.banner__subtitle {
    font-size: .6875rem;
    font-weight: 400;
    color: #cfcfcf;
    margin-top: .2rem;
    max-width: 52ch;
}

.banner__tools {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

/* ── Navigation strip ────────────────────────────────────────────────────── */

/*
 * menu.gif is a three-state vertical sprite; the states are #fdfdfd at rest,
 * #f4f5f7 on hover and #edeff0 for the current page. Each is a two-stop
 * gradient here, which is what the sprite was drawing.
 */
.navbar {
    background: linear-gradient(to bottom, var(--acef-nav-from), var(--acef-nav-to));
    border-bottom: 1px solid var(--acef-frame);
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    min-height: 2rem;
}

.navbar__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    flex: 1 1 auto;
    min-width: 0;
}

.navbar__item { display: flex; position: relative; }

/*
 * The chevron the original tiles between items. Drawn with two borders rather
 * than an image: it inherits the strip's text colour, so recolouring the
 * navigation does not leave a stale grey glyph behind.
 */
.navbar__item + .navbar__item::before {
    content: "";
    position: absolute;
    left: -3px;
    top: 50%;
    width: 5px; height: 5px;
    margin-top: -3px;
    border-top: 1px solid #b8b8b8;
    border-right: 1px solid #b8b8b8;
    transform: rotate(45deg);
    pointer-events: none;
}

.navbar__item a {
    display: flex;
    align-items: center;
    padding: 0 1.25rem;
    font-size: .6875rem;        /* 11px */
    color: var(--acef-nav-text);
    text-decoration: none;
    white-space: nowrap;
}

.navbar__item a:hover {
    background: linear-gradient(to bottom, var(--acef-nav-from), #f4f5f7);
    text-decoration: none;
}

.navbar__item.is-active a {
    background: linear-gradient(to bottom, #fff, var(--acef-nav-to));
    color: var(--acef-crimson);
    /* The current tab is the one place the crimson earns its keep in the
       chrome: an inset rule reads as a selected tab without a border shifting
       the row by a pixel. */
    box-shadow: inset 0 -2px 0 var(--acef-crimson);
}

.navbar__item--home a { padding: 0 .9rem; }
.navbar__item--home svg { display: block; fill: currentColor; }

/*
 * Search, at the right end of the strip, as on the original — and sized to the
 * same footprint, because the strip has exactly enough room for the menu and
 * the box and no more. It shrinks before the menu does: a search field a few
 * pixels narrower is invisible, where a menu that wraps to a second row
 * changes the shape of the page.
 */
.search {
    display: flex;
    align-items: center;
    margin-left: auto;
    padding: 0 .5rem;
    flex: 0 1 auto;
    min-width: 5.5rem;
}

.search input {
    font: inherit;
    font-size: .6875rem;
    color: #ddd;
    background: #4a4a4a;
    border: 1px solid #333;
    border-radius: 3px;
    padding: .25rem .5rem;
    width: 9.5rem;
    min-width: 0;
    max-width: 100%;
}
.search input::placeholder { color: #999; }
.search input:focus { color: #fff; background: #3a3a3a; }

.search button {
    background: none;
    border: 0;
    padding: .25rem .35rem;
    cursor: pointer;
    color: var(--acef-nav-text);
    display: inline-flex;
}
.search button svg { fill: currentColor; }

/* ── Login / logout ──────────────────────────────────────────────────────── */

.user-menu {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .6875rem;
}

.user-menu__name { color: #d6d6d6; max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu__link { color: #9ec8f0; }

.btn-auth {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .75rem;
    font-size: .6875rem;
    color: #fff;
    background: var(--acef-crimson);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 3px;
    text-decoration: none;
    white-space: nowrap;
}
.btn-auth:hover { background: #8a1742; color: #fff; text-decoration: none; }
.btn-auth--out { background: rgba(255, 255, 255, .12); }
.btn-auth--out:hover { background: rgba(255, 255, 255, .22); }
.icon-key { fill: currentColor; flex: none; }

.nav-toggle { display: none; }

/* ── Two-column content ──────────────────────────────────────────────────── */

.shell-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--acef-sidebar-width);
}

body.layout-sidebar-left .shell-inner { grid-template-columns: var(--acef-sidebar-width) minmax(0, 1fr); }
body.layout-sidebar-left .sidebar { order: -1; border-left: 0; border-right: 1px solid var(--acef-rule); }
body.layout-sidebar-none .shell-inner { grid-template-columns: minmax(0, 1fr); }

.content {
    padding: .9rem 1.15rem 2rem;
    min-width: 0;
    /* main_shadow.gif: the #d4d4d4 → #f7f7f7 fade the original lays under the
       content column. */
    background: linear-gradient(to bottom, #f7f7f7 0, #fff 9px);
}

/* sidesep.gif — the 1px rule down the sidebar's inner edge. */
.sidebar {
    border-left: 1px solid var(--acef-rule);
    padding: 1.15rem 1.15rem 2rem;
    min-width: 0;
}

/* ── Page ────────────────────────────────────────────────────────────────── */

/*
 * The original leads every page with an h2 under a hairline rule and keeps h1
 * for the banner wordmark. The page title here is an h1 for document outline
 * and accessibility, styled as that h2 — the design is unchanged, the
 * structure is correct.
 */
.page__title,
.page__content h2 {
    font-family: var(--acef-display);
    font-size: 1.15rem;
    font-weight: 400;
    letter-spacing: -.05em;
    color: var(--acef-heading);
    border-bottom: 1px solid var(--acef-rule);
    padding-bottom: .3rem;
    margin: .5rem 0 1rem;
}

.page__content h3 {
    font-family: var(--acef-display);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: -.04em;
    color: var(--acef-heading);
    margin: 1.6rem 0 .6rem;
}

.page__content h4,
.page__content h5,
.page__content h6 {
    font-family: var(--acef-display);
    font-size: .875rem;
    font-weight: 700;
    color: var(--acef-heading);
    margin: 1.4rem 0 .5rem;
}

.page__content p { margin: 0 0 1rem; }
.page__content ul,
.page__content ol { margin: 0 0 1rem; padding-left: 1.6rem; }
.page__content li { margin: .2rem 0; }

.page__content blockquote {
    margin: 1.2rem 0;
    padding: .1rem 1rem;
    border-left: 3px solid var(--acef-rule);
    color: var(--acef-muted);
}

.page__content code {
    font-family: var(--acef-mono);
    font-size: .92em;
    background: #f2f2f2;
    padding: .1em .35em;
    border-radius: 2px;
}
.page__content pre {
    font-family: var(--acef-mono);
    background: #f7f7f7;
    border: 1px solid #e2e2e2;
    padding: .8rem 1rem;
    overflow-x: auto;
}
.page__content pre code { background: none; padding: 0; }

.page__content table { border-collapse: collapse; width: 100%; margin: 0 0 1.2rem; }
.page__content th,
.page__content td { border: 1px solid #ddd; padding: .4rem .6rem; text-align: left; vertical-align: top; }
.page__content th { background: #f2f2f2; font-weight: 700; color: var(--acef-heading); }
.page__content tbody tr:nth-child(even) { background: #fafafa; }

/* Wide content scrolls inside its own box rather than the page. */
.page__content .table-wrap { overflow-x: auto; }

.page__content hr { border: 0; border-top: 1px solid var(--acef-rule); margin: 1.8rem 0; }

.page__meta {
    font-size: .6875rem;
    color: var(--acef-muted);
    margin: -.5rem 0 1rem;
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
}
.page__meta-item { display: inline-flex; align-items: center; gap: .3rem; }
.page__meta svg { fill: currentColor; }
.page__meta-sep { color: var(--acef-rule); }

.btn {
    display: inline-block;
    padding: .45rem 1rem;
    background: var(--acef-crimson);
    color: #fff;
    border-radius: 3px;
    text-decoration: none;
}
.btn:hover { background: #8a1742; color: #fff; text-decoration: none; }

/* ── Breadcrumbs ─────────────────────────────────────────────────────────── */

.breadcrumbs {
    font-size: .6875rem;
    color: var(--acef-muted);
    display: flex;
    align-items: baseline;
    gap: .4rem;
    flex-wrap: wrap;
    margin-bottom: .6rem;
}
.breadcrumbs ol { list-style: none; display: flex; gap: .4rem; flex-wrap: wrap; margin: 0; padding: 0; }
.breadcrumbs li + li::before { content: "›"; margin-right: .4rem; color: var(--acef-rule); }

/* ── Article stream ──────────────────────────────────────────────────────── */

.stream { list-style: none; margin: 0; padding: 0; }

.stream__item { padding: 0 0 1.2rem; margin: 0 0 1.2rem; border-bottom: 1px solid #ececec; }
.stream__item:last-child { border-bottom: 0; }

.stream__title {
    font-family: var(--acef-display);
    font-size: 1.05rem;
    font-weight: 400;
    letter-spacing: -.04em;
    margin: 0 0 .25rem;
}
.stream__title a { color: var(--acef-navy); }

.stream__date { font-size: .6875rem; color: var(--acef-muted); margin: 0 0 .5rem; }
.stream__summary p:last-child { margin-bottom: .4rem; }

.pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; font-size: .6875rem; }

/* ── Sidebar ─────────────────────────────────────────────────────────────── */

.sidebar__logo { margin: 0 0 1.4rem; display: block; }
.sidebar__logo img,
.sidebar__logo svg { display: block; width: 100%; height: auto; max-width: 15.6rem; }

.sidebar__group { margin: 0 0 1.6rem; }

/*
 * The original's widget headings are plain 16px text with no rule. The rule is
 * added here because at 16px base the sidebar and the content column would
 * otherwise be a single undifferentiated grey field.
 */
.sidebar__title {
    font-family: var(--acef-display);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: -.05em;
    color: var(--acef-heading);
    border-bottom: 1px solid var(--acef-rule);
    padding-bottom: .3rem;
    margin: 0 0 .6rem;
}

.sidebar__list,
.sidebar__sublist { list-style: none; margin: 0; padding: 0; font-size: .6875rem; }
.sidebar__sublist { padding-left: .9rem; margin-top: .25rem; }

.sidebar__list li { margin: 0; border-bottom: 1px solid #f0f0f0; }
.sidebar__list li:last-child { border-bottom: 0; }
.sidebar__sublist li { border-bottom: 0; }

.sidebar__list a,
.sidebar__sublist a { display: block; padding: .4rem 0; color: var(--acef-link); }
.sidebar__list li.is-active > a { color: var(--acef-crimson); font-weight: 700; }

.sidebar__date { display: block; color: var(--acef-muted); font-size: .625rem; }
.sidebar__lock { font-size: .8em; opacity: .7; margin-left: .3rem; }
.sidebar__empty { font-size: .6875rem; color: var(--acef-muted); margin: 0; }

/* ── Footer ──────────────────────────────────────────────────────────────── */

.footer {
    border-top: 1px solid var(--acef-rule);
    background: linear-gradient(to bottom, #f7f7f7, #ededed);
    color: var(--acef-muted);
    font-size: .6875rem;
}

.footer__inner {
    padding: .9rem 1.15rem;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--acef-gap);
    flex-wrap: wrap;
}

.footer p { margin: 0 0 .3rem; }
.footer__links ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.1rem; flex-wrap: wrap; }
.footer__top { margin-left: auto; }

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
    .shell { margin: 0; border: 0; }

    .shell-inner,
    body.layout-sidebar-left .shell-inner { grid-template-columns: minmax(0, 1fr); }

    /* Below the fold on a phone the sidebar is navigation and archive, not
       context — it moves under the content rather than pushing it down. */
    .sidebar,
    body.layout-sidebar-left .sidebar {
        order: 2;
        border-left: 0;
        border-right: 0;
        border-top: 1px solid var(--acef-rule);
    }

    .banner__title { font-size: 1.6rem; }
    .banner__inner { min-height: 0; }

    .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.4rem; height: 2.4rem;
        border: 1px solid rgba(255, 255, 255, .55);
        border-radius: 3px;
        background: rgba(255, 255, 255, .12);
        cursor: pointer;
    }
    .nav-toggle__bars,
    .nav-toggle__bars::before,
    .nav-toggle__bars::after {
        display: block; width: 1.1rem; height: 2px; background: #fff; content: "";
    }
    .nav-toggle__bars { position: relative; }
    .nav-toggle__bars::before { position: absolute; top: -6px; }
    .nav-toggle__bars::after  { position: absolute; top: 6px; }

    .navbar { display: none; flex-direction: column; }
    .navbar.is-open { display: flex; }
    .navbar__list { flex-direction: column; }
    .navbar__item { display: block; }
    .navbar__item + .navbar__item::before { display: none; }
    .navbar__item a { padding: .8rem 1.25rem; border-bottom: 1px solid #dcdee0; }
    .navbar__item.is-active a { box-shadow: inset 3px 0 0 var(--acef-crimson); }

    .search { margin: 0; padding: .6rem 1.25rem; }
    .search input { width: 100%; }
}

@media (max-width: 560px) {
    .banner__inner { gap: .75rem; }
    .banner__subtitle { font-size: .625rem; }
    .banner__tools { width: 100%; justify-content: space-between; }
    .user-menu__name { display: none; }
    .content { padding: .9rem 1rem 2rem; }
    .sidebar { padding: 1rem; }
}

/* ── Print ───────────────────────────────────────────────────────────────── */

@media print {
    .banner, .navbar, .sidebar, .footer, .breadcrumbs, .skip-link, .search, .user-menu { display: none !important; }
    html, body { background: #fff; color: #000; font-size: 11pt; }
    .shell { max-width: none; margin: 0; border: 0; }
    .shell-inner { display: block; }
    .content { padding: 0; background: none; }
    .page__content a::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }
}

/* Honour a reduced-motion preference: nothing here animates, but any
   JS-toggled transition added later inherits this. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}