/*-------------------------------------------------------------------------
 * responsive.css
 * Ajustes de responsividade para o tema IdHera (origem: layout 100% fixo
 * em pixels, sem nenhuma media query). Este arquivo é carregado DEPOIS de
 * style.css e só sobrescreve o necessário para telas menores.
 *
 * Não editar style.css / style.scss para isso - manter tudo aqui, isolado.
 *-----------------------------------------------------------------------*/

/* Imagens nunca devem estourar o container, em qualquer largura de tela */
img { max-width: 100%; height: auto; }


/*=========================================================================
  TABLET (até 1024px)
=========================================================================*/
@media screen and (max-width: 1024px) {

	*, *::before, *::after { box-sizing: border-box; }

	.wrapper {
		width: 94%;
		max-width: 940px;
		padding: 0;
	}

	/* Camadas puramente decorativas (sombra/fundo infinito) baseadas em
	   offsets fixos de 960px - não reflow, então escondemos */
	#main .bg-menu-full,
	#main .bg-content-full {
		display: none;
	}

	#main-header {
		height: auto;
		padding: 10px 0;
	}
	#main-header .horario-atendimento {
		float: none;
		width: 100%;
		height: auto;
		line-height: 1.4;
		margin: 0 0 10px;
		text-align: center;
	}
	#main-header .horario-atendimento b {
		float: none;
		display: inline-block;
		margin: 0 5px 0 0;
		top: 0;
	}
	#main-header .search-bar {
		float: none;
		width: 100%;
		margin: 0;
	}
	#main-header .search-bar form { float: none; width: 100%; }
	#main-header fieldset {
		float: none;
		width: 100%;
	}
	#main-header fieldset input[type="text"] {
		width: 80%;
	}

	/* Sidebar / menu principal */
	#main-aside {
		float: none;
		width: 100%;
		margin-top: 0;
		padding-bottom: 20px;
	}
	#main-aside h1 a {
		float: none;
		left: 0;
		margin: 0 auto;
		position: relative;
	}
	#main-nav,
	#main-aside ul { width: 100%; }
	#main-aside li {
		float: none;
		width: 100%;
		padding: 0 15px;
	}
	#main-aside .depoimento { width: auto; }
	#main-aside .shadow-aside { display: none; }

	/* Conteúdo principal */
	#content { min-height: 0; }
	#main-content,
	article#main-content {
		float: none;
		width: 100%;
		padding: 20px;
	}
	#main-content > header h1 { font-size: 3em; }

	/* Rodapé */
	#main-footer {
		position: static;
		height: auto;
	}
	#main-footer .bg1 { height: auto; padding-top: 20px; padding-bottom: 20px; }
	#main-footer address,
	#main-footer .dev {
		float: none;
		width: 100%;
		padding-left: 0;
	}
	#main-footer .building { display: none; }
	.home #main-footer address,
	.home #main-footer .dev { padding-left: 0; }

	/* Home */
	.chamada-home { position: relative; }
	.chamada-home .building-home {
		float: none;
		position: static;
		top: 0;
		text-align: center;
		margin: 20px 0;
	}
	.home #main-aside { box-shadow: none; }
	.info-home { height: auto; padding: 20px 0; }
	.info-home .post-blog,
	.info-home .video,
	.info-home .newsletter {
		float: none;
		width: 100% !important;
		height: auto;
		margin: 0 0 25px;
		padding: 0;
	}
	.info-home .newsletter .mensagem { position: static; margin-top: 10px; }

	/* Serviços presentes (carousel) */
	.servicos-presentes li {
		float: left;
		width: 45%;
		margin: 0 2.5% 20px;
	}
	.servicos-presentes li a { width: 100%; }
	.jcarousel-clip { width: 100% !important; margin: 0 30px; }

	/* Depoimentos (home) */
	.depoimentos blockquote {
		float: none;
		width: 100%;
		margin: 0 0 20px;
	}

	/* Listagens em 2 colunas (procedimentos, doenças, pergunte ao doutor) */
	.box-2-columns,
	.box1, .box2 {
		float: none !important;
		width: 100% !important;
	}
	.box1 ul, .box2 ul { width: 100% !important; }

	/* Lista de médicos (corpo clínico) */
	.doctors-list li { text-align: center; }
	.doctors-list figure {
		float: none;
		display: inline-block;
		margin: 0 0 15px;
	}
	.doctors-list h2,
	.doctors-list .doctor-info,
	.doctors-list p { float: none; width: 100% !important; }

	/* Detalhe do médico */
	.page-corpo-clinico-detalhes .hentry figure {
		float: none;
		display: block;
		margin: 0 auto 20px;
	}
	.page-corpo-clinico-detalhes .doctor-info { float: none; width: 100%; }

	/* Estrutura (seções alternadas com foto) */
	.page-estrutura #main-content section figure,
	.page-estrutura #main-content section .hentry {
		float: none;
		width: 100% !important;
		margin: 0 0 15px;
	}
	.page-estrutura #main-content .odd,
	.page-estrutura #main-content .odd figure,
	.page-estrutura #main-content .odd .hentry { text-align: left; float: none; }
	.page-estrutura #main-content section ul { position: static; margin-top: 15px; }

	/* Procedimento detalhe */
	.page-procedimentos-detalhes .procedimento figure {
		float: none;
		display: block;
		margin: 0 auto 15px;
	}

	/* Blog / Mídia (listagem) */
	.page-blog #main-content section figure,
	.page-midia #main-content section figure {
		float: none;
		display: block;
		margin: 0 auto 15px;
	}
	.page-blog #main-content .hentry,
	.page-midia #main-content .hentry { float: none; width: 100%; }

	/* Eventos (listagem) */
	.page-eventos .list-eventos a {
		float: left;
		width: 45%;
		margin: 0 2.5% 20px !important;
	}

	/* Slide de mídia (eventos/mídia/blog detalhe) */
	.page-single-post .midia,
	.page-eventos-detalhes .midia,
	.page-midia-detalhes .midia,
	.page-single-post .wrap-midia,
	.page-eventos-detalhes .wrap-midia,
	.page-midia-detalhes .wrap-midia {
		width: 100%;
	}
	.page-single-post .midia img,
	.page-eventos-detalhes .midia img,
	.page-midia-detalhes .midia img {
		position: static;
		width: 100%;
	}

	/* Fale conosco - blocos de contato */
	.page-fale-conosco .inf-contato { height: auto; }
	.page-fale-conosco .inf-contato > div {
		float: none;
		width: 100% !important;
		height: auto;
		margin: 0 0 20px;
	}

	/* Formulários (fale conosco, agende consulta, depoimento, fale c/ médico) */
	.form-contato label,
	.form-consulta label,
	.form-depoimento label,
	.form-fale-com-medico label {
		float: none;
		width: 100%;
		text-align: left;
		height: auto;
		margin: 0 0 3px;
	}
	.form-contato input[type="text"],
	.form-contato textarea,
	.form-contato select,
	.form-contato .selector,
	.form-consulta input[type="text"],
	.form-consulta textarea,
	.form-consulta select,
	.form-consulta .selector,
	.form-depoimento input[type="text"],
	.form-depoimento textarea,
	.form-depoimento select,
	.form-depoimento .selector,
	.form-fale-com-medico input[type="text"],
	.form-fale-com-medico textarea,
	.form-fale-com-medico select,
	.form-fale-com-medico .selector {
		width: 100% !important;
	}
	.form-consulta button,
	.form-contato button {
		margin-left: 0 !important;
	}
	.form-depoimento,
	.form-fale-com-medico { width: 100%; }
	.form-depoimento fieldset,
	.form-fale-com-medico fieldset { padding: 0 15px; }
}


