/*
	 * Theme Name: Casa Brasil
	 *
	 * assets/css/main.css | Definições de globais e de estrutura
	 *
	 */

	/* Variables */
	:root {

		/* Colors */
  		--main-bg-color: #ffffff;
  		--main-internal-color: #fff9ea;
  		--main-border-color: #af9060;
  		--main-fg-color: #283f20;
  		--main-decoration-color: #944bdd;
  		--main-disabled-color: #a9b2a6;
  		--main-highlight-color-1: #8791ff;
  		--main-highlight-color-2: #97cd04;
  		--main-padding-color: var(--main-internal-color);

  		/* Fonts */
  		--main-normal-font: 'Zetkin Normal', sans-serif;
  		--main-wide-font: 'Zetkin Wide', sans-serif;
  		--main-extended-font: 'Zetkin Extended', sans-serif;
  		--main-narrow-font: 'Zetkin Narrow', sans-serif;

  		/* Margin */
  		--main-internal-margin: clamp(60px, 4.62vw, 70px);
	}

	
	 /* Elements */
	html, body {
		margin: 0px;
		padding: 0px;
		font-family: var(--main-normal-font);
		font-weight: 400;
		font-size: clamp(17px, 1.32vw, 25px);
		line-height: 165%;
		color: var(--main-fg-color);
		background-color: var(--main-bg-color);
	  	scroll-behavior: smooth;
	}

	body {
		 overflow-y:scroll;
	}

	a {
		font-weight: 500;
		color: inherit;
	    text-decoration: underline;
		text-decoration-style: solid;
		text-decoration-thickness: 15%;
		text-decoration-skip-ink: auto;
		text-decoration-color: var(--main-decoration-color);
	}

	div, ul, li  {
		box-sizing: border-box;
	}

	nav {
		display: block;
	}

	h1 {
		font-family: var(--main-extended-font);
		font-weight: 600;
		font-size: 2.2rem;
	}

	h2 {
		font-family: var(--main-extended-font);
		font-weight: 600;
		font-size: 1.5rem;
	}

	h1, h2, h3, h4 {
		margin-block-start: 0.5em;
		margin-block-end: 0.5em;
		line-height: 130%;
	}

	h1:first-child, h2:first-child, h3:first-child, h4:first-child {
		margin-block-start: 0px;
	}

	h1:last-child, h2:last-child, h3:last-child, h4:last-child {
		margin-block-end: 0px;
	}

	p:has(img:last-child) {
		margin-bottom: 0px;
	} 

	p:has(img:last-child) + h6 {
		margin-top: 0px;
	}	

	h6 {
		font-weight: 300;
		line-height: 100%;
	}

	.image-filled img {
		object-fit: fill;
		width: 100% !important;
		height: 100% !important;
	}
 
	.image-cover img {
		object-fit: cover;
		width: 100% !important;
		height: 100% !important;
	}

	.image-contain img {
		object-fit: contain;
		height: 100% !important;
	}

	input, textarea, select, option {
		margin: 0px;
		padding: 0.8rem 0.8rem 0.6rem 0.8rem;
		box-sizing: border-box;
		font-family: var(--main-font-normal);
		font-weight: 400;
		font-size: 1rem;
		line-height: 165%;
		color: var(--main-fg-color);
		border: var(--main-fg-color);
		background-color: var(--main-bg-color);
	}

	select {
		padding:  0.8rem 0.8rem 0.6rem 0.8rem;
		-moz-appearance: none;
		-webkit-appearance: none;
		appearance: none;
		background-image: url('../img/el-dropdown.png');
		background-repeat: no-repeat, repeat;
		background-position: right .7em top 50%, 0 0;
		background-size: .65em auto, 100%;	
	}

	textarea {
		height: 160px;
		width: 100%;
		padding: 15px 20px;
	}

	option[value=""], ::placeholder, select.empty {
	  	color: var(--main-disabled-color);
	}

	/* Structure */
	.wrapper {
		width: 100%;
		max-width: 1920px;
		margin: auto;
		border-left: 19px solid var(--main-border-color);
		border-right: 19px solid var(--main-border-color);
	}

	#header {
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 20;
	}

	#header > .wrapper {
		height: clamp(95px, 7.27vw, 110px);
	}

	body.home #header > .wrapper {
		height: clamp(160px, 12.36vw, 187px);
	}

	#main {
		margin-top: clamp(95px, 7.27vw, 110px);
		min-height: calc(100vh - clamp(273px, 21.35vw, 323px) - clamp(95px, 7.27vw, 110px));
	}

	body.home #main {
		margin-top: clamp(160px, 12.23vw, 187px);
		min-height: calc(100vh - clamp(273px, 21.35vw, 323px) - clamp(160px, 12.23vw, 187px));
	}

	#footer {
		min-height: clamp(273px, 21.35vw, 323px);
	}

	/* General classes */
	.menu, .sub-menu {
		padding: 0px;
		margin: 0px;
		list-style: none;
	}

	.toggle-size {
		display: block;
	}

	[class^="toggle-size-"], [class*=" toggle-size-"] {
		display: none !important;
	}

	.clear {
		clear: both;
	}

	.button {
		text-align: center;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
    	text-decoration: none;
    	cursor: pointer;	
	}

	.button > div {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
	}

	.button a {
		text-decoration: none;
	}

	.button.prev {
		transform: scaleX(1);
	}

	.button.next {
		transform: scaleX(-1);
	}

	.button.rounded {
		border-radius: 24px;
	}

	.button.filled {
		background-color: var(--main-fg-color);
		color: var(--main-highlight-color-2);
	}
	.button.vertical {
		flex-direction: column;
	}

	.button.color {
		display: inline-flex;
		padding: 0.4rem 3rem 0.2rem 3rem;
		font-weight: 500;
		font-size: 0.6rem;
		letter-spacing: 3%;
		border: 1px solid var(--main-fg-color);
		border-radius: 1rem 1rem;
	}

	.button.link {
		display: inline-flex;
		padding: 0.4rem 1.5rem;
		font-size: 0.8rem;
		letter-spacing: 5%;
		border: 1px solid var(--main-fg-color);
		border-radius: 1.5rem 1.5rem;
		column-gap: 0.8rem;
	}

	.button.link a {
		font-weight: 400;
	}

	.button.link:hover {
		border-color: var(--main-highlight-color-2);
		background-color: var(--main-highlight-color-2);
	}

	.button.link:hover a {
		color: var(--main-fg-color);
	}

	.button.link > div:first-child {
		padding-top: 0.2rem;
	}

	.button.link.file-pdf > div:last-child > div {
		width: clamp(15px, 1.19vw, 23px);
		height: clamp(19px, 1.52vw, 29px);
		background-size: 100% 100%;
		background-image: url('../img/icon-pdf.svg');
	}

	.icon-bar {
		display: flex;
		flex-direction: row;
		column-gap: 0.5rem; 
	}

	.icon-bar a {
		text-decoration: none;
	}

	.message {
		display: inline-flex;
		flex-direction: row;
		border: 3px solid var(--main-border-color);
		border-radius: 10px;
		padding: 0.6rem 0.8rem;
		font-weight: 400;
		line-height: 140%;
		column-gap: 0.4rem;
		text-align: left;
	}

	.message.vertical {
		flex-direction: column;
		row-gap: 0.4rem;
		text-align: center;
	}

	.message.vertical > div:first-child {
		font-size: 2.2rem;
	}

	.message b {
		font-weight: 500;
	}

	.message > div {
		flex-grow: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.message > div:first-child {
		flex-grow: 0;
		font-size: 1.2rem;
	}

	.message > div:first-child > div {
		width: clamp(34px, 2.64vw, 51px);
		height: clamp(34px, 2.64vw, 51px);
		background-size: 100% 100%;
	}

	.message > div:last-child {
		margin-top: 0.2rem;
	}

	.message.attention {
		border-color: #f64a4a;
	}

	.message.attention > div:first-child > div {
		background-image: url('../img/icon-attention.png');
	}

	.message.bike {
		border-color: #97cd04;
	}

	.message.bike > div:first-child > div {
		background-image: url('../img/icon-bike.png');
	}

	.element.bike > div:first-child > div {
		background-image: url('../img/icon-bike.png');
	}


	.box {
		display: inline-flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border: 3px solid var(--main-border-color);
		border-radius: 0.6rem;
		font-size: 1rem;
		padding: 1.2rem 0.8rem 0.8rem 0.8rem;
		font-weight: 400;
		line-height: 140%;
	}

	.acessibilidade {
		display: flex;
		flex-direction: row;
		column-gap: 0.5rem;
	}

	.text-block img {
		width: 100%;
		height: auto;
	}

	/* Forms */
	.form-process {
	    visibility: hidden;
	    position: absolute;
	    left: 0; top: 0;
	    height:0; width:0;
	    border: none;
	}

	span[id^="form-message-"] {
		display: none;
	}

	.form-error {
		display: none;
	}

	/* Panel */
	.panel > div {
		position: relative; 
		overflow: hidden;
		width: 100%;
		height: 100%; 
		flex-grow: 1;
	}

	.panel-slide {
		position: absolute; 
		top: 0; 
		left: 0; 
		display: flex; 
		flex-direction: row; 
		height: 100%; 
		width: 100%;
		transition: left 500ms ease-in;
	}

	.panel-slide > div {
		flex-shrink: 0; 
		width: 100%; 
		height: 100%; 
	}

@media screen and (max-width: 1280px) {

 	html, body {
		overflow: auto;
		font-size: clamp(14px, 7.7vw, 23px); 
	}

	h1 {
		font-size: 1.5rem;
	}

	h2 {
		font-size: 1.2rem;
	}	

	.wrapper {
		max-width: 450px;
		min-width: 280px;
		border-left: 8px solid var(--main-border-color);
		border-right: 8px solid var(--main-border-color);
	}

	#header > .wrapper {
		height: clamp(49px, 17.47vw, 79px);
	}

	body.home #header > .wrapper {
		height: clamp(151px, 54.11vw, 244px);
	}

	#main {
		margin-top: clamp(49px, 17.47vw, 79px);
	}

	body.home #main {
		margin-top: clamp(151px, 54.11vw, 244px);
	}

	#footer {
		min-height: initial;
	}
	
	.toggle-size {
		display: none !important;
	}

	.toggle-size-mobile {
		display: block !important;
	}

	.button.color {
		width: 100%;
	}

	.button.link {
		padding: 0.4rem 1rem;
		font-size: 0.7rem;
		letter-spacing: 3%;
		border-radius: 1rem 1rem;
		column-gap: 0.7rem;
	}

	.message {
		width: 100%;
		flex-direction: column;
		row-gap: 0.4rem;
		font-size: 0.6rem;
	}

	.message > div:first-child {
		flex-grow: 1;
	}

	.message > div:last-child {
		text-align: center;
	}

	.message > div:last-child > div {
		width: 70%;
	}

	.box {
		width: 100%;	
	}

	br.br-mobile {
		display: none;
	}

	:root {

  		/* Margin */
  		--main-internal-margin: clamp(9px, 4.12vw, 18px);
	}

}