/* ERUA iDeaThon 2026 — theme layer on top of Bootstrap 5.3.3 */
:root {
  --idea-purple: #7030a0;      /* ideathon2024 brand */
  --idea-deep:   #2b1046;
  --idea-ink:    #1d1630;
  --idea-muted:  #5b5470;
  --idea-tint:   #f6f2fa;
  --idea-line:   #e4dbee;
  --idea-accent: #48f89b;      /* ECOS green */
  --idea-blue:   #2a4396;      /* ERUA blue */
  --bs-primary: var(--idea-purple);
  --bs-primary-rgb: 112, 48, 160;
  --bs-link-color: var(--idea-purple);
  --bs-link-color-rgb: 112, 48, 160;
  --bs-link-hover-color: var(--idea-deep);
  --nav-h: 64px;
}
html { scroll-padding-top: calc(var(--nav-h) + 40px); }
body { font-family: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--idea-ink); background: #fff; }
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -.01em; }

.skip-link { position: absolute; left: 1rem; top: 2.5rem; z-index: 100000; background: #fff; padding: .5rem 1rem; border-radius: .5rem; }

/* Nav (sits under the 28px ECOS topbar) */
.idea-nav { top: 28px; transition: top .15s ease; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--idea-line); min-height: var(--nav-h); }
.idea-nav .navbar-brand { display: flex; align-items: center; gap: .55rem; font-weight: 600; color: var(--idea-deep); }
.brand-mark { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--idea-purple); color: #fff; font-size: .95rem; }
.idea-nav .nav-link { font-weight: 600; font-size: .92rem; color: var(--idea-muted); }
.idea-nav .nav-link:hover, .idea-nav .nav-link.active { color: var(--idea-purple); }

.btn-cta { background: var(--idea-accent); color: var(--idea-deep); font-weight: 700; border: 0; }
.btn-cta:hover, .btn-cta:focus { background: #2fe484; color: var(--idea-deep); }
.btn-ghost { border: 2px solid rgba(255,255,255,.55); color: #fff; font-weight: 600; }
.btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }

.draft-ribbon { background: repeating-linear-gradient(45deg,#ffd43b 0 14px,#fcc419 14px 28px); color: #3b2f00; font-weight: 700; text-align: center; font-size: .8rem; padding: .3rem 1rem; letter-spacing: .04em; }

/* Hero */
.hero { position: relative; overflow: hidden; color: #fff; padding: 5rem 0 4.5rem;
  background: radial-gradient(1200px 500px at 85% -10%, rgba(72,248,155,.28), transparent 60%),
              radial-gradient(900px 600px at -10% 110%, rgba(42,67,150,.55), transparent 60%),
              linear-gradient(135deg, var(--idea-deep) 0%, var(--idea-purple) 100%); }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .14;
  background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 22px 22px; }
.hero h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1.02; margin-bottom: 1rem; }
.hero-year { color: var(--idea-accent); }
.hero-tagline { font-size: 1.2rem; max-width: 36rem; opacity: .92; }
.hero-kicker { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-bottom: 1.25rem; }
.hero-hashtag { font-weight: 600; opacity: .8; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.status-badge { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .8rem; border-radius: 999px; font-size: .8rem; font-weight: 700; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); }
.status-open { background: var(--idea-accent); color: var(--idea-deep); border-color: transparent; }
.hero-facts { position: relative; z-index: 1; margin: 0; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); border-radius: 1.25rem; padding: 1.5rem; backdrop-filter: blur(6px); }
.hero-facts > div { padding: .8rem 0; border-bottom: 1px solid rgba(255,255,255,.15); }
.hero-facts > div:last-child { border-bottom: 0; }
.hero-facts dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; opacity: .75; }
.hero-facts dt i { width: 1.1rem; }
.hero-facts dd { margin: .2rem 0 0; font-size: 1.1rem; font-weight: 700; }
.hero .container { z-index: 1; }

