/* ============================================================
   Footer notices (PIPEDA, EEO, AI-evaluation)
   Brief Section 9.2: collapsed paragraph, expansion via native
   HTML5 <details>/<summary>. No JS dependency.
   ============================================================ */

.footer-notice {
  margin: 12px 0;
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
}

.footer-notice-header {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--color-orange);
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  text-transform: uppercase;
  transition: background 150ms ease;
}

.footer-notice-header::-webkit-details-marker {
  display: none;
}

.footer-notice-header::before {
  content: '+';
  color: var(--color-fg-soft);
  font-weight: 700;
  margin-right: 8px;
  display: inline-block;
  width: 12px;
}

.footer-notice[open] .footer-notice-header::before {
  content: '−';
}

.footer-notice-header:hover {
  background: var(--color-bg-panel);
  color: var(--color-fg);
}

.footer-notice-body {
  padding: 16px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-fg-soft);
  line-height: 1.7;
  border-top: 1px solid var(--color-border);
}

.footer-notice-body p {
  margin: 0 0 12px 0;
}

.footer-notice-body p:last-child {
  margin-bottom: 0;
}

.footer-notice-body a {
  color: var(--color-orange);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 150ms ease;
}

.footer-notice-body a:hover {
  border-bottom-color: var(--color-orange);
}