/*
 * The editable block below the results (pageDetails->bottomText).
 *
 * This is the one component that has to use element selectors: the content is
 * CMS HTML with no classes of its own, so there is nothing else to hook. One
 * class plus a type still beats Foundation's `table tr td`, because a class
 * outranks any number of type selectors. The one !important answers a legacy
 * !important on h3 (see the h3 rule).
 */

.cms-prose {
    color: var(--shop-text);
    font-size: var(--shop-text-body);
    line-height: var(--shop-leading-body);
    /* A long URL or a long German compound breaks rather than overflowing a
       phone. break-word, not anywhere: it only acts on a word that would
       overflow, so it leaves every line that fits - and table sizing - alone. */
    overflow-wrap: break-word;
}

/* Spacing is the hierarchy here, since the text has no decoration to lean on:
   a heading sits close to its own text (8px) and well clear of what came
   before - 24px for a subsection (h3 and below), the subsection rhythm (32px,
   40px from 640) for a new topic (h1/h2). Paragraphs and lists keep 16px
   between them, and a list or table follows the sentence that introduces it
   at 8px. The margins collapse into one another (this is block flow), so each
   gap is the larger of the two sides - no gap is ever the sum of two. */
.cms-prose :is(h1, h2, h3, h4, h5, h6) {
    margin-block: var(--shop-space-6) var(--shop-space-2);
    color: var(--shop-ink);
    font-weight: var(--shop-weight-bold);
    line-height: var(--shop-leading-tight);
}

.cms-prose :is(h1, h2) {
    margin-block-start: var(--shop-rhythm-subsection);
    font-size: var(--shop-text-xl);
}

.cms-prose :is(h3, h4, h5, h6) {
    font-size: var(--shop-text-lg);
}

/* A third level, which long documents (the terms and conditions) use: the
   body size, still bold, so h2 / h3 / h4 read as three steps. */
.cms-prose :is(h4, h5, h6) {
    font-size: var(--shop-text-base);
}

/* A topic's heading straight above its first subsection's: kept together, so
   the h2 belongs to its group rather than floating between it and the text
   above. */
.cms-prose :is(h1, h2) + :is(h3, h4, h5, h6) {
    margin-block-start: var(--shop-space-3);
}

.cms-prose :is(p, ul, ol) {
    margin-block-end: var(--shop-space-4);
}

.cms-prose p:has(+ :is(ul, ol, table)) {
    margin-block-end: var(--shop-space-2);
}

/* The block's edges are the section's: the stack around it sets those. */
.cms-prose > :first-child,
.cms-prose > :first-child > :first-child {
    margin-block-start: 0;
}

.cms-prose > :last-child {
    margin-block-end: 0;
}

.cms-prose :is(ul, ol) {
    padding-inline-start: var(--shop-space-5);
}

.cms-prose li {
    margin-block-end: var(--shop-space-1);
}

/* A list inside a list item (the numbered clauses of a legal document): close
   to the item it belongs to, indented once more. */
.cms-prose li > :is(ul, ol) {
    margin-block: var(--shop-space-1) 0;
}

/* The company address: a block of lines, not the browser's italics. */
.cms-prose address {
    margin-block-end: var(--shop-space-4);
    font-style: normal;
}

/* Images an editor places: never wider than their column, never stretched. */
.cms-prose img {
    max-width: 100%;
    height: auto;
}

.cms-prose figure {
    margin: 0 0 var(--shop-space-4);
}

.cms-prose figure img {
    display: block;
    border-radius: var(--shop-radius-lg);
}

.cms-prose figcaption {
    margin-block-start: var(--shop-space-2);
    color: var(--shop-ink);
    font-size: var(--shop-text-md);
    font-weight: var(--shop-weight-semibold);
    line-height: var(--shop-leading-snug);
}

/* A set of small captioned figures (the laying patterns on Leginstructies):
   side by side as many as fit, each diagram at its own size - small
   instructional drawings, not photos to be stretched. */
.cms-prose .cms-figure-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: var(--shop-space-5) var(--shop-space-4);
    margin-block-end: var(--shop-space-4);
}

.cms-prose .cms-figure-grid figure {
    margin: 0;
}

.cms-prose .cms-figure-grid img {
    border-radius: 0;
}

