/*
 * SOULTRIANGLE card theme (dark green)
 * Loaded after style.css from includes/header.php.
 * Cards = dark green so they stand out from the light page background.
 * Calculators, result panels, forms and long-reading sections stay light for readability.
 * To change the card colour for the whole site, edit the variables below.
 */
:root{
  --card-1:#12291f;
  --card-2:#1c4030;
  --card-3:#2b5a43;
  --card-mint:#B8E4C9;
  --card-pale:#E9FADD;
  --card-text:#d6eadb;
  --card-muted:#a9cdb6;
  --card-line:rgba(184,228,201,.28);
}

/* ---------- shared card surface ---------- */
html body .category-tool-card.category-tool-card,
html body .related-card.related-card,
html body .sidebar-card.sidebar-card,
html body .category-sidebar-card.category-sidebar-card,
html body .soul-tool .number-card.number-card,
html body .category-card.category-card,
html body .tool-card.tool-card,
html body .guide-card.guide-card{
  position:relative;
  overflow:hidden;
  color:var(--card-text);
  background:
    radial-gradient(circle at 100% 0%,rgba(184,228,201,.22) 0,rgba(184,228,201,0) 46%),
    linear-gradient(150deg,var(--card-1) 0%,var(--card-2) 58%,var(--card-3) 100%);
  border:1px solid var(--card-line);
  box-shadow:0 16px 34px rgba(18,41,31,.28),inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
/* mint accent bar on top edge */
html body .category-tool-card.category-tool-card:before,
html body .related-card.related-card:before,
html body .sidebar-card.sidebar-card:before,
html body .category-sidebar-card.category-sidebar-card:before,
html body .category-card.category-card:before,
html body .tool-card.tool-card:before,
html body .guide-card.guide-card:before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--card-mint) 0%,#7caf8c 55%,#3F5468 100%);
}

/* ---------- hover (only on cards that are clickable) ---------- */
html body .category-tool-card.category-tool-card:hover,
html body .related-card.related-card:hover,
html body .category-card.category-card:hover,
html body .tool-card.tool-card:hover,
html body .guide-card.guide-card:hover{
  transform:translateY(-6px);
  border-color:var(--card-mint);
  box-shadow:0 24px 46px rgba(18,41,31,.38),0 0 0 3px rgba(184,228,201,.20);
}

