/* ==========================================================
   site.css — shared styles for Service of Life index pages
   (cleaned + scoped to prevent conflicts)Jan 25 730am
   ========================================================== */

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  color: #222;
  background: #fefefe;
}

header {
  background-color: #f0f0f0;
  padding: 20px 20px 30px;
}

/* ===== Top Navigation ===== */
.top-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  padding: .75rem 1rem;
  margin: 0;
  border-bottom: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9);
  font-size: .95rem;
}

.top-nav a {
  text-decoration: none;
  font-weight: 600;
  padding: .35rem .6rem;
  border-radius: .5rem;
}

.top-nav a:hover,
.top-nav a:focus {
  background: rgba(0,0,0,.06);
}

/* ===== Page Layout ===== */
main {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 18px 60px;
}

.site-header {
  max-width: 980px;
  margin: 0 auto;
  padding: 16px 18px 0;
}

h1 {
  font-size: 2.1rem;
  text-align: center;
  margin: 18px 0 10px;
  color: #051A2D;
}

h2 {
  font-size: 1.5rem;
  color: #c227ce;
  margin: 36px 0 14px;
  border-bottom: 2px solid #c227ce;
  padding-bottom: 6px;
}

/* Simple index layout (like findex) */
main section { margin: 2rem 0 2.5rem; }
main h3 { margin-top: 1.3rem; }
main p { margin: 0.4rem 0; }
main p a { font-weight: 600; }

p { margin: 10px 0; }

a {
  color: #0563C1;
  text-decoration: none;
}
a:hover { text-decoration: underline; }

/* Optional (if you still use .main-nav anywhere) */
.main-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding: 12px;
  margin: 0 auto 18px;
  border: 2px solid #c227ce;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

.main-nav a {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 10px;
  border: 2px solid #c227ce;
  color: #051A2D;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: .2px;
  transition: transform .15s ease, background-color .15s ease, color .15s ease;
  background: #fff;
}
.main-nav a:hover,
.main-nav a:focus-visible {
  background: #c227ce;
  color: #fff;
  transform: translateY(-1px);
  outline: none;
}

.intro {
  text-align: center;
  margin: 4px 0 22px;
  color: #333;
  font-size: 1.05rem;
}

/* ===== TOC (general index pages) ===== */
.toc {
  margin: 1.5rem 0 2rem;
  padding: 0.8rem 1rem;
  background: #f3f7fb;
  border-left: 4px solid #c227ce;
  font-size: 0.95rem;
  line-height: 1.5;
}

.toc strong {
  display: block;
  margin-bottom: 0.4rem;
  color: #051A2D;
  font-weight: 600;
}

.toc a {
  display: inline-block;
  margin: 0.25rem 0.6rem 0.25rem 0;
  color: #063C6D;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: all 0.2s ease;
}

.toc a:hover {
  color: #c227ce;
  border-bottom: 1px solid #c227ce;
  text-decoration: none;
}

.toc a.active {
  color: #c227ce;
  font-weight: 600;
  border-bottom: 2px solid #c227ce;
}
section h2::before {
  margin-right: 0.45em;
  font-weight: normal;
}
#constellations h2::before {
  content: "🌀 ";
}
#focusing h2::before {
  content: "✧ " ;
}
#planetary-healing h2::before {
  content: "🌎 ";
}
#community h2::before {
  content: "🤝 ";
}
#resources h2::before {
  content: "📚 ";
}

/* ===== Footer ===== */
footer {
  margin-top: 44px;
  padding-top: 16px;
  border-top: 1px solid #ddd;
  text-align: center;
  color: #777;
  font-size: .92rem;
}

/* ===== Back-to-top (link version) ===== */
.back-to-top {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.2);
  background: rgba(255,255,255,.92);
  text-decoration: none;
  font-size: 18px;
  line-height: 1;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  z-index: 9999;
}
.back-to-top:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0,0,0,.16);
}

/* ===== Responsive ===== */
@media (max-width: 760px) {
  h1 { font-size: 1.7rem; }
}

/* =========================================================
   Planetary Healing (phindex) – scoped styles
   IMPORTANT: add <body class="phindex"> on phindex pages
   ========================================================= */

:root{
  --sol-paper: #fbfaf3;
  --sol-ink: #12212a;
  --sol-muted: #4c5d57;
  --sol-green: #2b7a4b;
  --sol-green-dark: #1e5a36;
  --sol-border: #d8d3c6;
  --sol-card: #f5f2e6;
}

body.phindex{
  background: var(--sol-paper);
  color: var(--sol-ink);
}

