/* ==================================================================
   Design tokens

   The whole palette in one place, every value taken from what the site
   already paints: the navy of the header, hero and headings, the orange
   of the "Read more" / "Subscribe" buttons, and the greys already used by
   the panels, hairlines and captions.

   --accent          the brand orange, exactly as it was (#F3624B). Used for
                     marks, borders, dots and figures - never as the fill of
                     a button that carries white text.
   --accent-strong   the same orange, darkened only as far as it must be for
                     white text on it to pass WCAG AA (4.6:1 at 15px bold).
                     This is the one action colour: every primary button.
   ================================================================== */
:root {
    --brand-navy: #172350;
    --accent: #F3624B;
    --accent-strong: #CE4430;
    --accent-strong-hover: #B93D2A;

    /* neutrals already in use on the site */
    --grey-50: #f4f5f7;
    --grey-100: #eef1f8;
    --grey-200: #e3e6ea;
    --grey-300: #D8DCE8;
    --grey-500: #8A93A3;
    --grey-700: #495064;
    --white: #ffffff;

    /* surfaces */
    --card-radius: 14px;
    --card-shadow: 0 14px 30px rgba(6, 17, 38, 0.16);
    --card-scrim: rgba(6, 17, 38, 0.78);

    /* the one primary button */
    --btn-radius: 8px;
    --btn-padding: 12px 28px;
}

/* ------------------------------------------------------------------
   The primary button.

   One look for every primary action on the site: filled with the action
   orange, white text, the same radius, the same padding, the same hover.
   Used by the Featured News "Read more" button (.btn-primary) and by the
   Opportunities "EXPLORE" buttons (.sbtn.primary, the old medium blue is
   gone). Secondary buttons (.sbtn.secondary) are untouched.
   ------------------------------------------------------------------ */
