/*
Theme Name: Jilani Foundation
Theme URI: https://jilanifoundation.org
Author: Whatobots Innovations
Description: Custom theme for Jilani Foundation — multi-page NGO website with programme pages, donations, volunteer/CSR/careers/help forms with saved entries and CSV export, and editable contact settings. Pages are created automatically on activation.
Version: 1.0.0
Requires at least: 6.2
Requires PHP: 7.4
License: Proprietary — owned by Jilani Foundation
Text Domain: jilani-foundation
*/

:root{
      --bg: oklch(99% 0.004 250);
      --bg-warm: oklch(95.5% 0.02 258);
      --ink: oklch(24% 0.08 258);
      --ink-soft: oklch(42% 0.05 258);
      --line: oklch(87% 0.015 258);
      --navy: oklch(24% 0.08 258);
      --navy-dark: oklch(16% 0.06 258);
      --gold: oklch(74% 0.13 82);
      --gold-dark: oklch(60% 0.13 78);
      --gold-tint: oklch(95% 0.04 85);
      --green: oklch(52% 0.11 150);
      --green-tint: oklch(95% 0.04 150);
      --card: oklch(99% 0.003 250);
    }
    *{box-sizing:border-box;}
    body{margin:0; font-family:'Work Sans', system-ui, sans-serif; background:var(--bg); color:var(--ink);}
    h1,h2,h3,h4{font-family:'Newsreader', Georgia, serif; font-weight:500; margin:0; letter-spacing:-0.01em; color:var(--ink);}
    p{margin:0;}
    ul{margin:0; padding-left:20px;}
    a{color:var(--navy); text-decoration:none;}
    .btn{display:inline-flex; align-items:center; justify-content:center; height:48px; padding:0 26px; border-radius:3px; font-weight:600; font-size:15px; cursor:pointer; border:1px solid transparent; white-space:nowrap;}
    .btn-sm{height:40px; padding:0 18px; font-size:14px;}
    .btn-primary{background:var(--navy); color:oklch(99% 0.005 60);}
    .btn-primary:hover{background:var(--navy-dark);}
    .btn-gold{background:var(--gold); color:var(--navy-dark);}
    .btn-gold:hover{background:var(--gold-dark); color:#fff;}
    .btn-ghost{background:transparent; color:var(--ink); border-color:var(--ink);}
    .btn-ghost:hover{background:var(--ink); color:var(--bg);}
    .btn-on-dark{background:oklch(99% 0.005 60); color:var(--ink);}
    .btn-line-dark{background:transparent; color:#fff; border-color:oklch(80% 0.02 258);}
    .eyebrow{font-size:13px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold-dark);}
    .container{max-width:1180px; margin:0 auto; padding:0 40px;}
    .section{padding:88px 0;}
    .section-sm{padding:56px 0;}
    .alt{background:var(--bg-warm); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
    .dark{background:var(--ink); color:oklch(92% 0.01 258);}
    .dark h2,.dark h3{color:#fff;}
    .lead{font-size:19px; line-height:1.6; color:var(--ink-soft);}
    .body{font-size:16px; line-height:1.7; color:var(--ink-soft);}
    .small{font-size:14px; line-height:1.6; color:var(--ink-soft);}
    .h1{font-size:54px; line-height:1.08;}
    .h2{font-size:38px; line-height:1.15;}
    .h3{font-size:22px; line-height:1.25;}
    .stack{display:flex; flex-direction:column;}
    .row{display:flex; flex-wrap:wrap; align-items:center;}
    .g4{gap:4px}.g8{gap:8px}.g40{gap:40px}.g12{gap:12px}.g16{gap:16px}.g20{gap:20px}.g24{gap:24px}.g32{gap:32px}.g48{gap:48px}
    .grid{display:grid; gap:24px;}
    .c2{grid-template-columns:repeat(2,minmax(0,1fr));}
    .c3{grid-template-columns:repeat(3,minmax(0,1fr));}
    .c4{grid-template-columns:repeat(4,minmax(0,1fr));}
    .split{display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:start;}
    .card{background:var(--card); border:1px solid var(--line); border-radius:4px; padding:28px;}
    .tile{display:flex; flex-direction:column; gap:14px; padding:26px; background:var(--card); border:1px solid var(--line); border-radius:4px; color:var(--ink);}
    .tile:hover{border-color:var(--navy);}
    .tile .more{font-size:14px; font-weight:600; color:var(--gold-dark); margin-top:auto;}
    .icon{width:44px; height:44px; border-radius:50%; background:var(--gold-tint); display:flex; align-items:center; justify-content:center;}
    .ph{background:var(--gold-tint); color:oklch(42% 0.1 70); border-radius:2px; padding:0 4px; font-style:normal;}
    .note{font-size:13px; color:var(--ink-soft); border-left:3px solid var(--gold); padding:6px 12px; background:var(--gold-tint);}
    .photo{position:relative; border-radius:4px; overflow:hidden; background:
      repeating-linear-gradient(135deg, oklch(91% 0.02 258) 0 12px, oklch(93.5% 0.018 258) 12px 24px);
      border:1px solid var(--line); display:flex; align-items:flex-end;}
    .photo span{margin:14px; font-size:12.5px; font-weight:500; color:var(--ink-soft); background:oklch(99% 0.004 250 / .9); padding:5px 10px; border-radius:2px;}
    .pill{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; padding:4px 10px; border-radius:999px;}
    .pill-ok{background:var(--green-tint); color:var(--green);}
    .pill-wait{background:var(--gold-tint); color:oklch(48% 0.11 70);}
    .stat .n{font-family:'Newsreader',serif; font-size:46px; color:var(--navy); line-height:1;}
    .stat .l{font-size:14.5px; color:var(--ink-soft); margin-top:8px;}
    .check li{list-style:none; position:relative; padding-left:26px; margin:9px 0; font-size:16px; line-height:1.55; color:var(--ink-soft);}
    .check{padding-left:0;}
    .check li:before{content:""; position:absolute; left:0; top:7px; width:12px; height:7px; border-left:2px solid var(--gold-dark); border-bottom:2px solid var(--gold-dark); transform:rotate(-45deg);}
    .crumb{font-size:13.5px; color:var(--ink-soft);}
    .crumb a{color:var(--ink-soft); text-decoration:underline; text-underline-offset:3px;}
    .subnav{border-bottom:1px solid var(--line); background:var(--bg);}
    .subnav .container{display:flex; gap:28px; height:52px; align-items:center; overflow-x:auto;}
    .subnav a{font-size:14px; font-weight:500; color:var(--ink-soft); white-space:nowrap; padding:15px 0; border-bottom:2px solid transparent;}
    .subnav a.on{color:var(--ink); border-bottom-color:var(--gold);}
    .field{display:flex; flex-direction:column; gap:6px;}
    .field label{font-size:13.5px; font-weight:600; color:var(--ink);}
    .field .help{font-size:12.5px; color:var(--ink-soft); line-height:1.5;}
    .input{height:44px; border:1px solid var(--line); border-radius:3px; background:#fff; padding:0 12px; font-size:14.5px; color:var(--ink-soft); display:flex; align-items:center;}
    .input.tall{height:96px; align-items:flex-start; padding-top:11px;}
    .cb{display:flex; gap:10px; align-items:flex-start; font-size:13.5px; line-height:1.5; color:var(--ink-soft);}
    .cb i{flex:none; width:16px; height:16px; border:1.5px solid var(--ink-soft); border-radius:2px; margin-top:2px;}
    .amt{flex:1; min-width:120px; border:1px solid var(--line); border-radius:3px; padding:14px; display:flex; flex-direction:column; gap:6px; background:#fff;}
    .amt b{font-size:19px; font-family:'Newsreader',serif; font-weight:600;}
    .amt.on{border-color:var(--navy); box-shadow:inset 0 0 0 1px var(--navy);}
    .seg{display:flex; border:1px solid var(--line); border-radius:3px; overflow:hidden;}
    .seg div{flex:1; text-align:center; padding:11px; font-size:14px; font-weight:600; color:var(--ink-soft);}
    .seg div.on{background:var(--navy); color:#fff;}
    details{border-bottom:1px solid var(--line); padding:18px 0;}
    details summary{cursor:pointer; font-size:17px; font-weight:600; color:var(--ink); list-style:none; display:flex; justify-content:space-between; gap:16px;}
    details summary:after{content:"+"; color:var(--gold-dark); font-size:22px; line-height:1;}
    details[open] summary:after{content:"\2212";}
    details p{margin-top:10px; font-size:15.5px; line-height:1.7; color:var(--ink-soft);}
    table.t{width:100%; border-collapse:collapse; font-size:15px;}
    table.t th{text-align:left; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); padding:12px 14px; border-bottom:1px solid var(--line); background:var(--bg-warm);}
    table.t td{padding:14px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--ink-soft); line-height:1.55;}
    table.t td:first-child{color:var(--ink); font-weight:500;}
    .num{width:34px; height:34px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:14px; flex:none;}
    .trust{display:flex; flex-wrap:wrap; gap:14px 36px; justify-content:center; align-items:center;}
    .trust div{display:flex; align-items:center; gap:10px; font-size:14.5px; font-weight:500; color:var(--ink);}
    .foot a{font-size:14px; color:oklch(88% 0.01 258);}
    .foot a:hover{color:#fff;}
    .foot .h{font-size:12.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:oklch(72% 0.02 258);}
    .wa{position:fixed; right:24px; bottom:24px; width:54px; height:54px; border-radius:50%; background:oklch(62% 0.15 150); display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,.18); z-index:5;}
    @media (max-width: 900px){
      .container{padding:0 16px;}
      .c3,.c4{grid-template-columns:repeat(2,minmax(0,1fr));}
      .split,.c2{grid-template-columns:1fr;}
      .h1{font-size:38px;} .h2{font-size:30px;}
      .navlinks{display:none !important;}
      .section{padding:56px 0;}
    }
    @media (max-width: 520px){ .c3,.c4{grid-template-columns:1fr;} }
/* ---------- WordPress additions ---------- */
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;}
.skip-link:focus{position:fixed;top:8px;left:8px;width:auto;height:auto;clip:auto;z-index:100;background:#fff;padding:10px 16px;}
main.site-main{overflow-x:clip;}
.photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
img{max-width:100%; height:auto;}
:focus-visible{outline:2px solid var(--gold-dark); outline-offset:2px;}

/* header + menu */
.site-header{border-bottom:1px solid var(--line); background:var(--bg); position:sticky; top:0; z-index:40;}
.admin-bar .site-header{top:32px;}
.site-header .bar{display:flex; align-items:center; justify-content:space-between; height:80px; gap:24px;}
.topbar{background:var(--navy-dark); color:oklch(85% 0.02 258); font-size:13px;}
.topbar a{color:oklch(85% 0.02 258);}
.topbar .container{display:flex; justify-content:space-between; height:38px; align-items:center; gap:16px;}
.brand{display:flex; align-items:center; gap:10px; color:var(--ink);}
.brand img{max-height:52px; width:auto;}
.brand span{font-family:'Newsreader',serif; font-size:21px; font-weight:600;}
.primary-menu{list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:28px;}
.primary-menu li{position:relative;}
.primary-menu > li > a{display:block; color:var(--ink); font-size:15px; font-weight:500; padding:28px 0; border-bottom:2px solid transparent;}
.primary-menu > li.current-menu-item > a,.primary-menu > li.current-menu-ancestor > a,.primary-menu > li.current-page-ancestor > a{font-weight:600; border-bottom-color:var(--gold);}
.primary-menu .sub-menu{list-style:none; margin:0; padding:10px 0; position:absolute; left:-18px; top:100%; min-width:250px; background:#fff; border:1px solid var(--line); border-radius:4px; box-shadow:0 14px 34px rgba(20,30,60,.1); display:none; z-index:50;}
.primary-menu li:hover > .sub-menu,.primary-menu li:focus-within > .sub-menu{display:block;}
.primary-menu .sub-menu a{display:block; padding:9px 18px; font-size:14.5px; color:var(--ink);}
.primary-menu .sub-menu a:hover,.primary-menu .sub-menu .current-menu-item > a{background:var(--bg-warm);}
.menu-toggle{display:none; background:none; border:1px solid var(--line); border-radius:3px; height:42px; padding:0 12px; font-weight:600; color:var(--ink); cursor:pointer;}
.header-actions{display:flex; align-items:center; gap:12px;}
@media (max-width: 1080px){
  .menu-toggle{display:inline-flex; align-items:center;}
  .primary-nav{display:none; position:absolute; left:0; right:0; top:100%; background:#fff; border-bottom:1px solid var(--line); box-shadow:0 14px 30px rgba(20,30,60,.08); max-height:calc(100vh - 120px); overflow:auto;}
  .primary-nav.open{display:block;}
  .primary-menu{flex-direction:column; align-items:stretch; gap:0; padding:8px 16px 16px;}
  .primary-menu > li > a{padding:12px 0; border-bottom:1px solid var(--line);}
  .primary-menu .sub-menu{display:block; position:static; box-shadow:none; border:0; padding:0 0 6px 14px; min-width:0;}
  .topbar .hide-sm{display:none;}
}
@media (max-width: 900px){ .footer-grid{grid-template-columns:1fr 1fr !important;} }
@media (max-width: 520px){ .footer-grid{grid-template-columns:1fr !important;} .site-header .btn-gold{padding:0 16px;} }

/* real form controls */
.jf-form{display:flex; flex-direction:column; gap:16px;}
.jf-form input[type=text],.jf-form input[type=email],.jf-form input[type=tel],.jf-form input[type=number],.jf-form select,.jf-form textarea{
  width:100%; height:44px; border:1px solid var(--line); border-radius:3px; background:#fff; padding:0 12px; font:inherit; font-size:15px; color:var(--ink);}
.jf-form textarea{height:110px; padding:10px 12px; resize:vertical;}
.jf-form input:focus,.jf-form select:focus,.jf-form textarea:focus{border-color:var(--navy); outline:none; box-shadow:0 0 0 3px oklch(24% 0.08 258 / .12);}
.jf-form input[type=file]{font-size:14px;}
.jf-form .cb input{margin-top:3px; width:16px; height:16px; accent-color:var(--navy); flex:none;}
.jf-form .req{color:oklch(50% 0.17 25);}
.jf-form button.btn{width:100%; font:inherit; font-weight:600;}
.jf-hp{position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden;}
.jf-notice{padding:14px 18px; border-radius:3px; font-size:14.5px; line-height:1.55;}
.jf-notice.ok{background:var(--green-tint); color:oklch(36% 0.09 150); border-left:4px solid var(--green);}
.jf-notice.err{background:oklch(95% 0.03 25); color:oklch(40% 0.14 25); border-left:4px solid oklch(55% 0.17 25);}
.jf-notice.info{background:var(--gold-tint); color:oklch(40% 0.1 70); border-left:4px solid var(--gold);}
.jf-amts{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;}
.jf-amts label{cursor:pointer;}
.jf-amts input{position:absolute; opacity:0;}
.jf-amts label:has(input:checked) .amt{border-color:var(--navy); box-shadow:inset 0 0 0 1px var(--navy);}
.seg label{flex:1; text-align:center; padding:11px; font-size:14px; font-weight:600; color:var(--ink-soft); cursor:pointer;}
.seg input{position:absolute; opacity:0;}
.seg label:has(input:checked){background:var(--navy); color:#fff;}

/* blog / posts */
.post-body{font-size:17px; line-height:1.75; color:var(--ink-soft);}
.post-body h2,.post-body h3{margin:1.6em 0 .5em; color:var(--ink);}
.post-body p{margin:0 0 1.1em;}
.post-body img{border-radius:4px;}
.post-card img{width:100%; height:220px; object-fit:cover; border-radius:4px;}
.pagination{display:flex; gap:10px; margin-top:40px;}
.pagination .page-numbers{padding:8px 14px; border:1px solid var(--line); border-radius:3px;}
.pagination .current{background:var(--navy); color:#fff; border-color:var(--navy);}
@media (max-width: 900px){
  main [style*="grid-template-columns"]:not(.grid){grid-template-columns:minmax(0,1fr) !important;}
  .jf-amts{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .amt{min-width:0;}
}
@media (max-width: 900px){ main .photo:not([style*="border-radius:0"]){max-height:280px;} }