/* Page-owned styles for Zásady používania cookies */

/* Section containers */
.cookies-section {
  padding: var(--space-48) var(--container-padding);
}

.cookies-container {
  max-width: 800px;
  margin-inline: auto;
}

/* Intro section specific */
.cookies-intro {
  background-color: var(--color-off-white);
}

.cookies-intro h1 {
  background-color: var(--color-acid-green);
  padding: var(--space-16) var(--space-24);
  border: var(--border-thickness-heavy) solid var(--color-black);
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 0 var(--color-black);
  margin-block-end: var(--space-32);
  display: inline-block;
}

.cookies-content {
  max-width: 70ch;
  margin-inline: auto;
}

.cookies-content p {
  margin-block-end: var(--space-16);
}

.cookies-content ul {
  margin-block-end: var(--space-16);
  padding-inline-start: var(--space-24);
  list-style: disc;
}

.cookies-content li {
  margin-block-end: var(--space-8);
}

/* Manage section */
.cookies-manage {
  background-color: var(--color-black);
  color: var(--color-off-white);
}

.cookies-manage h2 {
  color: var(--color-off-white);
  background-color: var(--color-black);
  padding: var(--space-16) var(--space-24);
  border: var(--border-thickness-heavy) solid var(--color-off-white);
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 0 var(--color-off-white);
  margin-block-end: var(--space-32);
  display: inline-block;
}

.cookies-manage .cookies-content {
  color: var(--color-off-white);
}

.cookies-manage .cookies-content p,
.cookies-manage .cookies-content li {
  color: var(--color-off-white);
}

.cookies-manage .cookies-content strong {
  color: var(--color-acid-green);
}

/* List section */
.cookies-list {
  background-color: var(--color-off-white);
}

.cookies-list h2 {
  background-color: var(--color-acid-green);
  padding: var(--space-16) var(--space-24);
  border: var(--border-thickness-heavy) solid var(--color-black);
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 0 var(--color-black);
  margin-block-end: var(--space-32);
  display: inline-block;
}

.cookies-category {
  background-color: var(--color-off-white);
  border: var(--border-thickness) solid var(--color-black);
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 0 var(--color-black);
  padding: var(--space-24);
  margin-block-end: var(--space-32);
}

.cookies-category h3 {
  margin-block-end: var(--space-16);
}

.cookies-category p {
  margin-block-end: var(--space-16);
}

.cookies-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cookies-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-small-size);
}

.cookies-table th,
.cookies-table td {
  border: var(--border-thickness) solid var(--color-black);
  padding: var(--space-8) var(--space-16);
  text-align: left;
  vertical-align: top;
}

.cookies-table th {
  background-color: var(--color-black);
  color: var(--color-off-white);
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: var(--text-small-size);
}

.cookies-table td {
  background-color: var(--color-off-white);
}

/* Changes section */
.cookies-changes {
  background-color: var(--color-black);
  color: var(--color-off-white);
}

.cookies-changes h2 {
  color: var(--color-off-white);
  background-color: var(--color-black);
  padding: var(--space-16) var(--space-24);
  border: var(--border-thickness-heavy) solid var(--color-off-white);
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 0 var(--color-off-white);
  margin-block-end: var(--space-32);
  display: inline-block;
}

.cookies-changes .cookies-content {
  color: var(--color-off-white);
}

.cookies-changes .cookies-content p {
  color: var(--color-off-white);
}

/* Contact section */
.cookies-contact {
  background-color: var(--color-intense-yellow);
}

.cookies-contact h2 {
  background-color: var(--color-black);
  color: var(--color-off-white);
  padding: var(--space-16) var(--space-24);
  border: var(--border-thickness-heavy) solid var(--color-black);
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 0 var(--color-black);
  margin-block-end: var(--space-32);
  display: inline-block;
}

.cookies-contact .cookies-content {
  max-width: 600px;
  margin-inline: auto;
}

.cookies-contact ul {
  list-style: none;
  padding: 0;
}

.cookies-contact li {
  background-color: var(--color-black);
  color: var(--color-off-white);
  padding: var(--space-16);
  border: var(--border-thickness) solid var(--color-black);
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 0 var(--color-black);
  margin-block-end: var(--space-16);
}

/* Responsive */
@media (max-width: 768px) {
  .cookies-section {
    padding: var(--space-24) var(--container-padding);
  }

  .cookies-intro h1,
  .cookies-manage h2,
  .cookies-list h2,
  .cookies-changes h2,
  .cookies-contact h2 {
    font-size: var(--text-h2-size);
    padding: var(--space-8) var(--space-16);
  }

  .cookies-category {
    padding: var(--space-16);
  }

  .cookies-table th,
  .cookies-table td {
    padding: var(--space-4) var(--space-8);
  }
}