/*
	 * Theme Name: Casa Brasil
	 *
	 * assets/css/footer.css | Footer (Tag #footer definida em assets/css/main.css)
	 *
	 *		[30%|content|grow], 8.5% gap
	 *		
	 */


	#footer {
		position: relative;
		display: flex;
		padding: clamp(30px, 2.31vw, 35px) var(--main-internal-margin);
		background-color: var(--main-fg-color);
		color: var(--main-internal-color);
	}

	#footer a {
		text-decoration-color: #97CD04;
	}

	#footer .menu-container {
		font-size: 0.7rem;
		line-height: 0.7rem;
		letter-spacing: 7%;
	}

	#footer .menu-container li {
		display: block;
	}

	#footer .menu-container ul {
		display: flex;
	}
	
	#footer .menu-container .menu {
		flex-direction: column;
		row-gap: 0.7rem;
	}


	#footer .menu-container .sub-menu {
		flex-direction: column;
		font-size: 0.5rem;
		line-height: 0.5rem;
	}

	#footer .menu-container .sub-menu > li {
		margin-top: 0.3rem;
	}

	#footer .menu-container a {
		text-decoration: none;
		font-weight: 300;
	}

	#footer .menu > li > a {
		text-transform: uppercase;
	}

	#footer .back-button {
		display: none;
		position: absolute;
		right: 55px;
		font-family: var(--main-extended-font);
		font-weight: 600;
		font-size: 1rem;
		line-height: 1.2rem;
		text-transform: uppercase;		
		color: var(--main-fg-color);
	}

	html:not([data-scroll='0']) #footer .back-button {
  		display: block;		
	}

	#footer .main {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		column-gap: 8.5%;
	}

	#footer .main > div {
		flex-grow: 1;
		display: flex;
		
	}

	#footer .main > div:first-child {
		height: clamp(213px, 16.73vw, 253px);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 30%;
		row-gap: 1.5rem;
	}

	#footer .main > div:not(last-child) {
		flex-grow: 0;
		flex-shrink: 0;
	}

	#footer .main > div:last-child {
		flex-shrink: 1;
		height: clamp(213px, 16.73vw, 253px);
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	#footer .localizacao-horario {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		column-gap: 3vw;
		font-family: var(--main-normal-font);
		font-weight: 300;
		font-size: 0.7rem;
		line-height: 130%;
		letter-spacing: 2%;
	}

	#footer .icon-bar {
		margin-top: 0.3rem;
		font-size: 1.2rem;
	}

	#footer .endereco {
		display: flex;
		flex-direction: row;
		column-gap: 1vw;
		justify-content: flex-start;
		align-items: flex-start;
	}

	#footer .endereco i {
		font-size: 1.8rem;
		color: var(--main-highlight-color-2);
	}
  
	#footer .mala-direta {
		display: flex;
		flex-direction: column;
	}

  	#footer .mala-direta .titulo {
  		font-family: 'Zetkin Wide', sans-serif;
		font-weight: 500;
		font-size: 0.7rem;
		line-height: 1rem;
		letter-spacing: 2%;
		color: #ff8a00;
  	}

  	#footer .formulario {
  		display: flex;
  		
  		flex-direction: row;
  		justify-content: space-between;
  		row-gap: 0.3rem;
		margin-bottom: 0.3rem;
  	}

  	#footer .formulario > div {
  		width: calc(50% - 0.5rem);
  	}

  	#footer .formulario input {
  		font-weight: 300;
  		color: var(--main-internal-color);
  		width: 100%;
  		background: transparent;
  		border-bottom: 1px solid var(--main-internal-color);
  		outline: none;
  		font-size: 0.7rem;
  		padding: 0px 3px;
  	}

  	#footer .button-form-submit {
  		padding-top: 0.1rem;
  		height: 1.8rem;
  		font-weight: 300;
  		color: var(--main-fg-color);
  		background-color: var(--main-highlight-color-2);
  		font-size: 0.6rem;
  		line-height: 0.6rem;
  		margin-bottom: 0.1rem;
  	}

  	#footer .lgpd {
  		margin-top: 5px;
  		font-family: var(--main-narrow-font);
		font-weight: 300;
		font-size: 0.5rem;
		line-height: 130%;
		letter-spacing: 4%;
  	}

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

	#footer {
		flex-direction: column;
		padding: clamp(18px, 8.24vw, 36px) var(--main-internal-margin);
	}

	#footer .back-button {
		display: none;
		position: absolute;
		right: 55px;
		font-family: var(--main-extended-font);
		font-weight: 600;
		font-size: 1rem;
		line-height: 1.2rem;
		text-transform: uppercase;		
		color: var(--main-fg-color);
	}

	#footer .main {
		flex-direction: column;
		align-items: flex-start;
		column-gap: initial;
		row-gap: 2rem;
	}

	#footer .main > div:first-child {
		height: initial;
		justify-content: flex-start;
		width: 100%;
	}

	#footer .main > div:last-child {
		flex-shrink: 0;
		height: initial;
	}

	#footer .localizacao-horario {
		flex-direction: column;
		justify-content: flex-start;
		column-gap: initial;
		row-gap: 1rem;
	}

  	#footer .formulario {
  		flex-direction: column;
  		justify-content: flex-start;
  	}

  	#footer .formulario > div {
  		width: 100%;
  	}

}