/*
    Theme Name: IfDS mobile
    Description: Child theme of "Theme van Devstrat.org". Adds a layout for phones and narrow windows. The desktop look stays unchanged.
    Template: ifds
    Version: 1.0
*/

/* ---------- Narrow windows and tablets (up to 1040 px) ---------- */
/* The page uses the full window width instead of a fixed 1000 px. */
@media screen and (max-width: 1040px) {
	.world_right { display: none; }
	.container {
		position: relative;
		left: 0;
		margin-left: 0;
		width: 100%;
		background-image: none;
	}
	.content {
		width: auto;
		margin-right: 20px;
		overflow: visible;
	}
	.content_text img { max-width: 100%; height: auto; }
	/* Blue lines under the logo and above the footer: scaled to the screen width */
	.header, .footer { background-size: 100% 8px; }
	.upbutton { display: none; }
}

/* ---------- Phones (up to 700 px) ---------- */
@media screen and (max-width: 700px) {
	body { background-color: #FFF; }

	/* Logo */
	.header {
		height: auto;
		margin-top: 0;
		padding: 15px 15px 22px 15px;
		text-align: center;
	}
	.header img { max-width: 100%; height: auto; }

	/* Main menu: from a left column to a wrapped row under the logo */
	.sidebar {
		position: static;
		width: auto;
		margin: 12px 15px 0 15px;
	}
	.pagenav ul { text-align: center; }
	.pagenav ul li {
		display: inline-block;
		font-size: 16px;
		margin: 0 9px;
	}
	.pagenav ul li ul { display: none; }

	/* Text column */
	.content {
		margin: 10px 15px;
		width: auto;
		min-height: 0;
		padding-right: 0;
	}
	h1 { font-size: 24px; }
	.content_text { font-size: 15px; line-height: 165%; }

	/* Sub-menus on "What we do" and the team pages */
	.hor_menu li, .hor_menu2 li {
		display: inline-block;
		margin: 0 14px 4px 0;
	}
	.hor_menu li:first-child { margin-left: 0; }

	/* Team photos: centered above the text instead of floating right */
	.photoleft, .photoright {
		float: none;
		margin: 10px 0;
		text-align: center;
	}

	/* Paragraphs with fixed widths in the page content */
	.content_text p[style*="float"] {
		float: none !important;
		width: auto !important;
	}

	/* Welcome page: publication covers two per row */
	.content_text div[style*="inline-block"] {
		width: 45% !important;
		margin: 0 2% 20px 2% !important;
	}
	.content_text div[style*="inline-block"] { font-size: 13px !important; }
	.content_text div[style*="inline-block"] img {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 200 / 283;
		object-fit: cover;
	}

	/* Footer */
	.footer {
		height: auto;
		margin-bottom: 15px;
		padding: 0 15px 10px 15px;
		text-align: center;
	}
}

/* ---------- Aid efficiency page on screens up to 960 px ---------- */
/* This page has its own template with a notebook picture that needs about 960 px. */
@media screen and (max-width: 960px) {
	.AE_world, .AE_background {
		position: static;
		height: auto;
		background-image: none;
	}
	.AE_content {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		padding: 1px 0;
		background-image: none;
		background-color: #FFF;
	}
	.AE_text {
		top: 0;
		margin: 20px 15px;
		font-size: 15px;
	}
	.AE_text:before {
		content: "Tools and Methods for Evaluating the Efficiency of Development Interventions";
		display: block;
		margin-bottom: 12px;
		color: #4F81BC;
		font-size: 20px;
		font-weight: bold;
		line-height: 130%;
	}
	.AE_text p[style*="float"] {
		float: none !important;
		width: auto !important;
		margin-top: 15px;
	}
}


/* ---------- Welcome page: full welcome sentence as heading ---------- */
/* Hides the theme's short "Welcome" heading. The page content brings its own heading. */
#post-10 > h1 { display: none; }

/* ---------- What we want: tap a yellow card to enlarge it (phones only) ---------- */
.vc-hit, .vc-big, .vc-hint { display: none; }
@media screen and (max-width: 700px) {
	.vision-wrap { position: relative; display: inline-block; max-width: 100%; }
	.vision-wrap img { display: block; }
	.vc-hit { display: block; position: absolute; top: 0; height: 100%; }
	.vc-values { left: 0; width: 34%; }
	.vc-mission { left: 34%; width: 38%; }
	.vc-vision { left: 72%; width: 28%; }
	.vc-hint { display: block; margin-top: 6px; font-size: 13px; color: #666; text-align: center; }
	.vc-big:target {
		display: flex;
		position: fixed;
		top: 0; right: 0; bottom: 0; left: 0;
		z-index: 100;
		align-items: center;
		justify-content: center;
		padding: 20px;
	}
	.vc-bg {
		position: absolute;
		top: 0; right: 0; bottom: 0; left: 0;
		background-color: rgba(0, 0, 0, 0.55);
	}
	.vc-card {
		position: relative;
		display: block;
		width: 100%;
		max-width: 340px;
		padding: 44px 22px 28px 22px;
		background: linear-gradient(#FFFF9E, #FFFFC9);
		box-shadow: 3px 4px 12px rgba(0, 0, 0, 0.35);
		text-align: center;
		font-size: 17px;
		line-height: 160%;
		color: #333;
	}
	.vc-card strong {
		display: block;
		margin-bottom: 14px;
		font-size: 22px;
		color: #3E4A9A;
	}
	.vc-close {
		position: absolute;
		top: 10px;
		right: 14px;
		font-size: 14px;
	}
}