/* ==========================================================================
   Pueblo Islam design system
   Teal, sand and gold from the Pueblo Islam mark. Fraunces for voice, Manrope
   for reading, Amiri for Arabic. One file for every page.
   ========================================================================== */

/* ---------- fonts (self-hosted) ---------- */
@font-face { font-family: "Fraunces"; src: url(../fonts/fraunces-latin-wght-normal.woff2) format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url(../fonts/fraunces-latin-wght-italic.woff2) format("woff2"); font-weight: 300 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Manrope"; src: url(../fonts/manrope-latin-wght-normal.woff2) format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Amiri"; src: url(../fonts/amiri-arabic-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Amiri"; src: url(../fonts/amiri-arabic-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }

/* ---------- tokens ---------- */
:root {
	--pi-teal-950: #052A2D;
	--pi-teal-900: #08393D;
	--pi-teal-800: #0B4A4F;
	--pi-teal-700: #0F5C61;
	--pi-teal-600: #17706F;
	--pi-teal-200: #BFD9D3;
	--pi-teal-100: #DCEBE7;
	--pi-teal-50:  #EEF5F2;
	--pi-sage:     #6E8E74;
	--pi-gold:     #C9A24B;
	--pi-gold-200: #E7D3A0;
	--pi-gold-ink: #7A5C14;
	--pi-sand-50:  #FBF7EF;
	--pi-sand-100: #F4EBDB;
	--pi-sand-200: #E8D8BB;
	--pi-sand-300: #D8C29B;
	--pi-ink:      #14211F;
	--pi-ink-2:    #34423F;
	--pi-ink-3:    #56645F;
	--pi-dawn:     #D98B5F;
	--pi-white:    #FFFFFF;
	--pi-line:     rgba(20, 33, 31, .12);
	--pi-line-2:   rgba(20, 33, 31, .2);
	--pi-on-dark:  #F4EBDB;
	--pi-on-dark-2: rgba(244, 235, 219, .8);
	--pi-radius:   20px;
	--pi-radius-sm: 12px;
	--pi-shadow:   0 1px 2px rgba(8, 57, 61, .06), 0 10px 30px -8px rgba(8, 57, 61, .14);
	--pi-shadow-lg: 0 2px 4px rgba(8, 57, 61, .06), 0 24px 60px -18px rgba(8, 57, 61, .28);
	--pi-display:  "Fraunces", "Iowan Old Style", Georgia, serif;
	--pi-body:     "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
	--pi-arabic:   "Amiri", "Geeza Pro", "Noto Naskh Arabic", serif;
	--pi-wrap:     1180px;
	--pi-hdr-h:    76px;
	--pi-ease:     cubic-bezier(.2, .7, .2, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--pi-hdr-h) + 16px); }
body {
	margin: 0;
	background-color: var(--pi-sand-50);
	background-image:
		radial-gradient(60% 50% at 8% 0%, rgba(15, 92, 97, .07), transparent 60%),
		radial-gradient(50% 40% at 100% 30%, rgba(201, 162, 75, .09), transparent 60%),
		radial-gradient(60% 50% at 30% 100%, rgba(110, 142, 116, .08), transparent 60%);
	background-size: 180% 180%;
	background-attachment: fixed;
	animation: pi-mesh 68s ease-in-out infinite alternate;
	color: var(--pi-ink);
	font-family: var(--pi-body);
	font-size: 1.0625rem;
	line-height: 1.65;
	font-feature-settings: "ss01", "cv11";
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	padding-top: var(--pi-hdr-h);
	overflow-x: clip;
}
@keyframes pi-mesh { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
@media (max-width: 760px) { body { background-attachment: scroll; background-size: 220% 220%; } }
img, svg, video { max-width: 100%; height: auto; }
a { color: var(--pi-teal-700); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--pi-teal-900); }
:focus-visible { outline: 3px solid var(--pi-gold); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4 { font-family: var(--pi-display); font-weight: 560; line-height: 1.12; letter-spacing: -.015em; color: var(--pi-teal-900); margin: 0 0 .5em; font-variation-settings: "SOFT" 60, "WONK" 0; text-wrap: balance; }
h1 { font-size: clamp(2.35rem, 5.2vw, 4.25rem); letter-spacing: -.025em; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.75rem); }
h3 { font-size: clamp(1.2rem, 1.8vw, 1.42rem); letter-spacing: -.01em; }
h4 { font-size: 1.08rem; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { padding-left: 1.2em; }
strong { font-weight: 700; }
small { font-size: .86em; }
hr { border: 0; height: 1px; background: var(--pi-line); margin: 2.5rem 0; }
[hidden] { display: none !important; }
.pi-sr, .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pi-i { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }
[lang="ar"], .pi-ar { font-family: var(--pi-arabic); font-feature-settings: normal; letter-spacing: 0; direction: rtl; line-height: 1.9; }

/* WordPress wrappers stay out of the way. */
.pi-main { display: block; }
.pi-main > .wp-block-post-content, .pi-main .entry-content { margin: 0; }
.pi-main .wp-block-post-content > * { margin-block: 0; }
.wp-site-blocks { padding: 0; }

/* ---------- layout ---------- */
.pi-wrap { width: min(100% - 40px, var(--pi-wrap)); margin-inline: auto; }
.pi-wrap--mid { max-width: 960px; }
.pi-wrap--narrow { max-width: 760px; }
.pi-section { position: relative; padding-block: clamp(64px, 9vw, 116px); }
.pi-section--tight { padding-block: clamp(44px, 6vw, 72px); }
.pi-section--flush-top { padding-top: 0; }
.pi-section--sand { background: var(--pi-sand-100); }
.pi-section--white { background: var(--pi-white); }
.pi-section--line { border-top: 1px solid var(--pi-line); }
.pi-section--dark {
	background: radial-gradient(90% 70% at 85% 0%, rgba(201, 162, 75, .16), transparent 60%), radial-gradient(70% 70% at 0% 100%, rgba(43, 127, 118, .35), transparent 60%), var(--pi-teal-900);
	color: var(--pi-on-dark);
	overflow: hidden;
}
.pi-section--dark::before { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M40 18l6.4 15.6L62 40l-15.6 6.4L40 62l-6.4-15.6L18 40l15.6-6.4z' fill='none' stroke='%23E7D3A0' stroke-opacity='.09' stroke-width='1'/%3E%3C/svg%3E"); pointer-events: none; }
.pi-section--dark > *:not(.pi-particles) { position: relative; }
.pi-section--dark h2, .pi-section--dark h3, .pi-section--dark h4 { color: #FFF8EA; }
.pi-section--dark a:not(.pi-btn) { color: var(--pi-gold-200); }
.pi-section--dark .pi-lede, .pi-section--dark p { color: var(--pi-on-dark-2); }
.pi-section--dark .pi-eyebrow { color: var(--pi-gold); }

.pi-head { max-width: 760px; margin-bottom: clamp(32px, 4vw, 52px); }
.pi-head--center { margin-inline: auto; text-align: center; }
.pi-head--center .pi-eyebrow { justify-content: center; }
.pi-head h2 { margin-bottom: .35em; }
.pi-eyebrow { display: flex; align-items: center; gap: .6em; margin: 0 0 1em; font-family: var(--pi-body); font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--pi-gold-ink); }
.pi-eyebrow::before { content: ""; width: 11px; height: 11px; flex: none; background: currentColor; clip-path: polygon(50% 0, 63% 37%, 100% 50%, 63% 63%, 50% 100%, 37% 63%, 0 50%, 37% 37%); }
.pi-eyebrow a { color: inherit; text-decoration: none; }
.pi-lede { font-size: clamp(1.1rem, 1.5vw, 1.25rem); line-height: 1.6; color: var(--pi-ink-2); max-width: 64ch; }
.pi-center { text-align: center; }
.pi-muted { color: var(--pi-ink-3); }
.pi-small { font-size: .92rem; }

.pi-grid { display: grid; gap: clamp(16px, 2vw, 24px); grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.pi-grid--2 { --cols: 2; }
.pi-grid--3 { --cols: 3; }
.pi-grid--4 { --cols: 4; }
@media (max-width: 1020px) { .pi-grid--4 { --cols: 2; } .pi-grid--3 { --cols: 2; } }
@media (max-width: 680px) { .pi-grid, .pi-grid--2, .pi-grid--3, .pi-grid--4 { --cols: 1; } }
.pi-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.pi-split--center { align-items: center; }
.pi-split--rev > :first-child { order: 2; }
@media (max-width: 900px) { .pi-split { grid-template-columns: minmax(0, 1fr); } .pi-split--rev > :first-child { order: 0; } }
.pi-sticky { position: sticky; top: calc(var(--pi-hdr-h) + 24px); }
@media (max-width: 900px) { .pi-sticky { position: static; } }
.pi-stack > * + * { margin-top: 16px; }

/* ---------- buttons ---------- */
.pi-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.pi-actions--center { justify-content: center; }
.pi-btn {
	--bg: var(--pi-teal-700); --fg: #fff; --bd: transparent;
	display: inline-flex; align-items: center; justify-content: center; gap: .55em;
	min-height: 48px; padding: .75em 1.35em; border-radius: 999px; border: 1.5px solid var(--bd);
	background: var(--bg); color: var(--fg); font: 700 .98rem/1.1 var(--pi-body); letter-spacing: .005em;
	text-decoration: none; cursor: pointer; position: relative; overflow: hidden; isolation: isolate;
	transition: transform .35s var(--pi-ease), box-shadow .35s var(--pi-ease), background-color .25s, color .25s, border-color .25s;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .15) inset, 0 8px 22px -10px rgba(8, 57, 61, .55);
}
.pi-btn:hover { color: var(--fg); background: var(--bg-h, var(--pi-teal-800)); box-shadow: 0 1px 0 rgba(255, 255, 255, .15) inset, 0 14px 30px -12px rgba(8, 57, 61, .6); }
.pi-btn .pi-i { width: 1.1em; height: 1.1em; }
.pi-btn--gold { --bg: var(--pi-gold); --bg-h: #D6B25E; --fg: var(--pi-ink); }
.pi-btn--ghost { --bg: transparent; --bg-h: rgba(15, 92, 97, .07); --fg: var(--pi-teal-800); --bd: var(--pi-line-2); box-shadow: none; }
.pi-btn--ghost:hover { box-shadow: none; border-color: var(--pi-teal-700); }
.pi-btn--light { --bg: #FFF8EA; --bg-h: #fff; --fg: var(--pi-teal-900); }
.pi-btn--outline-light { --bg: transparent; --bg-h: rgba(255, 248, 234, .1); --fg: #FFF8EA; --bd: rgba(255, 248, 234, .4); box-shadow: none; }
.pi-btn--sm { min-height: 40px; padding: .55em 1.05em; font-size: .9rem; }
.pi-btn--block { width: 100%; }
.pi-btn .pi-ripple { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255, 255, 255, .35); animation: pi-ripple .6s ease-out forwards; pointer-events: none; z-index: -1; }
@keyframes pi-ripple { to { transform: scale(2.6); opacity: 0; } }
.pi-link { display: inline-flex; align-items: center; gap: .4em; font-weight: 700; text-decoration: none; color: var(--pi-teal-700); }
.pi-link .pi-i { transition: transform .3s var(--pi-ease); }
.pi-link:hover .pi-i { transform: translateX(4px); }
.pi-linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--pi-teal-700); text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }

/* ---------- header ---------- */
.pi-skip { position: fixed; left: 12px; top: -60px; z-index: 1000; padding: .7em 1.1em; background: var(--pi-teal-900); color: #fff; border-radius: 10px; font-weight: 700; transition: top .2s; }
.pi-skip:focus { top: 12px; color: #fff; }
.pi-hdr { position: fixed; inset: 0 0 auto 0; z-index: 900; transition: opacity .38s ease; }
.pi-hdr.is-hidden { opacity: 0; pointer-events: none; }
.admin-bar .pi-hdr { top: 32px; }
@media (max-width: 782px) { .admin-bar .pi-hdr { top: 46px; } }
.pi-hdr__bar { background: rgba(251, 247, 239, .9); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--pi-line); border-radius: 0; }
.pi-hdr__inner { height: var(--pi-hdr-h); display: flex; align-items: center; gap: 20px; }
.pi-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--pi-teal-900); flex: none; }
.pi-brand__mark { width: 40px; height: 48px; flex: none; }
.pi-brand__word { display: flex; flex-direction: column; line-height: 1; }
.pi-brand__name { font-family: var(--pi-display); font-size: 1.42rem; font-weight: 600; letter-spacing: -.01em; color: var(--pi-teal-700); white-space: nowrap; }
.pi-brand__name span { color: var(--pi-gold-ink); }
.pi-brand__place { margin-top: 5px; font-size: .64rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--pi-ink-3); }
.pi-brand--sm .pi-brand__mark { width: 32px; height: 38px; }
.pi-brand--sm .pi-brand__name { font-size: 1.2rem; }
.pi-brand--light .pi-brand__name { color: #FFF8EA; }
.pi-brand--light .pi-brand__name span { color: var(--pi-gold); }
.pi-brand--light .pi-brand__place { color: var(--pi-on-dark-2); }

.pi-nav { margin-left: auto; }
.pi-nav__list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.pi-nav__link, .pi-nav__btn { display: inline-flex; align-items: center; gap: .3em; height: 42px; padding: 0 .72em; border: 0; border-radius: 999px; background: transparent; color: var(--pi-ink-2); font: 650 .94rem/1 var(--pi-body); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .2s, color .2s; }
.pi-nav__link:hover, .pi-nav__btn:hover, .pi-nav__btn[aria-expanded="true"] { background: rgba(15, 92, 97, .08); color: var(--pi-teal-900); }
.pi-nav__link.is-current, .pi-nav__btn.is-current { color: var(--pi-teal-700); box-shadow: inset 0 -2px 0 var(--pi-gold); border-radius: 999px 999px 999px 999px; }
.pi-nav__chev { width: 16px; height: 16px; transition: transform .25s; }
.pi-nav__btn[aria-expanded="true"] .pi-nav__chev { transform: rotate(180deg); }
.pi-dd { position: fixed; left: 0; right: 0; top: var(--pi-hdr-h); background: rgba(251, 247, 239, .98); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid var(--pi-line); box-shadow: 0 30px 60px -30px rgba(8, 57, 61, .35); animation: pi-dd .28s var(--pi-ease); }
.admin-bar .pi-dd { top: calc(var(--pi-hdr-h) + 32px); }
@keyframes pi-dd { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.pi-dd__inner { display: grid; grid-template-columns: 240px minmax(0, 1fr) 280px; gap: 36px; padding-block: 34px 38px; }
.pi-dd__label { font-family: var(--pi-display); font-size: 1.6rem; font-weight: 560; color: var(--pi-teal-900); margin: 0 0 .4em; }
.pi-dd__intro { color: var(--pi-ink-3); font-size: .98rem; }
.pi-dd__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px; align-content: start; }
.pi-dd__link { display: block; padding: 12px 14px; border-radius: 14px; text-decoration: none; transition: background-color .2s; }
.pi-dd__link:hover, .pi-dd__link.is-current { background: rgba(15, 92, 97, .07); }
.pi-dd__t { display: block; font-weight: 750; color: var(--pi-teal-900); font-size: 1rem; }
.pi-dd__d { display: block; color: var(--pi-ink-3); font-size: .9rem; line-height: 1.45; margin-top: 2px; }
.pi-dd__feature { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 18px; text-decoration: none; background: linear-gradient(160deg, var(--pi-teal-700), var(--pi-teal-900)); color: var(--pi-on-dark); box-shadow: var(--pi-shadow); position: relative; overflow: hidden; }
.pi-dd__feature::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 140px; height: 140px; border-radius: 50%; border: 1px solid rgba(231, 211, 160, .25); box-shadow: 0 0 0 22px rgba(231, 211, 160, .06); }
.pi-dd__ft { font-family: var(--pi-display); font-size: 1.25rem; color: #FFF8EA; }
.pi-dd__fd { font-size: .93rem; color: var(--pi-on-dark-2); line-height: 1.5; }
.pi-dd__fl { display: inline-flex; align-items: center; gap: .4em; margin-top: auto; font-weight: 700; color: var(--pi-gold-200); font-size: .92rem; }
.pi-dd__feature:hover { color: var(--pi-on-dark); }

.pi-hdr__tools { display: flex; align-items: center; gap: 8px; flex: none; }
.pi-nav + .pi-hdr__tools { margin-left: 10px; }
.pi-pill { display: inline-flex; align-items: center; gap: .45em; height: 40px; padding: 0 .95em; border-radius: 999px; background: var(--pi-teal-50); border: 1px solid var(--pi-teal-100); color: var(--pi-teal-800); font-weight: 700; font-size: .88rem; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pi-pill:hover { background: var(--pi-teal-100); color: var(--pi-teal-900); }
.pi-iconbtn { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--pi-teal-900); cursor: pointer; transition: background-color .2s; }
.pi-iconbtn:hover { background: rgba(15, 92, 97, .08); }
.pi-iconbtn .pi-i { width: 22px; height: 22px; }
.pi-hdr__menu { display: none; }
@media (max-width: 1239px) {
	.pi-nav { display: none; }
	.pi-hdr__tools { margin-left: auto; }
	.pi-hdr__menu { display: inline-grid; }
}
@media (max-width: 720px) { .pi-hdr__cta { display: none; } :root { --pi-hdr-h: 66px; } .pi-brand__mark { width: 34px; height: 41px; } .pi-brand__name { font-size: 1.25rem; } }
@media (max-width: 420px) { .pi-brand__place { display: none; } }
/* Below 820px the pill has no room beside the language switch; the phone bar carries prayer times. */
@media (max-width: 820px) { .pi-hdr__tools .pi-pill { display: none; } }

/* drawer */
.pi-drawer { position: fixed; inset: 0; z-index: 950; }
.pi-drawer__scrim { position: absolute; inset: 0; background: rgba(5, 42, 45, .45); animation: pi-fade .25s ease; }
.pi-drawer__panel { position: absolute; right: 0; top: 0; bottom: 0; width: min(420px, 100%); background: var(--pi-sand-50); display: flex; flex-direction: column; box-shadow: var(--pi-shadow-lg); animation: pi-slide .32s var(--pi-ease); overflow-y: auto; }
@keyframes pi-fade { from { opacity: 0; } }
@keyframes pi-slide { from { transform: translateX(30px); opacity: .6; } }
.pi-drawer__top { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 14px 20px; border-bottom: 1px solid var(--pi-line); position: sticky; top: 0; background: var(--pi-sand-50); z-index: 1; }
.pi-drawer__nav { padding: 10px 12px; }
.pi-drawer__solo, .pi-drawer__group summary { display: flex; align-items: center; justify-content: space-between; padding: 15px 12px; font-family: var(--pi-display); font-size: 1.28rem; font-weight: 560; color: var(--pi-teal-900); text-decoration: none; cursor: pointer; list-style: none; border-bottom: 1px solid var(--pi-line); }
.pi-drawer__group summary::-webkit-details-marker { display: none; }
.pi-drawer__group summary .pi-i { transition: transform .25s; }
.pi-drawer__group[open] summary .pi-i { transform: rotate(180deg); }
.pi-drawer__group ul { list-style: none; margin: 0; padding: 6px 0 12px; }
.pi-drawer__group li a { display: block; padding: 10px 12px; border-radius: 12px; font-weight: 700; color: var(--pi-ink); text-decoration: none; }
.pi-drawer__group li a:hover { background: rgba(15, 92, 97, .07); }
.pi-drawer__group small { display: block; font-weight: 500; color: var(--pi-ink-3); font-size: .85rem; }
.pi-drawer__foot { margin-top: auto; padding: 18px 20px 28px; display: grid; gap: 10px; border-top: 1px solid var(--pi-line); }

/* Find */
.pi-find { position: fixed; inset: 0; z-index: 980; display: grid; place-items: start center; padding: 10vh 16px 16px; }
.pi-find__scrim { position: absolute; inset: 0; background: rgba(5, 42, 45, .5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: pi-fade .2s ease; }
.pi-find__panel { position: relative; width: min(640px, 100%); max-height: 78vh; display: flex; flex-direction: column; background: var(--pi-sand-50); border-radius: 22px; box-shadow: var(--pi-shadow-lg); overflow: hidden; animation: pi-dd .25s var(--pi-ease); }
.pi-find__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 0 22px; }
.pi-find__title { font-size: 1.25rem; margin: 0; }
.pi-find__field { display: flex; align-items: center; gap: 10px; margin: 14px 18px; padding: 0 14px; border-radius: 14px; background: #fff; border: 1.5px solid var(--pi-line-2); color: var(--pi-ink-3); }
.pi-find__field:focus-within { border-color: var(--pi-teal-700); }
.pi-find__field input { flex: 1; min-width: 0; height: 52px; border: 0; outline: 0; background: transparent; font: 600 1.05rem var(--pi-body); color: var(--pi-ink); }
.pi-find__list { list-style: none; margin: 0; padding: 0 10px 14px; overflow-y: auto; }
.pi-find__list a { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 11px 12px; border-radius: 12px; text-decoration: none; }
.pi-find__list a:hover, .pi-find__list a:focus-visible, .pi-find__list a.is-active { background: rgba(15, 92, 97, .08); outline: none; }
.pi-find__list b { color: var(--pi-teal-900); font-weight: 750; }
.pi-find__list span { grid-column: 1; color: var(--pi-ink-3); font-size: .9rem; }
.pi-find__list em { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-style: normal; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pi-gold-ink); }
.pi-find__empty { padding: 0 22px 20px; color: var(--pi-ink-3); }

.pi-progress { position: fixed; left: 0; top: 0; right: 0; height: 3px; z-index: 960; pointer-events: none; }
.pi-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--pi-teal-600), var(--pi-gold), var(--pi-dawn)); transition: width .08s linear; }

