/* 🎨 WeLoveGerman.com Theme — Energetic German Flag Design */

body {
  margin: 0;
  font-family: 'Nunito Sans', sans-serif;
  background: #fff8e1;
  color: #1f2937;
  line-height: 1.6;
}

/* Header */
header {
  text-align: center;
  padding: 2rem 1rem 1rem;
  background: linear-gradient(180deg, #000000 0%, #d62828 50%, #fdc500 100%);
  color: white;
  border-bottom: 6px solid #ffcf33;
}
header h1 {
  font-size: 2.5rem;
  margin: 0.5rem 0 0;
}
header .subtitle {
  font-size: 1.2rem;
  margin: 0;
  color: #fffae6;
}
.flag-bar {
  height: 8px;
  background: linear-gradient(to right, #000000, #d62828, #fdc500);
}

/* Main Content */
main {
  max-width: 1100px;
  margin: 2rem auto;
  padding: 2rem;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.1);
}
main h2 {
  color: #d62828;
  border-left: 6px solid #fdc500;
  padding-left: 10px;
  margin-top: 2rem;
}
main p, main li {
  font-size: 1.05rem;
}
a {
  color: #00509e;
  text-decoration: none;
  font-weight: 600;
}
a:hover {
  text-decoration: underline;
  color: #d62828;
}

/* Tip Box */
.tip {
  background: #e0f2fe;
  border-left: 6px solid #00509e;
  padding: 1rem;
  border-radius: 12px;
  margin-top: 1.5rem;
}

/* Quiz/Exercise Box */
.exercise {
  background: #fff3cd;
  border-left: 6px solid #ffb703;
  padding: 1rem;
  border-radius: 12px;
  margin-top: 1.5rem;
}

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}
th, td {
  border: 1px solid #e5e7eb;
  padding: 0.75rem;
  text-align: left;
}
th {
  background: #d62828;
  color: #fff;
}
tr:nth-child(even) {
  background: #fff6e6;
}

/* Footer */
footer {
  text-align: center;
  color: white;
  background: #000000;
  margin-top: 2rem;
  padding: 1.2rem 0 0;
}
footer .footer-flag {
  height: 8px;
  background: linear-gradient(to right, #000000, #d62828, #fdc500);
}
footer p {
  margin: 0.5rem 0 1rem;
  font-size: 1.1rem;
}


.day-section {
  background: #f9fafb;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.roadmap-container { max-width: 900px; margin: auto; padding: 20px; }
.roadmap-title { font-size: 2em; text-align: center; color: #1e3a8a; }
.roadmap-subtitle { text-align: center; color: #555; margin-bottom: 30px; }
.day-section { background: #f9fafb; border-radius: 12px; padding: 20px; margin-bottom: 25px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.day-title { margin-top: 0; color: #111827; font-size: 1.4em; }
.activity-list { list-style: none; padding-left: 0; }
.activity-item { margin: 10px 0; }
.activity-link { text-decoration: none; color: #1f2937; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.activity-link:hover { color: #2563eb; }
.emoji { font-size: 1.3em; }


.de + span {
  font-size: 1.1rem;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.de + span:hover {
  transform: scale(1.2);
  color: #d62828;
}


img {
  display: block;
  margin: 10px auto;
  width: 80%;
  height: auto;
  max-width: 1200px; /* protects from ultra-wide overflow */
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}
@media (max-width: 768px) {
  img {
    width: 95%;
  }
}


.bilingual-pair {
  margin: 12px 0;
  line-height: 1.6;
}
.bilingual-pair p {
  margin: 3px 0;
}
.bilingual-pair button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1em;
}