/*
/*
Theme Name: Meytam Stream
Theme URI: https://meytam.com.pe/Meytam-Stream
Author: Tu Nombre
Author URI: https://example.com
Description: Tema Diseñado para radios online
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: Meytam-Stream
*/
html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    font-family: Arial, Helvetica, sans-serif;
}
.site-content {
    flex: 1;
}

/* ======== HEADER ======== */
.sticky-header {
    position: sticky;
    top: 0;
    z-index: 999;
    background: linear-gradient(90deg, #27ae60, #e74c3c); /* Rojo a verde */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    padding: 0.5rem 0;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Logo */
.logo img.site-logo {
    max-height: 80px;
    width: auto;
    transition: max-height 0.3s ease;
}

/* Contenido extra (etiqueta HTML vacía) */
.extra-content {
    padding: 0.5rem;
    text-align: center;
    color: #fff;
}

/* Menú */
.main-nav {
    display: flex;
    align-items: center;
}
.nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 1rem;
}
.nav-menu li {
    display: inline-block;
}
.nav-menu a {
    color: #000; /* Negro */
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; /* Fuente legible */
    font-size: 18px; /* Tamaño moderado */
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}
.nav-menu a:hover {
    color: #f1c40f; /* Amarillo al pasar el ratón */
}

/* ======== BODY ======== */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
}

/* ====== Mantener footer al fondo ====== */
html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}

/* Empuja el footer hacia abajo */
.site-content {
    flex: 1;
}

/* ====== FOOTER ====== */
.site-footer {
    background: linear-gradient(90deg, #e74c3c, #27ae60);
    color: #fff;
    padding: 1rem;
    text-align: center;
}

.footer-container {
    max-width: 1100px;
    margin: 0 auto;
}

/* Logo principal */
.footer-logo-container {
    margin-bottom: 1rem;
}

.footer-logo {
    max-height: 60px;
    width: auto;
}

/* Redes sociales y Play Store */
.footer-social {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1rem 0;
    gap: 0.5rem;
}

.playstore-logo {
    max-height: 40px;
    width: auto;
    margin-bottom: 0.5rem;
}

.social-icons {
    display: flex;
    gap: 1rem;
}

.social-icons a {
    color: #fff;
    font-size: 1.3rem;
    transition: color 0.3s ease;
}

.social-icons a:hover {
    color: #f1c40f;
}

/* ====== Menú del footer ====== */
.footer-menu {
    margin-top: 1rem;
    text-align: left;
}

.footer-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-nav li {
    margin-bottom: 0.3rem;
    position: relative;
    padding-left: 1.2rem; /* espacio para el icono */
}

/* Icono verde check para menú */
.footer-nav li::before {
    content: "\f00c"; /* check */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 0;
    color: #2ecc71; /* verde */
    font-size: 0.9rem;
}

.footer-nav a {
    color: #fff;
    text-decoration: none;
}

.footer-nav a:hover {
    text-decoration: underline;
}

/* ====== Últimas entradas ====== */
.footer-latest-posts {
    margin-top: 1rem;
    text-align: left;
}

.footer-latest-posts ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-latest-posts li {
    margin-bottom: 0.3rem;
    position: relative;
    padding-left: 1.4rem; /* espacio para el icono */
}

/* Icono newspaper para entradas */
.footer-latest-posts ul li::before {
    content: "\f1ea"; /* newspaper */
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
    position: absolute;
    left: 0;
    top: 0;
    color: #f39c12; /* naranja */
    font-size: 0.9rem;
}

.footer-latest-posts a {
    color: #fff;
    text-decoration: none;
}

.footer-latest-posts a:hover {
    text-decoration: underline;
}

/* ====== Línea inferior ====== */
.footer-bottom {
    margin-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    padding-top: 0.5rem;
    font-size: 0.9rem;
}