/* ============================================================================
 * topused — the CMS layer.
 *
 * Loaded AFTER topused.css, which is the design prototype's stylesheet ported
 * byte-for-byte. Keeping that file untouched is what makes the next export from
 * the designer a copy rather than a merge, so everything the prototype had no
 * reason to know about lives here instead:
 *
 *   - controls core renders and the theme only positions (accessibility)
 *   - states a static page cannot have (a form that answers, an empty listing)
 *   - operator-authored rich text, which arrives as arbitrary HTML
 *   - the sticky header's effect on in-page anchors
 *
 * Every rule here is qualified by one of those reasons. A rule that belongs to
 * the design belongs in topused.css.
 *
 * ONE DELIBERATE EXCEPTION TO "UNTOUCHED", recorded here because the sentence
 * above is what somebody will read first: topused.css no longer matches the
 * designer's export. Its dark scheme — a `prefers-color-scheme:dark` block and
 * a `:root[data-bs-theme="dark"]` twin, sixteen custom properties between them —
 * was deleted on request. The client ships one appearance.
 *
 * It was cut from that file rather than overridden from this one ON PURPOSE.
 * Overriding here would mean restating all sixteen LIGHT values inside a
 * `prefers-color-scheme` block, which is a rule belonging to the design living
 * in the CMS layer — the one thing the paragraph above forbids — and a copy that
 * can drift from the original.
 *
 * So the next export is a merge, not a copy, and tests/LightSchemeOnlyTest is
 * what makes that fact arrive as a build failure instead of as a dark homepage
 * nobody on a light screen can see.
 *
 * A SECOND DIVERGENCE, for the same reasons: the hero below 768px. The
 * prototype covers the photograph with a flat dark scrim and sizes the hero
 * from its text; the client asked for two halves — the picture across the top
 * of the screen, the words on a dark block under it, and a gradient where they
 * meet. That is the design of the page, so it was written into topused.css §7
 * rather than overridden from here — and tests/HeroMobileCssTest is its
 * LightSchemeOnlyTest.
 *
 * The same divergence reaches desktop: from 768px up the hero is at least the
 * screen under the header, with the words centred in it, so a slide with a
 * short heading no longer shows a shorter photograph than its neighbours. Its
 * padding drops to the prototype's 96px floor to make that fit a laptop screen.
 * Guarded by tests/HeroDesktopCssTest.
 *
 * What DID stay here is `.hero-art--mobile` below: the class exists only
 * because a slide can hold a second, phone-sized file, which is a CMS
 * capability the prototype has no concept of.
 *
 * There WAS a third: the price box's red "Saada päring" button took the black
 * border of the outline button stacked under it. It is gone, because the client
 * then asked for that button to BE the outline button — a class change in
 * vehicle.php, which a designer export cannot revert, so it needs no entry here.
 *
 * So topused.css now carries TWO deliberate edits, each guarded by a test —
 * LightSchemeOnlyTest and the two hero tests — because the next export from the
 * designer reverts both at once and neither is visible in a diff anyone reads.
 * ========================================================================== */

/* ---------------------------------------------------------------- anchors */
/* Core writes <div id="…" class="pc-anchor"> before any section carrying an
   anchor id, and a link to it scrolls the target to y=0 — underneath the
   sticky masthead. scroll-margin-top is the fix that does not need JavaScript
   and does not move the element. The value is the header's own height.

   `.block-head[id]` IS LISTED SEPARATELY FROM `:target` although a jump makes
   it one. `:target` only matches once the fragment is actually set, so the
   value does not exist before the jump — and topused.js reads it off the
   element to decide where to scroll, which it has to do BEFORE navigating.
   Read through `:target` alone it came back 0 and the heading landed under the
   masthead. Naming the element as well makes the offset a property of the
   thing rather than of the moment. */

.pc-anchor,
:target,
.block-head[id] {
    scroll-margin-top: 104px;
}

@media (max-width: 1199.98px) {
    .pc-anchor,
    :target,
    .block-head[id] {
        scroll-margin-top: 76px;
    }
}

/* ------------------------------------------------------------- page title */
/* The fallback <h1>. Pages whose design opens on a `hero` or a `page-header`
   carry their heading inside that section; this is for the ones that do not, so
   that no page is ever served without an <h1>. (WCAG 2.4.6, 1.3.1) */

