/* =========================================================================
   Abraçando o Maranhão — estilos sob medida (complementam o theme.json)
   ========================================================================= */

:root {
	--am-yellow: var(--wp--preset--color--caution-yellow);
	--am-red: var(--wp--preset--color--hazard-red);
	--am-bg: var(--wp--preset--color--background);
	--am-asphalt: var(--wp--preset--color--asphalt-gray);
	--am-charcoal: var(--wp--preset--color--surface-charcoal);
	--am-bright: var(--wp--preset--color--surface-bright);
	--am-lowest: var(--wp--preset--color--surface-lowest);
	--am-container: var(--wp--preset--color--surface-container);
	--am-white: var(--wp--preset--color--road-white);
	--am-variant: var(--wp--preset--color--on-surface-variant);
	--am-mono: var(--wp--preset--font-family--jetbrains-mono);
	--am-pad-x: clamp(16px, 5vw, 64px);
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 96px;
}

/* ---------------------------------------------------------------- Header */
.wp-site-blocks > header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: rgba(19, 19, 19, 0.9);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--am-charcoal);
}

.am-header {
	max-width: 1280px;
	margin-inline: auto;
	padding: 12px var(--am-pad-x);
	gap: var(--wp--preset--spacing--40);
}

.am-brand,
.am-brand a {
	text-decoration: none;
}

/* Empurra a navegação (e o CTA logo após) para a direita, mantendo a marca à esquerda */
.am-header .am-nav {
	margin-left: auto;
}

.am-nav .wp-block-navigation-item__content {
	color: var(--am-white);
	text-decoration: none;
	font-weight: 500;
	transition: color 0.25s ease;
}

.am-nav .wp-block-navigation-item__content:hover,
.am-nav .current-menu-item .wp-block-navigation-item__content {
	color: var(--am-yellow);
}

/* Botão CTA do header um pouco mais compacto */
.am-header__cta .wp-block-button__link {
	padding: 10px 18px;
}

/* Menu mobile (overlay) */
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
	fill: var(--am-yellow);
}

.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--am-bg);
	padding-top: 80px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--am-white);
	font-size: 20px;
}

/* ------------------------------------------------------------- Seções */
.am-section {
	padding-left: var(--am-pad-x);
	padding-right: var(--am-pad-x);
	border-bottom: 1px solid var(--am-charcoal);
}

.am-section > * {
	max-width: 1280px;
	margin-inline: auto;
}

.am-section__title {
	font-size: var(--wp--preset--font-size--headline-lg);
}

.am-subtitle {
	border-left: 4px solid var(--am-yellow);
	padding-left: 16px;
	color: var(--am-white);
	font-size: var(--wp--preset--font-size--headline-md);
}

.am-subtitle--muted {
	border-left-color: var(--am-charcoal);
	color: var(--am-variant);
}

/* --------------------------------------------------------------- Hero */
.am-hero {
	min-height: 78vh;
	display: flex;
	align-items: center;
	background-image:
		radial-gradient(circle at 72% 22%, rgba(255, 215, 0, 0.08), transparent 45%),
		linear-gradient(to top, var(--am-bg) 0%, rgba(19, 19, 19, 0.88) 42%, rgba(19, 19, 19, 0.62) 100%),
		url("/wp-content/uploads/2026/06/ponte_rio_balsas-1536x864.jpg");
	background-size: cover, cover, cover;
	background-position: center, center, center;
	background-repeat: no-repeat;
}

.am-hero .am-hero__inner {
	width: 100%;
}

.am-hero__logo img {
	filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.6));
}

.am-hero__title {
	font-size: var(--wp--preset--font-size--display-lg);
	line-height: 1.1;
}

/* CTA grande */
.am-btn-lg .wp-block-button__link {
	padding: 16px 36px;
	font-size: var(--wp--preset--font-size--label-md);
}

/* --------------------------------------------------------------- Sobre */
.am-about__media {
	margin: 0;
	width: 100%;
}

.am-about__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	background-color: var(--am-asphalt);
	padding: 36px;
	box-sizing: border-box;
}

/* ----------------------------------------------------------- Timeline */
.am-timeline {
	position: relative;
	max-width: 760px;
	margin-inline: auto;
}

.am-timeline::before {
	content: "";
	position: absolute;
	left: 7px;
	top: 4px;
	bottom: 4px;
	width: 2px;
	background-color: var(--am-yellow);
	opacity: 0.3;
}

.am-timeline__item {
	position: relative;
	padding-left: 40px;
}

.am-timeline__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background-color: var(--am-bg);
	border: 2px solid var(--am-yellow);
	box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

.am-timeline__card {
	border-top: 2px solid var(--am-yellow) !important;
	transition: background-color 0.3s ease;
}

.am-timeline__card:hover {
	background-color: var(--am-bright) !important;
}

.am-chip {
	display: inline-block;
	width: auto;
	background-color: var(--am-container);
	color: var(--am-yellow);
	font-family: var(--am-mono);
	font-size: var(--wp--preset--font-size--label-md);
	font-weight: 500;
	padding: 4px 12px;
	border-radius: 4px;
}

.am-time-row {
	align-items: flex-start;
}

