/*
Theme Name: Amanda Gurgel
Author: Equipe Dev
Description: Site institucional da Amanda Gurgel (astrologia e tarô), baseado no Template Geral de WordPress (Full Site Editing) — seções editáveis pelo Site Editor, com paleta de cores e tipografia configuráveis.
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 7.2
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: amanda-gurgel
Tags: blog, portfolio, full-site-editing, block-patterns, block-styles, custom-colors, custom-menu, custom-logo, editor-style, featured-images, flexible-header, one-column, two-columns, three-columns, threaded-comments, translation-ready, wide-blocks
*/

html,
body,
.wp-block-post-author__avatar,
.wp-block-social-links,
.wp-block-post-excerpt__excerpt,
.wp-block-separator {
	margin: 0;
	padding: 0;
}

/* overflow-x precisa ser "clip", não "hidden": "hidden" transforma html/body
   num scroll container, o que quebra position:sticky em elementos
   descendentes (o header sticky some ao rolar). "clip" evita o scroll
   horizontal indesejado sem criar esse scroll container. */
html,
body {
	overflow-x: clip;
}

/* O wp:template-part gera um wrapper <header> extra ao redor do pattern do
   header. Como esse wrapper encolhe para a altura do conteúdo, ele vira o
   containing block do header sticky e anula o position:sticky (o header
   rola junto com a página em vez de fixar). Tornar o próprio wrapper
   sticky resolve, já que o containing block dele é a página inteira. */
.wp-block-template-part:has(> .site-header) {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* A navbar começa transparente sobre o Hero (como no Figma) e só ganha
   fundo/desfoque depois que a página rola — "is-scrolled" é alternado
   por assets/js/header-scroll.js (JS puro, sem jQuery).
   O blur vai num ::before (não direto no .site-header): "backdrop-filter"
   num ancestral vira containing block de qualquer descendente
   "position:fixed" — e é exatamente isso que o menu mobile (hamburguer)
   usa. Com o filter no .site-header, o menu ficava preso dentro dos
   ~60px de altura do header em vez de cobrir a tela. */
.site-header {
	background-color: transparent !important;
	border-bottom-color: transparent !important;
	transition: border-bottom-color 0.5s ease;
}

.site-header.is-scrolled {
	border-bottom-color: rgba(26, 24, 20, 0.12) !important;
}

.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	transition: background-color 0.5s ease, backdrop-filter 0.5s ease;
	z-index: -1;
	pointer-events: none;
}

.site-header.is-scrolled::before {
	background-color: rgba(240, 235, 224, 0.94);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

/* Mobile nav overlay (hamburger menu): core/navigation defaults to a
   white panel when no overlay colors are set on the block, which is
   unreadable against our off-white text. overlayBackgroundColor/
   overlayTextColor on the block cover this, but this is a safety net
   in case a future edit in the Site Editor drops those attributes. */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--background-light) !important;
	padding: 24px !important;
}

.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--primary) !important;
}

/* Hero pattern */
.hero-image-wrap {
	position: relative;
}

.hero-stat-card {
	position: absolute;
	bottom: 20px;
	right: 20px;
	z-index: 2;
	white-space: nowrap;
}

.hero-avatars {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
}

.hero-avatars .wp-block-image {
	flex-shrink: 0;
	margin: 0;
}

.hero-avatars .wp-block-image:not(:last-child) {
	margin-right: -8px;
}

.hero-avatars .wp-block-image img {
	border-radius: 50%;
	border: 2px solid var(--wp--preset--color--cream);
	object-fit: cover;
	display: block;
}

.hero-coach-img {
	margin: 0 !important;
}

.hero-coach-img img {
	border-radius: 16px;
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
}

