/* Top nav links: black + boxed */
.topnav { display:flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.topnav .toplink, .topnav .dd-btn {
  color: #000;
  background: #fff;
  border: 1px solid #000;
  padding: 8px 12px;
  border-radius: 10px;
  text-decoration: none;
  font: inherit;
  cursor: pointer;
}
.topnav .toplink:hover, .topnav .dd-btn:hover { background: #f2f2f2; }

/* Dropdown positioning */
.dd { position: relative; }
.dd-panel {
  display:none;
  position:absolute;
  z-index: 50;
  top: calc(100% + 8px);
  left: 0;
  min-width: 340px;
  max-width: min(900px, 90vw);
  background:#fff;
  border:1px solid #ddd;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}
.dd.open .dd-panel { display:block; }

/* Quiz dropdown grid sections */
.dd-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.dd-section { border: 1px solid #eee; border-radius: 10px; padding: 10px; }
.dd-title { font-weight: 700; margin-bottom: 6px; }

.dd-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.dd-link { color: #1a0dab; text-decoration: none; }
.dd-link:hover { text-decoration: underline; }

.dd-footer { margin-top: 10px; padding-top: 10px; border-top: 1px solid #eee; }

/* Close on small screens: make panel full width-ish */
@media (max-width: 600px) {
  .dd-panel { position: static; width: 100%; max-width: 100%; }
  .dd.open .dd-panel { display:block; }
}

/* Global non-nav links blue (optional if you already set this) */
a { color: #1a0dab; }
a:visited { color: #681da8; }