/*
Theme Name: Milton Keynes Vihara – Temple Campaign
Theme URI: https://mkvihara.org
Author: Milton Keynes Vihara
Author URI: https://mkvihara.org
Description: A dedicated fundraising campaign theme for Milton Keynes Vihara to collect pledges toward buying a new Buddhist temple. Includes a custom Pledges admin area, live progress bar, public supporter list, and automatic email notifications — no online payment processing.
Version: 1.0.0
Requires at least: 5.9
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mkv-campaign
*/

  :root{
    --ivory:#FBF6EC;
    --ivory-deep:#F3EBD9;
    --ink:#2A2118;
    --ink-soft:#5B5045;
    --saffron:#C6862B;
    --saffron-deep:#9C6B1F;
    --saffron-light:#E9C077;
    --maroon:#7A2B2B;
    --maroon-deep:#5E1F1F;
    --teal:#3F5B52;
    --line:#E4D9C3;
    --card:#FFFDF7;
    --white:#FFFFFF;
    --shadow: 0 12px 32px -12px rgba(42,33,24,0.18);
    --radius: 18px;
    --maxw: 1180px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
  }
  body{
    margin:0;
    background:var(--ivory);
    color:var(--ink);
    font-family:'Work Sans', system-ui, sans-serif;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{
    font-family:'Fraunces', Georgia, serif;
    font-weight:600;
    line-height:1.12;
    margin:0;
    color:var(--maroon-deep);
    letter-spacing:-0.01em;
  }
  p{margin:0;}
  a{color:inherit;}
  img,svg{display:block; max-width:100%;}
  button{font-family:inherit;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px;}
  .eyebrow{
    font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--saffron-deep); font-weight:600; margin-bottom:10px; display:inline-block;
  }
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    border-radius:999px; padding:15px 28px; font-size:16px; font-weight:600;
    border:none; cursor:pointer; text-decoration:none; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
    min-height:48px;
  }
  .btn:active{transform:scale(0.98);}
  .btn:focus-visible{outline:3px solid var(--teal); outline-offset:2px;}
  .btn-primary{background:linear-gradient(135deg, var(--saffron) 0%, var(--saffron-deep) 100%); color:#fff; box-shadow:0 10px 24px -8px rgba(156,107,31,0.55);}
  .btn-primary:hover{box-shadow:0 14px 30px -8px rgba(156,107,31,0.65);}
  .btn-outline{background:transparent; color:var(--maroon-deep); border:1.5px solid var(--maroon-deep);}
  .btn-outline:hover{background:var(--maroon-deep); color:#fff;}
  .btn-ghost{background:var(--ivory-deep); color:var(--ink); border:1px solid var(--line);}
  .btn:disabled{opacity:.6; cursor:not-allowed;}

  /* ---------- NAV ---------- */
  header.site{
    position:sticky; top:0; z-index:40; background:rgba(251,246,236,0.92); backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  .nav{display:flex; align-items:center; justify-content:space-between; padding:14px 20px; gap:12px;}
  .brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
  .brand-mark{width:38px; height:38px; flex-shrink:0;}
  .brand-text{line-height:1.2;}
  .brand-text .name{font-family:'Fraunces',serif; font-weight:600; font-size:15.5px; color:var(--maroon-deep);}
  .brand-text .tag{font-size:11px; color:var(--ink-soft); letter-spacing:.04em;}
  .nav-links{display:none; align-items:center; gap:22px; font-size:14.5px; font-weight:500;}
  .nav-links a{text-decoration:none; color:var(--ink-soft);}
  .nav-links a.site-link{color:var(--saffron-deep); font-weight:600;}
  @media (min-width:760px){ .nav-links{display:flex;} }
  .nav .btn{padding:10px 18px; font-size:14px; min-height:auto;}

  /* ---------- HERO ---------- */
  .hero{position:relative; overflow:hidden; padding:64px 0 72px;}
  .hero-bg{position:absolute; inset:0; z-index:0;}
  .hero .wrap{position:relative; z-index:1; display:flex; justify-content:center;}
  .hero-copy{max-width:700px; text-align:center;}
  .hero h1{font-size:clamp(30px,7vw,56px); margin-bottom:18px;}
  .hero-sub{font-size:clamp(16px,3vw,19px); color:var(--ink-soft); max-width:560px; margin:0 auto 28px;}
  .hero-ctas{display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:center;}
  .hero-note{font-size:13.5px; color:var(--ink-soft); margin-top:14px;}

  /* ---------- SECTION shell ---------- */
  section{padding:56px 0;}
  .section-head{max-width:680px; margin:0 auto 36px; text-align:center;}
  .section-head h2{font-size:clamp(26px,4.4vw,38px);}
  .section-head p{color:var(--ink-soft); font-size:16.5px; margin-top:12px;}
  .divider-motif{display:flex; align-items:center; justify-content:center; gap:14px; margin:0 auto 18px; width:fit-content;}
  .divider-motif .line{width:44px; height:1px; background:var(--line);}

  /* ---------- GOAL / PROGRESS ---------- */
  .goal-section{background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .goal-card{
    background:var(--card); border:1px solid var(--line); border-radius:24px; padding:30px 22px 34px;
    box-shadow:var(--shadow); max-width:880px; margin:0 auto;
  }
  .goal-top{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:18px;}
  .goal-figure{font-family:'Fraunces',serif; font-size:clamp(30px,7vw,44px); font-weight:700; color:var(--maroon-deep);}
  .goal-target{font-size:14px; color:var(--ink-soft);}
  .progress-track{
    position:relative; height:22px; border-radius:999px; background:var(--ivory-deep);
    border:1px solid var(--line); overflow:hidden; margin-bottom:8px;
  }
  .progress-fill{
    position:absolute; inset:0; width:0%; border-radius:999px;
    background:linear-gradient(90deg, var(--saffron-light), var(--saffron) 55%, var(--saffron-deep));
    transition:width 1.4s cubic-bezier(.22,.9,.3,1);
  }
  .progress-fill::after{
    content:""; position:absolute; right:-1px; top:-4px; bottom:-4px; width:14px;
    background:radial-gradient(circle, rgba(255,255,255,.85), transparent 70%);
  }
  .progress-pct{display:flex; justify-content:space-between; font-size:13px; color:var(--ink-soft); margin-bottom:22px;}
  .stat-row{display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
  @media (min-width:640px){ .stat-row{grid-template-columns:repeat(4,1fr);} }
  .stat{background:var(--ivory); border:1px solid var(--line); border-radius:14px; padding:14px 10px; text-align:center;}
  .stat .num{font-family:'Fraunces',serif; font-size:clamp(18px,3.4vw,24px); font-weight:700; color:var(--maroon-deep); display:block;}
  .stat .lbl{font-size:12px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em; margin-top:2px; display:block;}

  /* ---------- WHY ---------- */
  .why-grid{display:grid; gap:18px; grid-template-columns:1fr;}
  @media (min-width:680px){ .why-grid{grid-template-columns:repeat(2,1fr);} }
  @media (min-width:1000px){ .why-grid{grid-template-columns:repeat(3,1fr);} }
  .why-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px; display:flex; gap:14px; align-items:flex-start;}
  .why-icon{width:42px; height:42px; flex-shrink:0; border-radius:12px; background:var(--ivory-deep); display:flex; align-items:center; justify-content:center;}
  .why-card h3{font-size:16.5px; margin-bottom:6px;}
  .why-card p{font-size:14.5px; color:var(--ink-soft);}

  /* ---------- STEPS ---------- */
  .steps{background:var(--maroon-deep); color:#F6E9CF;}
  .steps .section-head h2{color:#fff;}
  .steps .section-head p{color:#E9D3B6;}
  .steps-grid{display:grid; gap:22px; grid-template-columns:1fr;}
  @media (min-width:760px){ .steps-grid{grid-template-columns:repeat(3,1fr);} }
  .step{position:relative; padding:26px 20px; border:1px solid rgba(246,233,207,0.25); border-radius:var(--radius); background:rgba(255,255,255,0.04);}
  .step .step-num{font-family:'Fraunces',serif; font-size:34px; color:var(--saffron-light); font-weight:700; margin-bottom:8px;}
  .step h3{color:#fff; font-size:17px; margin-bottom:8px;}
  .step p{color:#E9D3B6; font-size:14.5px;}
  .steps-note{margin-top:26px; text-align:center; font-size:14px; color:#F6E9CF; font-weight:600;}

  /* ---------- DONATE ---------- */
  .donate-panel{
    background:var(--card); border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow);
    max-width:760px; margin:0 auto; padding:28px 20px 32px; position:relative;
  }
  @media (min-width:640px){ .donate-panel{padding:38px 44px 44px;} }
  .panel-step{display:none;}
  .panel-step.active{display:block; animation:fadein .35s ease;}
  @keyframes fadein{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}
  .amount-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:20px 0 8px;}
  @media (min-width:520px){ .amount-grid{grid-template-columns:repeat(4,1fr);} }
  .amount-btn{
    border:1.5px solid var(--line); background:var(--ivory); border-radius:14px; padding:16px 8px;
    font-size:16px; font-weight:600; color:var(--ink); cursor:pointer; min-height:52px;
    transition:border-color .15s, background .15s, color .15s;
  }
  .amount-btn:hover{border-color:var(--saffron);}
  .amount-btn.selected{background:var(--saffron); border-color:var(--saffron-deep); color:#fff;}
  .amount-btn.custom-btn{grid-column:span 2;}
  @media (min-width:520px){ .amount-btn.custom-btn{grid-column:span 4;} }
  .custom-wrap{display:none; margin:14px 0 4px;}
  .custom-wrap.show{display:block;}
  .field{margin-bottom:18px;}
  .field label{display:block; font-size:13.5px; font-weight:600; margin-bottom:7px; color:var(--ink);}
  .field .hint{font-weight:400; color:var(--ink-soft); font-size:12.5px;}
  .field input, .field textarea{
    width:100%; border:1.5px solid var(--line); border-radius:12px; padding:13px 14px; font-size:15.5px;
    font-family:inherit; background:var(--white); color:var(--ink);
  }
  .field input:focus, .field textarea:focus{outline:none; border-color:var(--saffron-deep); box-shadow:0 0 0 3px rgba(198,134,43,0.18);}
  .field.error input, .field.error textarea{border-color:var(--maroon);}
  .err-msg{display:none; color:var(--maroon); font-size:12.5px; margin-top:6px; font-weight:600;}
  .field.error .err-msg{display:block;}
  .amount-prefix{position:relative;}
  .amount-prefix span{position:absolute; left:14px; top:50%; transform:translateY(-50%); font-weight:600; color:var(--ink-soft);}
  .amount-prefix input{padding-left:28px;}
  .visibility-choice{display:grid; gap:10px; margin:10px 0 6px;}
  .radio-card{
    display:flex; gap:12px; align-items:flex-start; border:1.5px solid var(--line); border-radius:14px; padding:14px;
    cursor:pointer; background:var(--ivory);
  }
  .radio-card input{margin-top:3px; width:18px; height:18px; accent-color:var(--saffron-deep); flex-shrink:0;}
  .radio-card .rt{font-weight:600; font-size:14.5px;}
  .radio-card .rd{font-size:13px; color:var(--ink-soft); margin-top:2px;}
  .radio-card:has(input:checked){border-color:var(--saffron-deep); background:#FBF0DA;}
  .privacy-note{background:var(--ivory-deep); border:1px solid var(--line); border-radius:12px; padding:14px 16px; font-size:12.8px; color:var(--ink-soft); margin:18px 0;}
  .panel-nav{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:26px;}
  .selected-summary{background:var(--ivory-deep); border-radius:14px; padding:14px 16px; display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; font-size:14.5px;}
  .selected-summary strong{font-family:'Fraunces',serif; font-size:19px; color:var(--maroon-deep);}
  .no-payment-note{text-align:center; font-size:12.8px; color:var(--ink-soft); margin-top:14px; max-width:420px; margin-left:auto; margin-right:auto;}

  /* ---------- SUCCESS MODAL ---------- */
  .modal-overlay{
    position:fixed; inset:0; background:rgba(42,33,24,0.55); display:none; align-items:center; justify-content:center;
    z-index:100; padding:20px;
  }
  .modal-overlay.show{display:flex;}
  .modal-card{
    background:var(--card); border-radius:22px; max-width:440px; width:100%; padding:34px 26px; text-align:center;
    box-shadow:0 30px 60px -20px rgba(0,0,0,0.4); animation:popin .3s ease;
  }
  @keyframes popin{from{opacity:0; transform:scale(.94);} to{opacity:1; transform:scale(1);}}
  .modal-icon{width:64px; height:64px; margin:0 auto 16px;}
  .modal-card h3{font-size:23px; margin-bottom:10px;}
  .modal-card p{color:var(--ink-soft); font-size:14.5px; margin-bottom:20px;}
  .modal-detail{background:var(--ivory-deep); border-radius:14px; padding:16px; display:grid; gap:10px; text-align:left; margin-bottom:22px;}
  .modal-detail .row{display:flex; justify-content:space-between; font-size:14px;}
  .modal-detail .row strong{color:var(--maroon-deep); font-family:'Fraunces',serif; font-size:16px;}

  /* ---------- SUPPORTERS ---------- */
  .supporters-grid{display:grid; gap:12px; grid-template-columns:1fr; max-width:820px; margin:0 auto;}
  @media (min-width:640px){ .supporters-grid{grid-template-columns:repeat(2,1fr);} }
  .supporter{
    display:flex; justify-content:space-between; align-items:center; background:var(--card); border:1px solid var(--line);
    border-radius:14px; padding:15px 18px;
  }
  .supporter .sname{font-weight:600; font-size:14.5px;}
  .supporter .samt{font-family:'Fraunces',serif; color:var(--saffron-deep); font-weight:700; font-size:15px;}
  .supporters-empty{text-align:center; color:var(--ink-soft); font-size:14.5px; padding:20px;}
  .supporters-more{text-align:center; margin-top:20px; font-size:13.5px; color:var(--ink-soft);}

  /* ---------- PRIVACY BAND ---------- */
  .privacy-band{background:var(--ivory-deep); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .privacy-band .inner{display:flex; gap:18px; align-items:flex-start; max-width:760px; margin:0 auto;}
  .privacy-band .picon{width:34px; height:34px; flex-shrink:0;}
  .privacy-band h3{font-size:18px; margin-bottom:8px;}
  .privacy-band p{font-size:14.5px; color:var(--ink-soft);}
  .privacy-links{margin-top:12px; display:flex; flex-wrap:wrap; gap:14px; font-size:13px;}
  .privacy-links a{text-decoration:underline; color:var(--maroon-deep);}

  /* ---------- FOOTER ---------- */
  footer.site{background:var(--maroon-deep); color:#F6E9CF; padding:44px 0 100px;}
  @media (min-width:760px){ footer.site{padding:44px 0 40px;} }
  .footer-grid{display:grid; gap:28px; grid-template-columns:1fr;}
  @media (min-width:700px){ .footer-grid{grid-template-columns:1.3fr 1fr 1fr;} }
  .footer-brand{display:flex; gap:10px; align-items:center; margin-bottom:10px;}
  .footer-brand .name{font-family:'Fraunces',serif; font-weight:600; font-size:17px; color:#fff;}
  footer.site p{color:#E9D3B6; font-size:13.5px;}
  footer.site h4{font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:#F6E9CF; margin-bottom:12px;}
  footer.site ul{list-style:none; padding:0; margin:0; display:grid; gap:9px;}
  footer.site a{text-decoration:none; color:#E9D3B6; font-size:14px;}
  footer.site a:hover{color:#fff;}
  .footer-bottom{border-top:1px solid rgba(246,233,207,0.2); margin-top:30px; padding-top:20px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; font-size:12.5px; color:#C9A97C;}
  .admin-link{background:none; border:none; color:#C9A97C; font-size:12.5px; text-decoration:underline; cursor:pointer; padding:0; font-family:inherit;}

  /* ---------- FLOATING MOBILE CTA ---------- */
  .float-cta{
    position:fixed; left:12px; right:12px; bottom:14px; z-index:50; display:flex;
  }
  .float-cta .btn{flex:1; font-size:15.5px;}
  @media (min-width:760px){ .float-cta{display:none;} }

  .disclosure{background:var(--ivory-deep); border:1px dashed var(--line); border-radius:12px; padding:12px 14px; font-size:12.5px; color:var(--ink-soft); margin-bottom:18px;}
  .visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
  .skip-link{position:absolute; left:-999px; top:0; background:var(--maroon-deep); color:#fff; padding:10px 16px; z-index:999;}
  .skip-link:focus{left:10px; top:10px;}