/* ===============================
   Practices Page — Middle Path
   =============================== */

:root{
  --mp-ink:#e7e6e1;
  --mp-muted:#cfd8dc;
  --mp-silver:rgba(255,255,255,0.12);
  --mp-card:rgba(255,255,255,0.04);
  --mp-card-strong:rgba(255,255,255,0.06);
  --mp-emerald:#50C878; /* site accent */
  --mp-emerald-2:#70d89b;
  --mp-shadow:0 10px 28px rgba(0,0,0,.35);
  --mp-shadow-emerald:0 14px 36px rgba(80,200,120,.25);

  --mp-h1:clamp(1.9rem,4vw,2.6rem);
  --mp-h2:clamp(1.35rem,3vw,1.7rem);
  --mp-h3:clamp(1.05rem,2.2vw,1.2rem);
  --mp-body:clamp(.98rem,1.6vw,1.05rem);

  --mp-radius-lg:18px;
  --mp-radius-sm:12px;
}

/* Text color safety if page background is dark */
#content, .container, body { color: var(--mp-ink); }

/* ===== Hero ===== */
.page-hero{
  position:relative;
  padding:clamp(1.75rem,4vw,2.8rem) 1rem 1.5rem;
  color:var(--mp-ink);
  border-bottom:1px solid var(--mp-silver);
  background:
    radial-gradient(900px 450px at 50% -10%, rgba(80,200,120,.18), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,.6));
  text-align:center; /* center hero to match Deities */
}
.hero-title{
  font-family:"Cinzel","Caudex",serif;
  font-size:var(--mp-h1);
  letter-spacing:.02em;
  margin:0 0 .25rem;
  text-shadow:
    0 1px 0 rgba(0,0,0,.35),
    0 8px 24px rgba(80,200,120,.35);
}
.hero-sub{
  font-family:"Crimson Text", Georgia, serif;
  font-size:calc(var(--mp-body)*.98);
  color:var(--mp-muted);
  margin:0;
}

/* ===== Intro ===== */
.intro {
  text-align:center; /* center intro like Deities */
}
.intro .lede{
  font-size:var(--mp-body);
  line-height:1.65;
  margin-bottom:.6rem;
}

/* ===== Local TOC ===== */
.toc{
  border:1px solid var(--mp-silver);
  background:var(--mp-card);
  border-radius:var(--mp-radius-lg);
  padding:.85rem 1rem;
  backdrop-filter:blur(2px);
}
.toc ul{
  justify-content:center; /* center TOC nav */
}
.toc a{
  color:var(--mp-ink);
  text-decoration:none;
  border-bottom:1px dashed transparent;
  transition:border-color .15s ease, color .15s ease, text-shadow .15s ease;
}
.toc a:hover,
.toc a:focus-visible{
  color:var(--mp-muted);
  border-bottom-color:var(--mp-emerald-2);
  text-shadow:0 0 14px rgba(80,200,120,.25);
  outline:none;
}

/* ===== Section Headings with emerald underline ===== */
.section-title{
  font-family:"Cinzel","Caudex",serif;
  font-size:var(--mp-h2);
  letter-spacing:.015em;
  margin-bottom:.75rem;
  position:relative;
  padding-bottom:.35rem;
  text-align:center; /* center section titles */
}
.section-title::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  height:2px;
  width:120px;
  background:linear-gradient(90deg, transparent, var(--mp-emerald), transparent);
  box-shadow:0 6px 18px rgba(80,200,120,.35);
  border-radius:2px;
}

