@import url("placeholder.css");

@font-face { font-family: "BaWueSans"; src: url("./fonts/BaWueSans/BaWueSansWeb-Bold.woff2") format("woff2"), url("./fonts/BaWueSans/BaWueSansWeb-Bold.ttf") format("woff"); font-style: normal; font-weight: 700; }
@font-face { font-family: "BaWueSans"; src: url("./fonts/BaWueSans/BaWueSansWeb-BoldItalic.woff2") format("woff2"), url("./fonts/BaWueSans/BaWueSansWeb-BoldItalic.ttf") format("woff"); font-style: italic; font-weight: 700; }
@font-face { font-family: "BaWueSans"; src: url("./fonts/BaWueSans/BaWueSansWeb-Regular.woff2") format("woff2"), url("./fonts/BaWueSans/BaWueSansWeb-Regular.ttf") format("woff"); font-style: normal; font-weight: 400; }
@font-face { font-family: "BaWueSans"; src: url("./fonts/BaWueSans/BaWueSansWeb-RegularItalic.woff2") format("woff2"), url("./fonts/BaWueSans/BaWueSansWeb-RegularItalic.ttf") format("woff"); font-style: italic; font-weight: 400; }

@font-face { font-family: "BaWueSerif"; src: url("./fonts/BaWueSerif/BaWueSerifWeb-Bold.woff2") format("woff2"), url("./fonts/BaWueSerif/BaWueSerifWeb-Bold.ttf") format("woff"); font-style: normal; font-weight: 700; }
@font-face { font-family: "BaWueSerif"; src: url("./fonts/BaWueSerif/BaWueSerifWeb-Regular.woff2") format("woff2"), url("./fonts/BaWueSerif/BaWueSansWeb-Regular.ttf") format("woff"); font-style: normal; font-weight: 400; }

:root {
  --bwcolorpalette-yellow: #fffc00;
  --bwcolorpalette-white: #ffffff;
  --bwcolorpalette-grey-5: #f4f3f1;
  --bwcolorpalette-grey-10: #e4e1dc;
  --bwcolorpalette-grey-20: #cbc6bd;
  --bwcolorpalette-grey-30: #afa697;
  --bwcolorpalette-grey-40: #968a79;
  --bwcolorpalette-grey-50: #867a69;
  --bwcolorpalette-grey-60: #736759;
  --bwcolorpalette-grey-70: #5e554a;
  --bwcolorpalette-grey-80: #524942;
  --bwcolorpalette-grey-90: #49413c;
  --bwcolorpalette-grey-95: #2a2623;
  --bwcolorpalette-grey-100: #000000;
  --bwcolorpalette-blue-20: #a7ebfa;
  --bwcolorpalette-blue-80: #165571;
  --bwcolorpalette-green-10: #dbf7a2;
  --bwcolorpalette-green-20: #ccfb74;
  --bwcolorpalette-green-80: #375a08;
  --bwcolorpalette-red-10: #ffd9c3;
  --bwcolorpalette-red-20: #ffb793;
  --bwcolorpalette-red-80: #920303;
  --bwcolorpalette-violet-80: #6e0bcc;
}


/* Default document styles - fonts, font sizes, text colours, font weight */
body {
  font-family: BaWueSans, Arial, sans-serif;
  color: var(--bwcolorpalette-grey-95);
  background-color: white;
  padding: 0;
}

h1, h2, h3 {
  font-family: BaWueSerif, BaWueSans, Arial, sans-serif;
}

/* Links */
a[href] {
  color: var(--bwcolorpalette-violet-80);
  border-bottom: 1px solid var(--bwcolorpalette-violet-80);
}

/* Link hover states */
a[href]:hover, a[href]:active {
  border-width: 2px;
  color: var(--bwcolorpalette-violet-80);
  text-decoration: none;
}

ul li:before {
  background-color: var(--bwcolorpalette-grey-95);
}

ol li:before {
  color: var(--bwcolorpalette-grey-95);
}

hr {
  background-color: var(--bwcolorpalette-grey-20);
}

main {
  margin: 24px auto;
}

/* Add a border top when 2 sections are together */
main section + section {
  border-color:var(--bwcolorpalette-grey-20);
}

/* Header */
.main header {
  border-color:var(--bwcolorpalette-grey-20);
  display:none; /* since we include the ZEHeader bar, we dont want this default header */
}
.main header .main-logo {
  max-width: 500px;
  margin-bottom: 10px;
}

/* Output Messages */
.output-message {
  background-color: var(--bwcolorpalette-blue-20);
  color: var(--bwcolorpalette-blue-80);
}

/* Output Message Success */
.output-message.output--success {
  background-color: var(--bwcolorpalette-green-10);
  color: var(--bwcolorpalette-green-80);
}

/* Output Message Error */
.output-message.output--error {
  background-color: var(--bwcolorpalette-red-10);
  color: var(--bwcolorpalette-red-80);
}

fieldset .error {
  color: var(--bwcolorpalette-red-80);
}

