/*
 * 
 * Header images for different
 *  screen sizes, Desktop, Tablet
 *  and Mobile
 * 
 * these do very specific resizing
 *  of the base image (linked) and
 *  corresponding changes to the
 *  padding-top and height of the
 *  parent object: #masthead
 * 
 */

/* Desktop */
@media screen and (min-width: 600px) {
  #masthead {
		height: 230px;
		padding-top: 190px;
		background-image: url('https://workersvoiceus.org/wp-content/uploads/2022/04/WV-web-header-1100x244-non-bevelled-edge-CROP.jpg');
		background-position: top;
		background-repeat: no-repeat;
		background-size: cover;
		background-size: 1050px 230px;
	}
}

/* Tablet */
@media screen and (max-width: 992px) {
  #masthead {
		padding-top: 100px;
    background-image: url('https://workersvoiceus.org/wp-content/uploads/2022/04/WV-web-header-730x120-CROP.jpg');
		background-position: top;
		background-size: 730px 120px;

	}
}

/* Mobile */
@media screen and (max-width: 600px) {
  #masthead {
		padding-top: 120px;
		background-image: url('https://workersvoiceus.org/wp-content/uploads/2022/04/WV-web-header-280x180-CROP.jpg');
		background-repeat: no-repeat;
		background-position: top;
		background-size: 280px 180px
	}
}

/*
 * 
 * This makes sure the form fields
 *  of the Join/Contact page don't
 *  act strangely when highlighted
 * 
 * Without this, the border of the 
 *  field disappears/turns white,
 *  as does the text
 * 
 * These IDs are set in the form
 *  options in Wordpress's page
 *  editor, so they're specific to
 *  that form
 * 
 * For other forms in the same 
 *  default style, you can set the
 *  IDs on their page, then add
 *  them here
 * 
 */
input#join-form-name, input#join-form-email, textarea#contact-form-comment-join-form-message, input#wp-block-search__input-1, input.search-field[type="search"] {
    color: black;
    border-color: rgb(204, 204, 204);
}

/* 
 * This resizes the menu items so
 *  that the Spanish titles wrap
 *  after one word and do not
 *  overflow the row
*/
/* Desktop 
@media screen and (min-width: 600px) {
  .menu-item-object-page a, .menu-item-object-custom a {
    max-width: 100px;
  }
}*/