/* An editor's pair of buttons (<p class="call-to-action"> holding a.btn
   links) - plain links here, so they are spaced apart rather than running
   together as one line of text. */
.cms-prose .call-to-action {
    display: flex;
    flex-wrap: wrap;
    gap: var(--shop-space-2) var(--shop-space-5);
}

/* A rule an editor puts between topics: a hairline, 24px after the text it
   closes; the heading after it keeps its own (larger) top margin, which the
   rule's collapses into. */
.cms-prose hr {
    height: 0;
    margin-block: var(--shop-space-6);
    border: 0;
    border-block-start: 1px solid var(--shop-divider);
}

.cms-prose :is(strong, b) {
    color: var(--shop-ink);
}

/* combined.css carries `h3 { margin-bottom: 0.125rem !important }` for the
   whole site, and the product page depends on it, so it cannot be relaxed. An
   !important can only be answered by another, and among those specificity
   decides - one class here outranks the bare `h3`. Only h3 carries it, so only
   h3 has to answer it. */
.cms-prose h3 {
    margin-block-end: var(--shop-space-2) !important;
}

/* Foundation underlines anchors on hover, hence the repeated states. */
.cms-prose a,
.cms-prose a:hover,
.cms-prose a:focus {
    color: var(--shop-accent);
    font-weight: var(--shop-weight-bold);
    text-decoration: none;
}

.cms-prose a:hover,
.cms-prose a:focus {
    color: var(--shop-accent-strong);
    text-decoration: underline;
}

/* Table -----------------------------------------------------------------------
   border-collapse: collapse would square off the rounded corners, so the cells
   stay separated and the four corner cells carry the radius themselves.

   combined.css turns every table into `display: block; white-space: nowrap`
   below 768px. Scrolling a wide table there is the right behaviour and is kept,
   but the nowrap is not: editorial tables are prose, and their cells have to
   wrap. Restated here rather than deleted from combined.css, which every
   unmigrated page still relies on. */

.cms-prose table {
    display: block;
    overflow-x: auto;
    white-space: normal;
    width: 100%;
    margin-block: var(--shop-space-2) var(--shop-space-4);
    border: 1px solid var(--shop-border);
    border-radius: var(--shop-radius-lg);
    border-collapse: separate;
    border-spacing: 0;
    background: var(--shop-surface);
}

/* 768px, which is neither of the design system's two breakpoints. It is not a
   layout decision of ours: it matches the width at which combined.css turns every
   table into a scrollable block, and has to, or the table would be styled for one
   mode while behaving in the other. */
@media (min-width: 768px) {
    .cms-prose table {
        display: table;
    }
}

.cms-prose thead {
    background: var(--shop-surface-subtle);
}

.cms-prose th {
    padding: var(--shop-space-3);
    border-block-end: 1px solid var(--shop-border);
    color: var(--shop-ink);
    font-size: var(--shop-text-md);
    font-weight: var(--shop-weight-bold);
    line-height: var(--shop-leading-snug);
    text-align: start;
}

.cms-prose td {
    padding: var(--shop-space-3);
    border-block-end: 1px solid var(--shop-divider);
    /* Declared, or combined.css's `table tr td { color: #222 }` sets it. */
    color: var(--shop-text);
    font-size: var(--shop-text-md);
    line-height: 1.45;
}

/* Tighter across on a phone, where a column is often a single word wide and
   16px either side of it is most of the cell. */
@media (min-width: 640px) {
    .cms-prose th,
    .cms-prose td {
        padding-inline: var(--shop-space-4);
    }
}

.cms-prose tbody tr:nth-child(even) {
    background: #faf9fd;
}

/* Body rows may start with a <th scope="row">. */
.cms-prose tbody th {
    border-block-end-color: var(--shop-divider);
}

.cms-prose tbody tr:last-child :is(td, th) {
    border-block-end: 0;
}

.cms-prose thead tr:first-child th:first-child {
    border-start-start-radius: var(--shop-radius-lg);
}

.cms-prose thead tr:first-child th:last-child {
    border-start-end-radius: var(--shop-radius-lg);
}

.cms-prose tbody tr:last-child :is(td, th):first-child {
    border-end-start-radius: var(--shop-radius-lg);
}

.cms-prose tbody tr:last-child :is(td, th):last-child {
    border-end-end-radius: var(--shop-radius-lg);
}