/* ==========================================================================
   CODE
   ==========================================================================
   Contao's code element highlights server-side with scrivo/highlight.php and
   emits <pre><code class="hljs {language}">. That package IS a core
   dependency — unlike handorgel, nothing extra needs installing. Contao
   publishes its foundation.css to public/vendor/scrivo/highlight_php/ and
   links it whenever a code element is on the page, which is where the syntax
   colours come from.

   foundation.css already gives .hljs `display: block; overflow-x: auto`, so a
   real code element scrolls rather than being clipped. This file deliberately
   does NOT depend on that, for one reason: foundation.css is linked only when
   a CODE ELEMENT is present. A hand-written <pre> in a text or unfiltered
   HTML element gets none of it — and with html and #wrapper both on
   `overflow: clip` there is no scrollbar to fall back on, so an unscrollable
   block is cut off with its right-hand side unreachable. Same failure mode
   tables.css exists to prevent.

   So the scroll is restated here, on selectors that hold whether or not the
   highlighter ran.
   ========================================================================== */


/* --------------------------------------------------------------------------
   BLOCK
   -------------------------------------------------------------------------- */

.content-code pre,
.rte pre {
    margin: 0 0 var(--space-24);
}

/* The scrolling box. Both the <code> inside a highlighted block and a bare
   <pre> are covered, because only the first of those ever sees .hljs.

   `white-space: pre` is stated rather than left to the UA: a site-wide
   inline-code rule that sets nowrap will otherwise inherit down into a block
   and collapse every newline, rendering the whole sample on one line. That
   happened on the reference page, and it is silent — the code is still there,
   just unreadable. */
.content-code pre > code,
.content-code > pre,
.rte pre {
    display: block;
    overflow-x: auto;
    white-space: pre;
    padding: var(--space-16);
    background: var(--grey-light);
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* rem, not em, deliberately. Browsers render a monospace <pre> at a
       smaller default size than surrounding text, so an em here compounds
       against the already-shrunk size — measured 11px where 14 was intended.
       rem sidesteps the quirk and gives one predictable size. */
    font-size: .875rem;
    line-height: 1.55;
    tab-size: 4;

    /* Keeps the scrollbar off the last line rather than over it. */
    padding-bottom: calc(var(--space-16) + 2px);
}

/* When the block IS highlighted, foundation.css has already painted the
   background on .hljs. Neutralising the <pre> underneath stops a second
   panel showing through as a border around the first. */
.content-code pre:has(> code.hljs) {
    background: none;
    padding: 0;
}


/* --------------------------------------------------------------------------
   INLINE
   --------------------------------------------------------------------------
   `:not(pre) > code` so this can never reach a block. Scoping it the other
   way — a bare `code` rule — is what broke the block in the first place.
   -------------------------------------------------------------------------- */

.rte :not(pre) > code,
.content-text :not(pre) > code {
    padding: .1em .35em;
    background: var(--grey-light);
    border-radius: 3px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .875em;

    /* Inline code sits inside running text, so it has to be allowed to break
       with it. Setting nowrap here pushes long tokens out of the column. */
    overflow-wrap: break-word;
}


/* --------------------------------------------------------------------------
   OPTIONAL — wrap instead of scroll
   --------------------------------------------------------------------------
   Add .code-wrap to the content element. Worth considering: a horizontal
   scroll container has to be reachable by keyboard, and browsers are
   inconsistent about focusing one automatically (see the note below).
   Wrapping removes the scroll container altogether, so the problem does not
   arise — at the cost of broken line formatting.
   -------------------------------------------------------------------------- */

.code-wrap pre > code,
.code-wrap > pre {
    white-space: pre-wrap;
    overflow-wrap: break-word;
    overflow-x: visible;
}


/* ACCESSIBILITY NOTE
   Measured on this build: the highlighted block scrolls, but neither the
   <pre> nor the <code> carries tabindex, so a keyboard-only user cannot
   reach the hidden right-hand side. CSS cannot add tabindex.

   Fix it in one of three ways, in order of preference:
     1. .code-wrap on elements whose lines run long, so nothing scrolls.
     2. Keep samples short enough to fit.
     3. Override content_element/code and put tabindex="0" plus an accessible
        name on the <pre>.

   tables.css carries the same caveat for the same reason. */