/**
 * Main Stylesheet for Temixco Gob Theme
 *
 * All custom styles that complement or override Tailwind CSS should be here.
 * This file should be minified to main.min.css for production.
 *
 * @package WordPress
 * @subpackage Temixco_Gob
 * @since Temixco Gob 1.0
 */

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 Variables & Global Styles
2.0 Navigation & Header
3.0 Custom Utility & Component Styles
4.0 Footer
5.0 WordPress Block Overrides
6.0 News Section Overrides
7.0 Calendar Overrides
8.0 Trámites y Servicios Page
9.0 Cabildo Page
10.0 Pago en Línea Page
11.0 Archive Pages
12.0 Single Post Page
13.0 Comments Section
14.0 Reports Slider Section
15.0 Directory Page
16.0 Voz Ciudadana Page
17.0 Autoridades Auxiliares Page
18.0 Gaceta Municipal Page
19.0 Contact Page
--------------------------------------------------------------*/

/*--------------------------------------------------------------
1.0 Variables & Global Styles
--------------------------------------------------------------*/
:root {
    --color-primary: #0B3E23;
    --color-secondary: #C3A26E;
    --color-accent-green: #005C22;
    --color-text: #575756;
    --color-background: #f8f8f7;
    --color-surface: #FFFFFF;
    --font-main: 'Krub', sans-serif;
}

body {
    font-family: var(--font-main);
    background-color: var(--color-background);
    color: var(--color-text);
}

/*--------------------------------------------------------------
2.0 Navigation & Header
--------------------------------------------------------------*/
/* Estilos para el logo personalizado */
.custom-logo-link .custom-logo {
    height: 4.5rem; /* 72px on desktop */
    width: auto;
    transition: height 0.3s ease;
}

/* Ajuste del logo para dispositivos móviles */
@media (max-width: 768px) {
    .custom-logo-link .custom-logo {
        height: 3.5rem; /* 56px on mobile */
    }
}

/* Estilos para los menús de WordPress */
.menu-item {
    position: relative;
}

.menu-item a {
    position: relative;
    transition: color 0.3s;
    padding: 0.5rem 0;
}

.menu-item a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-secondary);
    transition: width 0.3s ease-in-out;
}

.menu-item a:hover::after {
    width: 100%;
}

.menu-item a:hover {
    color: var(--color-primary);
}

/* Estilos para submenús desplegables */
.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--color-surface);
    border-radius: 0.375rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 0.5rem 0;
    min-width: 14rem; /* 224px */
    z-index: 20;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

.menu-item-has-children:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.sub-menu .menu-item a {
    padding: 0.5rem 1rem;
    display: block;
    width: 100%;
    color: var(--color-text);
}

.sub-menu .menu-item a:hover {
    background-color: var(--color-background);
    color: var(--color-primary);
}

.sub-menu .menu-item a::after {
    display: none; /* No mostrar la línea inferior en los submenús */
}


/*--------------------------------------------------------------
3.0 Custom Utility & Component Styles
--------------------------------------------------------------*/
/* Clases de utilidad para colores */
.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.border-primary { border-color: var(--color-primary); }
.border-secondary { border-color: var(--color-secondary); }

/* Estilos para botones */
.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-surface);
    transition: background-color 0.3s, transform 0.2s;
}

.btn-primary:hover {
    background-color: var(--color-accent-green);
    transform: translateY(-2px);
}

.btn-secondary {
    background-color: var(--color-secondary);
    color: var(--color-primary);
    transition: background-color 0.3s, transform 0.2s;
}

.btn-secondary:hover {
    background-color: #a88d5f; /* Tono más oscuro de dorado */
    transform: translateY(-2px);
}


/*--------------------------------------------------------------
4.0 Footer
--------------------------------------------------------------*/
footer.site-footer {
    background-color: var(--color-primary);
    color: #d1d5db; /* text-gray-300 */
}

.social-button {
    background-color: var(--color-secondary);
    color: var(--color-primary);
    transition: background-color 0.3s, transform 0.2s;
}

.social-button:hover {
    background-color: #a88d5f;
    transform: translateY(-2px);
}

/* Estilos para el menú de navegación del footer */
.site-footer .menu .menu-item a {
    color: #d1d5db;
    text-decoration: none;
    transition: color 0.3s ease;
}

.site-footer .menu .menu-item a:hover {
    color: var(--color-secondary) !important; /* Cambia a color dorado para visibilidad */
    text-decoration: underline; /* Solo añade el subrayado */
}

/* Ocultar la animación de la línea inferior para los menús del footer */
.site-footer .menu .menu-item a::after {
    display: none;
}

