/*
 * EML Speech Technology - site styles.
 *
 * The palette and the type scale are taken from the live site
 * (https://www.eml.org/css/style.css), not invented:
 *
 *   #940023  brand red     navigation bar, links, buttons, h3
 *   #002f3a  deep petrol   body text and h1/h2/h4/h5/h6
 *   #eee     page canvas   body background
 *   #f7f7f7  light grey    footer and breadcrumb
 *
 * Roboto is self-hosted, as on the live site - no request to Google, which
 * matters on a site whose own privacy statement discusses exactly that.
 *
 * Layout notes for the migrated content: bodytext may contain floated images
 * and long unbroken URLs, so .frame guards against both.
 */

/* ---------- Fonts ----------
 * Subsetted from the woff files the live site serves (931 glyphs, reduced to
 * Latin plus punctuation): 598 KB of woff became 92 KB of woff2. Note that the
 * source font itself has no glyph for → or ◦, so those fall back to the next
 * family in the stack - exactly as they already do on the live site.
 */

@font-face {
    font-family: 'Roboto';
    src: url('../Fonts/Roboto-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../Fonts/Roboto-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../Fonts/Roboto-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../Fonts/Roboto-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --eml-brand: #940023;
    --eml-brand-dark: #6d001a;
    --eml-ink: #002f3a;
    --eml-ink-muted: #5b6b70;
    --eml-paper: #ffffff;
    --eml-paper-alt: #f7f7f7;
    --eml-canvas: #eeeeee;
    --eml-rule: #dddddd;

    --eml-measure: 1140px;
    --eml-measure-inner: 1092px;   /* --eml-measure minus one --eml-gap per side */
    --eml-gap: 1.5rem;
    --eml-radius: 0;

    --eml-font: 'Roboto', "Helvetica Neue", Helvetica, Arial, sans-serif;
    /* The live site asks for Montserrat on navigation and buttons but never
     * serves the file, so it renders in Helvetica/Arial there. The stack is
     * reproduced as-is: dropping a Montserrat font in needs no CSS change. */
    --eml-font-display: 'Montserrat', "Helvetica Neue", Helvetica, Arial, sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--eml-canvas);
    color: var(--eml-ink);
    font-family: var(--eml-font);
    /* 14px/24px is the live site's body setting. */
    font-size: 14px;
    line-height: 24px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

a {
    color: var(--eml-brand);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

a:hover {
    color: var(--eml-brand-dark);
}

:focus-visible {
    outline: 3px solid var(--eml-brand);
    outline-offset: 2px;
}

.container {
    width: 100%;
    max-width: var(--eml-measure);
    margin-inline: auto;
    padding-inline: var(--eml-gap);
}

/* ---------- Skip link ---------- */

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 0.75rem 1.25rem;
    background: var(--eml-ink);
    color: #fff;
    text-decoration: none;
}

.skip-link:focus {
    left: 0;
}

/* ---------- Header ---------- */

.site-header {
    background: var(--eml-brand);
    color: #fff;
}

.site-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--eml-gap);
    padding-block: 1rem;
}

.site-header__logo {
    display: block;
    flex: 0 0 auto;
    line-height: 0;
}

.site-header__logo img {
    width: 200px;
    height: auto;
}

.site-header__nav {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--eml-gap);
}

/* ---------- Mobile toggle ---------- */

.nav-toggle {
    display: none;
    align-items: center;
    gap: 0.6rem;
    margin-left: auto;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: transparent;
    color: inherit;
    font-family: var(--eml-font-display);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
}

.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
    display: block;
    width: 1.25rem;
    height: 2px;
    background: currentColor;
}

.nav-toggle__bar {
    position: relative;
}

.nav-toggle__bar::before,
.nav-toggle__bar::after {
    content: "";
    position: absolute;
    left: 0;
}

.nav-toggle__bar::before {
    top: -6px;
}

.nav-toggle__bar::after {
    top: 6px;
}

/* ---------- Main navigation ---------- */

