/* Project buttons (Apply, Infopack, Toolkit...), menu additions and color fixes.
   Kept outside the compiled Tailwind file (assets/style.css) on purpose.
   Site colors: orange #f36005, darker orange #d2640a (hover), peach rgb(255 213 199) on the orange header. */

.project-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: 1.5rem;
}

.project-buttons--card {
    gap: .4rem;
    margin: .9rem 0 0;
}

.project-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem 1.1rem;
    border: 2px solid #f36005;
    border-radius: .4rem;
    font-size: .85rem;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color .2s ease-in-out, border-color .2s ease-in-out, color .2s ease-in-out;
}

.project-buttons--card .project-btn {
    padding: .35rem .8rem;
    font-size: .75rem;
}

.project-btn i {
    font-size: 1.05em;
    line-height: 1;
}

.project-btn--primary {
    background: #f36005;
    color: #ffffff !important;
}

.project-btn--primary:hover,
.project-btn--primary:focus-visible {
    background: #d2640a;
    border-color: #d2640a;
}

.project-btn--secondary {
    background: transparent;
    color: #f36005 !important;
}

.project-btn--secondary:hover,
.project-btn--secondary:focus-visible {
    background: #f36005;
    color: #ffffff !important;
}

.project-btn--subtle {
    border-color: transparent;
    background: transparent;
    padding-left: 0;
    padding-right: 0;
    color: #f36005 !important;
    text-decoration: underline;
    text-underline-offset: .2em;
}

.project-btn--subtle:hover,
.project-btn--subtle:focus-visible {
    color: #d2640a !important;
}

/* Menu: hover (.nav-hl) and current page (.nav-active).
   Orange everywhere, except on the orange header bar where orange would be invisible:
   there the existing peach tones are kept. */
.navbar .nav-link.nav-hl:hover,
.navbar .nav-link.nav-active,
.dropdown-item.nav-type-active {
    color: #f36005 !important;
}

@media (min-width: 992px) {
    .navbar-dark:not(.navbar-clone) .nav-link.nav-hl:hover {
        color: rgb(255 224 179) !important;
    }

    .navbar-dark:not(.navbar-clone) .nav-link.nav-active {
        color: rgb(255 213 199) !important;
    }
}

/* "Projects" heading inside the Erasmus+ dropdown */
.nav-group-heading {
    padding: .6rem 1.5rem .25rem;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .05rem;
    text-transform: uppercase;
    color: #aab0bc;
    border-top: 1px solid rgba(164, 174, 198, .2);
    margin-top: .35rem;
}

/* Project lists: stats line, filters, empty state, sections */
.project-list-stats {
    margin: 0;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .02rem;
    text-transform: uppercase;
    color: #f36005;
}

.project-filter-row + .project-filter-row {
    margin-top: .6rem;
}

.project-list-empty {
    margin-top: 2rem;
    color: #60697b;
}

.project-section-title {
    margin-bottom: 2.5rem;
    font-size: 1.3rem;
    font-weight: 700;
}

.project-past-calls {
    margin-top: 4.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(164, 174, 198, .25);
}

.project-past-calls > summary {
    cursor: pointer;
    margin-bottom: 3rem;
    font-size: 1rem;
    font-weight: 700;
    color: #60697b;
}

.project-past-calls > summary:hover {
    color: #f36005;
}

.project-past-calls .project.item {
    opacity: .75;
}

/* Project card */
.project-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: .6rem;
}

.project-badge {
    display: inline-block;
    padding: .2rem .55rem;
    border-radius: 1rem;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .03rem;
    line-height: 1.4;
    text-transform: uppercase;
}

.project-badge--upcoming,
.project-badge--open {
    background: #f36005;
    color: #ffffff;
}

.project-badge--ongoing {
    background: rgb(255 213 199);
    color: #a8420a;
}

.project-badge--urgent {
    background: #a8420a;
    color: #ffffff;
}

.project-badge--completed {
    background: #eef0f3;
    color: #7c8595;
}

.project-card-excerpt {
    margin-bottom: .7rem;
    font-size: .8rem;
    line-height: 1.6;
    color: #60697b;
}

.project-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .7rem;
    color: #7c8595;
}

