/*
 * Horizon theme for SMF 2.1 - responsive overrides.
 * Loaded after the default responsive.css (order 9100).
 * The 2.0 Horizon theme was fixed-width (min-width: 960px); this keeps its look
 * on desktop and lets it degrade gracefully down to phone widths.
 */

/* The original 78% / min 960px wrapper, relaxed below ~1230px. */
@media (max-width: 1230px) {
	.wrapper {
		width: 96%;
	}
}

@media (max-width: 1024px) {
	#topnav > li {
		margin: 0 2px;
	}
	#topnav > li > a {
		padding: 0 8px;
		font-size: 13px;
	}
	#search input[type="search"],
	#search input[type="search"]:focus {
		width: 120px;
	}
}

@media (max-width: 855px) {
	/* Topbar: icons for PMs/alerts, keep the avatar for the profile menu. */
	#account #top_info > li.greeting .textmenu {
		display: none;
	}
	#account #pm_menu_top .main_icons,
	#account #alerts_menu_top .main_icons {
		display: inline-block;
	}
	#account #pm_menu_top .textmenu,
	#account #alerts_menu_top .textmenu {
		display: none;
	}
	#account #top_info > li.greeting > a::after {
		content: "";
	}
}

@media (max-width: 720px) {
	.wrapper {
		width: 100%;
	}
	#topbar {
		padding: 6px 8px;
	}
	#horizon-time {
		display: none;
	}
	#account {
		float: none;
	}
	#account #top_info {
		justify-content: center;
	}
	#account li.horizon_unread {
		display: none;
	}
	#languages_form {
		float: none;
		text-align: center;
		margin: 4px 0 0;
	}
	h1.forumtitle {
		padding: 10px 12px;
	}
	h1.forumtitle a {
		max-width: 100%;
		width: 400px;
		padding: 0;
		margin: 0 auto;
	}
	#navbar {
		padding: 10px 8px;
	}
	#toolbar {
		padding: 0 8px 8px;
	}
	#quicknav {
		float: none;
		margin-top: 8px;
	}
	#quicknav ul {
		justify-content: center;
	}
	#search {
		/* 2.1 hides #search_form at this width; Horizon keeps the quick search, full width. */
		float: none;
		margin: 8px 0 0;
	}
	#search #search_form {
		display: block !important;
	}
	#search input[type="search"],
	#search input[type="search"]:focus {
		box-sizing: border-box;
		width: 100%;
	}
	#board-notice {
		padding: 0 8px;
		line-height: 1.6em;
		min-height: 0;
	}
	#board-notice .notices {
		padding: 6px 0;
	}
	#main_content_section {
		padding: 8px;
	}
	.navigate_section {
		padding: 0 8px;
	}

	/* Board index: hide stats, last post moves under the board name. */
	.up_contain > .board_stats,
	.boardindex_table .board_stats,
	#topic_container .board_stats,
	#topic_header .board_stats {
		display: none;
	}
	.boardindex_table .info,
	.up_contain > .info {
		border-right: none;
		width: calc(100% - 50px);
		flex: 1 1 auto;
	}
	.up_contain > .lastpost {
		display: block;
		width: 100%;
		padding: 4px 10px;
		border-top: 2px solid #f0f0f0;
		min-height: 0;
	}
	.up_contain > .lastpost:empty {
		display: none;
	}
	.up_contain .lastpost p {
		margin: 0;
	}
	.up_contain .lastpost br {
		display: none;
	}
	.up_contain .lastpost .lastpost_time::before {
		content: " - ";
	}
	#posting_icons .mark_read {
		float: none;
		margin-top: 8px;
	}

	/* Message index: subject only, like the default theme does on phones. */
	#topic_container .board_icon,
	#topic_container .lastpost,
	#topic_header .board_icon,
	#topic_header .lastpost {
		display: none;
	}
	#topic_container .info,
	#topic_header .info {
		border-left: none;
		border-right: none;
		width: auto;
		flex: 1 1 auto;
	}
	dl#ic_recentposts {
		grid-template-columns: 1fr;
	}
	dl#ic_recentposts dd {
		text-align: left;
		font-size: 12px;
	}

	/* Footer */
	#footer-content {
		padding: 20px;
		text-align: center;
	}
	#footer .backtop {
		position: static;
		display: inline-block;
		margin-bottom: 10px;
	}
}

@media (max-width: 560px) {
	/* The 2.1 mobile main menu: Horizon colours for the popup. */
	#navbar {
		padding: 6px 8px;
		min-height: 0;
	}
	a.mobile_user_menu {
		margin: 0;
		color: #fff;
	}
	a.mobile_user_menu .menu_icon {
		filter: brightness(0) invert(1);
	}
	#main_menu .popup_window {
		background: #2a2a2a;
		border: none;
		border-top: 2px solid #f86c01;
	}
	#mobile_user_menu .popup_heading {
		color: #fff;
	}
	#topnav {
		display: block;
	}
	#topnav > li {
		margin: 0;
		padding: 0;
	}
	#topnav > li > a,
	#topnav > li:hover > a,
	#topnav > li > a.active {
		border-radius: 0;
	}
	#topnav > li > a > i,
	#topnav > li > a > img,
	#topnav > li > a > svg {
		display: inline-block;
		margin-right: 4px;
	}
	#topnav > li > a > .main_icons {
		display: inline-block;
		filter: brightness(0) invert(1);
		opacity: 0.8;
	}
	#topnav > li > a.active::before {
		display: none;
	}
	#topnav li ul,
	#topnav li li:hover ul,
	#topnav li li ul,
	#topnav li:hover ul ul,
	#topnav li ul ul {
		position: relative;
		left: 0 !important;
		top: 0 !important;
		border-radius: 0;
		padding: 0;
		box-shadow: none;
		min-width: 0;
	}
	#topnav li li {
		width: 100%;
	}
	#topnav li li a {
		color: #e5e5e5;
	}
}

@media (max-width: 480px) {
	h1.forumtitle a,
	h1.forumtitle {
		max-width: none;
		margin: 0;
	}
	h1.forumtitle a {
		max-width: 100%;
		padding: 0;
		margin: 0 auto;
	}
	#account #top_info {
		gap: 0 6px;
	}
	#account li.btn-login > a,
	#account li.btn-logout > a,
	#account li.btn-signup > a {
		font-size: 12px;
		padding: 0 10px 0 30px;
	}
	#account #top_info .top_menu {
		position: fixed;
		left: 2vw;
		right: 2vw;
		top: 48px;
		width: auto;
		max-width: none;
		min-width: 0;
	}
	#quicknav li a {
		font-size: 12px;
		padding: 0 8px;
	}
}