.main-nav__list,
.main-nav__sublist,
.lang-nav__list,
.footer-nav__list,
.breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-nav__link,
.main-nav__sublink {
    display: inline-block;
    font-family: var(--eml-font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.main-nav__link:hover,
.main-nav__sublink:hover,
.main-nav__item--active > .main-nav__link,
.main-nav__subitem--active > .main-nav__sublink,
.main-nav__link[aria-current="page"],
.main-nav__sublink[aria-current="page"] {
    color: #fff;
    opacity: 1;
}

.main-nav__sublist {
    flex-direction: column;
}

@media (min-width: 60em) {
    /* Hairline separators between the top level items, as on the live site. */
    .main-nav__item {
        border-left: 1px solid rgba(255, 255, 255, 0.1);
    }

    .main-nav__item:last-child {
        border-right: 1px solid rgba(255, 255, 255, 0.1);
    }

    .main-nav__link {
        padding: 18px 20px;
    }

    .main-nav__item--has-children {
        position: relative;
    }

    .main-nav__sublist {
        position: absolute;
        left: 0;
        top: 100%;
        z-index: 20;
        min-width: 16rem;
        padding: 0.5rem 0;
        background: var(--eml-brand);
        visibility: hidden;
        opacity: 0;
        transition: opacity 120ms ease-in-out;
    }

    .main-nav__item--has-children:hover > .main-nav__sublist,
    .main-nav__item--has-children:focus-within > .main-nav__sublist {
        visibility: visible;
        opacity: 1;
    }

    .main-nav__sublink {
        display: block;
        padding: 0.5rem 1.25rem;
        border-left: 3px solid transparent;
    }

    .main-nav__sublink:hover,
    .main-nav__subitem--active > .main-nav__sublink {
        border-left-color: #fff;
        background: rgba(0, 0, 0, 0.12);
    }
}

/* ---------- Language switcher ---------- */

.lang-nav__list {
    gap: 0.25rem;
    align-items: center;
}

.lang-nav__link {
    padding: 0.25rem 0.6rem;
    color: #fff;
    text-decoration: none;
    font-family: var(--eml-font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.7;
}

.lang-nav__link:hover {
    color: #fff;
    opacity: 1;
}

.lang-nav__link--active {
    background: rgba(0, 0, 0, 0.18);
    opacity: 1;
}

.lang-nav__link--unavailable {
    opacity: 0.35;
    cursor: not-allowed;
}

/* ---------- Breadcrumb ---------- */

.breadcrumb {
    background: var(--eml-paper-alt);
    border-bottom: 1px solid var(--eml-rule);
    font-size: 12px;
}

.breadcrumb__list {
    gap: 0.5rem;
    padding-block: 0.6rem;
}

.breadcrumb__item + .breadcrumb__item::before {
    content: "›";
    margin-right: 0.5rem;
    color: var(--eml-ink-muted);
}

.breadcrumb__current {
    color: var(--eml-ink-muted);
}

/* ---------- Main content ---------- */

.site-main {
    display: grid;
    grid-template-columns:
        [full-start] minmax(var(--eml-gap), 1fr)
        [content-start] minmax(0, var(--eml-measure-inner))
        [content-end] minmax(var(--eml-gap), 1fr)
        [full-end];
    align-content: start;
    padding-block: 0 3.5rem;
    background: var(--eml-paper);
}

.site-main > * {
    grid-column: content;
}

/* The top padding lives on the first element, so a full-bleed one can skip it. */
.site-main > *:first-child {
    margin-top: 2.5rem;
}

.site-main > .frame-type-eml_slider {
    grid-column: full;
    margin-top: 0;
}

.site-main:focus {
    outline: none;
}

/* fluid_styled_content wraps every element in <div id="c123" class="frame ..."> */
.frame {
    margin-bottom: 2rem;
    overflow-wrap: break-word;
}

.frame::after {
    content: "";
    display: table;
    clear: both;
}

.frame > h1,
.frame > h2,
.frame > h3 {
    margin-top: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--eml-ink);
    font-weight: 300;
    margin-top: 0;
}

h1 {
    font-size: 38px;
    line-height: 44px;
    margin-bottom: 32px;
}

h2 {
    font-size: 32px;
    line-height: 40px;
    margin: 2.5rem 0 1.5rem;
}

/* The live site renders h3 in the brand red. */
h3 {
    font-size: 24px;
    line-height: 32px;
    margin: 2rem 0 1rem;
    color: var(--eml-brand);
}

h4 {
    font-size: 18px;
    line-height: 26px;
    margin: 1.5rem 0 0.75rem;
}

p {
    margin: 0 0 1.5rem;
}

ul {
    margin: 0 0 1.5rem;
    padding-left: 1.4rem;
}

li {
    margin-bottom: 0.3rem;
}

strong {
    font-weight: 700;
}

/* Images floated by the old editor need breathing room. */
.frame img[style*="float"] {
    margin: 0 0 1rem 1.5rem;
    max-width: min(100%, 420px);
}

@media (max-width: 40em) {
    /* Floats are unreadable on a phone. */
    .frame img[style*="float"] {
        float: none !important;
        margin-left: 0;
        max-width: 100%;
    }
}

/* ---------- News (EXT:news) ---------- */

.news-list-view .article {
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--eml-rule);
}

.news-list-view .article h2,
.news-list-view .article h3 {
    margin-top: 0;
}

.news .footer,
.news-list-view .news-list-date {
    color: var(--eml-ink-muted);
    font-size: 12px;
}

/* ---------- Footer ---------- */

.site-footer {
    padding-block: 2rem;
    background: var(--eml-paper-alt);
    border-top: 1px solid var(--eml-rule);
    color: var(--eml-ink);
    font-size: 12px;
}

.site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem var(--eml-gap);
}

