/*
  @file Theming the styles created by WYSIWYG inline styling.
*/

/* Alerts */
.alert {
  padding: var(--spacing-large);
  border: var(--border-large);
  border-color: var(--border-color-alert);
  background-color: var(--color-white);
  font-size: var(--font-size-summary);
  font-weight: bold;
}

.alert-primary {
  border-color: var(--color-black);
}

.alert-info {
  border-color: var(--color-info);
}

.alert-danger {
  border-color: var(--color-danger);
}
.alert-success {
  border-top: none;
  border-bottom: none;
  border-color: var(--color-danger);
  border-left-width: var(--border-xlarge);
  border-right: none;
  padding: var(--spacing);
}

.alert-fail {
  border-color: var(--color-warning);
}

/* Links */
.btn.btn-start {
  display: inline-flex;
  align-items: center;
  padding: 15px var(--btn-start-padding-horizontal);
  border: 3px solid var(--btn-start-border-color);
  filter: drop-shadow(-5px 5px 12px rgba(98, 98, 98, 0.25));
  border-radius: var(--button-radius);
  background-color: var(--btn-start-bg-color);
  text-decoration: none;
  font-size: 16px;
  color: var(--color-white);
}
.btn.btn-start:focus,
.btn.btn-start:hover {
  background-color: var(--btn-start-bg-color-hover);
  text-decoration: underline;
}
.btn.btn-start::after {
  position: relative;
  margin-left: 0.5rem;
  content: '';
  background-image: var(--btn-start-icon);
  background-repeat: no-repeat;
  width: 25px;
  height: 22px;
  line-height: 0;
  margin-bottom: 5px;
}
.external-link::after {
  position: relative;
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-left: 0.25rem;
  content: "";
  background-color: var(--external-link-icon-color); /* https://stackoverflow.com/questions/51395179/svg-fill-with-css-variables#58536915 */
  -webkit-mask-image: url("../../templates/includes/icons/external-link.svg");
  mask-image: url("../../templates/includes/icons/external-link.svg");
}

a[type="application/pdf"] {
  display: inline-block;
  margin-bottom: var(--vertical-rhythm-spacing);
}

/* Styled lists*/
.list-checked li::marker {
  content:"\2714\0020";
  color: var(--color-green);
}

/* Styled lists*/
.list-checked-purple {
  list-style: none;
}
.list-checked-purple li::before {
  content: '';
  display: inline-block;
  height: 1rem;
  width: 14px;
  background-image: url("../../templates/includes/icons/check-purple.svg");
  position: relative;
  left: -20px;
}


.list-key-links {
  list-style: none;
  padding-left: 0;
}

.list-key-links li {
  position: relative;
  padding-left: 2.5em; 
  padding-bottom: 0.5em;

}

.list-key-links li::before {
  content: '';
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  background-color: var(--color-accent);
  background-image: url("../../assets/icons/arrow_forward_outline.svg");
  background-size: 65%;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 0.1em;
  transform: translate(-1%, -10%); 
  background-position: center 35%; 
}
/* New date heading format */
.date-heading {
  display: inline-block;
  position: relative;
  background-color: var(--color-accent);
  color: var(--color-white);
  padding: 0.25em 1em;
  z-index: 1;
}

.date-heading::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-50%);
  width: 1000px;
  height: 3px;
  background-color: var(--color-accent);
  z-index: -1;
}


@media (min-width: 48em) {
  .btn.btn-start {
    display: inline-flex;
    align-items: center;
    padding: calc(var(--btn-start-padding-vertical) / 2) var(--btn-start-padding-horizontal);
    border: 3px solid var(--btn-start-bg-color);
    filter: drop-shadow(-5px 5px 12px rgba(98, 98, 98, 0.25));
    border-radius: var(--button-radius);
    background-color: var(--btn-start-bg-color);
    text-decoration: none;
    font-size: 20px;
  }
  .btn.btn-start:focus {
    border: 3px solid var(--color-yellow);
    background-color: var(--color-yellow);
    color: var(--color-black)
  }
  .btn.btn-start.btn-secondary {
    background-color: var(--color-accent-hover);
  }
  .btn.btn-start.btn-secondary:focus {
    background-color: var(--color-yellow);
    color: var(--color-black)
  }
}