.project-card-meta li {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

.project-card-meta i {
    color: #aab0bc;
}

.project-card-countries {
    gap: .25rem !important;
}

.project-flag {
    width: 1.25em !important;
    line-height: .95em !important;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(30, 34, 40, .12);
    cursor: help;
}

.project-detail-list .project-flag {
    margin-right: .35rem;
    cursor: default;
}

.project-card-topics {
    margin: .5rem 0 0;
    font-size: .7rem;
    font-weight: 700;
    color: #f36005;
}

/* Project page header: whole cover image + title and key facts */
.project-hero {
    background: #fff7f2;
    padding: 3.5rem 0;
}

.project-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .project-hero__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 2.25rem;
    }
}

/* Keep the image in view while scrolling past long facts */
@media (min-width: 992px) {
    .project-hero__image {
        position: sticky;
        top: 6rem;
    }
}

/* The frame follows the photo, so portrait photos get no empty bars */
.project-hero__image img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 75vh;
    margin: 0 auto;
    border-radius: .6rem;
    box-shadow: 0 .75rem 2rem rgba(30, 34, 40, .12);
}

.project-hero__eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin-bottom: .6rem;
}

.project-hero__eyebrow > a {
    position: relative;
    padding-left: 1.4rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .02rem;
    text-transform: uppercase;
    color: #f36005;
}

.project-hero__eyebrow > a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: .75rem;
    height: .05rem;
    background: #f36005;
}

.project-hero__title {
    margin-bottom: 1.5rem;
    font-size: calc(1.4rem + 1.2vw);
    font-weight: 700;
    line-height: 1.2;
}

@media (min-width: 1200px) {
    .project-hero__title {
        font-size: 2.3rem;
    }
}

.project-facts {
    margin: 0 0 1.5rem;
    border-top: 1px solid rgba(164, 174, 198, .3);
}

.project-facts > div {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: .75rem;
    padding: .6rem 0;
    border-bottom: 1px solid rgba(164, 174, 198, .3);
}

.project-facts dt {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .02rem;
    text-transform: uppercase;
    color: #7c8595;
    line-height: 1.9;
}

.project-facts dt i {
    color: #f36005;
    margin-right: .25rem;
}

.project-facts dd {
    margin: 0;
    font-size: .85rem;
    color: #343f52;
}

.project-facts__countries {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .9rem;
}

.project-facts__countries .project-flag {
    margin-right: .35rem;
    cursor: default;
}

.project-facts__code {
    display: block;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: .75rem;
    white-space: nowrap;
}

.project-facts__link {
    font-size: .75rem;
    font-weight: 700;
    color: #f36005 !important;
}

.project-facts__link:hover {
    color: #d2640a !important;
}

.project-facts__topics {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.project-facts__topics span {
    padding: .15rem .6rem;
    border-radius: 1rem;
    background: rgb(255 213 199 / .55);
    color: #a8420a;
    font-size: .72rem;
    font-weight: 700;
}

.project-hero__funding {
    display: block;
    height: 3rem;
    width: auto;
    margin-top: .5rem;
}

@media (max-width: 991.98px) {
    .project-hero {
        padding: 2rem 0 2.5rem;
    }

    .project-hero__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.75rem;
    }

    .project-facts > div {
        grid-template-columns: 6.5rem minmax(0, 1fr);
    }
}

/* Project page body: text, plus organisations on the side when there are any */
.project-body {
    max-width: 50rem;
    margin: 0 auto;
}

.project-body--with-aside {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 14rem;
    gap: 3.5rem;
    max-width: 68rem;
}

@media (max-width: 991.98px) {
    .project-body--with-aside {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
    }
}

.project-orgs {
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}

.project-orgs li {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .75rem;
    font-size: .85rem;
    color: #343f52;
}

.project-orgs img {
    width: 4rem;
    height: 4rem;
    object-fit: contain;
    border-radius: .3rem;
    background: #ffffff;
}

/* Leftover blue from the theme, switched to the site orange */
.cursor[data-owner="typer"] {
    color: #f36005 !important;
}

.progress-wrap::after {
    color: #f36005 !important;
}

.progress-wrap .progress-circle path {
    stroke: #f36005 !important;
}