/*--------------------------------------------------------------
5.0 WordPress Block Overrides
--------------------------------------------------------------*/
/* Hero Banner Overrides */
.wp-block-cover .wp-block-heading {
    color: var(--color-secondary) !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.wp-block-cover p {
    color: white !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* Hacer transparente el contenedor de botones */
.wp-block-cover .wp-block-buttons {
    background-color: transparent !important;
}

.wp-block-cover .wp-block-button__link {
    background-color: var(--color-secondary) !important;
    color: var(--color-primary) !important;
    border-radius: 9999px !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    font-weight: 700 !important;
    font-size: 1.125rem !important;
    transition: background-color 0.3s, transform 0.2s;
}

.wp-block-cover .wp-block-button__link:hover {
    background-color: #a88d5f !important;
    transform: translateY(-2px);
}

/* Accesos Directos Overrides */
.wp-block-column.bg-surface {
    background-color: var(--color-surface);
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
}
.wp-block-column.bg-surface:hover {
    transform: translateY(-0.5rem);
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
}

/* Estilos para el contenedor del ícono en Accesos Directos */
.wp-block-column.bg-surface .wp-block-html > div {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4rem; /* 64px */
    width: 4rem; /* 64px */
    border-radius: 9999px; /* Círculo perfecto */
    background-color: var(--color-secondary);
    color: var(--color-primary);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
}

/* Estilos para el SVG dentro del contenedor */
.wp-block-column.bg-surface .wp-block-html > div svg {
    height: 2rem; /* 32px */
    width: 2rem; /* 32px */
}


/*--------------------------------------------------------------
6.0 News Section Overrides
--------------------------------------------------------------*/
/* Estilos para la noticia destacada (columna izquierda) */
.wp-block-query .wp-block-post-featured-image {
    margin-bottom: 0;
    background-color: #f3f4f6; /* Gris claro de respaldo */
}
.wp-block-query .wp-block-post-featured-image img {
    width: 100%;
    height: 20rem; /* 320px */
    object-fit: cover;
}

.wp-block-query .wp-block-post-title a {
    color: var(--color-primary);
    font-size: 1.5rem; /* 24px */
    font-weight: 700;
    text-decoration: none;
    line-height: 1.2;
}

.wp-block-query .wp-block-post-excerpt {
    margin-top: 1rem;
    font-size: 1rem;
}

/* Estilo para el enlace "Leer más" del extracto */
.wp-block-post-excerpt__more-link {
    display: inline-block;
    margin-top: 1rem;
    background-color: var(--color-primary);
    color: var(--color-surface) !important; /* !important para sobreescribir color de enlace */
    border-radius: 0.375rem;
    padding: 0.5rem 1.25rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.3s, transform 0.2s;
}

.wp-block-post-excerpt__more-link:hover {
    background-color: var(--color-accent-green);
    transform: translateY(-2px);
    text-decoration: none;
}

/* Estilos para las noticias secundarias (columna derecha) */
.wp-block-query .wp-block-columns.items-center {
    align-items: center;
}

.wp-block-query .wp-block-columns .wp-block-post-featured-image {
    background-color: #f3f4f6; /* Gris claro de respaldo */
}

.wp-block-query .wp-block-columns .wp-block-post-featured-image img {
    height: 6rem; /* 96px */
    width: 100%;
    object-fit: cover;
}

.wp-block-query .wp-block-columns .wp-block-post-title a {
    font-size: 1rem; /* 16px */
    font-weight: 700;
    padding: 1rem;
    display: block;
    text-decoration: none;
    line-height: 1.3;
}

/*--------------------------------------------------------------
7.0 Calendar Overrides
--------------------------------------------------------------*/
#calendar-container .has-event {
    position: relative;
}
/* Punto indicador para días con eventos */
#calendar-container .has-event::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--color-primary);
}
#calendar-container .selected-day {
    background-color: var(--color-secondary);
    color: var(--color-primary);
}

/*--------------------------------------------------------------
8.0 Trámites y Servicios Page
--------------------------------------------------------------*/
.tramites-filters select,
.tramites-filters input[type="search"] {
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db; /* border-gray-300 */
}

.tramite-card {
    border-top: 4px solid var(--color-secondary);
    transition: transform 0.3s, box-shadow 0.3s;
}

.tramite-card:hover {
    transform: translateY(-0.5rem);
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
}

/*--------------------------------------------------------------
9.0 Cabildo Page
--------------------------------------------------------------*/
.cabildo-card, .cabildo-card-presidente {
    transition: transform 0.3s, box-shadow 0.3s;
}

.cabildo-card:hover, .cabildo-card-presidente:hover {
    transform: translateY(-0.5rem);
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
}

/* Centrar la última tarjeta de regidor si está sola en la última fila */
@media (min-width: 1024px) { /* Corresponde al breakpoint 'lg' de Tailwind */
    .regidores-grid-section .grid .cabildo-card:last-child:nth-child(3n + 1) {
        grid-column-start: 2;
    }
}

