/*
Theme Name: Debemos Conversar
Theme URI: https://debemosconversar.uy/
Description: Tema del blog de Debemos Conversar. Usa los mismos colores, tipografía y componentes (Bootstrap 5.3) que el sitio principal.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 7.4
Text Domain: debemos-conversar
License: GPL-2.0-or-later
*/

/* ---- Variables y base: idénticas al sitio principal ---- */
:root {
	--primary-violet: #a855f7;
	--dark-violet: #6b21a8;
	--light-bg: #f8f9fa;
	--bs-link-color-rgb: 107, 33, 168;
	--bs-link-hover-color-rgb: 168, 85, 247;
}
body {
	font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	color: #333;
}
a { color: var(--dark-violet); }
a:hover { color: var(--primary-violet); }
:focus-visible { outline: 3px solid var(--primary-violet); outline-offset: 2px; }

.navbar { background-color: white; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.navbar-brand {
	font-weight: bold;
	color: var(--dark-violet) !important;
	letter-spacing: 1px;
	display: flex;
	align-items: center;
}
.navbar-brand img {
	width: 45px; height: 45px; object-fit: cover; border-radius: 50%;
	margin-right: 10px; border: 2px solid var(--primary-violet);
}
@media (max-width: 420px) {
	.navbar-brand { font-size: 1rem; letter-spacing: .5px; }
	.navbar-brand img { width: 38px; height: 38px; }
}
.navbar .nav-link.active { color: var(--dark-violet); font-weight: 600; }

.btn-primary { background-color: var(--primary-violet); border-color: var(--primary-violet); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--dark-violet); border-color: var(--dark-violet); }
.btn-outline-primary { color: var(--dark-violet); border-color: var(--primary-violet); }
.btn-outline-primary:hover, .btn-outline-primary.active {
	background-color: var(--primary-violet); border-color: var(--primary-violet); color: #fff;
}
.btn-danger { font-weight: bold; animation: pulse 2s infinite; }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .btn-danger { animation: none; } }

.hero-section {
	background: linear-gradient(135deg, rgba(168,85,247,0.1) 0%, rgba(253,224,71,0.1) 100%);
	padding: 100px 0 50px;
	margin-top: 50px;
}
.hero-section.hero-compact { padding: 90px 0 30px; }
.hero-title { color: var(--dark-violet); font-weight: 800; }
.section-title { color: var(--dark-violet); font-weight: bold; margin-bottom: 2rem; text-align: center; }
footer.site-footer { background-color: var(--dark-violet); color: white; }
footer.site-footer a { color: #fff; }

/* ---- Filtro de categorías ---- */
.cat-filter .btn { border-radius: 50rem; }

/* ---- Tarjetas de artículos (mismo estilo que .prof-card del sitio) ---- */
.post-card {
	border: none; border-radius: 15px; overflow: hidden;
	box-shadow: 0 4px 15px rgba(0,0,0,0.05);
	transition: transform 0.3s;
	height: 100%;
}
.post-card:hover { transform: translateY(-5px); }
@media (prefers-reduced-motion: reduce) { .post-card, .post-card:hover { transition: none; transform: none; } }
.post-card .card-img-top { aspect-ratio: 16 / 9; object-fit: cover; }
.post-card .card-title a { color: inherit; text-decoration: none; }
.post-card .card-title a::after { content: ""; position: absolute; inset: 0; }
.post-card .card-title a:hover { color: var(--dark-violet); }
.post-placeholder {
	aspect-ratio: 16 / 9;
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, rgba(168,85,247,0.15) 0%, rgba(253,224,71,0.15) 100%);
	color: var(--primary-violet); font-size: 3rem;
}
.post-cat {
	position: relative; z-index: 2;
	display: inline-block; font-size: .8rem; font-weight: 600;
	color: var(--dark-violet); background: rgba(168,85,247,0.12);
	border-radius: 50rem; padding: .2rem .7rem; text-decoration: none;
}
.post-cat:hover { background: var(--primary-violet); color: #fff; }
.post-meta { font-size: .875rem; color: #6c757d; }

/* ---- Artículo ---- */
.article-wrap { max-width: 760px; margin: 0 auto; }
.article-cover { border-radius: 15px; width: 100%; height: auto; max-height: 460px; object-fit: cover; }
.entry-content { font-size: 1.125rem; line-height: 1.75; }
.entry-content > * + * { margin-top: 1.25rem; }
.entry-content h2, .entry-content h3, .entry-content h4 {
	color: var(--dark-violet); font-weight: bold; margin-top: 2.5rem; line-height: 1.3;
}
.entry-content img { max-width: 100%; height: auto; border-radius: 10px; }
.entry-content figure { margin-left: 0; margin-right: 0; }
.entry-content figcaption, .wp-element-caption { font-size: .9rem; color: #6c757d; text-align: center; margin-top: .5rem; }
.entry-content blockquote, .entry-content .wp-block-quote {
	border-left: 4px solid var(--primary-violet);
	background: var(--light-bg); padding: 1rem 1.5rem; border-radius: 0 10px 10px 0;
	font-style: italic;
}
.entry-content blockquote p:last-child { margin-bottom: 0; }
.entry-content a { text-decoration: underline; text-underline-offset: 3px; }
.entry-content .wp-block-button__link { background: var(--primary-violet); border-radius: 50rem; text-decoration: none; }
.entry-content .wp-block-button__link:hover { background: var(--dark-violet); }
.entry-content table { width: 100%; border-collapse: collapse; }
.entry-content td, .entry-content th { border: 1px solid #dee2e6; padding: .5rem .75rem; }
.alignleft { float: left; margin: .3rem 1.5rem 1rem 0; }
.alignright { float: right; margin: .3rem 0 1rem 1.5rem; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.help-box {
	background: var(--light-bg); border-left: 4px solid #dc3545;
	border-radius: 0 15px 15px 0; padding: 1.25rem 1.5rem;
}
.share a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; border-radius: 50%;
	background: var(--light-bg); color: var(--dark-violet); text-decoration: none; font-size: 1.15rem;
}
.share a:hover, .share button:hover { background: var(--primary-violet); color: #fff; }
.share button {
	width: 42px; height: 42px; border-radius: 50%; border: 0;
	background: var(--light-bg); color: var(--dark-violet); font-size: 1.15rem;
}

/* ---- Paginación ---- */
.navigation.pagination .nav-links { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.navigation.pagination .page-numbers {
	min-width: 42px; height: 42px; padding: 0 .75rem;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50rem; text-decoration: none; color: var(--dark-violet); background: var(--light-bg);
}
.navigation.pagination .page-numbers.current, .navigation.pagination a.page-numbers:hover {
	background: var(--primary-violet); color: #fff;
}