/*
 * Daily Post Mobile Enhancements
 * Every block is scoped to an option-specific body class.
 */

@media screen and (max-width: 767px) {
	.dpme-prevent-overflow #mvp-site,
	.dpme-prevent-overflow #mvp-site-wall,
	.dpme-prevent-overflow #mvp-site-main,
	.dpme-prevent-overflow #mvp-main-body-wrap,
	.dpme-prevent-overflow #mvp-home-widget-wrap {
		max-width: 100vw;
		overflow-x: hidden;
		overflow-x: clip;
	}

	.dpme-prevent-overflow .mvp-main-box,
	.dpme-prevent-overflow .mvp-widget-home,
	.dpme-prevent-overflow .mvp-widget-feat1-wrap,
	.dpme-prevent-overflow .mvp-widget-feat2-wrap,
	.dpme-prevent-overflow .mvp-widget-feat2-main,
	.dpme-prevent-overflow .mvp-widget-feat2-left,
	.dpme-prevent-overflow .mvp-widget-feat2-right,
	.dpme-prevent-overflow .mvp-widget-feat2-side {
		box-sizing: border-box;
		max-width: 100%;
		min-width: 0;
	}

	/*
	 * Keep the advert DOM stable. The first rules preserve the widget's natural
	 * main-then-sidebar flow; the main-column rules also support older Daily Post
	 * theme code that inserted the advert between the lead and supporting stories.
	 */
	.dpme-ad-after-supporting .mvp-widget-feat2-out {
		display: flex !important;
		flex-direction: column !important;
	}

	.dpme-ad-after-supporting .mvp-widget-feat2-in {
		float: none !important;
		order: 1 !important;
		width: 100% !important;
	}

	.dpme-ad-after-supporting .mvp-widget-feat2-main {
		display: flex !important;
		flex-direction: column !important;
	}

	.dpme-ad-after-supporting .mvp-widget-feat2-main > .mvp-widget-feat2-left {
		order: 1 !important;
	}

	.dpme-ad-after-supporting .mvp-widget-feat2-main > .mvp-widget-feat2-right {
		order: 2 !important;
	}

	.dpme-ad-after-supporting .mvp-widget-feat2-main > .mvp-widget-feat2-side-ad {
		float: none !important;
		margin: 24px 0 0 !important;
		order: 3 !important;
		overflow: visible !important;
		position: relative;
		width: 100% !important;
	}

	.dpme-ad-after-supporting .mvp-widget-feat2-side {
		display: flex !important;
		flex-direction: column !important;
		float: none !important;
		order: 2 !important;
		overflow: visible !important;
		width: 100% !important;
	}

	.dpme-ad-after-supporting .mvp-widget-feat2-side > .mvp-widget-feat2-side-ad {
		float: none !important;
		margin: 0 0 24px !important;
		min-height: 0;
		order: 1 !important;
		overflow: visible !important;
		position: relative;
		width: 100% !important;
	}

	.dpme-ad-after-supporting .mvp-widget-feat2-side > .mvp-widget-home-head {
		order: 2 !important;
	}

	.dpme-ad-after-supporting .mvp-widget-feat2-side > .mvp-widget-feat2-side-list {
		order: 3 !important;
	}

}

