/**
 * pillars.css — Pillar Page Theming + SVG Watermarks
 * Each pillar gets full-page colour tinting + unique background watermark.
 * @package TheUnhacked
 * @version 3.1.0
 */

/* ═══════════════════════════════════════════════════════════════════════════
   PILLAR HERO
═══════════════════════════════════════════════════════════════════════════ */

.tuh-pillar-hero {
  position: relative;
  padding-block: 6rem 4rem;
  overflow: hidden;
  border-bottom: 1px solid var(--color-border);
  /* Dramatic coloured top bar — first thing you see */
  border-top: 3px solid var(--pillar-color, var(--color-gold));
  isolation: isolate;
}

/* Glowing top edge */
.tuh-pillar-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--pillar-color, var(--color-gold));
  box-shadow: 0 0 24px 4px var(--pillar-glow, rgba(201,168,76,0.4));
  pointer-events: none;
  z-index: 2;
}

/* Colour wash layer — uses --pillar-wash-bg injected from PHP (no color-mix needed) */
.tuh-pillar-hero__wash {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 80% 60% at 50% 0%,
    var(--pillar-wash-bg, rgba(201,168,76,0.10)) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

/* Watermark container */
.tuh-pillar-hero__watermark {
  position: absolute;
  right: -2%;
  top: 50%;
  transform: translateY(-50%);
  width: min(520px, 55vw);
  height: min(520px, 55vw);
  opacity: 0.09;
  color: var(--pillar-color);
  pointer-events: none;
  z-index: 0;
}

.tuh-pillar-hero__watermark svg {
  width: 100%;
  height: 100%;
}

/* Per-pillar watermark intensity — set to be clearly visible */
.tuh-pillar-hero[style*="#C4B4FF"] .tuh-pillar-hero__watermark { opacity: 0.10; }
.tuh-pillar-hero[style*="#3DDCA0"] .tuh-pillar-hero__watermark { opacity: 0.09; }
.tuh-pillar-hero[style*="#50D8F4"] .tuh-pillar-hero__watermark { opacity: 0.09; }
.tuh-pillar-hero[style*="#72D89E"] .tuh-pillar-hero__watermark { opacity: 0.09; }
.tuh-pillar-hero[style*="#F5A870"] .tuh-pillar-hero__watermark { opacity: 0.09; }
.tuh-pillar-hero[style*="#6AC4DE"] .tuh-pillar-hero__watermark { opacity: 0.09; }
.tuh-pillar-hero[style*="#CCB0D8"] .tuh-pillar-hero__watermark { opacity: 0.10; }

.tuh-pillar-hero__content {
  position: relative;
  z-index: 1;
  max-width: 700px;
}

/* Icon */
.tuh-pillar-hero__icon {
  display: block;
  font-size: 3.5rem;
  line-height: 1;
  margin-bottom: 1rem;
}

/* Title */
.tuh-pillar-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 7vw, 5rem);
  font-weight: 900;
  line-height: 1;
  margin-bottom: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.15em;
}

.tuh-pillar-hero__title-main {
  color: var(--pillar-color);
  text-shadow: 0 0 40px var(--pillar-glow, rgba(201,168,76,0.35));
}

.tuh-pillar-hero__title-sub {
  color: rgba(242,242,245,0.35);
  font-size: 0.55em;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tuh-pillar-hero__desc {
  font-size: 1.05rem;
  color: var(--color-muted);
  max-width: 520px;
  line-height: 1.7;
  margin-bottom: 2.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TRIAD BREAKDOWN TABS
═══════════════════════════════════════════════════════════════════════════ */

.tuh-pillar-hero__triad {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.tuh-pillar-triad-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.25rem 1.5rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  min-width: 140px;
  transition: border-color 0.25s, background 0.25s, transform 0.2s;
  cursor: pointer;
}

.tuh-pillar-triad-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--type-color, var(--pillar-color));
  border-radius: 2px 2px 0 0;
  opacity: 0;
  transition: opacity 0.2s;
}

