/*
 * Ariwa branding overrides on top of Foundation.
 * Colors sampled from ariwa-logo.png: orange #F08228, black, white.
 */
:root {
  --ariwa-orange: #F08228;
  --ariwa-orange-dark: #D46A16;
  --ariwa-black: #111111;
  --ariwa-white: #ffffff;
}

body {
  color: var(--ariwa-black);
}

a {
  color: var(--ariwa-orange-dark);
}

a:hover {
  color: var(--ariwa-orange);
}

.top-bar {
  background: var(--ariwa-white);
  border-bottom: 1px solid #eee;
}

.top-bar .name h1 a {
  padding: 0;
}

.top-bar-section ul li > a:not(.button) {
  background: var(--ariwa-white);
  color: var(--ariwa-black);
}

.top-bar-section ul li > a:not(.button):hover,
.top-bar-section li a:not(.button):hover,
.top-bar-section li.hover > a:not(.button),
.top-bar-section ul li:hover > a:not(.button) {
  background: var(--ariwa-white);
  color: var(--ariwa-orange-dark);
}

.top-bar-section .has-dropdown > a:after {
  border-color: var(--ariwa-black) transparent transparent;
}

.title-area,
.top-bar-section ul li.divider {
  border-color: #eee;
}

.top-bar .toggle-topbar a {
  color: var(--ariwa-black);
}

.top-bar .toggle-topbar.menu-icon a span {
  box-shadow: 0 10px 0 1px var(--ariwa-black), 0 16px 0 1px var(--ariwa-black), 0 22px 0 1px var(--ariwa-black);
}

button, .button, input[type="submit"].button {
  background-color: var(--ariwa-orange);
  border-color: var(--ariwa-orange-dark);
  color: #fff;
}

button:hover, button:focus,
.button:hover, .button:focus,
input[type="submit"].button:hover, input[type="submit"].button:focus {
  background-color: var(--ariwa-orange-dark);
  color: #fff;
}

button.secondary, .button.secondary {
  background-color: #666666;
  border-color: #4d4d4d;
  color: #fff;
}

button.secondary:hover, button.secondary:focus,
.button.secondary:hover, .button.secondary:focus {
  background-color: #4d4d4d;
  color: #fff;
}

#footer {
  background: #fafafa;
  color: #555;
  border-top: 1px solid #eee;
}

#footer a:not(.button) {
  color: var(--ariwa-orange-dark);
}

#footer a.button {
  color: #fff;
}

.nav-logo {
  height: 36px;
  vertical-align: middle;
}

.hero-logo {
  max-height: 90px;
  width: auto;
}

.vote-step-badge {
  display: inline-block;
  background: var(--ariwa-orange);
  color: #fff;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 0.85em;
  font-weight: bold;
  margin-bottom: 14px;
}