/* Theme overrides loaded after /assets/css/global.css */

/* Highlight the current section in the top navigation
   (global.css gave .active the same colour as the other links). */
#nav li a.active {
	color: #39f;
}

/* Social icons: official logo files shown as images */
#nav-icons li a.social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: none;
}
#nav-icons li a.social-link img {
	display: block;
	max-width: 26px;
	max-height: 26px;
	width: auto;
	height: auto;
}

/* Search: larger text box and a visible label above the scope drop-down */
#search {
	flex: 0 1 auto;
	min-width: 0;
	align-self: center;
	padding: 10px 0;
}

/* Desktop and tablet: nav links, icons and search centred on one line. */
@media only screen and (min-width: 481px) {
	#nav { align-items: center; }
	#nav > ul:first-child { padding-top: 12px; padding-bottom: 12px; }
	#nav-icons.mobile-hide {
		display: flex;
		align-items: center;
		align-self: center;
		height: auto;
		padding: 0;
	}
	#nav-icons.mobile-hide li { display: flex; }
	/* The label floats just above the drop-down so it does not affect alignment. */
	#search .search-scope { position: relative; }
	#search label.search-scope-label {
		position: absolute;
		left: 0;
		bottom: 100%;
		margin: 0 0 3px 0;
		white-space: nowrap;
	}
}
#search fieldset {
	align-items: center;
	flex-wrap: nowrap;
}
#search input#search-query {
	flex: 0 1 220px;
	min-width: 120px;
	width: 220px;
	height: auto;
	padding: 5px 8px;
	margin: 0 6px 0 0;
	font-size: 1rem;
	line-height: 1.3;
}
#search input#submit {
	margin: 0 12px 0 0;
	align-self: center;
}
#search .search-scope {
	display: flex;
	flex-direction: column;
}
#search label.search-scope-label {
	display: block;
	visibility: visible;
	margin: 0 0 3px 0;
	font-size: 0.75rem;
	line-height: 1.2;
	color: #666;
}
#search .search-scope {
	margin-right: 4px; /* room for the focus ring at the right-hand edge */
}
#search .search-scope select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 170px;
	height: auto;
	margin: 0;
	padding: 5px 30px 5px 8px;
	font-size: 1rem;
	line-height: 1.3;
	color: #000;
	border: 1px solid #a1a1a1;
	border-radius: 0;
	background: #f2f2f2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23333' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 10px center;
	cursor: pointer;
}
#search .search-scope select:hover {
	border-color: #666;
}

/* Matching focus style for the search box and drop-down */
#search input#search-query:focus,
#search .search-scope select:focus {
	outline: none;
	border-color: #39f;
	box-shadow: 0 0 0 2px rgba(51, 153, 255, 0.35);
}

@media only screen and (max-width: 1024px) {
	#search input#search-query { flex-basis: 170px; width: 170px; }
}
@media only screen and (max-width: 480px) {
	#search fieldset { align-items: flex-end; flex-wrap: wrap; }
	#search input#search-query { flex: 1 1 auto; width: auto; margin: 5px 6px 10px 0; }
	#search input#submit { margin: 0 0 16px 0; }
	#search .search-scope { flex: 1 1 100%; margin-right: 0; }
	#search { align-self: stretch; padding: 0; }
	#search .search-scope select { width: 100%; margin: 0 0 10px 0; }
}

/* Phones: five nav links need real gaps; wrap to a second line if needed. */
@media only screen and (max-width: 480px) {
	#nav > ul:nth-child(1) {
		align-self: stretch;
		width: 100%;
		min-width: 0; /* global.css sets min-width: max-content, which blocks wrapping */
		max-width: 100%;
		box-sizing: border-box;
		flex-wrap: wrap;
		justify-content: flex-start;
		column-gap: 0.9em;
		row-gap: 0.35em;
	}
	#nav > ul:nth-child(1) > li {
		flex: 0 0 auto;
		white-space: nowrap;
	}
	#nav li a {
		font-size: 1.05rem;
	}
}

/* Images now carry width/height attributes (to reserve space while loading):
   keep them scaling proportionally within existing size limits. */
.gallery-entry img { width: auto; height: auto; }
.left-column img, .full-column img, .article-content img { height: auto; }
.gallery li img { width: 63px; height: 88px; object-fit: contain; }