/* Kids Pray Too play layer (2026-09-23).
   Brings the warmth of the Prayer Adventures booklet to the site: parchment
   paper, meadow greens, sky blues, wooden signs and chunky touchable buttons,
   plus the app's bottom tab bar, the + Prayer button and its share sheet.
   Loaded after every other sheet so it can lift the whole site at once. */

:root{
  --kpt-cream:#FFF8EC; --kpt-paper:#FFFDF7; --kpt-meadow:#EAF5E4; --kpt-sky:#E3F1FB;
  --kpt-sun:#FFF1D6; --kpt-leaf:#3F9142; --kpt-leaf-dark:#2E6B31; --kpt-wood:#9A6232;
  --kpt-wood-dark:#6E4321; --kpt-amber:#F59E0B; --kpt-navy:#032745; --kpt-blue:#0A4C8B;
  --kpt-paper-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .33 0 0 0 0 .18 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --kpt-leaf-dots:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%233F9142' fill-opacity='.07'%3E%3Cpath d='M20 30c8-10 22-10 26 0-8 8-20 8-26 0z'/%3E%3Cpath d='M80 90c8-10 22-10 26 0-8 8-20 8-26 0z'/%3E%3C/g%3E%3Cg fill='%23F59E0B' fill-opacity='.10'%3E%3Ccircle cx='95' cy='25' r='3'/%3E%3Ccircle cx='30' cy='95' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
}

