/* =====================================================================
   Privacy Policy — page-specific styles only — theme tokens come
   from design-system.css (mobile boundary: 900px — see --eralux-mobile-breakpoint)
   ===================================================================== */

:root {
  --eralux-privacy-ink: var(--ews-ink);
  --eralux-privacy-paper: var(--ews-paper);
  --eralux-privacy-paper-2: var(--ews-paper-2);
  --eralux-privacy-muted: var(--ews-muted-ink);
  --eralux-privacy-line: var(--ews-line-strong);
  --eralux-privacy-accent: var(--ews-accent);
  --eralux-privacy-gutter: var(--ews-gutter);
  --eralux-privacy-content: 1600px; /* module-specific content max-width */
}

.eralux-privacy,
.eralux-privacy * {
  box-sizing: border-box;
}

.eralux-privacy {
  overflow: hidden;
  background: var(--eralux-privacy-paper);
  color: var(--eralux-privacy-ink);
}

.eralux-privacy-page .eralux-footer-inner {
  width: 100%;
  max-width: none;
  padding-right: var(--eralux-privacy-gutter) !important;
  padding-left: var(--eralux-privacy-gutter) !important;
}

.eralux-privacy-heading-inner,
.eralux-privacy-body {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding-right: var(--eralux-privacy-gutter);
  padding-left: var(--eralux-privacy-gutter);
}

body:has(.eralux-privacy) #main,
body:has(.eralux-privacy) #main > .fusion-row,
body:has(.eralux-privacy) #main #content,
body:has(.eralux-privacy) #main .post-content,
body:has(.eralux-privacy) #main article,
body:has(.eralux-privacy) #main .entry-content {
  width: 100% !important;
  max-width: none !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

/* No white space (or stray theme borders inside it) above/below the page. */
.eralux-privacy-page .fusion-page-title-bar,
.eralux-privacy-page .fusion-page-title-wrapper {
  display: none !important;
}

.eralux-privacy-page #main,
.eralux-privacy-page #content,
.eralux-privacy-page #main article {
  border: 0 !important;
}

.eralux-privacy-page #main,
.eralux-privacy-page #main > .fusion-row,
.eralux-privacy-page #main #content,
.eralux-privacy-page #main .post-content,
.eralux-privacy-page #main article,
.eralux-privacy-page #main .entry-content {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.eralux-privacy {
  position: relative;
  left: 50%;
  width: calc(100vw - var(--ews-scrollbar, 0px));
  max-width: calc(100vw - var(--ews-scrollbar, 0px));
  margin-top: 0;
  margin-right: calc(-50vw + var(--ews-scrollbar, 0px) / 2);
  margin-bottom: 0;
  margin-left: calc(-50vw + var(--ews-scrollbar, 0px) / 2);
}

body:has(.eralux-privacy) .eralux-footer-inner {
  width: 100% !important;
  max-width: none !important;
  padding-right: var(--eralux-privacy-gutter) !important;
  padding-left: var(--eralux-privacy-gutter) !important;
}

.eralux-privacy-body {
  padding-top: clamp(38px, 5vw, 72px);
  padding-bottom: clamp(64px, 8vw, 110px);
}

.eralux-privacy-list {
  border-top: 0;
}

.eralux-privacy .eralux-privacy-list > .eralux-privacy-item {
  display: grid !important;
  grid-template-columns: 110px minmax(220px, 0.65fr) minmax(0, 1.35fr);
  column-gap: clamp(25px, 5vw, 75px);
  row-gap: 0;
  align-items: start;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-block: 0 !important;
  padding-inline: 0 !important;
  border: 0 !important;
  overflow: visible !important;
  white-space: normal !important;
}

.eralux-privacy .eralux-privacy-item-separator {
  display: block !important;
  grid-column: 1 / -1;
  width: 100% !important;
  max-width: none !important;
  height: 1px !important;
  margin: 100px 0 20px !important;
  padding: 0 !important;
  border: 0 !important;
  background: var(--eralux-privacy-line);
}

.eralux-privacy .eralux-privacy-item > *:not(.eralux-privacy-item-separator) {
  position: static !important;
  float: none !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: normal;
}

.eralux-privacy .eralux-privacy-item-number {
  color: var(--eralux-privacy-accent);
}

.eralux-privacy .eralux-privacy-item-text {
  display: block !important;
  padding: 0 !important;
}

@media (max-width: 900px) {
  .eralux-privacy .eralux-privacy-item {
    grid-template-columns: 60px 1fr;
    column-gap: 24px;
    row-gap: 20px;
  }

  .eralux-privacy .eralux-privacy-item-separator {
    grid-column: 1 / -1;
    margin: 100px 0 20px !important;
    padding: 0 !important;
  }
}

/* =====================================================================
   Mobile (900px boundary — keep in sync with --eralux-mobile-breakpoint)
   ===================================================================== */

@media (max-width: 900px) {
  .eralux-privacy {
    margin-top: 0;
  }

  .eralux-privacy-body {
    padding-top: 34px;
    padding-bottom: 70px;
  }

  .eralux-privacy .eralux-privacy-list > .eralux-privacy-item {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 14px;
    padding: 0 !important;
    padding-block: 0 !important;
    padding-inline: 0 !important;
  }

  .eralux-privacy .eralux-privacy-item-text {
    grid-column: auto;
  }
}

/* =====================================================================
   Privacy-only additions: the effective date, and the two unnumbered
   blocks (introduction, contact) that Terms has no equivalent of.

   Both blocks reuse the numbered row's grid so their heading and text
   line up with the numbered sections above and below them — they simply
   leave the number column empty rather than sitting in a different
   layout, which is what made them read as part of the same document.
   ===================================================================== */

.eralux-privacy-date {
  margin: 14px 0 0;
  color: var(--eralux-privacy-muted);
  font-size: clamp(14px, 1.1vw, 16px);
  letter-spacing: 0.01em;
}

.eralux-privacy-date-label {
  color: var(--eralux-privacy-ink);
  font-weight: 600;
}

.eralux-privacy .eralux-privacy-list > .eralux-privacy-intro,
.eralux-privacy .eralux-privacy-list > .eralux-privacy-contact {
  display: grid !important;
  grid-template-columns: 110px minmax(220px, 0.65fr) minmax(0, 1.35fr);
  column-gap: clamp(25px, 5vw, 75px);
  row-gap: 0;
  align-items: start;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.eralux-privacy .eralux-privacy-intro > h2,
.eralux-privacy .eralux-privacy-contact > h2 {
  grid-column: 2;
  margin: 0 !important;
}

.eralux-privacy .eralux-privacy-intro-text,
.eralux-privacy .eralux-privacy-contact-text {
  grid-column: 3;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* The contact block is the one thing on the page a visitor may need to act
   on, so its address is not left as plain text the eye slides over. */
.eralux-privacy .eralux-privacy-contact-text a[href^="mailto:"],
.eralux-privacy .eralux-privacy-item-text a[href^="mailto:"] {
  color: var(--eralux-privacy-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .eralux-privacy .eralux-privacy-list > .eralux-privacy-intro,
  .eralux-privacy .eralux-privacy-list > .eralux-privacy-contact {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 14px;
  }

  .eralux-privacy .eralux-privacy-intro > h2,
  .eralux-privacy .eralux-privacy-contact > h2,
  .eralux-privacy .eralux-privacy-intro-text,
  .eralux-privacy .eralux-privacy-contact-text {
    grid-column: auto;
  }
}