.tba-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .12rem .6rem; border-radius: 999px; font-size: .8em; font-weight: 600; background: rgba(112,48,160,.1); color: var(--idea-purple); }
.hero .tba-pill { background: rgba(255,255,255,.16); color: #fff; }

/* Sections */
.section { padding: 5rem 0; }
main > section.section:nth-of-type(even) { background: var(--idea-tint); }
.section-head { max-width: 46rem; margin-bottom: 2.5rem; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; font-weight: 700; color: var(--idea-purple); margin-bottom: .4rem; }
.section-head h2 { font-size: clamp(1.8rem, 3.5vw, 2.5rem); }
.section-head .lead { color: var(--idea-muted); }
.subhead { font-size: 1.2rem; margin-bottom: 1.25rem; }

.feature, .panel, .prize, .challenge, .person { background: #fff; border: 1px solid var(--idea-line); border-radius: 1rem; padding: 1.5rem; height: 100%; }
.feature h3, .prize h3, .panel h3 { font-size: 1.1rem; }
.feature p, .prize p { color: var(--idea-muted); margin-bottom: 0; }
.feature-icon { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--idea-tint); color: var(--idea-purple); font-size: 1.2rem; margin-bottom: 1rem; }

.challenge { border-top: 5px solid var(--idea-purple); transition: transform .2s, box-shadow .2s; }
.challenge:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(43,16,70,.1); }
.challenge.is-tba { border-top-color: var(--idea-line); background: repeating-linear-gradient(-45deg,#fff 0 12px,#fbf9fd 12px 24px); }
.challenge.is-tba h3 { color: var(--idea-muted); }
.challenge-num { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--idea-purple); margin-bottom: .5rem; }
.challenge h3 { font-size: 1.3rem; display: flex; gap: .6rem; align-items: center; }
.challenge-icon { color: var(--idea-purple); }
.sdg-tiles { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.sdg-tiles img { border-radius: 6px; }

/* Phases stepper */
.phases { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.25rem; counter-reset: ph; }
.phase { position: relative; padding: 1.5rem 1.25rem 1.25rem; border-radius: 1rem; background: var(--idea-tint); border: 1px solid var(--idea-line); }
.phase-label { display: inline-block; background: var(--idea-purple); color: #fff; font-weight: 700; font-size: .75rem; padding: .2rem .6rem; border-radius: 999px; margin-bottom: .75rem; }
.phase h3 { font-size: 1.1rem; }
.phase p { color: var(--idea-muted); margin-bottom: .5rem; }
.phase-date { font-weight: 700; color: var(--idea-ink) !important; }

.keydates { list-style: none; padding: 0; margin: 0; border-left: 3px solid var(--idea-line); }
.keydates li { position: relative; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; padding: .6rem 0 .6rem 1.4rem; }
.keydates li::before { content: ""; position: absolute; left: -8px; top: 1rem; width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 3px solid var(--idea-purple); }
.kd-date { min-width: 12rem; font-weight: 700; }

.ticks { list-style: none; padding: 0; }
.ticks li { position: relative; padding-left: 1.6rem; margin-bottom: .5rem; }
.ticks li::before { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 0; color: var(--idea-purple); }

.criteria-table th[scope=col] { background: var(--idea-deep); color: #fff; font-weight: 600; }
.criteria-table td, .criteria-table th { padding: .9rem 1.1rem; }

.person { text-align: center; }
.person-photo { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; margin: 0 auto .75rem; display: block; }
.person-initials { display: grid; place-items: center; background: var(--idea-tint); color: var(--idea-purple); font-weight: 800; font-size: 1.5rem; }
.person h4 { font-size: 1rem; margin-bottom: .2rem; }
.person-meta { color: var(--idea-muted); font-size: .85rem; margin-bottom: .5rem; }
.person-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; margin: 0; }
.person-tags span { font-size: .7rem; background: var(--idea-tint); color: var(--idea-purple); padding: .1rem .5rem; border-radius: 999px; }

/* Documents: a manila folder with a tab, documents as paper sheets inside */
.folder { --folder: #ffe7a0; --folder-light: #fff5d6; margin-top: 3.25rem; position: relative; filter: drop-shadow(0 14px 28px rgba(110,80,0,.12)); }
.folder-tab { position: relative; display: inline-flex; align-items: center; gap: .55rem; background: var(--folder); color: #5a4200;
  font-weight: 800; font-size: .9rem; letter-spacing: .02em; padding: .75rem 1.3rem .6rem 1.4rem; border-radius: 14px 0 0 0; }
.folder-tab::after { content: ""; position: absolute; top: 0; right: -34px; width: 34px; height: 100%; background: var(--folder);
  clip-path: polygon(0 0, 30% 0, 100% 100%, 0 100%); border-top-right-radius: 10px; }
.folder-tab i { font-size: 1rem; }
.folder-tab { max-width: calc(100% - 34px); }
@media (max-width: 575.98px) { .folder-body { padding: 1rem; } .doc { padding: .9rem 1.6rem .9rem .9rem; } .folder-tab { font-size: .78rem; } }
.folder-body { background: linear-gradient(180deg, var(--folder) 0, var(--folder-light) 70px, var(--folder-light) 100%);
  border-radius: 0 18px 18px 18px; padding: 1.75rem; }
.resources { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: .85rem; }
.doc { position: relative; display: flex; align-items: center; gap: .7rem; padding: 1.05rem 2.2rem 1.05rem 1.2rem; background: #fff; border: 1px solid #f0e0ac;
  border-radius: .5rem; text-decoration: none; font-weight: 600; color: var(--idea-ink); height: 100%; box-shadow: 0 2px 0 #f3e6bb; }
.doc::after { content: ""; position: absolute; top: 0; right: 0; width: 18px; height: 18px; background: linear-gradient(225deg, var(--folder-light) 50%, #eadba7 50%); border-bottom-left-radius: 4px; }
.doc i { font-size: 1.25rem; color: var(--idea-purple); flex-shrink: 0; }
a.doc:hover { color: var(--idea-purple); border-color: var(--idea-purple); transform: translateY(-2px); transition: transform .15s; }
.doc-soon { background: rgba(255,255,255,.55); border-style: dashed; color: var(--idea-muted); box-shadow: none; }
.doc-soon i { color: #b9a35a; }
.doc .tba-pill { font-size: .7rem; }
.res-type { margin-left: auto; font-size: .7rem; color: var(--idea-muted); white-space: nowrap; flex-shrink: 0; }

.accordion-button { font-weight: 700; }
.accordion-button:not(.collapsed) { background: var(--idea-tint); color: var(--idea-purple); }
.accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(112,48,160,.25); }

.section-results { background: linear-gradient(180deg, #fffbe6, #fff); }
.place { display: inline-block; font-weight: 800; color: var(--idea-purple); font-size: 1.6rem; }

/* Content additions (iteration 2) */
.hero-initiative { font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; opacity: .7; margin-top: .5rem; }
.hero-note { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; opacity: .85; padding: .5rem 0; }
.small-muted { color: var(--idea-muted); font-size: .9rem; }
.aims { background: #fff; border: 1px solid var(--idea-line); border-radius: 1rem; padding: 1rem 1.5rem; }
.aims summary, .challenge-more summary { cursor: pointer; font-weight: 700; color: var(--idea-purple); }
.challenge-more { margin-top: .5rem; }
.challenge-more p { margin: .6rem 0 0; color: var(--idea-muted); font-size: .92rem; }
.challenge p { color: var(--idea-muted); }
.step-card { background: #fff; border: 1px solid var(--idea-line); border-radius: 1rem; padding: 1.4rem; height: 100%; border-left: 5px solid var(--idea-accent); }
.step-card h3 { font-size: 1.05rem; }
.step-card p { color: var(--idea-muted); margin: 0; font-size: .95rem; }
.pathway { display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem; border: 1px dashed var(--idea-purple); border-radius: 1rem; height: 100%; }
.pathway h4 { font-size: 1.05rem; margin-bottom: .3rem; }
.pathway p { color: var(--idea-muted); }
.pathway-date { font-weight: 600; font-size: .85rem; color: var(--idea-purple); margin-left: .3rem; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chips span { font-size: .8rem; background: var(--idea-tint); border: 1px solid var(--idea-line); padding: .2rem .65rem; border-radius: 999px; }
.prize-amount { font-size: 2.4rem; font-weight: 800; color: var(--idea-purple); line-height: 1.1; }
.note { background: var(--idea-tint); border-left: 4px solid var(--idea-purple); border-radius: .5rem; padding: 1rem 1.25rem; color: var(--idea-ink); font-size: .95rem; }
main > section.section:nth-of-type(even) .note { background: #fff; }
.extras { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .75rem; }
.extras li { display: flex; gap: .7rem; align-items: center; padding: .9rem 1.1rem; border: 1px solid var(--idea-line); border-radius: .8rem; font-weight: 600; }
.extras i { color: var(--idea-purple); width: 1.3rem; text-align: center; }

/* Footer — mirrors the Doing Democracy / SEL footer structure */
.site-footer { background: var(--idea-deep); color: rgba(255,255,255,.85); padding: 60px 0 0; }
.site-footer a { color: rgba(255,255,255,.8); text-decoration: none; }
.footer-bottom a:hover, .footer-contact a:hover { text-decoration: underline; }
.site-footer a:hover { color: var(--idea-accent); }
.footer-title { font-size: 1.1rem; font-weight: 700; color: #fff; margin-bottom: 1.25rem; padding-bottom: .75rem; border-bottom: 2px solid var(--idea-accent); display: inline-block; }
.footer-text { color: rgba(255,255,255,.75); line-height: 1.7; font-size: .95rem; }
.footer-subtitle { font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; color: var(--idea-accent); margin-bottom: 1rem; font-weight: 700; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .6rem; }
.footer-links a { font-size: .95rem; text-decoration: none; transition: padding .2s; }
.footer-links a:hover { padding-left: 5px; }
.footer-contact li { margin-bottom: .5rem; }
.footer-contact i { width: 1.2rem; color: var(--idea-accent); }
.footer-organisers, .footer-universities { padding: 2rem 0; border-top: 1px solid rgba(255,255,255,.1); }
.footer-organisers img, .footer-universities img { filter: brightness(0) invert(1); opacity: .75; transition: opacity .3s; }
.footer-organisers a:hover img, .footer-universities a:hover img { opacity: 1; }
.footer-universities .uni { flex: 0 0 12.5%; min-width: 100px; }
.footer-funding { margin-top: 1rem; padding: 2rem 0; border-top: 1px solid rgba(255,255,255,.1); }
.footer-disclaimer { font-size: .8rem; color: rgba(255,255,255,.6); line-height: 1.6; margin: 0; }
.footer-bottom { text-align: center; padding: 1.5rem 0; border-top: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.55); font-size: .9rem; }
.footer-bottom p { margin: 0; }

.back-to-top { position: fixed; right: 1rem; bottom: 1rem; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--idea-purple); color: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.2); z-index: 1000; text-decoration: none; }
.back-to-top:hover { color: #fff; background: var(--idea-deep); }

@media (max-width: 1199.98px) { .idea-nav .navbar-collapse { padding-bottom: .75rem; } }
@media (max-width: 991.98px) {
  .hero { padding: 3.5rem 0 3rem; }
}
@media (max-width: 575.98px) {
  .section { padding: 3.5rem 0; }
  .container { padding-left: 16px; padding-right: 16px; }
  .kd-date { min-width: 0; width: 100%; }
  .criteria-table thead { display: none; }
  .criteria-table tr, .criteria-table th, .criteria-table td { display: block; width: 100%; text-align: left !important; }
  .criteria-table tr { border-bottom: 1px solid var(--idea-line); padding: .5rem 0; }
  .criteria-table th[scope=row] { padding-bottom: 0; border: 0; }
  .criteria-table td { border: 0; padding-top: .3rem; padding-bottom: .3rem; }
  .criteria-table td.text-end::before { content: "Score: "; font-weight: 700; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .challenge, .challenge:hover { transition: none; transform: none; }
}

/* Brand: ERUA logo + iDeaThon mark, so visitors connect the event with the Alliance */
.idea-nav .navbar-brand { gap: .65rem; }
.brand-erua { height: 30px; width: auto; display: block; }
.brand-sep { width: 1px; height: 28px; background: var(--idea-line); }
@media (max-width: 575.98px) { .idea-nav .navbar-brand { gap: .5rem; margin-right: .5rem; } .idea-nav .brand-mark { display: none; } .brand-erua { height: 26px; } }

/* ERUA-iD route (Participate) */
.erua-id { background: linear-gradient(135deg, var(--idea-blue) 0%, var(--idea-deep) 100%); color: #fff; border-radius: 1.25rem; padding: 2rem; }
.erua-id-head { display: flex; gap: 1.1rem; align-items: flex-start; margin-bottom: 1.5rem; }
.erua-id-head h3 { font-size: 1.35rem; margin-bottom: .35rem; }
.erua-id-head p { opacity: .85; max-width: 46rem; }
.erua-id-badge { flex-shrink: 0; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--idea-accent); color: var(--idea-deep); font-size: 1.4rem; }
.erua-id-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 1rem; }
.erua-id-steps li { position: relative; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 1rem; padding: 1.25rem 1.25rem 1.1rem; }
.erua-id-num { position: absolute; top: -12px; left: 1.1rem; width: 26px; height: 26px; border-radius: 50%; background: var(--idea-accent); color: var(--idea-deep); font-weight: 800; font-size: .85rem; display: grid; place-items: center; }
.erua-id-steps h4 { font-size: 1rem; margin: .35rem 0 .4rem; }
.erua-id-steps p { font-size: .9rem; opacity: .85; margin-bottom: .8rem; }

/* Footer link groups */
.footer-sublabel { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.5); font-weight: 700; margin: .9rem 0 .4rem; }
.footer-sublabel:first-of-type { margin-top: 0; }
.footer-links li { margin-bottom: .45rem; }

/* Thematic-area imagery (cropped from Attachment 1 panels) + sub-challenge lists */
.challenge.has-img { padding-top: 0; overflow: hidden; border-top: 0; }
.challenge-img { display: block; width: calc(100% + 3rem); max-width: none; height: auto; aspect-ratio: 800 / 281; object-fit: cover;
  margin: 0 -1.5rem 1.1rem; border-bottom: 5px solid var(--idea-purple); }
.subch { list-style: none; padding: 0; margin: .8rem 0 0; border-top: 1px solid var(--idea-line); }
.subch li { display: flex; gap: .6rem; padding: .32rem 0; font-size: .88rem; color: var(--idea-ink); border-bottom: 1px dashed var(--idea-line); }
.subch-code { flex-shrink: 0; min-width: 2.2rem; font-weight: 800; color: var(--idea-purple); }
/* Opening one card must not stretch its row-mates */
#challenge .row.g-4 > div { align-self: flex-start; }
#challenge .challenge { height: auto; }

/* ERUA-iD video tutorial */
.erua-id-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: .8rem; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.erua-id-video figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; margin-top: .6rem; font-size: .82rem; opacity: .85; }
.erua-id-video figcaption a { color: #fff; }
.erua-id-video .video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: .8rem; overflow: hidden; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.erua-id-video .video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Narrow intro column beside the large video: stack the badge above the text */
@media (min-width: 992px) { .erua-id .col-lg-4 .erua-id-head { flex-direction: column; gap: .8rem; } }

/* Nav shadow once the page scrolls — same values as ideathon2024 / ERUA Mentors (.navbar-shadow) */
.idea-nav { transition: top .15s ease, box-shadow .25s ease; }
.idea-nav.navbar-shadow { box-shadow: 0 1rem 3rem -2px rgba(0,0,0,.175); border-bottom-color: transparent; }

/* Active section indicator in the menu (discreet underline, as on the ERUA Mentors catalogue) */
/* The menu collapses below 1200px (navbar-expand-xl): with the Apply button it no longer fits at 992-1199px. */
.idea-nav .nav-link, .idea-nav .btn { white-space: nowrap; }
@media (min-width: 1200px) {
  .idea-nav .navbar-nav .nav-link { padding: .45rem 0; margin: 0 .65rem; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; }
  .idea-nav .navbar-nav .nav-link.active { color: var(--idea-purple); border-bottom-color: var(--idea-purple); }
}
@media (max-width: 1199.98px) {
  .idea-nav .navbar-nav .nav-link { padding-left: .75rem; border-left: 3px solid transparent; }
  .idea-nav .navbar-nav .nav-link.active { color: var(--idea-purple); border-left-color: var(--idea-purple); }
}

/* "Five thematic areas" heading + Expand/Collapse all */
.areas-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1.25rem; }
.areas-toggle { font-weight: 700; border-radius: 999px; padding: .35rem .95rem; --bs-btn-color: var(--idea-purple); --bs-btn-border-color: var(--idea-purple);
  --bs-btn-hover-bg: var(--idea-purple); --bs-btn-hover-border-color: var(--idea-purple); --bs-btn-active-bg: var(--idea-deep); --bs-btn-active-border-color: var(--idea-deep); }

/* Folded corner, v2: cut the corner out of the card itself (clip-path), so the folder's real gradient shows through
   and no border line or rounded corner pokes out; ::after only draws the flap. The shadow moves to the <li> as a
   drop-shadow, because box-shadow would be clipped by the cut. */
.doc { --fold: 18px; border-top-right-radius: 0; box-shadow: none;
  clip-path: polygon(0 0, calc(100% - var(--fold)) 0, 100% var(--fold), 100% 100%, 0 100%); }
.doc::after { top: 0; right: 0; width: var(--fold); height: var(--fold); border-bottom-left-radius: 3px;
  background: linear-gradient(225deg, transparent 50%, #eadba7 50%); }
.doc-soon::after { background: linear-gradient(225deg, transparent 50%, #efe2b6 50%); }
.resources li { filter: drop-shadow(0 2px 0 #f3e6bb); }
.resources li:has(.doc-soon) { filter: none; }

/* Documents grouped by audience */
.folder-group { display: flex; align-items: center; gap: .5rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; color: #5a4200; margin: 0 0 .75rem; }
.folder-group:not(:first-child) { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px dashed #e8d391; }
.folder-group-note { font-size: .88rem; color: #6b5a2a; margin: -.35rem 0 .85rem; max-width: 46rem; }

/* AEIPHORIA spotlight: real ECOS screenshot (feathered at the bottom) + short text */
.aei-spot { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 2rem; align-items: center; margin-bottom: 2.5rem; }
.aei-shot { margin: 0; }
.aei-shot img { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 30px rgba(43,16,70,.12)); }
.aei-text h3 { font-size: 1.35rem; margin-bottom: .6rem; }
.aei-text > p { color: var(--idea-muted); }
.aei-stat { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.aei-stat strong { font-size: 2rem; font-weight: 800; color: var(--idea-purple); line-height: 1; }
.aei-stat span { color: var(--idea-ink); font-weight: 600; font-size: .92rem; }
@media (max-width: 991.98px) { .aei-spot { grid-template-columns: 1fr; gap: 1rem; } }
/* keep card width constant when a group has only one or two documents */
.resources { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
.aei-more { font-weight: 700; border-radius: 999px; padding: .35rem .95rem; --bs-btn-color: var(--idea-purple); --bs-btn-border-color: var(--idea-purple);
  --bs-btn-hover-bg: var(--idea-purple); --bs-btn-hover-border-color: var(--idea-purple); --bs-btn-hover-color: #fff; }
/* AEIPHORIA card image: same treatment as the ECOS mini-site cards */
.aei-shot img { border-radius: .6rem; filter: none; box-shadow: 0 18px 40px rgba(43,16,70,.18); }

/* Folder rows (Rules / Supporting material / ERUA-iD) + discreet related links */
.folder-row { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8a7436; margin: 1rem 0 .45rem; }
.folder-group + .folder-row, .folder-group-note + .folder-row { margin-top: 0; }
.folder-related { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.1rem; margin: 1.1rem 0 0; font-size: .82rem; color: #8a7436; }
.folder-related span { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .7rem; }
.folder-related a { color: #5a4200; text-decoration: none; border-bottom: 1px dotted #b9a35a; }
.folder-related a:hover { color: var(--idea-purple); border-bottom-color: var(--idea-purple); }
.folder-related i { font-size: .75rem; opacity: .75; }

/* AEIPHORIA spotlight: smaller and discreet, below the folder */
.aei-spot { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 1.5rem; margin: 2.25rem 0 0; padding: 1.25rem; border: 1px solid var(--idea-line); border-radius: 1rem; background: #fff; }
.aei-text h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.aei-text > p { font-size: .9rem; margin-bottom: .6rem; }
.aei-stat strong { font-size: 1.4rem; }
.aei-stat span { font-size: .82rem; }
.aei-access { font-size: .82rem; color: var(--idea-muted); margin: 0; }
.aei-access a { white-space: nowrap; margin-left: .35rem; }
.aei-shot img { box-shadow: 0 10px 24px rgba(43,16,70,.14); }
@media (max-width: 767.98px) { .aei-spot { grid-template-columns: 1fr; } .aei-shot { max-width: 420px; } }

/* Two compact spotlights (AEIPHORIA, SELab) side by side under the folder */
.spots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2.25rem; }
.spots .aei-spot { margin: 0; grid-template-columns: minmax(0, 190px) minmax(0, 1fr); gap: 1.1rem; align-items: start; padding: 1rem; }
.spots .aei-text h3 { font-size: 1rem; }
.spots .aei-text > p { font-size: .84rem; line-height: 1.5; }
.spots .aei-stat strong { font-size: 1.2rem; }
.spots .aei-access a { margin-left: 0; display: inline-block; margin-top: .15rem; }
@media (max-width: 991.98px) { .spots { grid-template-columns: 1fr; } }
@media (max-width: 575.98px) { .spots .aei-spot { grid-template-columns: 1fr; } .spots .aei-shot { max-width: 360px; } }

/* Spotlights v3: no box, border or rounded corners; the tilted browser shot fades into the background */
.spots .aei-spot { border: 0; background: transparent; padding: 0; border-radius: 0; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 1rem; align-items: center; }
.spots .aei-shot img { border-radius: 0; box-shadow: none; filter: none; }
@media (max-width: 575.98px) { .spots .aei-spot { grid-template-columns: 1fr; } .spots .aei-shot { max-width: 420px; margin-bottom: -.5rem; } }
/* phones: keep the spotlight text inside its column (long email/link labels may wrap) */
@media (max-width: 575.98px) { .spots .aei-spot { grid-template-columns: minmax(0, 1fr); } }
.aei-access a, .aei-access .obf-mail { overflow-wrap: anywhere; }
.aei-text { min-width: 0; }
/* both spotlight headings on the same line: top-align text, and give the screenshots the same box height */
.spots .aei-spot { align-items: start; }
.spots .aei-shot { aspect-ratio: 760 / 540; display: flex; align-items: flex-start; overflow: visible; }
.spots .aei-shot img { width: 100%; height: auto; }
.spots .aei-text { padding-top: .35rem; }
.spots .aei-text .eyebrow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* full eyebrow names may wrap: reserve two lines in both spotlights (text sits at the bottom) so the headings align */
.spots .aei-text .eyebrow { white-space: normal; overflow: visible; text-overflow: clip; min-height: 3em; display: flex; align-items: flex-end; }
.spots .aei-text .eyebrow { letter-spacing: .06em; }
@media (max-width: 1199.98px) { .spots .aei-text .eyebrow { font-size: .7rem; letter-spacing: .04em; } }

/* Optional deadline countdown (hero facts) — discreet pill under the date */
.countdown { display: inline-flex; align-items: center; gap: .35rem; margin-top: .4rem; padding: .12rem .6rem; border-radius: 999px;
  font-size: .78rem; font-weight: 600; letter-spacing: .01em; color: var(--idea-accent); background: rgba(72,248,155,.10); border: 1px solid rgba(72,248,155,.28); }
.countdown i { font-size: .72rem; opacity: .85; }
.hero-facts dd .countdown { display: flex; width: max-content; }

/* ERUA-iD steps: small secondary link to the PDF quick guide */
.erua-id-guide { display: inline-block; margin-left: .6rem; font-size: .82rem; color: rgba(255,255,255,.85); text-decoration: none; border-bottom: 1px dotted rgba(255,255,255,.5); }
.erua-id-guide:hover { color: var(--idea-accent); border-bottom-color: var(--idea-accent); }
.erua-id-steps .obf-mail { color: #fff; }

/* Capacity-building sessions: the featured (next) session is wider, with a "Next event" flag and local times */
.session-next { border: 2px solid var(--idea-accent); box-shadow: 0 14px 34px rgba(43,16,70,.10); position: relative; }
.session-next .next-flag { position: absolute; top: -12px; right: 18px; background: var(--idea-accent); color: var(--idea-deep); font-weight: 800; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; padding: .2rem .65rem; border-radius: 999px; }
.session-labels { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; }
.session-labels .phase-label { margin: 0; }
.chip-soft { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 700; background: var(--idea-tint); color: var(--idea-purple); border: 1px solid var(--idea-line); }
.session-when { font-size: 1.15rem; font-weight: 800; color: var(--idea-ink); margin: .2rem 0 .5rem; }
.session-tz { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.session-tz li { font-size: .8rem; color: var(--idea-muted); background: var(--idea-tint); border: 1px solid var(--idea-line); border-radius: .5rem; padding: .25rem .55rem; }
.session-tz strong { color: var(--idea-ink); }
.kd-link { display: inline-block; margin-left: .5rem; font-size: .85rem; font-weight: 700; color: var(--idea-purple); }
.session-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.btn-ics { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; font-size: .8rem; font-weight: 700; color: var(--idea-purple); background: #fff; border: 1px solid var(--idea-line); border-radius: .5rem; }
.btn-ics i { font-size: 1.05rem; }
.btn-ics:hover { color: #fff; background: var(--idea-purple); border-color: var(--idea-purple); }
.btn-ics small { font-size: .85em; font-weight: 600; opacity: .75; }
/* Local times: plain text, not chips (they must not look like buttons) */
.session-tz { gap: .15rem 1.1rem; }
.session-tz li { background: none; border: 0; border-radius: 0; padding: 0; font-size: .85rem; }
/* Local times: secondary, grey */
.session-tz li { color: #8a8599; font-size: .8rem; }
.session-tz strong { color: #6f6a80; font-weight: 700; }