/* Text people write in the editor: a project's or team member's blurb (left column),
   a service's description, and page or project text (.entry-text, right column).
   Each column is about a third of the screen wide on desktop, so the text size grows
   with the screen to keep roughly 50-60 characters per line. */

:root {
    /* 17px on phones and small laptops, 20px at 1440px wide, 24px at 2000px and up */
    --text-size: clamp(1.0625rem, 0.6rem + 0.72vw, 1.5rem);
    --text-line-height: 1.5;
    /* A touch darker than the accent grey so smaller text stays easy to read
       (4.9:1 on white; the accent grey is 4.1:1, a little short for small text) */
    --text-color: rgb(104, 114, 124);
    /* The page's title (title-block.css) */
    --title-size: calc(var(--text-size) * 1.5);
    --quote-rule-color: rgb(219 35 37); /* the red line's red */
}

.static-bottom-blurb,
.entry-text {
    font-size: var(--text-size);
    line-height: var(--text-line-height);
    /* A long word or web address breaks rather than poking out of the column. ("anywhere" also
       lets a box that shrinks to fit its text get narrower; older browsers only know break-word.) */
    overflow-wrap: break-word;
    overflow-wrap: anywhere;
}

.static-bottom-blurb,
.entry-text,
:is(.static-bottom-blurb, .entry-text) :is(div, span, p, li, blockquote, td, th) {
    color: var(--text-color);
}

/* Space between paragraphs, lists, quotes and tables (images keep their own, larger, spacing) */
:is(.static-bottom-blurb, .entry-text) :is(p, ul, ol, blockquote, pre, table, .table-scroll) {
    margin-bottom: 0.9em;
}

/* Headings: uppercase grey like the page title, each level a step smaller.
   The page title above is the page's Heading 1, so Heading 2 is the one to use for sections. */
:is(.static-bottom-blurb, .entry-text) :is(h1, h2, h3, h4, h5, h6) {
    margin: 1.6em 0 0.5em;
    color: var(--primary-accent-color);
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-wrap: balance;
}
/* The smaller headings take the text's own grey: the accent grey is too pale for them */
:is(.static-bottom-blurb, .entry-text) :is(h3, h4, h5, h6) {
    color: var(--text-color);
}
:is(.static-bottom-blurb, .entry-text) h1 { font-size: 1.3em; }
:is(.static-bottom-blurb, .entry-text) h2 { font-size: 1.15em; }
:is(.static-bottom-blurb, .entry-text) h3 { font-size: 1em; }
:is(.static-bottom-blurb, .entry-text) h4 { font-size: 0.9em; letter-spacing: 0.06em; }
:is(.static-bottom-blurb, .entry-text) h5 { font-size: 0.85em; letter-spacing: 0.08em; }
:is(.static-bottom-blurb, .entry-text) h6 { font-size: 0.8em; letter-spacing: 0.1em; }

:is(.static-bottom-blurb, .entry-text) :is(h1, h2, h3, h4, h5, h6):first-child {
    margin-top: 0;
}

/* Lists */
:is(.static-bottom-blurb, .entry-text) :is(ul, ol) {
    padding-left: 1.25em;
}
:is(.static-bottom-blurb, .entry-text) li + li {
    margin-top: 0.3em;
}
:is(.static-bottom-blurb, .entry-text) li > :is(ul, ol) {
    margin: 0.3em 0 0;
}
:is(.static-bottom-blurb, .entry-text) li::marker {
    color: var(--primary-accent-color);
}

/* Links: the same grey as the text, so the underline is what shows they are links.
   It is drawn in the text's own colour, thick enough to see at a glance. */
:is(.static-bottom-blurb, .entry-text) a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.2em;
    text-decoration-color: currentColor;
}
:is(.static-bottom-blurb, .entry-text) a:hover {
    text-decoration-thickness: 2px;
}

/* Quotes: a thin red rule on the left */
:is(.static-bottom-blurb, .entry-text) blockquote {
    padding-left: 1em;
    border-left: 3px solid var(--quote-rule-color);
    font-style: italic;
}

:is(.static-bottom-blurb, .entry-text) hr {
    margin: 1.6em 0;
    border: 0;
    border-top: 1px solid rgba(var(--distinct-primary-accent-color), 0.3);
}

/* Code: a pale box (light enough that the grey text on it is still easy to read), with a hairline
   so it shows in high contrast mode too. A block of code keeps its lines as written and scrolls
   sideways when they are long (inc/capabilities/scrollable-tables.php lets the keyboard reach it). */
