/*
 Theme Name:   Apuslisting Child
 Theme URI:    https://www.bgsbusiness.com.au
 Description:  Child theme for Brighton Grammar School Community Directory. Holds the site's customisations so they survive parent theme updates.
 Author:       ApusTheme
 Author URI:   http://apusthemes.com
 Template:     apuslisting
 Version:      1.0.1
 Text Domain:  apuslisting-child
*/

/*
 * Category dropdown height below 768px.
 *
 * Apuslisting 1.2.64 moved this control from Chosen to Select2 and styled it in the parent
 * style.css, but that block sits inside an "@media (min-width: 768px)" that runs to the end of the
 * file. Below 768px none of it applies, so Select2 falls back to its own 28px default while the
 * Keywords and Location fields beside it are 48px.
 *
 * These are the parent's own values, applied at every width.
 */
.select2-container .select2-selection--single {
	height: 48px;
}

.select2-container--default .select2-selection--single {
	border-color: #eee;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 48px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 46px;
}

/*
 * Homepage search form: category dropdown below 768px.
 *
 * Same unclosed "@media (min-width: 768px)" in the parent style.css as above, so nothing the
 * parent says about ".job_search_form .select2-*" reaches mobile.
 *
 * The theme's own mobile design is in template.css around line 18213: ".search_categories" is a
 * 48px white pill with 10px padding, and the control inside is sized to fit the remaining 28px
 * (".chosen-container-single { padding: 0; height: auto }"). Chosen's control was that height by
 * default. Select2's is not, so it has to be told, or it overflows the pill and the text sits low.
 */
@media (max-width: 767px) {
	.job_search_form .select2-container--default .select2-selection--single {
		height: 28px;
		border: none;
		border-radius: 50px;
		background-color: transparent;
	}

	.job_search_form .select2-container--default .select2-selection--single .select2-selection__rendered {
		line-height: 28px;
		padding-left: 10px;
	}

	.job_search_form .select2-container--default .select2-selection--single .select2-selection__arrow {
		height: 26px;
	}
}