/* Your site's stylesheet. Nothing here is shared with the CMS editor — replace all of it.

   The one part worth keeping is `.rte`, which styles WYSIWYG output. A template cannot know
   which tags an author will produce, so those rules are written against the container rather
   than against classes that will never be applied. */

:root {
    --ink: #14181f;
    --ink-muted: #5c6673;
    --paper: #ffffff;
    --paper-sunken: #f5f6f8;
    --rule: #e2e6ec;
    --accent: #2f6df0;
    --radius: 10px;
    /* Content grows with the screen up to 1680px (about two-thirds of a 2560px monitor); the
       side gutter grows with it, 24px on a phone to 64px on a large screen. */
    --wrap: 105rem;
    --gutter: clamp(1.5rem, 4vw, 4rem);
}

@media (prefers-color-scheme: dark) {
    :root {
        --ink: #e8ecf2;
        --ink-muted: #a3adbb;
        --paper: #14171c;
        --paper-sunken: #1b1f26;
        --rule: #2a2f38;
        --accent: #6d9bff;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.wrap {
    max-width: calc(var(--wrap) + 2 * var(--gutter));
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* --- chrome ------------------------------------------------------------------------------- */

.site__header {
    border-bottom: 1px solid var(--rule);
}

.site__header .wrap {
    display: flex;
    align-items: center;
    height: 4rem;
}

.site__brand {
    font-weight: 650;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-decoration: none;
}

.site__footer {
    margin-top: 5rem;
    border-top: 1px solid var(--rule);
    padding: 1.5rem 0;
    font-size: 0.8125rem;
    color: var(--ink-muted);
}

main.wrap { padding-top: 3rem; }

/* --- headings ----------------------------------------------------------------------------- */

h1 {
    margin: 0 0 1rem;
    font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem);
    line-height: 1.08;
    letter-spacing: -0.025em;
    font-weight: 680;
}

/* --- WYSIWYG output ----------------------------------------------------------------------- */

.rte { max-width: 42rem; }

.rte > :first-child { margin-top: 0; }
.rte > :last-child { margin-bottom: 0; }

.rte p { margin: 0 0 1.15em; }

.rte h2, .rte h3, .rte h4 {
    margin: 2em 0 0.6em;
    line-height: 1.25;
    letter-spacing: -0.015em;
}

.rte h2 { font-size: 1.5rem; }
.rte h3 { font-size: 1.25rem; }
.rte h4 { font-size: 1.0625rem; }

.rte a { color: var(--accent); text-underline-offset: 0.15em; }

.rte ul, .rte ol { margin: 0 0 1.15em; padding-left: 1.4em; }
.rte li { margin: 0.3em 0; }

.rte blockquote {
    margin: 1.75em 0;
    padding: 0.1em 0 0.1em 1.25rem;
    border-left: 3px solid var(--rule);
    color: var(--ink-muted);
}

.rte img { max-width: 100%; height: auto; border-radius: var(--radius); }

.rte table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: 0.9375rem;
}

.rte th, .rte td {
    border: 1px solid var(--rule);
    padding: 0.5rem 0.7rem;
    text-align: left;
}

.rte th { background: var(--paper-sunken); font-weight: 600; }