.am-time {
	flex: 0 0 auto;
	margin: 0;
	background-color: var(--am-bg);
	color: var(--am-white);
	font-family: var(--am-mono);
	font-size: var(--wp--preset--font-size--label-md);
	padding: 4px 10px;
	border: 1px solid var(--am-charcoal);
	border-radius: 4px;
	line-height: 1.4;
}

.am-time-row__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--headline-md);
	font-weight: 700;
}

/* ------------------------------------------------------------- Cards comuns */
.am-card {
	transition: border-color 0.3s ease, transform 0.3s ease;
}

/* -------------------------------------------------------- Inscrição (WC) */
.am-reg-grid {
	max-width: 880px;
	margin-inline: auto;
	align-items: stretch;
}

.am-reg-grid .wp-block-column {
	display: flex;
}

.am-reg-card {
	width: 100%;
	height: 100%;
	align-items: center;
	text-align: center;
}

.am-reg-card .wp-block-buttons {
	width: 100%;
	margin-top: auto;
}

.am-reg-card.has-border-color:hover {
	border-color: var(--am-yellow);
}

.am-reg-card__img {
	margin: 0 auto;
}

.am-reg-card__img img {
	transition: transform 0.3s ease;
}

.am-reg-card.has-border-color:hover .am-reg-card__img img {
	transform: scale(1.05);
}

.am-price {
	font-family: var(--am-mono);
	font-size: 28px;
	font-weight: 700;
}

/* Botão "outline" amarelo (Adicionar ao carrinho) */
.wp-block-button.am-btn-outline .wp-block-button__link {
	background-color: transparent;
	background-image: none;
	color: var(--am-yellow);
	border: 2px solid var(--am-yellow);
	transition: background-color 0.25s ease, color 0.25s ease;
}

.wp-block-button.am-btn-outline .wp-block-button__link:hover,
.wp-block-button.am-btn-outline .wp-block-button__link:focus {
	background-color: var(--am-yellow);
	color: var(--am-asphalt);
}

/* ----------------------------------------------------------- Hotéis */
.am-hotels-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--40);
}

.am-hotels-grid > * {
	margin-block: 0 !important;
}

.am-hotel-card {
	overflow: hidden;
	height: 100%;
}

.am-hotel-card__img {
	margin: 0;
}

.am-hotel-card__img img {
	width: 100%;
	opacity: 0.82;
	transition: opacity 0.3s ease;
}

.am-hotel-card:hover .am-hotel-card__img img {
	opacity: 1;
}

.am-hotel-card__body {
	height: 100%;
}

.am-loc-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background-color: var(--am-bg);
	border: 1px solid var(--am-charcoal);
	color: var(--am-yellow);
	font-family: var(--am-mono);
	font-size: 12px;
	padding: 8px 14px;
	border-radius: 4px;
	text-decoration: none;
	transition: background-color 0.25s ease;
}

.am-loc-link:hover {
	background-color: var(--am-charcoal);
}

.am-loc-link__icon {
	flex: 0 0 auto;
}

@media (max-width: 1024px) {
	.am-hotels-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.am-hotels-grid {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------- Como Chegar */
.am-map {
	position: relative;
	width: 100%;
	height: 400px;
	border: 1px solid var(--am-charcoal);
	border-radius: 12px;
	overflow: hidden;
}

.am-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	filter: grayscale(0.3) contrast(1.05);
}

/* ------------------------------------------------------------- Rodapé */
.am-footer {
	gap: var(--wp--preset--spacing--40);
	padding-left: var(--am-pad-x);
	padding-right: var(--am-pad-x);
}

.am-footer > * {
	max-width: 1280px;
}

.am-footer__logo {
	margin: 0;
}

.am-footer__logo img {
	filter: grayscale(1);
	opacity: 0.6;
	transition: filter 0.3s ease, opacity 0.3s ease;
}

.am-footer__logo:hover img {
	filter: grayscale(0);
	opacity: 1;
}

.am-footer__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--headline-md);
}

.am-footer__appmake {
	margin: 0;
}

.am-footer__appmake img {
	opacity: 0.85;
	transition: opacity 0.25s ease;
}

.am-footer__appmake a:hover img {
	opacity: 1;
}

.am-footer__copy {
	text-align: center;
}

.am-footer__links a {
	color: var(--am-variant);
	text-decoration: none;
	transition: color 0.25s ease;
}

.am-footer__links a:hover {
	color: var(--am-red);
}

/* ---------------------------------------------------------- Responsivo */
@media (max-width: 781px) {
	.am-hero {
		min-height: auto;
		text-align: center;
	}

	.am-hero__title {
		font-size: var(--wp--preset--font-size--headline-lg);
	}

	/* Botão "Inscreva-se Agora" centralizado no mobile */
	.am-hero .wp-block-buttons {
		justify-content: center;
	}

	/* Cabeçalho: marca + menu na 1ª linha; botão "Inscrever-se" abaixo, largura total */
	.am-header {
		row-gap: 12px;
	}

	.am-header__cta {
		flex-basis: 100%;
		order: 3;
	}

	.am-header__cta .wp-block-button,
	.am-header__cta .wp-block-button__link {
		display: block;
		width: 100%;
		text-align: center;
	}

	.am-footer {
		text-align: center;
		justify-content: center;
	}
}