/* ══════════════════════════════════════════
   ZODIAK PAGE — zodiak.css
   Matches AstroVibe dark neon theme
   ══════════════════════════════════════════ */

/* ── HERO ── */
.zodiak-hero {
  background: radial-gradient(ellipse at 50% 0%, rgba(204,68,255,.15), transparent 60%);
  text-align: center;
}
.zodiak-hero .hero-title { font-size: clamp(2rem,5vw,4rem) }

/* ── ARTICLE LAYOUT ── */
.article-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media(min-width:1060px) {
  .article-layout { grid-template-columns: 1fr 280px; align-items: start; }
}

/* ── ARTICLE BODY ── */
.article-body { min-width: 0 }
.article-body section { margin-bottom: 3rem }

.article-body h2 {
  font-family: 'Cinzel Decorative', serif;
  font-size: clamp(1.2rem,2.5vw,1.7rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: 1rem;
  padding-top: .25rem;
  border-left: 3px solid var(--c-neon);
  padding-left: .9rem;
  line-height: 1.3;
}
.article-body h3 {
  font-family: 'Cinzel Decorative', serif;
  font-size: .95rem;
  font-weight: 700;
  color: #e8d8ff;
  margin: 1.4rem 0 .65rem;
}
.article-body p {
  color: #e8d8ff;
  font-size: .95rem;
  line-height: 1.9;
  margin-bottom: .9rem;
}
.article-body strong { color: #fff }
.article-body a {
  color: var(--c-neon);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(204,68,255,.4);
  transition: all .2s;
}
.article-body a:hover {
  text-decoration-color: var(--c-neon);
  color: #fff;
}

/* ── TOC BOX ── */
.toc-box {
  background: rgba(14,0,40,.8);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(204,68,255,.3);
  border-radius: 16px;
  padding: 1.5rem 1.75rem;
  margin-bottom: 2.5rem;
}
.toc-title {
  font-family: 'Cinzel Decorative', serif;
  font-size: .85rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .9rem;
  letter-spacing: .06em;
}
.toc-list {
  list-style: decimal;
  padding-left: 1.25rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .3rem .75rem;
}
.toc-list li { color: #c4aae8; font-size: .82rem }
.toc-list a { color: #c4aae8; transition: color .2s; text-decoration: none }
.toc-list a:hover { color: var(--c-neon) }

/* ── INFO BOX ── */
.info-box {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: rgba(204,68,255,.08);
  border: 1px solid rgba(204,68,255,.25);
  border-radius: 12px;
  padding: 1.1rem 1.3rem;
  margin: 1.5rem 0;
  font-size: .9rem;
  color: #e8d8ff;
  line-height: 1.75;
}
.info-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: .1rem }
.info-box strong { color: #fff }

/* ── ELEMEN GRID ── */
.elemen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.1rem;
  margin: 1.5rem 0;
}
.elemen-card {
  background: rgba(14,0,40,.8);
  border-radius: 14px;
  padding: 1.5rem 1.25rem;
  border: 1px solid rgba(150,80,255,.25);
  transition: all .3s;
}
.elemen-card:hover { transform: translateY(-4px) }
.elemen-card.fire  { border-color: rgba(255,85,32,.4) }
.elemen-card.earth { border-color: rgba(68,255,136,.4) }
.elemen-card.air   { border-color: rgba(0,238,255,.4) }
.elemen-card.water { border-color: rgba(68,136,255,.4) }
.el-icon { font-size: 2rem; margin-bottom: .6rem }
.elemen-card h3 {
  font-family: 'Cinzel Decorative', serif;
  font-size: .82rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .4rem;
}
.elemen-card p { font-size: .82rem; color: #c4aae8; line-height: 1.7; margin: .25rem 0 }
.elemen-card p strong { color: #fff; display: block; margin-bottom: .25rem }

/* ── ZODIAK CARDS ── */
.zodiak-card {
  background: rgba(10,0,28,.8);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(150,80,255,.25);
  border-radius: 20px;
  overflow: hidden;
  transition: box-shadow .35s, border-color .35s;
}
.zodiak-card:hover {
  border-color: rgba(204,68,255,.5);
  box-shadow: 0 0 40px rgba(204,68,255,.1);
}
.zodiak-card:target {
  border-color: var(--c-neon);
  box-shadow: 0 0 40px rgba(204,68,255,.2);
}

/* card header */
.zcard-header {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.5rem 2rem;
  position: relative;
  overflow: hidden;
}
.zcard-header::before {
  content: '';
  position: absolute; inset: 0;
  opacity: .15;
}
.fire-bg::before  { background: radial-gradient(ellipse at 0% 50%, #ff5520, transparent 70%) }
.earth-bg::before { background: radial-gradient(ellipse at 0% 50%, #44ff88, transparent 70%) }
.air-bg::before   { background: radial-gradient(ellipse at 0% 50%, #00eeff, transparent 70%) }
.water-bg::before { background: radial-gradient(ellipse at 0% 50%, #4488ff, transparent 70%) }

.zcard-sym {
  font-size: 3.5rem;
  line-height: 1;
  filter: drop-shadow(0 0 12px currentColor);
  animation: sym-float 3s ease-in-out infinite;
  position: relative;
  z-index: 1;
}
@keyframes sym-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

.zcard-info { position: relative; z-index: 1 }
.zcard-info h2 {
  font-family: 'Cinzel Decorative', serif;
  font-size: clamp(.9rem,2vw,1.2rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: .5rem;
  border: none !important;
  padding-left: 0 !important;
}
.zcard-meta { display: flex; flex-wrap: wrap; gap: .4rem }
.zbadge {
  display: inline-block;
  padding: .22rem .7rem;
  border-radius: 9999px;
  font-size: .68rem;
  font-weight: 700;
  background: rgba(204,68,255,.12);
  border: 1px solid rgba(204,68,255,.3);
  color: #e8d8ff;
}
.zbadge.fire  { background: rgba(255,85,32,.12);  border-color: rgba(255,85,32,.4);  color: #ff9060 }
.zbadge.earth { background: rgba(68,255,136,.12); border-color: rgba(68,255,136,.4); color: #90d050 }
.zbadge.air   { background: rgba(0,238,255,.12);  border-color: rgba(0,238,255,.4);  color: #50d0ff }
.zbadge.water { background: rgba(68,136,255,.12); border-color: rgba(68,136,255,.4); color: #70a0ff }

.zcard-body { padding: 1.5rem 2rem 2rem }

/* traits */
.trait-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  margin: .75rem 0 1.25rem;
  padding: 0;
}
.trait-list li { font-size: .88rem; color: #e8d8ff; line-height: 1.6 }
.trait-list.warn li { color: #ffa080 }

/* stats row */
.zcard-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .75rem;
  margin: 1.25rem 0;
  background: rgba(204,68,255,.06);
  border: 1px solid rgba(204,68,255,.15);
  border-radius: 12px;
  padding: 1rem 1.25rem;
}
.zstat-lbl { font-size: .68rem; color: #a889d0; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; margin-bottom: .2rem }
.zstat-val { font-size: .85rem; color: #fff; font-weight: 600 }

.cta-link {
  font-size: .85rem !important;
  margin-top: 1rem !important;
  padding: .75rem 1rem;
  background: rgba(204,68,255,.08);
  border-radius: 10px;
  border-left: 3px solid var(--c-neon);
}

/* ── TABLE ── */
.table-wrap { overflow-x: auto; border-radius: 14px; border: 1px solid rgba(150,80,255,.25); margin: 1.25rem 0 }
.zodiak-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
  min-width: 600px;
}
.zodiak-table th {
  background: rgba(204,68,255,.12);
  color: #fff;
  font-family: 'Cinzel Decorative', serif;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: .85rem 1rem;
  text-align: left;
  border-bottom: 1px solid rgba(150,80,255,.3);
}
.zodiak-table td {
  padding: .75rem 1rem;
  color: #e8d8ff;
  border-bottom: 1px solid rgba(150,80,255,.12);
  transition: background .2s;
}
.zodiak-table tr:last-child td { border-bottom: none }
.zodiak-table tr:hover td { background: rgba(204,68,255,.06) }
.zodiak-table td a { color: var(--c-neon); text-decoration: none; font-weight: 600 }
.zodiak-table td a:hover { text-decoration: underline }
.el { font-weight: 700 }
.el.fire  { color: #ff9060 }
.el.earth { color: #90d050 }
.el.air   { color: #50d0ff }
.el.water { color: #70a0ff }

/* ── FAQ ── */
.faq-list { display: flex; flex-direction: column; gap: .75rem; margin-top: 1.25rem }
.faq-item {
  background: rgba(14,0,40,.8);
  border: 1px solid rgba(150,80,255,.25);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .3s;
}
.faq-item[open] { border-color: rgba(204,68,255,.5) }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.1rem 1.4rem;
  color: #fff;
  font-size: .92rem;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  transition: background .2s;
}
.faq-item summary::-webkit-details-marker { display: none }
.faq-item summary::after {
  content: '+';
  color: var(--c-neon);
  font-size: 1.3rem;
  font-weight: 300;
  transition: transform .3s;
  flex-shrink: 0;
  margin-left: 1rem;
}
.faq-item[open] summary::after { transform: rotate(45deg) }
.faq-item:hover summary { background: rgba(204,68,255,.06) }
.faq-ans { padding: 0 1.4rem 1.2rem; color: #c4aae8; font-size: .88rem; line-height: 1.85 }
.faq-ans a { color: var(--c-neon) }

/* ── RELATED GRID ── */
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}
.related-card {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  background: rgba(14,0,40,.8);
  border: 1px solid rgba(150,80,255,.25);
  border-radius: 14px;
  padding: 1.25rem;
  text-decoration: none;
  transition: all .3s;
  color: inherit;
}
.related-card:hover { border-color: rgba(204,68,255,.5); transform: translateY(-4px); box-shadow: 0 12px 32px rgba(204,68,255,.15) }
.rc-icon { font-size: 1.8rem; flex-shrink: 0; filter: drop-shadow(0 0 8px rgba(204,68,255,.4)) }
.related-card h3 { font-family: 'Cinzel Decorative', serif; font-size: .78rem; color: #fff; margin-bottom: .3rem; font-weight: 700 }
.related-card p { font-size: .78rem; color: #a889d0; line-height: 1.65; margin: 0 }

/* ── SIDEBAR ── */
.article-sidebar { display: flex; flex-direction: column; gap: 1.25rem }

.sidebar-widget {
  background: rgba(10,0,28,.85);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(150,80,255,.25);
  border-radius: 16px;
  padding: 1.25rem;
  position: sticky;
  top: 80px;
}
@media(min-width:1060px) { .sidebar-widget { position: static } }

.sw-title {
  font-family: 'Cinzel Decorative', serif;
  font-size: .75rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: .08em;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(150,80,255,.2);
  padding-bottom: .65rem;
}
/* Zodiac mini grid */
.sw-zodiac-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .4rem;
}
.swz {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: .5rem .3rem;
  border-radius: 10px;
  font-size: 1.1rem;
  text-decoration: none;
  border: 1px solid rgba(150,80,255,.2);
  transition: all .25s;
  color: #e8d8ff;
}
.swz span { font-size: .56rem; color: #a889d0; font-weight: 600; line-height: 1 }
.swz:hover { transform: translateY(-2px) }
.swz.fire:hover  { border-color: rgba(255,85,32,.5); background: rgba(255,85,32,.08); color: #ff9060 }
.swz.earth:hover { border-color: rgba(68,255,136,.5); background: rgba(68,255,136,.08); color: #90d050 }
.swz.air:hover   { border-color: rgba(0,238,255,.5); background: rgba(0,238,255,.08); color: #50d0ff }
.swz.water:hover { border-color: rgba(68,136,255,.5); background: rgba(68,136,255,.08); color: #70a0ff }
/* Links */
.sw-links { display: flex; flex-direction: column; gap: .45rem }
.sw-links a {
  display: block;
  font-size: .8rem;
  color: #c4aae8;
  text-decoration: none;
  padding: .5rem .75rem;
  border-radius: 8px;
  transition: all .2s;
  border: 1px solid transparent;
}
.sw-links a:hover { color: #fff; background: rgba(204,68,255,.1); border-color: rgba(204,68,255,.25) }
/* Elements */
.sw-elements { display: flex; flex-direction: column; gap: .5rem }
.swe {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .55rem .75rem;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: .8rem;
  font-weight: 600;
}
.swe span { display: flex; align-items: center; gap: .4rem; color: #fff }
.swe small { font-size: .65rem; color: #a889d0 }
.swe.fire  { background: rgba(255,85,32,.08);  border-color: rgba(255,85,32,.25) }
.swe.earth { background: rgba(68,255,136,.08); border-color: rgba(68,255,136,.25) }
.swe.air   { background: rgba(0,238,255,.08);  border-color: rgba(0,238,255,.25) }
.swe.water { background: rgba(68,136,255,.08); border-color: rgba(68,136,255,.25) }

/* ── RELATED SECTION ── */
.related-links-section h2 { font-size: 1.3rem !important }