.hero-stat-icon {
	background: color-mix(in oklab, var(--wp--preset--color--primary) 12%, transparent);
	border-radius: 8px;
	padding: 8px;
	line-height: 1;
	display: flex !important;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.no-margin-top {
	margin-top: 0 !important;
}

.service-card,
.pacote-card,
.about-photo-placeholder,
.book-cover-placeholder {
	position: relative;
	overflow: hidden;
}

.hero-section {
	position: relative;
	z-index: 0;
}

.service-icon {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 44px;
}

.service-icon-img {
	display: block !important;
	width: fit-content !important;
	height: auto !important;
	margin: 0 !important;
}


.service-icon-img img {
	width: 24px;
	height: 24px;
	display: block;
	filter: brightness(0) saturate(100%) invert(53%) sepia(35%) saturate(650%) hue-rotate(334deg) brightness(88%);
}

.cred-check-icon {
	width: 15px !important;
	height: 15px;
	flex-shrink: 0;
	margin: 0 !important;
}

.cred-check-icon img {
	width: 15px;
	height: 15px;
	display: block;
	filter: brightness(0) invert(1);
	opacity: 0.85;
}

/* Logo icon — white inside primary circle */
.logo-icon img {
	filter: brightness(0) invert(1);
}

/* Trust badge dot */
.badge-dot {
	width: 6px;
	flex: 0 0 auto;
}

/* Credentials icon badge */
.cred-icon {
	display: inline-flex;
	width: -moz-fit-content;
	width: fit-content;
}

/* Inline SVG icon wrapper */
.tc-svg-icon {
	display: flex;
	color: var(--wp--preset--color--primary);
}

.tc-svg-icon svg {
	width: 24px;
	height: 24px;
}

/* How It Works step card + watermark number */
.step-card {
	position: relative;
	overflow: hidden;
}

.step-num {
	position: absolute !important;
	top: -16px;
	right: -8px;
	left: auto;
	margin: 0 !important;
	pointer-events: none;
}

/* Hero badge icon — sizes the image and colorizes the default sparkle SVG to primary */
.hero-badge-icon {
	width: 16px !important;
	height: 16px;
	flex-shrink: 0;
	margin: 0 !important;
}

.hero-badge-icon img {
	width: 16px;
	height: 16px;
	display: block;
	filter: brightness(0) saturate(100%) invert(53%) sepia(35%) saturate(650%) hue-rotate(334deg) brightness(88%);
}

/* Client Results before/after label with leading dot */
.result-label {
	display: flex;
	align-items: center;
	gap: 8px;
}

.result-label::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
}

/* Program curriculum — scrollable modules column (scrollbar hidden) */
.program-scroll {
	max-height: 620px;
	overflow-y: auto;
	-ms-overflow-style: none; /* IE & old Edge */
	scrollbar-width: none; /* Firefox */
}

.program-scroll::-webkit-scrollbar {
	display: none; /* Chrome, Safari, Edge */
}

.program-scroll .week-label {
	white-space: nowrap;
	min-width: 56px;
}

/* Equal-height cards inside columns (e.g. About – Credentials) */
.about-card {
	height: 100%;
}

/* Box sizing
--------------------------------------------- */
/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/
html {
	font-smooth: antialiased;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: antialiased;
 }

body {
	font-smooth: auto;
	font-smooth: inherit;
	-webkit-font-smoothing: inherit;
}

.wp-site-blocks > .wp-block-group  {
	margin-block-start: 0;
}

.wp-block-columns{
	margin-block-start: 0;
	margin-block-end: 0;
}

.wp-block-cover{
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Instagram pattern */
.instagram-grid .wp-block-column {
	margin: 0;
}

.instagram-grid .wp-block-image {
	margin: 0;
	overflow: hidden;
	border-radius: 12px;
}

.instagram-grid .wp-block-image img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	display: block;
}

@media (max-width: 600px) {
	.instagram-grid {
		overflow-x: auto;
		flex-wrap: nowrap !important;
	}
	.instagram-grid .wp-block-column {
		min-width: 150px;
	}
}

/* Blog Journal pattern */
.journal-label-line {
	width: 32px;
	height: 2px;
	background-color: var(--wp--preset--color--primary);
	flex-shrink: 0;
}

.blog-separator {
	background-color: var(--wp--preset--color--rule);
}

.blog-feat-image-wrap {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
}

.blog-feat-image-wrap > .wp-block-image {
	margin: 0;
}