/* Page container */
.phindex .page{
  max-width: 940px;
  margin: 0 auto;
  padding: 34px 18px 60px;
}

/* Title + subtitle */
.phindex .page-header h1{
  font-family: "Times New Roman", Georgia, serif;
  font-weight: 700;
  letter-spacing: .2px;
  font-size: clamp(1.8rem, 2.5vw, 2.6rem);
  margin: 0 0 6px;
}

.phindex .subtitle{
  margin: 0 0 18px;
  color: var(--sol-muted);
  font-size: 1.05rem;
  max-width: 68ch;
}

/* PH TOC */
.phindex .toc{
  background: var(--sol-card);
  border: 1px solid var(--sol-border);
  border-left: 6px solid var(--sol-green);
  padding: 14px 18px;
  border-radius: 14px;
  margin: 18px 0 28px;
  box-shadow: 0 1px 10px rgba(0,0,0,.05);
}

.phindex .toc strong{
  display:block;
  font-family: "Times New Roman", Georgia, serif;
  font-size: 1.05rem;
  margin-bottom: 10px;
  color: var(--sol-ink);
}

.phindex .toc ul{ margin:0; padding-left: 18px; }

.phindex .toc a{
  display: inline-block;
  padding: 6px 10px;
  margin: 2px 0;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  color: var(--sol-green-dark);
  background: rgba(43, 122, 75, .08);
  border-bottom: none;
}

.phindex .toc a:hover{
  background: rgba(43, 122, 75, .16);
  text-decoration: none;
}

/* Sections */
.phindex .section{
  margin: 30px 0;
  padding-top: 4px;
}

.phindex .section h2{
  font-family: "Times New Roman", Georgia, serif;
  font-size: 1.45rem;
  margin: 0 0 10px;
  color: var(--sol-ink);
  border-bottom: none;
}

/* Notes + descriptions */
.phindex .note{ color: var(--sol-muted); }

.phindex .desc{
  margin: 6px 0 0;
  color: var(--sol-muted);
  max-width: 78ch;
}

/* Link list */
.phindex .linklist{
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
}

.phindex .linklist li{
  padding: 12px 14px;
  border: 1px solid var(--sol-border);
  border-radius: 14px;
  background: #fff;
  margin: 12px 0;
  box-shadow: 0 1px 6px rgba(0,0,0,.04);
}

.phindex .linklist a{
  font-weight: 800;
  color: var(--sol-green-dark);
  text-decoration: none;
}

.phindex .linklist a:hover{
  text-decoration: underline;
}

/* Back to top (PH variant overrides general) */
.phindex .back-to-top{
  right: 22px;
  bottom: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  font-size: 20px;
  font-weight: 900;
  text-decoration: none;
  background: var(--sol-green);
  color: #fff;
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
  border: 1px solid rgba(0,0,0,.08);
}
.phindex .back-to-top:hover{ background: var(--sol-green-dark); }

.phindex .nav-buttons{
  margin: 18px 0 26px;
  text-align: center;
}

.phindex .btn{
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 1px 10px rgba(0,0,0,.06);
  transition: transform .05s ease, background .15s ease;
}

.phindex .btn-home{
  background: rgba(43, 122, 75, .10);
  color: #1e5a36;
}

.phindex .btn-home:hover{
  background: rgba(43, 122, 75, .18);
  text-decoration: none;
}

.phindex .btn:active{ transform: translateY(1px); }

.phindex .page-footer{
  margin-top: 44px;
  padding-top: 14px;
  border-top: 1px solid var(--sol-border);
}

/* ---- Disable card layout on Constellations index (safe) ---- */
body:has(main#top) .card-container,
body:has(main#top) .card {
  all: unset;
  display: block;
}

body:has(main#top) .card {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
}
/* Back-to-top button (csindex uses a button) */
#backToTop{
  position: fixed;
  right: 16px;
  bottom: 16px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.2);
  background: rgba(255,255,255,.92);
  color: #051A2D;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  z-index: 9999;
  display: none; /* your JS toggles this */
}

#backToTop:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0,0,0,.16);
}
/* Back-to-top button */
#backToTop {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.2);
  background: rgba(255,255,255,.92);
  color: #051A2D;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  display: none; /* JS toggles */
  z-index: 9999;
}

#backToTop:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0,0,0,.16);
}
/* Classic ServiceOfLife back-to-top button */
#backToTop {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  font-size: 20px;
  font-weight: 900;
  text-decoration: none;

  background: #2b7a4b;
  color: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
  cursor: pointer;

  display: none; /* JS shows it */
  z-index: 9999;
}

#backToTop:hover {
  background: #1e5a36;
}