/* ========================================
   Word of the Day – style.css
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=DM+Sans:wght@300;400;500&display=swap');

/* ── Card shell ── */
.wotd-wrap {
  font-family: 'DM Sans', sans-serif;
  background: #fff;
  border: 1px solid #e8e3d9;
  border-radius: 16px;
  overflow: hidden;
  max-width: 560px;
  margin: 0 auto 2rem;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

/* ── Header bar ── */
.wotd-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background: #1a1a2e;
  color: #fff;
}
.wotd-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #a8b3cf;
}
.wotd-date {
  font-size: 11px;
  color: #6b7a99;
}

/* ── Body ── */
.wotd-main {
  padding: 24px 24px 20px;
}

/* ── Word + speak button ── */
.wotd-word-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.wotd-word {
  font-family: 'Playfair Display', serif;
  font-size: 36px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0;
  line-height: 1.1;
}
.wotd-speak {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid #d1cfc9;
  background: #f5f4f0;
  color: #555;
  cursor: pointer;
  transition: all .2s;
  flex-shrink: 0;
}
.wotd-speak svg { width: 18px; height: 18px; }
.wotd-speak:hover,
.wotd-speak--active {
  background: #1a1a2e;
  border-color: #1a1a2e;
  color: #fff;
  transform: scale(1.08);
}

/* ── Meta row ── */
.wotd-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.wotd-phonetic {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  color: #7c6f5b;
  font-weight: 400;
}
.wotd-type {
  font-size: 12px;
  padding: 2px 10px;
  background: #f0ede6;
  color: #6b5e4a;
  border-radius: 20px;
  font-style: italic;
}
.wotd-difficulty {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 10px;
  border-radius: 20px;
  border: 1px solid;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ── Definition ── */
.wotd-definition {
  font-size: 16px;
  line-height: 1.65;
  color: #2d2d2d;
  margin: 0 0 14px;
}

/* ── Example blockquote ── */
.wotd-example {
  position: relative;
  border-left: 3px solid #c8a96e;
  margin: 0 0 18px;
  padding: 10px 14px 10px 18px;
  background: #faf8f3;
  border-radius: 0 8px 8px 0;
  font-size: 14.5px;
  color: #5a4f3f;
  line-height: 1.6;
  font-style: italic;
}
.wotd-example-icon {
  position: absolute;
  top: 6px;
  right: 12px;
  font-size: 28px;
  color: #d4c4a0;
  line-height: 1;
}

/* ── Sections ── */
.wotd-section {
  margin-bottom: 14px;
}
.wotd-section:last-child { margin-bottom: 0; }
.wotd-section-title {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #9a8c7e;
  margin-bottom: 6px;
}

/* ── Synonyms ── */
.wotd-synonyms {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.wotd-syn {
  font-size: 13px;
  padding: 3px 12px;
  border: 1px solid #ddd9d1;
  border-radius: 20px;
  color: #3d3d3d;
  background: #faf9f7;
  transition: background .15s;
}
.wotd-syn:hover {
  background: #1a1a2e;
  color: #fff;
  border-color: #1a1a2e;
}

/* ── Etymology ── */
.wotd-origin {
  font-size: 13.5px;
  color: #5a5550;
  margin: 0;
  line-height: 1.6;
}
.wotd-origin em { color: #c8a96e; font-style: italic; }

/* ── Links ── */
.wotd-links {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.wotd-link {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: #2a5298;
  text-decoration: none;
  padding: 7px 12px;
  border: 1px solid #dce6f5;
  border-radius: 8px;
  background: #f4f8ff;
  transition: all .18s;
  line-height: 1.3;
}
.wotd-link svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: .7;
}
.wotd-link:hover {
  background: #e6eeff;
  border-color: #a3b8e8;
  color: #1a3a7c;
  transform: translateX(3px);
}
.wotd-link--youtube { color: #b91c1c; border-color: #fecaca; background: #fff5f5; }
.wotd-link--youtube:hover { background: #fee2e2; border-color: #fca5a5; color: #991b1b; }
.wotd-link--ted { color: #b45309; border-color: #fde68a; background: #fffbeb; }
.wotd-link--ted:hover { background: #fef3c7; border-color: #fcd34d; color: #92400e; }

/* ── Dark mode ── */
@media (prefers-color-scheme: dark) {
  .wotd-wrap { background: #1c1c2e; border-color: #2e2e4a; }
  .wotd-header { background: #0f0f1a; }
  .wotd-word { color: #f0ede4; }
  .wotd-definition { color: #d4cfc8; }
  .wotd-example { background: #252535; border-left-color: #c8a96e; color: #b8ae9c; }
  .wotd-speak { background: #252535; border-color: #3a3a55; color: #aaa; }
  .wotd-type { background: #252535; color: #9a8e7e; }
  .wotd-syn { background: #252535; border-color: #3a3a55; color: #c0bbb0; }
  .wotd-origin { color: #9a9288; }
  .wotd-section-title { color: #6a6060; }
  .wotd-link { background: #1e2840; border-color: #2a3a5c; color: #7aa8e8; }
  .wotd-link:hover { background: #263348; }
  .wotd-link--youtube { background: #2a1a1a; border-color: #5c2a2a; color: #f87171; }
  .wotd-link--ted { background: #2a2210; border-color: #5c4a10; color: #fbbf24; }
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .wotd-word { font-size: 28px; }
  .wotd-main { padding: 18px 16px; }
}