/* ============================================================
   themes.css — boudhanath.com
   CSP-safe colour themes and utility classes.
   Generated to replace all inline style="" / element.style.*
   ============================================================ */

/* ── 5 accent-colour themes ──────────────────────────────────
   Applied as a class on .card  (e.g.  class="card th-green")
   --ac   : used by app.css for borders / hovers
   .card-icon, .card-badge colours handled via descendant sel.
*/
.th-green  { --ac: #3A7A52; }
.th-amber  { --ac: #C8781A; }
.th-blue   { --ac: #3B6FA0; }
.th-maroon { --ac: #7A2233; }
.th-crimson{ --ac: #B03030; }

.th-green  .card-icon,
.th-green  .card-badge { background: rgba(58,122,82,0.12); }
.th-green  .card-badge { color: #3A7A52; }

.th-amber  .card-icon,
.th-amber  .card-badge { background: rgba(200,120,26,0.12); }
.th-amber  .card-badge { color: #C8781A; }

.th-blue   .card-icon,
.th-blue   .card-badge { background: rgba(59,111,160,0.12); }
.th-blue   .card-badge { color: #3B6FA0; }

.th-maroon .card-icon,
.th-maroon .card-badge { background: rgba(122,34,51,0.1); }
.th-maroon .card-badge { color: #7A2233; }

.th-crimson .card-icon,
.th-crimson .card-badge { background: rgba(176,48,48,0.1); }
.th-crimson .card-badge { color: #B03030; }

/* ── Category-banner object-position ─────────────────────────
   Applied via data-cat on the parent .cat-section — no JS needed
*/
.cat-section[data-cat="restaurant"] .cat-banner { object-position: center top; }
.cat-section[data-cat="cafe"]       .cat-banner { object-position: center 92%; }
.cat-section[data-cat="hotel"]      .cat-banner { object-position: center 65%; }
.cat-section[data-cat="monastery"]  .cat-banner { object-position: center 72%; }
.cat-section[data-cat="shop"]       .cat-banner { object-position: center top; }
.cat-section[data-cat="spa"]        .cat-banner { object-position: center 68%; }

/* ── Animation-delay utility classes ─────────────────────────
   ad-N  →  delay = N × 0.03 s   (N = card index % 20)
*/
.ad-0  { animation-delay: 0s;    }
.ad-1  { animation-delay: 0.03s; }
.ad-2  { animation-delay: 0.06s; }
.ad-3  { animation-delay: 0.09s; }
.ad-4  { animation-delay: 0.12s; }
.ad-5  { animation-delay: 0.15s; }
.ad-6  { animation-delay: 0.18s; }
.ad-7  { animation-delay: 0.21s; }
.ad-8  { animation-delay: 0.24s; }
.ad-9  { animation-delay: 0.27s; }
.ad-10 { animation-delay: 0.30s; }
.ad-11 { animation-delay: 0.33s; }
.ad-12 { animation-delay: 0.36s; }
.ad-13 { animation-delay: 0.39s; }
.ad-14 { animation-delay: 0.42s; }
.ad-15 { animation-delay: 0.45s; }
.ad-16 { animation-delay: 0.48s; }
.ad-17 { animation-delay: 0.51s; }
.ad-18 { animation-delay: 0.54s; }
.ad-19 { animation-delay: 0.57s; }

/* ── Visibility toggle (replaces c.style.display = 'none') ──
   Used by filterAll() to show/hide cards and sections.        */
.is-hidden { display: none !important; }

/* ── Mobile menu: body scroll lock ──────────────────────────
   Replaces  document.body.style.overflow = 'hidden'          */
body.menu-open { overflow: hidden; }

/* ── Hero / visit-section lazy background images ────────────
   initImages() adds .bg-loaded once the image is loaded.
   URLs must match IMGS.IMG_HERO and IMGS.IMG_VISIT in app.js  */
#heroBg.bg-loaded { background-image: url('images/hero.jpg'); }
#visit.bg-loaded  { background-image: url('images/visit.jpg'); }

/* ── Footer email link hover ─────────────────────────────────
   Replaces JS mouseover/mouseout style.color handlers         */
.footer-email       { color: rgba(245,239,224,.28); }
.footer-email:hover { color: rgba(245,239,224,.55); }