/**
Theme Name: Consejo comunitario afro ourula
Theme URI:
Author: Studios MyD
Author URI:
Description: Tema WordPress para el Consejo Comunitario Afro Ourula.
Version: 4.12.7
Requires at least: 5.3
WC requires at least: 3.0
WC tested up to: 10.6.2
Tested up to: 6.9
Requires PHP: 5.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra
Domain Path: /languages
Tags: custom-menu, custom-logo, entertainment, one-column, two-columns, left-sidebar, e-commerce, right-sidebar, custom-colors, editor-style, featured-images, full-width-template, microformats, post-formats, rtl-language-support, theme-options, threaded-comments, translation-ready, blog
AMP: true

Consejo comunitario afro ourula WordPress Theme, Copyright 2024 Studios MyD.
This theme is distributed under the terms of the GNU GPL.

This theme is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of.
Nicolas Gallagher and Jonathan Neal https://necolas.github.com/normalize.css/

Icon font is based on IcoMoon-Free vector icon by Keyamoon.
IcoMoon-Free vector icon distributed under terms of CC BY 4.0 or GPL. (https://creativecommons.org/licenses/by/4.0/ or https://www.gnu.org/licenses/gpl.html)
Source: http://keyamoon.com/

Flexibility is a JavaScript polyfill for Flexbox By Jonathan Neal, 10up. (https://github.com/jonathantneal/flexibility)
Licensed under MIT ( https://github.com/jonathantneal/flexibility/blob/master/LICENSE.md )

Default breadcrumb is based on Breadcrumb Trail by Justin Tadlock. (https://github.com/justintadlock/breadcrumb-trail)
Breadcrumb Trail is distributed under the terms of the GNU GPL v2 or later.

Local fonts feature is based on Webfonts Loader by WordPress Themes Team (WPTT). (https://github.com/WPTT/webfont-loader)
Licensed under MIT ( https://github.com/WPTT/webfont-loader/blob/master/LICENSE )

/* =====================================================
   ESTILOS PRINCIPALES
   ===================================================== */

/* Reset y base */
*, *::before, *::after { box-sizing: border-box; }

html {
	font-size: 16px;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	padding: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
	font-size: 1rem;
	line-height: 1.7;
	color: #3a3a3a;
	background-color: #fff;
}

img { max-width: 100%; height: auto; display: block; }

a { color: #1565c0; text-decoration: none; }
a:hover { color: #0d47a1; text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 1rem;
	line-height: 1.3;
	font-weight: 700;
	color: #1a1a1a;
}

p { margin: 0 0 1.25rem; }

ul, ol { margin: 0 0 1.25rem; padding-left: 1.5rem; }

/* =====================================================
   ESTRUCTURA
   ===================================================== */

#page { display: flex; flex-direction: column; min-height: 100vh; }

#content {
	flex: 1;
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
	padding: 2rem 1.5rem;
}

#primary { width: 100%; }

/* =====================================================
   CABECERA
   ===================================================== */

.site-header {
	background: #1a1a2e;
	color: #fff;
	padding: 0 1.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
	position: sticky;
	top: 0;
	z-index: 100;
}

.site-branding { padding: 1rem 0; }

.site-title {
	margin: 0;
	font-size: 1.4rem;
	font-weight: 700;
}

.site-title a { color: #fff; text-decoration: none; }
.site-title a:hover { color: #e0e0e0; text-decoration: none; }

.site-description {
	margin: 0;
	font-size: 0.85rem;
	color: #b0b0c0;
}

/* =====================================================
   MENÚ DE NAVEGACIÓN
   ===================================================== */

.main-navigation { display: flex; align-items: center; }

.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0;
}

.main-navigation li { position: relative; }

.main-navigation a {
	display: block;
	padding: 1.25rem 1rem;
	color: #e0e0e0;
	font-size: 0.9rem;
	font-weight: 500;
	text-decoration: none;
	transition: color 0.2s, background 0.2s;
	white-space: nowrap;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a {
	color: #fff;
	background: rgba(255,255,255,0.1);
	text-decoration: none;
}

/* Submenús */
.main-navigation ul ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: #1a1a2e;
	min-width: 200px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.3);
	flex-direction: column;
	z-index: 200;
}

