/* ==========================================================================
   EAP — main stylesheet
   px units, pixel-precise per Figma (desktop frame 1800px, 50px gutters).
   Palette: black on gradient bg, accents #2b00ff (blue) / #b800ff (magenta).
   ========================================================================== */

:root {
    --color-text: #000;
    --color-accent: #2b00ff;
    --color-accent-2: #b800ff;
}

/* ── Reset / base ────────────────────────────────────────────────────────── */

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

html,
body {
    min-width: 320px;
}

/* In-page anchors (ΧΡΗΣΙΜΑ pills, footer buttons) glide instead of jumping,
   and land with a little air above the target. */
html {
    scroll-behavior: smooth;
}

[id] {
    scroll-margin-top: 30px;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    margin: 0;
    font-family: var(--font-main);
    font-weight: 600;
    color: var(--color-text);
    /* Sticky-footer flex column: header, main and footer stack; .site-main
       grows to fill any leftover space so short pages still push the footer
       to the viewport bottom. */
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    /* Average of the gradient, shown until the image arrives. */
    background: #eec0d2;
}

/* The exact Figma gradient (frame 2001:112). It's 160% of the viewport and
   drifts across a 20s cycle so the composition slowly shifts. Done as a
   fixed layer moved with transform (GPU-composited) rather than animating
   background-position, which repainted the whole screen every frame. */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 160vw;
    height: 160vh;
    background: url('../img/bg-gradient.webp?v=2') no-repeat 0 0 / 100% 100%;
    pointer-events: none;
    will-change: transform;
    animation: eap-bg-drift 20s ease-in-out infinite;
    animation-delay: -10s; /* start mid-cycle, as before */
}

.site-main {
    flex: 1 0 auto;
}

.site-footer {
    flex-shrink: 0;
}

/* Contact page: the sticky-footer growth on .site-main creates leftover
   vertical space when the viewport is taller than the content. Route that
   space between the contact grid and the Instagram crawler (rather than
   under the crawler) so the band always sits at the bottom of the main
   region, right above the footer.

   .site-main.page-contact becomes a flex column so .container can grow to
   fill the leftover height with `flex: 1`. But the base .container has
   `margin: 0 auto`, which in a flex parent cancels cross-axis stretch —
   the container then sizes to its own max-content, which the marquee's
   ~3800px `insta-band__track` blows up to the 1800px max-width, breaking
   mobile. Setting `width: 100%` explicitly (with `box-sizing: border-box`
   so the container's `padding: 0 50px` stays inside) sidesteps the
   stretch dance: the container always matches parent width up to the
   1800px cap, and the auto margins still center it above that cap. */
.site-main.page-contact {
    display: flex;
    flex-direction: column;
}

.site-main.page-contact > .container {
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.site-main.page-contact .insta-band {
    margin-top: auto;
}

/* Same path as the old background-position 0% → 100%: the layer's far
   corner (160%) slides to the viewport's far corner, i.e. by -60vw/-60vh. */
@keyframes eap-bg-drift {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(-60vw, -60vh, 0); }
}

/* Respect users who ask for less motion — freeze the gradient in place. */
@media (prefers-reduced-motion: reduce) {
    body::before {
        animation: none;
    }
}

/* ── Accessibility ───────────────────────────────────────────────────────── */

/* Hidden visually, still read by screen readers (WordPress core class). */
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}

/* "Skip to content": first Tab stop on every page, shown only on focus. */
.skip-link:focus {
    top: 12px;
    left: 12px;
    z-index: 1000;
    width: auto;
    height: auto;
    margin: 0;
    padding: 12px 18px;
    clip-path: none;
    background: var(--color-text);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

/* Keyboard focus ring (mouse clicks don't show it). Blue + offset reads on
   the light gradient, the black buttons and the dark mobile menu alike. */
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

/* White on the dark menu and the blue CV panel (the orange one keeps blue). */
.mobile-menu :focus-visible,
.cv-modal:not(.cv-modal--sub) :focus-visible {
    outline-color: #fff;
}

#main:focus {
    outline: none;
}

img,
svg,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
}

/* ── Layout ──────────────────────────────────────────────────────────────── */

.container {
    max-width: 1800px;
    margin: 0 auto;
    padding: 0 50px;
}