/* ---------- category page tool cards ---------- */
html body .category-tool-card.category-tool-card{padding:24px 22px 22px}
html body .category-tool-card.category-tool-card .tool-card-kicker{color:#9fd1b3;font-weight:800}
html body .category-tool-card.category-tool-card .tool-status{background:var(--card-mint);color:var(--card-1);font-weight:800;box-shadow:0 0 0 3px rgba(184,228,201,.18)}
html body .category-tool-card.category-tool-card .tool-icon{
  width:54px;height:54px;border-radius:16px;font-size:1.6rem;
  background:rgba(184,228,201,.14);color:var(--card-mint);
  border:1px solid rgba(184,228,201,.38);box-shadow:0 0 22px rgba(184,228,201,.18);
}
html body .category-tool-card.category-tool-card h3,
html body .category-tool-card.category-tool-card h3 a{color:#fff}
html body .category-tool-card.category-tool-card p{color:var(--card-text)}
html body .category-tool-card.category-tool-card a.tool-card-link{
  align-self:flex-start;margin-top:auto;padding:10px 18px;border-radius:999px;
  background:var(--card-mint);color:var(--card-1);font-weight:800;text-decoration:none;
  transition:background .2s ease,transform .2s ease;
}
html body .category-tool-card.category-tool-card a.tool-card-link:hover{background:#fff;text-decoration:none}
html body .category-tool-card.category-tool-card a.tool-card-link span{display:inline-block;transition:transform .2s ease}
html body .category-tool-card.category-tool-card a.tool-card-link:hover span{transform:translateX(4px)}
/* planned tools (no link yet) */
html body .category-tool-card.category-tool-card span.tool-card-link{
  align-self:flex-start;margin-top:auto;padding:9px 16px;border-radius:999px;
  border:1px dashed rgba(184,228,201,.55);color:var(--card-mint);font-weight:700;
}

/* ---------- related cards on tool pages ---------- */
html body .related-card.related-card{padding:20px 20px 18px;border-radius:16px;text-decoration:none}
html body .related-card.related-card strong{color:#fff;font-size:1.02rem}
html body .related-card.related-card span{color:var(--card-text)}
html body .related-card.related-card:after{
  content:'Explore →';display:block;margin-top:14px;color:var(--card-mint);
  font-weight:800;font-size:.88rem;letter-spacing:.02em;transition:transform .2s ease;
}
html body .related-card.related-card:hover:after{transform:translateX(5px)}

/* ---------- sidebar cards ---------- */
html body .sidebar-card.sidebar-card,
html body .category-sidebar-card.category-sidebar-card{border-radius:18px}
html body .sidebar-card.sidebar-card h2,
html body .category-sidebar-card.category-sidebar-card h2{color:#fff}
html body .sidebar-card.sidebar-card p,
html body .category-sidebar-card.category-sidebar-card p{color:var(--card-text)}
html body .sidebar-card.sidebar-card .sidebar-links a,
html body .category-sidebar-card.category-sidebar-card .sidebar-links a{
  background:rgba(255,255,255,.08);color:var(--card-pale);
  border:1px solid rgba(184,228,201,.14);text-decoration:none;
  transition:background .18s ease,transform .18s ease;
}
html body .sidebar-card.sidebar-card .sidebar-links a:hover,
html body .category-sidebar-card.category-sidebar-card .sidebar-links a:hover{
  background:rgba(184,228,201,.24);color:#fff;transform:translateX(3px);text-decoration:none;
}
html body .sidebar-card.sidebar-card .sidebar-links a[aria-current="page"],
html body .category-sidebar-card.category-sidebar-card .sidebar-links a[aria-current="page"]{
  background:var(--card-mint);color:var(--card-1);font-weight:800;border-color:var(--card-mint);
}

/* ---------- "Our commitment" callouts on category / tool pages ---------- */
html body .life-tool .methodology-callout,
html body .astro-tool .methodology-callout,
html body .expression-tool .methodology-callout,
html body .soul-tool .methodology-callout,
html body .soul-category .methodology-callout{
  position:relative;overflow:hidden;color:var(--card-text);border:1px solid var(--card-line);border-left:6px solid var(--card-mint);
  background:radial-gradient(circle at 100% 0%,rgba(184,228,201,.20) 0,rgba(184,228,201,0) 50%),linear-gradient(150deg,var(--card-1) 0%,var(--card-2) 60%,var(--card-3) 100%);
  box-shadow:0 16px 34px rgba(18,41,31,.26);
}
html body .life-tool .methodology-callout h2,
html body .astro-tool .methodology-callout h2,
html body .expression-tool .methodology-callout h2,
html body .soul-tool .methodology-callout h2,
html body .soul-category .methodology-callout h2{color:#fff}
html body .life-tool .methodology-callout p,
html body .astro-tool .methodology-callout p,
html body .expression-tool .methodology-callout p,
html body .soul-tool .methodology-callout p,
html body .soul-category .methodology-callout p{color:var(--card-text)}
html body .life-tool .methodology-callout a,
html body .astro-tool .methodology-callout a,
html body .expression-tool .methodology-callout a,
html body .soul-tool .methodology-callout a,
html body .soul-category .methodology-callout a{color:var(--card-mint);font-weight:700}
html body .life-tool .methodology-callout .last-updated,
html body .astro-tool .methodology-callout .last-updated,
html body .expression-tool .methodology-callout .last-updated,
html body .soul-tool .methodology-callout .last-updated,
html body .soul-category .methodology-callout .last-updated{color:var(--card-muted)}
html body .soul-tool .methodology-callout .methodology-symbol,
html body .soul-category .methodology-callout .methodology-symbol{background:rgba(184,228,201,.16);color:var(--card-mint)}

/* ---------- Soul Contract number cards (inside the result) ---------- */
html body .soul-tool .number-card.number-card{padding:20px;border-radius:18px}
html body .soul-tool .number-card .number-label{color:var(--card-mint);font-weight:700}
html body .soul-tool .number-card .number-value{color:#fff;text-shadow:0 0 24px rgba(184,228,201,.35)}
html body .soul-tool .number-card h3{color:#fff}
html body .soul-tool .number-card p{color:var(--card-text)}

/* ---------- home page cards ---------- */
html body .category-card.category-card{border-radius:18px}
html body .category-card.category-card .category-icon{background:rgba(184,228,201,.14)!important;color:var(--card-mint)!important;border:1px solid rgba(184,228,201,.38);box-shadow:0 0 22px rgba(184,228,201,.16)}
html body .category-card.category-card .category-title{color:#fff}
html body .category-card.category-card .category-desc{color:var(--card-text);font-size:12px;line-height:1.7}
html body .category-card.category-card .card-arrow{color:var(--card-mint)}

html body .tool-card.tool-card{border-radius:18px}
html body .tool-card.tool-card .tool-number{color:#9fd1b3}
html body .tool-card.tool-card .tool-tag{background:var(--card-mint);color:var(--card-1);font-weight:800}
html body .tool-card.tool-card .tool-symbol{background:rgba(184,228,201,.14)!important;color:var(--card-mint)!important;border:1px solid rgba(184,228,201,.38);box-shadow:0 0 22px rgba(184,228,201,.16)}
html body .tool-card.tool-card h3{color:#fff;font-size:14px}
html body .tool-card.tool-card>p{color:var(--card-text);font-size:11.5px;line-height:1.75}
html body .tool-card.tool-card .tool-card-bottom{border-top-color:rgba(184,228,201,.25)}
html body .tool-card.tool-card .tool-card-bottom>span{color:var(--card-muted);font-size:9px}
html body .tool-card.tool-card .tool-card-bottom a{color:var(--card-1);background:var(--card-mint);border-radius:999px;padding:7px 13px;font-size:11px;font-weight:800;transition:background .2s ease}
html body .tool-card.tool-card .tool-card-bottom a:hover{background:#fff}

html body .guide-card.guide-card{border-radius:18px}
html body .guide-card.guide-card .guide-index{color:var(--card-mint)}
html body .guide-card.guide-card .guide-index span{color:var(--card-muted)}
html body .guide-card.guide-card h3{color:#fff}
html body .guide-card.guide-card p{color:var(--card-text);font-size:11.5px;line-height:1.75}
html body .guide-card.guide-card .guide-link{color:var(--card-mint);font-weight:800}

/* ---------- keyboard focus on dark surfaces ---------- */
html body .category-tool-card.category-tool-card a:focus-visible,
html body .related-card.related-card:focus-visible,
html body .sidebar-card.sidebar-card a:focus-visible,
html body .category-sidebar-card.category-sidebar-card a:focus-visible,
html body .category-card.category-card:focus-visible,
html body .guide-card.guide-card:focus-visible,
html body .tool-card.tool-card a:focus-visible{outline:3px solid #fff;outline-offset:3px}

@media(prefers-reduced-motion:reduce){
  html body .category-tool-card.category-tool-card,
  html body .related-card.related-card,
  html body .category-card.category-card,
  html body .tool-card.tool-card,
  html body .guide-card.guide-card,
  html body .sidebar-links a{transition:none}
  html body .category-tool-card.category-tool-card:hover,
  html body .related-card.related-card:hover,
  html body .category-card.category-card:hover,
  html body .tool-card.tool-card:hover,
  html body .guide-card.guide-card:hover{transform:none}
}