/* season band (Ramadan, Eid) */
.pi-season { position: relative; z-index: 901; background: linear-gradient(90deg, var(--pi-teal-900), var(--pi-teal-700)); color: var(--pi-on-dark); font-size: .92rem; }
.pi-season .pi-wrap { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding-block: 9px; text-align: center; }
.pi-season a { color: var(--pi-gold-200); font-weight: 700; }
.pi-season .pi-i { color: var(--pi-gold); }
body.has-season { padding-top: calc(var(--pi-hdr-h)); }

/* ---------- heroes ---------- */
.pi-hero { position: relative; padding: clamp(64px, 9vw, 120px) 0 clamp(110px, 12vw, 170px); overflow: hidden; background: radial-gradient(80% 90% at 90% 10%, rgba(201, 162, 75, .16), transparent 55%), radial-gradient(70% 80% at 0% 0%, rgba(15, 92, 97, .1), transparent 60%), var(--pi-sand-100); }
.pi-hero__title { font-size: clamp(2.5rem, 5.6vw, 4.5rem); margin-bottom: .35em; max-width: 18ch; }
.pi-hero--plain .pi-hero__title { max-width: 20ch; }
.pi-hero .pi-lede { font-size: clamp(1.12rem, 1.6vw, 1.3rem); }
.pi-hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (max-width: 960px) { .pi-hero__grid { grid-template-columns: minmax(0, 1fr); } }
.pi-hero__ridge { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(70px, 10vw, 150px); }
.pi-ridge__far { fill: var(--r1, rgba(15, 92, 97, .1)); }
.pi-ridge__mid { fill: var(--r2, rgba(110, 142, 116, .16)); }
.pi-ridge__near { fill: var(--r3, var(--pi-sand-50)); }
.pi-hero + .pi-section--sand, .pi-hero--to-sand { --r3: var(--pi-sand-100); }
.pi-hero--dark { background: radial-gradient(80% 90% at 88% 0%, rgba(201, 162, 75, .22), transparent 55%), radial-gradient(70% 80% at 0% 100%, rgba(43, 127, 118, .45), transparent 60%), var(--pi-teal-900); color: var(--pi-on-dark); --r1: rgba(231, 211, 160, .08); --r2: rgba(244, 235, 219, .08); }
.pi-hero--dark .pi-hero__title { color: #FFF8EA; }
.pi-hero--dark .pi-lede { color: var(--pi-on-dark-2); }
.pi-hero--dark .pi-eyebrow { color: var(--pi-gold); }
.pi-hero--dark a:not(.pi-btn) { color: var(--pi-gold-200); }
.pi-hero__aside { background: rgba(255, 255, 255, .72); border: 1px solid rgba(255, 255, 255, .8); border-radius: var(--pi-radius); padding: clamp(22px, 3vw, 30px); box-shadow: var(--pi-shadow-lg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pi-hero--dark .pi-hero__aside { background: rgba(255, 248, 234, .07); border-color: rgba(255, 248, 234, .16); color: var(--pi-on-dark); }
.pi-hero__aside h2, .pi-hero__aside h3 { font-size: 1.3rem; }
.pi-hero--dark .pi-hero__aside h2, .pi-hero--dark .pi-hero__aside h3 { color: #FFF8EA; }
.pi-crumbs { display: flex; flex-wrap: wrap; gap: .5em; margin: 0 0 1.2em; padding: 0; list-style: none; font-size: .86rem; color: var(--pi-ink-3); }
.pi-crumbs li + li::before { content: "/"; margin-right: .5em; opacity: .5; }
.pi-crumbs a { color: inherit; }

/* home: the sky over Pueblo, tinted by the prayer day */
.pi-sky { --s1: #6FA6C9; --s2: #A9CBE0; --s3: #EADBC0; --r1: rgba(15, 92, 97, .32); --r2: rgba(11, 74, 79, .5); --r3: var(--pi-sand-50); --stars: 0; --tone-fg: var(--pi-teal-900); --tone-fg2: var(--pi-ink-2);
	position: relative; overflow: hidden; padding: clamp(56px, 8vw, 104px) 0 clamp(150px, 16vw, 230px);
	background: linear-gradient(180deg, var(--s1) 0%, var(--s2) 52%, var(--s3) 100%);
	transition: background 1.2s ease; color: var(--tone-fg); }
.pi-sky[data-phase="night"]   { --s1: #0A1430; --s2: #15254A; --s3: #2A375E; --stars: 1; --r1: rgba(28, 58, 78, .9); --r2: rgba(10, 44, 50, .95); --tone-fg: #FFF8EA; --tone-fg2: rgba(244, 235, 219, .82); }
.pi-sky[data-phase="fajr"]    { --s1: #16224A; --s2: #4B4C7C; --s3: #C98D72; --stars: .55; --r1: rgba(40, 52, 88, .85); --r2: rgba(12, 48, 56, .95); --tone-fg: #FFF8EA; --tone-fg2: rgba(244, 235, 219, .85); }
.pi-sky[data-phase="sunrise"] { --s1: #5C7FAE; --s2: #E0AE8C; --s3: #F4D3A8; --r1: rgba(90, 84, 110, .5); --r2: rgba(15, 76, 80, .78); }
.pi-sky[data-phase="day"]     { --s1: #5E9CC6; --s2: #9FC6DF; --s3: #EEDFC2; }
.pi-sky[data-phase="asr"]     { --s1: #7CA2BF; --s2: #DDC49A; --s3: #F1D8AA; --r1: rgba(120, 104, 70, .35); --r2: rgba(15, 76, 80, .7); }
.pi-sky[data-phase="maghrib"] { --s1: #283660; --s2: #A6556A; --s3: #EE9C62; --stars: .2; --r1: rgba(70, 40, 70, .7); --r2: rgba(20, 40, 52, .95); --tone-fg: #FFF8EA; --tone-fg2: rgba(255, 240, 225, .88); }
.pi-sky[data-phase="isha"]    { --s1: #0C1733; --s2: #1B2A50; --s3: #3A3D6A; --stars: .85; --r1: rgba(30, 48, 80, .9); --r2: rgba(10, 44, 50, .95); --tone-fg: #FFF8EA; --tone-fg2: rgba(244, 235, 219, .82); }
.pi-sky__stars { position: absolute; inset: 0; width: 100%; height: 100%; opacity: var(--stars); transition: opacity 1.2s ease; pointer-events: none; }
.pi-sky__body { position: absolute; width: 74px; height: 74px; border-radius: 50%; left: var(--bx, 50%); top: var(--by, 8%); transition: left 1.2s ease, top 1.2s ease, background 1.2s, box-shadow 1.2s; background: radial-gradient(circle at 40% 40%, #FFF6DC, #F7D98A 60%, #EDBD5E); box-shadow: 0 0 60px 20px rgba(247, 217, 138, .35); pointer-events: none; }
.pi-sky[data-phase="night"] .pi-sky__body, .pi-sky[data-phase="isha"] .pi-sky__body, .pi-sky[data-phase="fajr"] .pi-sky__body { width: 54px; height: 54px; background: transparent; box-shadow: 14px -10px 0 0 #F3E6C4; transform: rotate(-20deg); filter: drop-shadow(0 0 18px rgba(243, 230, 196, .35)); }
.pi-sky__ridge { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(110px, 15vw, 230px); }
.pi-sky .pi-wrap { position: relative; z-index: 2; }
.pi-sky .pi-eyebrow { color: var(--tone-fg); opacity: .85; }
.pi-sky .pi-hero__title { color: var(--tone-fg); font-size: clamp(2.8rem, 6.4vw, 5.2rem); max-width: 12ch; }
.pi-sky .pi-hero__title em { font-style: italic; font-weight: 500; color: inherit; }
.pi-sky .pi-lede { color: var(--tone-fg2); }
.pi-sky[data-phase="night"] .pi-btn--ghost, .pi-sky[data-phase="isha"] .pi-btn--ghost, .pi-sky[data-phase="fajr"] .pi-btn--ghost, .pi-sky[data-phase="maghrib"] .pi-btn--ghost { --fg: #FFF8EA; --bd: rgba(255, 248, 234, .45); --bg-h: rgba(255, 248, 234, .1); }
.pi-doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 30px; max-width: 640px; }
@media (max-width: 560px) { .pi-doors { grid-template-columns: minmax(0, 1fr); } }
.pi-door { display: block; padding: 14px 16px; border-radius: 16px; text-decoration: none; background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .65); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--pi-teal-900); transition: transform .3s var(--pi-ease), background-color .3s; }
.pi-door:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .75); color: var(--pi-teal-900); }
.pi-door b { display: block; font-size: .95rem; }
.pi-door span { display: block; font-size: .84rem; color: var(--pi-ink-3); line-height: 1.4; margin-top: 2px; }
.pi-sky[data-phase="night"] .pi-door, .pi-sky[data-phase="isha"] .pi-door, .pi-sky[data-phase="fajr"] .pi-door, .pi-sky[data-phase="maghrib"] .pi-door { background: rgba(255, 248, 234, .08); border-color: rgba(255, 248, 234, .18); color: #FFF8EA; }
.pi-sky[data-phase="night"] .pi-door span, .pi-sky[data-phase="isha"] .pi-door span, .pi-sky[data-phase="fajr"] .pi-door span, .pi-sky[data-phase="maghrib"] .pi-door span { color: rgba(244, 235, 219, .75); }

/* ---------- cards ---------- */
.pi-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: clamp(22px, 2.6vw, 30px); background: var(--pi-white); border: 1px solid var(--pi-line); border-radius: var(--pi-radius); box-shadow: 0 1px 2px rgba(8, 57, 61, .04); color: var(--pi-ink); text-decoration: none; transition: transform .35s var(--pi-ease), box-shadow .35s var(--pi-ease), border-color .35s; }
.pi-card h3, .pi-card .pi-card__h { margin: 0; }
.pi-card .pi-card__h { font-size: clamp(1.2rem, 1.8vw, 1.42rem); letter-spacing: -.01em; }
.pi-card p { margin: 0; color: var(--pi-ink-2); }
a.pi-card:hover { transform: translateY(-4px); box-shadow: var(--pi-shadow); border-color: rgba(15, 92, 97, .25); color: var(--pi-ink); }
.pi-card__icon { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--pi-teal-50); color: var(--pi-teal-700); margin-bottom: 4px; }
.pi-card__icon .pi-i { width: 24px; height: 24px; }
.pi-card__icon--gold { background: #F7EBCB; color: var(--pi-gold-ink); }
.pi-card__num { font-family: var(--pi-display); font-size: 2.2rem; line-height: 1; color: var(--pi-gold); font-weight: 500; }
.pi-card__tag { align-self: flex-start; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--pi-teal-700); background: var(--pi-teal-50); padding: .35em .7em; border-radius: 999px; }
.pi-card__more { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: .4em; font-weight: 750; color: var(--pi-teal-700); font-size: .95rem; }
.pi-card__more .pi-i { transition: transform .3s var(--pi-ease); }
a.pi-card:hover .pi-card__more .pi-i { transform: translateX(4px); }
.pi-card--sand { background: var(--pi-sand-100); border-color: transparent; }
.pi-card--teal { background: linear-gradient(160deg, var(--pi-teal-700), var(--pi-teal-900)); border-color: transparent; color: var(--pi-on-dark); }
.pi-card--teal h3 { color: #FFF8EA; }
.pi-card--teal p { color: var(--pi-on-dark-2); }
.pi-card--teal .pi-card__more { color: var(--pi-gold-200); }
.pi-card--teal .pi-card__icon { background: rgba(255, 248, 234, .1); color: var(--pi-gold); }
.pi-section--dark .pi-card { background: rgba(255, 248, 234, .06); border-color: rgba(255, 248, 234, .14); color: var(--pi-on-dark); }
.pi-section--dark .pi-card p { color: var(--pi-on-dark-2); }
.pi-section--dark .pi-card h3 { color: #FFF8EA; }
.pi-section--dark .pi-card__icon { background: rgba(255, 248, 234, .1); color: var(--pi-gold); }
.pi-section--dark a.pi-card:hover { border-color: rgba(231, 211, 160, .45); }
.pi-section--dark .pi-card__more { color: var(--pi-gold-200); }

/* pathway chooser */
.pi-paths { display: grid; gap: 12px; }
.pi-path { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 18px; background: var(--pi-white); border: 1px solid var(--pi-line); text-decoration: none; color: var(--pi-ink); transition: transform .3s var(--pi-ease), border-color .3s, box-shadow .3s; }
.pi-path:hover { transform: translateX(4px); border-color: rgba(15, 92, 97, .3); box-shadow: var(--pi-shadow); color: var(--pi-ink); }
.pi-path__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(160deg, #F7EBCB, #EAD5A0); color: var(--pi-gold-ink); }
.pi-path__icon .pi-i { width: 24px; height: 24px; }
.pi-path b { display: block; font-size: 1.05rem; color: var(--pi-teal-900); }
.pi-path span { display: block; color: var(--pi-ink-3); font-size: .93rem; line-height: 1.45; }
.pi-path > .pi-i { color: var(--pi-teal-700); }
.pi-path .pi-path__icon { display: grid; }
.pi-cta .pi-actions { align-items: center; }

/* tiles */
.pi-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.pi-tile { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 14px; padding: 18px 20px; border-radius: 16px; background: var(--pi-white); border: 1px solid var(--pi-line); text-decoration: none; transition: border-color .25s, transform .3s var(--pi-ease); }
.pi-tile:hover { border-color: rgba(15, 92, 97, .35); transform: translateY(-2px); }
.pi-tile__t { font-weight: 750; color: var(--pi-teal-900); }
.pi-tile__d { grid-column: 1; color: var(--pi-ink-3); font-size: .9rem; }
.pi-tile > .pi-i { grid-row: 1 / span 2; grid-column: 2; color: var(--pi-teal-700); }

/* ---------- lists ---------- */
.pi-steps { list-style: none; margin: 0; padding: 0; counter-reset: pi-step; display: grid; gap: 14px; }
.pi-steps > li { counter-increment: pi-step; position: relative; padding: 22px 24px 22px 84px; background: var(--pi-white); border: 1px solid var(--pi-line); border-radius: 18px; }
.pi-steps > li::before { content: counter(pi-step, decimal-leading-zero); position: absolute; left: 22px; top: 20px; font-family: var(--pi-display); font-size: 1.9rem; line-height: 1; color: var(--pi-gold); font-weight: 500; }
.pi-steps > li h3 { margin: 0 0 .3em; font-size: 1.2rem; }
.pi-steps > li p { margin: 0; color: var(--pi-ink-2); }
.pi-steps > li p + p { margin-top: .6em; }
.pi-steps > li ul { margin: .6em 0 0; color: var(--pi-ink-2); }
.pi-steps--line { gap: 0; }
.pi-steps--line > li { background: transparent; border: 0; border-left: 2px solid var(--pi-sand-300); border-radius: 0; padding: 4px 0 28px 44px; margin-left: 18px; }
.pi-steps--line > li::before { left: -19px; top: 0; width: 36px; height: 36px; display: grid; place-items: center; font-size: .95rem; font-family: var(--pi-body); font-weight: 800; color: var(--pi-teal-900); background: var(--pi-gold-200); border-radius: 50%; }
.pi-steps--line > li:last-child { border-left-color: transparent; }
.pi-section--dark .pi-steps > li { background: rgba(255, 248, 234, .06); border-color: rgba(255, 248, 234, .14); }
.pi-section--dark .pi-steps > li p { color: var(--pi-on-dark-2); }
.pi-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pi-checks li { position: relative; padding-left: 34px; }
.pi-checks li::before { content: ""; position: absolute; left: 0; top: .2em; width: 22px; height: 22px; border-radius: 50%; background: var(--pi-teal-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F5C61' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center / 14px no-repeat; }
.pi-checks--x li::before { background: #F6E4DC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A3E1E' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E") center / 12px no-repeat; }
.pi-section--dark .pi-checks li::before { background-color: rgba(255, 248, 234, .12); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E7D3A0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E"); }
.pi-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 22px; margin: 0; }
.pi-kv dt { font-weight: 750; color: var(--pi-teal-900); }
.pi-kv dd { margin: 0; color: var(--pi-ink-2); }
@media (max-width: 560px) { .pi-kv { grid-template-columns: minmax(0, 1fr); gap: 2px; } .pi-kv dd { margin-bottom: 10px; } }

/* ---------- FAQ ---------- */
.pi-faq { display: grid; gap: 10px; }
.pi-faq details { background: var(--pi-white); border: 1px solid var(--pi-line); border-radius: 16px; transition: border-color .25s, box-shadow .25s; }
.pi-faq details[open] { border-color: rgba(15, 92, 97, .3); box-shadow: var(--pi-shadow); }
.pi-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; cursor: pointer; list-style: none; font-weight: 750; font-size: 1.04rem; color: var(--pi-teal-900); }
.pi-faq summary::-webkit-details-marker { display: none; }
.pi-faq summary::after { content: ""; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--pi-teal-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F5C61' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform .3s var(--pi-ease); }
.pi-faq details[open] summary::after { transform: rotate(45deg); }
.pi-faq .pi-faq__a { padding: 0 22px 20px; color: var(--pi-ink-2); }
.pi-faq .pi-faq__a p:last-child { margin-bottom: 0; }
.pi-section--dark .pi-faq details { background: rgba(255, 248, 234, .06); border-color: rgba(255, 248, 234, .14); }
.pi-section--dark .pi-faq summary { color: #FFF8EA; }
.pi-section--dark .pi-faq .pi-faq__a { color: var(--pi-on-dark-2); }

/* ---------- notes and callouts ---------- */
.pi-note { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 16px; background: var(--pi-teal-50); border: 1px solid var(--pi-teal-100); color: var(--pi-ink-2); }
.pi-note > .pi-i { color: var(--pi-teal-700); width: 22px; height: 22px; margin-top: 2px; }
.pi-note p { margin: 0; }
.pi-note p + p { margin-top: .5em; }
.pi-note strong { color: var(--pi-teal-900); }
.pi-note--gold { background: #FAF1DC; border-color: #EEDDB2; }
.pi-note--gold > .pi-i { color: var(--pi-gold-ink); }
.pi-note--boundary { background: #FBEDE6; border-color: #F0D2C3; }
.pi-note--boundary > .pi-i { color: #9A3E1E; }
.pi-note--boundary strong { color: #6E2A12; }
.pi-section--dark .pi-note { background: rgba(255, 248, 234, .07); border-color: rgba(255, 248, 234, .16); color: var(--pi-on-dark-2); }
.pi-section--dark .pi-note strong { color: #FFF8EA; }
.pi-section--dark .pi-note > .pi-i { color: var(--pi-gold); }

/* verse and quotation */
.pi-verse { margin: 0; padding: clamp(26px, 4vw, 44px); border-radius: var(--pi-radius); background: linear-gradient(160deg, #FFFDF8, var(--pi-sand-100)); border: 1px solid var(--pi-sand-200); text-align: center; position: relative; }
.pi-verse__ar { font-family: var(--pi-arabic); font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 2; color: var(--pi-teal-900); margin: 0 0 .4em; direction: rtl; }
.pi-verse__en { font-family: var(--pi-display); font-style: italic; font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.5; color: var(--pi-ink-2); margin: 0 auto .8em; max-width: 46ch; }
.pi-verse cite { font-style: normal; font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pi-gold-ink); }
.pi-section--dark .pi-verse { background: rgba(255, 248, 234, .05); border-color: rgba(231, 211, 160, .22); }
.pi-section--dark .pi-verse__ar { color: #FFF8EA; }
.pi-section--dark .pi-verse__en { color: var(--pi-on-dark-2); }
.pi-section--dark .pi-verse cite { color: var(--pi-gold); }
.pi-pull { font-family: var(--pi-display); font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.35; color: var(--pi-teal-900); margin: 0; font-weight: 500; }
.pi-section--dark .pi-pull { color: #FFF8EA; }

/* ornament divider */
.pi-orn { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--pi-gold); margin: 0 auto; }
.pi-orn::before, .pi-orn::after { content: ""; height: 1px; width: min(120px, 20vw); background: linear-gradient(90deg, transparent, currentColor); }
.pi-orn::after { transform: scaleX(-1); }
.pi-orn span { width: 14px; height: 14px; background: currentColor; clip-path: polygon(50% 0, 63% 37%, 100% 50%, 63% 63%, 50% 100%, 37% 63%, 0 50%, 37% 37%); }

/* long-form reading */
.pi-prose { font-size: 1.08rem; line-height: 1.75; color: var(--pi-ink-2); }
.pi-prose h2 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); margin: 2em 0 .5em; }
.pi-prose h3 { margin: 1.6em 0 .4em; }
.pi-prose > :first-child { margin-top: 0; }
.pi-prose ul, .pi-prose ol { margin: 0 0 1.2em; }
.pi-prose li { margin-bottom: .4em; }
.pi-prose blockquote { margin: 1.5em 0; padding: .3em 0 .3em 1.2em; border-left: 3px solid var(--pi-gold); font-family: var(--pi-display); font-size: 1.2rem; color: var(--pi-teal-900); }
.pi-prose table { width: 100%; border-collapse: collapse; margin: 1.2em 0 1.6em; font-size: .98rem; }
.pi-prose th, .pi-prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--pi-line); vertical-align: top; }
.pi-prose th { color: var(--pi-teal-900); font-weight: 750; background: var(--pi-sand-100); }
.pi-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; padding: 0; list-style: none; }
.pi-toc a { display: inline-block; padding: .45em .95em; border-radius: 999px; background: var(--pi-white); border: 1px solid var(--pi-line); font-size: .9rem; font-weight: 700; text-decoration: none; color: var(--pi-teal-800); }
.pi-toc a:hover { border-color: var(--pi-teal-700); }
.pi-doc { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.pi-doc__nav { position: sticky; top: calc(var(--pi-hdr-h) + 24px); font-size: .92rem; }
.pi-doc__nav ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--pi-sand-200); }
.pi-doc__nav a { display: block; padding: 6px 0 6px 16px; margin-left: -2px; border-left: 2px solid transparent; color: var(--pi-ink-3); text-decoration: none; font-weight: 600; }
.pi-doc__nav a:hover, .pi-doc__nav a.is-active { color: var(--pi-teal-800); border-left-color: var(--pi-gold); }
@media (max-width: 900px) { .pi-doc { grid-template-columns: minmax(0, 1fr); } .pi-doc__nav { position: static; } }

/* tables */
.pi-table-wrap { overflow-x: auto; border-radius: 16px; border: 1px solid var(--pi-line); background: var(--pi-white); }
.pi-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.pi-table th, .pi-table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--pi-line); white-space: nowrap; }
.pi-table thead th { position: sticky; top: 0; background: var(--pi-sand-100); color: var(--pi-teal-900); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.pi-table tbody tr:last-child td { border-bottom: 0; }
.pi-table tr.is-friday td { background: #FBF4E3; }
.pi-table tr.is-today td { background: var(--pi-teal-50); font-weight: 750; }
.pi-table tr.is-today td:first-child { box-shadow: inset 3px 0 0 var(--pi-teal-700); }

.pi-table--wrap th, .pi-table--wrap td { white-space: normal; vertical-align: top; min-width: 120px; }
.pi-table td.pi-ar, .pi-table td[lang="ar"] { font-family: var(--pi-arabic); font-size: 1.4rem; line-height: 1.9; text-align: right; direction: rtl; min-width: 220px; color: var(--pi-teal-900); }
.pi-section--dark .pi-small { color: var(--pi-on-dark-2); }

/* badges */
.pi-badge { display: inline-flex; align-items: center; gap: .35em; padding: .3em .7em; border-radius: 999px; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: var(--pi-teal-50); color: var(--pi-teal-800); }
.pi-badge--gold { background: #F7EBCB; color: var(--pi-gold-ink); }

/* ---------- CTA band ---------- */
.pi-cta { position: relative; overflow: hidden; border-radius: 28px; padding: clamp(36px, 6vw, 72px); background: radial-gradient(70% 90% at 100% 0%, rgba(201, 162, 75, .28), transparent 60%), radial-gradient(60% 80% at 0% 100%, rgba(43, 127, 118, .5), transparent 60%), var(--pi-teal-900); color: var(--pi-on-dark); --r1: rgba(231, 211, 160, .08); --r2: rgba(244, 235, 219, .07); --r3: rgba(5, 42, 45, .6); }
.pi-cta h2 { color: #FFF8EA; max-width: 20ch; }
.pi-cta p { color: var(--pi-on-dark-2); max-width: 58ch; }
.pi-cta > * { position: relative; z-index: 1; }
.pi-cta .pi-ridge { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 90px; z-index: 0; }
.pi-cta--center { text-align: center; }
.pi-cta--center h2, .pi-cta--center p { margin-inline: auto; }
.pi-cta--center .pi-actions { justify-content: center; }

/* spacing utilities */
.pi-mt-0 { margin-top: 0 !important; }
.pi-mt-s { margin-top: 16px; }
.pi-mt-m { margin-top: 28px; }
.pi-mt-l { margin-top: 48px; }
.pi-head--center .pi-lede { margin-inline: auto; }
.pi-cta .pi-eyebrow { color: var(--pi-gold); }
.pi-cta a:not(.pi-btn) { color: var(--pi-gold-200); }
.pi-cta__label { font-size: .88rem; color: var(--pi-gold-200); margin-bottom: 10px; }
.pi-cta .pi-count__cell { background: rgba(255, 248, 234, .08); }

/* ---------- prayer (plugin surfaces) ---------- */
.pi-prayer { background: rgba(251, 249, 244, .97); border: 1px solid rgba(255, 255, 255, .9); border-radius: 24px; box-shadow: var(--pi-shadow-lg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); padding: 22px; color: var(--pi-ink); }
.pi-prayer__top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pi-prayer__title { margin: 0; font-family: var(--pi-display); font-size: 1.2rem; color: var(--pi-teal-900); }
.pi-prayer__date { margin: 0; font-size: .82rem; color: var(--pi-ink-3); font-weight: 600; }
.pi-prayer__next { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 4px 12px; margin: 16px 0; padding: 16px 18px; border-radius: 18px; background: linear-gradient(160deg, var(--pi-teal-700), var(--pi-teal-900)); color: var(--pi-on-dark); }
.pi-prayer__nl { grid-column: 1 / -1; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--pi-gold-200); }
.pi-prayer__nn { font-family: var(--pi-display); font-size: 1.9rem; line-height: 1.05; color: #FFF8EA; }
.pi-prayer__nt { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; color: #FFF8EA; }
.pi-prayer__nc { grid-column: 1 / -1; font-size: .9rem; color: var(--pi-on-dark-2); font-variant-numeric: tabular-nums; }
.pi-prayer__list { list-style: none; margin: 0; padding: 0; display: grid; }
.pi-prayer__list li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 8px; border-bottom: 1px solid var(--pi-line); font-variant-numeric: tabular-nums; }
.pi-prayer__list li:last-child { border-bottom: 0; }
.pi-prayer__list .pi-i { color: var(--pi-teal-600); width: 20px; height: 20px; }
.pi-prayer__list b { font-weight: 750; color: var(--pi-teal-900); }
.pi-prayer__list small { display: block; font-weight: 500; color: var(--pi-ink-3); font-size: .78rem; }
.pi-prayer__list time { font-weight: 800; color: var(--pi-ink); }
.pi-prayer__list li.is-marker b, .pi-prayer__list li.is-marker time { color: var(--pi-ink-3); font-weight: 600; }
.pi-prayer__list li.is-current { background: var(--pi-teal-50); border-radius: 12px; border-bottom-color: transparent; }
.pi-prayer__list li.is-next time { color: var(--pi-teal-700); }
.pi-prayer__foot { margin: 14px 0 0; font-size: .82rem; color: var(--pi-ink-3); line-height: 1.5; }
.pi-prayer__foot a { font-weight: 700; }
.pi-prayer--wide { background: var(--pi-white); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--pi-line); box-shadow: var(--pi-shadow); padding: clamp(20px, 3vw, 30px); }
.pi-monthnav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.pi-monthnav h3 { margin: 0; }
.pi-monthnav nav { display: flex; gap: 8px; }
.pi-qibla { display: flex; align-items: center; gap: 18px; }
.pi-qibla__dial { position: relative; width: 108px; height: 108px; flex: none; border-radius: 50%; background: radial-gradient(circle, #fff 55%, var(--pi-sand-100) 56%); border: 1px solid var(--pi-sand-200); }
.pi-qibla__dial::before { content: "N"; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); font-size: .7rem; font-weight: 800; color: var(--pi-ink-3); }
.pi-qibla__needle { position: absolute; left: 50%; top: 50%; width: 4px; height: 44px; margin-left: -2px; margin-top: -44px; background: linear-gradient(var(--pi-gold), var(--pi-teal-700)); border-radius: 4px; transform-origin: 50% 100%; transform: rotate(var(--deg)); }
.pi-qibla__needle::after { content: ""; position: absolute; top: -6px; left: -4px; border: 6px solid transparent; border-bottom: 9px solid var(--pi-gold); border-top: 0; }

/* countdown */
.pi-count { display: flex; gap: 10px; flex-wrap: wrap; }
.pi-count__cell { min-width: 84px; padding: 14px 12px; border-radius: 16px; text-align: center; background: rgba(255, 248, 234, .08); border: 1px solid rgba(255, 248, 234, .18); }
.pi-count__n { display: block; font-family: var(--pi-display); font-size: 2.2rem; line-height: 1; color: #FFF8EA; font-variant-numeric: tabular-nums; }
.pi-count__l { display: block; margin-top: 6px; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--pi-gold-200); }

/* dates list */
.pi-dates { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pi-dates li { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 16px; border-radius: 16px; background: var(--pi-white); border: 1px solid var(--pi-line); }
.pi-dates__d { text-align: center; padding: 8px 0; border-radius: 12px; background: var(--pi-sand-100); line-height: 1.1; }
.pi-dates__m { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--pi-gold-ink); }
.pi-dates__n { display: block; font-family: var(--pi-display); font-size: 1.7rem; color: var(--pi-teal-900); }
.pi-dates__y { display: block; font-size: .72rem; color: var(--pi-ink-3); }
.pi-dates b { display: block; color: var(--pi-teal-900); font-size: 1.05rem; }
.pi-dates span { color: var(--pi-ink-3); font-size: .92rem; }

/* masjid card */
.pi-masjid { display: grid; gap: 16px; padding: clamp(22px, 3vw, 32px); border-radius: var(--pi-radius); background: var(--pi-white); border: 1px solid var(--pi-line); box-shadow: var(--pi-shadow); }
.pi-masjid__name { margin: 0; font-size: 1.5rem; }
.pi-masjid__aka { margin: -8px 0 0; color: var(--pi-ink-3); font-size: .92rem; }
.pi-masjid__rows { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pi-masjid__rows li { display: flex; gap: 12px; align-items: flex-start; }
.pi-masjid__rows .pi-i { color: var(--pi-teal-700); margin-top: 3px; }

/* ---------- forms (Fluent Forms, restyled) ---------- */
.pi-form { padding: clamp(22px, 3.4vw, 36px); border-radius: var(--pi-radius); background: var(--pi-white); border: 1px solid var(--pi-line); box-shadow: var(--pi-shadow); }
.pi-form h2, .pi-form h3 { margin-top: 0; }
.pi-form .fluentform .ff-el-group { margin-bottom: 18px; }
.pi-form .fluentform .ff-el-input--label label { font-weight: 750; color: var(--pi-teal-900); font-size: .95rem; }
.pi-form .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after { color: #9A3E1E; }
.pi-form .fluentform .ff-el-form-control { border: 1.5px solid var(--pi-line-2); border-radius: 12px; padding: 12px 14px; font: 500 1rem var(--pi-body); color: var(--pi-ink); background: #FFFEFB; min-height: 48px; transition: border-color .2s, box-shadow .2s; }
.pi-form .fluentform textarea.ff-el-form-control { min-height: 140px; line-height: 1.55; }
.pi-form .fluentform .ff-el-form-control:focus { border-color: var(--pi-teal-700); box-shadow: 0 0 0 4px rgba(15, 92, 97, .12); outline: none; }
.pi-form .fluentform .ff-el-help-message { color: var(--pi-ink-3); font-size: .86rem; font-style: normal; }
.pi-form .fluentform .ff-el-form-check-label { font-weight: 500; color: var(--pi-ink-2); }
.pi-form .fluentform .ff-el-form-check { margin-bottom: 6px; }
.pi-form .fluentform input[type="checkbox"], .pi-form .fluentform input[type="radio"] { accent-color: var(--pi-teal-700); width: 18px; height: 18px; vertical-align: -3px; }
.pi-form .fluentform .ff-btn-submit { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: .8em 1.6em; border: 0; border-radius: 999px; background: var(--pi-teal-700) !important; color: #fff !important; font: 750 1rem var(--pi-body); cursor: pointer; box-shadow: 0 10px 24px -12px rgba(8, 57, 61, .6); transition: background-color .2s, transform .3s var(--pi-ease); }
.pi-form .fluentform .ff-btn-submit:hover { background: var(--pi-teal-800) !important; transform: translateY(-1px); }
.pi-form .fluentform .error, .pi-form .fluentform .text-danger { color: #9A3E1E; font-size: .88rem; }
.pi-form .ff-message-success { border: 0; border-radius: 14px; background: var(--pi-teal-50); color: var(--pi-teal-900); padding: 18px 20px; box-shadow: none; }
.pi-form .ff_tc_checkbox { font-size: .92rem; color: var(--pi-ink-2); }
.pi-form .ff-el-section-break h3 { font-size: 1.1rem; }
.pi-form__meta { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--pi-line); font-size: .88rem; color: var(--pi-ink-3); }
.pi-form__meta .pi-i { color: var(--pi-teal-700); margin-top: 2px; }
.pi-form .ff-el-group.pi-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- posts ---------- */
.pi-postlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pi-postlist__item { display: grid; gap: 4px; padding: 22px 24px; border-radius: 18px; background: var(--pi-white); border: 1px solid var(--pi-line); text-decoration: none; }
.pi-postlist__item:hover { border-color: rgba(15, 92, 97, .35); }
.pi-postlist__t { font-family: var(--pi-display); font-size: 1.35rem; color: var(--pi-teal-900); }
.pi-postlist__d { color: var(--pi-ink-2); }
.pi-postlist__m { font-size: .82rem; color: var(--pi-ink-3); }
.pi-pager { margin-top: 24px; display: flex; gap: 8px; }
.pi-pager a, .pi-pager span { padding: .5em .9em; border-radius: 10px; border: 1px solid var(--pi-line); text-decoration: none; }
.pi-article__meta { color: var(--pi-ink-3); font-size: .92rem; }

/* ---------- footer ---------- */
.pi-ftr { position: relative; margin-top: clamp(40px, 6vw, 80px); color: var(--pi-on-dark); --r1: rgba(15, 92, 97, .22); --r2: rgba(11, 74, 79, .55); --r3: var(--pi-teal-900); }
.pi-ftr__ridge { display: block; width: 100%; height: clamp(60px, 8vw, 120px); margin-bottom: -1px; }
.pi-ftr__body { background: var(--pi-teal-900); padding: clamp(28px, 4vw, 48px) 0 calc(28px + env(safe-area-inset-bottom)); }
.pi-ftr__top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 32px; padding-bottom: 36px; }
@media (max-width: 1080px) { .pi-ftr__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pi-ftr__brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .pi-ftr__top { grid-template-columns: minmax(0, 1fr); } }
.pi-ftr__mission { color: var(--pi-on-dark-2); max-width: 36ch; margin: 18px 0 14px; font-size: .98rem; }
.pi-ftr__mail { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--pi-gold-200); }
.pi-ftr__mail a { color: var(--pi-gold-200); font-weight: 700; }
.pi-ftr__h { font-family: var(--pi-body); font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--pi-gold); margin: 6px 0 14px; }
.pi-ftr__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.pi-ftr__col a { color: var(--pi-on-dark); text-decoration: none; font-size: .95rem; opacity: .9; }
.pi-ftr__col a:hover { color: #fff; opacity: 1; text-decoration: underline; }
.pi-ftr__masjid { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 16px; align-items: center; padding: 20px 22px; border-radius: 18px; background: rgba(255, 248, 234, .06); border: 1px solid rgba(255, 248, 234, .12); }
.pi-ftr__masjid-icon { grid-row: 1 / span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(201, 162, 75, .16); color: var(--pi-gold); }
.pi-ftr__masjid p { margin: 0; color: var(--pi-on-dark); font-size: .95rem; }
.pi-ftr__masjid a { color: var(--pi-gold-200); font-weight: 700; }
.pi-ftr__masjid .pi-ftr__independent { color: var(--pi-on-dark-2); font-size: .88rem; }
.pi-ftr__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 28px; padding: 26px 0 0; font-size: .86rem; color: var(--pi-on-dark-2); }
.pi-ftr__legal p { margin: 0; max-width: 70ch; }
.pi-ftr__legal ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.pi-ftr__legal a { color: var(--pi-on-dark); }
.pi-ftr__credit { text-align: center; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .08); }
.pi-ftr__pill { display: inline-block; padding: .3rem .85rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); font-size: .72rem; font-weight: 500; letter-spacing: .04em; color: rgba(255, 255, 255, .55); text-decoration: none; transition: color .2s ease, border-color .2s ease; }
.pi-ftr__pill:hover { color: rgba(255, 255, 255, .88); border-color: rgba(255, 255, 255, .35); }

/* mobile quick bar */
.pi-mbar { display: none; }
@media (max-width: 760px) {
	.pi-mbar { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 890; display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px; border-radius: 20px; background: rgba(8, 57, 61, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 18px 40px -18px rgba(5, 42, 45, .7); transition: transform .35s var(--pi-ease), opacity .35s; }
	.pi-mbar a { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border-radius: 14px; color: var(--pi-on-dark); text-decoration: none; font-size: .72rem; font-weight: 700; }
	.pi-mbar a:hover, .pi-mbar a:focus-visible { background: rgba(255, 248, 234, .1); }
	.pi-mbar .pi-i { width: 22px; height: 22px; color: var(--pi-gold); }
	.pi-mbar.is-away { transform: translateY(140%); opacity: 0; }
	.pi-ftr__body { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
}

/* ---------- motion ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--pi-ease), transform .8s var(--pi-ease); transition-delay: var(--d, 0ms); }
.js [data-reveal="left"] { transform: translateX(-22px); }
.js [data-reveal="right"] { transform: translateX(22px); }
.js [data-reveal="scale"] { transform: scale(.96); }
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal].is-in, .js.pi-reveal-all [data-reveal] { opacity: 1; transform: none; }
.pi-fx-glow { position: fixed; left: 0; top: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; pointer-events: none; z-index: 1; background: radial-gradient(circle, rgba(15, 92, 97, .07), transparent 62%); opacity: 0; transition: opacity .6s; }
.pi-fx-ring { position: fixed; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 1.5px solid rgba(201, 162, 75, .45); pointer-events: none; z-index: 999; opacity: 0; transition: width .25s, height .25s, margin .25s, border-color .25s, opacity .4s; }
.pi-fx-dot { position: fixed; left: 0; top: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--pi-gold); pointer-events: none; z-index: 999; opacity: 0; transition: opacity .4s; }
body.pi-fx-on .pi-fx-glow, body.pi-fx-on .pi-fx-ring, body.pi-fx-on .pi-fx-dot { opacity: 1; }
body.pi-hover-cta .pi-fx-ring { width: 56px; height: 56px; margin: -28px 0 0 -28px; border-color: rgba(201, 162, 75, .7); }
body.pi-hover-card .pi-fx-ring { width: 46px; height: 46px; margin: -23px 0 0 -23px; border-color: rgba(15, 92, 97, .4); }
body.pi-hover-link .pi-fx-ring { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
.pi-particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
	body { animation: none; }
	.js [data-reveal] { opacity: 1; transform: none; }
	.pi-fx-glow, .pi-fx-ring, .pi-fx-dot { display: none; }
}
@media (pointer: coarse) { .pi-fx-glow, .pi-fx-ring, .pi-fx-dot { display: none; } }

/* ---------- print ---------- */
@media print {
	body { padding: 0; background: #fff; animation: none; }
	.pi-hdr, .pi-drawer, .pi-find, .pi-mbar, .pi-progress, .pi-ftr__ridge, .pi-hero__ridge, .pi-sky__ridge, .pi-fx-glow, .pi-fx-ring, .pi-fx-dot, .pi-season { display: none !important; }
	.pi-ftr__body { background: #fff; color: #000; }
	.js [data-reveal] { opacity: 1 !important; transform: none !important; }
	.pi-section--dark, .pi-hero--dark, .pi-cta, .pi-sky { background: #fff !important; color: #000 !important; }
	a { color: #000; }
}
.pi-mb-l { margin-bottom: 56px; }
@media (max-width: 960px) {
	.pi-sky__body { left: auto !important; right: 22px; top: 22px !important; width: 46px; height: 46px; }
	.pi-sky[data-phase="night"] .pi-sky__body, .pi-sky[data-phase="isha"] .pi-sky__body, .pi-sky[data-phase="fajr"] .pi-sky__body { width: 38px; height: 38px; box-shadow: 10px -7px 0 0 #F3E6C4; right: 34px; }
	.pi-sky .pi-hero__title { max-width: 10.5ch; }
}

/* The pill hides whenever the full menu shows: the header has no room for both. Spanish labels
   run longer, so the Spanish header keeps the menu button until 1320px. */
@media (min-width: 1240px) { html:not([lang^="es"]) .pi-hdr__tools .pi-pill { display: none; } }
@media (max-width: 1319px) { html[lang^="es"] .pi-nav { display: none; } html[lang^="es"] .pi-hdr__tools { margin-left: auto; } html[lang^="es"] .pi-hdr__menu { display: inline-grid; } }
@media (min-width: 1320px) { html[lang^="es"] .pi-hdr__tools .pi-pill { display: none; } html[lang^="es"] .pi-nav__link, html[lang^="es"] .pi-nav__btn { padding: 0 .5em; } html[lang^="es"] .pi-nav + .pi-hdr__tools { margin-left: 6px; } }

/* sideways-scrolling tables say so: a fade on the edge that still has columns, and a hint */
.pi-table-wrap { position: relative; }
.pi-table-scroll { position: relative; }
.pi-table-scroll::after { content: ""; position: absolute; top: 1px; bottom: 1px; right: 1px; width: 44px; border-radius: 0 16px 16px 0; background: linear-gradient(to left, rgba(255, 255, 255, .96), rgba(255, 255, 255, 0)); pointer-events: none; opacity: 0; transition: opacity .25s; }
.pi-table-scroll.is-scrollable::after { opacity: 1; }
.pi-table-scroll.is-scrollable.at-end::after { opacity: 0; }
.pi-table-hint { display: none; margin: 0 0 8px; font-size: .84rem; font-weight: 700; color: var(--pi-ink-3); }
.pi-table-scroll.is-scrollable + .pi-table-hint, .pi-table-hint.is-on { display: block; }
.pi-section--dark .pi-table-hint { color: var(--pi-on-dark-2); }

/* Tables keep their own light surface, so inside dark sections they keep dark ink. */
.pi-section--dark .pi-table-wrap, .pi-section--dark .pi-table-wrap td, .pi-section--dark .pi-table-wrap th { color: var(--pi-ink); }
.pi-section--dark .pi-table-wrap thead th { color: var(--pi-teal-900); }
.pi-section--dark .pi-table-wrap td.pi-ar, .pi-section--dark .pi-table-wrap td[lang="ar"] { color: var(--pi-teal-900); }
.pi-section--dark .pi-table-scroll::after { background: linear-gradient(to left, rgba(255, 255, 255, .96), rgba(255, 255, 255, 0)); }

/* Long addresses in running text wrap instead of widening the page on phones. */
code { overflow-wrap: anywhere; word-break: break-word; font-size: .92em; padding: .1em .35em; border-radius: 6px; background: rgba(15, 92, 97, .08); }
.pi-note p, .pi-card p, .pi-card li, .pi-checks li, .pi-faq__a { overflow-wrap: anywhere; }

/* ------------------------------------------------ language switch (EN / ES) */
.pi-lang { display: inline-flex; align-items: center; gap: .4em; height: 40px; padding: 0 .75em; border-radius: 999px; border: 1px solid var(--pi-line-2); background: var(--pi-white); color: var(--pi-teal-900); font-weight: 700; font-size: .86rem; text-decoration: none; white-space: nowrap; transition: background-color .2s, border-color .2s; }
.pi-lang:hover { background: var(--pi-teal-50); border-color: var(--pi-teal-200); color: var(--pi-teal-900); }
.pi-lang .pi-i { width: 18px; height: 18px; color: var(--pi-teal-600); }
.pi-lang__short { letter-spacing: .04em; }
.pi-drawer__lang { display: flex; align-items: center; justify-content: flex-start; gap: 12px; margin: 0 0 6px; padding: 14px 16px; border-radius: 14px; background: var(--pi-teal-50); color: var(--pi-teal-900); font-weight: 750; text-decoration: none; }
.pi-drawer__lang .pi-i { width: 20px; height: 20px; color: var(--pi-teal-600); }
.pi-ftr__lang { display: inline-flex; align-items: center; gap: .4em; color: var(--pi-gold-200); font-weight: 700; text-decoration: none; }
.pi-ftr__lang:hover { color: #FFF8EA; }
.pi-ftr__lang .pi-i { width: 18px; height: 18px; }

/* ------------------------------------------------------- halal listings */
.pi-halal { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.pi-halal__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.pi-halal__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.pi-tag { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; background: var(--pi-teal-50); color: var(--pi-teal-800); font-weight: 700; font-size: .8rem; line-height: 1.3; }
.pi-tag--gold { background: #F6EDD6; color: var(--pi-gold-ink); }
.pi-halal__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.pi-halal__facts li { display: inline-flex; align-items: center; gap: .45em; min-width: 0; overflow-wrap: anywhere; }
.pi-halal__facts .pi-i { width: 18px; height: 18px; flex: none; color: var(--pi-teal-600); }
.pi-halal-empty > .pi-i { width: 30px; height: 30px; color: var(--pi-gold-ink); }