.blog-feat-image-wrap > .wp-block-image img {
	width: 100%;
	height: 360px;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

.blog-feat-category-pill {
	position: absolute !important;
	top: 16px;
	left: 16px;
	z-index: 2;
}

.blog-feat-arrow {
	position: absolute !important;
	bottom: 16px;
	right: 16px;
	z-index: 2;
	width: 40px !important;
	height: 40px !important;
}

.blog-list-item {
	border-top: 1px solid var(--wp--preset--color--rule);
	padding-top: 24px;
	padding-bottom: 24px;
}

.blog-list-item:last-child {
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.blog-list-num {
	flex-shrink: 0;
	min-width: 32px;
}

.blog-list-content {
	flex: 1 !important;
	min-width: 0;
}

.blog-list-thumb {
	flex-shrink: 0;
	width: 80px;
}

.blog-list-thumb .wp-block-image {
	margin: 0;
}

.blog-list-thumb img {
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}

/* Get Started CTA pattern */
.cta-images-pair .wp-block-image {
	flex: 1;
	margin: 0;
	overflow: hidden;
	border-radius: 16px;
}

.cta-images-pair .wp-block-image img {
	width: 100%;
	height: 380px;
	object-fit: cover;
	display: block;
}

.cta-right-image .wp-block-image {
	margin: 0;
	overflow: hidden;
	border-radius: 16px;
}

.cta-right-image .wp-block-image img {
	width: 100%;
	height: 380px;
	object-fit: cover;
	display: block;
}

/* Resources hero pattern */
.resources-card {
	overflow: hidden;
}

/* Footer pattern */
.footer-logo-circle img {
	filter: brightness(0) invert(1);
	display: block;
}

.footer-social-icons .wp-social-link {
	border: 1px solid var(--wp--preset--color--rule) !important;
	border-radius: 50% !important;
	background: transparent !important;
	width: 36px !important;
	height: 36px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
}

.footer-social-icons .wp-social-link a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.footer-social-icons .wp-social-link svg {
	width: 15px;
	height: 15px;
	fill: var(--wp--preset--color--paragraph-text);
}

.footer-contact-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.footer-contact-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	flex-shrink: 0;
	margin-top: 6px;
}

/* Navigation active state */
.header-nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.header-nav .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current="page"],
.header-nav .wp-block-navigation-item.is-active > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent, var(--wp--preset--color--primary)) !important;
	font-weight: 600 !important;
}

.header-nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content *,
.header-nav .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current="page"] *,
.header-nav .wp-block-navigation-item.is-active > .wp-block-navigation-item__content * {
	color: var(--wp--preset--color--accent, var(--wp--preset--color--primary)) !important;
}

@media (max-width: 600px) {
	.site-header .wp-block-buttons {
		display: none;
	}
}

/* FAQ accordion */
.therapy-faq-item > summary {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 16px;
	font-weight: 500;
	color: var(--wp--preset--color--heading-text);
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}

.therapy-faq-item > summary::-webkit-details-marker {
	display: none;
}

.therapy-faq-item > summary::after {
	content: "+";
	font-size: 20px;
	font-weight: 300;
	flex-shrink: 0;
	color: var(--wp--preset--color--primary);
	transition: transform 0.2s ease;
}

.therapy-faq-item[open] > summary::after {
	transform: rotate(45deg);
}

/* CTA gradient section */
.wp-block-group.has-background[style*="linear-gradient"] {
	background-attachment: local;
}

/* Skip link */
.skip-link {
	position: absolute;
	top: -9999px;
	left: -9999px;
	z-index: 999999;
	text-decoration: none;
}

.skip-link:focus {
	position: fixed;
	top: 0;
	left: 0;
	display: block;
	background: var(--wp--preset--color--primary, #2563eb);
	color: #fff;
	padding: 0.75rem 1.5rem;
	font-size: 1rem;
	font-weight: 600;
}

/* Focus indicators */
a:focus,
a:focus-visible,
button:focus,
button:focus-visible,
.wp-block-button__link:focus,
.wp-block-button__link:focus-visible,
input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible,
[tabindex]:focus,
[tabindex]:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, #2563eb);
	outline-offset: 2px;
}

/* Dashboard feature grid — Journaling card spans two rows */
.dashboard-feature {
	grid-row: span 2;
}

@media (max-width: 781px) {
	.dashboard-grid {
		grid-template-columns: 1fr !important;
	}
	.dashboard-feature {
		grid-row: span 1;
	}
}

/* Services rows — center price and button when stacked on mobile */
@media (max-width: 781px) {
	.service-actions > .wp-block-group {
		align-items: center !important;
	}
	.service-actions p {
		text-align: center !important;
	}
	.service-actions .wp-block-buttons {
		justify-content: center !important;
	}

	.service-number p {
		text-align: left !important;
	}
	.service-number-dahlia {
		justify-content: flex-start !important;
	}
}