/* Paper and colour bands in place of plain white */
body{background:var(--kpt-cream) var(--kpt-paper-grain);}
main > section{position:relative;}
main > section:not(.bg-white){background:transparent;}
main > section.bg-white{background:var(--kpt-meadow) var(--kpt-leaf-dots);border-color:#D6EBCF;}
main > section:nth-of-type(4n+3):not(.bg-white){background:var(--kpt-sky);}
main > section:first-of-type{background:linear-gradient(180deg,#D8ECFA 0%,#EEF6FC 55%,var(--kpt-cream) 100%);overflow:hidden;}
main > section:first-of-type::before,main > section:first-of-type::after{content:"";position:absolute;border-radius:50%;background:#fff;opacity:.75;pointer-events:none;}
main > section:first-of-type::before{width:180px;height:56px;top:28px;left:-40px;box-shadow:60px -18px 0 6px #fff,120px 4px 0 -4px #fff;}
main > section:first-of-type::after{width:140px;height:44px;top:70px;right:-30px;box-shadow:-50px -14px 0 4px #fff;}
main > section:first-of-type > .container{position:relative;z-index:1;}

/* Cards: paper cards with a coloured ribbon and a chunky edge */
.card{background:var(--kpt-paper);border:2px solid #F0E4CC;box-shadow:0 6px 0 rgba(154,98,50,.12),0 12px 24px -12px rgba(3,39,69,.18);border-radius:22px;}
.grid-3 > .card:nth-child(3n+1),.grid-2 > .card:nth-child(4n+1){border-top:6px solid var(--kpt-amber);}
.grid-3 > .card:nth-child(3n+2),.grid-2 > .card:nth-child(4n+2){border-top:6px solid var(--kpt-leaf);}
.grid-3 > .card:nth-child(3n+3),.grid-2 > .card:nth-child(4n+3){border-top:6px solid #3B9BD8;}
.grid-2 > .card:nth-child(4n+4){border-top:6px solid #B06AB3;}
.card:hover{transform:translateY(-4px) rotate(-.6deg);}
.card:active{transform:scale(.98);}

/* Headings: a hand-drawn amber squiggle under section titles */
main h2{position:relative;padding-bottom:.55rem;}
main h2::after{content:"";display:block;width:92px;height:10px;margin-top:.4rem;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 10'%3E%3Cpath d='M2 6c10-6 18 6 28 0s18-6 28 0 18 6 32-2' fill='none' stroke='%23F59E0B' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;}
main [style*="text-align: center"] > h2::after,main [style*="text-align:center"] > h2::after,.kpt-center h2::after{margin-left:auto;margin-right:auto;}

/* Buttons: chunky and squishy, the way kids expect things to feel */
.btn{box-shadow:0 5px 0 rgba(3,39,69,.25);border-radius:999px;}
.btn-secondary{box-shadow:0 5px 0 #B86E00;}
.btn-outline{background:var(--kpt-paper);box-shadow:0 5px 0 rgba(10,76,139,.35);}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(3,39,69,.25);}

/* Wooden sign eyebrow, the booklet's signature look */
.kpt-sign{display:inline-block;background:linear-gradient(180deg,#B7793F,var(--kpt-wood) 55%,var(--kpt-wood-dark));color:#FFF8EC;font-weight:800;letter-spacing:.02em;padding:.45rem 1.1rem;border-radius:12px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18),0 4px 0 rgba(110,67,33,.35);text-shadow:0 1px 0 rgba(0,0,0,.35);transform:rotate(-1.5deg);margin-bottom:1rem;}

/* Footer sits under a rolling green hill */
footer{position:relative;margin-top:60px;}
footer::before{content:"";position:absolute;left:0;right:0;top:-58px;height:60px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 40 C200 0 400 60 600 30 S1000 0 1200 35 V60 H0Z' fill='%233F9142'/%3E%3Cpath d='M0 50 C250 20 450 70 700 42 S1050 20 1200 48 V60 H0Z' fill='%23032745'/%3E%3C/svg%3E") no-repeat;background-size:100% 100%;}

/* Hamburger: three drawn bars that turn into an X when the menu is open */
.kpt-header .mobile-toggle{display:none;align-items:center;justify-content:center;font-size:0;background:var(--kpt-sun);border:2px solid #F3D9A4;border-radius:14px;min-width:46px;min-height:46px;padding:0;align-self:center;}
.kpt-burger{position:relative;display:block;width:22px;height:16px;}
.kpt-burger i{position:absolute;left:0;width:22px;height:3px;border-radius:3px;background:var(--kpt-navy);transition:transform .2s,opacity .2s,top .2s;}
.kpt-burger i:nth-child(1){top:0}.kpt-burger i:nth-child(2){top:6.5px}.kpt-burger i:nth-child(3){top:13px}
.mobile-toggle[aria-expanded="true"] .kpt-burger i:nth-child(1){top:6.5px;transform:rotate(45deg)}
.mobile-toggle[aria-expanded="true"] .kpt-burger i:nth-child(2){opacity:0}
.mobile-toggle[aria-expanded="true"] .kpt-burger i:nth-child(3){top:6.5px;transform:rotate(-45deg)}
@media (max-width:1024px){.kpt-header .mobile-toggle{display:inline-flex}}
.kpt-header .nav-container{align-items:center;min-height:64px;}
.kpt-header .nav-links{background:var(--kpt-paper);}

/* Streak and points chips in the header, as in the app */
.kpt-chips{display:flex;gap:.4rem;margin-left:auto;margin-right:.5rem;align-items:center;}
.kpt-chip{display:inline-flex;align-items:center;gap:.25rem;padding:.3rem .6rem;border-radius:999px;font-weight:800;font-size:.85rem;color:var(--kpt-navy);text-decoration:none;}
.kpt-chip.flame{background:#FFEBD0;border:2px solid #F7C98A;}
.kpt-chip.star{background:#E5F4E1;border:2px solid #B8DDB0;}
@media (min-width:1025px){.kpt-chips{order:3;margin-right:0;margin-left:1rem}}

/* Floating bottom tab bar on phones and tablets */
.kpt-tabbar{position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));z-index:120;display:none;justify-content:space-around;background:var(--kpt-paper);border:2px solid #F0E4CC;border-radius:24px;box-shadow:0 8px 0 rgba(154,98,50,.15),0 16px 30px -10px rgba(3,39,69,.35);padding:.35rem .25rem;}
.kpt-tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:.35rem .1rem;border-radius:16px;color:#34506A;font-size:.72rem;font-weight:700;text-decoration:none;min-height:48px;}
.kpt-tabbar a svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.kpt-tabbar a[aria-current="page"]{background:var(--kpt-sun);color:var(--kpt-navy);}
.kpt-tabbar a:active{transform:scale(.92);}
@media (max-width:1024px){.kpt-tabbar{display:flex}body{padding-bottom:96px}}

/* + Prayer button and the share sheet */
.kpt-fab{position:fixed;right:18px;bottom:104px;z-index:121;display:inline-flex;align-items:center;gap:.4rem;background:var(--kpt-amber);color:var(--kpt-navy);border:0;border-radius:999px;padding:.85rem 1.25rem;font:800 1rem var(--font-body,"Plus Jakarta Sans",sans-serif);box-shadow:0 5px 0 #B86E00,0 14px 24px -8px rgba(3,39,69,.4);cursor:pointer;animation:kptBob 3s ease-in-out infinite;}
.kpt-fab:active{transform:translateY(4px);box-shadow:0 1px 0 #B86E00;}
@media (min-width:1025px){.kpt-fab{bottom:28px;right:28px}}
@keyframes kptBob{0%,100%{translate:0 0}50%{translate:0 -4px}}
.kpt-sheet-back{position:fixed;inset:0;background:rgba(3,39,69,.45);z-index:200;opacity:0;pointer-events:none;transition:opacity .2s;}
.kpt-sheet{position:fixed;left:0;right:0;bottom:0;z-index:201;max-height:92vh;overflow:auto;background:var(--kpt-paper);border-radius:22px 22px 0 0;padding:.75rem 1.25rem 1.5rem;transform:translateY(100%);transition:transform .25s ease,visibility .25s;max-width:640px;margin:0 auto;visibility:hidden;}
.kpt-sheet.open{transform:none;visibility:visible}.kpt-sheet-back.open{opacity:1;pointer-events:auto}
.kpt-sheet .grab{width:48px;height:5px;border-radius:5px;background:#E2D6BE;margin:0 auto 1rem;}
.kpt-sheet h2{margin-bottom:.25rem}.kpt-sheet h2::after{display:none}
.kpt-sheet .sub{color:#4A5F70;font-size:.95rem;margin-bottom:1rem;}
.kpt-pills{display:flex;flex-wrap:wrap;gap:.5rem;margin:.35rem 0 1rem;}
.kpt-pill{border:2px solid #CFE0EE;background:#fff;color:var(--kpt-blue);border-radius:999px;padding:.45rem .95rem;font-weight:700;cursor:pointer;min-height:40px;}
.kpt-pill[aria-pressed="true"]{background:var(--kpt-blue);border-color:var(--kpt-blue);color:#fff;}
.kpt-sheet label{font-size:.92rem}
.kpt-sheet .hint{font-size:.82rem;color:#4A5F70;margin:-.6rem 0 1rem}
.kpt-consent{display:flex;gap:.6rem;align-items:flex-start;background:var(--kpt-meadow);border-radius:14px;padding:.8rem;margin-bottom:1rem;font-size:.92rem;color:var(--kpt-navy);}
.kpt-consent input{width:22px;height:22px;flex:0 0 auto;margin-top:2px}
.kpt-sheet .gate{font-size:.88rem;color:#4A5F70;text-align:center;margin-top:.6rem}

/* Prayer Buddy's speech bubble */
#hero-art{position:relative;cursor:pointer;}
.kpt-bubble{position:absolute;top:4%;left:50%;transform:translateX(12%);max-width:200px;background:#fff;border:3px solid var(--kpt-navy);border-radius:18px;padding:.55rem .8rem;font-weight:800;font-size:.92rem;color:var(--kpt-navy);box-shadow:0 5px 0 rgba(3,39,69,.2);z-index:2;}
.kpt-bubble::after{content:"";position:absolute;left:18px;bottom:-12px;border:9px solid transparent;border-top-color:var(--kpt-navy);border-bottom:0;}
.kpt-bubble.pop{animation:kptPop .35s ease}
@keyframes kptPop{0%{transform:translateX(12%) scale(.6)}70%{transform:translateX(12%) scale(1.08)}100%{transform:translateX(12%) scale(1)}}

/* Brave Prayers trail */
.kpt-trail{position:relative;max-width:760px;margin:1.5rem auto 0;}
.kpt-stones{position:relative;display:grid;grid-template-columns:repeat(7,1fr);gap:.4rem;align-items:center;min-height:150px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 150' preserveAspectRatio='none'%3E%3Cpath d='M20 45 C80 45 80 105 150 105 S220 45 250 45 320 105 350 105 420 45 450 45 520 105 550 105 620 45 680 45' fill='none' stroke='%23C9B58F' stroke-width='6' stroke-dasharray='2 14' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;}
.kpt-stone{justify-self:center;display:flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--kpt-navy);font-weight:800;font-size:.78rem;gap:.3rem;}
.kpt-stone b{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#E9E1D0;border:3px solid #D5C7AA;font-size:1.2rem;color:#6E5F44;box-shadow:0 5px 0 rgba(110,67,33,.18);}
.kpt-stone:nth-child(even){margin-top:56px}
.kpt-stone.done b{background:var(--kpt-amber);border-color:#C47A00;color:var(--kpt-navy);}
.kpt-stone.next b{background:#fff;border-color:var(--kpt-leaf);color:var(--kpt-leaf-dark);animation:kptBob 2s ease-in-out infinite;}
.kpt-trail-count{text-align:center;font-weight:800;color:var(--kpt-navy);margin-top:1rem}
@media (max-width:560px){.kpt-stone b{width:40px;height:40px;font-size:1rem}.kpt-stone:nth-child(even){margin-top:44px}}

/* Badge shelf */
.kpt-shelf{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin:1.5rem auto 1.5rem;padding:1.25rem 1rem 1.75rem;border-bottom:14px solid var(--kpt-wood);border-radius:0 0 8px 8px;box-shadow:0 6px 0 var(--kpt-wood-dark);max-width:640px;}
.kpt-medal{display:flex;flex-direction:column;align-items:center;gap:.35rem;width:96px;text-align:center;font-size:.78rem;font-weight:800;color:var(--kpt-navy);text-decoration:none;}
.kpt-medal b{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;font-size:1.6rem;color:#fff;border:4px solid #fff;box-shadow:0 5px 0 rgba(3,39,69,.2);}
.kpt-medal.locked b{background:#CFC5B2 !important;color:#4E4330;}
.kpt-medal.locked span::after{content:" 🔒";}

/* This month's booklet */
.kpt-booklet{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:1.5rem;align-items:center;}
.kpt-booklet > *{min-width:0;}
.kpt-booklet .cover img{width:100%;height:auto;border-radius:10px;box-shadow:0 8px 0 rgba(154,98,50,.2),0 20px 40px -18px rgba(3,39,69,.45);transform:rotate(-2deg);}
.kpt-pages{display:flex;gap:.9rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.5rem .25rem 1rem;}
.kpt-pages button{flex:0 0 150px;scroll-snap-align:start;border:0;background:none;padding:0;cursor:zoom-in;}
.kpt-pages img{width:150px;height:auto;border-radius:8px;box-shadow:0 5px 0 rgba(154,98,50,.18);}
.kpt-pages button:nth-child(odd) img{transform:rotate(1.2deg)}.kpt-pages button:nth-child(even) img{transform:rotate(-1.2deg)}
@media (max-width:760px){.kpt-booklet{grid-template-columns:minmax(0,1fr)}.kpt-booklet .cover{max-width:260px;margin:0 auto}}
.kpt-lightbox{position:fixed;inset:0;z-index:300;background:rgba(3,39,69,.8);display:none;align-items:center;justify-content:center;padding:1rem;}
.kpt-lightbox.open{display:flex}
.kpt-lightbox img{max-width:100%;max-height:88vh;border-radius:8px;background:#fff;}
.kpt-lightbox button{position:absolute;top:14px;right:14px;min-width:48px;min-height:48px;border-radius:50%;border:0;background:#fff;font-size:1.4rem;font-weight:800;cursor:pointer;}

/* Confetti for finishing the trail */
.kpt-confetti{position:fixed;inset:0;pointer-events:none;z-index:400;overflow:hidden}
.kpt-confetti i{position:absolute;top:-12px;width:10px;height:14px;border-radius:2px;animation:kptFall 1.6s ease-in forwards;}
@keyframes kptFall{to{transform:translateY(105vh) rotate(540deg);opacity:.8}}

@media (prefers-reduced-motion:reduce){.kpt-fab,.kpt-stone.next b{animation:none}.card:hover{transform:none}.kpt-confetti{display:none}}

/* Tall photos crop to a friendly height so a phone screen shows the words around them. */
.kpt-photo{max-height:440px;object-fit:cover;}