/*
  Keynetica brand overrides (loaded after main.css).
  Palette: #02577a  #01303f  #1a216a  #82ccfa  #a5afc3  #e98134
  Typography: Verdana (bold headers, regular body).
*/

:root {
  --brand-teal: #02577a;
  --brand-deep: #01303f;
  --brand-navy: #1a216a;
  --brand-sky: #82ccfa;
  --brand-slate: #a5afc3;
  --brand-orange: #e98134;
}

/* Typography */
body, input, select, textarea {
  font-family: Verdana, Geneva, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.button, button, input[type="submit"], input[type="reset"], input[type="button"] {
  font-family: Verdana, Geneva, sans-serif;
  font-weight: 700;
}

/* Page + sections */
body {
  background-color: var(--brand-deep);
  background-image: none;
}

.wrapper {
  background-color: var(--brand-deep);
}

.wrapper:before, .wrapper:after {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='https://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%2301303f%3B' /%3E%3C/svg%3E");
  box-shadow: inset 0 -1px 0 0 var(--brand-deep), 0 1px 0 0 var(--brand-deep);
}

.wrapper.style1 {
  background-color: var(--brand-teal);
}

.wrapper.style1:before, .wrapper.style1:after {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='https://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%2302577a%3B' /%3E%3C/svg%3E");
  box-shadow: inset 0 -1px 0 0 var(--brand-teal), 0 1px 0 0 var(--brand-teal);
}

.wrapper.style2 {
  background-color: var(--brand-navy);
}

.wrapper.style2:before, .wrapper.style2:after {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='https://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%231a216a%3B' /%3E%3C/svg%3E");
  box-shadow: inset 0 -1px 0 0 var(--brand-navy), 0 1px 0 0 var(--brand-navy);
}

#wrapper > header {
  background-color: var(--brand-deep);
  background-image: none;
}

#header {
  background-color: rgba(1, 48, 63, 0.95);
}

#header.alt {
  background-color: transparent;
}

/* Links */
a {
  color: var(--brand-sky);
  border-bottom-color: rgba(130, 204, 250, 0.4);
}

a:hover {
  color: var(--brand-orange);
  border-bottom-color: transparent;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  color: inherit;
}

hr, blockquote {
  border-color: rgba(165, 175, 195, 0.35);
}

/* Buttons: orange accent for the primary call to action */
input[type="submit"], input[type="reset"], input[type="button"], button, .button {
  box-shadow: inset 0 0 0 2px var(--brand-slate);
}

input[type="submit"].primary, input[type="reset"].primary, input[type="button"].primary,
button.primary, .button.primary {
  background-color: var(--brand-orange);
  color: var(--brand-deep) !important;
  box-shadow: none;
}

input[type="submit"].primary:hover, input[type="reset"].primary:hover, input[type="button"].primary:hover,
button.primary:hover, .button.primary:hover {
  background-color: #f08f45;
}

input[type="submit"].primary:active, input[type="reset"].primary:active, input[type="button"].primary:active,
button.primary:active, .button.primary:active {
  background-color: #d4722a;
}

/* Form fields */
input[type="text"], input[type="password"], input[type="email"], input[type="tel"],
input[type="search"], input[type="url"], select, textarea {
  border-color: rgba(165, 175, 195, 0.5);
}

input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus,
input[type="tel"]:focus, input[type="search"]:focus, input[type="url"]:focus,
select:focus, textarea:focus {
  border-color: var(--brand-sky);
  box-shadow: 0 0 0 1px var(--brand-sky);
}

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

input[type="checkbox"]:focus + label:before,
input[type="radio"]:focus + label:before {
  border-color: var(--brand-sky);
  box-shadow: 0 0 0 1px var(--brand-sky);
}

.box {
  border-color: rgba(165, 175, 195, 0.35);
}

/* Banner stays pinned at the top while the page scrolls */
.page-banner {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10000;
}

/* Results page */
.score-bar {
  background: rgba(165, 175, 195, 0.25) !important;
}

.score-fill {
  background: linear-gradient(90deg, var(--brand-teal), var(--brand-sky)) !important;
}