:is(.static-bottom-blurb, .entry-text) :is(pre, code, kbd, samp) {
    border: 1px solid rgba(var(--distinct-primary-accent-color), 0.2);
    border-radius: 6px;
    background-color: rgba(var(--distinct-primary-accent-color), 0.06);
    font-family: Consolas, Menlo, monospace;
}
:is(.static-bottom-blurb, .entry-text) pre {
    max-width: 100%;
    padding: 0.7em 1em;
    overflow-x: auto;
    white-space: pre;
    overflow-wrap: normal;
    font-size: 0.85em;
    line-height: 1.5;
}
:is(.static-bottom-blurb, .entry-text) :is(code, kbd, samp) {
    padding: 0.05em 0.35em;
    border-radius: 4px;
    font-size: 0.88em;
}
:is(.static-bottom-blurb, .entry-text) pre :is(code, kbd, samp) {
    padding: 0;
    border: 0;
    background: none;
    font-size: 1em;
}
:is(.static-bottom-blurb, .entry-text) :is(pre, .table-scroll):focus-visible {
    outline: 2px solid var(--primary-accent-color);
    outline-offset: -2px; /* inside the box, where the column's edge can't cut it off */
}

/* Tables: one wider than the column scrolls sideways inside its own box instead of poking out
   of the column. inc/capabilities/scrollable-tables.php puts each table in .table-scroll (and lets
   the keyboard reach it). */
:is(.static-bottom-blurb, .entry-text) table {
    width: 100%;
    border-collapse: collapse;
}
.table-scroll {
    max-width: 100%;
    overflow-x: auto;
}
.table-scroll > table {
    margin-bottom: 0;
}
/* A table that wasn't put in that box (the Blurb is one place): the table itself scrolls */
:is(.static-bottom-blurb, .entry-text):not(.mce-content-body) table:not(.table-scroll table) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}
/* A soft shadow on the edge where there is more to scroll to, and none where the table has
   run out. The shadows stay put at the box's edges. The white patches are fixed to the table's
   own contents, so they move with it and cover each shadow once the table's edge has scrolled
   into view (the page is white). A browser that can't do that leaves the patches still, so
   they hide the shadows for good: no harm done. */
.table-scroll,
:is(.static-bottom-blurb, .entry-text):not(.mce-content-body) table:not(.table-scroll table) {
    background:
        linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) 0 0 / 2.5em 100% no-repeat local,
        linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) 100% 0 / 2.5em 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, rgba(var(--distinct-primary-accent-color), 0.35), rgba(var(--distinct-primary-accent-color), 0)) 0 0 / 0.9em 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, rgba(var(--distinct-primary-accent-color), 0.35), rgba(var(--distinct-primary-accent-color), 0)) 100% 0 / 0.9em 100% no-repeat scroll;
}
:is(.static-bottom-blurb, .entry-text) :is(th, td) {
    padding: 0.4em 0.6em;
    text-align: left;
    vertical-align: top;
    /* Words stay whole: a table with many columns scrolls rather than breaking every word */
    overflow-wrap: normal;
    border-bottom: 1px solid rgba(var(--distinct-primary-accent-color), 0.25);
}
/* A column heading sits at the bottom of its cell, close to the column it names. */
:is(.static-bottom-blurb, .entry-text) th {
    vertical-align: bottom;
}
:is(.static-bottom-blurb, .entry-text) th[scope="row"] {
    vertical-align: top;
}
/* Only a web address (or code) in a cell breaks anywhere, so it can't stretch its column */
:is(.static-bottom-blurb, .entry-text) :is(th, td) :is(a, code) {
    overflow-wrap: anywhere;
}

/* Captions under pictures */
:is(.static-bottom-blurb, .entry-text) figcaption.wp-caption-text {
    color: var(--text-color);
}

/* Things dropped in from other sites never run past the column. A frame with no height of its
   own (the usual video embed) is as tall as a 16:9 screen is for its width. */
:is(.static-bottom-blurb, .entry-text) :is(iframe, video, embed, object) {
    max-width: 100%;
}
:is(.static-bottom-blurb, .entry-text) video {
    height: auto;
}
:is(.static-bottom-blurb, .entry-text) iframe:not([height]) {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}
/* A YouTube or Vimeo embed pasted with its own width and height: keep its 16:9 shape when the
   column is narrower than that width (otherwise the height stays and the video letterboxes) */
:is(.static-bottom-blurb, .entry-text) iframe:is([src*="youtube"], [src*="youtu.be"], [src*="vimeo"]) {
    height: auto;
    aspect-ratio: 16 / 9;
}

/* Phones: roomier table cells, easier to read and to scroll past with a thumb */
@media only screen and (max-width: 768px) {
    :is(.static-bottom-blurb, .entry-text) :is(th, td) {
        padding: 0.65em 0.85em;
    }
}