/*
Theme Name: Carnanews
Theme URI: https://carnanews.com.br
Author: Carnanews
Description: Tema mobile primeiro do portal Carnanews, com notícias e serviços do Carnaval de Salvador e das festas da Bahia.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: carnanews
*/

:root {
	--ink: #1B1030;
	--bg: #FFF8EC;
	--card: #FFFFFF;
	--line: #D9CDB8;
	--muted: #5A4E6B;
	--rosa: #D6124F;
	--rosa-d: #8F0B35;
	--amarelo: #FFC21A;
	--verde: #007F7A;
	--lilas: #E9DDF7;
	--lilas-d: #3B2A5C;
	--h: 'Space Grotesk', system-ui, sans-serif;
	--b: Inter, system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--b); font-size: 15px; line-height: 1.45; padding-bottom: 72px; }
body.cn-lock { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--rosa); }
a:hover { color: var(--rosa-d); }
h1, h2, h3 { font-family: var(--h); margin: 0; line-height: 1.15; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cn-skip { position: absolute; left: -999px; top: 0; background: var(--amarelo); color: var(--ink); padding: 12px 16px; z-index: 100; }
.cn-skip:focus { left: 0; }
:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 2px; }

.cn-main { max-width: 720px; margin: 0 auto; }

/* Cabeçalho */
.cn-header { padding: 8px 16px 0; background: var(--ink); color: var(--bg); position: sticky; top: 0; z-index: 30; }
.cn-header__in { min-height: 48px; display: flex; align-items: center; justify-content: space-between; width: 100%; }
.cn-footer__in { display: flex; flex-direction: column; gap: 20px; }
.cn-iconbtn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: inherit; padding: 0; cursor: pointer; }
.cn-logo { font-family: var(--h); font-weight: 700; font-size: 24px; letter-spacing: -.01em; color: var(--bg); text-decoration: none; }
.cn-logo:hover { color: var(--bg); }
.cn-logo__y { color: var(--amarelo); }
.cn-searchbar { background: var(--ink); padding: 0 16px 12px; }
.cn-searchbar[hidden] { display: none; }
.cn-searchbar form { display: flex; gap: 8px; max-width: 720px; margin: 0 auto; }
.cn-searchbar input { flex: 1; min-height: 44px; border-radius: 10px; border: 0; padding: 0 12px; font: 500 15px var(--b); }
.cn-wastrip { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; background: var(--verde); color: #fff; text-decoration: none; font-weight: 600; font-size: 14px; }
.cn-wastrip:hover { color: #fff; }

/* Menu principal */
.cn-topnav { margin: 0 -16px; padding: 0 12px; overflow-x: auto; scrollbar-width: none; }
.cn-topnav__list, .cn-topnav .sub-menu { list-style: none; margin: 0; padding: 0; }
.cn-topnav__list { display: flex; gap: 2px; width: max-content; }
.cn-topnav .sub-menu { display: contents; }
.cn-topnav li { position: relative; }
.cn-topnav a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 12px; color: var(--bg); text-decoration: none; font: 600 14px var(--b); white-space: nowrap; border-bottom: 3px solid transparent; }
.cn-topnav a:hover, .cn-topnav .current-menu-item > a { color: var(--amarelo); border-bottom-color: var(--amarelo); }

/* Botões e chips */
.cn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: 12px; border: 1px solid transparent; font: 600 15px var(--b); text-decoration: none; cursor: pointer; text-align: center; }
.cn-btn--accent { background: var(--rosa); color: #fff; }
.cn-btn--accent:hover { background: var(--rosa-d); color: #fff; }
.cn-btn--dark { background: var(--ink); color: #fff; width: 100%; }
.cn-btn--dark:hover { background: var(--lilas-d); color: #fff; }
.cn-btn--amarelo { background: var(--amarelo); color: var(--ink); font-weight: 700; width: 100%; }
.cn-btn--amarelo:hover { color: var(--ink); filter: brightness(.95); }
.cn-btn--branco { background: #fff; color: var(--ink); font-weight: 700; width: 100%; }
.cn-btn--branco:hover { color: var(--ink); }
.cn-btn--line { background: #fff; border-color: var(--line); color: var(--ink); min-height: 44px; font-size: 13px; flex: 1; }
.cn-btn--line:hover { color: var(--ink); background: var(--bg); }
.cn-chip { flex: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 22px; border: 1px solid var(--line); background: #fff; color: var(--ink); font: 600 14px var(--b); text-decoration: none; cursor: pointer; }
.cn-chip.is-on { background: var(--rosa); border-color: var(--rosa); color: #fff; }
.cn-hubchips, .cn-chips { display: flex; gap: 8px; overflow-x: auto; padding: 12px 16px; scrollbar-width: none; }
.cn-chips { padding: 0; }
.cn-cat { display: block; font: 700 12px var(--h); letter-spacing: .06em; text-transform: uppercase; color: var(--rosa); }

/* Destaque */
.cn-hero { padding: 4px 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.cn-hero__img { display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 358 / 200; background: var(--lilas); }
.cn-hero__img img { width: 100%; height: 100%; object-fit: cover; }
.cn-hero h1 { font-size: 26px; }
.cn-hero h1 a { color: var(--ink); text-decoration: none; }
.cn-hero p { margin: 0; color: var(--muted); font-size: 14px; }
.cn-hero--vazio { background: var(--lilas); margin: 4px 16px 20px; padding: 24px 16px; border-radius: 14px; }
.cn-ph { display: block; width: 100%; height: 100%; min-height: 60px; background: var(--lilas); }

/* Pipoca e Gratuito */
.cn-pipoca { margin: 0 16px 24px; padding: 16px; border-radius: 16px; background: var(--amarelo); display: flex; flex-direction: column; gap: 12px; }
.cn-pipoca__head { display: flex; align-items: center; justify-content: space-between; }
.cn-pipoca__head h2 { font-size: 22px; }
.cn-pipoca__head span { font-size: 12px; font-weight: 600; }
.cn-evcard { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.cn-pipoca .cn-evcard { margin-bottom: 0; border-color: transparent; }
.cn-evcard__top { display: flex; gap: 12px; align-items: flex-start; }
.cn-evcard__hora { font: 700 20px var(--h); min-width: 60px; }
.cn-evcard__info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.cn-evcard__info h3 { font: 600 16px var(--b); }
.cn-evcard__info h3 a { color: var(--ink); text-decoration: none; }
.cn-evcard__sub { font-size: 13px; color: var(--muted); }
.cn-evcard__acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.cn-badge { font-size: 11px; font-weight: 700; border: 1.5px solid; border-radius: 6px; padding: 3px 6px; white-space: nowrap; }
.cn-badge--gratis { color: var(--verde); }
.cn-badge--pipoca { color: var(--rosa-d); }
.cn-badge--pago { color: var(--muted); }
.cn-dia { font: 700 18px var(--h); margin: 20px 0 10px; text-transform: capitalize; }
.cn-count { margin: 4px 0 12px; font-size: 13px; color: var(--muted); }
.cn-count strong { color: var(--ink); }
.cn-empty { color: var(--muted); padding: 8px 0; }

/* Filtros */
.cn-filtros { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.cn-selects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cn-selects label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.cn-selects select { min-height: 44px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--ink); font: 500 14px var(--b); padding: 0 10px; }

/* Seções */
.cn-sec { padding: 0 16px 24px; }
.cn-sec__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.cn-sec__head h2 { font-size: 22px; }
.cn-sec__head a { font-size: 14px; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.cn-list { display: flex; flex-direction: column; gap: 12px; }
.cn-row { display: flex; gap: 12px; }
.cn-row__img { flex: none; width: 150px; height: 90px; border-radius: 8px; overflow: hidden; background: var(--lilas); display: block; }
.cn-row__img img { width: 100%; height: 100%; object-fit: cover; }
.cn-row__txt { display: flex; flex-direction: column; gap: 4px; }
.cn-row__txt .cn-cat { font-size: 11px; }
.cn-row h3 { font: 600 15px/1.25 var(--b); }
.cn-row h3 a { color: var(--ink); text-decoration: none; }

/* Sorteio */
.cn-sorteio { margin: 0 16px 24px; padding: 16px; border-radius: 16px; background: var(--ink); color: var(--bg); display: flex; flex-direction: column; gap: 12px; }
.cn-sorteio__tag { display: flex; align-items: center; gap: 8px; color: var(--amarelo); font: 700 12px var(--h); letter-spacing: .06em; text-transform: uppercase; }
.cn-sorteio__body { display: flex; gap: 12px; align-items: center; }
.cn-sorteio__img { flex: none; width: 96px; height: 96px; border-radius: 10px; overflow: hidden; background: var(--lilas); }
.cn-sorteio__img img { width: 100%; height: 100%; object-fit: cover; }
.cn-sorteio h2 { font-size: 20px; }
.cn-sorteio p { margin: 4px 0 0; font-size: 13px; color: #D9CDE8; }
.cn-sorteio-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.cn-sorteio-card h3 { font: 600 17px var(--b); margin-top: 4px; }
.cn-sorteio-card a { color: var(--ink); text-decoration: none; }
.cn-sorteio-card p { margin: 6px 0 0; color: var(--muted); }

/* Mais lidas */
.cn-rank { list-style: none; margin: 0; padding: 0; }
.cn-rank li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); }
.cn-rank__n { font: 700 28px/1 var(--h); color: var(--rosa); min-width: 28px; }
.cn-rank a { color: var(--ink); font-weight: 600; text-decoration: none; }

/* Publicidade */
.cn-ad { margin: 0 16px 24px; padding: 12px; border: 1.5px dashed #9C8FB0; border-radius: 8px; text-align: center; overflow: hidden; }
.cn-ad__tag { display: block; font-size: 11px; color: var(--muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .06em; }

/* Artistas e blocos */
.cn-carousel { display: flex; gap: 12px; overflow-x: auto; margin: 0 -16px; padding: 0 16px; scrollbar-width: none; }
.cn-person { flex: none; width: 120px; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 6px; }
.cn-person__img { width: 120px; height: 120px; border-radius: 60px; overflow: hidden; background: var(--lilas); display: block; }
.cn-person__img img { width: 100%; height: 100%; object-fit: cover; }
.cn-person__name { font-weight: 600; text-align: center; }

/* Hubs e serviços */
.cn-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cn-hub { min-height: 112px; padding: 14px; border-radius: 14px; text-decoration: none; display: flex; flex-direction: column; justify-content: space-between; color: #fff; }
.cn-hub strong { font: 700 18px/1.1 var(--h); }
.cn-hub span { font-size: 12px; }
.cn-hub:hover { color: #fff; filter: brightness(.95); }
.c-rosa { background: var(--rosa); }
.c-verde { background: var(--verde); }
.c-escuro { background: var(--ink); }
.c-amarelo { background: var(--amarelo); color: var(--ink); }
.c-amarelo:hover { color: var(--ink); }
.cn-serv { min-height: 96px; padding: 14px; border-radius: 14px; background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none; display: flex; flex-direction: column; gap: 8px; font-weight: 600; }
.cn-serv svg { color: var(--rosa); }
.cn-serv:hover { color: var(--ink); background: var(--bg); }
.cn-wacta { margin: 0 16px 24px; padding: 20px 16px; border-radius: 16px; background: var(--verde); color: #fff; display: flex; flex-direction: column; gap: 10px; }
.cn-wacta h2 { font-size: 22px; }

/* Páginas internas */
.cn-page { padding: 20px 16px 24px; }
.cn-page__head { margin-bottom: 14px; }
.cn-page__head h1 { font-size: 30px; }
.cn-lead { color: var(--muted); font-size: 15px; margin: 6px 0; }
.cn-meta { color: var(--muted); font-size: 13px; margin: 4px 0; }
.cn-h2 { font: 700 22px var(--h); margin: 24px 0 12px; }
.cn-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cn-tile { text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 6px; }
.cn-tile__img { display: block; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--lilas); }
.cn-tile__img img { width: 100%; height: 100%; object-fit: cover; }
.cn-tile__name { font-weight: 600; }
.navigation.pagination { margin: 24px 0 0; }
.nav-links { display: flex; gap: 8px; flex-wrap: wrap; }
.nav-links a, .nav-links span { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; border-radius: 22px; border: 1px solid var(--line); background: #fff; color: var(--ink); text-decoration: none; font-weight: 600; }
.nav-links .current { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Matéria e ficha */
.cn-article__img, .cn-ficha__img { aspect-ratio: 716 / 400; background: var(--lilas); overflow: hidden; }
.cn-article__img img, .cn-ficha__img img { width: 100%; height: 100%; object-fit: cover; }
.cn-article__body { padding: 20px 16px 24px; display: flex; flex-direction: column; gap: 10px; }
.cn-article__body h1 { font-size: 30px; }
.cn-content { font-size: 17px; line-height: 1.6; }
.cn-content p { margin: 0 0 1em; }
.cn-content h2 { font-size: 22px; margin: 1.4em 0 .6em; }
.cn-content h3 { font-size: 18px; margin: 1.2em 0 .5em; }
.cn-content a { text-underline-offset: 2px; }
.cn-evmeta { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.cn-evmeta p { margin: 0; }
.cn-evmeta .cn-badge { align-self: flex-start; }

/* Formulário de sorteio */
.cn-form { display: flex; flex-direction: column; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin-top: 16px; }
.cn-form label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; }
.cn-form input[type=text], .cn-form input[type=tel], .cn-form input[type=email] { min-height: 48px; border-radius: 10px; border: 1px solid var(--line); padding: 0 12px; font: 500 16px var(--b); }
.cn-form .cn-check { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 500; }
.cn-form .cn-check input { width: 22px; height: 22px; margin-top: 2px; flex: none; }
.cn-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cn-aviso { background: var(--lilas); border-radius: 10px; padding: 12px 14px; margin: 12px 0; font-weight: 500; }
.cn-aviso--ok { background: #D9F2EF; }

/* Rodapé e navegação inferior */
.cn-footer { background: var(--ink); color: #D9CDE8; padding: 28px 16px 24px; margin-top: 8px; font-size: 14px; }
.cn-footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 720px; }
.cn-footer__cols div { display: flex; flex-direction: column; gap: 10px; }
.cn-footer strong { color: var(--bg); }
.cn-footer a { color: #D9CDE8; text-decoration: none; }
.cn-footer a:hover { color: var(--amarelo); }
.cn-footer__copy { margin: 0; font-size: 12px; }
.cn-bottomnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: #fff; border-top: 1px solid var(--line); }
.cn-bottomnav a { min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--ink); text-decoration: none; font-size: 11px; font-weight: 600; }
.cn-bottomnav a.is-on { color: var(--rosa); }

@media (min-width: 760px) {
	.cn-main { padding-top: 8px; }
	.cn-bottomnav { max-width: 720px; margin: 0 auto; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
}

/* Desktop */
@media (min-width: 1024px) {
	body { padding-bottom: 0; font-size: 16px; }
	.cn-bottomnav { display: none; }
	.cn-main { max-width: 1200px; padding: 28px 24px 8px; }
	.cn-hubchips { display: none; }

	.cn-header { padding: 0 24px; }
	.cn-header__in { max-width: 1200px; margin: 0 auto; min-height: 76px; }
	.cn-logo { font-size: 30px; }
	.cn-topnav { max-width: 1200px; margin: 0 auto; padding: 0; overflow: visible; border-top: 1px solid rgba(255, 248, 236, .14); }
	.cn-topnav__list { width: auto; gap: 8px; }
	.cn-topnav a { min-height: 52px; padding: 0 16px; font-size: 15px; }
	.cn-topnav .menu-item-has-children > a::after { content: ""; margin-left: 8px; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
	.cn-topnav .sub-menu { display: none; position: absolute; left: 0; top: 100%; min-width: 220px; background: var(--ink); border-radius: 0 0 12px 12px; padding: 8px 0; box-shadow: 0 16px 32px rgba(27, 16, 48, .35); z-index: 60; }
	.cn-topnav li:hover > .sub-menu, .cn-topnav li:focus-within > .sub-menu { display: block; }
	.cn-topnav .sub-menu a { display: flex; min-height: 44px; border-bottom: 0; padding: 0 20px; }
	.cn-topnav .sub-menu a:hover { background: rgba(255, 248, 236, .08); }
	.cn-searchbar { padding: 0 24px 14px; }

	/* Home em colunas */
	.cn-home { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 36px 40px; align-items: start;
		grid-template-areas: "hero pipoca" "ultimas sorteio" "ultimas lidas" "ad ad" "fichas fichas" "hubs hubs" "serv serv" "wa wa"; }
	.cn-a-hero { grid-area: hero; }
	.cn-a-pipoca { grid-area: pipoca; }
	.cn-a-ultimas { grid-area: ultimas; }
	.cn-a-sorteio { grid-area: sorteio; }
	.cn-a-lidas { grid-area: lidas; }
	.cn-a-ad { grid-area: ad; }
	.cn-a-fichas { grid-area: fichas; }
	.cn-a-hubs { grid-area: hubs; }
	.cn-a-serv { grid-area: serv; }
	.cn-a-wa { grid-area: wa; }
	.cn-home .cn-hero, .cn-home .cn-sec { padding: 0; }
	.cn-home .cn-pipoca, .cn-home .cn-sorteio, .cn-home .cn-wacta, .cn-home .cn-ad { margin: 0; }
	.cn-a-ad:empty { display: none; }
	.cn-hero h1 { font-size: 40px; }
	.cn-hero p { font-size: 17px; }
	.cn-hero { gap: 14px; }
	.cn-sec__head h2, .cn-pipoca__head h2 { font-size: 26px; }
	.cn-row { gap: 20px; padding-bottom: 4px; }
	.cn-row__img { width: 240px; height: 144px; border-radius: 10px; }
	.cn-row h3 { font-size: 19px; }
	.cn-carousel { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; gap: 24px 32px; }
	.cn-person, .cn-person__img { width: 140px; }
	.cn-person__img { height: 140px; border-radius: 70px; }
	.cn-grid2 { gap: 20px; }
	.cn-a-hubs .cn-grid2, .cn-a-serv .cn-grid2, .cn-grid-serv { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.cn-hub { min-height: 140px; padding: 20px; }
	.cn-hub strong { font-size: 22px; }
	.cn-serv { min-height: 120px; padding: 20px; }
	.cn-wacta { flex-direction: row; align-items: center; justify-content: space-between; padding: 28px 32px; }
	.cn-wacta h2 { font-size: 26px; max-width: 640px; }
	.cn-btn--branco, .cn-btn--dark, .cn-btn--amarelo { width: auto; min-width: 240px; }
	.cn-pipoca .cn-btn--dark, .cn-sorteio .cn-btn--amarelo { width: 100%; }

	/* Páginas internas */
	.cn-page { max-width: 1200px; margin: 0 auto; padding: 8px 0 32px; }
	.cn-page__head h1 { font-size: 44px; }
	.cn-page .cn-content { max-width: 900px; }
	.cn-page > .cn-list, .cn-page .cn-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; }
	.cn-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
	.cn-filtros { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 16px 24px; }
	.cn-selects { display: flex; gap: 12px; }
	.cn-selects select { min-width: 230px; }
	.cn-evcard { padding: 18px 20px; }
	.cn-evcard__acoes .cn-btn { flex: none; }
	.cn-article, .cn-ficha { max-width: 820px; margin: 0 auto; }
	.cn-article__img, .cn-ficha__img { border-radius: 16px; }
	.cn-article__body { padding: 28px 0 32px; }
	.cn-article__body h1 { font-size: 42px; }
	.cn-article ~ .cn-sec, .cn-ficha ~ .cn-sec { max-width: 820px; margin: 0 auto; padding-left: 0; padding-right: 0; }
	.cn-article ~ .cn-sec .cn-list { grid-template-columns: 1fr; }

	/* Rodapé */
	.cn-footer { padding: 48px 24px 32px; margin-top: 24px; }
	.cn-footer__in { max-width: 1200px; margin: 0 auto; gap: 28px; }
	.cn-footer__cols { max-width: 520px; gap: 32px; }
}