/* Noor-e-Hidayah — premium cards
   Moving gold border + shine + glow for every card/box on every page.
   Works together with premium-cards.js (which finds the cards and adds the ring).
   Loaded LAST on every page, so it wins over older card styles. */

:root {
  --pc-gold: #c9a24d;
  --pc-gold2: #f6e3a1;
  --pc-base: rgba(201, 162, 77, .30);   /* the calm gold hairline that is always visible */
  --pc-bw: 2.5px;                          /* border thickness */
  --pc-speed: 7s;                        /* one full lap, normal */
  --pc-speed-hover: 2.4s;                /* one full lap, on hover */
}
html[data-theme="dark"] {
  --pc-gold: #e2bf66;
  --pc-gold2: #fff1c1;
  --pc-base: rgba(230, 200, 120, .26);
}

/* ---------- the ring ---------- */
.pc-rel { position: relative; }

.pc-ring {
  position: absolute; inset: 0; z-index: 3;
  padding: var(--pc-bw);
  border-radius: inherit;
  pointer-events: none;
  overflow: hidden;
  background: var(--pc-base);
  /* show only the border area (cut out the middle) */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  transition: padding .35s ease;
}
.pc-spin {
  position: absolute; left: 50%; top: 50%;
  width: var(--pc-s, 700px); height: var(--pc-s, 700px);
  transform: translate(-50%, -50%) rotate(var(--pc-r, 0deg));
  background: conic-gradient(from 0deg,
    transparent 0 48%,
    rgba(201, 162, 77, .25) 58%,
    var(--pc-gold) 78%,
    var(--pc-gold2) 91%,
    #fffbe8 94%,
    transparent 98% 100%);
}
.pc-live .pc-spin { animation: pc-rot var(--pc-speed) linear infinite; will-change: transform; }
@keyframes pc-rot {
  from { transform: translate(-50%, -50%) rotate(var(--pc-r, 0deg)); }
  to   { transform: translate(-50%, -50%) rotate(calc(var(--pc-r, 0deg) + 360deg)); }
}

/* ---------- shine sweep ---------- */
.pc-shine {
  position: absolute; inset: 0; z-index: 2;
  border-radius: inherit; overflow: hidden; pointer-events: none;
}
.pc-shine::before {
  content: ""; position: absolute; top: -25%; bottom: -25%; left: -60%; width: 38%;
  background: linear-gradient(100deg, transparent, rgba(246, 227, 161, .42), transparent);
  transform: skewX(-18deg);
  transition: left .9s ease;
}

/* ---------- hover: faster lap, thicker line, gold glow, shine ---------- */
@media (hover: hover) {
  .pc-card:hover > .pc-ring { padding: 3px; }
  .pc-card:hover > .pc-ring .pc-spin { animation: pc-rot var(--pc-speed-hover) linear infinite; will-change: transform; }
  .pc-card:hover > .pc-shine::before { left: 135%; }
  .pc-card:hover { box-shadow: 0 22px 48px -16px rgba(201, 162, 77, .55), 0 0 0 1px rgba(201, 162, 77, .30); }
}
.pc-card:focus-within > .pc-ring .pc-spin { animation: pc-rot var(--pc-speed-hover) linear infinite; }

/* cards that are not real cards (too small / too big / hidden) */
.pc-off > .pc-ring, .pc-off > .pc-shine { display: none; }

/* ---------- accessibility / print ---------- */
@media (prefers-reduced-motion: reduce) {
  .pc-spin { animation: none !important; }
  .pc-shine { display: none; }
}
@media print { .pc-ring, .pc-shine { display: none !important; } }

/* =====================================================================
   READABILITY FIXES that make the dark cards look premium
   ===================================================================== */

/* Seerah: the "Explore Chapter" button was green text on a green card (invisible).
   Make it a clear gold pill, also on hover. */
.journey-card .chapter-btn, .chapter-card .chapter-btn, .seerah-card .chapter-btn,
.timeline-card .chapter-btn, .journey-item .chapter-btn {
  background: linear-gradient(135deg, #f1dc9f, #c9a24d) !important;
  color: #0d352f !important;
  border: 1px solid #e6cf8e !important;
  font-size: 13px !important; font-weight: 800 !important;
  padding: 11px 20px !important;
  box-shadow: 0 8px 20px rgba(201, 162, 77, .28) !important;
}
@media (hover: hover) {
  .journey-card .chapter-btn:hover, .chapter-card .chapter-btn:hover, .seerah-card .chapter-btn:hover,
  .timeline-card .chapter-btn:hover, .journey-item .chapter-btn:hover {
    background: linear-gradient(135deg, #fff1c1, #e2bf66) !important;
    color: #0d352f !important;
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(201, 162, 77, .4) !important;
  }
}

/* Home "Begin your day with Noor" (dark cards only, so scoped to the home section): Listen / Share / Read links were faint */
.daily-section .daily-card button, .daily-section .daily-card a {
  color: #fff1c1;
  border: 1.5px solid rgba(246, 227, 161, .75);
  background: rgba(246, 227, 161, .10);
  font-weight: 700; font-size: 13px;
}
@media (hover: hover) {
  .daily-section .daily-card button:hover, .daily-section .daily-card a:hover {
    background: linear-gradient(135deg, #f1dc9f, #c9a24d); color: #0d352f; border-color: #f1dc9f;
  }
}

.pc-paused .pc-spin { animation-play-state: paused !important; }

/* =====================================================================
   <details> cards (Namaz "special" cards): a ring element would be hidden while closed,
   so these get the same moving border with a pure-CSS technique.
   ===================================================================== */
@property --pc-ang { syntax: "<angle>"; initial-value: 40deg; inherits: false; }
@keyframes pc-ang { to { --pc-ang: 400deg; } }

details.special-card {
  --pc-fill: #fff;
  border: 2px solid transparent;
  background:
    linear-gradient(var(--pc-fill), var(--pc-fill)) padding-box,
    conic-gradient(from var(--pc-ang), var(--pc-base) 0 56%, rgba(201,162,77,.2) 64%, var(--pc-gold) 82%, var(--pc-gold2) 92%, var(--pc-base) 97% 100%) border-box;
  transition: box-shadow .35s ease;
}
html[data-theme="dark"] details.special-card { --pc-fill: #182522; }
details.special-card[open] { animation: pc-ang 7s linear infinite; }
@media (hover: hover) {
  details.special-card:hover { animation: pc-ang 2.6s linear infinite; box-shadow: 0 18px 40px -16px rgba(201,162,77,.5); }
}
@media (prefers-reduced-motion: reduce) { details.special-card, details.special-card:hover { animation: none; } }


/* a ring only exists for cards that were checked (right size, own look, positioned).
   Unchecked cards used to stretch their ring over the whole screen = the big gold frame. */
.pc-card:not(.pc-ok) > .pc-ring,
.pc-card:not(.pc-ok) > .pc-shine { display: none !important; }