/* ========================================================
   PRIVACY POLICY – CINEMATIC IMPERIAL STYLES
   ======================================================== */

.policy-header {
  text-align: center;
  margin-bottom: var(--space-12);
}
.policy-header h1 {
  color: var(--color-gold-light);
  text-shadow: var(--shadow-gold);
}
.lead {
  font-size: var(--font-size-xl);
  color: var(--color-text-secondary);
  max-width: 60ch;
  margin: var(--space-4) auto 0;
}

.policy-block {
  margin-bottom: var(--space-16);
}
.policy-block h2 {
  border-bottom: 2px solid var(--color-crimson);
  display: inline-block;
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-6);
}

/* 1. Mandate */
.mandate-list {
  list-style: disc;
  margin-left: var(--space-6);
  color: var(--color-text-secondary);
}
.mandate-list li {
  margin-bottom: var(--space-2);
}

/* 2. Bannerets Grid */
.bannerets-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}
.banneret-item {
  background: var(--color-bg-secondary);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  position: relative;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.banneret-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg), var(--shadow-gold);
}
.banneret-icon {
  font-size: var(--font-size-3xl);
  line-height: 1;
  margin-bottom: var(--space-3);
}
.banneret-type {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-bold);
  color: var(--color-gold);
  margin-bottom: var(--space-2);
}
.banneret-purpose {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.banneret-item::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(10%, -50%);
  background: var(--color-bg-overlay);
  color: var(--color-gold-light);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-base);
  font-size: var(--font-size-xs);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
}
.banneret-item:hover::after {
  opacity: 1;
}

/* 3. Siege Storage */
.keep-diagram {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.keep-layer {
  background: linear-gradient(90deg, var(--color-stone-dark), var(--color-stone));
  border-left: 6px solid var(--color-gold);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-base);
  cursor: pointer;
  position: relative;
  transition: background var(--transition-base);
}
.keep-layer:hover {
  background: linear-gradient(90deg, var(--color-stone), var(--color-stone-light));
}
.keep-label {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}
.keep-layer .keep-spec {
  display: none;
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
.keep-layer.active .keep-spec {
  display: block;
}

/* 4. Alliance Accordion */
.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: transparent;
  border: none;
  font-family: var(--font-primary);
  font-size: var(--font-size-lg);
  color: var(--color-gold);
  text-align: left;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: color var(--transition-fast);
}
.accordion-trigger:hover {
  color: var(--color-gold-light);
}
.shield-icon {
  width: 20px;
  height: 20px;
  background: var(--color-crimson);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transition: background var(--transition-fast);
}
.accordion-trigger[aria-expanded="true"] .shield-icon {
  background: var(--color-gold);
}
.accordion-panel {
  display: none;
  padding: var(--space-4) 0 var(--space-6) var(--space-10);
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}
.accordion-panel a {
  color: var(--color-gold-light);
}

/* 5. Banner Table */
.banner-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-6);
  font-size: var(--font-size-sm);
}
.banner-table th,
.banner-table td {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-color);
}
.banner-table th {
  background: var(--color-bg-tertiary);
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.banner-table tbody tr:hover {
  background: rgba(212, 175, 55, 0.05);
}
.btn-link {
  background: none;
  border: none;
  color: var(--color-crimson-light);
  cursor: pointer;
  text-decoration: underline;
  font-size: inherit;
}
.btn-link:hover {
  color: var(--color-crimson);
}
.banner-actions {
  margin-top: var(--space-6);
  text-align: center;
}

/* 6. Rights Grid */
.rights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-6);
}
.rights-item {
  text-align: center;
  padding: var(--space-6);
  background: var(--color-bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  transition: box-shadow var(--transition-base);
}
.rights-item:hover {
  box-shadow: var(--shadow-md);
}
.rights-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-4);
  background: var(--color-gold);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  cursor: pointer;
  transition: transform var(--transition-fast);
}
.rights-icon:hover {
  transform: scale(1.1);
}
.scroll-icon {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 8H4V6h16v2zm0 2v8H4v-8h16zM2 22V4h20v18H2zm18-2V6H4v14h16z'/%3E%3C/svg%3E");
}
.quill-icon {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.7 4.8l-2.1-2.1c-.4-.4-1-.4-1.4 0L9.2 9.8l-2 6 6-2 7.1-7.1c.4-.4.4-1 0-1.4zm-8.9 9.4L6.4 13l1.9-1.9 2.8 2.8-1.9 1.9zm-1.4 4.5l-1.2 3.6-1.8-1.8 3-1.8z'/%3E%3C/svg%3E");
}
.sealed-letter-icon {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
}
.rights-form {
  margin-top: var(--space-4);
  text-align: left;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.sla-note {
  margin-top: var(--space-6);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-align: center;
}

/* 7. Age Gate */
.knight-oath {
  border-left: 4px solid var(--color-crimson);
  background: rgba(139, 26, 26, 0.05);
  padding: var(--space-5);
  margin: var(--space-6) 0;
  font-style: italic;
  color: var(--color-text-secondary);
}

/* 8. Patch Timeline */
.patch-timeline {
  border-left: 2px solid var(--color-gold);
  padding-left: var(--space-6);
  margin-top: var(--space-6);
}
.patch-node {
  position: relative;
  margin-bottom: var(--space-8);
}
.patch-node::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--space-6) - 6px);
  top: 4px;
  width: 12px;
  height: 12px;
  background: var(--color-gold);
  border-radius: 50%;
}
.patch-node time {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.patch-node h4 {
  margin: var(--space-2) 0;
  color: var(--color-gold-light);
}
.btn-diff {
  background: none;
  border: none;
  color: var(--color-info);
  text-decoration: underline;
  cursor: pointer;
  font-size: var(--font-size-sm);
}

/* Footer note */
.policy-footer {
  text-align: center;
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--border-color);
  color: var(--color-text-muted);
}

/* Utility */
.hidden {
  display: none !important;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .bannerets-grid,
  .rights-grid {
    grid-template-columns: 1fr;
  }
  .banner-table {
    font-size: var(--font-size-xs);
  }
  .banner-table th,
  .banner-table td {
    padding: var(--space-2);
  }
}