/*
Theme Name: AVV Miranda
Theme URI: http://avvmiranda.tk
Author: Luis Padrón — PuertoLab
Author URI: http://www.puertolab.com
Description: Tema oficial de la Asociación Voluntarios Venezuela, Municipio Miranda, Edo. Zulia.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: avvmiranda
Tags: orange, responsive, blog, custom-menu
*/

/* ============================================================
   AVV Miranda — Telephasic 1.0 — WordPress Theme
   ============================================================ */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Base ── */
body {
	background: #f5f7fa;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 300;
	color: #52575c;
	font-size: 15px;
	line-height: 1.8;
}
h1 { font-size: 2em; line-height: 1.2; margin-bottom: 0.6em; font-weight: 300; color: #42474c; }
h2 { font-size: 1.75em; line-height: 1.25; margin-bottom: 0.6em; font-weight: 300; color: #42474c; }
h3 { font-size: 1.25em; line-height: 1.4; margin-bottom: 0.5em; font-weight: 300; color: #42474c; }
p  { margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }
a  { color: inherit; text-decoration: none; border-bottom: dotted 1px #62676c;
     transition: color .25s, border-color .25s; }
a:hover { color: #f35858; border-bottom-color: transparent; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { padding-left: 1.4em; }
hr  { border: 0; border-top: solid 1px #ddd; margin: 2em 0; }

/* ── Container ── */
.container { max-width: 1100px; margin: 0 auto; padding: 0 2em; }

/* ── Grid ── */
.row   { display: flex; flex-wrap: wrap; gap: 2.5em; }
.col-6 { flex: 0 0 calc(50% - 1.25em); min-width: 0; }
.col-4 { flex: 0 0 calc(33.333% - 1.67em); min-width: 0; }
.col-3 { flex: 0 0 calc(25% - 1.875em); min-width: 0; }
.feature { text-align: center; }

/* ────────────────────────────────
   HEADER
   ──────────────────────────────── */
#header-wrapper {
	position: relative;
	background: linear-gradient(75deg, #FF9900 15%, #FF6600 55%);
	padding: 6.5em 0 3.5em;
	overflow: visible;
}
#header-wrapper::before {
	content: '';
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(
		45deg,
		rgba(255,255,255,.04) 0,
		rgba(255,255,255,.04) 1px,
		transparent 1px,
		transparent 8px
	);
	pointer-events: none;
}

/* ── Logo ── */
#logo {
	position: absolute;
	top: 0; left: 50%;
	transform: translateX(-50%);
	width: 10em; height: 5.5em;
	z-index: 3;
}
#logo a {
	display: flex; align-items: center; justify-content: center;
	width: 100%; height: 100%;
	background: rgba(255,255,255,.18);
	border: solid 1px rgba(255,255,255,.8);
	border-top: 0; border-bottom: 0;
	border-radius: 0 0 .35em .35em;
	color: #fff; font-weight: 700; font-size: 1.05em;
	letter-spacing: 4px; text-transform: uppercase;
	transition: background .25s;
}
#logo a:hover { background: rgba(255,255,255,.3); }

/* ── Nav ── */
#nav { position: relative; text-align: center; z-index: 2; margin-bottom: 1em; }
#nav ul { list-style: none; padding: 0; }
#nav > ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .2em; }
#nav > ul > li { position: relative; padding-bottom: .7em; margin-bottom: -.7em; }
#nav > ul > li > a {
	display: inline-block; color: #fff;
	border: solid 1px transparent; border-radius: .35em;
	padding: .3em .85em; font-size: .95em; white-space: nowrap;
	transition: border-color .25s, background-color .25s;
}
#nav > ul > li:hover > a { border-color: rgba(255,255,255,.75); background: rgba(255,255,255,.15); }

/* ── Dropdown ── */
#nav > ul > li > ul {
	display: none; position: absolute;
	top: 100%; left: 50%; transform: translateX(-50%);
	min-width: 12em; background: #fff;
	border-radius: .35em; box-shadow: 0 3px 10px rgba(0,0,0,.15);
	padding: .6em 0; list-style: none; z-index: 500; text-align: left;
}
#nav > ul > li > ul::before {
	content: ''; position: absolute;
	top: -.7em; left: 0; width: 100%; height: .7em;
}
#nav > ul > li > ul::after {
	content: ''; position: absolute;
	top: -.42em; left: 50%; margin-left: -.42em;
	border-bottom: .42em solid #fff;
	border-left: .42em solid transparent;
	border-right: .42em solid transparent;
}
#nav > ul > li:hover > ul { display: block; }
#nav > ul > li > ul li a {
	display: block; padding: .55em 1.1em; color: #52575c;
	border: 0; border-top: solid 1px #f0f0f0;
	font-size: .9em; white-space: nowrap;
	transition: color .2s, background .2s;
}
#nav > ul > li > ul li:first-child a { border-top: 0; }
#nav > ul > li > ul li a:hover { color: #f35858; background: #fafafa; }

