/*
 * OneTrust Legal Notice — Base structural reset for all FSE themes.
 *
 * Themes only need to set CSS custom properties (--otnotice-*) and add minor overrides.
 * This file normalizes the default OneTrust widget styles into a consistent layout.
 *
 * Customizable properties (set per-theme via :root):
 *   --otnotice-text-font-size          (mobile body font size, default: 4.267vw)
 *   --otnotice-text-font-size-desktop  (desktop body font size, default: 16px)
 *   --otnotice-font-family             (heading/title font, default: inherit)
 *   --otnotice-font-family-second      (secondary/body font, default: inherit)
 *   --otnotice-color-accent            (accent color for links, titles, default: currentColor)
 *   --otnotice-color-on-accent         (text on accent bg, default: #fff)
 *   --otnotice-bg-accent               (accent background, e.g. table header, default: currentColor)
 *   --otnotice-border-color            (table/border color, default: #ccc)
 */

/* ── Container ────────────────────────────────────────────── */

.otnotice {
  padding: 18vw 6.4vw 16vw;
  font-size: var(--otnotice-text-font-size, 4.267vw);
  line-height: 1.38;
}

@media (min-width: 768px) {
  .otnotice {
    padding: 100px 80px 140px;
    font-size: var(--otnotice-text-font-size-desktop, 16px);
  }
}

/* ── Content wrapper ──────────────────────────────────────── */

.otnotice .otnotice-content {
  max-width: 1024px;
  padding: 0;
}

/* ── Legal title ──────────────────────────────────────────── */

.otnotice .otnotice-content .otnotice-sections .otnotice-section-content .otnotice-legal-title {
  margin-bottom: 6.6vw;
  font-weight: 700;
  font-size: 2.5rem;
  font-family: var(--otnotice-font-family, inherit);
  line-height: 1.04;
  text-align: center;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .otnotice .otnotice-content .otnotice-sections .otnotice-section-content .otnotice-legal-title {
    margin-bottom: 15px;
    font-size: 3.5rem;
  }
}

/* ── Legal date ───────────────────────────────────────────── */

.otnotice .otnotice-content .otnotice-sections .otnotice-section-content .otnotice-legal-date {
  margin-bottom: 6.6vw;
  font-weight: 400;
  font-size: var(--otnotice-text-font-size, 4.267vw);
  font-family: var(--otnotice-font-family, inherit);
  font-stretch: condensed;
  letter-spacing: 0.88px;
  text-align: center;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .otnotice .otnotice-content .otnotice-sections .otnotice-section-content .otnotice-legal-date {
    margin-bottom: 15px;
    font-size: var(--otnotice-text-font-size-desktop, 16px);
    letter-spacing: 1px;
  }
}

/* ── Menu title ───────────────────────────────────────────── */

.otnotice-content .otnotice-sections .otnotice-section-content .otnotice-menu-title {
  position: relative;
  margin: 25vw 0 5vw;
  color: var(--otnotice-color-accent, currentColor);
  font-weight: 700;
  font-size: 42px;
  font-family: var(--otnotice-font-family, inherit);
  line-height: 1;
  text-align: left;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .otnotice-content .otnotice-sections .otnotice-section-content .otnotice-menu-title {
    margin: 100px 0 20px;
  }
}

/* ── Menu list ────────────────────────────────────────────── */

.otnotice .otnotice-sections .otnotice-section .otnotice-section-content .otnotice-menu {
  margin-bottom: 18vw;
  padding: 0;
  padding-inline: 0;
  font-weight: bold;
  font-size: 3.125rem;
  font-family: var(--otnotice-font-family, inherit);
  line-height: 1.5;
  text-transform: uppercase;
  list-style-type: none;
  counter-reset: li;
}

@media (min-width: 768px) {
  .otnotice .otnotice-sections .otnotice-section .otnotice-section-content .otnotice-menu {
    margin-bottom: 70px;
  }
}

