/* ==========================================================================
   Cookie Szabályzat Page Styles
   ========================================================================== */

/* Page container: single column, centered, max-width 800px */
.cookie-page {
  max-width: 800px;
  margin-inline: auto;
  padding-inline: var(--spacing-04);
  padding-block: var(--spacing-07);
}

/* Section spacing */
.cookie-section {
  margin-block-end: var(--spacing-07);
}

.cookie-section:last-child {
  margin-block-end: 0;
}

/* Section content wrapper */
.cookie-section__content {
  /* No extra wrapper needed; direct children use base margins */
}

/* Headings within sections */
.cookie-section__title {
  /* h1 or h2 styling */
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-block-end: var(--spacing-03);
}

.cookie-section__subtitle {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--font-size-h2);
  line-height: 1.25;
  color: var(--color-text-primary);
  margin-block-end: var(--spacing-03);
}

/* Text blocks */
.cookie-section__text {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-primary);
  margin-block-end: var(--spacing-03);
}

/* Intro section: centered text, max char measure */
.intro .cookie-section__content {
  text-align: center;
  max-width: 70ch;
  margin-inline: auto;
}

.intro .cookie-section__title {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-heading);
}

.intro .cookie-section__subtitle {
  font-size: var(--font-size-h2);
}

/* Definition section: left-aligned, max char measure */
.definition .cookie-section__content {
  text-align: left;
  max-width: 70ch;
  margin-inline: auto;
}

.definition .cookie-section__title {
  font-size: var(--font-size-h2);
}

/* List styling */
.cookie-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--spacing-03);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-03);
}

.cookie-list__item {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-primary);
  padding-inline-start: var(--spacing-04);
  position: relative;
}

.cookie-list__item::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-accent-pink);
  font-weight: bold;
}

/* Usage section: left-aligned, max char measure */
.usage .cookie-section__content {
  text-align: left;
  max-width: 70ch;
  margin-inline: auto;
}

.usage .cookie-section__title {
  font-size: var(--font-size-h2);
}

/* Table wrapper: responsive horizontal scroll if needed */
.cookie-table-wrapper {
  width: 100%;
  overflow-x: auto;
  margin-block-end: var(--spacing-03);
}

.cookie-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  color: var(--color-text-primary);
  background-color: var(--color-surface-light);
  border: var(--border-solid);
  box-shadow: var(--shadow-pop);
}

.cookie-table th,
.cookie-table td {
  padding: var(--spacing-03);
  text-align: left;
  border-bottom: 1px solid #000;
  vertical-align: top;
}

.cookie-table th {
  font-family: var(--font-heading);
  font-weight: 700;
  background-color: var(--color-accent-pink);
  color: var(--color-text-on-pink);
  border-bottom: var(--border-solid);
}

.cookie-table tbody tr {
  transition: background-color 0.2s ease;
}

.cookie-table tbody tr:hover {
  background-color: #f0f0f0;
}

.cookie-table tbody tr:nth-child(even) {
  background-color: #fafafa;
}

.cookie-table tbody tr:nth-child(even):hover {
  background-color: #f0f0f0;
}

/* Third-party section: left-aligned, max char measure */
.third-party .cookie-section__content {
  text-align: left;
  max-width: 70ch;
  margin-inline: auto;
}

.third-party .cookie-section__title {
  font-size: var(--font-size-h2);
}

/* Management section: left-aligned, max char measure */
.management .cookie-section__content {
  text-align: left;
  max-width: 70ch;
  margin-inline: auto;
}

.management .cookie-section__title {
  font-size: var(--font-size-h2);
}

/* Contact section: centered text, max char measure */
.contact .cookie-section__content {
  text-align: center;
  max-width: 70ch;
  margin-inline: auto;
}

.contact .cookie-section__title {
  font-size: var(--font-size-h2);
}

.cookie-contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-02);
  align-items: center;
  margin-block-start: var(--spacing-03);
}

.cookie-contact-info__item {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-primary);
  margin: 0;
}

/* Link styling */
.cookie-link {
  color: var(--color-accent-blue);
  text-decoration: none;
  transition: color 0.2s ease, text-decoration 0.2s ease;
}

.cookie-link:hover {
  text-decoration: underline;
  color: var(--color-accent-blue);
}

.cookie-link:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

/* Responsive: mobile adjustments */
@media (max-width: 600px) {
  .cookie-page {
    padding-block: var(--spacing-04);
    padding-inline: var(--spacing-03);
  }

  .cookie-section {
    margin-block-end: var(--spacing-04);
  }

  .cookie-table th,
  .cookie-table td {
    padding: var(--spacing-02);
    font-size: 0.75rem;
  }

  .cookie-table {
    font-size: 0.75rem;
  }

  /* Stack table rows as cards on very small screens */
  @media (max-width: 480px) {
    .cookie-table thead {
      display: none;
    }

    .cookie-table tbody,
    .cookie-table tr,
    .cookie-table td {
      display: block;
    }

    .cookie-table tr {
      margin-block-end: var(--spacing-03);
      border: var(--border-solid);
      box-shadow: var(--shadow-pop);
      background-color: var(--color-surface-light);
    }

    .cookie-table td {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: var(--spacing-02) var(--spacing-03);
      border-bottom: 1px solid #ddd;
    }

    .cookie-table td::before {
      content: attr(data-label);
      font-weight: 700;
      font-family: var(--font-heading);
      color: var(--color-accent-pink);
      margin-inline-end: var(--spacing-02);
      flex-shrink: 0;
    }

    .cookie-table td:last-child {
      border-bottom: none;
    }
  }
}