/* ── Hero text ── */
#hero { text-align: center; color: #fff; position: relative; z-index: 1; }
#hero p { font-size: 1.3em; color: rgba(255,255,255,.95); letter-spacing: .5px; }

/* ────────────────────────────────
   BANNER IMAGE
   ──────────────────────────────── */
.bienvenida img { width: 100%; height: auto; display: block; }
.blog-banner {
	width: 100%; height: 260px; object-fit: cover;
	display: block; background: linear-gradient(75deg,#FF9900,#FF6600);
}

/* ────────────────────────────────
   CONTENT WRAPPER
   ──────────────────────────────── */
.wrapper { background: #fff; padding: 4em 0; }

/* ── Section images ── */
.section-img {
	width: 100%; height: 210px; object-fit: cover;
	border-radius: .25em; margin-bottom: 1.2em;
}

/* ── Sidebar layout ── */
.sidebar-layout { display: flex; gap: 3em; align-items: flex-start; }
.sidebar-col-narrow { flex: 0 0 240px; }
.sidebar-col-wide   { flex: 1; min-width: 0; }
.sidebar-box {
	background: #f9fafb; border: solid 1px #e4e8ec;
	border-radius: .35em; padding: 1.6em;
}
.sidebar-box h3 {
	font-weight: 600; color: #42474c;
	border-bottom: solid 1px #e4e8ec;
	padding-bottom: .5em; margin-bottom: 1em;
}
.sidebar-box p { font-size: .95em; line-height: 1.9; }

/* ── Button ── */
.button {
	display: inline-block; padding: .6em 1.6em;
	border: solid 1px #c2c7cc; border-radius: .35em;
	color: #52575c; font-size: .88em; letter-spacing: .3px;
	transition: color .25s, border-color .25s;
}
.button:hover { color: #f35858; border-color: rgba(243,88,88,.5); }

/* ── Forms ── */
.form-grid-2 { display: flex; gap: 1em; margin-bottom: .8em; }
.form-grid-2 > * { flex: 1; min-width: 0; }
.form-field { margin-bottom: .8em; }
input[type="text"], input[type="email"], input[type="password"],
textarea, select {
	display: block; width: 100%; padding: .75em 1em;
	background: #f5f6f7; border: solid 1px #d2d7dc;
	border-radius: .35em; font-family: inherit;
	font-size: .92em; color: #52575c;
	transition: background .25s, border-color .25s;
}
input:focus, textarea:focus, select:focus {
	outline: none; background: #fff; border-color: #aaa;
}
textarea { min-height: 8em; resize: vertical; }
.btn-send {
	display: inline-block; padding: .7em 2em;
	background: linear-gradient(75deg, #FF9900 15%, #FF6600 55%);
	color: #fff; border: none; border-radius: .35em;
	font-family: inherit; font-size: .92em; font-weight: 600;
	cursor: pointer; margin-right: .5em; transition: opacity .25s;
}
.btn-send:hover { opacity: .85; color: #fff; }
.btn-reset {
	display: inline-block; padding: .7em 2em; background: none;
	color: #52575c; border: solid 1px #c2c7cc; border-radius: .35em;
	font-family: inherit; font-size: .92em; cursor: pointer;
	transition: color .25s, border-color .25s;
}
.btn-reset:hover { color: #f35858; border-color: rgba(243,88,88,.5); }

/* ────────────────────────────────
   BLOG
   ──────────────────────────────── */
.blog-layout { display: flex; gap: 2.5em; align-items: flex-start; }
.blog-main   { flex: 1; min-width: 0; }
.blog-aside  { flex: 0 0 300px; min-width: 0; }

.post-card {
	background: #fff; border: solid 1px #e8ecf0;
	border-radius: .4em; overflow: hidden;
	margin-bottom: 2em;
	transition: box-shadow .2s;
}
.post-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.1); }
.post-thumb { width: 100%; height: 220px; object-fit: cover; display: block; }
.post-body  { padding: 1.5em; }
.post-body h2 { font-size: 1.4em; margin-bottom: .3em; }
.post-body h2 a { border-bottom: none; color: #42474c; }
.post-body h2 a:hover { color: #FF6600; }
.post-meta  { font-size: .8em; color: #aaa; margin-bottom: .9em; }
.post-excerpt { font-size: .93em; line-height: 1.75; margin-bottom: 1em; }

/* single post */
.single-post { background: #fff; border: solid 1px #e8ecf0; border-radius: .4em; overflow: visible; }
.single-post .post-cover { width: 100%; max-height: 400px; object-fit: cover; display: block; border-radius: .4em .4em 0 0; }
.single-post .post-body  { padding: 2em; }
.single-post h1 { font-size: 1.8em; margin-bottom: .4em; }
.post-content { font-size: .95em; line-height: 1.85; }
.post-content p { margin-bottom: 1.2em; }
.post-content img { border-radius: .25em; margin: 1em 0; }
.post-content h2, .post-content h3 { margin-top: 1.5em; }

/* comments */
.comments-section { margin-top: 2.5em; }
.comments-section h3 { font-size: 1.2em; border-bottom: solid 1px #e8e8e8; padding-bottom: .5em; margin-bottom: 1.2em; }
.comment-item { padding: 1em 0; border-bottom: solid 1px #f0f0f0; font-size: .9em; }
.comment-author { font-weight: 600; color: #42474c; margin-bottom: .2em; }
.comment-date { font-size: .78em; color: #aaa; margin-bottom: .5em; }
.comment-form { margin-top: 2em; }
.comment-form h3 { font-size: 1.1em; margin-bottom: 1em; }

/* pagination */
.pagination { text-align: center; margin-top: 2em; }
.pagination a, .pagination span {
	display: inline-block; padding: .4em .85em; margin: 0 .15em;
	border: solid 1px #d2d7dc; border-radius: .35em;
	color: #52575c; font-size: .88em;
}
.pagination a:hover { color: #FF6600; border-color: #FF6600; }
.pagination .current { background: #FF6600; color: #fff; border-color: #FF6600; }

/* sidebar widgets */
.widget { margin-bottom: 1.8em; }
.widget-title { font-size: 1em; font-weight: 600; color: #42474c;
	border-bottom: solid 2px #FF6600; padding-bottom: .4em; margin-bottom: .9em; }
.widget ul { list-style: none; padding: 0; }
.widget ul li { padding: .4em 0; border-bottom: solid 1px #f0f0f0; font-size: .88em; }
.widget ul li:last-child { border-bottom: none; }
.widget ul li a { border-bottom: none; color: #52575c; }
.widget ul li a:hover { color: #FF6600; }

/* ── Social feeds (homepage) ── */
.social-feed-card {
	border-radius: 12px; overflow: hidden;
	box-shadow: 0 2px 14px rgba(0,0,0,.08);
	border: 1px solid #e4e4e4;
}
.social-feed-header {
	padding: .75em 1em;
	display: flex; align-items: center; gap: .6em;
}
.social-feed-header .social-name { color: #fff; font-weight: 700; font-size: .9em; }
.social-feed-header .social-handle { color: rgba(255,255,255,.65); font-size: .75em; }
.social-feed-follow {
	margin-left: auto; background: #fff;
	border-radius: 20px; padding: .25em .85em;
	font-size: .78em; font-weight: 700;
	text-decoration: none; white-space: nowrap;
}
.social-feed-body { height: 380px; overflow: hidden; background: #fff; }

/* ── Contact ── */
.contact-layout { display: flex; gap: 3em; align-items: flex-start; }
.contact-form-col { flex: 0 0 42%; min-width: 0; }
.contact-info-col { flex: 1; min-width: 0; }
.contact-info-col ul { list-style: none; padding: 0; }
.contact-info-col ul li { padding: .7em 0; border-top: solid 1px #e8e8e8; font-size: .88em; line-height: 1.65; }
.contact-info-col ul li:first-child { border-top: 0; }
.contact-info-col strong { color: #42474c; }
.social-links { margin-bottom: 1.2em; }
.social-links a { display: block; padding: .4em 0; font-size: .9em; border-bottom: solid 1px #e8e8e8; }
.social-links a:last-child { border-bottom: 0; }
.map-wrap { margin-bottom: 2em; border-radius: .35em; overflow: hidden; box-shadow: 0 1px 6px rgba(0,0,0,.1); }
.map-wrap iframe { display: block; width: 100%; }
.section-heading { text-align: center; margin-bottom: 2em; }
.section-heading h2 { font-size: 1.6em; }

/* ── Gallery / Descargas ── */
.gallery { display: flex; flex-wrap: wrap; gap: 1em; justify-content: center; list-style: none; padding: 0; }
.gallery li img { border-radius: .25em; box-shadow: 0 1px 5px rgba(0,0,0,.12); }

/* ── Footer ── */
#copyright {
	background: #f5f7fa; border-top: solid 1px #d2d7dc;
	text-align: center; color: #a2a7ac;
	padding: 1.6em 0; font-size: .88em;
}
#copyright ul.menu { list-style: none; padding: 0; }
#copyright ul.menu li { display: inline-block; border-left: solid 1px #d2d7dc; padding-left: 1em; margin-left: 1em; }
#copyright ul.menu li:first-child { border-left: 0; padding-left: 0; margin-left: 0; }
#copyright ul.menu li a { color: #a2a7ac; border-bottom: dotted 1px #c2c7cc; }
#copyright ul.menu li a:hover { color: #f35858; border-bottom-color: transparent; }

/* ── Responsive ── */
@media (max-width: 900px) {
	.col-6, .col-4, .col-3 { flex: 0 0 100%; }
	.sidebar-layout  { flex-direction: column; }
	.sidebar-col-narrow { flex: none; width: 100%; }
	.contact-layout  { flex-direction: column; }
	.contact-form-col { flex: 0 0 100%; }
	.blog-layout { flex-direction: column; }
	.blog-aside { flex: none; width: 100%; }
}
@media (max-width: 600px) {
	body { font-size: 13px; }
	.container { padding: 0 1.2em; }
	#header-wrapper { padding: 5.5em 0 3em; }
	#logo { width: 8em; height: 4.8em; }
	#nav > ul { flex-direction: column; align-items: center; gap: 0; }
	#nav > ul > li { padding-bottom: 0; margin-bottom: 0; }
	#nav > ul > li > ul {
		position: static; transform: none;
		box-shadow: none; background: rgba(255,255,255,.12); border-radius: 0;
	}
	#nav > ul > li > ul::before,
	#nav > ul > li > ul::after { display: none; }
	#nav > ul > li > ul li a { color: rgba(255,255,255,.9); border-top-color: rgba(255,255,255,.1); }
	.form-grid-2 { flex-direction: column; }
	#copyright ul.menu li { display: block; border-left: 0; padding-left: 0; margin: .3em 0; }
	.section-img { height: 160px; }
}

/* BLOG GRID */
.blog-banner-hero{width:100%;background:linear-gradient(75deg,#FF9900 15%,#FF6600 55%);padding:3.5em 0;text-align:center;color:#fff}
.blog-banner-hero h1{color:#fff;font-size:2.2em;margin-bottom:.3em}
.blog-banner-hero p{color:rgba(255,255,255,.88);font-size:1.05em}
.blog-banner-img{width:100%;max-height:220px;object-fit:cover;display:block}
.posts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2em;padding:2.5em 0 1em}
.post-grid-card{background:#fff;border:solid 1px #e8ecf0;border-radius:.5em;overflow:hidden;transition:box-shadow .2s,transform .2s;display:flex;flex-direction:column}
.post-grid-card:hover{box-shadow:0 6px 24px rgba(0,0,0,.11);transform:translateY(-3px)}
.post-grid-img-link{display:block;overflow:hidden}
.post-grid-thumb{width:100%;height:200px;object-fit:cover;display:block;transition:transform .3s}
.post-grid-card:hover .post-grid-thumb{transform:scale(1.04)}
.post-grid-placeholder{width:100%;height:200px;background:linear-gradient(75deg,#FF9900 15%,#FF6600 55%);display:flex;align-items:center;justify-content:center}
.post-grid-placeholder span{color:#fff;font-size:1.6em;font-weight:700;letter-spacing:4px;opacity:.85}
.post-grid-body{padding:1.3em;flex:1;display:flex;flex-direction:column}
.post-grid-cat{display:inline-block;background:#FF6600;color:#fff;font-size:.72em;font-weight:700;padding:.2em .7em;border-radius:.2em;text-transform:uppercase;letter-spacing:.5px;margin-bottom:.65em;border:none}
.post-grid-cat:hover{background:#e55a00;color:#fff}
.post-grid-body h2{font-size:1.05em;margin-bottom:.3em;line-height:1.4}
.post-grid-body h2 a{color:#42474c;border:none}
.post-grid-body h2 a:hover{color:#FF6600}
.post-grid-meta{font-size:.78em;color:#b0b5ba;margin-bottom:.8em}
.post-grid-excerpt{font-size:.88em;line-height:1.7;color:#52575c;flex:1;margin-bottom:1em}
.post-grid-body .button{align-self:flex-start;font-size:.83em}
@media(max-width:900px){.posts-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:580px){.posts-grid{grid-template-columns:1fr}}