/*
Theme Name: Soares Tur
Theme URI: https://soarestur.com.br
Description: Tema da Soares Tur – excursões, passeios e viagens de ônibus. Tema filho do Twenty Twenty-Five.
Author: Soares Tur
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Requires PHP: 7.4
Text Domain: soarestur
*/

/* Cores, fontes e tamanhos ficam no theme.json. Aqui: o visual das seções. */

:root {
	--sv-sombra: 0 18px 50px rgba(7, 47, 66, .14);
	--sv-raio: 20px;
	--sv-icone-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--sv-icone-escudo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5.5c0 4.4-3 8.1-7 9.5-4-1.4-7-5.1-7-9.5V6z'/%3E%3Cpath d='M8.8 12.2l2.2 2.2 4.4-4.6'/%3E%3C/svg%3E");
	--sv-icone-mala: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='7' width='16' height='13' rx='2.5'/%3E%3Cpath d='M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2M4 12h16'/%3E%3C/svg%3E");
	--sv-icone-sol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.3 5.3l1.4 1.4M17.3 17.3l1.4 1.4M5.3 18.7l1.4-1.4M17.3 6.7l1.4-1.4'/%3E%3C/svg%3E");
	--sv-icone-onibus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3.5' width='16' height='14' rx='3'/%3E%3Cpath d='M4 10.5h16M8 17.5V20M16 17.5V20'/%3E%3Ccircle cx='8' cy='14' r='1'/%3E%3Ccircle cx='16' cy='14' r='1'/%3E%3C/svg%3E");
}

/* Sem faixas brancas entre cabeçalho, seções coloridas e rodapé. */
.wp-site-blocks > main,
.wp-site-blocks > footer { margin-block-start: 0; }
main.sv-inicio > *,
main.sv-catalogo > * { margin-block: 0; }

.sv-sobretitulo {
	margin: 0 0 6px;
	font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
	color: var(--wp--preset--color--laranja-escuro);
}

/* ---------- Cabeçalho ---------- */
.sv-topo {
	padding-block: 7px;
	background: var(--wp--preset--color--azul-noite);
	color: rgba(255, 255, 255, .82); font-size: .84rem;
}
.sv-topo p { margin: 0; }
.sv-topo a { color: #fff; font-weight: 700; text-decoration: none; }
.sv-topo a:hover { color: var(--wp--preset--color--accent-1); }
.sv-cabecalho {
	padding-block: 12px;
	background: rgba(255, 255, 255, .97);
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
}
@media (min-width: 782px) {
	.wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 100; }
	.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 32px; }
}
@media (max-width: 600px) {
	.sv-topo__parceiro { display: none; }
}

.sv-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--wp--preset--color--contrast); text-decoration: none; }
.sv-logo__icone { flex: none; }
.sv-logo__nome {
	font-family: var(--wp--preset--font-family--platypi); font-size: 1.55rem; font-weight: 800;
	letter-spacing: -.01em; line-height: 1; white-space: nowrap;
}
.sv-logo__nome span { color: var(--wp--preset--color--accent-1); }
.sv-cabecalho__direita { gap: 20px; }
.sv-menu .wp-block-navigation-item__content { padding: 6px 2px; color: var(--wp--preset--color--contrast); text-decoration: none; }
.sv-menu .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--accent-3); }

