/* The footer stays in document flow so educational controls remain unobscured. */
#footer-container { margin-top: auto; }
footer {
  position: static;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: .8rem 0;
  text-align: center;
  background: var(--surface-1);
  border-top: 1px solid var(--border-color);
  z-index: 900;
}
#footer { position: static; background: var(--surface-1); border-top: 1px solid var(--border-color); box-shadow: none; }
.footer-btns { display: inline-flex; gap: 1rem; justify-content: center; }
#footer .footer-btns button,
.footer-btn {
  padding: .5rem 1rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: .9rem;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#footer .footer-btns button:hover,
.footer-btn:hover { background: var(--surface-2); color: var(--text-color); }
#footer .footer-btns button:active { background: var(--surface-3); }
#footer .font-toggle-btn.active,
body.large-font #footer .font-toggle-btn { background: var(--action-bg); color: var(--action-ink); }
.font-toggle-btn .text-large { font-size: 1.4em; }
.font-toggle-btn .text-small { font-size: .8em; }
.font-toggle-btn.active .text-large { font-weight: 700; }
.footer-copy { margin-top: .5em; padding: .35rem .5rem; font-family: inherit; font-size: .8rem; color: var(--text-secondary); background: transparent; border: 0; cursor: pointer; }
.footer-copy:hover { color: var(--accent-color); }
#page-content { padding-bottom: 3.5rem; }
#copyright-modal {
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  padding: 15px;
  overflow-y: auto;
  background: rgba(13, 24, 39, .48);
  opacity: 0;
  z-index: 11000;
  transition: opacity 160ms ease;
}
#copyright-modal.visible { opacity: 1; display: flex; }
#copyright-modal .modal-content {
  position: relative;
  width: 90%;
  max-width: 600px;
  max-height: 90dvh;
  margin: auto;
  padding: 1.5rem;
  overflow-y: auto;
  background: var(--surface-1);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  text-align: left;
  color: var(--text-color);
  z-index: 11001;
}
#copyright-modal .close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 1.5rem;
  color: var(--text-secondary);
  background: var(--surface-2);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
#copyright-modal .close-btn:hover { color: var(--text-color); background: var(--surface-3); }
body.modal-open { overflow: hidden; }
.copyright-content { opacity: 1 !important; visibility: visible !important; display: block !important; }
.copyright-content h2 { margin: 0 40px 1rem 0; font-size: 1.5rem; color: var(--text-color); }
.copyright-content p { line-height: 1.6; margin-bottom: 0; color: var(--text-color); }
@media (min-width: 769px) {
  #footer { flex-direction: row; flex-wrap: wrap; gap: .2rem 1.25rem; padding: .25rem 1rem; }
  #footer .footer-btns { gap: .5rem; }
  #footer .footer-btns button { min-height: 40px; padding: .35rem .65rem; }
  #footer .footer-copy { margin: 0; }
}
@media (max-width: 768px) {
  footer { padding: .4rem 0; }
  .footer-btns { gap: .5rem; }
  #footer .footer-btns button { padding: .3rem .7rem; font-size: .75rem; }
  .footer-copy { margin-top: .3em; font-size: .7rem; }
  #page-content { padding-bottom: 2.5rem; }
}
@media (max-width: 480px) {
  .footer-btns { gap: .3rem; }
  #footer .footer-btns button { padding: .25rem .5rem; font-size: .7rem; }
  #copyright-modal .modal-content { padding: 1.25rem 1rem; width: 95%; font-size: .9rem; }
  #copyright-modal h2 { font-size: 1.3rem; }
}