footer {
	position: relative;

	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 40px;

	padding: 50px 50px;

	background-color: var(--cor-fundo-sessao-escuro);
	color: white;
	font-weight: 300;

	.footer-container {
		display: flex;
		justify-content: space-evenly;
		gap: 50px;

		width: 100%;

		.logo-container {
			display: grid;
			grid-template-areas:
				"logo"
				"texto-logo"
				"redes-sociais"
				"mapa-criciuma"
				"horario-funcionamento";
			flex-direction: column;
			gap: 40px;

			width: max-content;
			height: min-content;
			width: 300px;

			a {
				grid-area: logo;

				.logo-criciuma {
					height: 100%;
					width: 100%;
					max-width: 250px;

					object-fit: contain;
				}
			}

			p {
				grid-area: texto-logo;
				font-size: 0.875rem;
				line-height: 1rem;
				margin: 0;
				width: 100%;
				max-width: 288px;
			}

			.redes-sociais {
				grid-area: redes-sociais;
				display: flex;
				gap: 20px;

				.icone-rede-social {
					transition: var(--delay-default);
					width: 2rem;
					fill: white;

					&:hover {
						fill: rgb(187, 187, 187);
					}
				}
			}

			.mapa-criciuma {
				grid-area: mapa-criciuma;

				display: flex;
				gap: 5px;
				align-items: center;
				color: white;
			}

			.horario-funcionamento {
				grid-area: horario-funcionamento;

				display: flex;
				gap: 5px;
				align-items: center;

			}
		}

		.lista-links-container {
			display: flex;
			justify-content: space-between;
			gap: 50px;

			width: max-content;

			.links-categorizados {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 60px;
				width: min-content;

				width: 100%;
				height: min-content;

				.lista-links {
					display: flex;
					flex-direction: column;
					gap: 30px;
					width: 100%;
					height: min-content;

					h3,
					summary {
						text-align: start;
						font-weight: 600;
						font-size: 1rem;
						color: inherit;

						margin: 0;
					}

					summary {
						pointer-events: none;
						cursor: default;

						&::marker {
							display: none;
						}
					}

					.marcador-customizado {
						display: none;
					}

					ul {
						display: flex;
						flex-direction: column;
						gap: 20px;

						width: 100%;
						height: min-content;
						max-height: 250px;

						padding: 0;
						margin: 0;

						list-style-type: none;
						overflow: hidden;
						transition: var(--delay-default) ease-in-out;

						li {
							margin: 0;
							align-items: center;

							a {
								display: inline;

								font-weight: 200;
								text-decoration: none;
								color: inherit;

								--reversed-link-gap: min(100%, 1.35em);
								background: linear-gradient(to right, currentColor, currentColor) 0 var(--reversed-link-gap)/0 1px no-repeat;
								background-position-x: right;
								transition: background-size .5s cubic-bezier(.3, 1, .3, 1);

								&:hover {
									background-position-x: left;
									background-size: 100% 1px;
								}

							}
						}
					}
				}
			}

			.linha {
				width: 1px;
				background-color: white;
				margin: 0;
			}

			.lista-sites-oficiais-container {
				width: 100%;
				max-width: max-content;

				.lista-links {
					display: flex;
					flex-direction: column;
					gap: 15px;
					width: 100%;
					height: min-content;

					h3,
					summary {
						text-align: start;
						font-weight: 600;
						font-size: 1rem;
						color: inherit;

						margin: 0;
					}

					summary {
						pointer-events: none;
						cursor: default;

						&::marker {
							display: none;
						}
					}

					.marcador-customizado {
						display: none;
					}

					ul {
						display: flex;
						flex-direction: column;
						gap: 16px;

						width: 100%;
						height: min-content;
						max-height: 688px;

						padding: 0;
						margin: 0;

						list-style-type: none;
						overflow: hidden;
						transition: var(--delay-default);

						li {
							margin: 0;
							align-items: center;

							a {
								display: inline;

								font-weight: 200;
								text-decoration: none;
								color: inherit;

								padding-block: 6px;

								--reversed-link-gap: min(100%, 1.65em);
								background: linear-gradient(to right, currentColor, currentColor) 0 var(--reversed-link-gap)/0 1px no-repeat;
								background-position-x: right;
								transition: background-size .5s cubic-bezier(.3, 1, .3, 1);

								&:hover {
									background-position-x: left;
									background-size: 100% 1px;
								}
							}
						}
					}
				}
			}

			.aviso-novidade {
				color: white;
				font-style: italic;
				font-weight: 700;
				padding: 2px 5px;
				margin-left: 20px;
			}
		}

	}

	.numeros-uteis-container {
		display: grid;
		justify-content: center;
		grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
		grid-template-rows: auto;
		grid-column-gap: 0px;
		grid-row-gap: 30px;
		width: 100%;

		padding: 0;
		margin: 0;

		.numero-util {
			display: flex;
			flex-direction: column;
			align-items: center;

			img {
				width: 50px;
				height: 50px;
			}

			h2 {
				color: white;
				text-align: center;
				font-size: 16px;
				margin-top: 10px;
			}

			a {
				text-decoration: none;
				text-align: center;

				span {
					color: rgba(255, 255, 255, 0.664);
					font-size: 12.8px;
					margin-top: 2px;

					--reversed-link-gap: min(100%, 1.35em);
					background: linear-gradient(to right, currentColor, currentColor) 0 var(--reversed-link-gap)/0 1px no-repeat;
					background-position-x: right;
					transition: background-size .5s cubic-bezier(.3, 1, .3, 1);
				}

				&:hover {
					span {

						background-position-x: left;
						background-size: 100% 1px;
					}
				}
			}
		}
	}


	hr {
		background-color: white;
		margin: 0;
	}

	.texto-copyright {
		text-align: center;
		margin: 0;
		font-size: 1rem;
		color: rgba(255, 255, 255, 0.664);

		.link {
			color: white;
		}
	}
}


