/*
Theme Name: Trilha Narrativa
Theme URI: https://trilhanarrativa.com.br
Author: Roteiros e Narrativas (REN)
Author URI: https://trilhanarrativa.com.br
Description: Tema do site da Trilha Narrativa, plataforma da REN para aprender, construir e analisar a estrutura narrativa de uma história. Modo escuro, com a identidade visual da Trilha. Ao ativar, o tema cria as páginas do site.
Version: 1.1.5
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
License: Proprietary
License URI: https://trilhanarrativa.com.br/termos-de-uso/
Text Domain: trilha-narrativa
*/

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
::selection { background: #ED7E55; color: #0B1C1A; }
:where(.wp-site-blocks) :focus-visible { outline: 2px solid #ED7E55; outline-offset: 3px; }
img { height: auto; }

/* ---------- Cabeçalho ---------- */
.tn-header { position: sticky; top: 0; z-index: 50; background: rgba(11, 28, 26, 0.94); backdrop-filter: blur(8px); border-bottom: 1px solid #1B3F3A; }
.admin-bar .tn-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .tn-header { top: 46px; } }
.tn-logo { margin: 0 !important; line-height: 0; }
.tn-logo img { width: 128px; height: auto; display: block; }
.tn-footer .tn-logo img { width: 150px; }
.tn-header .wp-block-navigation__responsive-container.is-menu-open { background: #0B1C1A !important; color: #F5E9D6 !important; padding: 2rem 1.25rem; }
.tn-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { font-size: 1.25rem; }
.tn-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-button__link { font-size: 1rem; }
.tn-header .wp-block-button__link { padding: 0.6em 1.2em; font-size: 0.875rem; }

/* ---------- Elementos de texto ---------- */
.tn-eyebrow { font-size: 0.78rem !important; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #ED7E55; margin-bottom: 0.25rem !important; }
.tn-lead { font-size: var(--wp--preset--font-size--large); color: #E6DCCB; max-width: 40em; }
.tn-muted { color: #C9C0B0; }
.tn-mono { font-family: var(--wp--preset--font-family--mono); }

/* ---------- Seções ---------- */
.tn-hero { position: relative; overflow: hidden; background:
	radial-gradient(1100px 520px at 85% -10%, rgba(237, 126, 85, 0.20), transparent 60%),
	radial-gradient(800px 500px at -10% 110%, rgba(18, 64, 58, 0.9), transparent 60%),
	#0B1C1A; }
.tn-hero h1 { font-size: var(--wp--preset--font-size--huge) !important; line-height: 0.95 !important; }
.tn-hero h1 em, .tn-accent { font-style: normal; color: #ED7E55; }
.tn-band { background: #0A2F2B; }
.tn-trail { position: relative; }
.tn-trail::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: repeating-linear-gradient(90deg, #ED7E55 0 14px, transparent 14px 26px); opacity: 0.35; pointer-events: none; }

/* ---------- Cartões ---------- */
.tn-card { background: #0A2F2B; border: 1px solid #1E4A44; border-radius: 16px; padding: clamp(1.25rem, 3vw, 2rem) !important; }
.tn-band .tn-card { background: #0B1C1A; }
.tn-card h3, .tn-card h4 { margin-top: 0; }
.tn-card > *:first-child { margin-top: 0; }
.tn-card--accent { border-color: #ED7E55; box-shadow: 0 0 0 1px rgba(237, 126, 85, 0.35), 0 18px 50px -20px rgba(237, 126, 85, 0.35); }
.tn-price { font-family: var(--wp--preset--font-family--display); font-size: 3rem !important; line-height: 1 !important; color: #ED7E55; margin: 0.25rem 0 !important; }
.tn-tag { display: inline-block; font-size: 0.75rem !important; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(237, 126, 85, 0.14); color: #ED7E55; border-radius: 999px; padding: 0.2em 0.8em; }
.tn-step-n { font-family: var(--wp--preset--font-family--display); font-size: 3.25rem !important; line-height: 1 !important; color: #ED7E55; margin: 0 !important; }
.tn-icon-n { width: 2.6rem; height: 2.6rem; border-radius: 50%; display: inline-grid !important; place-items: center; background: rgba(237, 126, 85, 0.14); color: #ED7E55; font-family: var(--wp--preset--font-family--display); font-size: 1.4rem !important; line-height: 1 !important; margin: 0 0 0.5rem !important; }

/* ---------- Listas ---------- */
.tn-checks { list-style: none; padding-left: 0 !important; }
.tn-checks li { position: relative; padding-left: 1.7em; margin: 0.45em 0; }
.tn-checks li::before { content: ""; position: absolute; left: 0.1em; top: 0.55em; width: 0.75em; height: 0.42em; border-left: 2px solid #ED7E55; border-bottom: 2px solid #ED7E55; transform: rotate(-45deg); }

/* ---------- Botões ---------- */
.wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; color: #F5E9D6; border: 1.5px solid rgba(245, 233, 214, 0.55); }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { border-color: #ED7E55; color: #ED7E55; background: transparent; }
.wp-block-button__link { transition: background-color .15s ease, color .15s ease, border-color .15s ease; text-decoration: none; }

/* ---------- Perguntas frequentes ---------- */
.wp-block-details summary { cursor: pointer; font-weight: 700; font-size: 1.0625rem; list-style: none; position: relative; padding-right: 2rem; }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: "+"; position: absolute; right: 0.25rem; top: -0.1em; color: #ED7E55; font-size: 1.5rem; font-weight: 400; transition: transform .2s ease; }
.wp-block-details[open] summary::after { transform: rotate(45deg); }
.wp-block-details > *:not(summary) { color: #E0D6C5; }

/* ---------- Blog ---------- */
.tn-post-card { background: #0A2F2B; border: 1px solid #1E4A44; border-radius: 16px; overflow: hidden; height: 100%; }
.tn-post-card .wp-block-post-featured-image { margin: 0; }
.tn-post-card .wp-block-post-featured-image img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.tn-post-card .tn-post-body { padding: 1.25rem 1.4rem 1.5rem; }
.tn-post-card h3 { font-size: 1.6rem; }
.wp-block-post-content a, .tn-prose a { text-underline-offset: 3px; }
.wp-block-post-content h2 { margin-top: 2.5rem; }
.wp-block-post-content h3 { margin-top: 2rem; font-size: 1.5rem; }
.wp-block-query-pagination a { text-decoration: none; }

/* ---------- Páginas legais ---------- */
.tn-legal h2 { font-size: 1.9rem; margin-top: 2.5rem; }
.tn-legal h3 { font-size: 1.4rem; margin-top: 2rem; }
.tn-legal p, .tn-legal li { color: #E6DCCB; }
.tn-legal table { border-collapse: collapse; width: 100%; font-size: 0.9375rem; }
.tn-legal th, .tn-legal td { border: 1px solid #24534C; padding: 0.6rem 0.75rem; text-align: left; vertical-align: top; }
.tn-legal th { background: #0A2F2B; }
.tn-legal .wp-block-table { overflow-x: auto; }

/* ---------- Rodapé ---------- */
.tn-footer { border-top: 1px solid #1B3F3A; }
.tn-footer a { color: #E6DCCB; text-decoration: none; }
.tn-footer a:hover { color: #ED7E55; }
.tn-footer .tn-foot-links p { margin: 0.35rem 0; font-size: 0.9375rem; }
.tn-footer .tn-foot-title { font-size: 0.78rem !important; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #ED7E55; margin-bottom: 0.5rem !important; }

/* ---------- Celular ---------- */
@media (max-width: 781px) {
	.tn-hero h1 { font-size: 3.4rem !important; }
	.tn-trail::before { display: none; }
	.tn-hide-mobile { display: none !important; }
}

/* Link "Entrar no app" só no menu do celular */
.tn-nav-app { display: none !important; }
.wp-block-navigation__responsive-container.is-menu-open .tn-nav-app { display: flex !important; color: #ED7E55 !important; }

/* Seções de página encostadas umas nas outras */
.wp-site-blocks > * { margin-block-start: 0; }
.wp-block-post-content > .alignfull { margin-block-start: 0 !important; margin-block-end: 0 !important; }
.wp-block-post-content.alignfull { margin-block-start: 0; }
.tn-price .tn-per { font-family: var(--wp--preset--font-family--body); font-size: 1rem; color: #C9C0B0; margin-left: .2em; letter-spacing: 0; }
.tn-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: 16px; border: 1px solid #1E4A44; display: block; }