/*
Theme Name: CharityPro Reference Layout
Theme URI: https://example.com/
Author: OpenAI
Description: Responsive charity homepage layout based on the supplied visual reference. Replace demo copy and images with approved site content.
Version: 1.1.7
Text Domain: charitypro-reference
*/

:root{--pink:#f42c62;--ink:#26292d;--muted:#85898d;--pale:#f4f5f6;--line:#e7e8ea;--wrap:1160px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font:15px/1.55 Arial, sans-serif;background:#fff}a{color:inherit;text-decoration:none}img{max-width:100%;height:auto;display:block}.wrap{width:min(var(--wrap),calc(100% - 42px));margin:auto}.topbar{height:42px;background:#262b34;color:#fff;font-size:11px}.topbar .wrap{height:100%;display:flex;align-items:center;justify-content:flex-end;gap:30px}.topbar b{font-weight:600}.social{display:flex;gap:7px}.social span{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#168acb;font-size:10px}.head{background:#fff}.head-row{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:18px}.brand{font-size:21px;font-weight:800;line-height:1;color:#262b34}.brand em{font-style:normal;color:var(--pink)}.brand small{display:block;font-size:8px;letter-spacing:1.5px;color:#777;margin-top:5px}.nav{display:flex;align-items:center;gap:22px;font-size:11px;font-weight:bold;text-transform:uppercase}.nav a:hover,.nav .active{color:var(--pink)}.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--pink);color:#fff;padding:12px 21px;font-size:10px;font-weight:700;text-transform:uppercase;border:0}.hero{height:460px;background:linear-gradient(90deg,#000b,#0005),url('https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?auto=format&fit=crop&w=1800&q=85') center 47%/cover no-repeat;color:white;display:flex;align-items:center}.hero-copy{max-width:480px}.hero h1{font-size:50px;line-height:1.08;margin:0 0 12px;font-weight:800}.hero p{font-size:14px;margin:0 0 20px}.hero .btn{border-radius:18px;padding:10px 18px;background:transparent;border:1px solid #fff}.quick{background:var(--pink);color:#fff}.quick .wrap{display:grid;grid-template-columns:repeat(3,1fr)}.quick a{min-height:76px;display:flex;align-items:center;justify-content:center;gap:13px;border-right:1px solid #ffffff36;font-weight:700}.quick a:last-child{border:0}.quick b{display:block;font-size:17px}.quick small{font-size:9px;text-transform:uppercase;opacity:.85;display:block}.intro{padding:64px 0 58px}.intro h2,.center-title{font-size:24px;line-height:1.25;text-align:center;margin:0 0 27px;font-weight:800}.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:center}.intro-grid img{width:100%;height:250px;object-fit:cover}.intro-copy .tag{color:#aaa;font-size:9px;text-transform:uppercase}.intro-copy h3{font-size:20px;margin:5px 0}.intro-copy p{font-size:12px;color:var(--muted);margin:7px 0 12px}.bar{height:4px;background:#eee;margin:10px 0 15px}.bar i{display:block;background:var(--pink);height:100%;width:68%}.small-btn{border:1px solid #ddd;border-radius:18px;padding:8px 15px;font-size:9px;display:inline-block}.section{padding:54px 0}.gray{background:#f4f5f6}.subtitle{text-align:center;color:#9a9da0;font-size:11px;margin:-19px 0 28px}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.card{background:#fff;border:1px solid #e6e7e8;padding:10px}.card img{width:100%;height:120px;object-fit:cover}.card h3{font-size:13px;line-height:1.3;margin:10px 0 5px}.card p{font-size:10px;color:#96999c;margin:0 0 9px}.card .bar{margin:6px 0;height:3px}.callout{padding:49px 0;background:#686868;color:white;text-align:center}.callout h2{font-size:30px;line-height:1.2;margin:0 0 17px}.callout p{margin:0 0 12px;font-size:12px;color:#e2e2e2}.callout .btn{border:1px solid #ddd;background:transparent;border-radius:18px;padding:9px 19px}.events{display:grid;grid-template-columns:1fr 1fr;gap:22px}.event img{width:100%;height:190px;object-fit:cover}.event small{font-size:9px;color:#a2a3a4}.event h3{font-size:13px;line-height:1.35;margin:4px 0}.sponsor{display:grid;grid-template-columns:1fr 1fr;background:#f8f8f8}.sponsor img{width:100%;height:260px;object-fit:cover}.sponsor-copy{padding:34px 8%;align-self:center}.sponsor-copy h2{font-size:23px;margin:0 0 3px}.sponsor-copy p{font-size:12px;color:var(--muted)}.sponsor-icons{display:flex;gap:22px;margin:20px 0;font-size:10px}.sponsor-icons b{color:var(--pink);display:block;font-size:19px}.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.project{height:215px;position:relative;overflow:hidden}.project img{width:100%;height:100%;object-fit:cover}.project:after{content:"";position:absolute;inset:30% 0 0;background:linear-gradient(transparent,#000b)}.project strong{position:absolute;z-index:1;bottom:17px;left:17px;color:#fff;font-size:14px;line-height:1.25;max-width:210px}.center{text-align:center;margin-top:22px}.testimonials{background:#686868;color:#fff}.testimonials .cards{grid-template-columns:repeat(3,1fr)}.quote{background:white;color:#54575a;padding:18px;font-size:11px;min-height:130px}.quote p{margin:0 0 15px}.quote b{color:var(--pink);font-size:10px}.news{display:grid;grid-template-columns:1.35fr 1fr;gap:23px}.feature-news{display:grid;grid-template-columns:1.1fr .9fr;border:1px solid #eee}.feature-news img{height:225px;width:100%;object-fit:cover}.feature-news div{padding:18px}.feature-news h3,.news-list h3{font-size:15px;line-height:1.35;margin:0 0 7px}.feature-news p,.news-list p{font-size:10px;color:#989b9d}.news-list article{margin-bottom:16px}.volunteer{background:#d1d1d1;padding:48px 0;text-align:center}.volunteer-box{width:230px;background:#fff;padding:24px;margin:auto}.volunteer-box h2{font-size:18px;margin:0 0 8px}.volunteer-box p{font-size:10px;color:#999}.partners{padding:25px 0;border-bottom:1px solid #eee}.partners .wrap{display:flex;justify-content:space-around;align-items:center;gap:22px;color:#bbb;font-size:17px;font-weight:bold}.foot-nav{padding:16px 0;border-bottom:1px solid #eee}.foot-nav .wrap{display:flex;justify-content:space-between;font-size:9px;text-transform:uppercase}.footer{background:#242a33;color:#c5c7ca;padding:35px 0}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:30px}.footer h3{color:#fff;font-size:14px;margin:0 0 12px}.footer p,.footer a{font-size:10px;color:#aeb2b7}.footer a{display:block;margin:5px 0}.footer .brand{color:white}.copyright{text-align:center;border-top:1px solid #ffffff16;margin-top:25px;padding-top:20px;font-weight:700;color:#fff}
@media(max-width:900px){.nav{gap:12px;font-size:9px}.cards{grid-template-columns:repeat(2,1fr)}.topbar{display:none}.hero{height:410px}.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.wrap{width:calc(100% - 30px)}.head-row{min-height:66px;flex-wrap:wrap}.nav{order:3;width:100%;overflow:auto;padding:8px 0 13px}.head-row>.btn{padding:10px}.hero{height:390px;background-position:58% center}.hero h1{font-size:39px}.quick .wrap{grid-template-columns:1fr}.quick a{min-height:58px;border-right:0;border-bottom:1px solid #ffffff36}.intro-grid,.sponsor,.news,.feature-news{grid-template-columns:1fr}.intro-grid img{height:220px}.section{padding:42px 0}.cards{grid-template-columns:1fr 1fr;gap:10px}.card{padding:7px}.card img{height:100px}.events{grid-template-columns:1fr}.event img{height:190px}.projects{grid-template-columns:1fr}.project{height:220px}.testimonials .cards{grid-template-columns:1fr}.sponsor img{height:210px}.sponsor-copy{padding:27px 20px}.feature-news img{height:200px}.partners .wrap{flex-wrap:wrap;font-size:13px}.foot-nav .wrap{gap:12px;overflow:auto;white-space:nowrap}.footer-grid{grid-template-columns:1fr 1fr;gap:22px}.callout h2{font-size:26px}}