@media (max-width: 1560px) {

	footer {
		font-size: 14px;
	}
}

@media (max-width: 1400px) {

	footer {

		.footer-container {

			.lista-links-container {
				gap: 25px;

			}
		}
	}
}

@media (max-width: 1100px) {

	footer {

		.footer-container {
			flex-direction: column;
			row-gap: 60px;

			width: 100%;

			.logo-container {
				grid-template-areas:
					"logo"
					"texto-logo"
					"redes-sociais"
					"mapa-criciuma"
					"horario-funcionamento";
				justify-content: space-evenly;

				width: 100%;
			}

			.lista-links-container {
				justify-content: space-evenly;

				width: 100%;

				.linha {
					display: none;
				}
			}
		}
	}
}

@media (max-width: 768px) {

	footer {
		padding-inline: 40px;

		.footer-container {
			.lista-links-container {
				gap: 50px;
				flex-direction: column;
			}
		}
	}
}

@media (max-width: 645px) {

	footer {
		padding-inline: 40px;

		.footer-container {
			.logo-container {
				grid-template-areas:
					"logo"
					"texto-logo"
					"redes-sociais"
					"mapa-criciuma"
					"horario-funcionamento";
			}
		}
	}
}

@media (max-width: 425px) {


	footer {
		padding-inline: 20px;
		gap: 60px;

		.footer-container {
			row-gap: 60px;

			width: 100%;

			.logo-container {
				justify-content: start;
				gap: 15px;

				width: 100%;

				h1 {
					width: 40%;
					margin: 0;
				}

				.logo-criciuma {
					width: 100%;
				}

				.logo-texto {
					width: 50%;

					p {
						font-size: 1rem;
						width: 100%;
					}

					.telefone-saude,
					.instagram-saude {
						display: flex;
						align-items: center;
						gap: 10px;

						i {
							font-size: 1.25rem;
						}
					}
				}
			}


			.lista-links-container {
				flex-direction: column;
				justify-content: center;
				gap: 30px;

				.links-categorizados,
				.lista-sites-oficiais-container {
					grid-template-columns: 1fr;
					gap: 30px;
					max-width: unset;

					.lista-links {
						width: 100%;

						summary {
							width: 100%;
							pointer-events: auto;
							cursor: pointer;

							padding-bottom: 10px;

							border-bottom: 1px solid var(--cor-borda-contraste);

							&::marker {
								display: auto;
							}
						}

						h3 {
							display: flex;
							justify-content: space-between;
							width: 100%;

							padding-bottom: 10px;

							border-bottom: 1px solid var(--cor-borda-contraste);

							.marcador-customizado {
								display: inline-block;
								padding-inline: 5px;
								transition: var(--delay-default);
							}

							.rotacionar-marcador {
								transform: rotate(180deg);
							}
						}

						.esconder-links {
							max-height: 0px;
						}

					}
				}
			}
		}
	}
}