/* Page-owned styles for Responsible Play */
#responsible-play-main {
  --rp-measure: 62ch;
  --rp-narrow-max: 720px;
}

.rp-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-gutter-mobile);
}

.rp-container--narrow {
  max-width: var(--rp-narrow-max);
}

/* Section base */
.rp-statement,
.rp-offline,
.rp-house-rules,
.rp-problem-gambling,
.rp-help,
.rp-social,
.rp-age,
.rp-contact {
  padding-block: var(--space-2xl);
}

@media (min-width: 1024px) {
  .rp-statement,
  .rp-offline,
  .rp-house-rules,
  .rp-problem-gambling,
  .rp-help,
  .rp-social,
  .rp-age,
  .rp-contact {
    padding-block: var(--space-3xl);
  }
}

/* Statement section */
.rp-statement {
  background-color: var(--color-pine);
  color: var(--color-ivory);
  position: relative;
}

.rp-statement::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 20% 30%, rgba(247, 242, 232, 0.08) 0%, rgba(247, 242, 232, 0.08) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

.rp-statement .rp-container {
  position: relative;
  z-index: 1;
}

.rp-statement .eyebrow {
  color: var(--color-oak);
}

.rp-statement h1 {
  color: var(--color-ivory);
  max-width: var(--rp-measure);
}

.rp-statement .rp-lead {
  color: var(--color-ivory);
  max-width: var(--rp-measure);
  font-size: var(--text-body-l);
  line-height: var(--leading-body-l);
  margin-block-end: var(--space-m);
}

.rp-tree-ring {
  width: 48px;
  height: 48px;
  margin-block-end: var(--space-m);
  border: 1px solid var(--color-oak);
  border-radius: 50%;
  position: relative;
}

.rp-tree-ring::before,
.rp-tree-ring::after {
  content: "";
  position: absolute;
  border: 1px solid var(--color-oak);
  border-radius: 50%;
  opacity: 0.5;
}

.rp-tree-ring::before {
  inset: 6px;
}

.rp-tree-ring::after {
  inset: 12px;
}

.rp-key-points {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: var(--rp-measure);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.rp-key-points li {
  color: var(--color-ivory);
  padding-inline-start: var(--space-m);
  position: relative;
}

.rp-key-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  border: 1px solid var(--color-oak);
  border-radius: 50%;
}

/* Oak rule */
.rp-oak-rule {
  border: none;
  border-top: var(--border-oak);
  margin-block: 0 var(--space-l);
}

.rp-oak-rule--dark {
  border-top-color: var(--color-oak);
}

/* Offline section */
.rp-offline {
  background-color: var(--color-cream);
  color: var(--color-charcoal);
}

.rp-offline h2,
.rp-offline p {
  max-width: var(--rp-measure);
}

/* House rules section */
.rp-house-rules {
  background-color: var(--color-cream-warm);
  color: var(--color-charcoal);
  position: relative;
}

.rp-house-rules::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(185, 138, 78, 0.1) 0px,
    rgba(185, 138, 78, 0.1) 1px,
    transparent 1px,
    transparent 24px
  );
  pointer-events: none;
}

.rp-house-rules .rp-container {
  position: relative;
  z-index: 1;
}

.rp-house-rules h2,
.rp-house-rules p {
  max-width: var(--rp-measure);
}

.rp-rules-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: var(--rp-measure);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.rp-rules-list li {
  counter-increment: rp-rule-counter;
  display: flex;
  align-items: baseline;
  gap: var(--space-s);
}

.rp-rules-list {
  counter-reset: rp-rule-counter;
}

.rp-rules-list li::before {
  content: counter(rp-rule-counter);
  font-variant-numeric: tabular-nums;
  color: var(--color-rust);
  font-weight: 600;
  min-width: 1.5em;
  text-align: right;
}

/* Problem gambling section */
.rp-problem-gambling {
  background-color: var(--color-pine);
  color: var(--color-ivory);
}

.rp-problem-gambling h2,
.rp-problem-gambling p {
  color: var(--color-ivory);
  max-width: var(--rp-measure);
}

.rp-signs-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: var(--rp-measure);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.rp-signs-list li {
  color: var(--color-ivory);
  padding-inline-start: var(--space-m);
  position: relative;
}

.rp-signs-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  border: 1px solid var(--color-oak);
  border-radius: 50%;
}

/* Help section */
.rp-help {
  background-color: var(--color-cream);
  color: var(--color-charcoal);
}

.rp-help h2,
.rp-help > .rp-container > p {
  max-width: var(--rp-measure);
}

.rp-resource-card {
  max-width: var(--rp-measure);
  border: var(--border-light);
  border-radius: var(--radius-m);
  padding: var(--space-m);
  background-color: var(--color-cream);
}

.rp-resource-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.rp-resource-list li {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.rp-resource-label {
  font-weight: 600;
  color: var(--color-charcoal);
}

.rp-resource-link {
  color: var(--color-rust);
  text-decoration: underline;
  text-decoration-color: var(--color-oak);
  text-underline-offset: 4px;
}

.rp-resource-link:hover {
  color: var(--color-copper);
}

.rp-resource-note {
  color: var(--color-charcoal-soft);
  font-size: var(--text-body-s);
}

/* Social section */
.rp-social {
  background-color: var(--color-cream-warm);
  color: var(--color-charcoal);
  position: relative;
}

.rp-social::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 80% 20%, rgba(185, 138, 78, 0.1) 0%, rgba(185, 138, 78, 0.1) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

.rp-social .rp-container {
  position: relative;
  z-index: 1;
}

.rp-social h2,
.rp-social p {
  max-width: var(--rp-measure);
}

/* Age section */
.rp-age {
  background-color: var(--color-pine);
  color: var(--color-ivory);
}

.rp-age h2,
.rp-age p {
  color: var(--color-ivory);
  max-width: var(--rp-measure);
}

/* Contact section */
.rp-contact {
  background-color: var(--color-cream);
  color: var(--color-charcoal);
}

.rp-contact h2,
.rp-contact > .rp-container > p {
  max-width: var(--rp-measure);
}

.rp-contact-card {
  max-width: var(--rp-measure);
  border: var(--border-light);
  border-radius: var(--radius-m);
  padding: var(--space-m);
  background-color: var(--color-cream);
}

.rp-contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.rp-contact-list li {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.rp-contact-label {
  font-weight: 600;
  color: var(--color-charcoal);
}

.rp-contact-link {
  color: var(--color-rust);
  text-decoration: underline;
  text-decoration-color: var(--color-oak);
  text-underline-offset: 4px;
}

.rp-contact-link:hover {
  color: var(--color-copper);
}

.rp-contact-list address {
  color: var(--color-charcoal);
}

/* Shared list styles */
.rp-content-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: var(--rp-measure);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.rp-content-list li {
  padding-inline-start: var(--space-m);
  position: relative;
}

.rp-content-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  border: 1px solid var(--color-oak);
  border-radius: 50%;
}

/* Responsive adjustments */
@media (min-width: 768px) {
  .rp-container {
    padding-inline: var(--container-gutter-tablet);
  }
}

@media (min-width: 1024px) {
  .rp-container {
    padding-inline: var(--container-gutter-desktop);
  }
}

@media (max-width: 767px) {
  .rp-statement,
  .rp-offline,
  .rp-house-rules,
  .rp-problem-gambling,
  .rp-help,
  .rp-social,
  .rp-age,
  .rp-contact {
    padding-block: var(--space-xl);
  }

  .rp-statement .rp-lead {
    font-size: var(--text-body);
    line-height: var(--leading-body);
  }
}