@import url("placeholder.css");

:root {
  --primary-color: #294466;
  --first-accent-color: #612367;
  --second-accent-color: #316629;
  --background-dark: #ccd2da;
  --background-light: #f0f1f4;
  --primary-text-color: #000000;
  --secondary-text-color: #ffffff;
  --primary-dark-color: #1F3550; /*primary color 10% darker*/
  --first-dark-accent-color: #3D1641; /*first accent color 10% darker*/
  --second-dark-accent-color: #22461C; /*second accent color 10% darker*/
}

/* Default document styles - fonts, font sizes, text colours, font weight */
body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: var(--background-light);
  color: var(--primary-text-color);
}

/* Links */
a[href] {
  text-decoration: none;
  color: var(--primary-color);
}

/* Link hover states */
a[href]:hover, a[href]:active, a[href]:focus {
  text-decoration: underline;
  color: var(--primary-color);
}

ul li:before {
  background-color: var(--primary-color);
}

ol li:before {
  color: var(--primary-color);
}

/* Main content area */
main {
  box-shadow: 0 0 0.2rem 0 var(--background-dark);
}

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

/* Header */
header {
  border-bottom: 1px solid var(--primary-color);
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

/* TODO show logo, when we get one from customer. */
header .main-logo {
  display: hide;
}

section {
  background-color: var(--background-light);
}

/* Output Messages */
.output-message {
  background-color: var(--primary-color);
  color: var(--secondary-text-color);
}

/* Output Message Success */
.output-message.output--success {
  background-color: var(--second-accent-color);
  color: var(--secondary-text-color);
}

/* Output Message Error */
.output-message.output--error {
    background-color: var(--first-accent-color);
    color: var(--secondary-text-color);
}

/* Form labels */
label {
  color: var(--primary-text-color);
}

label:focus {
  color: var(--primary-text-color);
}

/* Form input fields */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="telephone"],
input[type="tel"],
input[type="url"],
textarea,
select {
  /* border: 2px solid var(--background-dark); */
  border-color: var(--background-dark);
  color: var(--primary-text-color);
}

/* 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 {
  border-color: var(--background-dark);
}

/* 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(--first-accent-color);
}

/* 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(--background-light);
}

input[type="checkbox"] + label:before, input[type="radio"] + label:before {
  border: 2px solid var(--background-dark);
}

input[type="checkbox"]:checked + label, input[type="radio"]:checked + label,
input[type="checkbox"]:focus + label, input[type="radio"]:focus + label {
  color: var(--primary-text-color);
}

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

input[type="checkbox"] + label:after {
  border: solid var(--primary-color);
  border-width: 0 4px 4px 0;
}

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

/* Buttons / Submit buttons */
button, input[type=button],
input[type=submit],
a.button,
.button {
  background-color: var(--primary-color);
  border: var(--primary-color);
  color: #fff;
}

/* Button hover & focus states */
button:hover,
input[type=button]:hover,
input[type=submit]:hover,
a.button:hover,
.button:hover,
button:focus,
input[type=button]:focus,
input[type=submit]:focus,
a.button:focus,
.button:focus {
  background-color: var(--primary-dark-color);
  border-color: var(--primary-dark-color);
}