/*
 * assets/css/site.css
 * The MPX stylesheet. Served as a file from the web root.
 *
 * This file carries the MPX 1.3.4 design. The palette, the type scale,
 * the layout widths, the component treatment, and the link treatments
 * are all set there. Change 1.3.4 first, then change this file.
 *
 * One rule here is load bearing rather than cosmetic. The honeypot rule
 * under Contact form hides a field that a visitor must never fill. If
 * this file fails to load, that field renders visible. The field also
 * carries tabindex minus one and aria-hidden, neither of which depends
 * on this file, so the failure degrades rather than breaks.
 */

/* Typeface
   Open Sans, self hosted. The Content Security Policy names this origin
   as the only font source, so a font service would be blocked. Two
   weights ship, 400 and 600. No italic, because no page body uses one.
   swap paints text in the fallback first, so nothing is invisible while
   the file loads.
   ------------------------------------------------------------------ */

@font-face {
    font-family: "Open Sans";
    src: url("/assets/fonts/opensans-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Open Sans";
    src: url("/assets/fonts/opensans-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* Palette
   The five colors from 1.3.4. Nothing outside this list is a brand
   color. The status colors below are functional and are named apart.
   ------------------------------------------------------------------ */

:root {
    --night: #131418;
    --antiflash: #eeeeee;
    --gold: #d6a302;
    --deep-gold: #8a6a00;
    --slate: #4a4d57;
    --white: #ffffff;

    --rule-light: rgba(74, 77, 87, 0.22);
    --rule-dark: rgba(214, 163, 2, 0.30);

    --status-good: #276b2b;
    --status-good-bg: #f1f7f1;
    --status-warn-bg: #fbf4ec;
    --status-bad: #b3261e;
    --status-bad-bg: #fdf1f0;
    --status-bad-text: #8f1d17;

    --shadow: 0 2px 8px rgba(19, 20, 24, 0.18);

    --wrap: 1120px;
    --measure: 720px;
}

/* Base
   18 pixels with a line height of 1.6. Body text is Slate. Headings are
   Night. Spacing runs on an eight pixel scale and no value sits outside
   it.
   ------------------------------------------------------------------ */

* {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    font-family: "Open Sans", system-ui, Arial, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--slate);
    background: var(--white);
}

.wrap {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 24px;
}

/* Typography
   Headings carry their space above, not below. A heading belongs to the
   text that follows it. On a Factor page with eight sections that single
   rule does most of the work.
   ------------------------------------------------------------------ */

h1,
h2,
h3,
h4 {
    color: var(--night);
    font-weight: 600;
    margin: 0 0 16px;
}

h1 {
    font-size: 40px;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

h2 {
    font-size: 28px;
    line-height: 1.3;
    margin-top: 48px;
}

h3 {
    font-size: 21px;
    line-height: 1.4;
    margin-top: 32px;
}

h4 {
    font-size: 18px;
    margin-top: 24px;
}

p,
ul,
ol {
    margin: 0 0 16px;
}

ul,
ol {
    padding-left: 24px;
}

li {
    margin: 0 0 8px;
}

small,
.hint,
.factor-summary,
.phase-headline {
    font-size: 15px;
}

/* Reading measure
   The reading column is 720 pixels, which lands near 68 characters at
   this size. It is applied to the prose inside main rather than to main
   itself, because a listing page needs the full wrap and there is no
   per page class to switch on. Anything that needs the width overrides
   below.
   ------------------------------------------------------------------ */

main.wrap {
    padding-top: 48px;
    padding-bottom: 64px;
}

main h1,
main h2,
main h3,
main h4,
main p,
main ul,
main ol {
    max-width: var(--measure);
}

/* Links
   Deep gold, underlined. The underline is not decoration. Color alone
   cannot carry link state under AA.
   ------------------------------------------------------------------ */

a {
    color: var(--deep-gold);
    text-decoration: underline;
    text-underline-offset: 3px;
}

a:hover {
    color: var(--night);
}

/* Lexicon links
   A link to a term definition. It is a gloss on a word, not an
   invitation to leave the page. The text stays at body color and the
   double underline carries the signal, so a definition does not compete
   with real navigation inside a paragraph. The distinction does not
   rest on color, so it satisfies AA.
   Styled by address, not by class. Author the plain anchor and it
   styles itself. The footer Lexicon link has no fragment, so this does
   not reach it.
   ------------------------------------------------------------------ */

a[href*="/lexicon/#"] {
    color: var(--slate);
    text-decoration: underline;
    text-decoration-style: double;
    text-decoration-color: var(--deep-gold);
    text-underline-offset: 4px;
}

a[href*="/lexicon/#"]:hover {
    color: var(--deep-gold);
    text-decoration-style: solid;
}

/* Focus
   focus-visible means a mouse click does not paint a ring, while a
   keyboard visit always does. The ring is field dependent. A Night ring
   disappears against the dark header, so the header and footer carry a
   Gold ring instead.
   ------------------------------------------------------------------ */

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--night);
    outline-offset: 2px;
}

.site-header a:focus-visible,
.site-footer a:focus-visible {
    outline-color: var(--gold);
}

/* main takes focus when the skip link is used. It is not reachable by tab,
   so a ring around the whole page would only confuse. */
main[tabindex="-1"]:focus,
main[tabindex="-1"]:focus-visible {
    outline: none;
}

/* Skip link
   The first focusable element on every page. Out of sight until it takes
   focus, then visible. It targets the id on main.
   ------------------------------------------------------------------ */

.skip-link {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.skip-link:focus {
    position: static;
    display: block;
    width: auto;
    height: auto;
    padding: 16px 24px;
    color: var(--white);
    background: var(--night);
    text-decoration: underline;
}

/* Header
   A Night field, 72 pixels tall. The lockup sits left at 40 pixels, in
   the dark variant, because the shield needs its gold outline on a dark
   field. Navigation sits right. Log in is the one item styled as a
   button.
   ------------------------------------------------------------------ */

.site-header {
    background: var(--night);
}

.site-header .wrap {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 72px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex: none;
}

.brand img {
    display: block;
    height: 40px;
    width: auto;
}

nav.primary {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 1;
    flex-wrap: wrap;
}

nav.primary a {
    color: var(--antiflash);
    text-decoration: none;
    font-size: 15px;
}

nav.primary a:hover {
    color: var(--gold);
    text-decoration: underline;
    text-underline-offset: 4px;
}

nav.primary a.active {
    color: var(--gold);
    font-weight: 600;
}

/* Log in. The primary button treatment. Gold fill with Night text,
   which measures 7.97 to 1. */
.login {
    flex: none;
    padding: 8px 24px;
    color: var(--night);
    background: var(--gold);
    border: 1px solid var(--gold);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.login:hover {
    color: var(--night);
    background: var(--white);
    border-color: var(--white);
}

/* Footer
   The second Night field. These are the only two.
   ------------------------------------------------------------------ */

.site-footer {
    margin-top: 64px;
    background: var(--night);
}

.site-footer .wrap {
    display: flex;
    align-items: center;
    gap: 24px;
    padding-top: 32px;
    padding-bottom: 32px;
    flex-wrap: wrap;
}

nav.secondary {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.site-footer a {
    color: var(--antiflash);
    text-decoration: none;
    font-size: 15px;
}

.site-footer a:hover {
    color: var(--gold);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.site-footer a.active {
    color: var(--gold);
    font-weight: 600;
}

.site-footer .copy {
    margin-left: auto;
    color: var(--antiflash);
    font-size: 15px;
}

/* Growth Factor detail page
   Sections separate by space and a heading. They do not separate by
   boxes or rules. Eight boxed sections read as a form rather than as a
   document.
   ------------------------------------------------------------------ */

.factor-summary {
    color: var(--slate);
}

main > .factor-summary {
    font-size: 21px;
    line-height: 1.5;
    margin-bottom: 32px;
}

.factor-section {
    margin: 0 0 8px;
}

.factor-section.how-to-complete {
    margin-top: 64px;
    padding-top: 32px;
    border-top: 1px solid var(--rule-light);
}

.factor-section.how-to-complete h2 {
    margin-top: 0;
}

/* Product Journey
   ------------------------------------------------------------------ */

.phase-headline {
    color: var(--slate);
}

.factor-list {
    list-style: none;
    padding-left: 0;
}

.factor-list li {
    padding: 8px 0;
    border-bottom: 1px solid var(--rule-light);
}

.factor-list .factor-summary {
    display: block;
    color: var(--slate);
}

/* Growth Factors index
   A single flat table of all 37 Factors. It uses the full wrap rather
   than the reading column, because three columns need the width.
   ------------------------------------------------------------------ */

.factor-index {
    width: 100%;
    max-width: none;
    border-collapse: collapse;
    margin: 0 0 32px;
    font-size: 15px;
}

.factor-index th,
.factor-index td {
    text-align: left;
    vertical-align: top;
    padding: 12px 16px 12px 0;
    border-bottom: 1px solid var(--rule-light);
}

.factor-index th {
    color: var(--night);
    font-weight: 600;
    border-bottom-color: var(--slate);
}

/* Lexicon
   ------------------------------------------------------------------ */

.lexicon-term {
    margin: 0 0 32px;
    scroll-margin-top: 24px;
}

.lexicon-term h2 {
    margin-top: 32px;
    font-size: 21px;
}

/* Lexicon popup
   The definition of a linked term, shown in place. A note about a word,
   so it is sized and colored to read as an aside and not as a panel.
   It is an Anti-flash white surface rather than a Night one. A dark
   overlay would read as a second header. The hairline and the shadow are
   what separate it from the page, since the surface color alone is close
   to white.
   Position is set by the script, which knows where the link is. This
   file owns everything else.
   The element ships hidden. If the script never runs, hidden keeps it
   out of the page rather than dropping an unpositioned block at the
   bottom of the body.
   ------------------------------------------------------------------ */

.lexicon-popup {
    position: absolute;
    z-index: 20;
    max-width: 320px;
    max-height: 40vh;
    overflow-y: auto;
    padding: 16px;
    background: var(--antiflash);
    border: 1px solid var(--rule-light);
    box-shadow: var(--shadow);
}

.lexicon-popup[hidden] {
    display: none;
}

.lexicon-popup-term {
    margin: 0 0 8px;
    color: var(--night);
    font-weight: 600;
    font-size: 16px;
}

/* The definition is authored markup, so it arrives wrapped in a p. The
   first and last margins are removed so the padding is the only spacing
   at the edges. */
.lexicon-popup-body {
    color: var(--slate);
    font-size: 16px;
    line-height: 1.5;
}

.lexicon-popup-body > :first-child {
    margin-top: 0;
}

.lexicon-popup-body > :last-child {
    margin-bottom: 0;
}

/* Forms
   Fields run the full width of the reading column. Labels sit above
   their inputs. Error text sits below the field it names.
   ------------------------------------------------------------------ */

.contact-form {
    max-width: var(--measure);
}

.field {
    margin: 0 0 24px;
}

.field label {
    display: block;
    color: var(--night);
    font-weight: 600;
    margin-bottom: 8px;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 8px 16px;
    border: 1px solid var(--slate);
    font: inherit;
    color: var(--night);
    background: var(--white);
}

.field .hint {
    display: block;
    margin-top: 8px;
    color: var(--slate);
}

.field .error {
    display: block;
    margin-top: 8px;
    color: var(--status-bad);
    font-weight: 600;
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea {
    border-color: var(--status-bad);
    border-width: 2px;
}

/* The submit button. The primary treatment, matching Log in. */
.field button {
    width: auto;
    padding: 12px 32px;
    font: inherit;
    font-weight: 600;
    color: var(--night);
    background: var(--gold);
    border: 1px solid var(--gold);
    cursor: pointer;
}

.field button:hover {
    background: var(--white);
}

/* Contact form honeypot
   Off screen for sighted users, out of the tab order, and out of the
   accessibility tree by way of aria-hidden.
   ------------------------------------------------------------------ */

.contact-form .hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Form response states
   These colors are functional rather than brand. A success and a failure
   have to read as themselves, and the five brand colors cannot carry
   that. The notice state uses Deep gold, which is brand.
   ------------------------------------------------------------------ */

.form-status,
.form-notice,
.form-errors {
    max-width: var(--measure);
    margin: 0 0 24px;
    padding: 16px 24px;
}

.form-status {
    border-left: 4px solid var(--status-good);
    background: var(--status-good-bg);
}

.form-notice {
    border-left: 4px solid var(--deep-gold);
    background: var(--status-warn-bg);
}

.form-errors {
    border-left: 4px solid var(--status-bad);
    background: var(--status-bad-bg);
}

.form-errors:focus {
    outline: 2px solid var(--night);
    outline-offset: 2px;
}

.form-errors h3 {
    margin: 0 0 8px;
}

.form-errors p {
    margin: 0 0 8px;
}

.form-errors ul {
    margin: 0;
    padding-left: 24px;
}

.form-errors a {
    color: var(--status-bad-text);
}

/* Narrow screens
   The header stacks and the display sizes come down. Nothing else
   changes, because the layout is already flexible.
   ------------------------------------------------------------------ */

@media (max-width: 720px) {
    body {
        font-size: 17px;
    }

    h1 {
        font-size: 32px;
    }

    h2 {
        font-size: 24px;
        margin-top: 32px;
    }

    h3 {
        font-size: 19px;
    }

    .site-header .wrap {
        flex-wrap: wrap;
        gap: 16px;
        padding-top: 16px;
        padding-bottom: 16px;
    }

    nav.primary {
        order: 3;
        flex-basis: 100%;
        gap: 16px;
    }

    .site-footer .copy {
        margin-left: 0;
        flex-basis: 100%;
    }

    main > .factor-summary {
        font-size: 19px;
    }

    .factor-index {
        display: block;
        overflow-x: auto;
    }
}