/* ============================================
   DUAS LIBRARY — additions to the design's .dua-* rules in style.css.
   The design built the cards in script; here they are server-rendered, so the
   category entries are links and a few states (hidden, highlighted) are new.
   ============================================ */

/* Category entries are <a> elements so they still work without script. */
a.dua-cat-btn,
a.dua-cat-btn:hover { text-decoration: none; }
.dua-cat-btn:focus-visible,
.dua-action-btn:focus-visible,
.dua-icon-btn:focus-visible,
.dua-view-btn:focus-visible { outline: 2px solid #2eb872; outline-offset: 2px; }

/* A dua filtered out by the search box, the category list or the query string. */
.dua-card.dua-hide { display: none; }

/* Category badge and title are links on the library page. */
a.dua-badge { text-decoration: none; }
a.dua-badge:hover { filter: brightness(0.95); }
.dua-card-title-link { color: inherit; text-decoration: none; }
.dua-card-title-link:hover { color: var(--dua-color, #1f7a63); }
a.dua-action-btn { text-decoration: none; }

.dua-hero-highlight { color: #e6b85c; }

/* Random dua / deep link target. */
.dua-card.dua-flash { box-shadow: 0 0 0 3px rgba(31,122,99,0.4); }

/* style.css gives the progress row display:flex, which would defeat the hidden attribute. */
.dua-audio-progress[hidden] { display: none; }
.dua-action-btn.dua-audio-btn.loading { opacity: 0.7; cursor: progress; }

/* Says what the recording actually contains: a whole ayah, of which the dua may be only a part. */
.dua-audio-note {
  display: flex;
  align-items: flex-start;
  gap: 2px;
  margin: 10px 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #5b6b66;
}
.dua-audio-note .bi { margin-top: 2px; }
/* A two-ayah dua plays straight through, so the bar is a read-out rather than a scrubber. */
.dua-card[data-has-audio="true"] .dua-audio-time { white-space: nowrap; }

/* Compact view: cards are click-to-expand; the repeat pill and footer stay visible. */
.dua-list.compact-view .dua-card { cursor: pointer; }
/* The note stays even in compact view: wherever the Audio button is offered, it must say what it plays. */
.dua-list.compact-view .dua-audio-note { display: flex; }
.dua-list.compact-view .dua-when { margin-bottom: 10px; }
.dua-list.compact-view .dua-card.expanded .dua-when { display: flex; }
.dua-list.compact-view .dua-card.expanded .dua-note { display: flex; }

/* Detail page: one card, centred. */
.dua-detail-wrap { max-width: 860px; margin: 0 auto; }
.dua-card.dua-card-single:hover { transform: none; }
.dua-card.dua-card-single .dua-card-title { font-size: 1.6rem; }
.dua-card.dua-card-single .dua-arabic { font-size: 1.9rem; line-height: 2.3; }

/* Dark theme for the pieces this file introduces. */
body.dark .dua-card-title-link:hover { color: #56c596; }
body.dark .dua-card.dua-flash { box-shadow: 0 0 0 3px rgba(86,197,150,0.45); }
body.dark .dua-audio-note { color: #9fb3ac; }

@media (max-width: 575.98px) {
  .dua-card.dua-card-single .dua-card-title { font-size: 1.3rem; }
  .dua-card.dua-card-single .dua-arabic { font-size: 1.5rem; }
}