/* Public-only visual identity, aligned with the mosque timetable and Discover Islam references. */
body.khutbah-public{--navy:#061a2c;--blue:#0f6288;--gold:#c8a85b;--paper:#f8fcfe;--border:#dfeaf0;background:var(--paper);color:#18252d;font:16px/1.7 'DM Sans',system-ui,sans-serif}
.khutbah-public .wrap{max-width:1160px;padding:0 22px 85px}
.khutbah-public h1,.khutbah-public h2,.khutbah-public h3{font-family:'Playfair Display',Georgia,serif;letter-spacing:-.025em}
.khutbah-public a{color:#0f6288}
.kp-brand{display:flex;align-items:center;gap:13px;color:#fff!important;text-decoration:none;font-size:17px;font-weight:800;letter-spacing:.07em;line-height:1.2}
.kp-brand img{height:52px;width:52px;object-fit:contain}.kp-brand small{display:block;font-size:12px;letter-spacing:.01em;font-weight:400;color:#c1d5df;margin-top:5px}
.khutbah-public .hero,.khutbah-public .kp-detail-hero{position:relative;isolation:isolate;overflow:hidden;text-align:center;border-radius:0;color:white;background:radial-gradient(ellipse 75% 65% at 50% 120%,rgba(236,196,118,.45),transparent 74%),linear-gradient(180deg,#06142a,#0a3555 62%,#0f6288);box-shadow:none;border:0;margin:0 calc(50% - 50vw) 46px;padding:88px max(22px,calc((100vw - 920px)/2)) 92px}
.khutbah-public .hero:before,.khutbah-public .kp-detail-hero:before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(#fff7 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(#000,transparent 77%);pointer-events:none}
.khutbah-public .kp-hero-arabic{font:700 clamp(34px,5vw,52px)/1.6 'Amiri',serif;color:#eed48d;margin:0 0 8px}
.khutbah-public .hero .eyebrow,.khutbah-public .kp-detail-hero .eyebrow{color:#f5d88e;font-size:12px;letter-spacing:.17em}
.khutbah-public .hero h1,.khutbah-public .kp-detail-hero h1{color:#fff;font-size:clamp(42px,6vw,70px);font-weight:600;line-height:1.08;margin:12px 0 18px}
.khutbah-public .hero .lead{color:#f4e5b9;font-size:clamp(19px,2.5vw,26px);font-family:'Playfair Display',Georgia,serif;margin:0 0 20px}
.khutbah-public .hero>p:last-child{max-width:830px;margin:0 auto;color:#e1eaf1;font-size:16px;line-height:1.85}
.khutbah-public .card,.khutbah-public .featured,.khutbah-public .listing{border:1px solid #dce7eb;box-shadow:0 8px 30px #112a4010;border-radius:15px}
.khutbah-public .grid{gap:18px}.khutbah-public .grid .card{background:#fff;padding:26px}.khutbah-public .grid .times{color:#0f6288;font-size:clamp(21px,3vw,28px)}
.khutbah-public .hint{color:#61727d;font-size:14px}
.khutbah-public .featured{border-left:5px solid #c8a85b;padding:30px}.khutbah-public .featured strong{font:600 29px/1.25 'Playfair Display',serif;color:#102c42}
.khutbah-public .listing:hover,.khutbah-public .featured:hover{border-color:#c8a85b;text-decoration:none}
.khutbah-public section h2{font-size:clamp(25px,3vw,36px);color:#0f354a}
.kp-back{padding:24px 0}.kp-back a{font-weight:700;text-decoration:none}
.khutbah-public .kp-detail-hero{margin-bottom:34px;padding-block:68px 78px}
.khutbah-public .kp-detail-hero h1{font-size:clamp(36px,5.2vw,58px)}
.kp-detail-meta{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin:30px auto 0!important;color:#fff}
.kp-detail-meta span{border:1px solid #ffffff55;background:#ffffff12;padding:10px 18px;border-radius:10px;font-size:14px}
.kp-detail-meta b{font-weight:600;color:#f7d48e;margin-right:8px}
.khutbah-public .player{padding:0;overflow:hidden;border:1px solid #dbe6eb;box-shadow:0 15px 44px #09263a16;border-radius:17px;background:#fff;max-width:1080px;margin:22px auto 45px}
.kp-player-heading{background:#fff;padding:34px 34px 20px}.kp-player-heading .kp-section-label{color:#916b2d;font-size:11px;font-weight:800;letter-spacing:.17em}
.kp-player-heading h2{margin:8px 0;font-size:clamp(26px,4vw,40px)}.kp-player-heading p{color:#5d7281;margin:0}
.kp-audio-shell{margin:0 26px 12px;padding:24px 27px 26px;background:linear-gradient(135deg,#06142a,#123d60);border:1px solid #294968;border-bottom:3px solid #c8a85b;border-radius:13px;color:#fff}
.kp-audio-title{display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:12px;font-weight:800;letter-spacing:.09em;color:#d8c48d}
#kpPlaybackStatus{letter-spacing:0;font-weight:500;color:#c2d5e0}
.kp-player-controls{display:flex;align-items:center;gap:20px;margin-top:15px}
.kp-play{width:78px;height:78px;flex:0 0 78px;border:0;border-radius:50%;background:#e0bc71;color:#101e36;box-shadow:0 10px 22px #0005;display:grid;place-items:center;font-size:28px;cursor:pointer;transition:transform .15s,background .15s}
.kp-play:hover{background:#f3d58f;transform:scale(1.04)}
.kp-play:focus-visible,.kp-track input:focus-visible{outline:3px solid #fff;outline-offset:4px}
.kp-track{flex:1;min-width:0}.kp-track input{width:100%;margin:0;accent-color:#d7b46a;cursor:pointer}.kp-time{display:flex;justify-content:space-between;font-weight:700;color:#e4ebf2;font-size:14px;font-variant-numeric:tabular-nums}
.kp-speed-label{font-size:12px;font-weight:700;color:#e9d29d;display:flex;align-items:center;gap:7px;margin:0}
.kp-speed-label select{background:#183b56;color:#fff;border:1px solid #7591a4;border-radius:7px;padding:7px;font:inherit}
.kp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.kp-passage-intro{padding:20px 33px 13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:#173d50}
.kp-passage-intro strong{font-size:18px}.kp-passage-intro span{color:#6d7b86;font-size:13px}
.khutbah-public #segments{max-height:640px;overflow:auto;overscroll-behavior:contain;padding:0 24px 25px}
.khutbah-public .segment{width:100%;position:relative;padding:23px 26px;margin:10px 0;border:1px solid #dde7ed;border-radius:12px;background:#fff;color:#182e3b;box-shadow:0 3px 12px #152e3b0a;text-align:left;transition:background .2s,border-color .2s;cursor:pointer}
.khutbah-public .segment .arabic{font:700 clamp(27px,3.5vw,37px)/1.9 'Amiri',serif;color:#14283c;text-align:right;direction:rtl}
.khutbah-public .segment .english{font:500 clamp(17px,1.8vw,20px)/1.75 'DM Sans',sans-serif;color:#334c5d;margin-top:13px}
.kp-replay{display:block;text-align:right;font-size:12px;color:#527989;margin-top:8px;font-weight:700}
.khutbah-public .segment.active{background:#e7f2f1;border:2px solid #0f6288;box-shadow:inset 7px 0 #c8a85b,0 8px 24px #0f628824}
.khutbah-public .segment.active .kp-replay{color:#0f6288}
.khutbah-public .khutbah-break{background:#fbf3e1;color:#6d501f;border-color:#ddbd7b}
@media(max-width:740px){.kp-nav-inner{flex-direction:column;align-items:flex-start;padding:14px 0}.kp-nav nav{gap:14px}.khutbah-public .wrap{padding-inline:15px}.khutbah-public .hero{padding:60px 20px 70px}.khutbah-public .kp-detail-hero{padding:45px 20px 60px}.kp-player-heading{padding:24px 20px 15px}.kp-audio-shell{margin:0 12px 10px;padding:18px 14px}.kp-player-controls{gap:10px}.kp-play{width:60px;height:60px;flex-basis:60px}.kp-speed-label{flex-direction:column;gap:1px}.khutbah-public #segments{padding:0 12px 16px;max-height:65vh}.khutbah-public .segment{padding:17px}.kp-footer-inner{flex-direction:column;gap:22px}}
@media(prefers-reduced-motion:reduce){.kp-play,.khutbah-public .segment{transition:none}}

/* Shared mosque navigation and footer are injected by /shared/nav.js. */
body.khutbah-public #noor-site-nav, body.khutbah-public #noor-site-footer{font-family:"DM Sans",system-ui,sans-serif}

/* v19: move the Jumu'ah times into responsive hero pills */
.khutbah-public .hero .kp-hero-intro{max-width:830px;margin:0 auto;color:#e1eaf1;font-size:16px;line-height:1.85}
.khutbah-public .kp-prayer-pills{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:12px;margin:33px auto 0;max-width:1010px}
.khutbah-public .kp-prayer-pill,.khutbah-public .kp-timetable-pill{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:80px;border-radius:16px;padding:12px 22px;box-sizing:border-box}
.khutbah-public .kp-prayer-pill{border:1px solid rgba(244,213,145,.55);background:rgba(7,28,48,.45);backdrop-filter:blur(8px);min-width:235px}
.khutbah-public .kp-pill-label{color:#f6d88f;text-transform:uppercase;font-size:11px;font-weight:800;letter-spacing:.12em;margin-bottom:5px}
.khutbah-public .kp-prayer-pill strong{font-family:'DM Sans',sans-serif;color:#fff;font-size:clamp(17px,2vw,21px);font-weight:700;white-space:nowrap}
.khutbah-public .kp-prayer-pill strong span{color:#efce84;margin:0 3px}
.khutbah-public a.kp-timetable-pill{flex-direction:row;gap:10px;background:#e4c27b;border:1px solid #f3da9b;color:#10293e;font-size:14px;font-weight:800;text-decoration:none;min-width:220px;transition:background .2s}
.khutbah-public a.kp-timetable-pill:hover{background:#f9dda0;color:#10293e}
.khutbah-public a.kp-timetable-pill:focus-visible{outline:3px solid #fff;outline-offset:3px}
.khutbah-public .hero .kp-prayer-note{color:#d6e5e9;font-size:12px;margin:14px auto 0;max-width:700px;line-height:1.5}
@media(max-width:740px){.khutbah-public .kp-prayer-pills{margin-top:25px;gap:9px}.khutbah-public .kp-prayer-pill{flex:1 1 220px;min-width:0}.khutbah-public a.kp-timetable-pill{flex:1 1 100%;min-height:52px}.khutbah-public .hero{padding-bottom:62px}}
@media(max-width:490px){.khutbah-public .kp-prayer-pill{min-height:66px;padding:11px 15px}.khutbah-public .kp-prayer-pill strong{font-size:18px}}