/*--------------------------------------------------------------
10.0 Pago en Línea Page
--------------------------------------------------------------*/
.payment-card {
    border-top: 4px solid var(--color-secondary);
    transition: transform 0.3s, box-shadow 0.3s;
}

.payment-card:hover {
    transform: translateY(-0.5rem);
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
}

.payment-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 5rem; /* 80px */
    width: 5rem; /* 80px */
    border-radius: 9999px; /* Círculo perfecto */
    background-color: var(--color-secondary);
    color: var(--color-primary);
}

/*--------------------------------------------------------------
11.0 Archive Pages
--------------------------------------------------------------*/
.page-header .page-title {
    color: var(--color-primary);
    text-align: center;
}

.archive .site-main article {
    border-top: 4px solid var(--color-secondary);
}

.archive .site-main .wp-block-post-featured-image img {
    border-radius: 0; /* Sin borde redondeado para que encaje con la tarjeta */
    box-shadow: none;
}

.archive .site-main .wp-block-post-title a {
    color: var(--color-primary);
    font-size: 1.25rem; /* 20px */
    font-weight: 700;
    text-decoration: none;
}

.archive .site-main .wp-block-post-excerpt {
    margin-top: 0.5rem;
    font-size: 0.875rem; /* 14px */
}

.archive .site-main .wp-block-post-excerpt__more-link {
    display: inline-block;
    margin-top: 1rem;
    background-color: var(--color-primary);
    color: var(--color-surface) !important;
    border-radius: 0.375rem;
    padding: 0.5rem 1.25rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.3s, transform 0.2s;
}

.archive .site-main .wp-block-post-excerpt__more-link:hover {
    background-color: var(--color-accent-green);
    transform: translateY(-2px);
}

/*--------------------------------------------------------------
12.0 Single Post Page
--------------------------------------------------------------*/
/* Contenedor principal para la vista de una sola entrada */
.single-post-container {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Estilos para el contenido del post (prose) */
.entry-content {
    color: #374151; /* text-gray-700 */
    line-height: 1.75;
}

.entry-content p {
    margin-bottom: 1.25em;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
    color: var(--color-primary);
    font-weight: 700;
    margin-top: 2em;
    margin-bottom: 1em;
    line-height: 1.3;
}

.entry-content h2 {
    font-size: 1.875rem; /* text-3xl */
}

.entry-content h3 {
    font-size: 1.5rem; /* text-2xl */
}

.entry-content ul {
    list-style-type: disc;
    padding-left: 1.5em;
    margin-bottom: 1.25em;
}

.entry-content ol {
    list-style-type: decimal;
    padding-left: 1.5em;
    margin-bottom: 1.25em;
}

.entry-content li {
    margin-bottom: 0.5em;
}

.entry-content blockquote {
    border-left: 4px solid var(--color-secondary);
    padding-left: 1em;
    font-style: italic;
    color: #6b7280; /* text-gray-500 */
}

/*--------------------------------------------------------------
13.0 Comments Section
--------------------------------------------------------------*/
.comments-area {
    margin-top: 4rem; /* 64px */
    padding-top: 2rem; /* 32px */
    border-top: 1px solid #e5e7eb; /* border-gray-200 */
}

.comments-title,
.comment-reply-title {
    font-size: 1.875rem; /* text-3xl */
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 2rem; /* 32px */
}

.comment-form p {
    margin-bottom: 1.5rem; /* 24px */
}

.comment-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem; /* 8px */
    color: var(--color-text);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db; /* border-gray-300 */
    border-radius: 0.375rem; /* rounded-md */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.comment-form .form-submit .submit {
    /* Reutilizamos la clase de botón principal */
    background-color: var(--color-primary);
    color: var(--color-surface);
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}

.comment-form .form-submit .submit:hover {
    background-color: var(--color-accent-green);
    transform: translateY(-2px);
}

/*--------------------------------------------------------------
14.0 Reports Slider Section
--------------------------------------------------------------*/
.reports-slider {
    width: 100%;
    height: auto;
    padding: 0 40px; /* Espacio para las flechas de navegación */
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: stretch; /* Asegura que las tarjetas tengan la misma altura */
    background: transparent;
    height: auto; /* Permite que el contenido defina la altura */
}

.report-card-flat {
    width: 100%;
    max-width: 280px;
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
    height: 100%; /* Asegura que la tarjeta ocupe todo el espacio del slide */
}

.report-card-flat:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
}

.report-card-image-wrapper {
    height: 250px; /* Altura fija para la imagen */
    background-color: white;
    padding: 1rem; /* Espaciado para la imagen */
    border-top: 4px solid var(--color-secondary);
    border-radius: 0.5rem 0.5rem 0 0;
}

