/*
Theme Name: The Ark of Light
Theme URI: https://thearkoflight.org.za/
Author: The Ark of Light
Description: A clean white, navy and gold NGO theme with a photo hero slider, programme sections, prayer request, donation and contact forms. Built to work with Elementor (including Theme Builder locations). Activating it creates the six site pages and the menu automatically.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: ark-of-light
Tags: custom-logo, custom-menu, full-width-template, elementor
*/

:root{--bg:#fff;--alt:#f7f4ec;--ink:#13275c;--mute:#55607a;--navy:#13275c;--acc:#c9961f;--acc2:#e3b341;--card:#fff;--line:#e6e0d2;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font:16px/1.7 'Open Sans',Arial,sans-serif;background:var(--bg);color:var(--ink)}
h1,h2,h3,h4{font-family:'Open Sans',Arial,sans-serif;line-height:1.2;margin:0 0 .5em}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.btn{display:inline-block;background:var(--acc);color:var(--navy);padding:13px 28px;border-radius:40px;font-weight:600;border:0;cursor:pointer;font:600 15px 'Open Sans',Arial,sans-serif;transition:.25s}
.btn:hover{background:var(--navy);color:#fff;transform:translateY(-2px)}
.btn.ghost{background:transparent;border:2px solid #fff}
.btn.ghost{color:#fff}.btn.ghost:hover{background:#fff;color:var(--navy)}
header{position:sticky;top:0;z-index:20;background:#fff;color:var(--navy);box-shadow:0 2px 14px rgba(19,39,92,.12)}
.bar{display:flex;align-items:center;justify-content:space-between;height:84px;gap:16px}
.logo{display:flex;align-items:center;gap:10px;font-family:'Open Sans',Arial,sans-serif;font-size:22px;font-weight:700;white-space:nowrap}
.lg{height:68px;width:68px;object-fit:contain}.lg.ft{height:150px;width:150px;margin-bottom:14px;background:#fff;border-radius:12px;padding:6px}
nav ul{display:flex;gap:6px;list-style:none;margin:0;padding:0}
nav a{display:block;padding:8px 13px;font-size:14px;font-weight:500;border-radius:30px;cursor:pointer;transition:.2s}
nav a:hover,nav a.on{color:var(--acc)}
nav a.on{box-shadow:inset 0 -2px 0 var(--acc);border-radius:0}
.burger{display:none;background:none;border:0;color:var(--navy);font-size:28px;cursor:pointer}
@media(max-width:940px){.burger{display:block}.hd-btn{display:none}nav{position:absolute;left:0;right:0;top:84px;background:#fff;display:none;padding:10px 22px 18px}nav.open{display:block}nav ul{flex-direction:column}}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1}}
.hero{position:relative;min-height:560px;color:#fff;display:flex;align-items:center;overflow:hidden}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1s;display:flex;align-items:center}
.slide.on{opacity:1}
.s1,.s2,.s3{background:radial-gradient(circle at 78% 105%,#e3b341 0,rgba(227,179,65,.55) 14%,transparent 40%),linear-gradient(160deg,#0d1c47,#13275c 55%,#1f3d86)}.s2{background-position:20% 0}.slide,.ph,.big{background-size:cover;background-position:center}
.slide::after{content:"";position:absolute;right:-80px;top:50%;width:420px;height:420px;margin-top:-210px;border-radius:50%;display:none}
.slide .wrap{position:relative;z-index:2}
.eyebrow{text-transform:uppercase;letter-spacing:3px;font-size:13px;color:var(--acc);font-weight:600}.hero .eyebrow{color:var(--acc2)}
.hero h1{font-size:clamp(34px,5.6vw,66px);max-width:760px}
.hero p{max-width:600px;font-size:18px;opacity:.93}
.dots{position:absolute;bottom:22px;left:0;right:0;display:flex;justify-content:center;gap:10px;z-index:5}
.dots i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.45);cursor:pointer}
.dots i.on{background:var(--acc2)}
.contact-strip{background:var(--acc);color:var(--navy)}
.contact-strip .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding-top:22px;padding-bottom:22px}
.contact-strip b{display:block;font-family:'Open Sans',Arial,sans-serif;font-size:19px}
@media(max-width:760px){.contact-strip .wrap{grid-template-columns:1fr}}
section.s{padding:84px 0}.alt{background:var(--alt)}
.head{text-align:center;max-width:720px;margin:0 auto 46px}
.head h2{font-size:clamp(28px,4vw,42px)}.head p,.mute{color:var(--mute)}
.grid{display:grid;gap:26px}.g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 8px 26px rgba(0,0,0,.06);transition:.3s}
.card:hover{transform:translateY(-6px)}
.ph{height:190px;background:radial-gradient(circle at 70% 110%,rgba(227,179,65,.85),transparent 55%),linear-gradient(150deg,#0d1c47,#1f3d86)}

.pad{padding:24px}.pad h3{font-size:22px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
@media(max-width:860px){.split{grid-template-columns:1fr}}
.big{min-height:380px;border-radius:16px;background:radial-gradient(circle at 70% 110%,rgba(227,179,65,.85),transparent 55%),linear-gradient(150deg,#0d1c47,#1f3d86)}
ul.tick{list-style:none;padding:0}ul.tick li{padding-left:30px;position:relative;margin:8px 0}ul.tick li::before{content:"✓";position:absolute;left:0;color:var(--acc);font-weight:700}
.stats{background:var(--navy);color:#fff;padding:56px 0}.stats .grid{text-align:center}.stats h3{font-size:30px;color:var(--acc2);margin:0}
.pagehead{background:radial-gradient(circle at 85% 130%,rgba(227,179,65,.7),transparent 45%),linear-gradient(150deg,#0d1c47,#13275c);color:#fff;text-align:center;padding:76px 0}
.pagehead h1{font-size:clamp(32px,5vw,52px);margin:0 0 8px}.pagehead p{margin:0;opacity:.85}
.prog{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;padding:46px 0;border-bottom:1px solid var(--line)}
.prog:nth-child(even) .ph{order:2}.prog .ph{height:300px;border-radius:14px}
@media(max-width:860px){.prog{grid-template-columns:1fr}.prog:nth-child(even) .ph{order:0}}
form{display:grid;gap:14px}
input,select,textarea{width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font:15px 'Open Sans',Arial,sans-serif}
textarea{min-height:140px;resize:vertical}
label.ck{display:flex;gap:10px;align-items:center;font-size:14px}label.ck input{width:auto}
.amts{display:flex;flex-wrap:wrap;gap:10px}.amts button{padding:11px 20px;border-radius:40px;border:2px solid var(--acc);background:transparent;color:var(--ink);font:600 15px 'Open Sans',Arial,sans-serif;cursor:pointer}
.amts button.on,.amts button:hover{background:var(--acc);color:var(--navy)}
.box{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:30px}
.note{font-size:13px;color:var(--mute)}
.verse{background:var(--navy);color:#fff;text-align:center;padding:56px 0;font-family:'Open Sans',Arial,sans-serif;font-size:22px;font-style:italic}
.verse small{display:block;margin-top:10px;font:500 14px 'Open Sans',Arial,sans-serif;color:var(--acc2);font-style:normal}
footer{background:var(--navy);color:#cfd7e3;padding:64px 0 26px}
footer .grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
footer h4{color:#fff;font-size:19px}footer a{display:block;padding:3px 0;cursor:pointer}footer a:hover{color:var(--acc2)}
.copy{border-top:1px solid rgba(255,255,255,.14);margin-top:40px;padding-top:20px;font-size:13px;text-align:center}
.bank{width:100%;border-collapse:collapse;margin:8px 0 12px}.bank td{padding:9px 6px;border-bottom:1px solid var(--line);vertical-align:top}.bank td:first-child{color:var(--mute);width:38%}.amtcp{margin-left:8px;padding:3px 12px;border-radius:20px;border:1px solid var(--acc);background:transparent;color:var(--navy);font:600 12px 'Open Sans',Arial,sans-serif;cursor:pointer}.toast{display:none;background:var(--acc);color:var(--navy);padding:12px 16px;border-radius:10px}
.i1{--im:url("assets/images/i1.jpg")}
.i3{--im:url("assets/images/i3.jpg")}
.i4{--im:url("assets/images/i4.jpg")}
.i5{--im:url("assets/images/i5.jpg")}
.i6{--im:url("assets/images/i6.jpg")}
.i7{--im:url("assets/images/i7.jpg")}
.i8{--im:url("assets/images/i8.jpg")}
.i9{--im:url("assets/images/i9.jpg")}
.i10{--im:url("assets/images/i10.jpg")}
.i11{--im:url("assets/images/i11.jpg")}
.i12{--im:url("assets/images/i12.jpg")}
.i13{--im:url("assets/images/i13.jpg")}
.i14{--im:url("assets/images/i14.jpg")}
.i15{--im:url("assets/images/i15.jpg")}
.i16{--im:url("assets/images/i16.jpg")}
.i17{--im:url("assets/images/i17.jpg")}
.i18{--im:url("assets/images/i18.jpg")}
.i19{--im:url("assets/images/i19.jpg")}
.i20{--im:url("assets/images/i20.jpg")}
.ph,.big{background-image:var(--im);background-size:cover;background-position:center 28%}
.ph.gl{height:300px;border-radius:14px}
.slide{background-image:linear-gradient(rgba(13,28,71,.55),rgba(13,28,71,.72)),var(--im);background-size:cover;background-position:center 30%}
.pagehead.pi{background-image:linear-gradient(rgba(13,28,71,.68),rgba(13,28,71,.8)),var(--im);background-size:cover;background-position:center 30%;padding:96px 0}
h1,h2,h3,h4{font-weight:700;letter-spacing:-.3px}
.hero{min-height:640px}.hero h1,.hero p{margin-left:auto;margin-right:auto}
.slide .wrap{text-align:center}
.slide .wrap>*{opacity:0;transform:translateY(28px);transition:opacity 1s ease,transform 1s ease}
.slide.on .wrap>*{opacity:1;transform:none}
.slide.on .wrap>:nth-child(1){transition-delay:.5s}.slide.on .wrap>:nth-child(2){transition-delay:.75s}.slide.on .wrap>:nth-child(3){transition-delay:1s}.slide.on .wrap>:nth-child(4){transition-delay:1.25s}
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.rv.in{opacity:1;transform:none}.card.rv.in:hover{transform:translateY(-6px)}
@media(prefers-reduced-motion:reduce){.rv,.slide .wrap>*{opacity:1;transform:none;transition:none}}

nav li{list-style:none}nav li.current-menu-item>a,nav li.current_page_item>a{color:var(--acc);box-shadow:inset 0 -2px 0 var(--acc);border-radius:0}
body.admin-bar header{top:32px}
.elementor-widget-html,.elementor-widget-html .elementor-widget-container{width:100%}
.elementor-editor-active .rv{opacity:1!important;transform:none!important}
.elementor-editor-active .slide .wrap>*{opacity:1!important;transform:none!important}
.site-main{min-height:40vh}.post-wrap{padding:60px 0}
footer .menu{list-style:none;margin:0;padding:0}footer .menu a{display:block;padding:3px 0}