:root{
  --bg:#0f1626; --bg-alt:#121c31; --card:#192442;
  --ink:#eef3ff; --muted:#b8c2e0; --accent:#d9b95b; --accent-2:#7fb3ff; --ring:rgba(127,179,255,.5);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:linear-gradient(180deg,#0b1324 0%, #0f1626 60%, #0f1626 100%);
  line-height:1.6;
}
h1,h2,h3{font-family:"Crimson Text",serif; line-height:1.2; margin:0 0 .6rem}
h1{font-size:clamp(1.8rem,3vw,3rem)}
h2{font-size:clamp(1.4rem,2.2vw,2.2rem)}
h3{font-size:1.2rem}
p{margin:.5rem 0 1rem}
small,.small{font-size:.9rem;color:var(--muted)}
a{color:var(--accent-2);text-decoration:none}
a:hover{text-decoration:underline}

.container{width:min(1100px,92%);margin-inline:auto}
.section{padding:3.5rem 0}
.section.alt{background:var(--bg-alt)}

.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(10,16,32,.85); backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid #1b2746;
}
.nav{display:flex;align-items:center;gap:1rem;padding:.75rem 0}
.brand{font-weight:700;color:var(--ink)}
.menu{margin-left:auto;list-style:none;display:flex;gap:1rem}
.menu a{padding:.4rem .6rem;border-radius:.4rem}
.menu a:hover{background:#1a2544}
.nav-toggle{display:none;margin-left:auto;background:transparent;color:var(--ink);font-size:1.25rem;border:1px solid #2a3963;border-radius:.4rem;padding:.3rem .5rem}
@media (max-width:820px){
  .nav-toggle{display:block}
  .menu{position:absolute;right:4%;top:3.2rem;flex-direction:column;background:#0f1626;border:1px solid #2a3963;border-radius:.6rem;padding:.6rem;display:none}
  .menu.open{display:flex}
}

/* Hero */
.hero{padding:4rem 0 2rem;border-bottom:1px solid #1b2746}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center}
.hero-copy p{color:var(--muted);max-width:52ch}
.hero-figure img{width:100%;height:auto;border-radius:.8rem;border:1px solid #2a3963;box-shadow:0 10px 30px rgba(0,0,0,.35)}
@media (max-width:900px){.hero-inner{grid-template-columns:1fr}}

/* Buttons */
.btn{
  display:inline-block;background:linear-gradient(90deg,#d9b95b,#e7cc82);
  color:#1a1821;border:none;padding:.65rem 1rem;border-radius:.75rem;font-weight:700;
  box-shadow:0 6px 16px rgba(217,185,91,.2); cursor:pointer;
}
.btn:hover{filter:brightness(1.05)}
.btn.subtle{background:linear-gradient(90deg,#e7cc82,#d9b95b);color:#1b1e2b}
.btn.plain{background:#0c1428;color:var(--ink);border:1px solid #2a3963}

/* Utility */
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}

/* Cards */
.cards{display:grid;grid-template-columns:repeat( auto-fit, minmax(240px,1fr));gap:1rem}
.card{background:var(--card);border:1px solid #2a3963;border-radius:.8rem;padding:1rem}

/* Expandable prayer cards */
.cards.prayers-cards{
  grid-template-columns:repeat( auto-fit, minmax(260px,1fr));
  gap:1rem;
}
.card.prayer{
  padding:0; overflow:hidden; border-radius:.9rem;
  transition:box-shadow .2s ease, transform .08s ease;
}
.card.prayer:hover{ transform:translateY(-1px) }
.prayer-summary{
  list-style:none; padding:1rem 1rem 0.6rem; cursor:pointer;
  display:block; outline:none;
}
.card.prayer[open] .prayer-summary{ padding-bottom:.4rem; }
.prayer-summary::-webkit-details-marker{ display:none }
.prayer-summary h3{ margin:0 0 .3rem }
.prayer-summary .snippet{ margin:0; color:var(--muted) }

.prayer-body{
  padding:0 1rem 1rem;
  animation:prayer-open .18s ease-out;
  border-top:1px solid #2a3963;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,0.02));
}
@keyframes prayer-open{ from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:translateY(0)} }


/* Lists */
.rosary-steps{display:grid;gap:.6rem;margin:.8rem 0 1.2rem;padding-left:1.2rem}
.rosary-steps li::marker{color:var(--accent)}
.feasts{columns:2;gap:2rem;margin:.8rem 0}
@media (max-width:640px){.feasts{columns:1}}

/* Timeline */
.timeline{display:grid;gap:1rem}
.timeline article{border-left:3px solid var(--accent);padding:.4rem 0 .4rem 1rem;background:rgba(217,185,91,.06);border-radius:.25rem}

/* Gallery */
.gallery-grid{display:grid;grid-template-columns:repeat( auto-fit, minmax(180px,1fr));gap:.75rem;margin-top:.75rem}
.gallery-grid img{width:100%;height:180px;object-fit:cover;border-radius:.6rem;border:1px solid #2a3963}
.gallery-btn{display:block;background:none;border:0;padding:0;cursor:pointer}
.gallery-btn img{display:block;width:100%;height:180px;object-fit:cover;border-radius:.6rem;border:1px solid #2a3963}

/* Form */
.form{display:grid;gap:.8rem;max-width:640px}
.form label{display:grid;gap:.35rem}
input,textarea{
  background:#0c1428;border:1px solid #2a3963;border-radius:.5rem;color:var(--ink);
  padding:.6rem .7rem; font:inherit
}
input:focus,textarea:focus{outline:2px solid var(--ring);border-color:var(--accent-2)}

/* Footer */
.site-footer{border-top:1px solid #1b2746;background:#0c1324;padding:1rem 0;margin-top:2rem}
.foot{display:flex;align-items:center;justify-content:space-between}
.backtop{font-weight:600}

/* Modal */
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:80}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.modal-card{
  position:relative;z-index:1;width:min(900px,96%);max-height:92vh;overflow:auto;
  margin:3vh auto;background:#0e1629;border:1px solid #2a3963;border-radius:1rem;
  box-shadow:0 20px 60px rgba(0,0,0,.5)
}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.2rem;border-bottom:1px solid #223357}
.modal-head h2{margin:0}
.modal-close{background:transparent;border:1px solid #2a3963;color:var(--ink);font-size:1.3rem;border-radius:.5rem;padding:.15rem .5rem;cursor:pointer}
.modal-body{padding:1.2rem}

/* Two-column Rosary modal */
.rosary-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 1.2rem;
  align-items: start;
}
.rosary-col{ display:flex; align-items:center; justify-content:center; min-height:540px }
.rosary-stage{display:flex;justify-content:center;align-items:center}
#rosarySvg{width:min(64vw,520px);height:auto;display:block}

.panel-col{min-width: 280px}
.panel-sticky{position: sticky; top: 1rem; display: grid; gap: 1rem}
.pane{background:var(--card);border:1px solid #2a3963;border-radius:.8rem;padding:1rem}

/* Prayers expander */
details.prayers{
  background: var(--card);
  border: 1px solid #2a3963;
  border-radius: .6rem;
  padding: .6rem .8rem;
}
details.prayers[open]{ background: #22335733; }
details.prayers > summary{ cursor:pointer; color:var(--accent-2); font-weight:700; list-style:disclosure-closed }
details.prayers[open] > summary{ list-style:disclosure-open }
details.prayers p{ margin:.6rem 0; }

/* Controls */
.controls{display:flex;align-items:center;gap:.8rem;justify-content:space-between;flex-wrap:wrap}
.count{font-weight:700}
.row{display:flex;align-items:center;gap:1rem;justify-content:space-between}

/* Beads + cross */
svg .bead{
  fill:#20314f; stroke:#0a1120; stroke-width:2;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
  transition:transform .15s ease, fill .15s ease, filter .15s ease;
}
svg .bead.hm{ }
svg .bead.of{ fill:#e0c36a; }         /* top-of-loop OF */
svg .bead.of-pendant{ fill:#e0c36a; }  /* pendant OF near cross */
svg .bead.tail{ fill:#8ba9ff; }        /* opening 3 HMs */
svg .bead.active{
  fill:#d9b95b; 
  filter: drop-shadow(0 0 10px rgba(217,185,91,.75));
  transform:scale(1.08);
}
svg .cross-arm, svg .cross-stem{ stroke:#b88940; stroke-width:10; stroke-linecap:round; transition:filter .15s ease, stroke .15s ease }
svg .cross-arm.active, svg .cross-stem.active{ stroke:#f0c56b; filter: drop-shadow(0 0 10px rgba(240,197,107,.9)) }

/* Responsive */
@media (max-width: 900px){
  .rosary-grid{grid-template-columns:1fr}
  .panel-sticky{position:static}
  #rosarySvg{width:min(92vw,520px)}
}
/* Daily banner */
.daily-banner{
  background: linear-gradient(90deg, #0e203f, #132a54);
  border-bottom: 1px solid #1f345e;
  color: var(--ink);
}
.banner-inner{
  display:flex; align-items:center; gap:.75rem; padding:.6rem 0;
}
.banner-text{ 
  flex:1; 
  font-size:clamp(.95rem, 1.2vw, 1.1rem); 
  line-height:1.4;
}
.banner-text .source{ color: var(--accent-2); margin-left:.35rem; opacity:.9 }
.banner-close{
  background: transparent; border: 1px solid #2a3963; color: var(--ink);
  border-radius:.5rem; padding:.1rem .55rem; font-size:1.2rem; cursor:pointer;
}
.banner-close:hover{ background:#172646 }

/* --- Light a Candle CTA banner --- */
#light-a-candle { padding-top: 1rem; padding-bottom: 2rem; }

.cta-candle{
  display:block;
  position:relative;
  min-height:280px;
  border-radius:16px;
  overflow:hidden;
  background:url('light-candle.png') center/cover no-repeat;
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 10px 30px rgba(0,0,0,0.35);
  text-decoration:none;
}

/* soft dark overlay so text remains readable on the photo */
.cta-candle::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(6,10,22,0.72), rgba(10,16,32,0.35) 40%, rgba(10,16,32,0.2));
}

.cta-candle__content{
  position:relative; z-index:1;
  padding:2rem;
  max-width:560px;
  color:#eef3ff;
}

.cta-candle__content h3{
  margin:0 0 .4rem;
  font-family: "Crimson Text", Georgia, serif;
  font-size:clamp(1.6rem, 3vw, 2.2rem);
}

.cta-candle__content p{
  margin:.1rem 0 1rem;
  color:#cbd6ff;
}

/* reuse your site's .btn if it exists; otherwise: */
.cta-candle .btn{
  display:inline-block;
  background:linear-gradient(90deg,#d9b95b,#e7cc82);
  color:#1b1325;
  padding:.55rem .9rem;
  border-radius:.65rem;
  font-weight:700;
  border:none;
  box-shadow:0 4px 10px rgba(0,0,0,0.25);
  cursor:pointer;
}
.cta-candle:hover .btn{ filter:brightness(1.05); }

.back-button {
  display: inline-block;
  margin: 20px 0;
  padding: 10px 18px;
  background: #f9d77e; /* gold tone */
  color: #1a1a1a;
  text-decoration: none;
  font-weight: bold;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  transition: background 0.3s ease, transform 0.2s ease;
}

.back-button:hover {
  background: #f4c64c;
  transform: translateY(-2px);
}