/* Marta Oliveira · toque esotérico: céu com constelações, roda zodiacal, fases da lua e cantos de carta. */

/* constelações no céu, fixas atrás de tudo */
body::after {
	content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
	background: url(../img/ceu.svg) center / cover no-repeat; opacity: .7;
}
.editor-styles-wrapper::after { display: none; }

/* roda zodiacal e geometria sagrada por trás do topo */
.mo-abertura::before {
	content: ""; position: absolute; right: -170px; top: 50%; width: 920px; height: 920px; pointer-events: none;
	transform: translateY(-50%); background: url(../img/roda.svg) center / contain no-repeat; opacity: .13;
	animation: mo-girar 300s linear infinite;
}
@keyframes mo-girar { to { transform: translateY(-50%) rotate(360deg); } }
.mo-abertura > * { position: relative; z-index: 1; }

.mo-contacto, .mo-cab-pagina { position: relative; overflow: hidden; }
.mo-contacto::before, .mo-cab-pagina::before {
	content: ""; position: absolute; left: 50%; top: 50%; width: 640px; height: 640px; pointer-events: none;
	transform: translate(-50%, -50%); background: url(../img/roda.svg) center / contain no-repeat; opacity: .08;
}
.mo-contacto > *, .mo-cab-pagina > * { position: relative; z-index: 1; }

/* fases da lua debaixo dos títulos */
.mo-cab h2::after, .mo-cab-pagina h1::after {
	content: ""; display: block; width: 240px; height: 22px; margin: 20px auto 0;
	background: url(../img/divisor.svg) center / contain no-repeat;
}

/* cantos de carta de tarot nos cartões das consultas */
.mo-consulta::after {
	background:
		url(../img/canto.svg) left top / 14px no-repeat,
		url(../img/canto.svg) right top / 14px no-repeat,
		url(../img/canto.svg) left bottom / 14px no-repeat,
		url(../img/canto.svg) right bottom / 14px no-repeat;
	inset: 6px;
}

/* texto dos produtos: benefícios, nota do guia e frase */
.mo-descricao { color: var(--mo-lilas); margin: 1.4rem 0; }
.mo-descricao > p { margin: 0 0 1rem; }
.mo-beneficios { list-style: none; padding: 0; margin: 1.2rem 0; display: grid; gap: 12px; }
.mo-beneficios li { position: relative; padding-left: 26px; color: var(--mo-lilas); }
.mo-beneficios li::before { content: "✦"; position: absolute; left: 0; top: 1px; color: var(--mo-ouro); font-size: .8rem; }
.mo-beneficios strong { color: var(--mo-creme); font-weight: 400; }
.mo-guia { border: 1px solid var(--mo-linha); padding: 12px 16px; font-size: .92rem; color: var(--mo-ouro) !important; }
.mo-guia::before { content: "☾ "; }
.mo-lema { font: italic 300 1.7rem/1.3 var(--wp--preset--font-family--cormorant); color: var(--mo-ouro) !important; margin-top: 1.6rem !important; }

@media (max-width: 781px) {
	.mo-abertura::before { width: 620px; height: 620px; right: -260px; top: 30%; }
	.mo-contacto::before, .mo-cab-pagina::before { width: 460px; height: 460px; }
}
@media (prefers-reduced-motion: reduce) {
	.mo-abertura::before { animation: none; }
}

/* três portas da página inicial */
.mo-portal .wp-block-image img { aspect-ratio: 4 / 3; object-position: center 25%; }
.mo-portal h3 a { color: var(--mo-creme); }
.mo-portal h3 a:hover { color: var(--mo-ouro); }
.mo-portal .mo-pe { justify-content: flex-start; }

/* cabeçalho: o desfoque fica numa camada à parte, senão prende o menu do telemóvel dentro da barra */
.mo-topo { backdrop-filter: none !important; background: transparent !important; }
.mo-topo::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: rgba(23, 13, 34, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}

/* menu aberto no telemóvel */
.mo-topo .wp-block-navigation__responsive-container.is-menu-open {
	background: linear-gradient(rgba(23, 13, 34, .9), rgba(23, 13, 34, .9)), url(../img/roda.svg) center 62% / 560px no-repeat, var(--mo-noite) !important;
}
.mo-topo .is-menu-open .wp-block-navigation__responsive-container-content { align-items: center !important; padding-top: 5rem !important; }
.mo-topo .is-menu-open .wp-block-navigation__container { align-items: center !important; gap: 2rem !important; }
.mo-topo .is-menu-open .wp-block-navigation-item__content {
	font: 300 2.2rem/1 var(--wp--preset--font-family--cormorant) !important; letter-spacing: .04em; text-transform: none; color: var(--mo-creme) !important;
}
.mo-topo .is-menu-open .wp-block-navigation-item__content:hover { color: var(--mo-ouro) !important; }
.mo-topo .wp-block-navigation a:focus, .mo-topo .wp-block-navigation button:focus { outline: none; }
.mo-topo .wp-block-navigation a:focus-visible { color: var(--mo-ouro) !important; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px; }
.mo-topo .wp-block-navigation__responsive-container-close, .mo-topo .wp-block-navigation__responsive-container-open { color: var(--mo-ouro); }

/* sem bordo branco ao tocar em links e botões; quem navega pelo teclado vê um contorno dourado */
a, button { -webkit-tap-highlight-color: transparent; }
a:focus, button:focus, .wp-element-button:focus { outline: none; }
a:focus-visible, button:focus-visible, .wp-element-button:focus-visible { outline: 1px solid var(--mo-ouro); outline-offset: 4px; }