@media (max-width: 767px) {
    .container {
        padding: 0 20px;
    }
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 27px;
    background: var(--color-accent);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
    text-decoration: none;
    /* Keep "ΠΟΛΙΤΙΚΕΣ ΠΑΝ/ΜΙΟΥ" on one line — the "/" is otherwise treated
       as a soft break opportunity, causing the label to wrap. */
    white-space: nowrap;
    border-radius: 12px;
    transition: background 0.2s ease;
}

.btn:hover {
    background: var(--color-accent-2);
}

/* ── Header ──────────────────────────────────────────────────────────────── */


.site-header__inner {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding-top: 24px;
    padding-bottom: 16px;
}

/* Logo boxes: fixed width, height from the file's own ratio (600×539),
   so the box matches the image exactly (no letterboxing). */
.site-logo__img {
    width: 99px;
    height: auto;
    object-fit: contain;
}

.site-header__col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.site-wordmark {
    width: 100%;
    height: auto;
    display: block;
}

.site-wordmark text {
    font-family: var(--font-main);
    font-weight: 800;
    font-size: 22px;
    fill: currentColor;
}

.site-wordmark--one text {
    font-size: 27px;
}

/* Wordmark wrapped in a home link (header + footer). */
.site-wordmark-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

/* Two-line variant for narrow desktops (swapped in by the media queries at
   the end of this file). Capped at its viewBox width so the type never
   grows past the Figma 22px. */
.site-wordmark--two {
    display: none;
    max-width: 857px;
}

/* Mobile lockup variant: hidden on desktop, swapped in with the bar header */
.site-wordmark--lockup {
    display: none;
    /* The uni line's descenders sit on the viewBox's bottom edge. */
    overflow: visible;
}

.site-wordmark--lockup text {
    font-size: 10.4px;
}

/* University line in the lockup: Syne SemiBold, ~6px tall per Figma
   (higher specificity so it beats the .site-wordmark text defaults) */
.site-wordmark--lockup text.site-wordmark__uni {
    font-size: 8.5px;
    font-weight: 600;
}

.site-header__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 30px;
}

.site-nav__list {
    display: flex;
    align-items: baseline;
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav__list a,
.site-header__uni {
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.site-nav__list a:hover {
    color: var(--color-accent);
}

/* No separators between items. A single 7×7 dot marks the current page.
   Drawn as an empty ::after (border-radius) instead of a text bullet, which
   in Syne ExtraBold renders as two vertical ticks. */
.site-nav__list li {
    position: relative;
}

.site-nav__list li.is-current::after {
    content: '';
    position: absolute;
    top: -3px;
    right: -10px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    /* Stays black on hover — only the link text turns blue. */
    background: var(--color-text);
}

/* ── Mobile menu (burger square + black dropdown under the header bar) ───── */

.menu-trigger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 37px;
    height: 100%;
    flex: 0 0 37px;
    padding: 0;
    background: var(--color-text);
    border: none;
    cursor: pointer;
}

.menu-trigger span {
    display: block;
    width: 21px;
    height: 3px;
    background: #fff;
    transition: transform 0.2s ease;
}

/* Burger (two bars) → ✕ when open */
body.menu-open .menu-trigger span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}

body.menu-open .menu-trigger span:nth-child(2) {
    transform: translateY(-6.5px) rotate(-45deg);
}

/* Open state: the whole bar goes black, lockup turns white */
body.menu-open .site-header__inner {
    background: var(--color-text);
    color: #fff;
}

.mobile-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: -1px;
    right: -1px;
    z-index: 100;
    background: var(--color-text);
    border-top: 1px solid #fff;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.mobile-menu[aria-hidden='false'] {
    opacity: 1;
    visibility: visible;
}

.mobile-menu__list {
    margin: 0;
    padding: 38px 0 55px;
    list-style: none;
    text-align: center;
}

.mobile-menu__list li + li {
    margin-top: 10px;
}

.mobile-menu__list a {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 19px;
    text-decoration: none;
}

.mobile-menu__list a:hover {
    color: var(--color-accent-2);
}

/* ── Hero (placeholder) ──────────────────────────────────────────────────── */

.hero {
    padding: 275px 0 100px;
    text-align: center;
}

.hero__title {
    margin: 0 auto;
    max-width: 1152px;
    font-size: 48px;
    font-weight: 700;
}

.hero__subtitle {
    margin: 24px auto 0;
    font-size: 32px;
    font-weight: 700;
}

.hero__quick {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 45px;
    margin: 100px auto 0;
    font-size: 24px;
    font-weight: 700;
}

.hero__quick a {
    text-decoration: underline;
    text-underline-offset: 5px;
}