/* Service logo */
.service-logo {
  margin: 16px auto;
}

/* Form labels */
label {
  color: var(--bwcolorpalette-grey-95)
}
label[for=password],
label[for=donotcache] {
  margin-top:10px;
}

/* Form input fields */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="telephone"],
input[type="tel"],
input[type="url"],
textarea,
select {
  background-color: var(--bwcolorpalette-grey-5);
  border: none;
  border-bottom: 1px solid var(--bwcolorpalette-grey-80);
  color: var(--bwcolorpalette-grey-95);
  border-radius: 0;
}

/* Form input focus */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="telephone"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus,
input[type="text"]:active,
input[type="email"]:active,
input[type="password"]:active,
input[type="telephone"]:active,
input[type="tel"]:active,
input[type="url"]:active,
textarea:active,
select:active {
  box-shadow: 0 0 0 0.2rem var(--bwcolorpalette-violet-80);
  border-color: var(--bwcolorpalette-grey-80);
}

/* Form input errors */
input[type="text"].error,
input[type="email"].error,
input[type="password"].error,
input[type="telephone"].error,
input[type="tel"].error,
input[type="url"].error,
textarea.error,
select.error {
  border-color: var(--bwcolorpalette-red-80);
  background-color: var(--bwcolorpalette-red-10);
  color: var(--bwcolorpalette-red-80);
}

/* Form input read only / disabled */
input[type="text"]:read-only,
input[type="email"]:read-only,
input[type="password"]:read-only,
input[type="telephone"]:read-only,
input[type="tel"]:read-only,
input[type="url"]:read-only,
textarea:read-only,
select:read-only,
input[type="text"]:disabled,
input[type="email"]:disabled,
input[type="password"]:disabled,
input[type="telephone"]:disabled,
input[type="tel"]:disabled,
input[type="url"]:disabled,
textarea:disabled,
select:disabled {
  background-color: var(--bwcolorpalette-grey-10);
  color: var(--bwcolorpalette-grey-70);
  border-color: var(--bwcolorpalette-grey-40);
}

input[type="checkbox"] + label:before, input[type="radio"] + label:before {
  border-color:var(--bwcolorpalette-grey-95);
}

input[type="checkbox"]:checked + label, input[type="radio"]:checked + label {
  color: var(--bwcolorpalette-grey-95);
}

input[type="checkbox"]:checked + label:before, input[type="radio"]:checked + label:before {
  color: white;
  background-color: var(--bwcolorpalette-grey-95);
  border-color:var(--bwcolorpalette-grey-95);
}

input[type="checkbox"]:focus + label:before, input[type="radio"]:focus + label:before {
  box-shadow: 0 0 0 0.2rem var(--bwcolorpalette-violet-80);
  border-color:transparent;
}

input[type="checkbox"] + label:after {
  color: white;
  border-color:white;
}

input[type="radio"] + label:after {
  background-color: var(--bwcolorpalette-grey-20);
}

/* Buttons / Submit buttons */
button, input[type=button],
input[type=submit],
a.button,
.button {
  background: var(--bwcolorpalette-grey-95);
  border-color: var(--bwcolorpalette-grey-95);
  border-width:1px;
  color: white;
  border-radius:3px;
  font-weight:normal;
}

/* Button hover states */
button:hover,
input[type=button]:hover,
input[type=submit]:hover,
a.button:hover,
.button:hover
 {
  background: var(--bwcolorpalette-yellow);
  border-color: var(--bwcolorpalette-grey-95);
  color: var(--bwcolorpalette-grey-95) !important;
}

/* Button focus states */
button:focus,
input[type=button]:focus,
input[type=submit]:focus,
a.button:focus,
.button:focus {
  box-shadow: 0 0 0 0.2rem var(--bwcolorpalette-violet-80);
  border-color: var(--bwcolorpalette-grey-80);
}

/* Secondary button styles */
button.button--secondary,
input[type=button].button--secondary,
input[type=submit].button--secondary,
a.button.button--secondary,
.button.button--secondary {
  border-color: var(--bwcolorpalette-grey-95);
  color: var(--bwcolorpalette-grey-95);
  background-color: transparent;
}

/* Secondary button hover states */
button.button--secondary:hover,
input[type=button].button--secondary:hover,
input[type=submit].button--secondary:hover,
a.button.button--secondary:hover,
.button.button--secondary:hover {
  background-color: transparent;
  border-color: var(--bwcolorpalette-grey-95);
  box-shadow:inset 0px 0px 0px 1px var(--bwcolorpalette-grey-95);
}

/* Button disabled states */
button:disabled,
input[type=button]:disabled,
input[type=submit]:disabled,
a.button:disabled,
.button:disabled {
  background-color: var(--bwcolorpalette-grey-10);
  border-color: var(--bwcolorpalette-grey-40);
  color: var(--bwcolorpalette-grey-70);
}

.loader {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid var(--bwcolorpalette-yellow);
  border-bottom: 16px solid var(--bwcolorpalette-yellow);
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
  margin: auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}