/*
 * Prijavna vrstica za obveščanje o novi aplikaciji ("sticky bar" v glavi strani).
 * Vključena je v vse javne postavitve; pravila so namenoma vezana na
 * #signup-bar / #signup-form, da ne posežejo v obstoječi izgled portala.
 *
 * Ozadje je svetlo rumeno (#FFC) -- ista barva kot komentarji na portalu --
 * zato so vsa besedila temna.
 */

#signup-bar {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 900;
  background: #ffc;
  border-bottom: 1px solid #c9c163;
  color: #222;
  font-family: "Trebuchet MS", Tahoma, sans-serif;
  text-align: center;
}

.signup-bar-inner {
  position: relative;
  width: 950px;
  max-width: 100%;
  margin: 0 auto;
  padding: 7px 10px 8px 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.signup-title {
  font-size: 16px;
  font-weight: bold;
  line-height: 1.25;
  color: #222;
  margin: 0 0 6px 0;
}

/* Obrazec */

#signup-form {
  margin: 0;
  display: block;
}

.signup-field,
.signup-consent {
  display: inline-block;
  vertical-align: middle;
}

/* Oznaka polja je vidna samo bralnikom zaslona (besedilo je v polju samem). */
.signup-label-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

#signup-form input[type="email"] {
  width: 210px;
  height: 27px;
  padding: 0 7px;
  margin: 0;
  border: 1px solid #a89f4e;
  border-radius: 3px;
  background: #fff;
  color: #222;
  font-size: 13px;
  font-family: inherit;
  vertical-align: middle;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.signup-consent {
  margin: 0 14px 0 16px;
  font-size: 12px;
  color: #444;
}

.signup-consent input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin: 0 5px 0 0;
  vertical-align: middle;
}

.signup-consent label {
  cursor: pointer;
  vertical-align: middle;
}

#signup-form input.signup-submit {
  width: auto;
  height: 29px;
  padding: 0 16px;
  margin: 0;
  border: 0;
  border-radius: 3px;
  background: #000;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  font-family: inherit;
  cursor: pointer;
  vertical-align: middle;
}

#signup-form input.signup-submit:hover {
  background: #333;
}

/* Sporočila */

.signup-error {
  margin-top: 5px;
  font-size: 12px;
  font-weight: bold;
  color: #a11;
}

.signup-done {
  padding: 6px 0;
  font-size: 14px;
  font-weight: bold;
  color: #2f6d20;
}

/*
 * Ozki zasloni: obrazec ostane odprt, samo prelomljen v tri vrstice --
 * naslov, strinjanje, nato polje za email in gumb drug ob drugem.
 */

@media screen and (max-width: 700px) {
  .signup-bar-inner {
    width: auto;
    padding: 9px 10px 10px 10px;
    text-align: left;
  }

  .signup-title {
    margin: 0 0 8px 0;
  }

  #signup-form {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: center;
    align-items: center;
  }

  /* 2. vrstica */
  .signup-consent {
    -webkit-order: 1;
    order: 1;
    display: block;
    width: 100%;
    margin: 0 0 9px 0;
    font-size: 13px;
    line-height: 1.35;
  }

  .signup-consent input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-right: 8px;
  }

  /* 3. vrstica: polje zasede prostor, ki ostane ob gumbu (pribl. dve tretjini) */
  .signup-field {
    -webkit-order: 2;
    order: 2;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
    display: block;
  }

  /* 16px prepreči samodejno povečavo polja na iPhonu. */
  #signup-form input[type="email"] {
    width: 100%;
    height: 44px;
    font-size: 16px;
  }

  /*
   * `width: auto !important` je nujen: mobile.css ima splošno pravilo
   * `form input[type="submit"] { width: 100% !important }`, ki bi gumb
   * potisnilo v svojo vrsto.
   */
  #signup-form input.signup-submit {
    -webkit-order: 3;
    order: 3;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto !important;
    margin-left: 8px;
    height: 44px;
    padding: 0 14px;
    font-size: 14px;
  }

  .signup-error {
    -webkit-order: 4;
    order: 4;
    width: 100%;
    font-size: 13px;
  }

  .signup-done {
    padding: 8px 0;
    font-size: 13px;
  }
}