.hero__quick a:hover {
    color: var(--color-accent);
}

/* ΕΞΕΡΕΥΝΗΣΤΕ scroll indicator: line — label — line, centered */
.hero__explore {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 17px;
    margin: 120px auto 0;
}

.hero__explore-label {
    font-size: 24px;
    font-weight: 700;
}

.hero__explore-line {
    width: 2px;
    height: 69px;
    background: var(--color-text);
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.site-footer {
    margin-top: 150px;
}

/* Contact page ends flush with the INSTAGRAM band's bottom border, so the
   footer should butt up against it without the site-wide 100px gap. */
.page-contact + .site-footer,
body:has(.page-contact) .site-footer {
    margin-top: 0;
}

.site-footer__main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    padding: 45px 0;
    /* Both borders are on this content-area child of .container, so they
       sit inside the 50px gutter and match Figma's 1700-wide lines. */
    border-top: 1px solid var(--color-text);
    border-bottom: 1px solid var(--color-text);
}

.site-footer__nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__nav a {
    font-size: 36px;
    font-weight: 700;
    line-height: 55px;
    text-decoration: none;
}

.site-footer__nav a:hover {
    color: var(--color-accent);
}

.site-footer__social {
    margin: 50px 0 0;
    padding: 0;
    list-style: none;
}

.site-footer__social a {
    font-size: 24px;
    font-weight: 700;
    line-height: 40px;
    text-decoration: none;
}

.site-footer__social a:hover {
    color: var(--color-accent);
}

.site-footer__logo {
    align-self: center;
}

/* The big desktop footer logo blends into the background gradient. */
.site-footer__logo img {
    width: 299px;
    height: auto;
    mix-blend-mode: color-burn;
}

/* Safari can't blend with the page's moving gradient layer (a separate
   fixed/composited layer), so main.js paints a pixel-aligned copy of that
   gradient on the logo's own box every frame and the logo blends with it
   inside this isolated group — live, in every browser. */
.site-footer__logo.has-blend-backdrop {
    isolation: isolate;
    background-image: url('../img/bg-gradient.webp?v=2');
    background-repeat: no-repeat;
}

.site-footer__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* Full row height, so the EAP block can sit on the same bottom line as
       the socials (linkedin) in the left column. */
    align-self: stretch;
    gap: 20px;
}

.site-footer__buttons {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 17px;
}

.site-footer__buttons .btn {
    width: 307px;
}

