/**
 * Home
 * Styles specific to the homepage (main_claude.php).
 * Loaded only on the homepage via $extra_head in the controller.
 * Depends on: custom-properties.css, global.css, typography.css
 */


/* ─── Hero ─── */

/* .container on homepage is full-width (set in masthead.css).
   Inner elements control their own max-width. */

.hero {
  background: var(--navy);
  padding:    var(--space-10) 0;
}

/* Inner content wrapper — constrains hero content to readable width, left-aligned */
.hero-inner,
.search-container,
.hero-stats {
  max-width:     var(--content-width);
  margin-left:   auto;
  margin-right:  auto;
  padding-left:  var(--content-padding);
  padding-right: var(--content-padding);
}

/* Stats bar stays centered across full content width */

.hero-inner {
  margin-bottom: var(--space-8);
}

.hero-badge {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--space-2);
  background:     rgba(45, 212, 191, 0.12);
  border:         1px solid rgba(45, 212, 191, 0.25);
  border-radius:  var(--radius-pill);
  padding:        var(--space-1) var(--space-4);
  font-size:      var(--text-xs);
  font-weight:    var(--weight-bold);
  color:          var(--teal-light);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  margin-bottom:  var(--space-5);
}

.hero-badge::before {
  content:       '';
  display:       block;
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    var(--teal-light);
  flex-shrink:   0;
}

.hero-title {
  font-size:      var(--text-3xl);
  font-weight:    var(--weight-bold);
  color:          var(--white);
  line-height:    var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-bottom:  var(--space-4);
}

.hero-sub {
  font-size:   var(--text-base);
  font-weight: var(--weight-light);
  color:       rgba(255, 255, 255, 0.65);
  line-height: var(--leading-loose);
  margin:      0;
}


/* ─── Stats bar ─── */

.hero-stats {
  display:       flex;
  gap:           0;
  border-top:    1px solid rgba(255, 255, 255, 0.07);
  margin-top:    var(--space-8);
  padding-top:   var(--space-6);
}

.hero-stat {
  flex:        1;
  text-align:  center;
  padding:     0 var(--space-4);
  border-right: 1px solid rgba(255, 255, 255, 0.07);
}

.hero-stat:first-child { padding-left: 0; }
.hero-stat:last-child  { border-right: none; padding-right: 0; }

.hero-stat .stat-number {
  display:        block;
  font-size:      var(--text-2xl);
  font-weight:    var(--weight-bold);
  color:          var(--white);
  letter-spacing: var(--tracking-tight);
  line-height:    1;
  margin-bottom:  var(--space-1);
}

.hero-stat .stat-accent {
  color: var(--teal-light);
}

.hero-stat .stat-label {
  display:        block;
  font-size:      var(--text-xs);
  font-weight:    var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.45);
}


/* ─── Search container ─── */
/* Search.php renders .search-container inside .hero */

.search-container {
  margin-bottom: var(--space-8);
}
.search-container > *{
  max-width: 650px;
}

/* Hide the h2 inside Search.php — hero title already serves this purpose */
.search-container h2 {
  display: none;
}

.search-help {
  font-size:     var(--text-sm);
  color:         rgba(255, 255, 255, 0.5);
  margin-bottom: var(--space-4);
}

.search-input-row {
  display:       flex;
  align-items:   center;
  background:    rgba(255, 255, 255, 0.06);
  border:        1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  padding:       var(--space-1);
  gap:           var(--space-2);
  margin-bottom: var(--space-2);
  transition:    border-color var(--transition-fast),
                 box-shadow var(--transition-fast);
}

.search-input-row:focus-within {
  border-color: rgba(45, 212, 191, 0.4);
  box-shadow:   0 0 0 3px rgba(45, 212, 191, 0.1);
}

.search-input-row input[type="text"],
.search-input-row input[type="input"] {
  flex:          1;
  background:    transparent;
  border:        none !important;
  border-radius: 0 !important;
  box-shadow:    none !important;
  outline:       none !important;
  padding:       var(--space-2) var(--space-3);
  font-family:   var(--font-base);
  font-size:     var(--text-sm);
  color:         rgba(255, 255, 255, 0.85);
  width:         100%;
}

.search-input-row input[type="text"]::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.search-input-row input[type="text"]:focus {
  outline:    none;
  box-shadow: none;
  border:     none;
}

.search-input-row #buttonSearch {
  background:     var(--teal);
  color:          var(--white);
  border:         none;
  border-radius:  var(--radius-md);
  padding:        var(--space-2) var(--space-5);
  font-family:    var(--font-base);
  font-size:      var(--text-sm);
  font-weight:    var(--weight-medium);
  letter-spacing: 0.02em;
  cursor:         pointer;
  white-space:    nowrap;
  transition:     background-color var(--transition-fast);
  box-shadow:     none;
  transform:      none;
}

.search-input-row #buttonSearch:hover {
  background:  var(--color-bg-action-hover);
  transform:   none;
  box-shadow:  none;
}

.search-source {
  font-size:     var(--text-sm);
  color:         rgba(255, 255, 255, 0.45);
  margin-bottom: var(--space-3);
}

/* Example links */
.search-examples {
  font-size: var(--text-sm);
  color:     rgba(255, 255, 255, 0.45);
}

.search-examples strong {
  color: rgba(255, 255, 255, 0.45);
}

