/* ===================================================
   TGK Structure: Page Containers & Sections
   File: /structure/page-structure.css
   Version: 1.2 – Responsive Section Padding
   =================================================== */

/* 🌐 Core Content Container */
.content-container {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md);
  line-height: var(--font-base-line);
}

/* 🧱 Reusable Section Block */
.section-block {
  margin-bottom: var(--space-xl);
  margin-top: var(--space-xl);
  padding: var(--space-lg) var(--space-lg); /* vertical horizontal */
  background: linear-gradient(
    to bottom,
    var(--section-bg-top),
    var(--section-bg-bottom)
  );
  border: 0.5px solid var(--section-border);
  border-left: 2px solid var(--section-border);
  border-radius: var(--border-radius-base);
  box-shadow: var(--scroll-shadow-soft);
  overflow-x: hidden;
}

/* 📱 Mobile Optimization */
@media (max-width: 600px) {
  .section-block {
    padding: var(--space-sm) var(--space-sm); /* smaller padding on mobile */
  }
}

/* Chart block with same spacing as .section-block */
.chart-wrapper {
  width: 100%;
  height: 500px;
  margin-left: auto;
  margin-right: auto;
  /* Optional: cap the height so it doesn't dominate */
  max-height: 90vh;
}

.chart-wrapper canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  max-width: 100%;
  max-height: 100%;
  outline: none;
}


/* ✅ Caption styling */
.chart-caption {
  text-align: center;
  font-size: var(--font-base-size);
  margin-top: var(--space-md);
  color: var(--text-dim);
}

@media (max-width: 600px) {
  .chart-zone {
    padding: var(--space-sm) var(--space-sm);
  }

  .chart-caption {
    font-size: var(--font-size-vs);
  }
}


/* ========================================
   Section Headings – Centered with Decorative Lines
   ======================================== */

  .section-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-lg);
    font-family: var(--font-display);
    color: var(--text-accent);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: var(--space-md);
    gap: var(--space-sm);
  }

  .section-heading::before,
  .section-heading::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: var(--text-accent);
    opacity: 0.4;
  }

  /* 📱 Responsive scaling on smaller devices */
  @media (max-width: 600px) {
    .section-heading {
      font-size: var(--font-size-lg);
      letter-spacing: 0.3px;
    }
  }


/* 💠 Emoji List Format */
.list-emoji {
  list-style: none !important;
  padding-left: 0;
  margin: var(--space-md) 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  white-space: normal;
  max-width: 100%;
}

.list-emoji li {
  position: relative;
  margin-bottom: var(--space-sm);
  padding-left: var(--space-lg);
}

.list-emoji li::before {
  content: "✦ ";
  position: absolute;
  left: 0;
  top: 0.05rem;
  font-size: var(--font-size-base);
  line-height: var(--font-base-line);
  color: var(--text-accent);
}

.list-emoji li a {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* 📎 Offset anchor scrolls so footnotes are not hidden under headers */
@media (max-width: 600px) {
  .list-emoji li {
    padding-left: var(--space-lg); /* restore room for the emoji */

  }

  .list-emoji li::before {
    left: var(--space-xs); /* nudges emoji right a bit */
  }

  .list-emoji li a {
    display: inline;
    word-break: break-word;
  }
}

/* ✴️ Emphasis Tag */
strong {
  font-weight: 600;
  color: var(--strong-text, var(--text-accent));
  font-family: var(--font-serif);
  letter-spacing: 0.3px;
}

/* 🚪 Gateway / Threshold Messages */
.welcome-text {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--welcome-text, var(--text-accent));
  text-align: center;
  margin: var(--space-lg) 0 var(--space-md);
  font-family: var(--font-display);
  letter-spacing: 0.5px;
}

.door-callout {
  font-size: var(--font-size-base);
  font-style: italic;
  color: var(--door-callout-color, var(--text-primary));
  text-align: center;
  max-width: 40ch;
  margin: 0 auto;
  line-height: var(--font-base-line);
  opacity: 0.9;
}

/* 📝 Section Subtitle */
.section-subtitle {
  font-size: var(--font-size-base);
  font-weight: 400;
  color: var(--section-subtitle-color, var(--text-secondary));
  font-family: var(--font-serif);
  margin-top: -0.5rem;
  margin-bottom: var(--space-lg);
  line-height: var(--font-base-line);
  text-align: left;
  letter-spacing: 0.25px;
}

/* ========================================
   Page Title Block – Centered Container
   ======================================== */
   .page-title-block {
    text-align: center;
    margin: var(--space-sm) auto var(--space-sm);
    max-width: 960px;
    padding: 0 var(--space-am);
  }
  
  /* ========================================
     Page Title – Styled Like Section Title
     ======================================== */
  .page-title {
    text-align: center;
    font-size: var(--font-size-lg);
    font-weight: bold;
    font-family: var(--page-title);
    color: var(--text-accent);
    line-height: var(--font-base-line);
    margin-bottom: var(--space-md);
  }
  
/* ========================================
   Fullscreen Center Wrapper
   ======================================== */
.center-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh; /* fills viewport vertically */
  width: 100%;
  padding: var(--space-md); /* keeps breathing room on small screens */
  box-sizing: border-box;
}

/*==========================================
Footnotes
============================================*/

.footnote {
  font-size: 0.85rem;
  color: var(--text-muted); /* Adjust this var for light/dark themes */
  margin-top: 1rem;
  padding-left: 1rem;
  border-left: 2px solid var(--accent-obisidian); /* or --accent-gold depending on pillar */
  font-style: italic;
  line-height: 1.4;
}