.rte code {
    background: var(--paper-sunken);
    border-radius: 4px;
    padding: 0.1em 0.35em;
    font-size: 0.9em;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* WYSIWYG Styles menu. The classes an author picks from the editor's Styles menu
   (CendiaOptions.Wysiwyg) — the CMS names them, the site decides what they look like. Add a rule
   here for every style the site adds to the menu, such as a font.

   Site-wide, not under .rte: rich text renders in page bodies and inside blocks alike, and a
   block's wrapper is its own (design-block-*-body), so .btn has to work wherever the HTML lands.
   The variants are written .btn.btn-primary so they outrank a block's own `.x a` link rule. */

.text-large { font-size: 1.25em; }
.text-small { font-size: 0.875em; }

.btn {
    display: inline-block;
    padding: 0.6em 1.25em;
    border: 2px solid transparent;
    border-radius: var(--radius);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
}

.btn.btn-primary { background: var(--ink); border-color: var(--ink); color: var(--paper); text-decoration: none; }
.btn.btn-secondary { background: transparent; color: var(--ink-muted); text-decoration: none; }
.btn.btn-outline { background: transparent; border-color: currentColor; color: var(--ink); text-decoration: none; }

.h1, .h2, .h3, .h4, .h5, .h6 {
    margin: 1.5em 0 0.5em;
    line-height: 1.25;
    letter-spacing: -0.015em;
}

.h1 { font-size: 2.25rem; }
.h2 { font-size: 1.75rem; }
.h3 { font-size: 1.375rem; }
.h4 { font-size: 1.125rem; font-weight: 700; }
.h5 { font-size: 1rem; font-weight: 700; }
.h6 { font-size: 0.875rem; font-weight: 700; }

.columns-2, .columns-3, .columns-4 { column-gap: 2rem; margin: 0 0 1.15em; }
.columns-2 { column-count: 2; }
.columns-3 { column-count: 3; }
.columns-4 { column-count: 4; }
[class^="columns-"] > :first-child { margin-top: 0; }

/* One column on a phone: four columns of a 375px screen is a word per line. */
@media (max-width: 40rem) {
    .columns-2, .columns-3, .columns-4 { column-count: 1; }
}

/* --- Search (Pages/Search.cshtml) -------------------------------------------------------------
   The search page and the box in the header. Yours to restyle; the class names are only what
   Search.cshtml happens to use. */
.search { max-width: 52rem; }
.search__form { display: flex; gap: .5rem; margin: 1rem 0 1.5rem; }
.search__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.search__input {
    flex: 1; min-width: 0; padding: .6rem .8rem; font: inherit; color: var(--ink);
    background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius);
}
.search__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.search__button {
    padding: .6rem 1.1rem; font: inherit; font-weight: 600; cursor: pointer;
    color: var(--paper); background: var(--accent); border: 0; border-radius: var(--radius);
}
.search__bar {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem;
    padding-bottom: .75rem; border-bottom: 1px solid var(--rule);
}
.search__count, .search__empty { margin: 0; color: var(--ink-muted); }
.search__sort { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .9rem; }
.search__sort-link { color: var(--ink-muted); text-decoration: none; }
.search__sort-link:hover { color: var(--accent); }
.search__sort-link.is-current { color: var(--ink); font-weight: 600; }
.search__results { list-style: none; margin: 0; padding: 0; }
.search__result { padding: 1.1rem 0; border-bottom: 1px solid var(--rule); }
.search__result-title { font-size: 1.15rem; font-weight: 600; color: var(--accent); text-decoration: none; }
.search__result-title:hover { text-decoration: underline; }
.search__result-meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .15rem; font-size: .85rem; color: var(--ink-muted); }
.search__result-summary { margin: .4rem 0 0; }
.search__pager { display: flex; align-items: center; gap: 1rem; margin-top: 1.25rem; }
.search__page-of { color: var(--ink-muted); }

/* Featured search results (Pages/Shared/_FeaturedSearchResult.cshtml). The --search-featured-*
   properties are set by an administrator on Settings > Designer > Featured Search and arrive on
   .search__featured; each falls back to this site's own choice when it is not set. */
.search__featured { display: grid; gap: .6rem; margin: 1.1rem 0 .4rem; }
.search__featured-result {
    padding: 1rem 1.15rem; border-radius: var(--radius); border-left: 4px solid var(--accent);
    background: var(--search-featured-bg, var(--paper-sunken));
}
.search__featured-label {
    display: block; margin-bottom: .2rem; font-size: .72rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted);
}
.search__featured-result .search__result-title {
    font-size: var(--search-featured-title-size, 1.25rem);
    color: var(--search-featured-title-color, var(--accent));
}
.search__featured-result .search__result-summary {
    font-size: var(--search-featured-text-size, inherit);
    color: var(--search-featured-text-color, inherit);
}

.site__search { display: flex; gap: .35rem; margin-left: auto; }
.site__search-input {
    width: 11rem; padding: .35rem .6rem; font: inherit; font-size: .9rem; color: var(--ink);
    background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius);
}
.site__search-button {
    padding: .35rem .7rem; font: inherit; font-size: .9rem; cursor: pointer;
    color: var(--ink); background: var(--paper-sunken); border: 1px solid var(--rule); border-radius: var(--radius);
}