/*
Theme Name: OKComputer Nonprofit Theme V8
Author: ChatGPT
Description: Complete editable WordPress theme with app-like mobile experience, modern backend, working links and contact form.
Version: 8.0
License: GPL v2 or later
Text Domain: okcomputer-theme
*/
:root{--ink:#121827;--muted:#536174;--green:#7ed321;--teal:#079b82;--soft:#ecfbf7;--cream:#fbfff8;--card:#ffffff;--shadow:0 24px 70px rgba(18,24,39,.12);--radius:28px}
*{box-sizing:border-box}html{scroll-behavior:smooth;margin-top:0!important}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink);background:linear-gradient(180deg,#f8fff8,#eafaf7 45%,#fff)}body.admin-bar .site-header{top:32px}a{text-decoration:none;color:inherit}img{max-width:100%;height:auto;display:block}.container{width:min(1180px,92vw);margin-inline:auto}.section{padding:96px 0}.site-header{position:sticky;top:0;z-index:50;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;padding:14px min(5vw,72px);background:rgba(255,255,255,.84);backdrop-filter:blur(18px);box-shadow:0 10px 30px rgba(18,24,39,.08)}.brand{font-size:25px;font-weight:900;display:flex;align-items:center;gap:12px}.brand span{width:58px;height:58px;border-radius:999px;background:white;color:white;display:grid;place-items:center;overflow:hidden;box-shadow:0 10px 26px rgba(18,24,39,.12);border:2px solid rgba(7,155,130,.18)}.brand span img{width:100%;height:100%;object-fit:cover;transform:scale(1.18)}.brand strong{font-weight:900}.site-nav{display:flex;justify-content:center;gap:34px;font-size:19px;font-weight:700;color:#344056}.site-nav a:hover{color:var(--teal)}.header-actions{display:flex;gap:12px;align-items:center}.pill{padding:12px 22px;border-radius:999px;color:white;font-weight:900;box-shadow:0 12px 24px rgba(7,155,130,.18);white-space:nowrap}.green{background:var(--green)}.teal{background:var(--teal)}.menu-toggle{display:none;border:0;background:var(--teal);color:white;border-radius:14px;padding:10px 14px;font-size:22px}.hero{min-height:760px;display:flex;align-items:center;position:relative;overflow:hidden}.hero-bg{position:absolute;inset:0;background:radial-gradient(circle at 20% 20%,rgba(126,211,33,.22),transparent 35%),radial-gradient(circle at 85% 35%,rgba(7,155,130,.18),transparent 30%)}.hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}.eyebrow{text-transform:uppercase;letter-spacing:.14em;color:var(--teal);font-weight:900;font-size:14px;margin:0 0 16px}h1,h2,h3{line-height:1.05;margin:0 0 22px;font-family:Georgia,serif}h1{font-size:clamp(48px,7vw,92px)}h2{font-size:clamp(36px,5vw,62px)}h3{font-size:28px}.lead,.section-intro{font-size:22px;line-height:1.75;color:var(--muted)}p{font-size:20px;line-height:1.8;color:var(--muted)}.button-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:34px}.btn{display:inline-flex;align-items:center;justify-content:center;padding:16px 26px;border-radius:999px;font-weight:900;border:0;cursor:pointer;font-size:17px}.btn-primary{background:linear-gradient(135deg,var(--green),var(--teal));color:white;box-shadow:0 18px 40px rgba(7,155,130,.25)}.btn-soft{background:white;color:var(--teal);box-shadow:var(--shadow)}.hero-image-wrap,.image-card{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:white;padding:12px}.hero-image-wrap img,.image-card img{width:100%;height:560px;object-fit:cover;border-radius:calc(var(--radius) - 10px)}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}.reverse{grid-template-columns:1fr .9fr}.stats{display:flex;gap:28px;flex-wrap:wrap;margin-top:32px}.stats div{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:900}.stats span{width:54px;height:54px;border-radius:999px;background:#c7f4e9;display:grid;place-items:center}.man-day{background:linear-gradient(135deg,#fff,#f0fbf8)}blockquote{font-size:26px;line-height:1.5;font-family:Georgia,serif;margin:0 0 24px;padding:24px;border-left:6px solid var(--teal);background:white;border-radius:18px;box-shadow:0 14px 34px rgba(18,24,39,.06)}.activity-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:28px 0}.activity-card{background:white;border:1px solid rgba(7,155,130,.13);border-radius:18px;padding:18px;box-shadow:0 12px 30px rgba(18,24,39,.05)}.activity-card strong{display:block;font-size:18px}.activity-card span{display:block;color:var(--muted);line-height:1.5;margin-top:5px}.center{text-align:center}.card-grid,.cta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:42px}.work-card,.cta-card{background:white;border-radius:var(--radius);padding:34px;text-align:left;box-shadow:var(--shadow);border:1px solid rgba(7,155,130,.1);transition:.25s}.work-card:hover,.cta-card:hover{transform:translateY(-7px)}.card-icon,.cta-card span{width:58px;height:58px;border-radius:18px;background:var(--soft);display:grid;place-items:center;color:var(--teal);font-size:26px;margin-bottom:20px}.contact{background:linear-gradient(135deg,#073f37,#111827);color:white}.contact h2,.contact .eyebrow{color:white}.contact p{color:rgba(255,255,255,.78)}.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px}.given-form{background:white;color:var(--ink);padding:30px;border-radius:var(--radius);box-shadow:0 26px 80px rgba(0,0,0,.28);display:grid;grid-template-columns:1fr 1fr;gap:18px}.given-form label{font-weight:900;color:#253044}.given-form input,.given-form textarea,.given-form select{width:100%;margin-top:8px;border:1px solid #d9e5e2;border-radius:14px;padding:14px;font-size:16px}.given-form .full{grid-column:1/-1}.notice{padding:16px 18px;border-radius:16px;margin-top:20px;font-weight:900}.notice.success{background:#d5ffe6;color:#075f2a}.notice.error{background:#ffe1df;color:#8f1f17}.site-footer{padding:34px 0;background:#0b1220;color:white}.site-footer .container{display:flex;justify-content:space-between;gap:20px;align-items:center}.site-footer p{color:white;margin:0}@media(max-width:980px){.site-header{grid-template-columns:auto auto;justify-content:space-between}.menu-toggle{display:block}.site-nav,.header-actions{display:none}.site-header.open .site-nav,.site-header.open .header-actions{display:flex;grid-column:1/-1;flex-direction:column;align-items:stretch}.site-nav{gap:12px}.hero-grid,.two-col,.contact-grid{grid-template-columns:1fr}.hero{min-height:auto}.hero-image-wrap img,.image-card img{height:390px}.card-grid,.cta-grid,.activity-grid{grid-template-columns:1fr}.given-form{grid-template-columns:1fr}.section{padding:68px 0}h1{font-size:44px}.site-footer .container{flex-direction:column;text-align:center}}

/* ===== V7 Mobile App Experience - desktop blijft onaangeraakt ===== */
@media (max-width: 760px){
  :root{
    --mobile-pad: 16px;
    --mobile-radius: 24px;
  }

  body{
    background:
      radial-gradient(circle at top left, rgba(126,211,33,.20), transparent 34%),
      linear-gradient(180deg,#f7fff9 0%, #effbf8 42%, #ffffff 100%);
    overflow-x:hidden;
    -webkit-tap-highlight-color: transparent;
  }

  body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));
    z-index:-1;
  }

  .site-header{
    top:10px!important;
    left:12px;
    right:12px;
    width:auto;
    position:sticky;
    margin:10px 12px 0;
    padding:10px 12px;
    border-radius:24px;
    grid-template-columns:1fr auto;
    box-shadow:0 18px 50px rgba(18,24,39,.14);
    border:1px solid rgba(255,255,255,.75);
    backdrop-filter:blur(22px);
  }

  body.admin-bar .site-header{
    top:46px!important;
  }

  .brand{
    font-size:18px;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .brand span{
    width:44px;
    height:44px;
    font-size:18px;
    flex:0 0 auto;
  }

  .brand span img{
    width:100%;
    height:100%;
    object-fit:cover;
    transform:scale(1.18);
  }

  .menu-toggle{
    width:42px;
    height:42px;
    padding:0;
    border-radius:16px;
    display:grid;
    place-items:center;
    box-shadow:0 12px 24px rgba(7,155,130,.22);
  }

  .site-header.open{
    align-items:start;
  }

  .site-header.open .site-nav,
  .site-header.open .header-actions{
    margin-top:12px;
    padding:12px;
    background:rgba(255,255,255,.72);
    border-radius:20px;
    border:1px solid rgba(7,155,130,.12);
  }

  .site-header.open .site-nav a{
    padding:13px 14px;
    border-radius:16px;
    background:#fff;
    box-shadow:0 8px 18px rgba(18,24,39,.06);
  }

  .site-header.open .header-actions .pill{
    width:100%;
    text-align:center;
    justify-content:center;
    padding:14px 18px;
  }

  .section{
    padding:54px 0;
  }

  .container{
    width:min(100% - 28px, 520px);
  }

  .hero{
    min-height:auto;
    padding-top:26px;
  }

  .hero-grid{
    gap:28px;
  }

  .hero-copy{
    padding:20px 4px 0;
  }

  .eyebrow{
    font-size:12px;
    letter-spacing:.12em;
    margin-bottom:12px;
  }

  h1{
    font-size:clamp(38px, 11vw, 52px);
    letter-spacing:-.04em;
    margin-bottom:16px;
  }

  h2{
    font-size:clamp(32px, 9vw, 44px);
    letter-spacing:-.03em;
    margin-bottom:16px;
  }

  h3{
    font-size:24px;
  }

  .lead,
  p,
  .section-intro{
    font-size:17px;
    line-height:1.68;
  }

  .button-row{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    margin-top:24px;
  }

  .btn{
    width:100%;
    min-height:54px;
    border-radius:18px;
    font-size:16px;
    box-shadow:0 14px 34px rgba(7,155,130,.18);
  }

  .hero-image-wrap,
  .image-card{
    padding:8px;
    border-radius:28px;
    box-shadow:0 20px 60px rgba(18,24,39,.13);
    transform:translateZ(0);
  }

  .hero-image-wrap img,
  .image-card img{
    height:clamp(280px, 74vw, 430px);
    border-radius:22px;
    object-fit:cover;
  }

  .two-col,
  .reverse,
  .contact-grid{
    gap:30px;
  }

  .about .two-col{
    display:flex;
    flex-direction:column-reverse;
  }

  .stats{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    margin-top:22px;
  }

  .stats div{
    background:rgba(255,255,255,.78);
    border:1px solid rgba(7,155,130,.13);
    border-radius:20px;
    padding:12px;
    box-shadow:0 12px 28px rgba(18,24,39,.06);
  }

  blockquote{
    font-size:20px;
    border-left:0;
    border-top:5px solid var(--teal);
    padding:20px;
    border-radius:22px;
  }

  .activity-grid{
    display:flex;
    overflow-x:auto;
    gap:12px;
    scroll-snap-type:x mandatory;
    padding:4px 2px 14px;
    margin-left:-2px;
    margin-right:-2px;
  }

  .activity-grid::-webkit-scrollbar{
    height:0;
  }

  .activity-card{
    min-width:78%;
    scroll-snap-align:start;
    border-radius:22px;
    padding:20px;
  }

  .card-grid,
  .cta-grid{
    display:flex;
    overflow-x:auto;
    gap:14px;
    scroll-snap-type:x mandatory;
    padding:4px 2px 18px;
    margin-top:28px;
  }

  .card-grid::-webkit-scrollbar,
  .cta-grid::-webkit-scrollbar{
    height:0;
  }

  .work-card,
  .cta-card{
    min-width:86%;
    scroll-snap-align:center;
    border-radius:28px;
    padding:26px;
  }

  .work-card:hover,
  .cta-card:hover{
    transform:none;
  }

  .contact{
    margin:0 12px 12px;
    border-radius:32px;
    overflow:hidden;
  }

  .given-form{
    grid-template-columns:1fr;
    border-radius:28px;
    padding:20px;
    gap:14px;
  }

  .given-form input,
  .given-form textarea,
  .given-form select{
    border-radius:18px;
    padding:15px 14px;
    font-size:16px;
    background:#f8fffd;
  }

  .given-form .full{
    grid-column:auto;
  }

  .site-footer{
    margin:0 12px 12px;
    border-radius:28px 28px 0 0;
    padding-bottom:calc(34px + env(safe-area-inset-bottom));
  }

  .site-footer .container{
    gap:12px;
  }

  /* Mobile bottom app navigation */
  .mobile-app-nav{
    display:grid!important;
    position:fixed;
    left:12px;
    right:12px;
    bottom:calc(10px + env(safe-area-inset-bottom));
    z-index:90;
    grid-template-columns:repeat(4,1fr);
    gap:6px;
    padding:8px;
    border-radius:24px;
    background:rgba(255,255,255,.86);
    backdrop-filter:blur(24px);
    border:1px solid rgba(255,255,255,.75);
    box-shadow:0 18px 55px rgba(18,24,39,.20);
  }

  .mobile-app-nav a{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    min-height:54px;
    border-radius:18px;
    font-size:11px;
    font-weight:900;
    color:#344056;
  }

  .mobile-app-nav a span{
    font-size:20px;
    line-height:1;
  }

  .mobile-app-nav a:active,
  .mobile-app-nav a:hover{
    background:linear-gradient(135deg,rgba(126,211,33,.22),rgba(7,155,130,.16));
    color:var(--teal);
  }

  body{
    padding-bottom:88px;
  }
}

@media (min-width: 761px){
  .mobile-app-nav{display:none!important;}
}