/* EGCC GivingSpace portal look, after egcc.eu: warm beige page and menu bar,
   white cards, Poppins, EGCC blue for buttons and links, EGCC orange for the
   small labels, tab underlines and bars (orange is too light for text). The
   portal always looks like this; event colours are only on the giver page. */
:root {
  --bg: #e5ded6; --surface: #fff; --text: #0e0e0e; --muted: #6e6e6e; --line: #d4ccc2;
  --primary: #004887; --primary-text: #fff; --accent: #ee9b11; --match: #9a9a9a;
  --font-display: 'Poppins', sans-serif;
  --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.portal { font-family: var(--font-body); background: var(--bg); color: var(--text); min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; }
main { flex: 1; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 2.1rem; margin: 18px 0 8px; }
h2 { font-size: 1.35rem; font-weight: 500; margin: 26px 0 8px; }
/* small orange spaced capitals above a heading, as on egcc.eu */
.eyebrow { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent); margin-top: 34px; }
.eyebrow + h1, .eyebrow + h2 { margin-top: 4px; }
h3 { font-size: 1.05rem; margin: 18px 0 6px; }
p { line-height: 1.55; margin: 8px 0; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.center { text-align: center; }
.notice { background: #fff7e0; border: 1px solid #f0d78a; padding: 12px 14px; border-radius: 6px; margin: 14px 0; }
.notice.ok { background: #eef8ee; border-color: #b9dcb9; }
.notice.err { background: #fdecec; border-color: #f2b5b5; }

.site-header { background: var(--bg); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.site-header .brand img { height: 40px; display: block; mix-blend-mode: multiply; } /* the logo's white box melts into the beige bar */
.site-header nav { display: flex; gap: 28px; align-items: center; font-size: 0.95rem; font-weight: 500; }
.site-header nav a { text-decoration: none; }
.site-header nav a:not(.btn) { color: var(--text); padding: 6px 0; border-bottom: 2px solid transparent; }
.site-header nav a:not(.btn):hover, .site-header nav a.active { color: var(--primary); border-bottom-color: var(--accent); }
@media (max-width: 640px) {
  .site-header .wrap { height: auto; flex-wrap: wrap; padding-top: 10px; padding-bottom: 6px; row-gap: 6px; }
  .site-header nav { gap: 16px; font-size: 0.85rem; flex-wrap: wrap; }
}

.btn { display: inline-block; background: var(--primary); color: var(--primary-text); padding: 10px 22px; border: 0; border-radius: 4px; text-decoration: none; font: inherit; font-weight: 500; font-size: 0.95rem; cursor: pointer; }
.btn.big { padding: 14px 34px; font-size: 0.95rem; }
.btn.secondary { background: #fff; color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.btn:disabled { opacity: 0.5; cursor: default; }

.site-footer { background: #0e0e0e; color: #eee; padding: 26px 0 34px; text-align: center; font-size: 0.85rem; margin-top: 40px; }
.site-footer a { color: #fff; }
.site-footer .copy { margin-top: 8px; color: #bbb; }
.site-footer .admin-link { margin-top: 14px; font-size: 0.75rem; }
.site-footer .admin-link a { color: #888; text-decoration: none; }
.site-footer .admin-link a:hover { color: #ccc; text-decoration: underline; }

/* Portal home */
.hero { padding: 6px 0 10px; }
.hero h1 { font-size: 2.6rem; }
@media (max-width: 600px) { .hero h1 { font-size: 2.1rem; } }
.hero p { color: var(--muted); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin: 8px 0 20px; }
.card { background: var(--surface); border-radius: 4px; overflow: hidden; text-decoration: none; display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(0,0,0,0.06); transition: box-shadow 0.2s, transform 0.2s; }
a.card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.1); transform: translateY(-2px); }
.card .cover { aspect-ratio: 16 / 9; background: #ddd center / cover no-repeat; }
.event-card .cover { aspect-ratio: 2.2 / 1; } /* the giver page banner's shape: one frame for the event cover */
.card .cover.placeholder { background: linear-gradient(135deg, #e9e9e9, #d6d6d6); }
.card .body { padding: 12px 14px 14px; }
.card h3 { margin: 0 0 4px; font-size: 1.02rem; color: var(--text); }
.card .meta { color: var(--muted); font-size: 0.88rem; }
.card .amount { margin-top: 8px; font-weight: 600; color: var(--primary); }
.row-between { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; }
.filter select { font: inherit; padding: 6px 8px; margin-left: 6px; }

/* Project detail */
.project-page { padding-bottom: 30px; }
.project-head { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 22px; }
@media (max-width: 760px) { .project-head { grid-template-columns: 1fr; } .head-media { order: -1; } }
.head-text h1 { margin-top: 6px; }
.tagline { color: var(--primary); font-weight: 600; margin-bottom: 8px; }
.org-logo { max-height: 60px; max-width: 200px; object-fit: contain; display: block; margin-bottom: 8px; }
.meta { color: var(--muted); font-size: 0.92rem; margin: 3px 0; }
.meta.links a { margin-right: 12px; }
.chips { margin: 10px 0; display: flex; flex-wrap: wrap; gap: 6px; }
/* categories and countries as tags, tinted with the event colour */
.chip { display: inline-block; background: color-mix(in srgb, var(--primary) 8%, #fff); color: var(--primary); border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent); border-radius: 999px; padding: 3px 12px; font-size: 0.8rem; font-weight: 500; line-height: 1.4; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin: 12px 0; }
.facts .lbl { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.facts .val { font-weight: 600; }
.facts .wide { grid-column: 1 / -1; }
.progress-wrap { margin: 10px 0 16px; }
.progress { height: 10px; background: var(--bg); border-radius: 5px; overflow: hidden; }
.progress > div { height: 100%; background: var(--accent); }
.progress-lbl { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--muted); margin-top: 4px; }
.head-media img, .head-media video { width: 100%; border-radius: 6px; display: block; background: #000; }
.head-media img.cover { aspect-ratio: 16 / 9; object-fit: cover; } /* cropped like the cards, at the focus point */
.embed { position: relative; padding-top: 56.25%; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 6px; }
.tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); margin: 26px 0 10px; }
.tabs a { padding: 10px 14px; text-decoration: none; white-space: nowrap; color: var(--muted); border-bottom: 3px solid transparent; }
.tabs a.active { color: var(--primary); border-bottom-color: var(--accent); }
.tab p { white-space: normal; }
/* section headings in the tabs (Summary, Problem …): smaller than page headings */
.tab h2, .tab h3 { font-size: 1.1rem; font-weight: 600; margin: 22px 0 6px; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin: 16px 0; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; display: block; }
img.wide { width: 100%; border-radius: 6px; margin: 12px 0; }
.people { display: grid; gap: 14px; }
.person { display: flex; gap: 14px; align-items: flex-start; }
.person img, .person .avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: #ddd; flex: 0 0 auto; }
.person .name { font-weight: 600; }
.person .title { color: var(--muted); font-size: 0.9rem; }
.goals, .bullets { padding-left: 20px; }
.goals li, .bullets li { margin: 8px 0; }
/* the project report: each goal with its status */
.report-goals { padding-left: 20px; }
.report-goals li { margin: 14px 0; }
.report-goals h3 { font-size: 0.9rem; margin: 8px 0 2px; color: var(--muted); font-weight: 600; }
.report-goals p { margin: 0; }
.goal-status { display: inline-block; border-radius: 999px; padding: 1px 10px; font-size: 0.78rem; font-weight: 500; margin-left: 6px; white-space: nowrap; }
.goal-status.achieved { background: #e2f3e2; color: #24613a; }
.goal-status.partly { background: #fff2cc; color: #7a5a00; }
.goal-status.not { background: #fdecec; color: #a93226; }
.org-head { display: flex; gap: 16px; align-items: center; margin-top: 16px; }
.docs { list-style: none; }
.docs li { padding: 8px 0; border-bottom: 1px solid #eee; }
.update, .qa { padding: 14px 0; border-bottom: 1px solid #eee; }

/* Forms */
.form-page { max-width: 720px; }
.form-page.narrow { max-width: 460px; }
.stack label { display: block; margin: 12px 0 4px; font-size: 0.9rem; color: var(--muted); }
.stack label.check { display: flex; align-items: center; gap: 8px; color: var(--text, #333); }
.stack label.check input { width: auto; margin: 0; }
.stack input, .stack textarea, .stack select { display: block; width: 100%; font: inherit; padding: 10px 12px; border: 1px solid #ccc; border-radius: 4px; margin-top: 4px; background: #fff; color: var(--text); }
.stack .btn { margin-top: 18px; }
.stack .field-hint { margin: 6px 0 0; }
/* the common authenticator apps (admin login and invitation) */
.auth-apps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 8px 0 4px; }
.auth-app { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; }
.auth-app svg { flex: none; background: #fff; border-radius: 7px; padding: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.08); }
/* the invitation's numbered steps */
.setup-steps h2.step { font-size: 1.05rem; margin: 26px 0 4px; }
.setup-steps h2.step:first-child { margin-top: 10px; }
.setup-steps p { margin: 6px 0; }
.link-box { background: #fff; border: 1px solid #ddd; border-radius: 4px; padding: 10px; word-break: break-all; font-family: monospace; }
.lbl { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-top: 10px; }

/* My pledges */
.mine-page { max-width: 640px; padding-top: 10px; }
.mine-card { background: var(--surface); border: 1px solid #e6e6e6; border-radius: 8px; padding: 18px; margin: 16px 0; }
.mine-head { display: flex; gap: 14px; align-items: center; }
.mine-head .logo { height: 48px; }
.mine-head h1 { margin: 0; }
.mine-card table { width: 100%; border-collapse: collapse; margin: 14px 0; }
.mine-card th, .mine-card td { padding: 8px 6px; border-bottom: 1px solid #eee; text-align: left; }
.mine-card .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mine-card tfoot td { font-weight: 700; border-top: 2px solid var(--text); border-bottom: 0; }
.mine-card .status { font-weight: 600; }
.mine-actions { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; }
.mine-actions .change-link { margin-left: auto; text-align: right; font-size: 0.9rem; color: var(--muted); text-decoration: underline; }
.identity .row { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.identity .qr { width: 140px; height: 140px; }
.identity .code { font-family: monospace; font-size: 1.6rem; letter-spacing: 0.1em; }
.identity .link { word-break: break-all; font-size: 0.85rem; }

/* Portal tabs, filters, organisation and country cards */
/* filter bar: filter names with a chevron (invisible native select on top),
   search and sort on the right; on phones search first, full width */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin: 18px 0 20px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.filters .picks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; flex: 0 1 auto; }
.filters .find { display: flex; align-items: center; justify-content: flex-end; gap: 18px; margin-left: auto; flex: 1 1 0; min-width: 360px; } /* grows into what the filters leave; search shrinks first */
.pick { position: relative; display: inline-flex; align-items: center; font-size: 0.95rem; font-weight: 500; color: var(--text); cursor: pointer; white-space: nowrap; padding: 6px 0; }
.pick span { display: inline-flex; align-items: center; gap: 4px; max-width: 280px; }
.pick span::after { content: ""; flex: 0 0 auto; width: 12px; height: 12px; margin-left: 6px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
.pick b { font-weight: 600; color: var(--primary); overflow: hidden; text-overflow: ellipsis; }
.pick select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.pick:focus-within span { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 2px; }
.pick:hover span { color: var(--primary); }
.pick.sort span::before { content: ""; width: 14px; height: 14px; margin-right: 4px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4v16M3 8l4-4 4 4M17 20V4M13 16l4 4 4-4'/%3E%3C/svg%3E") center / contain no-repeat; }
.pick.sort span::after { display: none; }
.pick.sort.on span { color: var(--primary); font-weight: 600; }
.filters .clear { font-size: 0.85rem; color: var(--muted); }
.filters input[type=search] { font: inherit; font-size: 0.9rem; color: var(--text); flex: 0 1 300px; min-width: 130px; height: 38px; box-sizing: border-box; padding: 0 38px 0 12px; border: 1px solid #cfc6bb; border-radius: 4px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") right 12px center no-repeat; }
.filters input[type=search]:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,0,0,0.07); }
@media (max-width: 760px) {
  .filters .find { order: -1; flex: 1 1 100%; min-width: 0; margin-left: 0; }
  .filters input[type=search] { flex: 1 1 auto; }
  .pick span { max-width: 70vw; }
}
.card[hidden], .card-group[hidden], .search-empty [hidden] { display: none; }
.search-empty { margin: 14px 0; }
.search-empty .elsewhere a { margin-left: 8px; white-space: nowrap; }
.org-card .logo-box { height: 120px; display: flex; align-items: center; justify-content: center; background: #fff; border-bottom: 1px solid #eee; padding: 14px 18px; }
.org-card .logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
.org-card .logo-box span { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--muted); text-align: center; }
.org-card .chips { margin: 8px 0 0; }
.country-card .body { padding: 18px 16px; }
.country-card h3 { font-size: 1.15rem; }