.report-card-image {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ajusta la imagen verticalmente sin cortarla */
    border-radius: 9999px; /* Hace la imagen redonda */
}

/* Estilos para los botones de navegación de Swiper */
.swiper-button-next,
.swiper-button-prev {
    color: var(--color-primary) !important;
    background-color: white;
    border-radius: 50%;
    width: 50px !important;
    height: 50px !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: background-color 0.3s;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background-color: #f0f0f0;
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 20px !important;
    font-weight: bold;
}

/*--------------------------------------------------------------
15.0 Directory Page
--------------------------------------------------------------*/
.accordion-item {
    border-bottom: 1px solid #e5e7eb; /* border-gray-200 */
}

.accordion-header {
    width: 100%;
    padding: 1rem 1.5rem;
    font-weight: 700;
    font-size: 1.125rem; /* text-lg */
    color: var(--color-primary);
    text-align: left;
    background-color: #f9fafb; /* bg-gray-50 */
    cursor: pointer;
    transition: background-color 0.3s;
    position: relative;
}

.accordion-header:hover {
    background-color: #f3f4f6; /* bg-gray-100 */
}

.accordion-header::after {
    content: '\f078'; /* Icono de flecha hacia abajo de Font Awesome */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 1.5rem;
    transition: transform 0.3s;
}

.accordion-header.active::after {
    transform: rotate(180deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background-color: white;
    padding: 0 1.5rem;
}

.accordion-content .overflow-x-auto {
    padding: 1.5rem 0;
}

.directory-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px; /* Evita que la tabla se comprima demasiado */
}

.directory-table th,
.directory-table td {
    padding: 0.75rem 1rem;
    border: 1px solid #e5e7eb; /* border-gray-200 */
    text-align: left;
    font-size: 0.875rem; /* text-sm */
}

.directory-table thead th {
    background-color: #f3f4f6; /* bg-gray-100 */
    font-weight: 700;
    color: var(--color-primary);
}

.directory-table tbody tr:nth-child(even) {
    background-color: #f9fafb; /* bg-gray-50 */
}

/*--------------------------------------------------------------
16.0 Voz Ciudadana Page
--------------------------------------------------------------*/
.info-card {
    background-color: var(--color-surface);
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
}

.info-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4rem;
    width: 4rem;
    border-radius: 9999px;
    background-color: var(--color-secondary);
    color: var(--color-primary);
    margin: 0 auto;
    font-size: 1.875rem; /* text-3xl */
}

.form-message {
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-radius: 0.375rem;
    font-weight: 600;
}

.form-message.success {
    background-color: #d1fae5; /* green-100 */
    color: #065f46; /* green-800 */
}

.form-message.error {
    background-color: #fee2e2; /* red-100 */
    color: #991b1b; /* red-800 */
}

#enviar-reporte input[type="text"],
#enviar-reporte input[type="email"],
#enviar-reporte input[type="tel"],
#enviar-reporte textarea {
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db; /* border-gray-300 */
}

/*--------------------------------------------------------------
17.0 Autoridades Auxiliares Page
--------------------------------------------------------------*/
.autoridad-card {
    border-top: 4px solid var(--color-secondary);
    transition: transform 0.3s, box-shadow 0.3s;
}
.autoridad-card:hover {
    transform: translateY(-0.5rem);
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
}
.autoridad-card .prose-sm p {
    margin: 0; /* Limpiar márgenes de párrafos dentro de la tarjeta */
}

/*--------------------------------------------------------------
18.0 Gaceta Municipal Page
--------------------------------------------------------------*/
.gaceta-card {
    transition: transform 0.3s, box-shadow 0.3s;
    border-top: 4px solid var(--color-secondary);
}
.gaceta-card:hover {
    transform: translateY(-0.5rem);
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
}
.gaceta-portada-wrapper {
    height: 280px; /* Altura fija para la imagen */
    background-color: #e5e7eb; /* gray-200 */
    padding: 1rem;
}
.gaceta-portada-img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Muestra la portada completa sin cortarla */
}

/*--------------------------------------------------------------
19.0 Contact Page
--------------------------------------------------------------*/
.contact-info-group {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* 24px */
}
.contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem; /* 16px */
}
.contact-info-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem; /* 48px */
    height: 3rem; /* 48px */
    border-radius: 9999px;
    background-color: var(--color-secondary);
    color: var(--color-primary);
    font-size: 1.25rem; /* 20px */
}
.contact-social-button {
    display: inline-flex;
    align-items: center;
    background-color: var(--color-primary);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.3s, transform 0.2s;
}
.contact-social-button:hover {
    background-color: var(--color-accent-green);
    transform: translateY(-2px);
}
.contact-map-container {
    position: relative;
    min-height: 400px;
}
.contact-map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}