/* Small devices (landscape phones, 576px and up) */

@media (max-width: 576px) {

	.header {
		height: 65px;
		border-bottom-color: #bfe8f4;
	}
	
	.logo {
		height: 65px;
	}
	
	.logo svg {
		margin: 16px 0 0 10px;
	}

	.header button {
		background-color: transparent;
		display: inline-block;
		margin: 0;
		padding: 0;
		vertical-align: top;
		width: 45px;
		-webkit-appearance: none;
		border: 0;
		outline: 0;
	}
	
	.header button:hover {
		background-color: transparent;
		height: 65px;
		box-shadow: none;
	}
	
	.mobile-menu-button {
		height: 65px;
	}

	.search-button {
		background-color: transparent;
		height: 65px;
		width: auto;
	}
	
	.search-button svg {
		fill: #12414b;
		width: 18px;
		height: 18px;
	}

	.footer {
		background: #9ec243;
		height: auto;
	}
	
	.footer-wrapper {
		padding-top: 0;
	}
	
	.footer p.copyright {
		margin-bottom: 2rem;
	}
	
	.footer-logo {
		margin-bottom: 35px;
	}
	
	.site-counter {
		text-align: left;
		padding-top: 1rem;
		padding-bottom: 2rem;
	}

	.site-counter .house {
		margin: 0;
		position: absolute;
		bottom: 20px;
		right: 20px;
	}
	
	/* #pagination {
		display: none;
	} */
	
	#windmill-fans,
	#windmill {
		display: none;
	}
	
	.posts .card {
		min-height: auto;
	}

	.subscribe {
		margin-top: 1rem;
		margin-bottom: 1rem;
		padding: 10px 20px 20px;
	}

	.subscribe label {
		font-size: 19px;
		text-align: center;
	}

	.full-height {
		position: absolute;
	}
	
	.next-posts-link {
		display: none;
	}
	
}


/* Medium devices (tablets, 768px and up) */

@media (min-width: 768px) {
	
}


/* Large devices (desktops, 992px and up) */

@media (max-width: 992px) {
	
	.posts .card {
		min-height: 300px;
	}
	
	#tagline {
		display: none;
	}
	
}


/* Extra large devices (large desktops, 1200px and up) */

@media (min-width: 1200px) {}
/* Mobile header: shared alignment, touch targets and the existing theme palette. */
@media (max-width: 767px) {
    .header { height: 68px; border-bottom-color: #EBF3F5; }
    .header > .container-fluid { height: 100%; padding-right: 16px; padding-left: 16px; }
    .header > .container-fluid > .row { height: 100%; margin: 0; flex-wrap: nowrap; align-items: center; }
    .header > .container-fluid > .row > div { padding: 0; }
    .header > .container-fluid > .row > div:first-child { flex: 1 1 auto; width: auto; max-width: none; min-width: 0; }
    .header > .container-fluid > .row > div:nth-child(2) { display: flex; flex: 0 0 auto; width: auto; max-width: none; gap: 4px; align-items: center; }
    .header > .container-fluid > .row > div:nth-child(3) { display: none; }
    .header .logo { display: flex; align-items: center; height: 44px; width: fit-content; }
    .header .logo svg { display: block; flex-shrink: 0; float: none; width: 125px; height: 33px; margin: 0; }
    .header .search-button, .header .mobile-menu-button { display: flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; margin: 0; background: transparent; border: 0; border-radius: 4px; color: #12414b; text-indent: 0; cursor: pointer; }
    .header .search-button svg, .header .mobile-menu-button svg { display: block; fill: currentColor; margin: 0; }
    .header .search-button svg { width: 20px; height: 20px; }
    .header .mobile-menu-button svg { width: 22px; height: 17px; }
    .header .search-button:hover, .header .mobile-menu-button:hover { height: 44px; background: #EBF3F5; box-shadow: none; }
    .header .search-button:focus-visible, .header .mobile-menu-button:focus-visible { outline: 2px solid #63c5da; outline-offset: 2px; }
}

/* Keep the mobile category control, introduction and resource grid evenly spaced. */
@media (max-width: 767px) {
    .mobile-select-categories { padding: 20px 0 0; margin: 0; }
    .mobile-select-categories select { height: 52px; padding: 0 16px; font-size: 16px; background-position: calc(100% - 16px) 50%; }
    .mobile-select-categories select:focus { background-position: calc(100% - 16px) 50%; }
    .resource-intro { padding: 24px 0; }
    .resource-intro + .posts { padding-top: 0; }
    .resource-intro + .posts .card { margin-bottom: 24px; }
}

/* Full mobile resource titles, with aligned cards and no line clamp. */
@media (max-width: 767px) {
    .posts .card .card-title { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.3; min-height: 2.6em; }
    .posts > .row > .col-sm-6 { display: flex; }
    .posts > .row > .col-sm-6 > .card { width: 100%; }
    .posts .card .card-block { display: flex; flex-direction: column; }
    .posts .card .card-file-type { margin-top: auto; }
}

/* Show complete category labels above mobile resource titles. */
@media (max-width: 767px) {
    .posts .card .card-text { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.4; min-height: 2.8em; }
}

/* Mobile search heading stays inside the grid with balanced vertical spacing. */
@media (max-width: 767px) {
    .search .posts { padding-top: 24px; }
    .search .posts > .post-nav { margin: 0; padding: 0 0 24px; }
    .search .posts > .post-nav .post-title { width: 100%; margin: 0; font-size: 28px; line-height: 1.25; text-align: center; overflow-wrap: anywhere; }
    .search .posts .card { margin-bottom: 24px; }
}

/* Fit the whole resource image inside equal mobile frames without cropping. */
@media (max-width: 767px) {
    .posts .card figure { position: relative; aspect-ratio: 4 / 3; max-height: none; overflow: visible; }
    .posts .card figure .card-img-top { display: block; position: absolute; inset: 0; width: 100%; height: 100%; max-width: 100%; object-fit: contain; object-position: center; }
}

/* Horizontal resource navigation on phones and tablets; scrollbars stay hidden. */
@media (max-width: 991px) {
    #page-wrap > .resource-category-navigation { max-width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; }
    #page-wrap > .resource-category-navigation::-webkit-scrollbar { display: none; width: 0; height: 0; }
    #page-wrap > .resource-category-navigation > ul { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; width: max-content; margin: 0; padding: 12px 16px; }
    #page-wrap > .resource-category-navigation > ul > li { flex: 0 0 auto; margin: 0; }
    #page-wrap > .resource-category-navigation > ul > li > a { white-space: nowrap; }
    .mobile-select-categories { display: none; }
}