/* GlobalFundMatch - Public Site Styles */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --primary:   #1a3c5e;
    --primary-light: #2a5c8e;
    --accent:    #e8a020;
    --open-bg:   #e6f4ea;
    --open-border: #2e7d32;
    --open-text: #1b5e20;
    --text:      #222;
    --muted:     #555;
    --border:    #dde3ec;
    --bg:        #f4f7fb;
    --card-bg:   #ffffff;
    --radius:    8px;
    --shadow:    0 2px 8px rgba(0,0,0,0.08);
}

body {
    font-family: 'Segoe UI', system-ui, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--primary-light); }

/* Header */
.site-header {
    background: var(--primary);
    color: #fff;
    padding: 0 2rem;
    height: 64px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.site-header .logo {
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.5px;
    text-decoration: none;
}
.site-header .logo:hover { color: #fff; text-decoration: none; opacity: 0.85; }
.site-header .logo span { color: var(--accent); }

/* Hero */
.hero {
    background: linear-gradient(135deg, var(--primary) 0%, #2a5c8e 100%);
    color: #fff;
    padding: 4rem 2rem 3rem;
    text-align: center;
}
.hero h1 { font-size: 2.4rem; font-weight: 800; margin-bottom: 1rem; }
.hero p  { font-size: 1.1rem; opacity: 0.9; max-width: 600px; margin: 0 auto 2.5rem; }

/* CTA buttons */
.cta-group { display: flex; gap: 1.2rem; justify-content: center; flex-wrap: wrap; }
.btn {
    display: inline-block;
    padding: 0.85rem 2.2rem;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    border: none;
    text-decoration: none;
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: #cf8a12; color: #fff; }
.btn-outline { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.7); }
.btn-outline:hover { background: rgba(255,255,255,0.15); color: #fff; }
.btn-sm { padding: 0.45rem 1.1rem; font-size: 0.85rem; }

/* Main content wrapper */
.container { max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem; flex: 1; }

/* Section intro */
.section-intro { margin-bottom: 2rem; }
.section-intro h2 { font-size: 1.7rem; color: var(--primary); margin-bottom: 0.4rem; }
.section-intro p  { color: var(--muted); }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 1.5rem; }
.card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.4rem 1.6rem;
    box-shadow: var(--shadow);
    transition: box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}
.card:hover { box-shadow: 0 4px 18px rgba(0,0,0,0.13); }

/* Open application highlight */
.card.open-application {
    border-color: var(--open-border);
    background: var(--open-bg);
}
.badge-open {
    display: inline-block;
    background: var(--open-border);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 2px 9px;
    border-radius: 20px;
    margin-bottom: 0.7rem;
}

.card-logo { width: 56px; height: 56px; object-fit: contain; margin-bottom: 0.8rem; border-radius: 4px; }
.card-logo-placeholder {
    width: 56px; height: 56px; background: var(--primary); border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 1.1rem; margin-bottom: 0.8rem;
}

.card h3 { font-size: 1.1rem; color: var(--primary); margin-bottom: 0.5rem; }
.card p.desc { font-size: 0.9rem; color: var(--muted); flex: 1; margin-bottom: 1rem; }
.card-meta { font-size: 0.82rem; color: var(--muted); margin-bottom: 0.3rem; }
.card-meta strong { color: var(--text); }
.card-actions { margin-top: 1rem; }
.card-actions a { font-size: 0.88rem; font-weight: 600; }

/* Info strip below hero */
.info-strip {
    background: #fff;
    border-bottom: 1px solid var(--border);
    padding: 1.5rem 2rem;
}
.info-strip .strip-inner {
    max-width: 1100px; margin: 0 auto;
    display: flex; gap: 2.5rem; flex-wrap: wrap;
    align-items: center; justify-content: center;
}
.strip-item { text-align: center; }
.strip-item .num { font-size: 2rem; font-weight: 800; color: var(--primary); }
.strip-item .lbl { font-size: 0.82rem; color: var(--muted); }

/* Back link */
.back-link { display: inline-block; margin-bottom: 1.5rem; color: var(--primary); font-size: 0.9rem; }
.back-link::before { content: '← '; }

/* Footer */
.site-footer {
    background: var(--primary);
    color: rgba(255,255,255,0.7);
    padding: 1.5rem 2rem;
    text-align: center;
    font-size: 0.82rem;
    line-height: 1.7;
    margin-top: auto;
}
.site-footer .disclaimer { max-width: 800px; margin: 0 auto; }
.site-footer .footer-links { margin-bottom: 0.6rem; }
.site-footer .footer-links a { color: rgba(255,255,255,0.85); text-decoration: underline; }
.site-footer .footer-links a:hover { color: #fff; }

/* Legal pages (privacy / terms) */
.legal-page .section-intro { margin-bottom: 1.8rem; }
.legal-page .section-intro h2 { font-size: 1.25rem; }
.legal-page .mission-section { margin: 1.5rem 0 2rem; }

/* Responsive */
@media (max-width: 640px) {
    .hero h1 { font-size: 1.7rem; }
    .cta-group { flex-direction: column; align-items: center; }
    .btn { width: 100%; max-width: 280px; text-align: center; }
}

.container { width:100%; }
.compact-cards { grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem; }
.opportunity-card { text-align:left;cursor:pointer;font:inherit;padding:1.1rem;gap:.3rem; }
.opportunity-card:focus-visible { outline:3px solid var(--primary-light);outline-offset:3px; }
.opportunity-card .card-logo { width:34px;height:34px;margin:0 0 .3rem; }
.opportunity-name { font-size:1rem;color:var(--primary);line-height:1.35; }
.detail-link { font-size:.78rem;color:var(--primary);margin-top:auto;padding-top:.5rem; }
.gfm-dialog { margin:auto;width:min(620px,calc(100% - 2rem));max-height:85vh;overflow:auto;padding:1.7rem;border:1px solid var(--border);border-radius:14px;color:var(--text);box-shadow:0 20px 80px #0004; }
.gfm-dialog::backdrop { background:#102338aa; }
.gfm-dialog h2 { clear:both;color:var(--primary);margin-bottom:1rem; }
.gfm-dialog p,.gfm-dialog dl { margin:1rem 0; }
.gfm-dialog dt { font-weight:700; }.gfm-dialog dd { margin-bottom:.6rem; }
.modal-close { float:right;margin-bottom:.7rem; }
@media(max-width:480px) { .compact-cards { grid-template-columns:1fr; }.hero { padding:2.5rem 1rem; } }

/* Organisation directory rows */
.organisation-list { border-top:3px solid #1a3c5e; }
.organisation-list-head { display:grid;grid-template-columns:minmax(180px,2fr) minmax(120px,1fr) minmax(100px,1fr) minmax(140px,1.3fr) minmax(195px,1.5fr);gap:1rem;padding:.65rem 1rem;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid #cad6df; }
@media(max-width:850px) { .organisation-list-head { display:none; } }
.organisation-row { border-bottom:1px solid #cad6df; }
.organisation-entry { display:grid;grid-template-columns:minmax(180px,2fr) minmax(120px,1fr) minmax(100px,1fr) minmax(140px,1.3fr) minmax(195px,1.5fr);align-items:center;gap:1rem;width:100%;padding:1.45rem 1rem;text-align:left;border:0;border-left:5px solid transparent;background:transparent;color:var(--text);font:inherit;cursor:pointer; }
.organisation-row:nth-of-type(even) .organisation-entry { background:#eaf0f6; }
.organisation-entry:hover { background:#dceaf5!important; }
.organisation-entry:focus-visible { outline:3px solid #2a5c8e;outline-offset:2px; }
.organisation-entry.open-application { border-left-color:#10a341;background:#f1ffe8; }
.organisation-entry .card-logo { display:none; }
.row-action { display:flex;flex-direction:column;align-items:flex-start;gap:.5rem; }
.application-live { display:inline-block;background:#d5ff00;color:#123000;border:2px solid #268400;border-radius:4px;padding:.35rem .6rem;font-size:.73rem;font-weight:900;letter-spacing:.04em;animation:application-pulse 1.4s steps(2,end) infinite; }
.application-check { font-size:.75rem;color:#526174; }
@keyframes application-pulse { 0%,100% { background:#d5ff00;box-shadow:0 0 0 3px #b5ec0066; } 50% { background:#17d958;box-shadow:0 0 18px 5px #17d95888; } }
@media(prefers-reduced-motion:reduce) { .application-live { animation:none;box-shadow:0 0 0 3px #b5ec0066; } }
@media(max-width:850px) {
    .organisation-entry { grid-template-columns:1fr 1fr;gap:.9rem 1rem;padding:1.2rem .7rem; }
    .organisation-entry .opportunity-name { grid-column:1/-1; }
    .row-action { grid-column:1/-1;flex-direction:row;align-items:center;flex-wrap:wrap; }
    /* Column headings are hidden as a row on mobile (the grid reflows to 2 columns),
       so surface the same heading text inline above each value instead. */
    .organisation-entry [data-col-label] { position:relative; }
    .organisation-entry [data-col-label]::before {
        content: attr(data-col-label);
        display:block;
        font-size:.66rem;
        font-weight:700;
        letter-spacing:.04em;
        text-transform:uppercase;
        color:var(--muted);
        margin-bottom:.2rem;
    }
}
.mission-section { border-left:5px solid var(--accent);padding:1rem 1.5rem;margin:2rem 0;background:#fff; }
.mission-section h2 { color:var(--primary);margin-bottom:.8rem; }.mission-section p+p { margin-top:1rem; }

.country-filter { display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;padding:1rem;background:#fff;border:1px solid var(--border);margin:1rem 0; }.country-filter input { padding:.65rem;border:1px solid var(--border);border-radius:5px;font:inherit;max-width:100%; }.filter-summary { color:var(--muted);font-size:.85rem;margin-bottom:1rem; }

/* Report-an-issue button and modal */
.btn-report {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .35rem;
    padding: .3rem .6rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: #a13a1c;
    background: #fdf0ea;
    border: 1px solid #edc3af;
    border-radius: 5px;
    cursor: pointer;
    font-family: inherit;
}
.btn-report:hover { background: #fbe1d5; }
.btn-report:focus-visible { outline: 2px solid #a13a1c; outline-offset: 2px; }

.report-dialog p { color: var(--muted); font-size: .92rem; }
.report-form { margin-top: 1.2rem; }
.report-form .form-group { margin-bottom: 1.1rem; }
.report-form label { display: block; font-weight: 700; font-size: .85rem; color: var(--text); margin-bottom: .4rem; }
.report-form select,
.report-form textarea,
.report-form input[type="email"],
.report-form input[type="text"] {
    width: 100%;
    padding: .6rem .7rem;
    font: inherit;
    font-size: .92rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fff;
    color: var(--text);
}
.report-form select:focus,
.report-form textarea:focus,
.report-form input:focus { outline: 2px solid #2a5c8e; outline-offset: 1px; }
.report-form textarea { resize: vertical; }
.report-form .btn-primary { width: 100%; text-align: center; }
.report-form .btn-primary:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.report-status { min-height: 1.2rem; font-size: .88rem; font-weight: 600; margin-top: .8rem; }
.report-status-ok { color: #1c7a30; }
.report-status-error { color: #c0392b; }

/* Honeypot field — hidden from sighted users, left reachable so simple bots that
   fill in every field still trip it, but skipped by keyboard/tab order. */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Public-facing flash banners (e.g. report submission confirmation) */
.public-alert {
    max-width: 900px;
    margin: 1rem auto 0;
    padding: .9rem 1.2rem;
    border-radius: 8px;
    font-size: .92rem;
    font-weight: 600;
}
.public-alert-success { background: #e8f7ec; color: #1c7a30; border: 1px solid #b9e6c4; }
.public-alert-error { background: #fdecea; color: #c0392b; border: 1px solid #f3c1bb; }