.tuh-pillar-triad-item:hover,
.tuh-pillar-triad-item.is-active {
  border-color: var(--type-color, var(--pillar-color));
  background: rgba(255,255,255,0.07);
  transform: translateY(-2px);
}

.tuh-pillar-triad-item:hover::before,
.tuh-pillar-triad-item.is-active::before {
  opacity: 1;
}

.tuh-pillar-triad-item__icon {
  font-size: 1.4rem;
  line-height: 1;
}

.tuh-pillar-triad-item__label {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--type-color, var(--pillar-color));
}

.tuh-pillar-triad-item__count {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
}

/* Purpose description — hidden by default, shown on hover */
.tuh-pillar-triad-item__purpose {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  background: rgba(9,9,15,0.95);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  font-size: 0.775rem;
  color: var(--color-muted);
  line-height: 1.55;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  z-index: 10;
  white-space: normal;
}

.tuh-pillar-triad-item__purpose::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--color-border);
}

.tuh-pillar-triad-item:hover .tuh-pillar-triad-item__purpose {
  opacity: 1;
  visibility: visible;
}

.tuh-pillar-hero__filter-note {
  font-size: 0.825rem;
  color: var(--color-subtle);
}

.tuh-pillar-hero__filter-note a {
  color: var(--pillar-color);
  text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGINATION
═══════════════════════════════════════════════════════════════════════════ */

.tuh-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
}

.tuh-pagination__btn {
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1.5rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-muted);
  text-decoration: none;
  font-size: 0.875rem;
  transition: border-color 0.2s, color 0.2s;
}

.tuh-pagination__btn:hover {
  border-color: var(--pillar-color, var(--color-gold));
  color: var(--pillar-color, var(--color-gold));
}

.tuh-pagination__info {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-subtle);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FULL-PAGE PILLAR COLOUR TINT (body-level)
   When viewing a pillar page, the entire page inherits subtle tinting.
═══════════════════════════════════════════════════════════════════════════ */

/* Applied via body.tuh-pillar-{slug} classes (set in header.php body_class) */

body.tuh-pillar-mind    { --pillar-page-color: #C4B4FF; }
body.tuh-pillar-money   { --pillar-page-color: #3DDCA0; }
body.tuh-pillar-digital { --pillar-page-color: #50D8F4; }
body.tuh-pillar-health  { --pillar-page-color: #72D89E; }
body.tuh-pillar-social  { --pillar-page-color: #F5A870; }
body.tuh-pillar-work    { --pillar-page-color: #6AC4DE; }
body.tuh-pillar-life    { --pillar-page-color: #CCB0D8; }

/* Reading progress bar colour on pillar pages */
body[class*="tuh-pillar-"] #tuh-reading-progress__bar {
  background: var(--pillar-page-color, var(--color-gold)) !important;
  box-shadow: 0 0 8px var(--pillar-page-color, var(--color-gold));
}

/* Pillar-coloured breadcrumb current item */
body[class*="tuh-pillar-"] .tuh-bc__current {
  color: var(--pillar-page-color, var(--color-gold));
}

/* Pillar card on post pages — use pillar colour for type badges */
body[class*="tuh-pillar-"] .tuh-card__pillar {
  color: var(--pillar-page-color, var(--color-gold));
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTENT TYPE BADGE TOOLTIPS (in post-cards, breadcrumbs etc.)
   Users hover the badge to see the type's purpose.
═══════════════════════════════════════════════════════════════════════════ */

.tuh-card__type {
  position: relative;
  cursor: help;
}

.tuh-card__type[data-purpose]::after {
  content: attr(data-purpose);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  background: rgba(9,9,15,0.95);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.6rem 0.875rem;
  font-size: 0.72rem;
  color: var(--color-muted);
  line-height: 1.5;
  text-align: center;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  z-index: 10;
}

.tuh-card__type[data-purpose]:hover::after {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 600px) {
  .tuh-pillar-hero__triad { flex-direction: column; }
  .tuh-pillar-triad-item  { min-width: unset; }
  .tuh-pillar-triad-item__purpose { display: none; } /* too small for tooltip */
}