.site-footer__eap {
    margin-top: auto;
    /* linkedin's 40px line-height leaves ~9px under its baseline; lift the
       "Επίσημη σελίδα ΕΑΠ" line by the same so the two baselines match. */
    margin-bottom: 9px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.site-footer__eap img {
    width: 171px;
    height: auto;
}

.site-footer__bottom {
    padding: 25px 0 34px;
}

.site-footer__wordmark {
    margin-bottom: 15px;
}

/* Mobile footer lockup (SVG, swapped in at ≤1023). Width 184 = Figma. */
.site-footer__wordmark-mobile {
    display: none;
    width: 184px;
    height: auto;
    overflow: visible;
}

.site-footer__wordmark-mobile text {
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 800;
    fill: currentColor;
}

.site-footer__wordmark-mobile text.site-footer__wordmark-uni {
    font-size: 10px;
    font-weight: 600;
}

.site-footer__legal {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 30px;
}

.site-footer__copyright {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
}

.site-footer__uni {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    white-space: nowrap;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {

    /* Header becomes the bordered bar from the Figma mobile frame */
    .site-header {
        border-bottom: none;
    }

    .site-header__inner {
        position: relative;
        align-items: center;
        gap: 0;
        margin: 22px 0;
        padding: 0;
        height: 42px;
        border: 1px solid var(--color-text);
    }

    .site-logo__img {
        width: 36px;
        height: auto;
        margin-left: 4px;
    }

    .site-header__col {
        padding-top: 0;
        gap: 0;
        align-items: center;
    }

    .site-header__row {
        display: none;
    }

    .site-wordmark--one {
        display: none;
    }

    .site-wordmark--lockup {
        display: block;
        width: 227px;
        max-width: 100%;
        margin: 0 auto;
    }

    .menu-trigger {
        display: flex;
    }

    .mobile-menu {
        display: block;
    }

    .hero {
        padding: 120px 0 60px;
    }

    .hero__title {
        font-size: 28px;
    }

    .hero__subtitle {
        font-size: 20px;
    }

    /* ── Mobile footer — rebuilt to match Figma frame 49:2 ──
       Container becomes a 5-row grid; wrappers use display:contents to hoist
       nested elements up so they can be placed by grid-area. */

    .site-footer {
        margin-top: 60px;
    }

    .site-footer .container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "rule      rule"
            "nav       social"
            "buttons   buttons"
            "logo      logo"
            "wordmark  eap"
            "legal     legal";
        column-gap: 20px;
        row-gap: 0;
    }

    /* Top rule — .site-footer__main (which carries it on desktop) is
       display:contents here, so its border disappears; draw it as its own
       full-width grid row inside the 20px gutters instead. */
    .site-footer .container::before {
        content: '';
        grid-area: rule;
        border-top: 1px solid var(--color-text);
    }

    .site-footer__main,
    .site-footer__bottom,
    .site-footer__left,
    .site-footer__right {
        display: contents;
    }

    /* Row 1 — nav column + socials column (16/19 & 14/18 Syne Bold) */
    /* Figma: first nav line 14px under the top rule, next rule 17px under
       the last line. */
    .site-footer__nav {
        grid-area: nav;
        padding: 13px 0 17px;
    }

    .site-footer__nav a {
        font-size: 16px;
        line-height: 19px;
    }

    .site-footer__nav li {
        margin: 0;
    }

    .site-footer__social {
        grid-area: social;
        justify-self: end;
        /* Centred against the nav column, whatever its height. */
        align-self: center;
        /* Left edge lines up with the EAP logo column below (Figma x≈315
           on 440 → 105px from the right gutter). */
        min-width: 105px;
        margin: 0;
        padding: 0;
    }

    .site-footer__social a {
        font-size: 14px;
        line-height: 18px;
    }

    /* Row 2 — two blue 27-tall buttons, gap 24 */
    .site-footer__buttons {
        grid-area: buttons;
        display: flex;
        flex-direction: row;
        /* Figma: two 188px buttons, 24px apart, 16px inside each rule. */
        gap: 24px;
        margin-top: 0;
        padding: 15px 0 16px;
        border-top: 1px solid var(--color-text);
    }

    .site-footer__buttons .btn {
        flex: 1 1 0;
        width: auto;
        height: 27px;
        padding: 0 12px;
        font-size: 12px;
        line-height: 27px;
        border-radius: 8px;
    }

    /* Row 3 — small blob logo aligned to the left */
    .site-footer__main > .site-footer__logo {
        grid-area: logo;
        align-self: start;
        padding: 15px 0 10px;
        border-top: 1px solid var(--color-text);
    }

    .site-footer__main > .site-footer__logo img {
        width: 55px;
        height: auto;
        object-fit: contain;
        mix-blend-mode: normal;
    }

    /* Row 4 — wordmark lockup left + EAP link right */
    .site-footer__wordmark {
        grid-area: wordmark;
    }

    /* Hide the SVG wordmark(s) inside the footer on mobile; the text version
       below takes over so we can hit the larger 4-line typographic treatment
       Figma specifies. */
    .site-footer__wordmark .site-wordmark {
        display: none;
    }

    .site-footer__wordmark-mobile {
        display: block;
    }

    .site-footer__eap {
        grid-area: eap;
        justify-self: end;
        align-self: end;
        margin: 0;
        padding-bottom: 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        font-size: 9px;
        font-weight: 600;
        text-decoration: none;
    }

    .site-footer__eap img {
        width: 101px;
        height: 39px;
    }

    .site-footer__eap span {
        white-space: nowrap;
    }

    /* Row 5 — copyright single line (Figma mobile hides the "Ελληνικό" side line) */
    .site-footer__legal {
        grid-area: legal;
        display: block;
        padding: 9px 0 18px;
        border-top: 1px solid var(--color-text);
    }

    .site-footer__copyright {
        margin: 0;
        font-size: 10px;
        line-height: 1.5;
        font-weight: 700;
    }

    .site-footer__uni {
        display: none;
    }
}


/* ── Narrow mobile (≤400px) ────────────────────────────────────────────────
   Adjustments for very small phones where the side-by-side footer buttons
   get their labels clipped. Stack them full-width so both fit comfortably. */
@media (max-width: 400px) {

    /* Stacked buttons: 10px between them (side by side they keep 24px). */
    .site-footer__buttons {
        flex-direction: column;
        gap: 10px;
    }

    .site-footer__buttons .btn {
        width: 100%;
    }
}

/* Narrow desktops (1024-1199): nav (560) + gap + "Ελληνικό Ανοικτό
   Πανεπιστήμιο" (276) needs ~866px but the row only has ~786 at 1024,
   so the uni line ran off the right edge. Tighten gaps + shrink the uni. */
@media (min-width: 1024px) and (max-width: 1199px) {
    .site-header__row {
        gap: 20px;
    }

    .site-nav__list {
        /* Keeps ~10px between the current-page dot and the next item. */
        gap: 20px;
    }

    .site-header__uni {
        font-size: 14px;
    }
}

/* Hero quick links: at 24px the label + two links need ~1120px, so below
   ~1235 they wrapped with the 2nd link stranded on its own row. 20px type
   (~904px) keeps one row down to 1024; on tablets the label takes its own
   row and the two links sit together underneath. */
@media (min-width: 768px) and (max-width: 1279px) {
    .hero__quick {
        gap: 12px 24px;
        font-size: 20px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .hero__quick {
        font-size: 18px;
    }

    .hero__quick span {
        flex-basis: 100%;
    }
}

/* ── Wordmark breakpoints ──────────────────────────────────────────────────
   The one-line SVG scales with its box: 22px at 1800, but ~11px in the
   header / ~13px in the footer at 1024. Below the widths where it drops
   under ~16px, swap to the two-line version (≤22px, left-aligned). The
   footer line is wider than the header's (no logo beside it), so it keeps
   the one-liner longer. */
@media (min-width: 1024px) and (max-width: 1439px) {
    .site-header .site-wordmark--one {
        display: none;
    }

    .site-header .site-wordmark--two {
        display: block;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    .site-footer .site-wordmark--one {
        display: none;
    }

    .site-footer .site-wordmark--two {
        display: block;
    }
}

/* Tablets: the 227px mobile lockup (10.4px type) scales up to 280px — the
   tallest that still fits inside the 42px bordered header bar. */
/* Phones (<600): a bit larger than the Figma 42px bar — bigger lockup
   (260px → ~12px type), bigger logo and burger, roomier dropdown. The lockup
   still shrinks to fit on very narrow screens (max-width: 100%). */
@media (max-width: 599px) {
    /* Full header block height (50px bar + 22px margins) — used by the
       full-screen mobile home hero. */
    :root {
        --eap-header-h: 94px;
    }

    .site-header__inner {
        height: 50px;
        gap: 5px;
    }

    .site-logo__img {
        width: 42px;
        height: auto;
        margin-left: 6px;
    }

    .site-wordmark--lockup {
        width: 260px;
    }

    .menu-trigger {
        width: 44px;
        flex-basis: 44px;
    }

    .menu-trigger span {
        width: 24px;
    }

    .mobile-menu__list {
        padding: 42px 0 58px;
    }

    .mobile-menu__list li + li {
        margin-top: 14px;
    }

    .mobile-menu__list a {
        font-size: 18px;
        line-height: 22px;
    }
}

/* Narrow phones (<400): slimmer logo and burger so the lockup keeps most of
   its 260px width (e.g. ~255px at 375 instead of ~231px). */
@media (max-width: 399px) {
    .site-logo__img {
        width: 30px;
        height: auto;
        margin-left: 4px;
    }

    .menu-trigger {
        width: 34px;
        flex-basis: 34px;
    }

    .menu-trigger span {
        width: 20px;
    }
}

@media (min-width: 600px) and (max-width: 1023px) {
    /* Full header block height (64px bar + 26px margins). */
    :root {
        --eap-header-h: 116px;
    }

    /* Tablet header: a taller bar (64 vs 42) with room for a bigger logo,
       a larger lockup (360px → ~16.5px type) and a wider burger square. */
    .site-header__inner {
        height: 64px;
        margin: 26px 0;
    }

    .site-logo__img {
        width: 60px;
        height: auto;
        margin-left: 8px;
    }

    .site-wordmark--lockup {
        width: 360px;
    }

    .menu-trigger {
        width: 54px;
        flex-basis: 54px;
    }

    .menu-trigger span {
        width: 28px;
    }

    .mobile-menu__list {
        padding: 44px 0 60px;
    }

    .mobile-menu__list li + li {
        margin-top: 14px;
    }

    .mobile-menu__list a {
        font-size: 20px;
        line-height: 24px;
    }

    .site-footer__wordmark-mobile {
        width: 240px;
    }
}