/*
Theme Name: Carlos Villagran
Theme URI: https://carlosvillagran.mx
Author: Carlos Villagran
Author URI: https://carlosvillagran.mx
Description: A luxury editorial WordPress theme for Carlos Villagran - The Joyful Curator. A digital museum of Mexican comedy featuring vibrant Sailor Blue, Golden Yellow, and Prop Red palette.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: carlos-villagran
Tags: editorial, entertainment, comedy, custom-menu, featured-images, translation-ready
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
*/

/* Material Symbols */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Display Font */
.display-font {
    font-family: 'Epilogue', sans-serif;
}

/* No scrollbar utility */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* WordPress Core */
.alignwide { max-width: 1200px; margin-left: auto; margin-right: auto; }
.alignfull { width: 100vw; margin-left: calc(-50vw + 50%); }
.aligncenter { text-align: center; }

/* Screen reader text */
.screen-reader-text {
    border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
    height: 1px; margin: -1px; overflow: hidden; padding: 0;
    position: absolute; width: 1px; word-wrap: normal !important;
}

/* Pagination */
.pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.5rem; height: 2.5rem; padding: 0 0.75rem;
    font-family: 'Be Vietnam Pro', sans-serif; font-size: 0.875rem;
    color: #4c5f85; border-radius: 9999px;
    border: 1px solid rgba(158, 178, 221, 0.3);
    transition: all 0.3s;
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover {
    background-color: #135dba; color: #f9f8ff;
}

/* Comment Form */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%; background: transparent;
    border: 1px solid rgba(158, 178, 221, 0.3);
    border-radius: 1rem; padding: 1rem 1.5rem;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 0.875rem; color: #1e3256;
    transition: border-color 0.3s;
}
.comment-form input:focus, .comment-form textarea:focus {
    outline: none; border-color: #135dba;
}
.comment-form .submit {
    background-color: #135dba; color: #f9f8ff;
    font-family: 'Be Vietnam Pro', sans-serif; font-weight: 700;
    padding: 1rem 2.5rem; font-size: 1rem;
    border: none; border-radius: 0.75rem; cursor: pointer;
    transition: background-color 0.3s;
}
.comment-form .submit:hover { background-color: #0050a8; }

/* Mobile Bottom Nav */
@media (min-width: 768px) {
    .mobile-bottom-nav { display: none; }
}

/* Mobile menu overlay */
#mobile-menu {
    transform: translateX(-100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
#mobile-menu.active {
    transform: translateX(0);
}

/* WordPress gallery grid */
.wp-block-gallery { gap: 1.5rem; }

/* WordPress content styling inside articles */
.entry-content p { margin-bottom: 1.5rem; }
.entry-content h2 { font-family: 'Epilogue', sans-serif; font-size: 2.25rem; font-weight: 700; color: #135dba; margin-top: 3rem; margin-bottom: 1rem; }
.entry-content h3 { font-family: 'Epilogue', sans-serif; font-size: 1.5rem; font-weight: 700; color: #135dba; margin-top: 2rem; margin-bottom: 0.75rem; }
.entry-content blockquote { margin: 3rem 0; padding: 2rem; background: #d7e2ff; border-radius: 1rem; text-align: center; }
.entry-content blockquote p { font-family: 'Epilogue', sans-serif; font-size: 1.5rem; font-weight: 700; color: #135dba; font-style: italic; }
.entry-content a { color: #135dba; text-decoration: underline; }
.entry-content ul { list-style: disc; padding-left: 2rem; margin-bottom: 1.5rem; }
.entry-content ol { list-style: decimal; padding-left: 2rem; margin-bottom: 1.5rem; }
.entry-content img { border-radius: 1rem; }

/* Spin slow animation (Giras page) */
@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.animate-spin-slow {
    animation: spin-slow 20s linear infinite;
}