/*
Theme Name: LeoLyra
Theme URI:
Author: Leo Lyra
Author URI:
Description: Tema WordPress para o site de aulas de música do Leo Lyra, com menu principal, menu de rodapé e a home controlada por shortcode.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: leolyra
*/

/* O layout usa Tailwind (via CDN, enqueued em functions.php).
   Aqui ficam apenas os ajustes globais que não fazem sentido como classe utilitária. */

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--leolyra-brass-light, #C89A58);
	color: var(--leolyra-ink, #1C1917);
}

.focus-ring:focus-visible {
	outline: 2px solid var(--leolyra-brass, #A9762F);
	outline-offset: 3px;
	border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	* {
		transition: none !important;
		animation: none !important;
	}
}

/* ==========================================================================
   Paginação (the_posts_pagination / the_posts_navigation) e comentários:
   o WordPress gera esse HTML sem as classes do Tailwind, então aqui usamos
   as variáveis CSS ligadas às cores escolhidas em Personalizar > Cores do Tema.
   ========================================================================== */
.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	margin: 0 0.35rem 0.5rem 0;
	padding: 0 0.6rem;
	border: 1px solid var(--leolyra-paper-line, #E3DACB);
	border-radius: 2px;
	color: var(--leolyra-ink-soft, #3F3A36);
	font-size: 0.9rem;
	text-decoration: none;
}

.page-numbers.dots {
	border-color: transparent;
}

a.page-numbers:hover {
	border-color: var(--leolyra-brass, #A9762F);
	color: var(--leolyra-brass, #A9762F);
}

.page-numbers.current {
	background: var(--leolyra-ink, #1C1917);
	border-color: var(--leolyra-ink, #1C1917);
	color: var(--leolyra-paper, #FAF7F2);
}

#comments,
.comment-navigation,
.comment-respond {
	max-width: 48rem;
	margin-left: auto;
	margin-right: auto;
}

#comments .comment-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

#comments textarea,
#comments input[type="text"],
#comments input[type="email"],
#comments input[type="url"] {
	width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--leolyra-paper-line, #E3DACB);
	border-radius: 2px;
	background: #fff;
	color: var(--leolyra-ink, #1C1917);
}

#comments .form-submit input[type="submit"] {
	display: inline-flex;
	padding: 0.6rem 1.5rem;
	border: 0;
	border-radius: 2px;
	background: var(--leolyra-brass, #A9762F);
	color: #fff;
	cursor: pointer;
}

#comments .form-submit input[type="submit"]:hover {
	background: var(--leolyra-brass-dark, #8A5F24);
}

/* ==========================================================================
   Submenus (itens filhos criados em Aparência > Menus).
   O WordPress já aninha automaticamente um <ul class="sub-menu"> dentro do
   <li class="menu-item-has-children"> — aqui só definimos a aparência.
   ========================================================================== */

/* Menu principal (desktop): dropdown por hover/foco. */
#primary-menu > li {
	position: relative;
}

#primary-menu .menu-item-has-children > a {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

#primary-menu .menu-item-has-children > a::after {
	content: "";
	width: 0.35rem;
	height: 0.35rem;
	margin-top: -2px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
}

#primary-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 50;
	min-width: 12rem;
	margin: 0.5rem 0 0;
	padding: 0.5rem 0;
	list-style: none;
	background: var(--leolyra-paper, #FAF7F2);
	border: 1px solid var(--leolyra-paper-line, #E3DACB);
	border-radius: 2px;
	box-shadow: 0 12px 24px rgba(28, 25, 23, 0.08);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 0.15s ease, transform 0.15s ease;
}

#primary-menu li:hover > .sub-menu,
#primary-menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

#primary-menu .sub-menu li {
	position: relative;
}

/* Submenus de 2º nível (netos) abrem para o lado. */
#primary-menu .sub-menu .sub-menu {
	top: -0.5rem;
	left: 100%;
	margin: 0 0 0 0.25rem;
}

#primary-menu .sub-menu a {
	display: block;
	padding: 0.5rem 1.25rem;
	white-space: nowrap;
	text-decoration: none;
	color: var(--leolyra-ink-soft, #3F3A36);
}

#primary-menu .sub-menu a:hover {
	background: var(--leolyra-paper-deep, #F2ECE3);
	color: var(--leolyra-brass, #A9762F);
}

/* Menu principal (mobile): lista indentada, só aparece no hover/foco (mesmo comportamento do header). */
#primary-menu-mobile .sub-menu {
	display: none;
	list-style: none;
	margin: 0.25rem 0 0.5rem;
	padding: 0 0 0 1.25rem;
}

#primary-menu-mobile li:hover > .sub-menu,
#primary-menu-mobile li:focus-within > .sub-menu {
	display: block;
}

#primary-menu-mobile .sub-menu a {
	font-size: 0.9rem;
}

/* Menu do rodapé: lista indentada, sempre visível (sem dropdown). */
#footer-menu .sub-menu {
	list-style: none;
	margin: 0.25rem 0 0.5rem;
	padding: 0 0 0 1.25rem;
}