.main-navigation li:hover > ul { display: flex; }

.main-navigation ul ul a { padding: 0.75rem 1rem; font-size: 0.85rem; }

/* =====================================================
   ENTRADAS Y PÁGINAS
   ===================================================== */

.site-main { max-width: 860px; }

article.post,
article.page {
	margin-bottom: 3rem;
	padding-bottom: 3rem;
	border-bottom: 1px solid #e8e8e8;
}

article.post:last-child,
article.page:last-child { border-bottom: none; }

.entry-header { margin-bottom: 1.5rem; }

.entry-title { font-size: 1.75rem; margin-bottom: 0.5rem; }
.entry-title a { color: #1a1a1a; }
.entry-title a:hover { color: #1565c0; text-decoration: none; }

.entry-meta {
	font-size: 0.85rem;
	color: #757575;
	margin-bottom: 0.5rem;
}

.entry-meta span { margin-right: 1rem; }

.post-thumbnail { margin-bottom: 1.5rem; border-radius: 6px; overflow: hidden; }
.post-thumbnail img { width: 100%; }

.entry-content { font-size: 1rem; line-height: 1.8; }

.entry-content h2 { font-size: 1.4rem; margin-top: 2rem; }
.entry-content h3 { font-size: 1.2rem; margin-top: 1.5rem; }

.read-more {
	display: inline-block;
	margin-top: 1rem;
	padding: 0.5rem 1.25rem;
	background: #1565c0;
	color: #fff;
	border-radius: 4px;
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s;
}

.read-more:hover { background: #0d47a1; color: #fff; text-decoration: none; }

/* =====================================================
   PIE DE PÁGINA
   ===================================================== */

.site-footer {
	background: #1a1a2e;
	color: #b0b0c0;
	padding: 2rem 1.5rem;
	text-align: center;
	font-size: 0.875rem;
}

.site-footer a { color: #b0b0c0; }
.site-footer a:hover { color: #fff; }

.site-info { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }

.footer-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
}

.footer-navigation a { color: #b0b0c0; font-size: 0.85rem; }
.footer-navigation a:hover { color: #fff; text-decoration: none; }

/* =====================================================
   COMENTARIOS
   ===================================================== */

.comments-area { margin-top: 3rem; }

.comments-title { font-size: 1.4rem; margin-bottom: 1.5rem; }

.comment-list { list-style: none; padding: 0; margin: 0 0 2rem; }

.comment-body {
	background: #f8f8f8;
	border-radius: 6px;
	padding: 1.25rem;
	margin-bottom: 1rem;
}

.comment-meta { font-size: 0.85rem; color: #757575; margin-bottom: 0.5rem; }

.comment-navigation {
	display: flex;
	justify-content: space-between;
	margin: 1.5rem 0;
	font-size: 0.9rem;
}

/* =====================================================
   BÚSQUEDA Y RESULTADOS
   ===================================================== */

.page-header { margin-bottom: 2rem; }
.page-title { font-size: 1.6rem; }

.no-results .page-content { font-size: 1rem; }

/* =====================================================
   PAGINACIÓN
   ===================================================== */

.navigation.posts-navigation,
.navigation.pagination {
	display: flex;
	justify-content: space-between;
	margin: 2rem 0;
	font-size: 0.9rem;
}

.nav-links a {
	display: inline-block;
	padding: 0.5rem 1rem;
	border: 1px solid #ddd;
	border-radius: 4px;
	color: #1565c0;
}

.nav-links a:hover { background: #f5f5f5; text-decoration: none; }

/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 768px) {
	.site-header {
		flex-direction: column;
		align-items: flex-start;
		padding: 0.75rem 1rem;
	}

	.main-navigation { width: 100%; }

	.main-navigation ul { flex-direction: column; width: 100%; }

	.main-navigation a { padding: 0.75rem 0; border-bottom: 1px solid rgba(255,255,255,0.08); }

	.main-navigation ul ul { position: static; box-shadow: none; display: none; }

	#content { padding: 1.5rem 1rem; }

	.entry-title { font-size: 1.4rem; }
}