/* Self-hosted Noto Sans (regular + bold, Greek + Latin subsets only —
this site has no other scripts). Mirrors exactly what Google's own
css2?family=Noto+Sans:wght@400;700 response serves today: it points
both the 400 and 700 @font-face declarations at the same file per
subset, so there are 4 files here rather than 8. Previously loaded via
a live @import from fonts.googleapis.com, which is a render-blocking
extra round trip and sends visitor IPs to Google with no consent
banner on this site — worth avoiding on an EU political-candidate
site. */
@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/noto-sans/noto-sans-greek.woff2') format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/noto-sans/noto-sans-greek.woff2') format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/noto-sans/noto-sans-greek-ext.woff2') format('woff2');
    unicode-range: U+1F00-1FFF;
}
@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/noto-sans/noto-sans-greek-ext.woff2') format('woff2');
    unicode-range: U+1F00-1FFF;
}
@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/noto-sans/noto-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/noto-sans/noto-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/noto-sans/noto-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/noto-sans/noto-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --ink: #001489;
    --slate: #33415c;
    --teal: #00a884;
    /* Darker teal for text on white - #00a884 is only 3.03:1 (fails WCAG
    AA's 4.5:1 for text this small); this hits 5.34:1. Decorative uses
    (the rule gradients) keep --teal since contrast rules don't apply. */
    --teal-text: #007a5a;
    --coral: #f05432;
    --mist: #eef2f7;
    --mist-line: #d8e0ec;
}

/* The old theme's main.css is no longer loaded on the homepage (see
config.toml), so this stylesheet now owns the base reset instead of
inheriting Bootstrap's Reboot. box-sizing:border-box is the one reset
rule the layout math below (padding + max-width combos) actually
depends on. */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body, html * {
    font-family: 'Noto Sans', sans-serif;
    font-weight: 400;
    /* Was a flat 50px on every element on the page - a leftover from the
    original theme's font-loading logic that inflated vertical spacing
    everywhere. A normal relative line-height instead; individual
    elements below set their own where they need something tighter. */
    line-height: 1.5;
}

body {
    margin: 0;
}

[class^="icon-"] {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
}

/* ================= COOKIE CONSENT ================= */
/* Theme vanilla-cookieconsent (static/css/library/cookieconsent.css,
static/js/library/cookieconsent.umd.js) to match the site palette instead
of its default blue/green. Full variable list in the vendored CSS file. */
#cc-main {
    --cc-font-family: 'Noto Sans', sans-serif;
    --cc-btn-primary-bg: var(--ink);
    --cc-btn-primary-border-color: var(--ink);
    --cc-btn-primary-hover-bg: #000f5e;
    --cc-btn-primary-hover-border-color: #000f5e;
    --cc-btn-secondary-bg: var(--mist);
    --cc-btn-secondary-border-color: var(--mist-line);
    --cc-btn-secondary-hover-bg: var(--mist-line);
    --cc-toggle-on-bg: var(--teal-text);
    --cc-link-color: var(--teal-text);
    --cc-modal-border-radius: 10px;
}

/* ================= FOOTER ================= */
.site-footer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 20px;
    border-top: 1px solid var(--mist-line);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--slate);
    text-align: center;
}
.site-footer-sep {
    display: none;
    width: 1px;
    height: 12px;
    background: var(--mist-line);
}
.site-footer a,
.site-footer button {
    color: inherit;
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}
.site-footer a:hover,
.site-footer button:hover {
    color: var(--ink);
    text-decoration: underline;
}

@media (min-width: 992px) {
    .site-footer {
        flex-direction: row;
        justify-content: center;
        padding: 28px 56px;
    }
    .site-footer-sep {
        display: inline;
    }
}

