/* Noor-e-Hidayah — premium icons + brand polish. Loaded last on every page. */

/* ---------- the icon boxes become transparent holders for the gem ---------- */
.pi-host {
  display: inline-flex !important;
  align-items: center; justify-content: center;
  width: auto !important; height: auto !important;
  min-width: 0 !important; min-height: 0 !important;
  padding: 0 !important; margin-block: 0;
  background: none !important; border: 0 !important; box-shadow: none !important;
  border-radius: 0 !important;
  font-size: 0 !important; line-height: 0 !important; color: transparent !important;
  text-shadow: none !important; -webkit-text-fill-color: transparent;
  flex: 0 0 auto;
}
.pi-host::before, .pi-host::after { content: none !important; }

.pi {
  --pi-size: 46px;
  width: var(--pi-size); height: var(--pi-size);
  display: block; overflow: visible;
  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .42)) drop-shadow(0 0 9px rgba(226, 191, 102, .22));
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), filter .35s ease;
}
/* big on the topic tiles, medium in cards, small in menus and inline marks */
.hs-ico .pi { --pi-size: 70px; }
.start-card-icon .pi, .foundation-icon .pi, .intro-icon .pi, .tradition-icon .pi, .welcome-icon .pi, .empty-icon .pi { --pi-size: 66px; }
.topic-icon .pi, .prophet-icon .pi, .lesson-icon .pi, .person-icon .pi, .z-level-icon .pi, .level-icon .pi,
.journey-step-icon .pi, .featured-icon .pi, .how-icon .pi, .prayer-icon .pi { --pi-size: 54px; }
.menu-icon .pi, .more-icon .pi, .daily-icon .pi, .card-icon .pi, .today-icon .pi, .event-icon .pi,
.dash-stat-icon .pi, .modal-icon .pi, .trust-icon .pi, .info-icon .pi, .progress-icon .pi, .next-icon .pi,
.z-next-icon .pi, .reminder-icon .pi, .practice-icon .pi, .message-icon .pi, .grading-icon .pi, .takeaway-icon .pi,
.checklist-icon .pi, .why-quran-icon .pi, .location-icon .pi { --pi-size: 38px; }
.icon .pi, .result-icon .pi, .logo-symbol .pi, .search-icon .pi { --pi-size: 32px; }

/* hover on anything that is a link/card: the gem lifts a little and glows */
a:hover .pi, .pc-card:hover .pi, button:hover .pi {
  transform: translateY(-3px) scale(1.07);
  filter: drop-shadow(0 9px 11px rgba(0, 0, 0, .5)) drop-shadow(0 0 15px rgba(240, 207, 122, .5));
}
@media (max-width: 640px) {
  .hs-ico .pi { --pi-size: 58px; }
  .start-card-icon .pi, .foundation-icon .pi, .intro-icon .pi { --pi-size: 50px; }
}
@media (prefers-reduced-motion: reduce) { .pi { transition: none; } a:hover .pi, .pc-card:hover .pi { transform: none; } }

/* ---------- brand logo: gold ring + soft light ---------- */
.noor-brand-mark {
  position: relative; border-radius: 50% !important;
  background: radial-gradient(circle at 35% 25%, #2a7a63, #0a3a2f 62%, #062a22) !important;
  box-shadow: 0 0 0 1.5px #c9a24d, 0 0 0 4px rgba(201, 162, 77, .18), 0 8px 18px rgba(0, 0, 0, .45), 0 0 22px rgba(226, 191, 102, .28), inset 0 2px 5px rgba(255, 241, 189, .35) !important;
  overflow: hidden;
}
.noor-brand-logo { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5)) saturate(1.1) contrast(1.04); }
.noor-brand-copy strong { background: linear-gradient(180deg, #fff3c4, #e0b95a 60%, #b98f35); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
html:not([data-theme="dark"]) .noor-brand-copy strong { background: none; -webkit-text-fill-color: currentColor; }

/* ---------- small site-wide polish ---------- */
::selection { background: rgba(226, 191, 102, .35); }
html { scrollbar-color: #b98f35 #07261f; }
html[data-theme="dark"] body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }

/* breathing room between a big gem and the text under it */
.start-card-icon.pi-host, .foundation-icon.pi-host, .intro-icon.pi-host, .topic-icon.pi-host, .hs-ico.pi-host { margin-bottom: 12px; }

/* ---------- emoji inside text become small gems that sit on the text line ---------- */
.pi-in { display: inline-block; width: 1.5em; height: 1.5em; vertical-align: -0.38em; margin: 0 .18em; line-height: 0; font-size: inherit; -webkit-text-fill-color: initial; }
.pi-in .pi { --pi-size: 1.5em; width: 1.5em; height: 1.5em; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
button:hover .pi-in .pi, a:hover .pi-in .pi { transform: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)) drop-shadow(0 0 5px rgba(240,207,122,.55)); }

/* ---------- hero art + stray buttons ---------- */
.qb-svg { width: min(100%, 470px); height: auto; display: block; margin: 0 auto; filter: drop-shadow(0 26px 30px rgba(0,0,0,.45)); animation: qbFloat 6s ease-in-out infinite; }
@keyframes qbFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.quran-book-wrap { display: block !important; transform: none !important; }
.hands-svg { filter: drop-shadow(0 26px 28px rgba(0,0,0,.4)) drop-shadow(0 0 24px rgba(226,191,102,.35)) !important; }
.dua-learn-btn {
  min-height: 54px; padding: 0 22px; border-radius: 17px; font-size: 13px; font-weight: 800; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  color: #3a2808; border: 1px solid rgba(255,241,189,.7);
  background: linear-gradient(145deg, #fff0b8, #e2bf66 55%, #b98f35);
  box-shadow: 0 12px 26px rgba(185,143,53,.3), inset 0 1px 0 rgba(255,255,255,.55);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.dua-learn-btn:hover { transform: translateY(-4px); box-shadow: 0 18px 34px rgba(185,143,53,.4), inset 0 1px 0 rgba(255,255,255,.6); }
.dua-learn-btn b { font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .qb-svg { animation: none; } }

.pi-defs{position:absolute}