/*=========================================================================
  MOBILE (até 640px)
=========================================================================*/
@media screen and (max-width: 640px) {

	.wrapper { width: 92%; }

	/* Botão hambúrguer (visível só no mobile) */
	#mobile-menu-toggle {
		display: block;
		width: 100%;
		background: #fff;
		border: 0;
		border-bottom: 1px solid #DFDBD1;
		cursor: pointer;
		padding: 12px 15px;
		position: relative;
		text-align: left;
	}
	#mobile-menu-toggle span {
		display: block;
		width: 22px;
		height: 2px;
		background: #5F5959;
		margin: 4px 0;
	}
	#mobile-menu-toggle em {
		position: absolute;
		left: 45px;
		top: 13px;
		font-style: normal;
		font-size: 1.3em;
		color: #5F5959;
	}

	#main-nav { display: none; }
	#main-nav.is-open { display: block; }

	#main-header .horario-atendimento { font-size: 1.1em; }
	#main-header fieldset input[type="text"] { width: 70%; }

	.info-home .newsletter form,
	.info-home .newsletter fieldset { width: 100%; }
	.info-home .newsletter input[type="text"] {
		width: 60% !important;
		margin: 45px 0 0 5%;
	}

	.servicos-presentes li,
	.page-eventos .list-eventos a {
		float: none;
		width: 100% !important;
		margin: 0 0 20px !important;
	}

	#main-content > header h1 { font-size: 2.2em; }
}


/* Botão hambúrguer só existe visualmente abaixo de 640px;
   acima disso o menu volta a aparecer sempre */
#mobile-menu-toggle { display: none; }
@media screen and (min-width: 641px) {
	#main-nav { display: block !important; }
}