/* Keep the logo immediately before "Home" on the RTL navigation side. */
@media (min-width: 1280px) {
  header > .app-container {
    justify-content: flex-start;
  }

  nav[aria-label="التنقل الرئيسي"] {
    order: initial;
    flex: 1 1 auto;
    justify-content: flex-start;
    column-gap: clamp(6px, 0.75vw, 12px);
  }

  header > .app-container > div:first-child {
    width: auto;
    flex: 0 0 auto;
  }

}

/* Make the clickable logo card hug the rendered logo on every screen size. */
header > .app-container > div:first-child > button:last-child {
  width: fit-content;
  height: fit-content;
  padding: 0;
  line-height: 0;
}

header > .app-container > div:first-child > button:last-child img {
  height: 52px;
}

/* Match every top-level page wrapper to the Seasons & Anwaa width (max-w-7xl). */
.app-main > [class*="pt-"],
#root > main[class*="pt-"] {
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

@media (min-width: 768px) {
  .app-main > [class*="pt-"],
  #root > main[class*="pt-"] {
    padding-inline: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .app-main > [class*="pt-"],
  #root > main[class*="pt-"] {
    padding-inline: 2rem;
  }
}

/* Emphasize only the active lunar-mansion card in the current season. */
.current-anwaa-card {
  border-width: 1px;
}

.current-anwaa-card h4 {
  font-weight: 900;
}

.current-anwaa-card p,
.current-anwaa-card span {
  font-weight: 700;
}

.current-anwaa-card p {
  color: #1f2937;
  opacity: 1;
}

.current-anwaa-card .current-anwaa-label {
  font-weight: 900;
}

.current-anwaa-card .current-anwaa-countdown {
  background: rgba(255, 255, 255, 0.82);
  border-color: currentColor;
  color: #374151;
  font-weight: 900;
  white-space: nowrap;
}

.current-anwaa-blue {
  background: linear-gradient(135deg, #dbeafe 0%, #f8fbff 72%);
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2), 0 12px 28px rgba(37, 99, 235, 0.2);
}

.current-anwaa-blue h4 {
  color: #1d4ed8;
}

.current-anwaa-blue > div:first-child {
  border-color: #3b82f6;
}

.current-anwaa-pink {
  background: linear-gradient(135deg, #fce7f3 0%, #fffafd 72%);
  border-color: #ec4899;
  box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.2), 0 12px 28px rgba(219, 39, 119, 0.2);
}

.current-anwaa-pink h4 {
  color: #be185d;
}

.current-anwaa-pink > div:first-child {
  border-color: #ec4899;
}

.current-anwaa-orange {
  background: linear-gradient(135deg, #ffedd5 0%, #fffaf5 72%);
  border-color: #f97316;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2), 0 12px 28px rgba(234, 88, 12, 0.2);
}

.current-anwaa-orange h4 {
  color: #c2410c;
}

.current-anwaa-orange > div:first-child {
  border-color: #f97316;
}

.current-anwaa-amber {
  background: linear-gradient(135deg, #fef3c7 0%, #fffdf5 72%);
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2), 0 12px 28px rgba(217, 119, 6, 0.2);
}

.current-anwaa-amber h4 {
  color: #b45309;
}

.current-anwaa-amber > div:first-child {
  border-color: #f59e0b;
}