/* Page-owned styles for Regulamin page */

.regulamin-main {
  background-color: var(--color-ivory);
  color: var(--color-graphite);
  padding-block: var(--space-xl);
}

.regulamin-container {
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
  padding-inline: var(--container-gutter-desktop);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.regulamin-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  scroll-margin-top: var(--space-lg);
}

.regulamin-header {
  gap: var(--space-sm);
}

.regulamin-h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: var(--text-h1-line-height);
  letter-spacing: var(--text-h1-letter-spacing);
  color: var(--color-graphite);
  max-width: 720px;
  margin-block-end: 0;
}

.regulamin-h2 {
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  line-height: var(--text-h2-line-height);
  letter-spacing: var(--text-h2-letter-spacing);
  color: var(--color-graphite);
  max-width: 720px;
  margin-block-end: 0;
}

.regulamin-lead,
.regulamin-section-lead,
.regulamin-toc-lead {
  max-width: 720px;
  color: var(--color-graphite);
  margin-block-end: 0;
}

.regulamin-facts-list {
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: 0;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.regulamin-facts-list li {
  position: relative;
  padding-inline-start: var(--space-xs);
}

.regulamin-facts-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 8px;
  height: 8px;
  background-color: var(--color-cobalt);
}

.regulamin-contact-block {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding: var(--space-xs);
  background-color: var(--color-silver);
  border-left: 4px solid var(--color-cobalt);
}

.regulamin-contact-block p {
  margin-block-end: 0;
}

.regulamin-toc-list {
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: 0;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.regulamin-toc-list li {
  counter-increment: toc-counter;
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
}

.regulamin-toc-list li::before {
  content: counter(toc-counter) '.';
  font-weight: 600;
  color: var(--color-cobalt);
  min-width: 1.5em;
}

.regulamin-toc-list {
  counter-reset: toc-counter;
}

.regulamin-toc-link {
  color: var(--color-cobalt);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.regulamin-toc-link:hover {
  color: var(--color-coral);
}

.regulamin-definitions {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin-block-end: 0;
}

.regulamin-definition-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.regulamin-definition-item dt {
  font-weight: 700;
  color: var(--color-graphite);
}

.regulamin-definition-item dd {
  margin-inline-start: 0;
  color: var(--color-graphite);
}

.regulamin-conditions-list {
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: 0;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.regulamin-conditions-list li {
  position: relative;
  padding-inline-start: var(--space-xs);
}

.regulamin-conditions-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 8px;
  height: 8px;
  background-color: var(--color-cobalt);
}

.regulamin-highlight-cobalt {
  border-left: 4px solid var(--color-cobalt);
  padding-inline-start: var(--space-2xs);
  color: var(--color-cobalt);
  font-weight: 500;
  max-width: 720px;
  margin-block-end: 0;
}

.regulamin-highlight-coral {
  border-left: 4px solid var(--color-coral);
  padding-inline-start: var(--space-2xs);
  color: var(--color-coral);
  font-weight: 500;
  max-width: 720px;
  margin-block-end: 0;
}

.regulamin-casino-clause {
  gap: var(--space-xs);
}

.regulamin-clause-block {
  max-width: 720px;
  background-color: var(--color-silver);
  border-left: 4px solid var(--color-cobalt);
  padding: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.regulamin-clause-lead {
  margin-block-end: 0;
  color: var(--color-graphite);
}

.regulamin-clause-list {
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.regulamin-clause-list li {
  position: relative;
  padding-inline-start: var(--space-xs);
  color: var(--color-graphite);
}

.regulamin-clause-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 8px;
  height: 8px;
  background-color: var(--color-cobalt);
}

.regulamin-accent-cobalt {
  color: var(--color-cobalt);
}

.regulamin-accent-coral {
  color: var(--color-coral);
}

.regulamin-link {
  color: var(--color-cobalt);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}

.regulamin-link:hover {
  color: var(--color-coral);
}

@media (max-width: 768px) {
  .regulamin-main {
    padding-block: var(--space-lg);
  }

  .regulamin-container {
    padding-inline: var(--container-gutter-mobile);
    gap: var(--space-lg);
  }

  .regulamin-section {
    gap: var(--space-2xs);
  }

  .regulamin-header {
    gap: var(--space-xs);
  }

  .regulamin-h1 {
    font-size: 2rem;
  }

  .regulamin-h2 {
    font-size: 1.5rem;
  }

  .regulamin-clause-block {
    padding: var(--space-2xs);
  }
}

@media (max-width: 480px) {
  .regulamin-h1 {
    font-size: 1.75rem;
  }

  .regulamin-h2 {
    font-size: 1.375rem;
  }

  .regulamin-toc-list li {
    gap: var(--space-3xs);
  }

  .regulamin-toc-list li::before {
    min-width: 1.25em;
  }
}