/*
 * Cookie bar (top) and popup (bottom left). Values measured on the live site at 375 / 768 / 1024 / 1366 / 1920 px.
 * The live cookie bar is cookieconsent2 1.0.9 (MIT) with the site's own changes; written again here as one set of rules.
 */

/* ---------- Cookie bar ---------- */

.cookie-bar {
  position: fixed;
  top: 0;
  z-index: var(--z-cookie-bar);
  height: 66px;
  animation: cookie-bar-grow 0.8s;
}

.cookie-bar-inner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  box-sizing: border-box;
  padding: 0;
  background: var(--color-cookie-bg);
  color: var(--color-white);
  font-size: 17px;
  animation: cookie-bar-slide 0.8s;
}

.cookie-bar-message {
  display: block;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  text-align: right;
  font-size: var(--size-sm);
  line-height: 30px;
}

/* OK and DETAILS: small dark buttons on the right */
.cookie-bar-ok,
.cookie-bar-more {
  display: block;
  float: right;
  width: 50px;
  max-width: 120px;
  padding: 5px 10px;
  border: 0;
  border-radius: 0;
  background: var(--color-cookie-button);
  color: var(--color-white);
  font-size: var(--size-xs);
  font-weight: var(--weight-bold);
  line-height: 10px;
  text-decoration: none;
  cursor: pointer;
}

/* DETAILS sits inside the text and takes its alignment (right on desktop, centre up to 960px) */
.cookie-bar-ok {
  text-align: center;
}

.cookie-bar-ok:hover,
.cookie-bar-more:hover {
  color: var(--color-white);
}

.cookie-bar-ok { margin: 5px 5px 5px 10px; }
.cookie-bar-more { margin: 5px 0 5px 10px; }

@media (min-width: 1040px) { .cookie-bar-ok { margin-right: 10%; } }
@media (min-width: 1185px) { .cookie-bar-ok { margin-right: 15%; } }
@media (min-width: 1380px) { .cookie-bar-ok { margin-right: 20%; } }
@media (min-width: 1650px) { .cookie-bar-ok { margin-right: 25%; } }

/* up to 960px: centred text, the two buttons under it */
@media (max-width: 960px) {
  .cookie-bar-inner { padding-bottom: 30px; }

  .cookie-bar-message {
    max-width: 77%;
    padding: 10px 30px;
    text-align: center;
    line-height: 18px;
  }

  .cookie-bar-ok,
  .cookie-bar-more {
    position: absolute;
    bottom: 5px;
  }

  .cookie-bar-ok { left: calc(50% - 100px); }
  .cookie-bar-more { right: calc(50% - 80px); text-align: center; }
}

@media (max-width: 556px) { .cookie-bar-message { max-width: 75%; } }
@media (max-width: 460px) {
  .cookie-bar-message { max-width: 100%; }
  .cookie-bar-more { top: 50px; }
}
@media (max-width: 433px) { .cookie-bar-more { top: 69px; } }
@media (max-width: 320px) { .cookie-bar-more { height: 10px; top: 87px; } }

@keyframes cookie-bar-slide {
  0% { margin-top: -66px; }
  100% { margin-top: 0; }
}

@keyframes cookie-bar-grow {
  0% { height: 0; }
  100% { height: 66px; }
}

/* ---------- Popup ---------- */

.popup {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 99999;
  box-sizing: border-box;
  width: 100%;
  max-width: 400px;
  max-height: 100%;
  overflow: auto;
  padding: 12px;
  background: var(--color-white);
  color: var(--color-popup-text);
  font-size: var(--size-sm);
  line-height: 1.4em;
  box-shadow: var(--shadow-popup);
  transform: translateY(100%);
  transition: transform 0.4s;
}

/* assets/js/overlays.js adds .is-visible: the popup slides up */
.popup.is-visible {
  transform: translateY(0);
}

.popup-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 100;
  color: var(--color-popup-close);
  font-size: 22px;
  font-weight: var(--weight-regular);
  text-decoration: none;
  transition: 200ms ease-in-out;
}

.popup-close:hover,
.popup-close:focus {
  color: #808080;
}

.popup-close span {
  display: block;
  padding: 0.4em;
  line-height: 0.4em;
}

.popup-content {
  overflow: hidden;
}

.popup-content img {
  max-width: 100%;
}