/* ============================================================
   TOPO PADRÃO DO SITE (cabeçalho + faixa de título)
   Carregado por pages/logo.php em todas as páginas, depois do CSS
   de cada página, para o topo ficar igual em todo o site.
   ============================================================ */

:root {
	--topo-azul-escuro: #0a1f44;
	--topo-azul-principal: #0d3b66;
	--topo-azul-medio: #1e5f8e;
	--topo-dourado: #d4a017;
	--topo-texto: #e8f1f8;
}

/* ========== CABEÇALHO ========== */
.c-layout-header,
.c-layout-header.c-layout-header-2,
.c-layout-header.c-layout-header-3,
.c-layout-header .c-navbar {
	background: linear-gradient(135deg, var(--topo-azul-escuro) 0%, var(--topo-azul-principal) 100%) !important;
}

.c-layout-header {
	box-shadow: 0 4px 25px rgba(10, 31, 68, 0.4) !important;
	border-bottom: none !important;
}

/* Menu */
.c-layout-header .c-mega-menu .nav > li > a,
.c-layout-header .c-mega-menu .nav > li > .c-link {
	font-family: 'Poppins', 'Roboto Condensed', Arial, sans-serif !important;
	font-weight: 600 !important;
	letter-spacing: 0.5px;
	color: var(--topo-texto) !important;
	transition: color 0.3s;
}

.c-layout-header .c-mega-menu .nav > li > a:hover,
.c-layout-header .c-mega-menu .nav > li > .c-link:hover,
.c-layout-header .c-mega-menu .nav > li.c-active > a,
.c-layout-header .c-mega-menu .nav > li.c-active > .c-link {
	color: var(--topo-dourado) !important;
	background: transparent !important;
}

/* Botões do menu no celular */
.c-layout-header .c-hor-nav-toggler .c-line {
	background: var(--topo-texto) !important;
}

.c-layout-header .c-search-toggler,
.c-layout-header .c-search-toggler i {
	color: var(--topo-texto) !important;
	background: transparent !important;
}

/* ========== LOGO ========== */
/* Cores originais, com contorno claro para o "B" azul-escuro aparecer no fundo escuro */
.c-layout-header .c-brand .c-logo img.logo-eric {
	width: 140px !important;
	height: auto !important;
	max-height: none !important;
	margin-top: -10px;
	border-radius: 6px;
	filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 3px rgba(255, 255, 255, 0.35)) !important;
	-webkit-filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 3px rgba(255, 255, 255, 0.35)) !important;
	transition: transform 0.3s ease;
}

.c-layout-header .c-brand .c-logo:hover img.logo-eric {
	transform: scale(1.05);
}

/* ========== FAIXA DE TÍTULO ========== */
.c-layout-breadcrumbs-1 {
	position: relative;
	background: linear-gradient(135deg, var(--topo-azul-escuro) 0%, var(--topo-azul-principal) 50%, var(--topo-azul-medio) 100%) !important;
	padding: 55px 0 45px !important;
	min-height: 0 !important; /* algumas páginas definiam altura própria (ex.: Quem Somos) */
	margin-top: 0 !important;
	overflow: hidden;
	border: none !important;
}

/* Substitui o véu escuro que o tema punha sobre a foto de fundo (Quem Somos) */
.c-layout-breadcrumbs-1::before {
	content: '' !important;
	display: block !important;
	position: absolute;
	top: -50%;
	right: -10%;
	width: 400px;
	height: 400px;
	background: radial-gradient(circle, rgba(124, 185, 232, 0.15) 0%, transparent 70%) !important;
	border-radius: 50%;
	pointer-events: none;
	opacity: 1 !important;
}

.c-layout-breadcrumbs-1::after {
	content: '♪ ♫ ♪' !important;
	position: absolute;
	bottom: 10px;
	right: 30px;
	color: rgba(212, 160, 23, 0.15);
	font-size: 40px;
	letter-spacing: 10px;
	pointer-events: none;
}

.c-layout-breadcrumbs-1 .container,
.c-layout-breadcrumbs-1 .c-breadcrumbs-wrapper {
	position: relative;
	z-index: 2;
	background: transparent !important;
}

.c-layout-breadcrumbs-1 .c-page-title h3,
.c-layout-breadcrumbs-1 .c-page-title h1 {
	color: #ffffff !important;
	font-family: 'Playfair Display', Georgia, serif !important;
	font-size: 30px !important;
	font-weight: 700 !important;
	letter-spacing: 2px;
	margin: 0;
	opacity: 1 !important;
	text-transform: uppercase;
	text-shadow: 2px 2px 12px rgba(0, 0, 0, 0.5);
}

.c-layout-breadcrumbs-1 .c-page-title h3::after,
.c-layout-breadcrumbs-1 .c-page-title h1::after {
	content: '♪';
	color: var(--topo-dourado);
	font-size: 22px;
	margin-left: 12px;
	vertical-align: middle;
}

/* Subtítulo (quando a página tem) */
.c-layout-breadcrumbs-1 .c-page-title h4 {
	color: var(--topo-texto) !important;
	font-family: 'Poppins', Arial, sans-serif !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	letter-spacing: 0.5px;
	text-transform: none;
	opacity: 0.85 !important;
	margin: 8px 0 0;
}

.c-layout-breadcrumbs-1 .c-page-breadcrumbs li,
.c-layout-breadcrumbs-1 .c-page-breadcrumbs li a {
	color: var(--topo-texto) !important;
	font-family: 'Poppins', Arial, sans-serif !important;
	text-transform: none !important;
	text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
	transition: color 0.3s;
}

.c-layout-breadcrumbs-1 .c-page-breadcrumbs li a:hover,
.c-layout-breadcrumbs-1 .c-page-breadcrumbs .c-state_active {
	color: var(--topo-dourado) !important;
	font-weight: 500;
}

/* ========== DESTAQUE DA PÁGINA DE CIFRAS ========== */
/* Mantém o layout com o brasão, nas cores do padrão do site */
.music-hero {
	background:
		radial-gradient(circle at 85% 20%, rgba(212, 160, 23, 0.22), transparent 30%),
		radial-gradient(circle at 10% 90%, rgba(124, 185, 232, 0.18), transparent 34%),
		linear-gradient(135deg, var(--topo-azul-escuro) 0%, var(--topo-azul-principal) 50%, var(--topo-azul-medio) 100%) !important;
}

.music-hero h1 {
	font-family: 'Playfair Display', Georgia, serif !important;
}

.music-hero .music-kicker {
	border-color: rgba(212, 160, 23, 0.5) !important;
	background: rgba(212, 160, 23, 0.12) !important;
	color: #f0c14b;
}

.music-hero-photo {
	background: linear-gradient(135deg, var(--topo-azul-medio), var(--topo-azul-escuro)) !important;
	border-color: rgba(255, 255, 255, 0.92) !important;
}

/* ========== RESPONSIVO ========== */
@media (max-width: 991px) {
	.c-layout-breadcrumbs-1 {
		padding: 45px 0 35px !important;
	}

	.c-layout-breadcrumbs-1 .c-page-title h3,
	.c-layout-breadcrumbs-1 .c-page-title h1 {
		font-size: 24px !important;
	}

	/* Menu aberto no celular */
	.c-layout-header .c-mega-menu {
		background: var(--topo-azul-escuro) !important;
	}
}

@media (max-width: 575px) {
	.c-layout-breadcrumbs-1::after {
		font-size: 28px;
		right: 15px;
	}
}