/* ---------- Destaque (página inicial) ---------- */
.sv-hero {
	position: relative;
	padding-top: clamp(52px, 8vw, 110px);
	padding-bottom: clamp(140px, 17vw, 240px);
	color: #fff;
	background:
		url("assets/img/paisagem.svg") center bottom / 100% auto no-repeat,
		radial-gradient(circle at 84% 22%, #ffc27a 0 34px, rgba(242, 140, 40, .55) 37px, rgba(242, 140, 40, 0) 230px),
		linear-gradient(170deg, #0b4f6c 0%, #0e6b8f 58%, #3a8fad 100%);
}
@media (max-width: 600px) {
	/* No celular, a paisagem aparece maior, recortada em volta do ônibus. */
	.sv-hero { background-size: 1000px auto, auto, auto; background-position: 74% bottom, center, center; }
}
.sv-hero .sv-sobretitulo { color: #ffd6a8; }
.sv-hero h1 { max-width: 18ch; margin: 4px 0 0; color: #fff; }
.sv-hero__subtitulo { max-width: 56ch; margin-top: 16px; font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: rgba(255, 255, 255, .9); }
.sv-hero__busca { margin-top: clamp(26px, 4vw, 42px); }
.sv-selos {
	display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 18px 0 0; padding: 0; list-style: none;
	font-size: .92rem; font-weight: 700; color: rgba(255, 255, 255, .94);
}
.sv-selos li { display: flex; align-items: center; gap: 8px; }
.sv-selos li::before {
	content: ""; flex: none; width: 18px; height: 18px; background: var(--wp--preset--color--accent-1);
	-webkit-mask: var(--sv-icone-check) center / contain no-repeat; mask: var(--sv-icone-check) center / contain no-repeat;
}

/* ---------- Seções ---------- */
.sv-secao { padding-block: clamp(56px, 7vw, 100px); }
.sv-secao h2 { margin: 0; }
.sv-secao__topo { gap: 12px; margin-bottom: 28px; }
.sv-link-seta { margin: 0; }
.sv-link-seta a { font-weight: 800; text-decoration: none; }
.sv-link-seta a::after { content: " →"; }

.sv-tipos__grade,
.sv-passos__grade,
.sv-confianca__grade { gap: 22px; margin-top: 28px; }

.sv-tipo {
	position: relative; padding: 26px; background: #fff;
	border: 1px solid var(--wp--preset--color--accent-6); border-radius: var(--sv-raio);
	transition: transform .2s, box-shadow .2s;
}
.sv-tipo:hover { transform: translateY(-3px); box-shadow: var(--sv-sombra); }
.sv-tipo::before {
	content: ""; display: block; width: 54px; height: 54px; margin-bottom: 16px;
	border-radius: 16px; background: var(--wp--preset--color--accent-2);
}
.sv-tipo::after {
	content: ""; position: absolute; top: 39px; left: 39px; width: 28px; height: 28px;
	background: var(--wp--preset--color--laranja-escuro);
	-webkit-mask: var(--sv-icone) center / contain no-repeat; mask: var(--sv-icone) center / contain no-repeat;
}
.sv-tipo--excursao { --sv-icone: var(--sv-icone-mala); }
.sv-tipo--passeio { --sv-icone: var(--sv-icone-sol); }
.sv-tipo--onibus { --sv-icone: var(--sv-icone-onibus); }
.sv-tipo h3 { margin: 0 0 6px; font-size: 1.35rem; }
.sv-tipo h3 a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.sv-tipo h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.sv-tipo p { margin: 0; color: var(--wp--preset--color--accent-4); }

.sv-passos { background: var(--wp--preset--color--accent-5); }
.sv-passos__grade { counter-reset: passo; }
.sv-passos__grade > .wp-block-column {
	padding: 28px 26px 26px; background: #fff; border-radius: var(--sv-raio); counter-increment: passo;
}
.sv-passos__grade > .wp-block-column::before {
	content: counter(passo); display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; margin-bottom: 14px; border-radius: 50%;
	background: var(--wp--preset--color--accent-3); color: #fff;
	font-family: var(--wp--preset--font-family--platypi); font-size: 1.25rem; font-weight: 800;
}
.sv-passos h3,
.sv-confianca h3 { margin: 0 0 6px; font-size: 1.15rem; }
.sv-passos p,
.sv-confianca p { margin: 0; color: var(--wp--preset--color--accent-4); }
.sv-confianca h3 { display: flex; align-items: center; gap: 10px; }
.sv-confianca h3::before {
	content: ""; flex: none; width: 26px; height: 26px; background: var(--wp--preset--color--accent-3);
	-webkit-mask: var(--sv-icone-escudo) center / contain no-repeat; mask: var(--sv-icone-escudo) center / contain no-repeat;
}

.sv-parceiro-cta {
	position: relative; overflow: hidden; padding-block: clamp(56px, 7vw, 92px);
	background: var(--wp--preset--color--azul-noite); color: rgba(255, 255, 255, .86);
}
.sv-parceiro-cta::before {
	content: ""; position: absolute; top: -170px; right: -130px; width: 440px; height: 440px; border-radius: 50%;
	background: radial-gradient(circle, rgba(242, 140, 40, .45) 0, rgba(242, 140, 40, 0) 70%);
	pointer-events: none;
}
.sv-parceiro-cta .sv-sobretitulo { color: #ffd6a8; }
.sv-parceiro-cta h2 { margin: 0 0 12px; color: #fff; }
.sv-parceiro-cta p { margin: 0; }

/* ---------- Lista de viagens ---------- */
.sv-catalogo__topo { padding-block: 26px 36px; background: var(--wp--preset--color--accent-5); }
.sv-catalogo__topo h1 { margin: 8px 0 20px; font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.sv-catalogo__lista { padding-block: 36px clamp(56px, 7vw, 90px); }
.woocommerce-breadcrumb,
.wc-block-breadcrumbs { font-size: .85rem; color: var(--wp--preset--color--accent-4); }
.woocommerce-breadcrumb a { text-decoration: none; }

/* ---------- Página da viagem ---------- */
.sv-viagem { padding-block: 18px clamp(56px, 7vw, 90px); }
.sv-viagem__colunas { gap: clamp(24px, 4vw, 48px); align-items: flex-start; margin-top: 18px; }
.sv-viagem__cartao {
	padding: clamp(20px, 3vw, 30px); background: #fff;
	border: 1px solid var(--wp--preset--color--accent-6); border-radius: 22px; box-shadow: var(--sv-sombra);
}
@media (min-width: 782px) {
	.sv-viagem__lateral { position: sticky; top: 130px; }
}
.sv-viagem__cartao h1 { margin: 0 0 14px; font-size: clamp(1.7rem, 3vw, 2.3rem); }
.sv-viagem .sv-trajeto { display: none; } /* O bloco "Resumo da viagem" já mostra a rota e a duração. */
.sv-viagem .wp-block-woocommerce-product-price { margin: 20px 0 8px; }
.sv-preco-sufixo { font-size: .8rem; font-weight: 600; color: var(--wp--preset--color--accent-4); }
.sv-viagem form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.sv-viagem form.cart .sv-reserva { flex: 1 1 100%; margin: 0; }
.sv-rotulo-qtd { font-size: .9rem; font-weight: 800; }
.sv-viagem form.cart .quantity .qty {
	width: 5em; min-height: 52px; border: 1px solid var(--wp--preset--color--accent-6); border-radius: 12px;
	font: inherit; font-weight: 800; text-align: center;
}
.sv-viagem form.cart .single_add_to_cart_button { flex: 1 1 auto; min-height: 52px; }
.sv-reserva select,
.sv-reserva input[type="text"] {
	min-height: 48px; padding: 10px 12px; background: #fff; font: inherit;
	border: 1px solid var(--wp--preset--color--accent-6); border-radius: 12px;
}
.sv-reserva select:focus,
.sv-reserva input[type="text"]:focus { outline: 2px solid var(--wp--preset--color--accent-3); outline-offset: 1px; }
.sv-reserva .sv-passageiro { border-color: var(--wp--preset--color--accent-6); border-radius: 14px; padding: 12px; }
.sv-garantias {
	display: grid; gap: 8px; margin: 20px 0 0; padding: 18px 0 0; list-style: none;
	border-top: 1px dashed var(--wp--preset--color--accent-6);
	font-size: .9rem; color: var(--wp--preset--color--accent-4);
}
.sv-garantias li { display: flex; align-items: flex-start; gap: 8px; }
.sv-garantias li::before {
	content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; background: var(--wp--preset--color--accent-3);
	-webkit-mask: var(--sv-icone-check) center / contain no-repeat; mask: var(--sv-icone-check) center / contain no-repeat;
}
/* O CSS antigo do WooCommerce limita a galeria a 48% e a faz flutuar; aqui ela ocupa a coluna toda. */
.sv-viagem .woocommerce-product-gallery { width: 100% !important; float: none !important; }
.sv-viagem .woocommerce-product-gallery__image img { border-radius: 22px; }
.sv-viagem .woocommerce-product-gallery__image--placeholder {
	aspect-ratio: 4 / 3; overflow: hidden; border-radius: 22px;
	background:
		url("assets/img/paisagem.svg") center bottom / 100% auto no-repeat,
		radial-gradient(circle at 80% 16%, rgba(242, 140, 40, .55) 0, rgba(242, 140, 40, 0) 30%),
		linear-gradient(170deg, #0b4f6c 0%, #0e6b8f 58%, #3a8fad 100%);
}
.sv-viagem .woocommerce-product-gallery__image--placeholder img { opacity: 0; }
.sv-viagem .wp-block-woocommerce-product-details { margin-top: clamp(36px, 5vw, 56px); }
.sv-viagem .sv-viagens { margin-top: clamp(48px, 6vw, 72px); }

/* ---------- Página larga (painel do parceiro) ---------- */
.sv-pagina-larga { padding-block: 28px clamp(56px, 7vw, 90px); }

/* ---------- Rodapé ---------- */
.sv-rodape {
	padding-block: clamp(48px, 6vw, 80px) 28px;
	background: var(--wp--preset--color--azul-noite); color: rgba(255, 255, 255, .74); font-size: .95rem;
}
.sv-rodape .sv-logo { color: #fff; }
.sv-rodape__texto { max-width: 34ch; margin-top: 16px; }
.sv-rodape .sv-rodape__titulo {
	margin: 4px 0 14px; color: #fff;
	font-family: var(--wp--preset--font-family--manrope); font-size: .78rem; font-weight: 800;
	letter-spacing: .12em; text-transform: uppercase;
}
.sv-rodape ul.wp-block-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.sv-rodape a { color: rgba(255, 255, 255, .88); text-decoration: none; }
.sv-rodape a:hover { color: var(--wp--preset--color--accent-1); }
.sv-rodape .sv-redes { gap: 10px; }
.sv-rodape__base {
	gap: 10px 28px; margin-top: 44px; padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, .14); font-size: .82rem;
}
.sv-rodape__base p { margin: 0; }