/*
 * The privacy page section.
 *
 * Edit this file. It is served as it is — nothing compiles it, and the
 * order it loads in is set in resources/css/order.php.
 */

.privacy-page {
  min-height:calc(var(--mobile-vh)*100);
  padding:0 var(--offset-x) 80px;
  width:100%;
}

@media screen and (max-width:1440px) {

  .privacy-page {
    padding:0 var(--offset-x) 56px;
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .privacy-page {
    padding:0 var(--offset-x) 56px;
  }
}

.privacy-page .breadcrumbs {
  margin-inline:0;
  margin-bottom:100px;
}

@media screen and (max-width:1440px) {

  .privacy-page .breadcrumbs {
    margin-bottom:55px;
  }
}

@media screen and (max-width:1199px) {

  .privacy-page .breadcrumbs {
    margin-bottom:36px;
    padding-top:10px;
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .privacy-page .breadcrumbs {
    margin-bottom:32px;
    padding-top:8px;
  }
}

.privacy-page .privacy-page__section:not(:first-of-type) {
  margin-top:69px;
}

@media screen and (max-width:1440px) {

  .privacy-page .privacy-page__section:not(:first-of-type) {
    margin-top:54px;
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .privacy-page .privacy-page__section:not(:first-of-type) {
    margin-top:50px;
  }
}

/*
 * Deepan - as wide as every other page.
 *
 * This was ten grid columns centred in the page, so the policy sat in a
 * band 859px wide starting 286px in while Speakers, Partners and Events
 * all begin at the page offset and use the width they are given. Two
 * breakpoints widened it and a third gave up and said 100%, which is
 * what it says at every width now.
 */
.privacy-page .privacy-page__content {
  align-items:flex-start;
  display:flex;
  flex-direction:column;
  margin-inline:0;
  width:100%;
}

/* and the heading starts where the text does, not in the middle */
.privacy-page .privacy-page__content .privacy-page__title {
  font-weight:600;
  margin-inline:0;
  margin-bottom:140px;
}

@media screen and (max-width:1440px) {

  .privacy-page .privacy-page__content .privacy-page__title {
    font-size:60px;
    margin-bottom:100px;
  }
}

@media screen and (max-width:1199px) {

  .privacy-page .privacy-page__content .privacy-page__title {
    margin-bottom:95px;
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .privacy-page .privacy-page__content .privacy-page__title {
    font-size:32px;
    margin-bottom:95px;
  }
}

@media screen and (max-width:767px)and (orientation:portrait) {

  .privacy-page .privacy-page__content .privacy-page__title {
    margin-bottom:50px;
  }
}

.privacy-page .privacy-page__content .privacy-page__description {
  margin-bottom:70px;
}

@media screen and (max-width:1440px) {

  .privacy-page .privacy-page__content .privacy-page__description {
    margin-bottom:50px;
  }
}

.privacy-page .wysiwyg h2 {
  font-weight:600;
  margin-bottom:25px;
}

@media screen and (max-width:1440px) {

  .privacy-page .wysiwyg h2 {
    margin-bottom:16px;
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .privacy-page .wysiwyg h2 {
    margin-bottom:18px;
  }
}

.privacy-page .wysiwyg h2:not(:first-of-type) {
  margin-top:69px;
}

@media screen and (max-width:1440px) {

  .privacy-page .wysiwyg h2:not(:first-of-type) {
    margin-top:54px;
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .privacy-page .wysiwyg h2:not(:first-of-type) {
    margin-top:50px;
  }

  .privacy-page .wysiwyg p {
    font-size:14px;
    line-height:1.4;
  }
}

.privacy-page .wysiwyg p:not(:first-of-type) {
  margin-top:25px;
}

@media screen and (max-width:1440px) {

  .privacy-page .wysiwyg p:not(:first-of-type) {
    margin-top:20px;
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .privacy-page .wysiwyg p:not(:first-of-type) {
    margin-top:20px;
  }
}

.privacy-page .wysiwyg b {
  font-weight:600;
}

.privacy-page .wysiwyg a {
  color:#e1251b;
  text-decoration:underline;
  transition:opacity .3 ease-in-out;
}

@media(any-hover:hover),(hover:hover)and (pointer:fine) {

  .privacy-page .wysiwyg a:not(:disabled):hover {
    opacity:.4;
  }
}

/*
 * Deepan - the language tabs.
 *
 * The policy is published in fourteen languages and the live site puts them in
 * a row of buttons above the text, the chosen one in the brand red. This is
 * that, in the archive's own type and spacing.
 *
 * They are radio inputs with labels, so `:checked + label` colours the right
 * one without a line of script and the keyboard moves between them for free.
 * Only the panels need JS, because they are not siblings of the input.
 */
.privacy-page .privacy-page__langs {
  display:flex;
  flex-wrap:wrap;
  gap:2px;
  margin-bottom:56px;
  width:100%;
}

.privacy-page .privacy-page__lang {
  background:#181818;
  color:#fff;
  cursor:pointer;
  font-size:14px;
  font-weight:500;
  letter-spacing:.01em;
  line-height:1;
  padding:13px 20px;
  transition:background-color .2s ease-in-out;
  user-select:none;
}

.privacy-page .privacy-page__lang-input:checked + .privacy-page__lang {
  background:#e1251b;
}

.privacy-page .privacy-page__lang-input:focus-visible + .privacy-page__lang {
  outline:2px solid #e1251b;
  outline-offset:2px;
}

@media(any-hover:hover),(hover:hover)and (pointer:fine) {

  .privacy-page .privacy-page__lang-input:not(:checked) + .privacy-page__lang:hover {
    background:#333;
  }
}

.privacy-page .privacy-page__lang-body[hidden] {
  display:none;
}

@media screen and (max-width:767px) {

  .privacy-page .privacy-page__langs {
    margin-bottom:36px;
  }

  .privacy-page .privacy-page__lang {
    font-size:13px;
    padding:11px 15px;
  }
}