.search-examples ul {
  padding-left: var(--space-4);
  margin:       var(--space-2) 0 0;
}

.search-examples li {
  margin-bottom: var(--space-1);
  color:         rgba(255, 255, 255, 0.45);
}

.example-link {
  font-family:   var(--font-mono);
  font-size:     var(--text-xs);
  color:         var(--teal-light);
  background:    rgba(45, 212, 191, 0.08);
  border:        1px solid rgba(45, 212, 191, 0.2);
  border-radius: var(--radius-sm);
  padding:       1px var(--space-2);
  cursor:        pointer;
  transition:    background-color var(--transition-fast),
                 color var(--transition-fast);
}

.example-link:hover {
  background: rgba(45, 212, 191, 0.15);
  color:      var(--teal-light);
}


/* ─── Data overview section ─── */

.data-overview {
  padding:       var(--space-8) var(--content-padding);
  max-width:     var(--content-width);
  margin-left:   auto;
  margin-right:  auto;
}

.section-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   var(--space-6);
  padding-bottom:  var(--space-4);
  border-bottom:   var(--border-subtle);
}
 
.section-link {
  font-size:   var(--text-sm);
  font-weight: var(--weight-medium);
  color:       var(--teal);
  transition:  color var(--transition-fast);
}
 
.section-link:hover {
  color:           var(--teal-light);
  text-decoration: none;
}


/* ─── Chart row ─── */

.chart-row {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-6);
  margin-bottom:         var(--space-6);
}

.chart-figure {
  background:    var(--white);
  border:        var(--border);
  border-radius: var(--radius-lg);
  padding:       var(--space-6);
  text-align:    center;
  margin:        0;
  box-shadow:    var(--shadow-sm);
  min-height:    320px;
  display:       flex;
  flex-direction: column;
  align-items:   center;
  justify-content: center;
}

/* D3 chart container — replaces <img> when charts are interactive */
.chart-figure .chart-canvas {
  width:    100%;
  height:   300px;
  display:  block;
}
 
.chart-figure img {
  max-width:     100%;
  max-height:    380px;
  height:        auto;
  border-radius: 0;
  box-shadow:    none;
  object-fit:    contain;
}

.chart-figure figcaption {
  font-size:      var(--text-xs);
  font-weight:    var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color:          var(--color-text-secondary);
  margin-top:     var(--space-4);
  font-style:     normal;
}


/* ─── Abbreviations details ─── */

.abbrev-details {
  background:    var(--white);
  border:        var(--border);
  border-radius: var(--radius-lg);
  overflow:      hidden;
  box-shadow:    var(--shadow-sm);
}

.abbrev-details summary {
  font-size:      var(--text-sm);
  font-weight:    var(--weight-medium);
  color:          var(--color-text-secondary);
  padding:        var(--space-4) var(--space-6);
  cursor:         pointer;
  user-select:    none;
  list-style:     none;
  display:        flex;
  align-items:    center;
  gap:            var(--space-2);
  transition:     background-color var(--transition-fast),
                  color var(--transition-fast);
}

.abbrev-details summary::-webkit-details-marker { display: none; }

.abbrev-details summary::before {
  content:     '›';
  font-size:   var(--text-base);
  color:       var(--teal);
  transition:  transform var(--transition-base);
  line-height: 1;
}

.abbrev-details[open] summary::before {
  transform: rotate(90deg);
}

.abbrev-details summary:hover {
  background-color: var(--color-bg-subtle);
  color:            var(--color-text-primary);
}

.abbrev-details .table-responsive {
  border-top: var(--border);
}


/* ─── Footer ─── */

.site-footer {
  background:  var(--navy);
  color:       rgba(255, 255, 255, 0.7);
  padding:     var(--space-12) 0 var(--space-8);
  margin-top:  var(--space-16);
}

.site-footer .container {
  max-width: var(--content-width);
  margin:    0 auto;
  padding:   0 var(--content-padding);
}

.footer-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap:                   var(--space-8);
  margin-bottom:         var(--space-8);
}

.footer-section h3 {
  font-size:      var(--text-xs);
  font-weight:    var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color:          var(--teal-light);
  margin-bottom:  var(--space-3);
}

.footer-section p {
  font-size:   var(--text-sm);
  color:       rgba(255, 255, 255, 0.5);
  line-height: var(--leading-loose);
  max-width:   none;
}

.footer-section a {
  color:      rgba(255, 255, 255, 0.55);
  transition: color var(--transition-fast);
}

.footer-section a:hover {
  color:           var(--white);
  text-decoration: none;
}

.footer-bottom {
  border-top:  1px solid rgba(255, 255, 255, 0.07);
  padding-top: var(--space-6);
  text-align:  center;
}

.footer-bottom p {
  font-size: var(--text-xs);
  color:     rgba(255, 255, 255, 0.25);
  max-width: none;
  margin:    0;
}

.footer-updated {
  margin-top: var(--space-2) !important;
}


/* ─── Responsive ─── */

@media (max-width: 48em) {
  .hero {
    padding: var(--space-8) 0;
  }

  .hero-title { font-size: var(--text-2xl); }

  .hero-stats  {
    flex-wrap:  wrap;
    gap:        var(--space-4);
  }

  .hero-stat {
    flex:         1 1 40%;
    border-right: none;
    padding:      0;
  }

  .chart-row {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }
}