.btn-primary,
.sbtn.primary,
.sbtn.primary.button {
    display: inline-block;
    box-sizing: border-box;
    padding: var(--btn-padding);
    border: 0;
    border-radius: var(--btn-radius);
    background: var(--accent-strong) !important;
    color: var(--white) !important;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-primary:hover,
.btn-primary:focus,
.sbtn.primary:hover,
.sbtn.primary:focus,
.sbtn.primary.button:hover,
.sbtn.primary.button:focus {
    background: var(--accent-strong-hover) !important;
    color: var(--white) !important;
}

.btn-primary:focus-visible,
.sbtn.primary:focus-visible {
    outline: 2px solid var(--brand-navy);
    outline-offset: 3px;
}

/* ------------------------------------------------------------------
   The featured news / notice strip at the very top of the page.

   A light neutral strip instead of the solid brick red one: the rest of
   the bar (its 40px height, its fixed position, its "See More" text and
   its link to the starred news) is exactly as it was, only the colours
   change. box-sizing keeps the 1px hairline inside the 40px the nav and
   the page content are pushed down by.
   ------------------------------------------------------------------ */
.notice-bar {
    box-sizing: border-box;
    background: var(--grey-50);
    border-bottom: 1px solid var(--grey-200);
}

/* the bar's own colour classes are white ones (.cw) and the framework's
   utility classes are the most specific thing here, so this one rule is
   written to win: everything inside the strip reads navy on the light grey */
.notice-bar.cw,
.notice-bar,
.notice-bar *,
.notice-bar .cw {
    color: var(--brand-navy) !important;
}

.body-data ul,
.body-data ol {
    padding: 0px;
}

.body-data {
    line-height: 30px;
}



[body] a,
[footer] a {
    text-decoration: underline;
}

.flexi {
    max-width: 1300px;
}

.body-data table {
    table-layout: fixed;
    text-align: left;
    width: 100% !Important;
    white-space: normal;
}

.body-data table td {
    border: 1px solid rgba(0, 0, 0, 0.1);
    inline-size: 150px;
    overflow-wrap: break-word;
    hyphens: manual;
    padding: 0px 5px;
}

.body-data a {
    inline-size: 150px;
    overflow-wrap: break-word;
    hyphens: manual;
    color: #006ca7;
}

.body-data a div {
    white-space: normal;
}

.about-image div {
    background-color: #fbfbfb;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
}

.fs45 {
    font-size: 45px;
}

/* ------------------------------------------------------------------
   News photos - the news cards on /news and the Latest News cards on the
   home page (one card = one /News record, see newsCard() in js).

   The card gets one fixed-shape photo area at its top: full card width,
   16/9, image cropped to fill it - so cards line up whatever shape the
   original photo is. A record with no photo renders no photo area at all
   (the class is only put on the markup when the card has a Photo).
   ------------------------------------------------------------------ */
.news-card__photo {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 6px;
    background: #eef1f8;
}

/* the image fills the box and is cropped to it (never a strip, never a
   stretched photo, whatever shape the original is) */
.news-card__photo img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* the same box on a browser that does not know aspect-ratio */
@supports not (aspect-ratio: 16 / 9) {
    .news-card__photo {
        height: 0;
        padding-bottom: 56.25%;
    }
}

/* the record's date, directly under the photo (was pinned to the card's
   top-right corner, which the photo area now takes) */
.news-card__date {
    text-align: right;
    margin-top: 15px;
}

/* the single article page's body rules (.news-body) live in news.view's own
   <style> block, next to the markup they belong to */

@media (max-width: 768px) {
    .news-card__date {
        margin-top: 10px;
    }
}
table[border="2"]{width:100%!important;max-width:100%!important;border-collapse:separate!important;border-spacing:0;border:1px solid #e6e8ee!important;border-radius:14px;overflow:hidden;background:#fff;table-layout:fixed;margin:18px 0 8px}
table[border="2"]>tbody>tr:first-child>td{background:#172350!important;border:0!important;padding:12px 14px!important;vertical-align:middle}
table[border="2"]>tbody>tr:first-child>td:nth-child(1){width:76px}
table[border="2"]>tbody>tr:first-child>td:nth-child(5){width:86px}
table[border="2"]>tbody>tr:first-child>td:nth-child(6){width:112px}
table[border="2"]>tbody>tr:first-child>td,table[border="2"]>tbody>tr:first-child>td *{color:#fff!important;font-size:11px!important;font-weight:700;line-height:1.4!important;letter-spacing:.06em;text-transform:uppercase;text-align:left!important}
table[border="2"]>tbody>tr:not(:first-child)>td{border:0!important;border-bottom:1px solid #eef0f4!important;padding:12px 14px!important;vertical-align:top;background:transparent!important;overflow-wrap:anywhere}
table[border="2"]>tbody>tr:last-child>td{border-bottom:0!important}
table[border="2"]>tbody>tr:not(:first-child)>td,table[border="2"]>tbody>tr:not(:first-child)>td *{font-size:12.5px!important;line-height:1.5!important;color:#495064!important;font-family:inherit!important}
table[border="2"] td p{margin:0 0 6px!important;text-align:left!important}
table[border="2"]>tbody>tr:not(:first-child)>td:nth-child(1),table[border="2"]>tbody>tr:not(:first-child)>td:nth-child(1) *{color:#f3624b!important;font-weight:700!important;font-size:14px!important}
table[border="2"]>tbody>tr:not(:first-child)>td:nth-child(2),table[border="2"]>tbody>tr:not(:first-child)>td:nth-child(2) *{color:#172350!important;font-weight:600}
table[border="2"]>tbody>tr:not(:first-child)>td:nth-child(6),table[border="2"]>tbody>tr:not(:first-child)>td:nth-child(6) *{color:#172350!important;font-weight:700}
table[border="2"] td[style*="rgb(255, 204, 0)"]{background:#fff8e1!important}
table[border="2"] td[style*="rgb(51, 204, 0)"]{background:#eef8ea!important}
table[border="2"]>tbody>tr>td table{width:100%!important;border:0!important;background:transparent!important;margin:0}
table[border="2"]>tbody>tr>td table td,table[border="2"]>tbody>tr>td table tr{border:0!important;padding:0!important;background:transparent!important;height:auto!important}
table[border="2"] a{color:#1e4fd8!important;text-decoration:none;border-bottom:1px solid rgba(30,79,216,.3);overflow-wrap:anywhere}
@media (max-width:1023px){
table[border="2"]{border:0!important;background:transparent!important;border-radius:0;margin:14px 0 0}
table[border="2"]>tbody>tr:first-child{display:none!important}
table[border="2"]>tbody,table[border="2"]>tbody>tr,table[border="2"]>tbody>tr>td{display:block!important;width:100%!important}
table[border="2"]>tbody>tr:not(:first-child){background:#fff!important;border:1px solid #e6e8ee;border-radius:14px;padding:14px 16px!important;margin:0 0 14px}
table[border="2"]>tbody>tr:not(:first-child)>td{border:0!important;padding:0 0 10px!important;text-align:left!important;white-space:normal!important;font-size:12px!important;line-height:1.45!important}
table[border="2"]>tbody>tr:not(:first-child)>td *{font-size:12px!important;line-height:1.45!important}
table[border="2"]>tbody>tr:not(:first-child)>td:last-child{padding-bottom:0!important}
table[border="2"]>tbody>tr:not(:first-child)>td:nth-child(1),table[border="2"]>tbody>tr:not(:first-child)>td:nth-child(5),table[border="2"]>tbody>tr:not(:first-child)>td:nth-child(6){width:100%!important;white-space:normal!important}
table[border="2"]>tbody>tr:not(:first-child)>td::before{display:block;font-size:10px!important;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8a93a3!important;margin-bottom:3px}
table[border="2"]>tbody>tr:not(:first-child)>td:nth-child(1)::before{content:"Selection year"}
table[border="2"]>tbody>tr:not(:first-child)>td:nth-child(2)::before{content:"Project"}
table[border="2"]>tbody>tr:not(:first-child)>td:nth-child(3)::before{content:"Beneficiary home institutions"}
table[border="2"]>tbody>tr:not(:first-child)>td:nth-child(4)::before{content:"Other countries involved"}
table[border="2"]>tbody>tr:not(:first-child)>td:nth-child(5)::before{content:"Duration"}
table[border="2"]>tbody>tr:not(:first-child)>td:nth-child(6)::before{content:"Budget (EUR)"}
}

/* ==================================================================
   The News and Events lists, one page per year
   (/news, /news/2026, /news/2025, ... /events, /events/2026, ...).

   Two small pieces, used by both lists:

   .list-state   what the column shows while the Base request is running, or
                 when the year it was asked for has nothing in it. It keeps a
                 height of its own so the page does not jump while it loads,
                 and so an empty year still reads as a page rather than a
                 blank one.

   .year-nav     the way through the years, at the END of every year's list:
                 the older year as one full-width row the width of the list
                 (the same right-hand arrow the site already uses), and under
                 it, quieter, the step back up to the newer year. Both are
                 plain links, so they read the same on a phone at 390px as on
                 a desktop: one row each, the whole row tappable.
   ================================================================== */
.list-state {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    min-height: 420px;
    padding: 40px 20px;
    color: var(--brand-navy, #172350);
    font-size: 15px;
    line-height: 1.6;
    text-align: center;
}

.list-state a {
    color: var(--accent-strong, #CE4430);
    font-weight: 700;
}

.year-nav {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin-top: 30px;
}

/* the element selector is part of the rule on purpose: the site's own
   "[body] a { text-decoration: underline }" must not put a line under this
   full-width row, and equal specificity resolves in favour of the later rule */
a.year-nav__older {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    padding: 18px 20px;
    border: 1px solid var(--grey-300, #D8DCE8);
    border-left: 5px solid var(--accent, #F3624B);
    border-radius: 8px;
    background: var(--white, #ffffff);
    color: var(--brand-navy, #172350);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

a.year-nav__older:hover,
a.year-nav__older:focus {
    background: var(--grey-50, #f4f5f7);
    border-color: var(--grey-300, #D8DCE8);
    border-left-color: var(--accent, #F3624B);
    color: var(--brand-navy, #172350);
    text-decoration: none;
}

a.year-nav__older:focus-visible {
    outline: 2px solid var(--brand-navy, #172350);
    outline-offset: 2px;
}

.year-nav__arrow {
    flex: 0 0 auto;
    font-size: 20px;
    line-height: 1;
    transition: transform 0.3s ease;
}

/* the arrow steps to the right when the row is hovered, the same move the
   site's other arrows make */
a.year-nav__older:hover .year-nav__arrow,
a.year-nav__older:focus .year-nav__arrow {
    transform: translate(0.5em, 0);
}

/* the step back up to the newer year: present, but never the loudest thing
   at the bottom of the list */
.year-nav__newer {
    display: inline-block;
    margin-top: 15px;
    color: var(--grey-700, #495064);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: underline;
}

.year-nav__newer:hover,
.year-nav__newer:focus {
    color: var(--brand-navy, #172350);
}

@media (max-width: 768px) {
    .list-state {
        min-height: 300px;
        padding: 30px 15px;
    }

    .year-nav {
        margin-top: 20px;
    }

    a.year-nav__older {
        padding: 16px;
        font-size: 15px;
    }

    .year-nav__newer {
        margin-top: 12px;
    }
}

/* ==================================================================
   The quote strip - one quoted testimonial, in a quiet band at the top of the
   pages it belongs to: under the intro of the opportunities pages
   (/opportunities and /opportunities/<category>) and under the page heading and
   tab row of every support-to-applicants page (/supportapplicants and each of
   its sections).

   The MARKUP is views/quote-strip.view, the sub-view both of those pages mount.
   That file does all of its own work - it reads /Testimonials itself, keeps the
   records with a Quote, sorts them newest first and writes one of them into the
   panel below - so nothing here depends on a fill pass anywhere else.

   The STYLES are here, in the site-wide sheet, so they are in force on both
   pages: a sub-view's own <style> is only in force where that sub-view is
   mounted.

   THE BAND'S SPACE IS ALWAYS THERE: the panel keeps its place in the page
   (min-height below), so the content under it never jumps when the read comes
   back. Until the view has a quote to show it draws nothing at all - the panel
   is visibility: hidden, so no empty box and no empty outline is seen, only the
   space it holds - and if the read fails, or the class has no quoted record, it
   simply stays that way: empty, quiet, and with nothing in the console. The
   view puts the panel on screen (visibility: visible) the moment it writes the
   quote, with [data-quote-strip-ready].

   The look: the large orange quote mark in its own narrow column, the quote in
   the site's italic body style beside it, the "— Name, Role" line under the
   quote, and the "Read more testimonials" link at the right (on a phone the mark
   goes above the quote and the link below the byline, left aligned). Colours and
   type are the site's own - the grey panel, the orange hairline the site's cards
   use, the navy text and the small grey byline. No photo, no shadow, no
   animation.
   ================================================================== */
.quote-strip-hold {
    width: 100%;
    min-width: 0;
    min-height: 0;
}

/* the space is held even when there is nothing in it yet; visibility (and not
   display) is what keeps that space while drawing nothing */
.quote-strip {
    display: grid;
    visibility: hidden;
    box-sizing: border-box;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "mark quote link"
        "mark by link";
    align-items: start;
    column-gap: 16px;
    width: 100%;
    max-width: 100%;
    min-height: 120px;
    margin: 28px 0 30px;
    padding: 22px 26px 24px;
    border: 1px solid var(--grey-200, #e3e6ea);
    border-left: 4px solid var(--accent, #F3624B);
    border-radius: var(--card-radius, 14px);
    background: var(--grey-50, #f4f5f7);
    color: var(--brand-navy, #172350);
    text-align: left;
}

/* a panel with a real testimonial in it is on the page (set by the view itself
   once it has written the quote) */
.quote-strip[data-quote-strip-ready] {
    visibility: visible;
}

/* TOP OF THE PAGE - the view carries .quote-strip-top on its own wrapper (the
   mount sits under the intro of the opportunities pages and under the page
   heading and tab row of the support pages): a little air below the heading /
   tab row, and only a few pixels of its own underneath, because the section
   that follows opens with its own spacing. So the band is seen without scrolling
   and does not push the page's content away. */
.quote-strip-top .quote-strip {
    margin: 24px 0 8px;
}

/* the one large orange mark, in its own column, level with the first line of the
   quote: it names the line as a quotation without taking a line of its own on a
   wide screen */
.quote-strip__mark {
    grid-area: mark;
    font-size: 54px;
    font-weight: 700;
    line-height: 0.85;
    color: var(--accent, #F3624B);
}

/* the quote: the site's body text, in italic, at the size of the pages' reading
   text - the reason the band is noticed at all */
.quote-strip__quote {
    grid-area: quote;
    min-width: 0;
    margin: 0;
    font-size: 17px;
    font-weight: 400;
    font-style: italic;
    line-height: 1.6;
    color: var(--brand-navy, #172350);
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.quote-strip__by {
    grid-area: by;
    margin-top: 8px;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--grey-700, #495064);
    overflow-wrap: break-word;
}

/* a testimonial with no name leaves the byline empty: no stray dash */
.quote-strip__by:empty {
    display: none;
}

/* the text link: the same quiet accent link the site's sections use, never a
   filled button - it must not pull the eye off the page's content. The selector
   carries the panel it sits in, so it is more specific than the site's own
   "[body] a { text-decoration: underline }" and the link reads as a quiet call
   to action, with the line only on hover. It sits level with the middle of the
   quote on a wide screen. */
.quote-strip a.quote-strip__link {
    grid-area: link;
    align-self: center;
    justify-self: end;
    display: inline-block;
    color: var(--accent-strong, #CE4430);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.quote-strip a.quote-strip__link:hover,
.quote-strip a.quote-strip__link:focus {
    color: var(--brand-navy, #172350);
    text-decoration: underline;
}

.quote-strip a.quote-strip__link:focus-visible {
    outline: 2px solid var(--brand-navy, #172350);
    outline-offset: 3px;
}

.quote-strip__icon {
    font-size: 15px;
    line-height: 1;
    vertical-align: -1px;
}

/* phones: the mark above the quote in a narrower size, the quote a step smaller,
   and the link under the byline, left aligned, wrapping if it must - the band
   stays a compact block at the top of the page */
@media (max-width: 768px) {
    .quote-strip {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "mark"
            "quote"
            "by"
            "link";
        min-height: 168px;
        margin: 22px 0 24px;
        padding: 16px 18px 18px;
    }

    .quote-strip__mark {
        font-size: 40px;
        line-height: 0.9;
        margin-bottom: 4px;
    }

    .quote-strip__quote {
        font-size: 15.5px;
        line-height: 1.55;
    }

    .quote-strip a.quote-strip__link {
        align-self: start;
        justify-self: start;
        margin-top: 12px;
        white-space: normal;
    }

    .quote-strip-top .quote-strip {
        margin: 18px 0 6px;
    }
}