/*
  Legal and utility page styles for Zapusklab website — space theme.
  Expected HTML links:
  - Root pages: /styles/legal.css
  - Nested pages: ../../styles/legal.css
*/

.legal-page,
.support-page {
  min-height: 100vh;
  background: transparent;
  padding-block: calc(var(--navbar-height) + var(--space-8)) var(--space-10);
}

.legal-nav {
  margin-bottom: var(--space-5);
  font-size: var(--font-size-14);
  color: var(--color-text-secondary);
}

.legal-nav a {
  color: var(--color-text-secondary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2rem;
}

.legal-nav a:hover {
  color: var(--color-accent-2);
}

.legal-card {
  max-width: 50rem;
  margin-inline: auto;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-medium);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  padding: 3rem;
}

.legal-updated {
  margin-top: var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--font-size-14);
}

.legal-content {
  margin-top: var(--space-8);
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1.8;
}

.legal-content h2 {
  margin-top: var(--space-9);
  margin-bottom: var(--space-4);
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-4);
  font-size: var(--font-size-24);
  line-height: 1.25;
}

.legal-content h3 {
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
  font-size: var(--font-size-20);
  line-height: 1.3;
}

.legal-content p + p {
  margin-top: var(--space-4);
}

.legal-content ul,
.legal-content ol {
  margin-top: var(--space-4);
  margin-left: var(--space-6);
  display: grid;
  gap: var(--space-3);
}

.legal-content ul { list-style: disc; }
.legal-content ol { list-style: decimal; }

.legal-content li::marker {
  color: var(--color-accent-2);
}

.legal-content a {
  color: var(--color-accent-2);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2rem;
}

.legal-content a:hover {
  color: color-mix(in srgb, var(--color-accent-2) 75%, white);
}

.faq-list {
  margin-top: var(--space-8);
  display: grid;
  gap: var(--space-4);
}

.faq-item {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color var(--transition-default);
}

.faq-item.open {
  border-color: color-mix(in srgb, var(--color-accent) 40%, var(--glass-border));
}

.faq-trigger {
  width: 100%;
  min-height: 2.75rem;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  padding: var(--space-4) var(--space-5);
  font-size: var(--font-size-16);
  font-weight: 600;
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.faq-trigger::after {
  content: "+";
  color: var(--color-accent-2);
  font-size: 1.2rem;
  line-height: 1;
}

.faq-item.open .faq-trigger::after {
  content: "-";
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  color: var(--color-text-secondary);
  padding-inline: var(--space-5);
  transition: max-height var(--transition-default), padding-bottom var(--transition-default);
}

.faq-item.open .faq-answer {
  max-height: 20rem;
  padding-bottom: var(--space-4);
}

.contact-info {
  margin-top: var(--space-8);
  border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  padding: var(--space-6);
}

.contact-info p + p {
  margin-top: var(--space-2);
}

.delete-steps {
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-4);
  counter-reset: delete-step;
}

.delete-steps li {
  list-style: none;
  position: relative;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  padding: var(--space-5) var(--space-5) var(--space-5) var(--space-10);
  counter-increment: delete-step;
}

.delete-steps li::before {
  content: counter(delete-step);
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: var(--font-size-14);
  font-weight: 700;
  background: linear-gradient(120deg, var(--color-accent), var(--color-accent-3));
  box-shadow: 0 0 16px color-mix(in srgb, var(--color-accent) 45%, transparent);
}

.warning-box {
  margin-top: var(--space-6);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-warning-border);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  padding: var(--space-5);
}

.warning-box strong {
  display: block;
  margin-bottom: var(--space-2);
}

@media (max-width: 30rem) {
  .legal-page,
  .support-page {
    padding-block: calc(var(--navbar-height) + var(--space-5)) var(--space-6);
  }

  .legal-card {
    padding: var(--space-6) var(--space-4);
    border-radius: var(--radius-md);
  }
}