/* ========================================
   LEGAL PAGES — TOS / PP / SP
   Follows site design language from
   product-group.css + history.css
======================================== */

@import url("../pagestyle.css");

/* ── Reading-progress bar (fixed, top) ── */
.legal-read-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(
    to right,
    var(--primary-color),
    var(--secondary-color),
    var(--tertiary-color)
  );
  z-index: 9999;
  transition: width 0.08s linear;
  pointer-events: none;
}

/* ── Page layout ── */
.legal-page {
  background: var(--light-color);
  overflow-x: clip;
}

.legal-page .page-hero {
  height: 30vh;
  min-height: 200px;
}

/* ========================================
   META BAR (below hero)
   Dark strip: doc type + last updated
======================================== */
.legal-meta-bar {
  background: var(--shadow-color);
  border-bottom: 4px solid var(--primary-color);
  padding: 14px 0;
}

.legal-meta-inner {
  max-width: 100%;
  width: 90%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.legal-meta-type,
.legal-meta-updated {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.legal-meta-type {
  color: rgba(244, 239, 239, 0.4);
}

.legal-meta-type i {
  color: var(--primary-color);
  margin-right: 7px;
}

.legal-meta-updated {
  color: rgba(244, 239, 239, 0.7);
  font-weight: 500;
}

.legal-meta-updated i {
  color: var(--primary-color);
  margin-right: 7px;
}

/* ========================================
   CONTENT AREA
======================================== */
.legal-content {
  width: 100%;
}

/* ── Sections wrapper (CSS counter) ── */
.legal-sections-wrapper {
  counter-reset: legal-section;
}

/* ========================================
   SECTION BANDS
======================================== */
.legal-section {
  counter-increment: legal-section;
  padding: 55px 0;
  position: relative;
  background: #fff;

  /* gradient separator at top */
  border-top: 1px solid var(--light-gray);

  /* entry animation */
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity     0.55s ease,
    transform   0.55s ease;
}

/* alternating background */
.legal-section:nth-child(even) {
  background: var(--light-color);
}

.legal-section:last-child {
  border-bottom: 4px solid var(--primary-color);
}

.legal-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* green left tick grows on hover */
.legal-section::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--primary-color);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.35s ease;
}

.legal-section:hover::after {
  transform: scaleY(1);
}

/* decorative large section number */
.legal-section::before {
  content: counter(legal-section, decimal-leading-zero);
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -8px;
  color: var(--shadow-color);
  opacity: 0.025;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.35s ease;
}

.legal-section:hover::before {
  opacity: 0.045;
}

/* ========================================
   INNER CONTAINER (border-left accent)
   — mirrors history.css .text-content style
======================================== */
.legal-section-inner {
  max-width: 100%;
  width: 90%;
  margin: 0 auto;
  border-left: 3px solid var(--primary-color);
  padding-left: 40px;
  position: relative;
  transition: border-left-color 0.3s ease;
}

/* ========================================
   SECTION TITLE
======================================== */
.legal-section-title {
  font-size: 1.5rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--shadow-color);
  margin-bottom: 22px;
  position: relative;
  padding-bottom: 13px;
  line-height: 1.3;
}

.legal-section-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background: var(--primary-color);
  transition: width 0.4s ease;
}

.legal-section:hover .legal-section-title::after {
  width: 120px;
}

/* ========================================
   TEXT
======================================== */
.legal-text {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--shadow-color);
  margin-bottom: 15px;
  opacity: 0.88;
  letter-spacing: 0.015em;
}

.legal-text:last-child {
  margin-bottom: 0;
}

/* note / remark block */
.legal-note {
  margin-top: 16px;
  padding: 12px 18px;
  border-left: 2px solid var(--secondary-color);
  background: rgba(12, 216, 68, 0.045);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--shadow-color);
  font-style: italic;
  opacity: 0.85;
}

/* ========================================
   LISTS
======================================== */
.legal-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
}

.legal-list-item {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--shadow-color);
  padding: 9px 0 9px 22px;
  position: relative;
  border-bottom: 1px solid var(--light-gray);
  opacity: 0.88;
  letter-spacing: 0.015em;

  /* stagger animation */
  opacity: 0;
  transform: translateX(-14px);
  transition:
    opacity           0.38s ease,
    transform         0.38s ease,
    border-bottom-color 0.2s ease;
}

.legal-list-item:last-child {
  border-bottom: none;
}

.legal-section.is-visible .legal-list-item {
  opacity: 0.88;
  transform: translateX(0);
}

/* stagger delays */
.legal-section.is-visible .legal-list-item:nth-child(1)  { transition-delay: 0.08s; }
.legal-section.is-visible .legal-list-item:nth-child(2)  { transition-delay: 0.14s; }
.legal-section.is-visible .legal-list-item:nth-child(3)  { transition-delay: 0.20s; }
.legal-section.is-visible .legal-list-item:nth-child(4)  { transition-delay: 0.26s; }
.legal-section.is-visible .legal-list-item:nth-child(5)  { transition-delay: 0.32s; }
.legal-section.is-visible .legal-list-item:nth-child(6)  { transition-delay: 0.38s; }
.legal-section.is-visible .legal-list-item:nth-child(7)  { transition-delay: 0.44s; }
.legal-section.is-visible .legal-list-item:nth-child(8)  { transition-delay: 0.50s; }

.legal-list-item::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--primary-color);
  font-weight: 700;
}

.legal-list-item:hover {
  border-bottom-color: rgba(12, 216, 68, 0.4);
  opacity: 1;
}

.legal-list-label {
  font-weight: 700;
  color: var(--shadow-color);
  margin-right: 5px;
}

.legal-list-item--rights {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* ========================================
   CONTACT BLOCK
   — mirrors .cta-section from product-group
======================================== */
.legal-contact-block {
  margin-top: 22px;
  padding: 28px 32px;
  background: var(--shadow-color);
  color: var(--light-color);
  position: relative;
}

.legal-contact-block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    to right,
    var(--primary-color),
    var(--secondary-color),
    var(--tertiary-color)
  );
}

.legal-contact-block p {
  font-size: 0.9rem;
  line-height: 1.85;
  margin: 0;
  opacity: 0.85;
}

.legal-contact-block a {
  color: var(--primary-color);
  text-decoration: none;
  transition: opacity 0.2s;
}

.legal-contact-block a:hover {
  opacity: 0.75;
  text-decoration: underline;
}

/* ========================================
   INLINE LINK
======================================== */
.legal-inline-link {
  color: var(--primary-color);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: opacity 0.2s;
}

.legal-inline-link:hover {
  opacity: 0.75;
}

/* ========================================
   RESPONSIVE
======================================== */
@media (max-width: 1024px) {
  .legal-section-inner {
    padding-left: 30px;
  }

  .legal-section-title {
    font-size: 1.3rem;
  }
}

@media (max-width: 768px) {
  .legal-section {
    padding: 40px 0;
  }

  .legal-section-inner {
    width: 92%;
    padding-left: 20px;
  }

  .legal-section::before {
    font-size: 7rem;
    opacity: 0.02;
    right: 2%;
  }

  .legal-section-title {
    font-size: 1.1rem;
  }

  .legal-meta-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

@media (max-width: 480px) {
  .legal-section::before {
    display: none;
  }

  .legal-section-inner {
    width: 94%;
    padding-left: 16px;
  }

  .legal-contact-block {
    padding: 20px;
  }
}