@import url(global.css);

main {
	width: 100%;
	padding: 0 0.625rem 0 0.625rem;
	font-family: var(--fonte-texto);
	font-size: var(--fonte-size);
	text-align: center;
	color: #000;

	h1 {
		font-family: var(--fonte-titulo);
		font-size: var(--fonte-size-titulo);
		margin-bottom: 0.375rem;
	}

	p {
		font-size: clamp(0.875rem, calc(0.75rem + 0.31vw), 1.125rem);
		margin-bottom: 1rem;
	}

	.botao {
		margin-bottom: var(--margin-secoes);
		width: 100%;
		height: 2.375rem;
		border-radius: 8px;
		border-color: transparent;
		background-color: var(--cor-destaque-secundario);
		box-shadow: var(--sombra);
		font-family: var(--fonte-destaque);
		font-weight: 500;
		font-size: 1rem;
		color: #fff;
	}
}

.promocoes {
	margin-bottom: var(--margin-secoes);

	h2 {
		font-family: var(--fonte-titulo);
		font-size: var(--fonte-size-titulo);
		margin-bottom: var(--margin-secundario);
	}

	article {
		width: 100%;
		background-color: var(--cor-destaque);
		border-radius: 8px;
		box-shadow: var(--sombra);
		padding: 0.375rem 0.375rem 0.75rem 0.375rem;
		color: #fff;

		h3 {
			font-weight: 400;
			margin-bottom: 0.5rem;
		}

		p {
			margin-bottom: var(--margin-secundario);
		}

		div {
			width: fit-content;
			padding: 0.25rem 1.25rem;
			margin: 0 auto;
			background-color: var(--cor-fundo);
			border-radius: 8px;

			p {
				margin: 0 auto;
				color: #000;
				font-family: var(--fonte-destaque);
				font-weight: 500;
			}
		}
	}
}

.cardapio {
	margin-bottom: var(--margin-secoes);

	h2 {
		font-family: var(--fonte-titulo);
		font-size: var(--fonte-size-titulo);
		margin-bottom: var(--margin-secundario);
	}

	article {
		display: flex;
		gap: 0.375rem;
		background-color: var(--cor-fundo-card);
		border-radius: 8px;
		border: 0.5px solid var(--cor-borda);
		box-shadow: var(--sombra);
		margin-bottom: var(--margin-secundario);
		padding: 0.375rem 0.5rem 0.25rem 0.5rem;

		img {
			width: 2.75rem;
			height: auto;
			border-radius: 50%;
		}

		.cardapio-pizza-info {
			display: flex;
			flex-direction: column;
			justify-content: center;
			gap: 0.25rem;
			text-align: justify;

			h3 {
				display: flex;
				justify-content: space-between;
				font-family: var(--fonte-especial);
				font-weight: 400;

				span {
					display: block;
					font-family: var(--fonte-texto);
					background-color: var(--cor-destaque-terciario);
					border-radius: 8px;
					padding: 0.25rem;
				}
			}

			p {
				margin: 0;
			}
		}

		.preco {
			font-family: var(--fonte-destaque);
			font-weight: 500;
			color: var(--cor-destaque);
		}
	}
}

.avaliacoes {
    margin-bottom: var(--margin-secoes);

	h2 {
		font-family: var(--fonte-titulo);
		font-size: var(--fonte-size-titulo);
		margin-bottom: var(--margin-secundario);
	}

	blockquote {
		position: relative;
		background-color: var(--cor-fundo-card);
		text-align: justify;
		border: 0.5px solid var(--cor-borda);
		border-radius: 8px;
		box-shadow: var(--sombra);
		padding: 0.625rem 1rem;

		cite {
			display: flex;
			justify-content: space-between;
			margin-bottom: 2px;

			.bxs-star {
				color: var(--cor-destaque-terciario);
			}
		}

		p {
			margin: 0;
			font-family: var(--fonte-destaque);
			font-weight: 300;
		}

        .avaliacoes-seta-direita {
            position: absolute;
            top: 35%;
            left: -2%;
            background-color: transparent;
            border: transparent;
            font-size: 1.5rem;
        }
        .avaliacoes-seta-esquerda {
            position: absolute;
            top: 35%;
            right: -2%;
            background-color: transparent;
            border: transparent;
            font-size: 1.5rem;
        }
	}
}

.sobre {
    margin-bottom: var(--margin-secoes);

    h2 {
        font-family: var(--fonte-titulo);
        font-size: var(--fonte-size-titulo);
        margin-bottom: var(--margin-secundario);
    }

    p {
        margin: 0;
    }
}