/*
Theme Name: Websites for Good community
Description: The one shared theme for Websites for Good winners (wfg-community). Configured per group from the content form through the wfg_site option; never redesigned per site. Built by Whitfield IT.
Version: 1.0.0
Author: Whitfield IT
Text Domain: wfg-community
*/

/* Tokens. The group's palette arrives as --brand, --accent, --on-accent and --link-dark (functions.php, from the
   generator's contrast-checked palette); everything else is the house cream ground and its dark counterpart. */
@font-face{font-family:'DM Sans';src:url(fonts/dm-sans-latin.woff2) format('woff2');font-weight:100 1000;font-style:normal;font-display:swap}
:root{
  --brand:#1a1040;--accent:#faac5c;--on-accent:#1a1040;--link-dark:#faac5c;
  --font-head:'DM Sans',system-ui,sans-serif;--font-body:'DM Sans',system-ui,sans-serif;
  --bg:#f5f1e8;--surface:#fffcf6;--head:var(--brand);--text:#34304a;--muted:#5b5670;
  --border:#e2d9c6;--border-strong:#c9bc9f;--field-bd:#8c816b;--link:var(--brand);--stop:var(--accent-ink,#8a5208);
  --bar-bg:#1a1040;--bar-text:#f5f1e8;
  --wrap:1104px;--read:720px;--sec-y:64px;--sec-x:28px;--radius:3px;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0f0a24;--surface:#1a1338;--head:#f3f1fa;--text:#e7e4f0;--muted:#b4afc9;
  --border:#2e2750;--border-strong:#453c78;--field-bd:#7a70b4;--link:var(--link-dark);--stop:var(--link-dark);
  --bar-bg:#faac5c;--bar-text:#1a1040;
}}
@media (max-width:560px){:root{--sec-y:44px;--sec-x:16px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 1.0625rem/1.65 var(--font-body);overflow-wrap:break-word}
img{max-width:100%;height:auto;display:block}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
h1,h2,h3{font-family:var(--font-head);color:var(--head);line-height:1.15;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2rem,1.3rem + 3.2vw,3.4rem);font-weight:800;max-width:18ch}
h2{font-size:clamp(1.35rem,1.1rem + 1vw,1.75rem);font-weight:750}
p{margin:0 0 1em}
.stop{color:var(--stop)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--sec-x)}
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:var(--on-accent);padding:10px 14px;z-index:10}
.skip:focus{left:8px;top:8px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* The sample label: on every page of the sample site, above everything. */
.sample-bar{background:var(--bar-bg);color:var(--bar-text);font-size:.9375rem;padding:10px 0;line-height:1.45}

/* Header: the group's name or logo, and the five pages. One list: open on wide screens, behind Menu on phones. */
.site-head{border-bottom:1px solid var(--border-strong)}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px;flex-wrap:wrap}
.brand{text-decoration:none;color:var(--head);padding:12px 0}
.wordmark{font:800 1.25rem/1.2 var(--font-head);letter-spacing:-.01em}
.brand img{max-height:48px;width:auto}
.menu summary{list-style:none;cursor:pointer;font-weight:700;padding:10px 14px;border:1px solid var(--border-strong);border-radius:var(--radius);color:var(--head)}
.menu summary::-webkit-details-marker{display:none}
.nav-list{list-style:none;margin:0;padding:0}
.nav-list a{display:block;text-decoration:none;color:var(--head);font-weight:600;padding:12px 0}
.nav-list a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:3px;text-underline-offset:.35em}
@media (max-width:859px){
  .nav{width:auto}
  .menu[open]{flex-basis:100%}
  .head-row:has(.menu[open]) .nav{flex-basis:100%}
  .menu[open] summary{display:inline-block;margin-bottom:8px}
  .nav-list li+li{border-top:1px solid var(--border)}
}
@media (min-width:860px){
  .menu summary{display:none}
  .nav-list{display:flex;gap:28px}
}