@media screen and (max-width: 479px) {
	.dpme-prevent-overflow .mvp-main-box {
		margin-left: 16px;
		margin-right: 16px;
		width: calc(100% - 32px);
	}

	.dpme-prevent-overflow #mvp-main-body-wrap {
		padding-top: 12px;
	}

	.dpme-prevent-overflow #mvp-home-widget-wrap {
		margin-bottom: 32px;
	}

	.dpme-prevent-overflow .mvp-widget-home {
		margin-top: 28px;
	}

	.dpme-prevent-overflow .mvp-widget-home:first-child {
		margin-top: 0;
	}

	.dpme-prevent-overflow h4.mvp-widget-home-title {
		margin-bottom: 16px;
	}

	.dpme-prevent-overflow span.mvp-widget-home-title {
		font-size: 1rem;
		padding: 7px 14px;
	}

	/* Compact lead story. */
	.dpme-compact-lead .mvp-widget-feat2-left-cont,
	.dpme-compact-lead .mvp-feat1-feat-wrap {
		border-radius: 3px;
		margin: 0;
		overflow: hidden;
		width: 100%;
	}

	.dpme-compact-lead .mvp-widget-feat2-left .mvp-feat1-feat-img,
	.dpme-compact-lead .mvp-feat1-left-wrap .mvp-feat1-feat-img {
		aspect-ratio: 4 / 3;
		height: auto;
		min-height: 0;
		width: 100%;
	}

	.dpme-compact-lead .mvp-widget-feat2-left .mvp-feat1-feat-img img,
	.dpme-compact-lead .mvp-feat1-left-wrap .mvp-feat1-feat-img img {
		height: 100%;
		inset: 0;
		margin: 0;
		min-width: 0;
		object-fit: cover;
		position: absolute;
		width: 100%;
	}

	.dpme-compact-lead .mvp-widget-feat2-left .mvp-feat1-feat-text,
	.dpme-compact-lead .mvp-feat1-left-wrap .mvp-feat1-feat-text {
		box-sizing: border-box;
		padding: 76px 16px 16px;
		width: 100%;
	}

	.dpme-compact-lead .mvp-widget-feat2-left .mvp-feat1-feat-text h2,
	.dpme-compact-lead .mvp-feat1-left-wrap .mvp-feat1-feat-text h2 {
		display: -webkit-box;
		font-size: clamp(1.75rem, 8vw, 2.15rem);
		line-height: 1.06;
		margin: 0;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		width: 100%;
	}

	.dpme-compact-lead .mvp-widget-feat2-left .mvp-feat1-feat-text p,
	.dpme-compact-lead .mvp-feat1-left-wrap .mvp-feat1-feat-text p {
		display: none !important;
	}

	.dpme-compact-lead .mvp-cat-date-wrap {
		margin-bottom: 7px;
	}

	.dpme-compact-lead span.mvp-cd-cat,
	.dpme-compact-lead span.mvp-cd-date {
		font-size: .72rem;
		line-height: 1.2;
	}

	/* Supporting stories become complete rows. */
	.dpme-supporting-rows .mvp-widget-feat2-right {
		margin-top: 16px;
	}

	.dpme-supporting-rows .mvp-widget-feat2-right-cont {
		align-items: center;
		border-bottom: 1px solid #e5e7eb;
		display: grid;
		gap: 12px;
		grid-template-columns: 104px minmax(0, 1fr);
		height: auto;
		margin: 0;
		padding: 0 0 14px;
		width: 100%;
	}

	.dpme-supporting-rows .mvp-widget-feat2-right a + a .mvp-widget-feat2-right-cont {
		padding-top: 14px;
	}

	.dpme-supporting-rows .mvp-widget-feat2-right-img {
		aspect-ratio: 4 / 3;
		float: none;
		margin: 0;
		max-height: none;
		overflow: hidden;
		width: 104px;
	}

	.dpme-supporting-rows .mvp-widget-feat2-right-img img {
		height: 100%;
		object-fit: cover;
		width: 100%;
	}

	.dpme-supporting-rows .mvp-widget-feat2-right-text {
		float: none;
		min-width: 0;
		padding: 0;
		width: 100%;
	}

	.dpme-supporting-rows .mvp-widget-feat2-right-text h2 {
		font-size: 1.05rem;
		line-height: 1.22;
	}

	/* Optional text-only supporting stories. */
	.dpme-hide-support-thumbnails .mvp-widget-feat2-right-cont {
		grid-template-columns: minmax(0, 1fr);
	}

	.dpme-hide-support-thumbnails .mvp-widget-feat2-right-img {
		display: none !important;
	}

	.dpme-hide-support-thumbnails .mvp-widget-feat2-right-text {
		float: none;
		min-width: 0;
		width: 100%;
	}

	/* Latest News rows. */
	.dpme-latest-rows .mvp-widget-feat2-side {
		border-top: 0;
		margin: 24px 0 0;
		padding-top: 0;
		width: 100%;
	}

	.dpme-latest-rows .mvp-widget-feat2-side-list .mvp-feat1-list-cont {
		border-bottom: 1px solid #edf0f2;
		margin: 0;
		padding: 12px 0;
		width: 100%;
	}

	.dpme-latest-rows .mvp-widget-feat2-side-list a:first-child .mvp-feat1-list-cont {
		padding-top: 0;
	}

	.dpme-latest-rows .mvp-widget-feat2-side-list .mvp-feat1-list-out {
		display: flex;
		float: none;
		gap: 12px;
		margin: 0;
		width: 100%;
	}

	.dpme-latest-rows .mvp-widget-feat2-side-list .mvp-feat1-list-img {
		aspect-ratio: 4 / 3;
		flex: 0 0 92px;
		float: none;
		margin: 0;
		overflow: hidden;
		width: 92px;
	}

	.dpme-latest-rows .mvp-widget-feat2-side-list .mvp-feat1-list-img img {
		height: 100%;
		object-fit: cover;
		width: 100%;
	}

	.dpme-latest-rows .mvp-widget-feat2-side-list .mvp-feat1-list-in {
		flex: 1 1 auto;
		margin: 0;
		min-width: 0;
	}

	.dpme-latest-rows .mvp-widget-feat2-side-list .mvp-feat1-list-text h2 {
		font-size: 1.05rem;
		line-height: 1.25;
	}

	.dpme-latest-rows .mvp-widget-feat2-side-list span.mvp-cd-cat,
	.dpme-latest-rows .mvp-widget-feat2-side-list span.mvp-cd-date {
		color: #656b73;
		font-size: .72rem;
	}

	/* One visual lead for Latest News; all following stories are text-only. */
	.dpme-feature-first-latest .mvp-widget-feat2-side-list .mvp-feat1-list > a:first-of-type .mvp-feat1-list-out {
		display: block;
		position: relative;
	}

	.dpme-feature-first-latest .mvp-widget-feat2-side-list .mvp-feat1-list > a:first-of-type .mvp-feat1-list-img {
		aspect-ratio: 16 / 9;
		float: none;
		margin: 0;
		max-height: none;
		overflow: hidden;
		width: 100%;
	}

	.dpme-feature-first-latest .mvp-widget-feat2-side-list .mvp-feat1-list > a:first-of-type .mvp-feat1-list-img img {
		height: 100%;
		object-fit: cover;
		width: 100%;
	}

	.dpme-feature-first-latest .mvp-widget-feat2-side-list .mvp-feat1-list > a:first-of-type .mvp-feat1-list-in {
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .62) 50%, rgba(0, 0, 0, .92) 100%);
		bottom: 0;
		box-sizing: border-box;
		left: 0;
		padding: 64px 16px 16px;
		position: absolute;
		width: 100%;
		z-index: 2;
	}

	.dpme-feature-first-latest .mvp-widget-feat2-side-list .mvp-feat1-list > a:first-of-type .mvp-feat1-list-text h2 {
		color: #fff;
		font-size: 1.3rem;
		line-height: 1.22;
	}

	.dpme-feature-first-latest .mvp-widget-feat2-side-list .mvp-feat1-list > a:first-of-type .mvp-cat-date-wrap span.mvp-cd-date {
		color: #e5e7eb;
	}

	.dpme-feature-first-latest .mvp-widget-feat2-side-list .mvp-feat1-list > a:first-of-type .mvp-cat-date-wrap span.mvp-cd-cat {
		color: #f50e0e;
	}

	.dpme-feature-first-latest .mvp-widget-feat2-side-list .mvp-feat1-list > a:not(:first-of-type) .mvp-feat1-list-img {
		display: none !important;
	}

	.dpme-feature-first-latest .mvp-widget-feat2-side-list .mvp-feat1-list > a:not(:first-of-type) .mvp-feat1-list-out {
		display: block;
	}

	.dpme-feature-first-latest .mvp-widget-feat2-side-list .mvp-feat1-list > a:not(:first-of-type) .mvp-feat1-list-in {
		width: 100%;
	}

	/* Apply the same one-image hierarchy to every Home Featured 1 widget. */
	.dpme-feature-first-feat1 .mvp_home_feat1_widget .mvp-widget-feat1-cont {
		margin: 0;
		width: 100%;
	}

	.dpme-feature-first-feat1 .mvp_home_feat1_widget .mvp-widget-feat1-top-story,
	.dpme-feature-first-feat1 .mvp_home_feat1_widget .mvp-widget-feat1-bot-story {
		border-bottom: 1px solid #edf0f2;
		float: none;
		height: auto;
		margin: 0;
		padding: 12px 0;
		width: 100%;
	}

	.dpme-feature-first-feat1 .mvp_home_feat1_widget .mvp-widget-feat1-top-img,
	.dpme-feature-first-feat1 .mvp_home_feat1_widget .mvp-widget-feat1-wrap:has(.mvp-widget-feat1-top-story) .mvp-widget-feat1-bot-img {
		display: none !important;
	}

	.dpme-feature-first-feat1 .mvp_home_feat1_widget .mvp-widget-feat1-top-text,
	.dpme-feature-first-feat1 .mvp_home_feat1_widget .mvp-widget-feat1-bot-text {
		background: none;
		box-sizing: border-box;
		float: none;
		margin: 0;
		padding: 0;
		position: static;
		width: 100%;
	}

	.dpme-feature-first-feat1 .mvp_home_feat1_widget .mvp-widget-feat1-top-text h2,
	.dpme-feature-first-feat1 .mvp_home_feat1_widget .mvp-widget-feat1-bot-text h2 {
		clear: both;
		color: #222;
		display: block;
		float: none;
		font-size: 1.05rem;
		line-height: 1.25;
		margin: 5px 0 0;
		width: 100%;
	}

	.dpme-feature-first-feat1 .mvp_home_feat1_widget .mvp-widget-feat1-top-text .mvp-cat-date-wrap,
	.dpme-feature-first-feat1 .mvp_home_feat1_widget .mvp-widget-feat1-bot-text .mvp-cat-date-wrap {
		display: block;
		float: none;
		line-height: 1;
		margin: 0;
		overflow: hidden;
		width: 100%;
	}

	.dpme-feature-first-feat1 .mvp_home_feat1_widget .mvp-widget-feat1-top-text .mvp-cat-date-wrap span,
	.dpme-feature-first-feat1 .mvp_home_feat1_widget .mvp-widget-feat1-bot-text .mvp-cat-date-wrap span {
		display: inline-block;
		float: none;
		line-height: 1.15;
		margin: 0;
	}

	.dpme-feature-first-feat1 .mvp_home_feat1_widget .mvp-widget-feat1-bot-text p {
		display: none;
	}

	.dpme-feature-first-feat1 .mvp_home_feat1_widget .mvp-widget-feat1-wrap > .mvp-widget-feat1-cont:first-of-type > a:first-of-type .mvp-widget-feat1-top-story {
		margin-bottom: 12px;
		padding: 0;
	}

	.dpme-feature-first-feat1 .mvp_home_feat1_widget .mvp-widget-feat1-wrap > .mvp-widget-feat1-cont:first-of-type > a:first-of-type .mvp-widget-feat1-top-img {
		aspect-ratio: 16 / 9;
		display: block !important;
		float: none;
		height: auto;
		margin: 0;
		overflow: hidden;
		width: 100%;
	}

	.dpme-feature-first-feat1 .mvp_home_feat1_widget .mvp-widget-feat1-wrap > .mvp-widget-feat1-cont:first-of-type > a:first-of-type .mvp-widget-feat1-top-img img {
		height: 100%;
		object-fit: cover;
		width: 100%;
	}

	.dpme-feature-first-feat1 .mvp_home_feat1_widget .mvp-widget-feat1-wrap > .mvp-widget-feat1-cont:first-of-type > a:first-of-type .mvp-widget-feat1-top-text {
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .62) 50%, rgba(0, 0, 0, .92) 100%);
		bottom: 0;
		left: 0;
		padding: 64px 16px 16px;
		position: absolute;
		width: 100%;
		z-index: 2;
	}

	.dpme-feature-first-feat1 .mvp_home_feat1_widget .mvp-widget-feat1-wrap > .mvp-widget-feat1-cont:first-of-type > a:first-of-type .mvp-widget-feat1-top-text h2 {
		color: #fff;
		font-size: 1.3rem;
		line-height: 1.22;
		margin-top: 5px;
	}

	/* A Small-only Featured 1 widget remains a thumbnail-and-headline list. */
	.dpme-feature-first-feat1 .mvp_home_feat1_widget .mvp-widget-feat1-wrap:not(:has(.mvp-widget-feat1-top-story)) .mvp-widget-feat1-bot-story {
		align-items: start;
		display: grid;
		gap: 14px;
		grid-template-columns: 116px minmax(0, 1fr);
	}

	.dpme-feature-first-feat1 .mvp_home_feat1_widget .mvp-widget-feat1-wrap:not(:has(.mvp-widget-feat1-top-story)) .mvp-widget-feat1-bot-img {
		aspect-ratio: 4 / 3;
		display: block !important;
		float: none;
		height: auto;
		margin: 0;
		max-width: none !important;
		overflow: hidden;
		width: 116px;
	}

	.dpme-feature-first-feat1 .mvp_home_feat1_widget .mvp-widget-feat1-wrap:not(:has(.mvp-widget-feat1-top-story)) .mvp-widget-feat1-bot-img img {
		height: 100%;
		object-fit: cover;
		width: 100%;
	}

	.dpme-feature-first-feat1 .mvp_home_feat1_widget .mvp-widget-feat1-wrap:not(:has(.mvp-widget-feat1-top-story)) .mvp-widget-feat1-bot-text h2 {
		font-size: 1rem;
		line-height: 1.22;
	}

	.dpme-feature-first-feat1 .mvp_home_feat1_widget:not(:has(.mvp-widget-feat1-top-story, .mvp-widget-feat1-bot-story)) {
		display: none !important;
	}

	.dpme-hide-feat1-dates .mvp_home_feat1_widget .mvp-cd-date,
	.dpme-hide-feat1-dates .mvp_home_feat1_widget time {
		display: none !important;
	}

	.dpme-latest-rows .mvp-widget-feat2-side-ad,
	.dpme-latest-rows .mvp_ad_widget {
		max-width: 100%;
		overflow: visible;
	}

	/* Keyboard focus for the controls enhanced by the plugin. */
	.dpme-accessible-controls [role="button"]:focus-visible,
	.dpme-accessible-controls a:focus-visible {
		outline: 3px solid #fff;
		outline-offset: -3px;
	}

	.dpme-accessible-controls .mvp-fly-but-click::after {
		content: "";
		inset: -12px -10px;
		position: absolute;
	}

	/* The compact Zox header gives this container zero width without an override. */
	.dpme-show-mobile-search #mvp-nav-small-wrap {
		position: relative;
	}

	.dpme-show-mobile-search #mvp-nav-small-right {
		height: 50px;
		margin: 0;
		position: absolute;
		right: 0;
		top: 0;
		width: 50px !important;
		z-index: 5;
	}

	.dpme-show-mobile-search #mvp-nav-small-right .mvp-nav-search-but {
		align-items: center;
		box-sizing: border-box;
		color: #fff !important;
		display: flex !important;
		font-size: 20px;
		height: 50px;
		justify-content: center;
		line-height: 50px;
		padding: 0;
		width: 50px !important;
	}
}