:root { color-scheme:light; --ink:#241d2f; --muted:#6f6878; --paper:#f7f5f9; --surface:#fff; --green:#51367a; --green2:#7254a3; --gold:#d8b35b; --coral:#d37259; --blue:#527792; --line:#e4dfeb; --shadow:0 15px 35px rgb(81 54 122 / 11%); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); font-family:"DM Sans",sans-serif; }
body.menu-open { overflow:hidden; }
a { color:inherit; }
button,input,select,textarea { font:inherit; }
svg { width:19px; height:19px; stroke-width:1.8; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-family:"Libre Franklin",sans-serif; letter-spacing:0; }
.portal-container { width:min(1160px,calc(100% - 40px)); margin-inline:auto; }
.portal-eyebrow { margin-bottom:10px; color:var(--green2); font-size:.72rem; font-weight:800; text-transform:uppercase; }
.portal-eyebrow.light { color:#f0ca67; }
.portal-brand { display:inline-flex; align-items:center; gap:11px; text-decoration:none; }
.portal-brand > span { display:block; width:48px; height:48px; flex:0 0 auto; overflow:hidden; color:transparent; background:white url('../images/cac-onaabayo-logo.jpg') center / cover no-repeat; border:2px solid rgb(81 54 122 / 18%); border-radius:50%; font-size:0; }
.portal-brand > strong { max-width:190px; font-size:.76rem; line-height:1.25; }
.portal-brand.light > span { border-color:rgb(216 179 91 / 55%); }
.portal-brand.light strong { color:white; }
.portal-button { display:inline-flex; min-height:46px; padding:0 18px; align-items:center; justify-content:center; gap:8px; color:white; background:var(--green); border:0; border-radius:4px; font-weight:700; text-decoration:none; cursor:pointer; }
.portal-button:hover { background:#3f285f; }
.portal-button.secondary { min-height:39px; padding:0 14px; color:var(--green); background:#e8f1ed; font-size:.8rem; }
.portal-alert { display:flex; margin-bottom:24px; padding:13px 15px; align-items:flex-start; gap:10px; border:1px solid; border-radius:4px; font-size:.88rem; line-height:1.5; }
.portal-alert svg { flex:0 0 auto; }
.portal-alert.error { color:#843b2b; background:#fbe9e5; border-color:#f0c8be; }
.portal-alert.success { color:#176143; background:#e5f3ec; border-color:#bee0cf; }

.member-login-body { min-height:100vh; background:var(--paper); }
.member-login-shell { display:grid; min-height:100vh; grid-template-columns:minmax(390px,.9fr) minmax(500px,1.1fr); }
.member-welcome { display:flex; padding:50px clamp(35px,6vw,88px); flex-direction:column; justify-content:space-between; color:white; background:var(--green); }
.member-welcome h1 { max-width:650px; margin-bottom:20px; font-size:clamp(3rem,5.5vw,5.2rem); line-height:.98; }
.member-welcome p:not(.portal-eyebrow) { max-width:520px; color:rgb(255 255 255 / 67%); line-height:1.7; }
.member-welcome .portal-eyebrow { color:#f0ca67; }
.member-welcome > small { color:rgb(255 255 255 / 45%); }
.member-login-form { display:grid; padding:40px; place-items:center; }
.member-login-form > div { width:min(430px,100%); }
.member-login-form h2 { margin-bottom:10px; font-size:2.35rem; }
.member-login-form > div > p:not(.portal-eyebrow) { margin-bottom:30px; color:var(--muted); }
.member-login-form form,.portal-form { display:grid; gap:20px; }
.member-login-form label,.portal-form label,.profile-form label { display:grid; gap:8px; color:var(--ink); font-size:.84rem; font-weight:700; }
.member-login-form input,.portal-form input,.portal-form select,.portal-form textarea,.profile-form input { width:100%; min-height:48px; padding:11px 13px; color:var(--ink); background:white; border:1px solid #cad3cd; border-radius:4px; outline:0; }
.portal-form textarea { resize:vertical; }
.member-login-form input:focus,.portal-form input:focus,.portal-form select:focus,.portal-form textarea:focus,.profile-form input:focus { border-color:var(--green2); box-shadow:0 0 0 3px rgb(114 84 163 / 14%); }
.portal-password { position:relative; display:block; }
.portal-password input { padding-right:50px; }
.portal-password button { position:absolute; top:3px; right:3px; display:grid; width:42px; height:42px; padding:0; place-items:center; color:var(--muted); background:transparent; border:0; cursor:pointer; }
.portal-back { display:inline-flex; margin-top:28px; align-items:center; gap:7px; color:var(--muted); font-size:.85rem; text-decoration:none; }

.portal-body { min-height:100vh; background:var(--paper); }
.portal-header { position:sticky; z-index:30; top:0; background:white; border-bottom:1px solid var(--line); }
.portal-header-inner { display:flex; min-height:76px; align-items:center; gap:35px; }
.portal-header nav { display:flex; margin-left:auto; align-items:center; gap:24px; }
.portal-header nav a { position:relative; padding:28px 0; color:var(--muted); font-size:.86rem; font-weight:600; text-decoration:none; }
.portal-header nav a::after { position:absolute; right:0; bottom:20px; left:0; height:2px; background:var(--gold); content:""; transform:scaleX(0); }
.portal-header nav a:hover,.portal-header nav a.active { color:var(--ink); }
.portal-header nav a:hover::after,.portal-header nav a.active::after { transform:scaleX(1); }
.portal-user { display:flex; padding-left:20px; align-items:center; gap:9px; border-left:1px solid var(--line); }
.portal-user > span { display:grid; width:37px; height:37px; place-items:center; color:white; background:var(--green2); border-radius:50%; font-size:.73rem; font-weight:800; }
.portal-user > div { display:flex; max-width:125px; flex-direction:column; }
.portal-user strong { overflow:hidden; font-size:.76rem; text-overflow:ellipsis; white-space:nowrap; }
.portal-user small { color:var(--muted); font-size:.65rem; }
.portal-user form { margin:0; }
.portal-user button,.portal-menu-toggle { display:grid; width:38px; height:38px; padding:0; place-items:center; color:var(--muted); background:transparent; border:0; cursor:pointer; }
.portal-menu-toggle { display:none; margin-left:auto; }
.portal-hero { padding:62px 0 72px; color:white; background:var(--green); }
.portal-hero-inner { display:flex; align-items:center; justify-content:space-between; gap:30px; }
.portal-hero h1 { margin-bottom:12px; font-size:clamp(2.5rem,5vw,4.5rem); line-height:1; }
.portal-hero p:not(.portal-eyebrow) { margin-bottom:0; color:rgb(255 255 255 / 66%); }
.sunday-note { display:flex; min-width:245px; padding:19px; align-items:center; gap:13px; background:rgb(255 255 255 / 8%); border:1px solid rgb(255 255 255 / 15%); border-radius:5px; }
.sunday-note > svg { width:27px; height:27px; color:var(--gold); }
.sunday-note span { display:flex; flex-direction:column; }
.sunday-note small { margin-bottom:4px; color:rgb(255 255 255 / 55%); }
.portal-content { padding-top:32px; padding-bottom:90px; }
.quick-grid { display:grid; margin-top:-66px; grid-template-columns:repeat(4,1fr); gap:12px; }
.quick-grid article { display:flex; min-height:132px; padding:21px; align-items:flex-start; gap:13px; background:white; border:1px solid var(--line); border-radius:6px; box-shadow:0 8px 22px rgb(81 54 122 / 7%); }
.quick-icon { display:grid; width:40px; height:40px; flex:0 0 auto; place-items:center; color:white; border-radius:4px; }
.quick-icon.green { background:var(--green2); }.quick-icon.gold { color:var(--ink); background:var(--gold); }.quick-icon.coral { background:var(--coral); }.quick-icon.blue { background:var(--blue); }
.quick-grid article > div { display:flex; min-width:0; flex-direction:column; }
.quick-grid small { color:var(--muted); font-size:.69rem; }
.quick-grid strong { margin:5px 0; overflow:hidden; font-size:.95rem; text-overflow:ellipsis; white-space:nowrap; }
.quick-grid article div span { color:var(--muted); font-size:.7rem; }
.portal-content > .portal-alert { margin-top:20px; }
.portal-card-section { margin-top:-66px; padding:0; }
.portal-alert + .portal-card-section { margin-top:20px; }
.portal-card-section + .quick-grid { margin-top:18px; }
.portal-membership-card { display:grid; width:min(100%,520px); min-height:190px; padding:25px; grid-template-columns:1fr 104px; align-items:center; gap:22px; color:white; background:#51367a; border:1px solid rgb(255 255 255 / 12%); border-radius:6px; box-shadow:0 12px 30px rgb(81 54 122 / 18%); }
.portal-membership-card > div:first-child { display:flex; flex-direction:column; }.portal-membership-card > div:first-child > span { font:800 1rem "Libre Franklin",sans-serif; }.portal-membership-card small { margin-top:25px; color:rgb(255 255 255 / 55%); font-size:.62rem; text-transform:uppercase; }.portal-membership-card h2 { margin:5px 0; color:white; font-size:1.25rem; }.portal-membership-card p { margin:0; color:var(--gold); font-size:.75rem; }.portal-membership-card em { margin-top:15px; color:rgb(255 255 255 / 68%); font-size:.64rem; font-style:normal; }.portal-membership-card [data-member-qr] { display:grid; width:104px; height:104px; padding:4px; place-items:center; background:white; border-radius:3px; }.portal-membership-card img,.portal-membership-card canvas { width:96px !important; height:96px !important; }
.portal-section { padding:76px 0 0; scroll-margin-top:76px; }
.portal-section-title { display:flex; margin-bottom:27px; align-items:end; justify-content:space-between; gap:20px; }
.portal-section-title h2 { margin:0; font-size:clamp(1.6rem,3vw,2.25rem); }
.portal-section-title > a { display:inline-flex; align-items:center; gap:6px; color:var(--green2); font-size:.82rem; font-weight:700; text-decoration:none; }
.portal-section-title > span { color:var(--muted); font-size:.77rem; }
.portal-event-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:13px; }
.portal-event-grid article { display:grid; min-height:145px; padding:23px; grid-template-columns:58px 1fr auto; align-items:center; gap:17px; background:white; border:1px solid var(--line); border-radius:6px; }
.portal-event-grid time { display:flex; padding-right:14px; align-items:center; flex-direction:column; border-right:1px solid var(--line); }
.portal-event-grid time strong { color:var(--coral); font-size:1.7rem; }
.portal-event-grid time span { color:var(--muted); font-size:.7rem; text-transform:uppercase; }
.portal-event-grid article > div small { color:var(--green2); font-size:.68rem; font-weight:700; text-transform:uppercase; }
.portal-event-grid h3 { margin:7px 0; font-size:1rem; }
.portal-event-grid p { display:flex; margin:0; align-items:center; gap:5px; color:var(--muted); font-size:.72rem; }
.portal-event-grid p svg { width:14px; height:14px; }
.registered { display:inline-flex; align-items:center; gap:5px; color:var(--green2); font-size:.73rem; font-weight:700; }
.registered svg { width:16px; }
.course-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:13px; }
.course-grid article { display:grid; min-height:250px; padding:28px; grid-template-columns:52px 1fr; gap:18px; background:white; border:1px solid var(--line); border-radius:6px; }
.course-icon { display:grid; width:52px; height:52px; place-items:center; color:white; background:var(--blue); border-radius:4px; }
.course-grid small { color:var(--green2); font-size:.68rem; font-weight:700; text-transform:uppercase; }
.course-grid h3 { margin:8px 0; font-size:1.12rem; }
.course-grid p { color:var(--muted); font-size:.82rem; line-height:1.6; }
.progress-label { display:flex; margin:18px 0 7px; justify-content:space-between; color:var(--muted); font-size:.7rem; }
.progress-track { height:7px; margin-bottom:18px; overflow:hidden; background:#e7ece9; border-radius:10px; }
.progress-track i { display:block; height:100%; background:var(--green2); }
.portal-two-column { display:grid; grid-template-columns:1fr 1fr; gap:35px; }
.giving-list { border-top:1px solid var(--line); }
.giving-list article { display:grid; min-height:70px; grid-template-columns:38px 1fr auto; align-items:center; gap:12px; border-bottom:1px solid var(--line); }
.giving-list article > span { display:grid; width:35px; height:35px; place-items:center; color:var(--green2); background:#e8f1ed; border-radius:4px; }
.giving-list article > div { display:flex; flex-direction:column; }
.giving-list strong { font-size:.82rem; }
.giving-list small { margin-top:3px; color:var(--muted); font-size:.68rem; }
.giving-list b { font-size:.85rem; }
.prayer-section > p { color:var(--muted); font-size:.84rem; line-height:1.6; }
.portal-form { padding:24px; background:white; border:1px solid var(--line); border-radius:6px; }
.profile-section { margin-top:76px; padding:32px; background:white; border:1px solid var(--line); border-radius:6px; }
.profile-section .portal-section-title { margin-bottom:30px; }
.profile-form { display:grid; gap:25px; }
.identity-block { display:flex; align-items:center; gap:14px; }
.identity-block > span { display:grid; width:55px; height:55px; place-items:center; color:white; background:var(--green2); border-radius:50%; font-weight:800; }
.identity-block h3 { margin-bottom:5px; }
.identity-block p { margin:0; color:var(--muted); font-size:.78rem; }
.profile-fields { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.check-label { display:flex !important; align-items:center; flex-direction:row; gap:9px !important; font-weight:500 !important; }
.check-label input { width:17px; min-height:17px; accent-color:var(--green2); }
.profile-form > .portal-button { width:max-content; }
.portal-empty { color:var(--muted); font-size:.85rem; }
.portal-footer { padding:26px 0; color:rgb(255 255 255 / 60%); background:#33204f; font-size:.77rem; }
.portal-footer > div { display:flex; justify-content:space-between; gap:20px; }
.portal-footer a { color:#f0ca67; text-decoration:none; }
.course-back { display:inline-flex; margin-left:auto; align-items:center; gap:7px; color:var(--green2); font-size:.84rem; font-weight:700; text-decoration:none; }
.course-hero { padding:72px 0; color:white; background:var(--green); }
.course-hero h1 { max-width:800px; margin-bottom:16px; font-size:clamp(2.5rem,5vw,4.5rem); line-height:1; }
.course-hero > div > p:not(.portal-eyebrow) { max-width:680px; color:rgb(255 255 255 / 68%); line-height:1.7; }
.course-overall { max-width:560px; margin-top:32px; }
.course-overall > div:first-child { display:flex; margin-bottom:9px; justify-content:space-between; color:rgb(255 255 255 / 70%); font-size:.78rem; }
.course-overall .progress-track { background:rgb(255 255 255 / 16%); }
.course-overall .progress-track i { background:var(--gold); }
.course-content { padding-top:65px; padding-bottom:90px; }
.lesson-list article { display:grid; min-height:145px; padding:26px 0; grid-template-columns:54px 1fr auto; align-items:center; gap:22px; border-top:1px solid var(--line); }
.lesson-list article:last-child { border-bottom:1px solid var(--line); }
.lesson-number { display:grid; width:46px; height:46px; place-items:center; color:var(--muted); background:white; border:1px solid var(--line); border-radius:50%; font-size:.76rem; font-weight:800; }
.lesson-list article.complete .lesson-number { color:white; background:var(--green2); border-color:var(--green2); }
.lesson-list article.current { padding-right:22px; padding-left:22px; background:white; border:1px solid var(--line); border-radius:5px; }
.lesson-list article > div:nth-child(2) small { color:var(--green2); font-size:.67rem; font-weight:700; text-transform:uppercase; }
.lesson-list h3 { margin:7px 0; font-size:1.06rem; }
.lesson-list p { margin:0; color:var(--muted); font-size:.82rem; }
.lesson-action > span { display:inline-flex; align-items:center; gap:6px; color:var(--green2); font-size:.75rem; font-weight:700; }
.lesson-action > span.locked { color:var(--muted); }

@media (max-width:1000px) {
    .portal-menu-toggle { display:grid; }
    .portal-header nav { position:fixed; inset:76px 0 0; display:none; padding:25px; align-items:stretch; flex-direction:column; gap:0; background:white; }
    .portal-header nav.open { display:flex; }
    .portal-header nav a { padding:16px 5px; border-bottom:1px solid var(--line); }
    .portal-header nav a::after { display:none; }
    .portal-user { padding-left:0; border-left:0; }
    .portal-user > div { display:none; }
    .quick-grid { grid-template-columns:repeat(2,1fr); }
    .profile-fields { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:760px) {
    .member-login-shell { grid-template-columns:1fr; }
    .member-welcome { min-height:280px; padding:30px; }
    .member-welcome > div { margin:45px 0 20px; }
    .member-welcome h1 { font-size:2.65rem; }
    .member-welcome > small { display:none; }
    .member-login-form { padding:45px 24px; }
    .portal-container { width:min(100% - 28px,1160px); }
    .portal-header-inner { min-height:68px; gap:10px; }
    .portal-header nav { inset:68px 0 0; }
    .portal-brand strong { display:none; }
    .portal-hero { padding:48px 0 84px; }
    .portal-hero-inner { align-items:flex-start; flex-direction:column; }
    .sunday-note { width:100%; }
    .quick-grid { margin-top:-52px; grid-template-columns:1fr; }
    .portal-card-section { margin-top:-52px; }.portal-card-section + .quick-grid { margin-top:14px; }.portal-membership-card { width:100%; grid-template-columns:1fr 88px; padding:18px; }.portal-membership-card [data-member-qr] { width:88px; height:88px; }.portal-membership-card img,.portal-membership-card canvas { width:80px !important; height:80px !important; }
    .portal-event-grid,.course-grid,.portal-two-column,.profile-fields { grid-template-columns:1fr; }
    .portal-event-grid article { grid-template-columns:52px 1fr; }
    .portal-event-grid article > form,.portal-event-grid article > .registered { grid-column:2; justify-self:start; }
    .course-grid article { grid-template-columns:1fr; }
    .portal-section { padding-top:62px; }
    .profile-section { margin-top:62px; padding:22px; }
    .course-hero { padding:55px 0; }
    .lesson-list article,.lesson-list article.current { padding:22px 0; grid-template-columns:45px 1fr; gap:14px; }
    .lesson-list article.current { padding-right:16px; padding-left:16px; }
    .lesson-action { grid-column:2; }
}

@media (max-width:430px) {
    .portal-user > span { display:none; }
    .portal-section-title { align-items:flex-start; flex-direction:column; }
}

.welfare-portal-section{padding-bottom:76px}.welfare-portal-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:22px}.portal-form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.member-welfare-history{padding:24px;background:white;border:1px solid var(--line);border-radius:6px}.member-welfare-history h3{margin:0 0 14px}.member-welfare-history article{display:grid;min-height:82px;padding:12px 0;grid-template-columns:1fr auto;align-items:center;gap:12px;border-bottom:1px solid var(--line)}.member-welfare-history article:last-child{border:0}.member-welfare-history article>div{display:flex;flex-direction:column}.member-welfare-history small{color:var(--green2);font-size:.64rem}.member-welfare-history strong{margin:4px 0;font-size:.82rem}.member-welfare-history p{margin:0;color:var(--muted);font-size:.68rem}.member-welfare-status{padding:5px 8px;color:#856515;background:#fbf1d6;border-radius:999px;font-size:.62rem;font-style:normal;font-weight:700}.member-welfare-status.approved,.member-welfare-status.disbursed,.member-welfare-status.closed{color:var(--green2);background:#e8f3ee}.member-welfare-status.declined{color:var(--coral);background:#fae9e5}@media(max-width:760px){.welfare-portal-grid,.portal-form-row{grid-template-columns:1fr}}