/* ============================================
   LAYOUT.CSS — Grid, Header, Footer
   ============================================ */

/* ---- HEADER ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(13, 17, 23, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  max-width: 1400px;
  margin: 0 auto;
  overflow: hidden;
  gap: var(--space-md);
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
  min-width: 0;
}

.logo-flag {
  font-size: 1.4rem;
  flex-shrink: 0;
}

.logo-flag-img {
  width: 28px;
  height: 20px;
  object-fit: cover;
  border-radius: 3px;
  flex-shrink: 0;
}

.logo-text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--gold);
  letter-spacing: -0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-meta {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  font-size: 0.78rem;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.time-display {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}

.location-tag {
  background: var(--bg-accent);
  border: 1px solid var(--border);
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  position: relative;
  z-index: 99;
}

/* ---- TICKER BAR ---- */
.ticker-bar {
  border-top: 1px solid var(--border);
  background: var(--bg-panel);
  overflow: hidden;
  padding: 6px 0;
}

.ticker-track {
  display: flex;
  gap: var(--space-xl);
  white-space: nowrap;
  animation: ticker-scroll 40s linear infinite;
  padding: 0 var(--space-xl);
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.ticker-track:hover { animation-play-state: paused; }

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.ticker-item { display: inline-flex; align-items: center; gap: 6px; }
.ticker-symbol { color: var(--gold); font-weight: 500; }
.ticker-value  { color: var(--text-primary); }
.ticker-change.up   { color: var(--green-up); }
.ticker-change.down { color: var(--red-down); }

/* ---- MAIN DASHBOARD GRID — 3 panels equal width ---- */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-lg);
  max-width: 1400px;
  margin: var(--space-xl) auto;
  padding: 0 var(--space-xl);
}

.weather-panel  { grid-column: 1; }
.currency-panel { grid-column: 2; }
.crypto-panel   { grid-column: 3; }

/* ---- FOOTER ---- */
.site-footer {
  text-align: center;
  padding: var(--space-xl);
  color: var(--text-muted);
  font-size: 0.72rem;
  border-top: 1px solid var(--border);
  max-width: 1400px;
  margin: 0 auto;
  line-height: 2;
}

.footer-copyright {
  margin-top: var(--space-sm);
  color: var(--text-muted);
}