/* ==========================================================================
   Página de agendamento em modo foco

   Carregada só no template "Agendamento (foco)". A régua aqui é o modal no
   celular, que a cliente aprovou por ter "cara de aplicativo": o formulário
   ocupa a tela toda, sem moldura, e nada disputa a atenção com ele.

   O contorno do formulário vem do plugin (booking.css). Este arquivo só
   monta a moldura da página e, no celular, tira a moldura do plugin.
   ========================================================================== */

body.foco {
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
	background: var(--bg);
}

/* ----------------------------------------------------------- Barra da marca */

.foco__bar {
	display: flex;
	justify-content: center;
	padding: 1.1rem var(--gutter);
	background: var(--paper);
	border-bottom: 1px solid var(--line);
}

/* Menor que no site: aqui a marca é assinatura, não navegação. */
.foco__bar .brand {
	transform: scale(.88);
	transform-origin: center;
}

/* -------------------------------------------------------------- Formulário */

.foco__main {
	flex: 1;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 640px;
	margin-inline: auto;
	padding: clamp(1.5rem, 1rem + 2.5vw, 3rem) var(--gutter);
}

/*
 * Centra o formulário na vertical quando ele é curto — na primeira etapa há
 * um serviço só, e sem isto o cartão fica colado no topo com um vazio grande
 * embaixo. O `margin: auto` faz o trabalho de um `justify-content: center`
 * sem o defeito dele: quando o formulário cresce (calendário, campos), o
 * excesso continua alcançável em vez de vazar para fora dos dois lados.
 */
.foco__form {
	margin-block: auto;
}

/*
 * O plugin já desenha o cartão (.ga-booking--inline). Em telas largas ele
 * fica como está; o que muda é só a sombra, para o formulário descolar do
 * fundo agora que não há mais nada na página para dar profundidade.
 */
.foco__form .ga-booking--inline {
	max-width: none;
	background: var(--paper);
	box-shadow: 0 18px 40px -30px rgba(30, 43, 42, .5);
}

/* ------------------------------------------------------------------ Rodapé */

.foco__foot {
	padding: 1.5rem var(--gutter) 2.25rem;
	text-align: center;
	font-family: var(--font-body);
	font-size: var(--step--2);
	line-height: 1.6;
	color: var(--ink-3);
}

.foco__foot p {
	margin: 0;
}

.foco__legal {
	letter-spacing: .04em;
	text-transform: uppercase;
}

.foco__ajuda {
	margin-top: .5rem !important;
}

.foco__foot a {
	color: var(--ink-2);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.foco__foot a:hover,
.foco__foot a:focus-visible {
	color: var(--teal-deep);
}

/* ------------------------------------------------------------- Celular */

/*
 * Sangria total: sem margem, sem borda, sem cantos. É o que dá ao formulário
 * a mesma sensação confortável do modal em tela cheia — o dedo alcança a
 * largura inteira e nada em volta lembra que aquilo é uma página de site.
 */
@media (max-width: 600px) {
	/*
	 * Uma superfície só, da barra ao rodapé. Com o fundo cinza do site, a
	 * base do formulário sangrado virava uma emenda horizontal no meio da
	 * tela — e é justamente a emenda que denuncia "isto é uma página", não
	 * um aplicativo.
	 */
	body.foco {
		background: var(--paper);
	}

	.foco__main {
		padding: 0;
	}

	.foco__form {
		margin-block: 0;
	}

	.foco__form .ga-booking--inline {
		padding: 1.25rem var(--gutter) 2rem;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.foco__bar {
		padding: .85rem var(--gutter);
	}
}