/* Reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: #0d1117;
  color: #e6edf3;
  line-height: 1.6;
  padding: 1rem;
}

header {
  background-color: #0a1a2a;
  padding: 1rem;
  text-align: center;
  border-bottom: 1px solid #30363d;
}



header h1 {
  font-size: 1.8rem;
  color: #58a6ff;
}

/* Header container with centered logo */
.header-logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 0 0.3rem;
}

/* Responsive logo styling */
.logo-wide {
  max-width: 90%;
  height: auto;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}

nav {
  margin-top: 0.5rem;
}

nav a {
  color: #c9d1d9;
  margin: 0 1rem;
  text-decoration: none;
  font-weight: bold;
}

nav a:hover {
  color: #58a6ff;
}

.sections-container {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center; /* ⬅ Center sections horizontally */
}


/* Section Card */
/* Fix uniform container height */
/* Section Card */
.country {
  background-color: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 1rem;
  max-width: 700px;
  width: 100%;
  margin: 0 auto;
  height: 400px;
  overflow: auto; /* ✅ FIXED */
  position: relative;
}


/* Pagination styling */
.pagination {
  margin-top: 1rem;
  display: flex;
  justify-content: space-between;
}

.pagination button {
  background-color: #21262d;
  color: #e6edf3;
  border: 1px solid #30363d;
  padding: 0.3rem 0.7rem;
  border-radius: 4px;
  cursor: pointer;
}

.pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* News entry styles */
.news-entry {
  display: block;
  text-decoration: none;
  padding: 0.5rem 0;
  color: #e6edf3;
  border-bottom: 1px solid #30363d;
  margin-bottom: 0.5rem;
}

.news-entry:last-child {
  border-bottom: none;
}


.news-entry:hover {
  text-decoration: underline;
}

.published-date {
  font-weight: bold;
  margin-right: 0.25rem;
}

.news-source {
  color: #999;
  font-style: italic;
}

/* Flag icon */
.flag-icon {
  height: 20px;
  margin-left: 8px;
  vertical-align: middle;
}
.move-buttons {
  display: flex;
  gap: 0.25rem;
}

.move-buttons button {
  background-color: #21262d;
  color: #e6edf3;
  border: 1px solid #30363d;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}

.move-buttons button:hover {
  background-color: #30363d;
}

#timezone-clock {
  background-color: #21262d;
  color: #c9d1d9;
  text-align: center;
  padding: 0.3rem 0.5rem; /* thinner */
  font-family: monospace;
  border-bottom: 1px solid #30363d;
  font-size: 0.85rem; /* smaller text */
  white-space: nowrap; /* ✅ prevent wrapping */
  overflow-x: auto;     /* ✅ allow scroll if too narrow */
}

#timezone-clock::-webkit-scrollbar {
  display: none; /* optional: hide scrollbar for a cleaner look */
}

#timezone-clock span {
  margin: 0 0.5rem;
  display: inline-block;
  white-space: nowrap;
}

#timezone-clock .city {
  color: #c9d1d9;
  font-weight: bold;
}

#timezone-clock .time {
  color: #ffa657; /* orange */
  font-weight: normal;
}