/*
Theme Name: La Plata Mágica - Twenty Sixteen Child
Template: twentysixteen
Author: AEG
Description: Tema hijo de Twenty Sixteen para La Plata Mágica: cabecera con logo y pin fundacional, menú lateral y fondos propios.
Version: 3.0.0
Text Domain: laplatamagica
*/

/* Estructura general
   ========================================================================== */

html,
body {
	margin: 0;
	background: #ffffff;
	background-image: url("images/background_body.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center center;
	background-size: cover;
}

.site,
.site-inner {
	max-width: 1366px;
	margin: 0 auto;
}

.content-area { /* #primary */
	margin: 0;
	padding: 20px 15px;
}

.sidebar { /* #secondary */
	margin: 0;
	padding: 20px 15px;
}

#lpm-menu-sidebar {
	display: none;
}

/* Menú (versión móvil, arriba)
   ========================================================================== */

.menu-toggle {
	background-color: #000000;
	border: none;
	color: #ffffff;
	margin: 0;
	padding: 0 20px;
	height: 40px;
	width: 100%;
	text-align: left;
}

.menu-toggle:hover,
.menu-toggle:focus,
.menu-toggle.toggled-on,
.menu-toggle.toggled-on:hover,
.menu-toggle.toggled-on:focus {
	background-color: #000000;
	color: #ffffff;
}

.menu-toggle:focus {
	outline: 0;
}

.menu-toggle.toggled-on:focus {
	outline: thin dotted;
}

.site-header-menu {
	background-color: #f0f0f0;
	margin: 0;
}

.main-navigation a {
	color: #000000;
	line-height: 45px;
	padding: 0 1em;
}

.main-navigation ul ul {
	background-color: #ffffff;
	margin-left: 1em;
}

/* Cabecera, contenido y pie
   ========================================================================== */

#masthead {
	display: block;
}

#header-site {
	width: 100%;
	height: 240px;
	padding: 20px 0;
	background-image: url("images/background_header.webp");
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center 0;
	background-size: cover;
}

#header-site-logo {
	width: 100%;
	height: 100%;
	background-image: url("images/logo_laplatamagica.webp");
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: top center;
	background-size: 200px auto;
}

#header-site-pin {
	width: 100%;
	height: 100%;
	background-image: url("images/pin_fundacional.webp");
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: bottom center;
	background-size: 80px auto;
}

#content,
#columns {
	display: block;
}

#primary {
	display: block;
	background-image: url("images/background_main.webp");
}

#secondary {
	display: block;
	background-image: url("images/background_sidebar.webp");
}

#search_ajax_bar1,
#search_ajax_bar2 {
	background-color: #000000;
	padding-left: 0;
}

#colophon {
	width: 100%;
	min-height: 240px;
	background-image: url("images/background-footer.jpg");
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center 0;
	background-size: cover;
}

#copyright {
	color: #ffffff;
	background-color: #000000;
	text-align: center;
}

#copyright .copyright-text {
	display: block;
}

#copyright .copyright-slash {
	display: none;
}

/* Marcos de los bloques: borde negro grueso con sombra interior */
#masthead,
#header-site,
#search_ajax_bar1,
#primary,
#secondary,
#search_ajax_bar2,
#colophon {
	border-top: 1px solid #000;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
}

#copyright {
	border: 1px solid #000;
}

#masthead,
#header-site,
#content,
#columns,
#primary,
#secondary,
#search_ajax_bar1,
#search_ajax_bar2,
#colophon,
#copyright {
	border-width: 10px;
	box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, 0.75);
}

#page {
	box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.75);
}

/* Botón "Oír el texto de la página" (ResponsiveVoice) */
.responsivevoice-button {
	font-size: .9rem;
	margin-bottom: 20px;
	border-radius: 20px;
}

/* Responsive
   ========================================================================== */

@media (min-width: 480px) {
	#header-site {
		height: 180px;
		padding: 0 30px;
	}
	#header-site-logo {
		background-position: left center;
		background-size: 200px auto;
	}
	#header-site-pin {
		background-position: right center;
		background-size: 80px auto;
	}
	#copyright .copyright-text,
	#copyright .copyright-slash {
		display: inline;
	}
}

@media screen and (min-width: 992px) {
	#header-site {
		height: 300px;
		padding: 25px;
	}
	#header-site-logo {
		background-position: center left;
		background-size: 350px auto;
	}
	#header-site-pin {
		background-position: center right;
		background-size: 150px auto;
	}
	#search_ajax_bar1,
	#search_ajax_bar2 {
		padding-left: 50%;
	}
}

@media screen and (min-width: 1200px) {
	#header-site {
		height: 400px;
		padding: 30px 50px 30px 30px;
	}
	#header-site-logo {
		background-size: 400px auto;
	}
	#header-site-pin {
		background-size: 200px auto;
	}
}

@media screen and (min-width: 44.375em) {
	body:not(.custom-background-image):before,
	body:not(.custom-background-image):after {
		content: "";
		display: none;
	}

	.entry-header,
	.post-thumbnail,
	.entry-content,
	.entry-summary,
	.entry-footer,
	.comments-area,
	.image-navigation,
	.post-navigation,
	.page-header,
	.page-content,
	.content-bottom-widgets {
		margin-right: 7.6923%;
	}
}

@media screen and (min-width: 56.875em) {
	.content-area { /* #primary */
		float: none;
		margin: 0;
		padding: 40px 30px;
		width: 75%;
	}
	.sidebar { /* #secondary */
		float: none;
		margin: 0;
		padding: 40px 30px;
		width: 25%;
	}

	/* Menú lateral (versión escritorio) */
	#lpm-menu-sidebar,
	#lpm-menu-sidebar ul {
		display: block;
		margin-left: 0;
	}
	#lpm-menu-sidebar li {
		list-style-type: none;
		list-style-position: inside;
	}
	#lpm-menu-sidebar li a {
		font-family: 'Oswald', sans-serif;
		font-size: 20px;
		display: block;
		color: #000000;
		background-color: #ffffff;
		padding: 3px 6px;
		margin-bottom: 3px;
	}
	#lpm-menu-sidebar li ul li a {
		border-left: 6px solid #ffffff;
		background-color: rgba(255, 255, 255, 0.5);
	}

	#masthead {
		display: none;
	}
	#content { display: table; width: 100%; }
	#columns { display: table-row; width: 100%; }
	#primary { display: table-cell; width: 75%; vertical-align: top; }
	#secondary { display: table-cell; width: 25%; vertical-align: top; border-left: none; }

	.entry-header,
	.post-thumbnail,
	.entry-content,
	.entry-summary,
	.entry-footer,
	.comments-area,
	.image-navigation,
	.post-navigation,
	.page-header,
	.page-content,
	.content-bottom-widgets {
		margin-left: 7.6923%;
		margin-right: 7.6923%;
	}
}