.site-footer__company {
    margin: 0;
}

.footer-nav__list {
    gap: 1.25rem;
}

.footer-nav__link {
    color: var(--eml-brand);
}

/* ---------- Narrow viewports ---------- */

@media (max-width: 59.99em) {
    /*
     * The toggle and the collapsed state only apply once JavaScript has set
     * .has-js on <html>. Without JavaScript the navigation stays expanded and
     * fully reachable instead of being hidden behind a dead button.
     */
    .has-js .nav-toggle {
        display: flex;
    }

    .has-js .site-header__nav {
        display: none;
    }

    .has-js .site-header__nav--open {
        display: flex;
    }

    .site-header__nav {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        flex-basis: 100%;
        padding-top: 0.5rem;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
    }

    .main-nav__list {
        flex-direction: column;
        gap: 0;
    }

    .main-nav__link {
        padding: 0.65rem 0;
    }

    .main-nav__sublist {
        padding-left: 1rem;
    }

    .lang-nav__list {
        padding-top: 0.5rem;
    }
}

/* ---------- Slider ---------- */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.slider {
    position: relative;
    background: var(--eml-ink);
}

.slider__track {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * Without JavaScript only the first slide is shown - these are decorative hero
 * images, so nothing informative is lost. .slider--interactive is set by the
 * script once it has taken over.
 */
.slider__slide {
    grid-area: 1 / 1;
    position: relative;
    display: none;
}

.slider__slide--current {
    display: block;
}

.slider--interactive .slider__slide {
    display: block;
    opacity: 0;
    transition: opacity 600ms ease-in-out;
    pointer-events: none;
}

.slider--interactive .slider__slide--current {
    opacity: 1;
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    .slider--interactive .slider__slide {
        transition: none;
    }
}

.slider__image {
    display: block;
    width: 100%;
    height: clamp(220px, 34vw, 500px);
    object-fit: cover;
}

.slider__caption-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    /* Dark wash so white text keeps its contrast over any photograph. */
    background: linear-gradient(to right, rgba(0, 47, 58, 0.75) 0%, rgba(0, 47, 58, 0.35) 60%, rgba(0, 47, 58, 0.1) 100%);
}

.slider__caption {
    max-width: 22em;
    margin: 0;
    color: #fff;
    font-weight: 300;
    font-size: clamp(1.5rem, 1rem + 2.2vw, 2.4rem);
    line-height: 1.2;
    text-wrap: balance;
}

.slider__pause {
    position: absolute;
    left: -9999px;
    bottom: 1rem;
    z-index: 3;
    padding: 0.5rem 0.9rem;
    border: 0;
    background: var(--eml-brand);
    color: #fff;
    font: inherit;
    cursor: pointer;
}

.slider__pause:focus {
    left: 50%;
    transform: translateX(-50%);
}

@media (max-width: 40em) {
    .slider__caption-wrap {
        background: rgba(0, 47, 58, 0.6);
    }

    .slider__caption {
        max-width: none;
    }
}