/* Sections and rules: ruled rows, not cards. */
main{padding-bottom:var(--sec-y)}
.hero{padding:calc(var(--sec-y) * .9) 0 var(--sec-y);border-bottom:1px solid var(--border-strong);display:grid;gap:32px}
@media (min-width:900px){.hero--photo{grid-template-columns:1.1fr .9fr;align-items:center}}
.kicker{font-size:.9375rem;font-weight:600;color:var(--muted);margin-bottom:.75em}
.lede{font-size:clamp(1.0625rem,1rem + .4vw,1.25rem);max-width:var(--read);color:var(--text)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:1.5em}
.button{display:inline-block;background:var(--accent);color:var(--on-accent);font-weight:700;text-decoration:none;padding:13px 20px;border-radius:var(--radius);border:1px solid var(--accent);line-height:1.2}
.button:hover{filter:brightness(.95);text-decoration:none}
.button--quiet{background:transparent;color:var(--head);border-color:var(--border-strong)}
.textlink{font-weight:600}
.sec{padding:var(--sec-y) 0 0;max-width:var(--read)}
.sec + .sec{border-top:0}
.page-head + .sec > .ledger:first-child,.page-head + .sec > .ruled:first-child{border-top:0}
.page-head + .sec{padding-top:calc(var(--sec-y) * .5)}
.page-head{padding:calc(var(--sec-y) * .8) 0 calc(var(--sec-y) * .5);border-bottom:1px solid var(--border-strong);max-width:none}
.page-head p{max-width:var(--read);font-size:1.125rem}
.ruled{list-style:none;margin:0;padding:0;border-top:1px solid var(--border-strong)}
.ruled li{border-bottom:1px solid var(--border)}
.ruled a{display:grid;gap:2px 24px;padding:16px 0;text-decoration:none;color:var(--text)}
@media (min-width:700px){.ruled a{grid-template-columns:14rem 1fr}}
.ruled a:hover .ruled-head{text-decoration:underline}
.ruled-head{font-weight:700;color:var(--head)}
.ruled--plain li{padding:14px 0}
.ledger{margin:0 0 1em;border-top:1px solid var(--border-strong)}
.ledger-row{display:grid;gap:2px 24px;padding:14px 0;border-bottom:1px solid var(--border)}
@media (min-width:700px){.ledger-row{grid-template-columns:14rem 1fr}}
.ledger dt{font-weight:700;color:var(--head)}
.ledger dd{margin:0}
.note{display:block;color:var(--muted);font-size:.9375rem}
.item{padding:calc(var(--sec-y) * .6) 0;border-bottom:1px solid var(--border);max-width:var(--read)}
.item:last-child{border-bottom:0}
.item img,.hero-photo{border-radius:var(--radius);margin-top:16px}
.prose h2{margin-top:1.4em}
.prose h2:first-child{margin-top:0}

/* The contact form (Contact Form 7). */
.form-wrap label{display:block;font-weight:600;color:var(--head);margin-bottom:4px}
.form-wrap input[type=text],.form-wrap input[type=email],.form-wrap textarea{width:100%;font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--field-bd);border-radius:var(--radius);padding:11px 12px;margin-top:6px;font-weight:400}
.form-wrap textarea{min-height:9rem}
.form-wrap input[type=submit]{font:inherit;font-weight:700;background:var(--accent);color:var(--on-accent);border:1px solid var(--accent);border-radius:var(--radius);padding:13px 22px;cursor:pointer}
.wpcf7-not-valid-tip{display:block;color:#b91c1c;font-size:.9375rem;margin-top:4px}
@media (prefers-color-scheme:dark){.wpcf7-not-valid-tip{color:#fca5a5}}
.wpcf7-response-output:empty{display:none}
.wpcf7-response-output{margin:12px 0 0;padding:12px 0;border-top:1px solid var(--border-strong)}
.wpcf7-spinner{display:none}
.screen-reader-response{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hidden-fields-container{border:0;margin:0;padding:0}

/* Footer. */
.site-foot{border-top:1px solid var(--border-strong);padding:40px 0 28px;font-size:.9375rem;color:var(--muted)}
.foot-grid{display:grid;gap:20px}
@media (min-width:760px){.foot-grid{grid-template-columns:1fr auto}}
.foot-name{font-weight:800;color:var(--head);font-family:var(--font-head);font-size:1.0625rem;margin-bottom:.25em}
.foot-line{margin:0 0 .25em;max-width:52ch}
.foot-list{list-style:none;margin:0;padding:0;display:flex;gap:20px;flex-wrap:wrap}
.foot-list a{color:var(--text);display:inline-block;padding:6px 0}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;margin-top:24px;padding-top:16px;border-top:1px solid var(--border)}
.foot-base p{margin:0}
.foot-base{border-top:0;position:relative}
.foot-base::before{content:"";position:absolute;left:var(--sec-x);right:var(--sec-x);top:0;border-top:1px solid var(--border)}
.credit a{color:var(--text)}