/* =============================================================
   Arise Youth Hub – playful styles for church/youth
   ============================================================= */
:root{--yh-purple:#6A45FF;--yh-pink:#FF3F64;--yh-orange:#FF8C24;--yh-yellow:#FFCD45;--yh-mint:#00E38A;--yh-navy:#090F32}

/* hero */
.yh-hero{padding:210px 0 120px;overflow:hidden;background:linear-gradient(135deg,#1a1152 0%,#4a2fd6 45%,#ff5a7a 100%);color:#fff}
.yh-blob{position:absolute;border-radius:50%;filter:blur(40px);opacity:.55;pointer-events:none;z-index:0}
.yh-hero>.container{z-index:1}
.yh-blob.b1{width:520px;height:520px;background:var(--yh-orange);top:-160px;right:-120px}
.yh-blob.b2{width:360px;height:360px;background:var(--yh-mint);bottom:-160px;left:-80px;opacity:.35}
.yh-blob.b3{width:260px;height:260px;background:var(--yh-yellow);top:40%;left:38%;opacity:.3}
.yh-kicker{display:inline-flex;align-items:center;gap:10px;font-size:13px;letter-spacing:3px;text-transform:uppercase;font-weight:500;background:rgba(255,255,255,.14);padding:8px 16px;border-radius:20px;margin-bottom:22px}
.yh-kicker .dot{width:8px;height:8px;border-radius:50%;background:var(--yh-yellow);box-shadow:0 0 0 4px rgba(255,205,69,.3)}
.yh-title{font-family:Recoleta;font-size:78px;line-height:1.02em;color:#fff;margin:0}
.yh-lead{font-size:19px;line-height:1.8em;color:rgba(255,255,255,.85);margin-top:24px;max-width:520px}
.yh-btn{display:inline-flex;align-items:center;background:var(--yh-yellow);color:#000;font-weight:500;line-height:52px;padding:0 28px;border-radius:26px;border:2px solid var(--yh-yellow);transition:.25s;font-size:16px}
.yh-btn:hover{background:#fff;border-color:#fff;color:#000;transform:translateY(-2px)}
.yh-btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.yh-btn.ghost:hover{background:#fff;color:var(--yh-navy)}
.yh-btn.ghost.dark{color:var(--yh-navy);border-color:var(--yh-navy)}
.yh-btn.ghost.dark:hover{background:var(--yh-navy);color:#fff}
.yh-socials a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:18px;margin-right:8px;transition:.25s}
.yh-socials a:hover{background:#fff;color:var(--yh-purple)}
.yh-stack{position:relative;height:520px;margin-top:20px}
.yh-stack [class^="card-"]{position:absolute;border-radius:24px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.35);border:6px solid #fff;transition:.4s}
.yh-stack [class^="card-"] img{width:100%;height:100%;object-fit:cover;display:block}
.yh-stack .card-0{width:62%;height:78%;left:8%;top:6%;transform:rotate(-5deg);z-index:2}
.yh-stack .card-1{width:48%;height:58%;right:0;top:0;transform:rotate(7deg);z-index:1}
.yh-stack .card-2{width:46%;height:52%;right:6%;bottom:0;transform:rotate(-3deg);z-index:3}
.yh-stack:hover .card-0{transform:rotate(-2deg) scale(1.02)}
.yh-stack .sticker{position:absolute;background:#fff;color:var(--yh-navy);font-weight:500;font-size:14px;padding:8px 16px;border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.25);z-index:5;white-space:nowrap}
.yh-stack .s1{left:-10px;top:14%;transform:rotate(-8deg);background:var(--yh-yellow)}
.yh-stack .s2{right:-6px;top:52%;transform:rotate(6deg);background:var(--yh-mint)}
.yh-stack .s3{left:18%;bottom:2%;transform:rotate(-4deg)}
@media (max-width:991px){.yh-hero{padding:150px 0 70px}.yh-title{font-size:52px}.yh-stack{height:380px;margin-top:50px}}
@media (max-width:575px){.yh-title{font-size:42px}.yh-stack{height:300px}.yh-stack .sticker{font-size:12px;padding:6px 12px}}

/* marquee */
.yh-marquee{background:var(--yh-navy);color:#fff;overflow:hidden;padding:16px 0;white-space:nowrap}
.yh-marquee .track{display:inline-flex;animation:yh-scroll 28s linear infinite}
.yh-marquee span{font-family:Recoleta;font-size:22px;padding:0 28px;position:relative}
.yh-marquee span:after{content:'✦';position:absolute;right:-8px;color:var(--yh-yellow);font-size:14px;top:6px}
@keyframes yh-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* sections */
.yh-section{padding:110px 0}
.yh-section.pt-0{padding-top:0}
.yh-label{font-family:'Noteworthy Light';font-size:17px;letter-spacing:3px;text-transform:uppercase;color:var(--yh-purple);margin-bottom:8px}
.yh-h2{font-family:Recoleta;font-size:46px;line-height:1.15em;color:var(--yh-navy)}
.yh-chips{display:flex;flex-wrap:wrap;gap:10px}
.yh-chips span{background:#fff;border-radius:20px;padding:8px 16px;font-size:14px;font-weight:500;color:var(--yh-navy);box-shadow:0 8px 20px rgba(9,15,50,.06)}
.yh-chips i{color:var(--yh-pink);margin-right:6px}
.yh-leader{display:flex;align-items:center;gap:20px;background:#fff;border-radius:24px;padding:22px 26px;margin-bottom:20px;box-shadow:0 20px 50px rgba(9,15,50,.06)}
.yh-leader img,.yh-leader .initials{width:84px;height:84px;border-radius:50%;object-fit:cover;flex:none;border:4px solid var(--yh-yellow)}
.yh-leader .initials{background:var(--yh-purple);color:#fff;display:flex;align-items:center;justify-content:center;font-family:Recoleta;font-size:34px}
.yh-verse{background:linear-gradient(135deg,var(--yh-purple),var(--yh-pink));color:#fff;border-radius:24px;padding:34px 34px 30px}
.yh-verse p{font-family:Recoleta;font-size:22px;line-height:1.5em;margin:6px 0 12px}
.yh-verse .ref{font-weight:500;color:var(--yh-yellow)}

/* tickets */
.yh-ticket{display:flex;gap:16px;background:#fff;border-radius:20px;padding:18px;height:100%;color:var(--yh-navy);transition:.25s;border:2px dashed transparent}
.yh-ticket:hover{border-color:var(--yh-purple);transform:translateY(-4px)}
.yh-ticket .date{width:64px;flex:none;border-radius:14px;background:var(--yh-purple);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}
.yh-ticket .date b{font-size:26px;line-height:1}.yh-ticket .date span{font-size:11px;text-transform:uppercase;letter-spacing:1px;opacity:.85}
.yh-ticket h5{font-size:17px;margin:0 0 6px}
.yh-ticket .info span{display:block;font-size:13px;color:#777}
.yh-ticket .info i{color:var(--yh-pink)}

/* the wall */
.yh-wall-section{background:#fff6ec url(../images/assets/bg-6.png)}
.yh-filter{display:flex;flex-wrap:wrap;gap:8px;flex:none;align-items:center}
.yh-filter button{border:2px solid #e9e1d8;background:#fff;border-radius:20px;padding:0 18px;line-height:38px;font-weight:500;color:var(--yh-navy);margin:0;white-space:nowrap;transition:.2s}
.yh-filter button.is-active,.yh-filter button:hover{background:var(--yh-navy);border-color:var(--yh-navy);color:#fff}
.yh-wall{columns:3 260px;column-gap:18px}
.yh-card{display:block;position:relative;break-inside:avoid;margin-bottom:18px;border-radius:18px;overflow:hidden;background:#fff;padding:10px 10px 0;box-shadow:0 14px 30px rgba(9,15,50,.08);transform:rotate(var(--rot,0));transition:.3s}
.yh-card:hover{transform:rotate(0) scale(1.03);z-index:2;box-shadow:0 30px 60px rgba(9,15,50,.15)}
.yh-card img{width:100%;display:block;border-radius:12px}
.yh-card.video img{aspect-ratio:16/9;object-fit:cover}
.yh-card .play{position:absolute;top:calc(50% - 30px);left:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:var(--yh-yellow);color:#000;font-size:32px;display:flex;align-items:center;justify-content:center;padding-left:3px}
.yh-card .meta{display:flex;flex-direction:column;padding:12px 6px 14px;color:var(--yh-navy)}
.yh-card .meta b{font-weight:500;font-size:15px}.yh-card .meta small{color:#888;font-size:12px}

/* share */
.yh-share{background:var(--yh-navy);border-radius:36px;padding:60px;position:relative;overflow:hidden}
.yh-share:before{content:'';position:absolute;width:420px;height:420px;border-radius:50%;background:var(--yh-purple);opacity:.5;left:-160px;bottom:-220px;filter:blur(20px)}
.yh-share>.row{position:relative;z-index:1}
.yh-rules{list-style:none;padding:0;margin:20px 0 0}
.yh-rules li{color:rgba(255,255,255,.85);margin-bottom:8px}
.yh-rules i{color:var(--yh-mint);margin-right:8px}
.yh-share-card{background:#fff;border-radius:24px;padding:32px}
.yh-flabel{display:block;font-size:13px;font-weight:500;color:var(--yh-navy);margin-bottom:6px;letter-spacing:.5px}
.yh-input{width:100%;height:52px;border:2px solid #ece6df;border-radius:14px;padding:0 16px;background:#fff;margin:0 0 18px}
.yh-quiz .yh-btn,.yh-form-card form .yh-btn,.yh-share-card form .yh-btn{margin-top:10px}
.yh-input:focus{outline:none;border-color:var(--yh-purple)}
.yh-drop{display:flex;align-items:center;gap:10px;height:52px;border:2px dashed #cfc6bb;border-radius:14px;padding:0 16px;cursor:pointer;color:#777;position:relative;margin:0 0 18px;overflow:hidden}
.yh-drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.yh-drop i{font-size:20px;color:var(--yh-purple)}
.yh-drop span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:767px){.yh-share{padding:34px 24px}.yh-share-card{padding:22px}.yh-h2{font-size:34px}.yh-section{padding:70px 0}}

/* join */
.yh-join{background:#fff;border-radius:36px;padding:70px 30px;box-shadow:0 30px 70px rgba(9,15,50,.06)}

/* filter + pending posts */
.yh-card.is-hidden{display:none}
.yh-empty{background:#fff;border-radius:16px;padding:30px;text-align:center;color:#777}
.yh-card.pending{outline:3px dashed var(--yh-orange);outline-offset:-3px}
.yh-card .pending-tag{position:absolute;top:18px;left:18px;background:var(--yh-orange);color:#fff;font-size:11px;letter-spacing:1px;text-transform:uppercase;padding:4px 10px;border-radius:10px;z-index:2}

/* ===== Quiz ===== */
.quiz-hero{padding:190px 0 80px}
.yh-quiz-card{background:linear-gradient(135deg,var(--yh-navy) 0%,#2a1a7a 60%,var(--yh-purple) 100%);border-radius:36px;padding:60px;position:relative;overflow:hidden}
.yh-quiz-card:before{content:'🏆';position:absolute;right:-20px;bottom:-40px;font-size:220px;opacity:.08}
.yh-quiz-meta{display:flex;flex-wrap:wrap;gap:10px}
.yh-quiz-meta span{background:rgba(255,255,255,.12);color:#fff;border-radius:20px;padding:6px 14px;font-size:14px}
.yh-quiz-meta i{color:var(--yh-yellow);margin-right:5px}
.yh-board{background:#fff;border-radius:24px;padding:26px 26px 22px;box-shadow:0 20px 50px rgba(9,15,50,.08);color:var(--yh-navy)}
.yh-board small{color:#888}
.yh-board-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;font-size:15px}
.yh-board-row:nth-child(even){background:#faf8f6}
.yh-board-row.top{background:#fff7e0}
.yh-board-row.me{outline:2px solid var(--yh-purple)}
.yh-board-row .pos{width:30px;text-align:center;font-weight:500}
.yh-board-row .nm{flex:1;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yh-board-row .sc{font-weight:500;color:var(--yh-purple)}
.yh-board-row .tm{color:#999;font-size:13px;width:52px;text-align:right}
.yh-quiz{background:#fff;border-radius:28px;padding:40px;box-shadow:0 20px 50px rgba(9,15,50,.06)}
.yh-quiz .q-top{display:flex;justify-content:space-between;align-items:center;font-weight:500;color:#777;margin-bottom:12px}
.yh-quiz .q-timer{background:#f4f1ee;border-radius:20px;padding:4px 14px;color:var(--yh-navy);transition:.3s}
.yh-quiz .q-timer.urgent{background:var(--yh-pink);color:#fff;animation:yh-pulse .6s infinite alternate}
@keyframes yh-pulse{from{transform:scale(1)}to{transform:scale(1.08)}}
.yh-quiz .q-bar{height:6px;background:#f0ece7;border-radius:3px;overflow:hidden;margin-bottom:26px}
.yh-quiz .q-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--yh-purple),var(--yh-pink));width:0;transition:width .4s}
.yh-quiz .q-text{font-family:Recoleta;font-size:30px;line-height:1.3em;color:var(--yh-navy);margin-bottom:26px}
.q-opts{display:grid;gap:12px}
.q-opt{display:flex;align-items:center;gap:14px;text-align:left;width:100%;border:2px solid #ece6df;background:#fff;border-radius:16px;padding:14px 16px;font-size:17px;color:var(--yh-navy);transition:.2s;cursor:pointer}
.q-opt:hover{border-color:var(--yh-purple);transform:translateX(4px)}
.q-opt .k{width:34px;height:34px;border-radius:50%;background:#f0ece7;display:flex;align-items:center;justify-content:center;font-weight:500;flex:none}
.q-opt.chosen{border-color:var(--yh-purple);background:#f3efff}
.q-opt.chosen .k{background:var(--yh-purple);color:#fff}
.q-opt:disabled{cursor:default;opacity:.85}
.yh-result{background:#fff;border-radius:28px;padding:36px;display:flex;gap:30px;align-items:center;box-shadow:0 20px 50px rgba(9,15,50,.06)}
.yh-result .ring{width:150px;height:150px;border-radius:50%;flex:none;background:conic-gradient(var(--yh-purple) calc(var(--pct)*1%),#efe9ff 0);display:flex;align-items:center;justify-content:center}
.yh-result .ring>div{width:118px;height:118px;border-radius:50%;background:#fff;display:flex;align-items:baseline;justify-content:center;gap:4px;padding-top:36px}
.yh-result .ring b{font-size:44px;line-height:1;color:var(--yh-navy)}
.yh-result .ring small{color:#888;font-size:16px}
.yh-share-row{display:flex;flex-wrap:wrap;gap:10px}
.yh-review .rv{display:flex;gap:14px;background:#fff;border-radius:16px;padding:16px 18px;margin-bottom:10px}
.yh-review .ic{width:30px;height:30px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;color:#fff}
.yh-review .ok .ic{background:var(--yh-mint)}.yh-review .bad .ic{background:var(--yh-pink)}
.yh-review .ans{font-size:14px;color:#666;margin-top:3px}.yh-review .exp{font-size:13px;color:#999;margin-top:4px}
.yh-challenge{display:flex;gap:16px;align-items:center;background:#fff7e0;border:2px dashed var(--yh-yellow);border-radius:20px;padding:18px 22px;margin-bottom:20px;color:var(--yh-navy)}
.yh-challenge .big{font-size:34px}
@media (max-width:575px){.yh-result{flex-direction:column;text-align:center}.yh-quiz{padding:24px}.yh-quiz .q-text{font-size:24px}.yh-quiz-card{padding:34px 24px}}

/* ===== Prayer wall ===== */
.yh-form-card{background:#fff;border-radius:24px;padding:26px;box-shadow:0 20px 50px rgba(9,15,50,.06)}
.yh-prayers{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.yh-prayer{background:#fff;border-radius:20px;padding:22px 22px 16px;position:relative;box-shadow:0 12px 30px rgba(9,15,50,.05);display:flex;flex-direction:column}
.yh-prayer.pending{outline:3px dashed var(--yh-orange);outline-offset:-3px;padding-top:36px}
.yh-prayer.answered{background:#f0fbf5}
.yh-prayer p{font-size:16px;line-height:1.7em;color:var(--yh-navy);flex:1}
.yh-prayer .foot{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid #f1ece7;padding-top:12px}
.yh-prayer .who{font-size:13px;color:#888}
.yh-prayer .answered-tag{display:inline-block;font-size:12px;font-weight:500;color:#0d7a45;background:#d9f5e6;border-radius:10px;padding:3px 10px;margin-bottom:8px;align-self:flex-start}
.pray-btn{border:2px solid #ece6df;background:#fff;border-radius:20px;padding:0 14px;line-height:34px;font-size:14px;font-weight:500;color:var(--yh-navy);cursor:pointer;transition:.2s;white-space:nowrap}
.pray-btn:hover{border-color:var(--yh-purple)}
.pray-btn.done{background:var(--yh-purple);border-color:var(--yh-purple);color:#fff;cursor:default}
.pray-btn .cnt{background:rgba(0,0,0,.08);border-radius:10px;padding:0 8px;margin-left:4px}
.pray-btn.done .cnt{background:rgba(255,255,255,.25)}
.pray-btn.pop{animation:yh-pop .5s}
@keyframes yh-pop{30%{transform:scale(1.15)}}
@media (max-width:767px){.yh-prayers{grid-template-columns:1fr}}

/* ===== Question box ===== */
.yh-qbox{background:var(--yh-navy);border-radius:36px;padding:60px;position:relative;overflow:hidden}
.yh-qbox:before{content:'?';position:absolute;right:30px;top:-40px;font-family:Recoleta;font-size:300px;color:#fff;opacity:.05;line-height:1}
.yh-qbox>.row{position:relative;z-index:1}
.yh-qa-item{background:#fff;border-radius:18px;margin-bottom:10px;overflow:hidden}
.yh-qa-item .q{display:flex;gap:14px;align-items:flex-start;width:100%;text-align:left;background:none;border:none;padding:18px 20px;font-size:16px;font-weight:500;color:var(--yh-navy);cursor:pointer}
.yh-qa-item .q .mark{width:30px;height:30px;border-radius:50%;background:var(--yh-yellow);display:flex;align-items:center;justify-content:center;flex:none;font-family:Recoleta}
.yh-qa-item .q span:nth-child(2){flex:1}
.yh-qa-item .q i{transition:.3s;color:#999;margin-top:4px}
.yh-qa-item .q[aria-expanded="true"] i{transform:rotate(180deg)}
.yh-qa-item .a{padding:0 20px 20px 64px;color:#555}
.yh-qa-item .a .content-body p{font-size:15.5px;line-height:1.8em}
.yh-qa-item .by{font-size:13px;color:#999;margin-top:6px}
@media (max-width:767px){.yh-qbox{padding:34px 24px}.yh-qa-item .a{padding-left:20px}}
textarea.yh-input{height:auto;padding:12px 16px;line-height:1.6em}

/* ===== Hero quick links ("what you can do here") ===== */
.yh-hero-hint{color:rgba(255,255,255,.75);font-size:15px}
.yh-hero-hint i{color:var(--yh-yellow)}
.yh-quick{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:50px}
.yh-quick-item{display:flex;flex-direction:column;gap:6px;background:rgba(255,255,255,.12);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18);border-radius:20px;padding:18px 18px 16px;color:#fff;transition:.25s;position:relative;overflow:hidden}
.yh-quick-item:hover{background:#fff;color:var(--yh-navy);transform:translateY(-4px)}
.yh-quick-item .ic{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:4px}
.yh-quick-item:hover .ic{background:var(--yh-yellow);color:#000}
.yh-quick-item .t{font-weight:500;font-size:16px}
.yh-quick-item .s{font-size:12.5px;opacity:.75;line-height:1.4}
.yh-quick-item.hot{background:var(--yh-yellow);color:#000;border-color:var(--yh-yellow)}
.yh-quick-item.hot .ic{background:rgba(0,0,0,.1)}
.yh-quick-item.hot:after{content:'NEW';position:absolute;top:12px;right:12px;font-size:10px;letter-spacing:1.5px;font-weight:500;background:var(--yh-navy);color:#fff;padding:2px 8px;border-radius:8px}
.yh-quick-item.hot:hover{background:#fff}
@media (max-width:1199px){.yh-quick{grid-template-columns:repeat(3,1fr)}}
@media (max-width:767px){.yh-quick{grid-template-columns:1fr 1fr;gap:8px;margin-top:34px}.yh-quick-item{padding:14px}.yh-quick-item .s{display:none}}

.q-img{width:100%;max-height:280px;object-fit:cover;border-radius:16px;margin-bottom:18px}