.otnotice .otnotice-sections .otnotice-section .otnotice-section-content .otnotice-menu li {
  position: relative;
  margin-left: 5vw;
  padding-left: 1vw;
  font-size: 1rem;
  list-style: none;
}

@media (min-width: 768px) {
  .otnotice .otnotice-sections .otnotice-section .otnotice-section-content .otnotice-menu li {
    margin-left: 20px;
    padding-left: 5px;
  }
}

.otnotice .otnotice-sections .otnotice-section-content .otnotice-menu li::before {
  position: absolute;
  right: 100%;
  content: counter(li) '.';
  counter-increment: li;
}

/* ── Link hover / focus ───────────────────────────────────── */

.otnotice-content a:hover,
.otnotice-content a:active,
.otnotice-content a:focus {
  color: var(--otnotice-color-accent, currentColor);
}

/* ── Section header ───────────────────────────────────────── */

.otnotice-sections .otnotice-section .otnotice-section-content .otnotice-section-header {
  position: relative;
  margin: 6.4vw 0 0;
  font-weight: bold;
  font-size: 1rem;
  font-family: var(--otnotice-font-family, inherit);
  line-height: 1.5;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .otnotice-sections .otnotice-section .otnotice-section-content .otnotice-section-header {
    margin: 24px 0 0;
  }
}

/* ── Paragraphs ───────────────────────────────────────────── */

.otnotice .otnotice-sections .otnotice-section .otnotice-section-content p {
  margin-bottom: 1.6vw;
  font-size: 1rem;
}

@media (min-width: 768px) {
  .otnotice .otnotice-sections .otnotice-section .otnotice-section-content p {
    max-width: none;
    margin-bottom: 6px;
  }
}

/* ── Lists ────────────────────────────────────────────────── */

.otnotice .otnotice-sections .otnotice-section .otnotice-section-content ul,
.otnotice .otnotice-sections .otnotice-section .otnotice-section-content ol {
  margin-bottom: 3.2vw;
  padding-inline: 20px 10px;
}

.otnotice .otnotice-sections .otnotice-section .otnotice-section-content ul {
  list-style: disc;
}

@media (min-width: 768px) {
  .otnotice .otnotice-sections .otnotice-section .otnotice-section-content ul,
  .otnotice .otnotice-sections .otnotice-section .otnotice-section-content ol {
    margin-bottom: 12px;
    padding-left: 15px;
  }
}

.otnotice .otnotice-sections .otnotice-section .otnotice-section-content li {
  margin: 0;
  font-size: 1rem;
}

/* ── Tables ───────────────────────────────────────────────── */

.otnotice-section-content table {
  width: 100%;
  margin: 3.2vw 0;
  overflow: auto;
  border-collapse: collapse;
}

@media (min-width: 768px) {
  .otnotice-section-content table {
    margin: 12px 0;
  }
}

.otnotice-content .otnotice-section .otnotice-section-content table tr:first-child {
  color: var(--otnotice-color-on-accent, #fff);
  font-weight: bold;
  font-family: var(--otnotice-font-family, inherit);
  text-transform: uppercase;
  background-color: var(--otnotice-bg-accent, var(--otnotice-color-accent, currentColor));
}

.otnotice-content .otnotice-section .otnotice-section-content table tr:first-child td {
  padding: 1.3vw;
  border: 1px solid var(--otnotice-bg-accent, var(--otnotice-color-accent, currentColor));
}

@media (min-width: 768px) {
  .otnotice-content .otnotice-section .otnotice-section-content table tr:first-child td {
    padding: 10px;
  }
}

.otnotice-content .otnotice-section .otnotice-section-content table tr:first-child td:not(:last-child) {
  border-right: 1px solid var(--otnotice-color-on-accent, #fff);
}

.otnotice-content .otnotice-section .otnotice-section-content table td {
  padding: 1.3vw;
  border: 1px solid var(--otnotice-border-color, #ccc);
}

@media (min-width: 768px) {
  .otnotice-content .otnotice-section .otnotice-section-content table td {
    padding: 10px;
  }
}

.otnotice-section-content table {
  word-break: break-word;
}