/* ===== Cards ===== */
.card{
  background:var(--mp-card);
  border:1px solid var(--mp-silver);
  border-radius:var(--mp-radius-lg);
  box-shadow:var(--mp-shadow);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  min-height:100%;
  text-align:left; /* keep card content left-aligned */
}
.card:hover,
.card:focus-within{
  transform:translateY(-2px);
  box-shadow:var(--mp-shadow-emerald);
  border-color:rgba(80,200,120,.35);
}
.card-icon{ font-size:1.4rem; margin-bottom:.25rem; line-height:1; }
.card-title{ font-size:var(--mp-h3); margin:0 0 .2rem; letter-spacing:.01em; }
.card-desc{ font-size:var(--mp-body); line-height:1.6; opacity:.95; margin-bottom:.75rem; }

/* ===== Download Button (emerald 3-D vibe) ===== */
.btn{
  --pad-y:.55rem; --pad-x:.9rem;
  display:inline-block;
  padding:var(--pad-y) var(--pad-x);
  border-radius:var(--mp-radius-sm);
  font-weight:700;
  text-decoration:none;
  color:#0b2316;
  background:linear-gradient(180deg, #e1f6ec, #bfead6);
  border:1px solid #a9ddc6;
  box-shadow:inset 0 1px 0 #ffffff75, 0 8px 16px rgba(0,0,0,.22);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover,
.btn:focus-visible{
  transform:translateY(-1px);
  box-shadow:inset 0 1px 0 #ffffff75, 0 12px 24px rgba(80,200,120,.35);
  outline:none;
}
.btn:active{ transform:translateY(0); }

/* ===== Reminder Box ===== */
.reminder{
  border:1px solid var(--mp-silver);
  background:var(--mp-card-strong);
  border-radius:var(--mp-radius-lg);
  padding:1rem 1.2rem;
  font-style:italic;
  text-shadow:0 1px 0 rgba(0,0,0,.25);
  box-shadow:var(--mp-shadow);
  text-align:center; /* center the reminder text */
}

/* Motion preferences */
@media (prefers-reduced-motion:reduce){
  .card,.btn,.toc a{ transition:none !important; }
}

@media (min-width:992px){
  .hero-title{ letter-spacing:.015em; }
  .card-icon{ font-size:1.5rem; }
}

/* ===============================
   CTA Buttons — kept from prior page
   =============================== */

.cta-container { margin: 40px 0; }
.cta-container:not(.bottom-nav) { text-align: center; }

.cta-container.bottom-nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1.5rem;
  max-width:700px;
  margin:2rem auto 4rem;
  padding:0;
}

.cta-button{
  flex:1 1 0;
  padding:14px 0;
  min-width:160px;
  text-align:center;
  font-size:1.1rem;
  font-family:'Cinzel', serif;
  color:#eaeaea;
  background:linear-gradient(135deg,#0a0f0a,#133d29);
  border:2px solid #2ecc71;
  border-radius:50px;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:1px;
  box-shadow:0 0 12px rgba(46,204,113,.4), inset 0 0 8px rgba(46,204,113,.3);
  transition:all .3s ease;
  position:relative;
  overflow:hidden;
}
.cta-button::before{
  content:"";
  position:absolute; top:0; left:-75%;
  width:50%; height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.2),transparent);
  transform:skewX(-20deg);
}
.cta-button:hover::before{ animation:shimmer 1.5s ease forwards; }
@keyframes shimmer{ 0%{left:-75%;} 100%{left:125%;} }

.cta-button:hover{
  color:#fff;
  background:linear-gradient(135deg,#133d29,#1a6b47);
  box-shadow:0 0 20px rgba(46,204,113,.8), inset 0 0 12px rgba(46,204,113,.5);
  transform:translateY(-2px);
}
.cta-button:active{
  transform:translateY(0);
  box-shadow:0 0 10px rgba(46,204,113,.6), inset 0 0 6px rgba(46,204,113,.4);
}
@media (max-width:600px){
  .cta-container.bottom-nav{
    flex-direction:column;
    gap:1rem;
    align-items:stretch;
  }
  .cta-button{
    width:100%;
    padding:.75rem 1rem;
    line-height:1.4;
    min-height:48px;
    display:flex; align-items:center; justify-content:center;
  }
}