/* ================= HERO ================= */
.hero {
    display: flex;
    flex-direction: column;
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 20px 32px;
}
.hero-marks {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}
.hero-marks img {
    width: 220px;
    height: auto;
    display: block;
}
.hero-photo {
    margin-bottom: 24px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--mist);
}
.hero-photo img {
    width: 100%;
    /* Without this, the browser maps the height="" HTML attribute to a
    literal pixel height (no author CSS height rule overrides it below
    the 992px breakpoint), stretching the image instead of scaling it
    to match the 100%-width box. */
    height: auto;
    display: block;
}
.hero-name {
    font-size: 21px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.01em;
    line-height: 1.15;
    margin: 0;
    white-space: nowrap;
}
.hero-rule {
    width: 64px;
    height: 4px;
    margin: 10px 0 14px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--ink) 0 34%, var(--teal) 34% 67%, var(--coral) 67% 100%);
}
.hero-profession {
    font-size: 16px;
    font-weight: 700;
    color: var(--slate);
    opacity: .88;
    margin: 0 0 16px;
    line-height: 1.35;
}
.hero-badge {
    display: inline-block;
    align-self: flex-start;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    background: var(--mist);
    border: 1px solid var(--mist-line);
    border-radius: 6px;
    padding: 7px 12px;
    line-height: 1.35;
    margin: 0 0 14px;
}
.hero-sector {
    /* No text-transform:uppercase - the Greek subset font renders the
    tonos on accented capitals (e.g. "Τομέας" -> "ΤΟΜΈΑΣ") as a stray
    floating mark instead of cleanly dropping it. Letter-spacing +
    color + weight carry the "label" feel instead. */
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--teal-text);
    margin: 0 0 22px;
}
.hero-divider {
    height: 1px;
    background: var(--mist-line);
    margin: 0 0 16px;
}
.hero-endorse-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .03em;
    /* #8b93a1 was only 3.09:1 against white - fails WCAG AA. */
    color: #636b78;
    margin: 0 0 6px;
}
.hero-endorse {
    font-size: 14px;
    line-height: 1.55;
    color: var(--slate);
    margin: 0 0 26px;
}
.hero-endorse b {
    color: var(--ink);
    font-weight: 700;
}
.hero-social {
    display: flex;
    gap: 10px;
}
.hero-social a {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mist);
    color: var(--ink);
    text-decoration: none;
    transition: transform .15s cubic-bezier(.65, .05, .36, 1), background .15s;
}
.hero-social a:hover {
    transform: scale(1.08);
    background: var(--ink);
    color: #fff;
}
.hero-social svg {
    width: 16px;
    height: 16px;
}

@media (min-width: 992px) {
    .hero {
        display: grid;
        grid-template-columns: 600px 1fr;
        grid-template-areas:
            "marks photo"
            "text  photo";
        column-gap: 56px;
        padding: 56px 56px 64px;
    }
    .hero-marks {
        grid-area: marks;
        align-self: start;
        margin-bottom: 22px;
    }
    .hero-marks img {
        width: 300px;
    }
    .hero-text {
        grid-area: text;
        align-self: start;
        display: flex;
        flex-direction: column;
    }
    .hero-photo {
        grid-area: photo;
        align-self: stretch;
        justify-self: end;
        margin-bottom: 0;
        max-width: 420px;
        width: 100%;
    }
    .hero-photo img {
        height: 100%;
        object-fit: cover;
    }
    .hero-name {
        font-size: 38px;
    }
    .hero-profession {
        font-size: 21px;
    }
    .hero-badge {
        font-size: 15px;
    }
    .hero-sector {
        font-size: 15px;
    }
    .hero-endorse-label {
        font-size: 13px;
    }
    .hero-endorse {
        font-size: 16px;
    }
}

/* Images temporarily hidden sitewide (data/homepage.yml images.enable) -
the coalition logo, profile photo, and about photo are all skipped in
the markup rather than just visually hidden, so the layouts below
reclaim the space those used to fill instead of leaving an empty grid
column/gap. */
body.no-images .hero-text {
    max-width: 640px;
    margin: 0 auto;
}
@media (min-width: 992px) {
    body.no-images .hero {
        display: block;
    }
}
body.no-images .about {
    display: block;
}
body.no-images .about-body {
    max-width: 640px;
    margin: 0 auto;
}

/* ================= ABOUT ================= */
.about {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 20px 40px;
    border-top: 1px solid var(--mist-line);
}
.about-media {
    border-radius: 10px;
    overflow: hidden;
    background: var(--mist);
    max-width: 220px;
    margin-bottom: 20px;
}
.about-media img {
    width: 100%;
    /* Without this, the browser maps the height="" HTML attribute to a
    literal pixel height (no author CSS height rule to override it),
    stretching the image to its raw intrinsic height instead of scaling
    it down to match the 100%-width box. */
    height: auto;
    display: block;
}
.about-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--teal-text);
    margin: 0 0 10px;
}
.about-rule {
    width: 64px;
    height: 4px;
    margin: 0 0 18px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--ink) 0 34%, var(--teal) 34% 67%, var(--coral) 67% 100%);
}
.about-body .lead {
    font-size: 14px;
    /* Explicit, rather than inheriting whatever a same-named ".lead"
    rule elsewhere happens to set - this class name collides with
    Bootstrap's own .lead utility (font-weight:300). */
    font-weight: 400;
    line-height: 1.7;
    color: var(--slate);
    max-width: 62ch;
    margin: 0 0 16px;
}
.about-body .lead:last-child {
    margin-bottom: 0;
}

@media (min-width: 992px) {
    .about {
        display: flex;
        gap: 48px;
        align-items: flex-start;
        padding: 48px 56px 64px;
    }
    .about-media {
        max-width: 260px;
        flex: 0 0 260px;
        margin-bottom: 0;
    }
    .about-eyebrow {
        font-size: 28px;
        letter-spacing: -.01em;
        margin-bottom: 16px;
    }
    .about-body .lead {
        font-size: 17px;
    }
}