.page-title {
    margin: 0;
    padding: 46px 0 0;
    font-family: var(--f-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.05;
}

/* --------------------------------------------------------- form responses */
/* A static prototype's form can only ever succeed. These are the states a real
   one has, and `role="status"` on the element is what announces them. */

.subscribe-status {
    flex: 0 0 100%;
    margin: 10px 0 0;
    font-size: 15px;
}

.subscribe-status.is-success {
    color: var(--man-green, #91b900);
}

.subscribe-status.is-error {
    color: #ffd7e0;
}

.enquiry .form-error {
    margin: 6px 0 0;
    font-size: 14.5px;
    color: var(--accent-ink, #ac003f);
}

.enquiry .form-control.is-invalid,
.enquiry .form-select.is-invalid {
    border-color: var(--accent-ink, #ac003f);
}

/* The reply to a submission, in place. Empty and unstyled until the handler
   writes it, so it takes no room on a form nobody has submitted — `:empty`
   rather than a class, because the handler clearing the text is then the whole
   of putting it away.

   The border is what makes it read as a reply rather than another paragraph of
   the form, and it is not colour alone: the wording says which it is, and the
   success and failure states differ in more than hue. (WCAG 1.4.1) */

.enquiry .form-status {
    margin: 14px 0 0;
    font-size: 15.5px;
    line-height: 1.5;
    border-left: 4px solid transparent;
    padding-left: 14px;
}

.enquiry .form-status:empty {
    display: none;
}

.enquiry .form-status.is-success {
    border-left-color: var(--man-green, #91b900);
    color: var(--ink);
}

.enquiry .form-status.is-error {
    border-left-color: var(--accent-ink, #ac003f);
    color: var(--accent-ink, #ac003f);
}

/* Focused only programmatically, to move a reader to a failure that belongs to
   no single field. It is not a control, so it gets no focus ring of its own. */

.enquiry .form-status:focus {
    outline: none;
}

/* ------------------------------------------------------------ empty state */
/* A listing with no rows. The prototype never had one, because its results
   were typed into the markup. */

.empty-note {
    margin: 0;
    padding: 34px 0;
    color: var(--ink-2);
    font-size: 17px;
    font-weight: 300;
}

/* ------------------------------------------------------------- rich text */
/* Operator-authored HTML from the editor — core's `texts` and `custom-html`
   sections, a blog post's body, a page's intro. The tags that arrive are
   whatever the editor produced, so the typography is set on the wrapper and
   inherited rather than per-block. It reuses the article column's measure,
   which is the width this typography was drawn for. */

.cms-html {
    font-weight: 300;
    font-size: 17px;
    line-height: 1.65;
    color: var(--ink-2);
}

.cms-html > :first-child {
    margin-top: 0;
}

.cms-html > :last-child {
    margin-bottom: 0;
}

.cms-html h2,
.cms-html h3,
.cms-html h4 {
    margin: 34px 0 12px;
    font-family: var(--f-display);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ink);
    letter-spacing: -0.01em;
}

.cms-html h2 {
    font-size: clamp(22px, 2.4vw, 29px);
    padding-top: 14px;
    border-top: 3px solid var(--accent);
}

.cms-html h3 {
    font-size: 21px;
}

.cms-html h4 {
    font-size: 18px;
}

.cms-html p {
    margin: 0 0 18px;
}

.cms-html a {
    color: var(--accent-ink);
    text-underline-offset: 3px;
}

.cms-html ul,
.cms-html ol {
    margin: 0 0 18px;
    padding-left: 22px;
}

.cms-html li {
    margin-bottom: 7px;
}

.cms-html img {
    max-width: 100%;
    height: auto;
}

.cms-html table {
    width: 100%;
    margin: 0 0 20px;
    border-collapse: collapse;
}

.cms-html th,
.cms-html td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--line);
    text-align: left;
}

.cms-html th {
    font-family: var(--f-label);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 13px;
    color: var(--ink);
}

/* ------------------------------------------------------- category counts */
/* `.cat .bar em` holds a stock count in the prototype, typed in. It is a live
   count here, and a category with none must not show a bare zero where a
   number reading "how many are waiting for you" is expected. */

.cat .bar em:empty {
    display: none;
}

/* --------------------------------------------------------------- gallery */
/* The thumbnail strip's buttons. `.thumb:focus-visible` is in topused.css
   already; this raises the ring above the active thumbnail's inner red border,
   which otherwise sits on top of it and makes the focused thumbnail and the
   current one indistinguishable. (WCAG 2.4.7) */

.thumbs .thumb:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    z-index: 1;
}

/* -------------------------------------------------------------- chip links */
/* The prototype drew the "remove this filter" control as a <button>. It
   navigates — the filter lives in the URL — so it is a link here, and a link is
   what a screen reader must be told it is. Same look; the rules `.chip button`
   carries have to be repeated for `a` because a link is not a button. */

.chip a {
    padding: 0 2px;
    font-size: 17px;
    line-height: 1;
    color: var(--ink-3);
    text-decoration: none;
}

.chip a:hover,
.chip a:focus-visible {
    color: var(--accent);
}

/* ------------------------------------------------------- required markers */
/* The asterisk inside a <label>. IN THE LABEL, not beside it — and it is only
   the visible half of the marker: `topused_required_mark()` hides it from
   assistive technology and pairs it with the word "(nõutav)", which is what
   puts requiredness in the input's accessible name. A red star on its own
   carries the meaning in colour and in one skipped character. (WCAG 3.3.2)

   `--accent-ink` rather than `--accent`, because the marker is small text and
   has to clear 4.5:1 against the field's white background. Both resolve to
   #e40045 on a light page; they were different values only under the dark
   scheme, which this theme no longer ships. */

.enquiry .form-label .req,
.contact-form .form-label .req,
.enquiry .form-check-label .req,
.contact-form .form-check-label .req {
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: var(--accent-ink, #ac003f);
}

/* ------------------------------------------------------------ placeholders */
/* An EXAMPLE of the value, and it has to be legible to be one. Bootstrap's
   default is `--bs-secondary-color`, which is the body colour at 75% opacity
   and lands under 4.5:1 on this form's white fields. (WCAG 1.4.3)

   `--ink-3` is the obvious choice and is wrong: it is the theme's quiet grey,
   at roughly 3:1 here. `--ink-2` clears the threshold and is still well lighter
   than `--ink`, which is what a typed value is drawn in — so an example still
   does not read as a field somebody has already filled in.

   `opacity: 1` because Firefox applies its own to placeholders, which would
   undo the colour the line above it picks. */

.enquiry .form-control::placeholder,
.contact-form .form-control::placeholder {
    color: var(--ink-2);
    opacity: 1;
}

/* ----------------------------------------------------------- footer extras */
/* The two brand badges, under the company name in the footer's first column.

   NO SEPARATOR RULE ABOVE THEM. The earlier version of this sat on its own
   full-width row between the link columns and the legal strip, where a border
   was what stopped it reading as part of the columns. Inside a column the same
   border would be a line across one third of the footer, ending in mid-air. */

.foot-badges {
    margin-top: 28px;
}

/* THE SAME SIZE WHATEVER IS UPLOADED, which is a rendering rule and not
   something the upload can be trusted to deliver: the two badges come from two
   organisations, and the ones this replaced were a 510px square SVG and a
   1080x1350 PNG. A FIXED height with `width: auto` makes them line up on their
   baseline and lets each keep its own proportions; `object-fit: contain` is what
   stops a square box squashing a tall one. */

.foot-badges img {
    display: block;
    height: 92px;
    width: auto;
    max-width: 170px;
    object-fit: contain;
}

.sitefoot .foot-social {
    margin-top: 10px;
}

.sitefoot .legal-recaptcha {
    /* Google's notice carries its own links and is one long sentence. It gets
       the middle of the strip and shrinks first. */
    flex: 1 1 340px;
    font-size: 12.5px;
    opacity: 0.75;
}

.sitefoot .legal-recaptcha a {
    text-decoration: underline;
}

/* ------------------------------------------------------- dropdown buttons */
/* A PARENT WITH NO PAGE OF ITS OWN IS A <button>, not an <a> — there is nothing
   to link to, and a link to "#" is a dead control. The prototype only drew the
   <a>, and a button does not stretch: even at `display:block` it is only as
   wide as its label. In the burger menu that left "KASUTATUD SÕIDUKID" 154px
   wide in a 320px column, and its divider line stopped halfway across while
   every other row's ran the full width.

   Burger menu only. In the desktop bar every item is as wide as its label
   anyway, and the underline is meant to be. */
@media (max-width: 1199.98px) {
    .mainnav button.nav-link {
        width: 100%;
        text-align: left;
    }
}

/* ------------------------------------------------------------- long menus */
/* THE DESIGN'S MENU IS SEVEN SHORT ITEMS and the prototype's own CSS fits them
   exactly. The menu is `header_items` rows here, though, so how many there are
   is an operator's decision the design cannot fix — and this site had nine for a
   while, two of them external links reading "MAN TRUCK & BUS EESTI" and "MAN
   TOPUSED EUROOPA". Those needed about 1100px in the 1025px the masthead has
   left after the brand, so the last item was pushed off the right-hand edge and
   the whole document grew a horizontal scrollbar.

   (Those two are FOOTER links in the design, and the seed command puts them
   there. This rule is what stops the next addition doing the same thing.)

   SO THE ROW WRAPS RATHER THAN THE PAGE WIDENING. The masthead gets taller,
   which is survivable; a page that scrolls sideways at 1440px fails WCAG 1.4.10
   outright and hides a menu item from anyone who does not think to scroll.
   Nothing here changes the seven-item case: a row with room to spare never
   wraps, so the design renders exactly as drawn.

   Forcing the LABELS to wrap instead was tried and reverted — it set
   "KASUTATUD SÕIDUKID" on two lines at seven items too, which is the design
   being broken by its own safety net. */

@media (min-width: 1200px) {
    .mainnav {
        flex-wrap: wrap;
        justify-content: flex-end;
        row-gap: 0;
    }

    /* The brand centres against whatever height the bar ends up being. Left at
       the prototype's `align-items: flex-end` it sat against the bottom of a
       wrapped masthead with a band of white above it. */
    .masthead .navbar {
        align-items: center;
    }
}

/* ------------------------------------------------------------ sort control */
/* The prototype's `.sorter` is a label and a select, and it is a real GET form
   here — so it carries a submit button as well, for the case where the
   submit-on-change script has not run. That third control is 87px the
   prototype's row never had to fit, and at 360px it pushed the toolbar 13px
   past the viewport: the listing was the one page in the site that scrolled
   sideways on a phone. (WCAG 1.4.10)
   
   Wrapping rather than hiding the button: hiding it would leave a visitor with
   JavaScript off a select that changes nothing. */

.sorter {
    flex-wrap: wrap;
}

.sorter .form-select {
    /* Enough for the longest option, and free to shrink below it rather than
       forcing the row wider. `min-width: 0` is the part flex items need to be
       allowed to shrink at all. */
    flex: 1 1 12rem;
    min-width: 0;
}

/* ------------------------------------------------------- open option list */
/* STYLING A `<select>` DOES NOT STYLE ITS OPTIONS. `background-color` is not
   inherited, and an `<option>` carries no author background of its own, so it
   computes to transparent whatever the control above it is painted — and the
   browser then draws the open list in its own system colours, ignoring the
   theme and the colour scheme alike.

   The prototype could not have found this: it is a state a static mock never
   reaches, because nobody opens the list in a screenshot. It showed first on
   the sort control, which is the one select in the design drawn as a bare
   underline rather than a box, so the mismatch on opening had nothing to hide
   behind — but both of the theme's selects had it.

   Unqualified, because the defect belongs to `<option>` and not to any one
   block: a select added later inherits the fix instead of the bug. The custom
   properties rather than literals, so the list is painted by whatever the page's
   surface and ink actually are — one place to change either, rather than two
   that agree until somebody edits one. Measured 11.24:1, past WCAG 1.4.3 AA.

   That reason USED to be "so the dark scheme is themed too". The theme ships
   light only now, and the tokens are still the right way to write this. */

.form-select option {
    background-color: var(--surface);
    color: var(--ink);
}

/* ------------------------------------------------------- the consent banner */
/* Core renders it (Silktide) and ships consent.css with its own palette: a
   #533BE2 purple, Helvetica Neue and 5px corners. On this site that is another
   product's banner sitting on top of a MAN one.

   RETHEMED THROUGH ITS OWN CUSTOM PROPERTIES, not by overriding its rules.
   consent.css declares the whole palette on `#silktide-wrapper` and every rule
   inside reads it from there, so re-declaring the nine values is the entire
   job — no selector duel, nothing to re-check when core updates the banner's
   markup, and no `!important`.

   The values are the theme's own tokens rather than literals, so the banner is
   painted from the same palette as the rest of the site and follows any change
   to it. (Until the dark scheme came out, it followed that too.)

   `html` IN FRONT OF THE ID, and it is load-bearing rather than decoration.
   consent.css is emitted AFTER this file — it is the last stylesheet on the
   page — so a bare `#silktide-wrapper` here matches core's own selector
   exactly, ties on specificity, and loses on order: the first attempt at this
   changed nothing at all and the banner stayed purple. The extra element
   selector wins the tie without `!important`. The same trick, for the same
   reason, is on `.utility #accessibility-toggle:hover` in topused.css.

   `--focus` IS DELIBERATELY NOT SET HERE. The theme has a `--focus` of its own
   at :root and it is a COLOUR, while Silktide's is a full box-shadow — same
   name, different type. The wrapper's own declaration already wins inside the
   banner; adding ours would put a colour where a shadow is expected and remove
   the focus ring entirely. */

html #silktide-wrapper {
    --fontFamily: var(--f-body);
    --primaryColor: var(--accent-ink);
    --backgroundColor: var(--surface);
    --textColor: var(--ink);
    --cookieIconColor: var(--accent-ink);
    --cookieIconBackgroundColor: var(--surface);
    --boxShadow: var(--shadow);
}

/* Square, like every other button in the design. The radius is a literal in
   consent.css rather than a property, so this is the one thing that cannot be
   done through the palette. */

html #silktide-wrapper .st-button,
html #silktide-wrapper button {
    border-radius: 0;
    font-family: var(--f-label);
    font-weight: 600;
}

/* ------------------------------------------------- spacing under a block head */
/* `.block-head` carries `margin: 44px 0 0` and no bottom margin at all, and in
   the prototype that was right: everything it introduced brought its own top
   margin — `.spec-list` has `margin: 18px 0 0`, and the equipment lists sat
   under an `h3.feat-head` whose `margin-bottom: 14px` did the same job.

   THIS THEME PROMOTED THE EQUIPMENT GROUPS TO BLOCK HEADS. Each group is now an
   `h2` in its own right rather than a label inside one "Varustus" section —
   better as an outline, and it put six headings directly against a `ul.feat`,
   which is declared `margin: 0`. The heading and its first line of data touched.
   The sales-manager block is the same story.

   So the rule is stated once, where the design's own value already was: content
   after a block head starts 18px below it. Anything that already carries that
   margin is unaffected — the value is the same — and a section added later gets
   it without anybody remembering to.

   `.spec-cols` IS THE ONE EXCEPTION. It is a bare Bootstrap row whose columns
   are the `.spec-list`s, so the 18px arrives from inside it; adding it here as
   well would double the gap under that one heading. */

.block-head + * {
    margin-top: 18px;
}

.block-head + .spec-cols {
    margin-top: 0;
}

/* --------------------------------------------------------------- hero art */
/*
 * A SLIDE THAT CARRIES ITS OWN PHONE PHOTOGRAPH gets it through a <picture>,
 * and this is the difference that makes to the crop. The wide shot is framed at
 * `object-position: 72% center` (topused.css:276) because the truck sits to the
 * right of it and a narrower viewport must not cut it off. A file uploaded FOR
 * the phone is framed for the phone, so it is centred across.
 *
 * BUT NOT CENTRED DOWN. The phone photographs are 9:16 portraits, and the box
 * they land in is half a screen — about 375x326 — so `cover` keeps barely half
 * of the picture's height. Centred, that half is the middle, and the operator's
 * shots put the vehicle in the upper half with empty road below: the top of the
 * truck was cut off while the road filled the box. 15% keeps the window near
 * the top without pinning it there. At 0% the vehicle sits low and its front
 * runs into the gradient over the bottom of the box. Measured on the staging
 * slides at 360, 390 and 430px wide.
 *
 * The class is only ever emitted with a phone photograph — as the <source>, or
 * as a slide's only file — so a hero with just the wide photo keeps the
 * design's framing untouched.
 */
@media (max-width: 767.98px) {
    .hero-art--mobile {
        object-position: 50% 15%;
    }
}

/* ------------------------------------------------------------- hero slider */
/*
 * The hero's slide bars and its pause button.
 *
 * IN THIS FILE AND NOT topused.css, because the design has no carousel at all —
 * sections.php still lists `hero-slider` under what was removed. These are a
 * divergence from the prototype, which is exactly what this stylesheet is for.
 *
 * `.hero-bar` and not `.bar`: `.cat .bar` is already the category tile's caption
 * strip (topused.css:349) and the two would collide.
 */

/*
 * The heading a slide shows. A single-slide hero still uses a real <h1>; with two
 * or more the <h1> moves outside the carousel and is visually hidden, so this
 * has to be visually identical to `.hero h1` or the design changes.
 *
 * The markup carries `.h1` as well, which is the design's own class and already
 * supplies the family, weight, uppercase, line-height and letter-spacing
 * (topused.css:151). Only the SIZE is restated here, because the design puts
 * that on the `h1` ELEMENT selector (:155) and `.h1` does not get it — and
 * topused.css is the byte-for-byte port, so it is not the file to widen.
 */
.hero .hero-title {
    color: #fff;
    max-width: 16ch;
    margin-top: 18px;
    font-size: clamp(38px, 6.2vw, 74px);
}

.hero .hero-title em {
    font-style: normal;
    color: var(--man-red);
}

/*
 * The phone value of the same margin. topused.css §7's phone block tightens
 * `.hero h1`, and this rule has to follow it or the slider's heading keeps the
 * desktop spacing — this file loads last, so what it sets here wins whatever
 * the design layer says. Two files for one number, because the heading is
 * `.hero-title` only in a slider and the reason for that lives up there.
 */
@media (max-width: 767.98px) {
    .hero .hero-title {
        margin-top: 12px;
    }
}

/* The bars sit over the bottom of the photograph, inside the same container the
   copy uses so they line up with it rather than with the viewport.

   AT THE VERY BOTTOM, on request — they used to float 20-40px above it. The
   edge is 0, and what is left between the red mark and the hero's edge is the
   bars' own 16px of transparent padding, which is their click target (see
   `.hero-bar`) and cannot come off without taking them under 24px. */
.hero-bars-wrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
}

/*
 * CENTRED AS ONE GROUP, bars and pause button together, rather than the bars
 * centred with the button hung off the end. The button is 24px and the eye reads
 * the row as a single control cluster, so splitting them puts the cluster off
 * centre to buy the bars an alignment nobody is measuring.
 */
.hero-bars {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/*
 * A BAR, NOT A DOT. Square corners are a brand token on this design
 * (--bs-border-radius: 0), so a pill would be the one round thing on the page.
 *
 * 4px tall is the mark; the 16px of transparent padding above and below is the
 * TARGET, which is what keeps it past the 24x24 minimum for a pointer input
 * (WCAG 2.5.8) without drawing a 24px slab over the photograph.
 */
.hero-bar {
    /* CONTENT-BOX, AND THE BAR IS INVISIBLE WITHOUT IT. Bootstrap sets
       `box-sizing: border-box` on everything, so `height: 4px` would be the
       height INCLUDING the 32px of padding — the content box collapses to zero,
       and `background-clip: content-box` then paints exactly nothing. The
       control was still 46x32 and still clickable, so only the eye caught it. */
    box-sizing: content-box;
    width: 46px;
    height: 4px;
    padding: 16px 0;
    border: 0;
    background: none;
    background-clip: content-box;
    /* Against an operator-chosen photograph, so it cannot rely on the image
       behind it: white at 55% over the scrim measures past 3:1 on every hero
       shipped, and the active red below is what carries the state. */
    background-color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.hero-bar:hover {
    background-color: rgba(255, 255, 255, 0.85);
}

.hero-bar.active {
    background-color: var(--accent-ink);
}

/* Drawn rather than inherited, and the offset is negative so the ring hugs the
   4px mark instead of floating around the invisible 36px target.
   topused-cms.css does the same for .thumb, for the same WCAG 2.4.7 reason. */
.hero-bar:focus-visible,
.hero-play:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* The pause control. `d-none` in the markup until the script decides there is
   something to pause — under reduced motion nothing ever cycles, and a button
   offering to stop a still image is a lie.

   NO BOX BEHIND THE ICON, on request: it used to sit on a 75% black square. The
   button stays the click target; only the square is gone. The drop shadow
   is what keeps a white icon readable over a bright patch of an
   operator-chosen photograph now that nothing dark is drawn under it, and the
   hover turns the icon the active bar's red instead of filling a square. */
.hero-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 24px, THE SMALLEST IT MAY GO: WCAG 2.5.8's minimum target for a
       pointer. Made smaller on request — it was 32px with a 10x12 icon, and
       the icon is what shrank most; this box is invisible now. */
    width: 24px;
    height: 24px;
    margin-left: 4px;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
    cursor: pointer;
    transition: color 0.2s ease;
}

.hero-play:hover {
    color: var(--accent-ink);
}

/* Two bars while playing (press to pause), one triangle while paused (press to
   play). Drawn in CSS so the control needs no icon font and no SVG sprite
   entry; the accessible name comes from aria-label, set by the script. */
.hero-play .hero-play-ico {
    width: 7px;
    height: 9px;
    border-left: 2px solid currentColor;
    border-right: 2px solid currentColor;
}

.hero-play.is-paused .hero-play-ico {
    width: 0;
    height: 0;
    border-left: 7px solid currentColor;
    border-right: 0;
    border-top: 4.5px solid transparent;
    border-bottom: 4.5px solid transparent;
}

/* ============================================================================
 * Core's newsletter pages — /{lang}/newsletter-confirm, -unsubscribe, -verified.
 *
 * Pages this theme does not own: core renders them with its own BEM classes
 * (.pc-page-title, .pc-newsletter__*, .pc-auth__btn) and ships no stylesheet for
 * them, so without these rules an unsubscribe link lands on a bare checkmark.
 * Only tokens are used, so the pages follow the design rather than restate it:
 * the title band is .page-hero's, the button .btn-primary's, the field the
 * enquiry form's.
 * ========================================================================== */
.pc-page-title {
    background: var(--bg-deep);
    color: #fff;
    padding-block: clamp(40px, 6vw, 80px);
}

.pc-page-title .heading {
    font-family: var(--f-display);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.04;
    font-size: clamp(32px, 4.6vw, 58px);
    text-wrap: balance;
}

.pc-newsletter {
    padding-block: var(--sec-y);
    background: var(--bg-alt);
}

.pc-newsletter__card {
    max-width: 560px;
    margin-inline: auto;
    padding: clamp(28px, 5vw, 48px);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
}

.pc-newsletter__card--center {
    text-align: center;
}

.pc-newsletter__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 20px;
    border-radius: 50%;
    font-size: 30px;
    line-height: 1;
    color: #fff;
}

.pc-newsletter__icon--success {
    background: var(--man-green);
}

.pc-newsletter__icon--error {
    background: var(--accent);
}

.pc-newsletter__heading {
    font-size: clamp(24px, 2.6vw, 32px);
    margin-bottom: 12px;
}

.pc-newsletter__description {
    color: var(--ink-2);
    margin: 0 auto 28px;
    max-width: 44ch;
}

.pc-newsletter__field {
    margin-bottom: 18px;
    text-align: left;
}

.pc-newsletter__label {
    display: block;
    font-family: var(--f-label);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 12px;
    color: var(--ink-3);
    margin-bottom: 5px;
}

.pc-newsletter__input {
    display: block;
    width: 100%;
    border-radius: 0;
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--ink);
    padding: 11px 14px;
    font-size: 15px;
}

.pc-newsletter__input:focus {
    border-color: var(--accent);
    outline: 2px solid var(--focus);
    outline-offset: 1px;
}

.pc-newsletter__alert {
    margin-top: 16px;
    font-size: 15px;
}

.pc-newsletter .pc-auth__btn,
.pc-newsletter .pc-auth__btn--primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 26px;
    border: 2px solid var(--accent);
    background: var(--accent);
    color: #fff;
    font-family: var(--f-label);
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .11em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.pc-newsletter .pc-auth__btn:hover,
.pc-newsletter .pc-auth__btn:focus-visible {
    background: var(--man-red-dk);
    border-color: var(--man-red-dk);
    color: #fff;
}

.pc-newsletter .pc-auth__btn:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}