/*
 * Additions to site.css.
 *
 * site.css comes unchanged from the client's handover. What we add ourselves
 * lives here, so that a new delivery of that file does not overwrite these
 * rules.
 */

/*
 * One gutter for the whole site.
 *
 * The supplied CSS mixed 4%, 5% and 6%, plus a few one-off values. As a result
 * no straight line ran down the page: the header started at a different offset
 * than the content below it. Below, every block with a side margin gets the
 * same value.
 *
 * The measure is in vw and not in per cent: a percentage resolves against the
 * width of the surrounding element, so a block inside an indented parent moved
 * further in automatically. vw always resolves against the viewport, so every
 * block starts on the same line, however deeply it is nested.
 *
 * The lower bound of 20 px keeps text on a narrow phone from sticking to the
 * edge; at 390 px, 5% is only 19.5 px.
 *
 * Blocks that deliberately run full width (.field-story, .future-section,
 * .services-opening, the team banner) are not in this list and are therefore
 * left alone.
 */
:root {
    --gutter: max(20px, 5vw);
}

.topline,
.nav,
.quick-services,
.page-backbar,
footer,
.section,
.brand-hero,
.home-slogan-band,
.home-audience,
.values-band,
.together-closing,
.about-opening,
.about-photo,
.service-opening,
.page-intro,
.jobs-opening,
.services-opening > div {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

/*
 * Two blocks were already centred within a maximum width. That made them start
 * further in than the rest, with the gutter added on top of it. They now run
 * full width like every other section, so their content starts on the same
 * line.
 */
main.training-story {
    max-width: none;
    margin-inline: 0;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

/*
 * On this page the gutter sits on <main>, because the photo and the article
 * stand there as two columns side by side. The title bar has a background
 * colour and does have to reach the edge: it pulls itself out of that gutter
 * with a negative margin and then applies the gutter itself, so the text stays
 * on the line.
 */
.training-story .page-intro {
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

.compact-service-note,
.services-hub .compact-service-note {
    max-width: none;
    margin-inline: 0;
}

/* Text panel inside a section that runs full width. */
.field-story-copy {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

/*
 * The same gutter, but for blocks where the supplied CSS uses a rule with two
 * classes. That one weighs more than the list above, so we have to override it
 * with equal weight.
 */
.editorial-home .together-closing,
.editorial-home .values-band,
.about-page .about-opening,
.services-hub .service-choice-grid,
.services-hub .compact-service-note,
.service-page .service-opening,
.about-photo.fleet-story,
.editorial-home .field-story-copy {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

/* Hidden field against robots: invisible, but not with display:none, because
   some scripts fill in precisely those. */
.honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Notices above the form. The base (.export-note) comes from site.css; below
   are only the colour differences. */
.export-note.notice-ok {
    background: #e8f6ec;
    border-left-color: #2e7d32;
}

.export-note.notice-error {
    background: #fdeceb;
    border-left-color: #c62828;
}

/* Error message next to a field. Sits between the label and the input, so a
   screen reader reads it out before the field itself. */
.field-error {
    display: block;
    margin: 2px 0 -2px;
    color: #a4231f;
    font-size: 13px;
    font-weight: 600;
}

.export-form [aria-invalid="true"] {
    border-color: #c62828;
    background: #fffafa;
}

/* Explanation below the attachments field. */
.export-form .field small {
    color: #555;
    font-size: 12px;
}

/* The submit button while the message is on its way. A request with 20 MB of
   attachments can take half a minute. */
.export-form [type="submit"].busy {
    pointer-events: none;
    opacity: 0.65;
}

/* The play button over a film's poster.
   The film no longer starts by itself, so there has to be something clear to
   press. The button sits on top of the poster and disappears once it plays;
   the browser's own controls take over from there. */
.video-frame {
    position: relative;
    display: flex;
}

.video-play {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    border: 0;
    background: rgba(0, 0, 0, 0.25);
    color: #fff;
    font: 600 16px/1.2 inherit;
    letter-spacing: 0.01em;
    cursor: pointer;
}

.video-play-icon {
    display: block;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: #ffe000;
    /* A triangle, nudged right so it looks centred to the eye. */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    position: relative;
}

.video-play-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 13px 0 13px 21px;
    border-color: transparent transparent transparent #171717;
}

.video-play:hover .video-play-icon,
.video-play:focus-visible .video-play-icon {
    transform: scale(1.06);
}

.video-play:focus-visible {
    outline: 3px solid #ffe000;
    outline-offset: -3px;
}

/* Respect the system preference for reduced motion. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}