/*
 * LeetPress GuessWhosBack - Responsive CSS
 * Version: 10.0.0
 * Author: Nir Regev
 *
 * Scales the entire design proportionally on mobile - keeps exact v2 look, just smaller
 */

/* Prevent horizontal scrolling */
body {
	overflow-x: hidden;
}

/* Make all images scale */
img {
	max-width: 100%;
	height: auto;
}

/* On screens smaller than 960px, scale containers to fit */
@media only screen and (max-width: 960px) {
	/* Scale the fixed 960px header to fit screen */
	#header {
		width: 100%;
		max-width: 960px;
	}

	/* Scale the fixed 920px main wrapper to fit screen */
	#main-wrapper {
		width: 95%;
		max-width: 920px;
	}

	/* Scale featured section */
	.featured-inner {
		width: 100%;
		max-width: 960px;
	}

	/* Scale footer */
	#footer,
	#footer-top,
	#footer-bottom {
		width: 95%;
		max-width: 960px;
	}
}

/* On very small screens, allow content to stack naturally */
@media only screen and (max-width: 768px) {
	/* Extend the black header background to fully cover all header content */
	#header-wrapper {
		height: auto !important;
		min-height: auto !important;
		padding: 20px 0 20px 0 !important;
		background: url(images/header-gradient-500-original-tone.png) center top repeat-x !important;
		background-color: #2f2f2f !important;
	}

	/* Make header flexible for reordering */
	#header {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* Caption - display FIRST (above logo) */
	#caption {
		position: relative;
		top: auto;
		left: auto;
		order: 1;
		margin: 10px 0 5px 0;
		text-align: center;
	}

	/* Logo - display SECOND (below caption) */
	#logo {
		position: relative;
		top: auto;
		left: auto;
		order: 2;
		margin: 5px 0 15px 0;
		text-align: center;
	}

	/* Header banner - display THIRD (below logo) */
	#header-banner {
		position: relative;
		top: auto;
		right: auto;
		order: 3;
		margin: 15px 0;
	}

	/* Navigation wrapper - display LAST */
	#navigation-wrapper {
		position: relative;
		top: auto;
		left: auto;
		order: 4;
		width: 100%;
		margin: 15px 0 0 0;
	}

	/* Let main and sidebar stack on mobile */
	#main {
		width: 100%;
		float: none;
		margin-right: 0;
	}

	#sidebar {
		width: 100%;
		float: none;
		margin-top: 20px;
	}

	/* Let footer widgets stack */
	.footer-widget {
		width: 100%;
		float: none;
		margin-bottom: 20px;
	}

	/* Fix footer-bottom copyright text wrapping on mobile */
	#footer-bottom-wrapper {
		height: auto !important;
		min-height: 38px;
		padding: 11px 0 30px 0; /* Increased bottom padding from 12px to 30px for mobile scrolling */
	}

	#footer-bottom {
		padding-top: 0;
		padding-bottom: 10px; /* Additional padding below copyright text */
	}

	.footer-bottom-left,
	.footer-bottom-right {
		font-size: 11px;
		line-height: 1.4;
		color: #ffffff !important;
		padding-bottom: 5px; /* Extra padding to prevent cut-off when scrolling */
	}
}