/* ==========================================================================
   Cookie consent banner + footer "Cookies" button
   Driven by js/consent.js. Shared by the landing page, privacy.html and the
   Grav blog theme, which does not load main.css, so everything the banner
   needs lives here.
   ========================================================================== */

.consent {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  /* Above the scroll-top button (200) and the sticky nav (1000). */
  z-index: 1100;
  max-width: 620px;
  background: #333;
  color: #F7F7F7;
  padding: 20px 22px;
  display: none;
  border-radius: 4px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  text-align: left;
}

.consent[data-open="true"] { display: block; }

/* main.css and blog.css both colour every <p>, so restate it here. */
.consent p {
  margin: 0 0 14px;
  color: #F7F7F7;
}

.consent a { color: #75AD70; text-decoration: underline; }
.consent a:hover,
.consent a:focus { color: #9CCB97; }

.consent .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.consent button {
  font: inherit;
  font-size: 14px;
  padding: 8px 22px;
  border-radius: 64px;
  border: 1px solid rgba(255, 255, 255, .45);
  background: transparent;
  color: #F7F7F7;
  cursor: pointer;
  -webkit-transition: background .3s linear, border-color .3s linear, color .3s linear;
  transition: background .3s linear, border-color .3s linear, color .3s linear;
}

.consent button:hover { border-color: #75AD70; }

.consent button.primary {
  background: #F7F7F7;
  border-color: #F7F7F7;
  color: #333;
}

.consent button.primary:hover {
  background: #75AD70;
  border-color: #75AD70;
  color: #333;
}

.consent :focus-visible {
  outline: 2px solid #75AD70;
  outline-offset: 2px;
}

/* A button, since it acts rather than navigates, dressed as the footer links
   beside it. Hidden in the markup and only revealed by consent.js, since
   without JS there is nothing for it to reset. */
.site-footer .linklike {
  font: inherit;
  font-weight: 400;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #75AD70;
  background: none;
  border: 0;
  padding: 0;
  margin-left: 1.5em;
  cursor: pointer;
  -webkit-transition: color .3s ease;
  transition: color .3s ease;
}

.site-footer .linklike:hover { color: #2980b9; }

.site-footer .linklike[hidden] { display: none; }

@media (max-width: 767px) {
  .consent {
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 18px;
  }
}

@media print {
  .consent { display: none !important; }
}