/*
Theme Name: Matatena Minimal
Theme URI: https://la-matatena.com/
Author: Gemini CLI
Author URI: https://la-matatena.com/
Description: A high-fidelity, minimalist editorial theme inspired by Shut Up & Sit Down. Features advanced vertical rhythm, custom typography controls, and a "Zero Visual Shift" branding architecture.
Version: 3.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: matatena-minimal
Tags: blog, custom-colors, custom-logo, custom-menu, editorial, featured-images, flexible-header, full-width-template, minimalist, one-column, post-formats, right-sidebar, rtl-language-support, sticky-post, theme-options, translation-ready, typography
*/

:root {
    --primary-purple: #8367c7;
    --hover-purple: #6a4fb3;
    --text-dark: #282828;
    --text-body: #3a3a3a;
    --text-light: #595959;
    --bg-white: #ffffff;
    --gray-border: #eeeeee;
    --font-main: "Helvetica", "Arial", sans-serif;
    --font-titles: "Montserrat", sans-serif;
    --transition-fast: all 0.2s ease-in-out;
}

/* 1. Global Reset & Layout */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font-main);
    color: var(--text-body);
    font-size: var(--body-font-size, 17px);
    line-height: 1.6; 
    background-color: var(--bg-white);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    width: 100%;
}

.site-container {
    max-width: 1180px !important; /* 1100 content + 80 padding */
    margin: 0 auto !important;
    padding: 0 40px !important;
    width: 100% !important;
}

/* 2. Header & Navigation */
header#masthead {
    background: #fff;
    position: relative;
    z-index: 100;
}

.site-header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px; 
    width: 100%;
    max-width: 1180px; 
    margin: 0 auto;
    border-bottom: 2px solid var(--primary-purple);
}

.site-branding { flex-shrink: 0; display: inline-block; }
.site-logo img { width: var(--logo-width, 300px); height: auto; display: block; }

/* 3. Navigation */
.main-navigation { display: flex; align-items: center; height: 40px; }
.inside-navigation { position: relative; display: flex; align-items: center; justify-content: flex-end; width: 100%; }

.main-nav ul, .main-navigation .menu ul { display: flex; align-items: center; list-style: none; padding: 0; margin: 0; }
.main-nav li { position: relative; list-style: none; display: block; }

.main-nav a, .main-navigation .menu a {
    font-family: var(--font-titles);
    font-size: 15px; 
    font-weight: 600;
    color: #3f3f3f;
    text-transform: uppercase;
    padding: 0 16px; 
    line-height: 40px; 
    height: 40px;
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: background-color 150ms ease-in-out, color 150ms ease-in-out;
}

.main-nav a[href*="category"], .menu a[href*="category"], 
.main-nav a[href*="quienes-somos"], .menu a[href*="quienes-somos"], 
.main-nav a[href*="contacto"], .menu a[href*="contacto"] { color: var(--primary-purple); }

.main-nav li:not(.search-item):hover > a {
    background-color: var(--primary-purple);
    color: #ffffff !important;
}

/* Dropdown Toggle Icon */
.dropdown-menu-toggle {
    margin-left: 10px;
    display: inline-flex;
    align-items: center;
}
.dropdown-menu-toggle .gp-icon svg { fill: currentColor; width: 0.8em; height: 0.8em; }

/* Dropdown Menu - DESKTOP */
.main-navigation .main-nav ul li .sub-menu {
    display: none !important; 
    position: absolute; 
    top: 40px; 
    left: 0; 
    width: 200px;
    background: #3f3f3f;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    z-index: 1000;
    list-style: none;
    padding: 0;
    margin: 0;
}

.main-navigation .main-nav ul li:hover > .sub-menu,
.main-navigation .main-nav ul li .sub-menu.toggled { 
    display: block !important;
}

.sub-menu a { 
    padding: 12px 20px !important; 
    text-transform: uppercase;
    font-size: 14px !important; 
    font-weight: 600 !important; 
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    line-height: 1.4 !important; 
    height: auto !important;
    width: 100% !important;
    display: block !important;
    background: transparent !important;
}
.sub-menu a:hover { background-color: #4f4f4f !important; }
.sub-menu li:last-child a { border-bottom: none; }

.header-bar-items { display: flex; align-items: center; margin-left: 10px; }
.header-bar-items .menu-toggle { display: none; } 
.header-search-wrap { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.search-item a { display: flex; align-items: center; height: 40px; padding: 0 16px; color: #3f3f3f; transition: var(--transition-fast); }
.search-item a:hover { color: var(--primary-purple); }

/* 4. Push-Down Search Bar */
.navigation-search {
    display: none;
    width: 100%;
    background-color: var(--primary-purple);
    padding: 15px 0;
    transition: var(--transition-fast);
}
.navigation-search.active { display: block; }
.navigation-search .site-container { display: flex !important; align-items: center !important; }
.navigation-search input { 
    width: 100%; 
    background: transparent; 
    border: none; 
    color: #ffffff; 
    font-size: 20px; 
    outline: none; 
    height: 40px;
    font-family: var(--font-main);
}
.navigation-search input::placeholder { color: rgba(255,255,255,0.7); }

/* 5. Content Area - WIDER GAP */
.main-content-area { 
    display: flex !important; 
    justify-content: space-between !important; 
    margin-top: 0 !important; 
    width: 100% !important; 
    padding: 40px 40px !important; 
}
#primary { width: 696px !important; flex-shrink: 0 !important; padding: 0 !important; margin: 0 80px 0 0 !important; }
#secondary { width: 324px !important; flex-shrink: 0 !important; padding: 0 !important; margin: 0 !important; }

article.post { margin-bottom: 40px; padding-bottom: 0; border-bottom: none; width: 100%; max-width: 696px; }
body.single article.post { border-bottom: none; padding-bottom: 0; margin-bottom: 0 !important; }
article.post:last-child { border-bottom: none; }

.post-divider {
    height: 1px;
    width: 100%;
    background-color: var(--primary-purple);
    margin-top: 40px;
    opacity: 0.3;
}
article.post:last-child .post-divider { display: none; }

.entry-footer-susd {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}
.leave-comment-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 600;
    color: #888;
    text-decoration: none;
    transition: color 0.2s;
}
.leave-comment-link:hover { color: var(--primary-purple); }
.leave-comment-link .meta-icon { color: var(--primary-purple); }

/* SU&SD Single Post Refinements */
.entry-header-susd {
    margin-top: 0;
    margin-bottom: 5px; 
}
h1.entry-title, h2.entry-title { font-family: var(--font-titles); font-size: var(--title-font-size, 28px); line-height: 1.2; margin-bottom: 5px; font-weight: 700; color: #282828; }
h1.entry-title a, h2.entry-title a { color: #282828; text-decoration: none; }
h1.entry-title a:hover, h2.entry-title a:hover { color: var(--primary-purple); }

.post-thumbnail { margin-bottom: 10px; position: relative; width: 100%; }
.post-thumbnail img { width: 100%; height: auto; display: block; }

.entry-meta-susd { 
    font-size: 13px; 
    text-transform: uppercase; 
    font-weight: 600; 
    color: #888; 
    margin-top: 0; 
    margin-bottom: 25px; 
    letter-spacing: 0.5px;
    display: flex;
    flex-direction: column; 
    gap: 8px;
    align-items: flex-start;
}
.meta-row-top, .meta-row-bottom { display: flex; flex-wrap: wrap; gap: 20px; }

.entry-meta-susd a { color: #888; text-decoration: none; transition: color 0.2s; }
.entry-meta-susd a:hover { color: var(--primary-purple); }

.meta-item { display: flex; align-items: center; gap: 6px; }
.meta-icon { width: 16px; height: 16px; color: var(--primary-purple); flex-shrink: 0; }

.meta-divider {
    height: 4px; 
    width: 100%; 
    background-color: var(--primary-purple); 
    margin-bottom: 25px;
}

.color-divider { 
    height: 2px; 
    width: 100%; 
    background-color: var(--primary-purple); 
    margin-top: 25px; 
    margin-bottom: 25px; 
}

.entry-meta { font-size: 14.5px; color: #595959; margin-bottom: 30px; line-height: 1.5; }
.entry-meta a { color: #595959; text-decoration: none; }
.entry-meta a:hover { color: var(--hover-purple); }

/* Content Link and List Styles */
.entry-content a { color: var(--primary-purple); text-decoration: underline; transition: var(--transition-fast); }
.entry-content a:hover { color: var(--hover-purple); }

/* SU&SD Inspired Editorial Spacing - GENERAL */
.entry-content p { margin-bottom: 25px !important; line-height: 1.7 !important; }
.entry-content p:last-child, 
.entry-content ul:last-child, 
.entry-content ol:last-child { margin-bottom: 0 !important; }

.entry-content h1, .entry-content h2, .entry-content h3 { 
    margin-top: 45px !important; 
    margin-bottom: 20px !important; 
    font-family: var(--font-titles);
    color: var(--text-dark);
}
.entry-content h1 { font-size: 32px; }
.entry-content h2 { font-size: 28px; }
.entry-content h3 { font-size: 22px; }

.entry-content ul, .entry-content ol { margin-bottom: 30px; padding-left: 25px; }
.entry-content li { margin-bottom: 12px; }

/* Featured Video Plus Cleanup */
img.fvp-onload, .fvp-play-icon, .fvp-play-text, img[alt*="Featured Video Play Icon"] {
    display: none !important;
    visibility: hidden !important;
    height: 0;
    width: 0;
}
iframe, video, .featured-video-plus {
    aspect-ratio: 16 / 9 !important;
    width: 100% !important;
    height: auto !important;
    margin-bottom: 35px !important;
}
body.single iframe, body.single video, body.single .featured-video-plus {
    margin-bottom: 10px !important;
}
body.home .post-thumbnail, 
body.archive .post-thumbnail {
    margin-bottom: 15px !important;
}

/* 6. Comments Area - ENHANCED */
.comments-area { margin-top: -35px !important; border-top: none !important; padding-top: 0 !important; }
.comment-list { list-style: none; padding: 0; margin: 0; }
.comment-body { 
    padding: 35px; 
    border: 1px solid var(--gray-border); 
    margin-bottom: 30px; 
    background: #fcfcfc;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}
.comment-author { font-weight: 700; margin-bottom: 5px; font-family: var(--font-titles); font-size: 18px; }
.comment-metadata { font-size: 13px; color: var(--text-light); margin-bottom: 20px; }
.comment-content { line-height: 1.7; color: var(--text-body); }

.comment-respond { margin-top: 60px; background: #fcfcfc; padding: 40px; border-radius: 8px; border: 1px solid var(--gray-border); }
.comment-reply-title, .comments-title { font-family: var(--font-titles) !important; font-size: 24px !important; font-weight: 700 !important; margin-bottom: 30px !important; color: #3f3f3f !important; }

.comment-form label { display: block; margin-bottom: 10px; font-weight: 600; font-size: 14px; color: var(--text-light); text-transform: uppercase; }
.comment-form input[type="text"], 
.comment-form input[type="email"], 
.comment-form input[type="url"], 
.comment-form textarea {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: var(--font-main);
    font-size: 16px;
    margin-bottom: 25px;
    outline: none;
    transition: border-color 0.2s;
    background: #fff;
}
.comment-form input:focus, .comment-form textarea:focus { border-color: var(--primary-purple); }
.form-submit { margin-top: 15px; }
.form-submit input[type="submit"] {
    background: var(--primary-purple);
    color: #fff;
    border: none;
    padding: 16px 40px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.form-submit input[type="submit"]:hover { background: var(--hover-purple); transform: translateY(-1px); }

/* 7. Link-in-Bio Page */
body.page-template-page-link-in-bio,
body.page-id-6753 { background-color: #fff !important; }

body.page-template-page-link-in-bio #masthead,
body.page-template-page-link-in-bio .site-footer,
body.page-template-page-link-in-bio footer.site-info,
body.page-id-6753 #masthead,
body.page-id-6753 .site-footer,
body.page-id-6753 footer.site-info { display: none !important; }

body.page-template-page-link-in-bio #primary,
body.page-id-6753 #primary { 
    width: 100% !important; 
    max-width: 100% !important; 
    margin: 0 !important; 
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 100vh !important;
    padding: 80px 20px !important;
}

body.page-template-page-link-in-bio .entry-content,
body.page-id-6753 .entry-content {
    width: 100% !important;
    max-width: 600px !important;
    margin: 0 auto !important;
    text-align: left !important;
}

body.page-template-page-link-in-bio .entry-content p,
body.page-id-6753 .entry-content p,
body.page-template-page-link-in-bio .entry-content h3,
body.page-id-6753 .entry-content h3 {
    margin-bottom: 20px !important;
    text-align: left !important;
}

body.page-template-page-link-in-bio .entry-content .has-text-align-center,
body.page-id-6753 .entry-content .has-text-align-center {
    text-align: center !important;
}

body.page-template-page-link-in-bio .wp-block-button__link,
body.page-id-6753 .wp-block-button__link {
    background-color: var(--primary-purple) !important;
    color: #fff !important;
    width: 100% !important;
    max-width: 500px !important;
    border-radius: 9999px !important;
    padding: 10px 20px !important;
    font-weight: 400 !important;
    font-size: 17px !important;
    text-align: center !important;
    border: none !important;
    display: block !important;
    margin: 0 auto !important;
    text-decoration: none !important;
}

body.page-template-page-link-in-bio .entry-content ul,
body.page-id-6753 .entry-content ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
body.page-template-page-link-in-bio .entry-content li,
body.page-id-6753 .entry-content li { list-style: none !important; margin: 0 !important; padding: 0 !important; }

/* 8. Sidebar Widgets - CATEGORY PILLS FIXED */
#secondary .widget_categories ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
#secondary .widget_categories li { margin-bottom: 8px !important; list-style: none !important; padding: 0 !important; }
#secondary .widget_categories li a {
    display: block !important; width: 100% !important; max-width: 280px !important; margin: 0 auto !important;
    background-color: var(--primary-purple) !important; color: #fff !important; padding: 5px 15px !important;
    border-radius: 8px !important; font-size: 16px !important; font-weight: 400 !important;
    text-align: left !important; text-decoration: none !important;
    transition: background-color 0.2s ease-in-out;
}

#secondary .widget_categories li a:hover {
    background-color: var(--hover-purple) !important;
    text-decoration: none !important;
}

/* Sidebar Styling Refinements */
.widget-title, 
#secondary h2, 
.widget h2, 
#secondary .wp-block-heading {
    font-size: 18px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: 1px !important;
    margin-bottom: 25px !important;
    margin-top: 0 !important;
    color: var(--text-dark) !important;
    max-width: 280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: left !important;
}

/* 9. Footer */
footer.site-info { background-color: #222 !important; color: #fff !important; padding: 20px 0 !important; text-align: center !important; font-size: 15px !important; margin-top: 60px; }

/* 10. Responsive */
@media (max-width: 1080px) {
    .site-container { padding: 0 20px !important; }
    .main-content-area { flex-direction: column !important; align-items: center !important; padding: 20px !important; }
    #primary, article.post { width: 100% !important; max-width: 696px !important; margin-right: 0 !important; }
    #secondary { width: 100% !important; max-width: 696px !important; padding: 0 20px !important; }
}

@media (max-width: 768px) {
    .site-header-inner { 
        padding: 20px !important; 
        flex-direction: column !important; 
        align-items: center !important;
        text-align: center !important;
    }
    
    .site-branding { margin-bottom: 15px !important; width: 100% !important; }
    .site-logo img { width: var(--logo-width, 200px) !important; height: auto !important; margin: 0 auto !important; }
    
    .header-bar-items { 
        display: flex !important; 
        justify-content: center !important;
        align-items: center !important; 
        width: 100% !important;
        padding-top: 10px !important;
        border-top: 1px solid #f0f0f0 !important;
        margin-left: 0 !important;
    }
    
    .header-bar-items .menu-toggle { 
        display: flex !important; 
        background: transparent !important; 
        border: none !important; 
        font-size: 15px !important; 
        padding: 10px 15px !important; 
        cursor: pointer !important; 
        align-items: center !important;
        text-transform: uppercase !important;
        font-weight: 600 !important;
        font-family: var(--font-titles) !important;
        color: #3f3f3f !important;
    }
    .menu-toggle .gp-icon { font-size: 20px !important; margin-right: 8px !important; display: flex !important; align-items: center !important; }
    .mobile-menu { display: inline-block !important; line-height: 1 !important; }
    
    .main-navigation { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; height: auto !important; }
    
    /* Simplified Mobile Menu - No nested dropdowns */
    .inside-navigation { 
        display: none !important; 
        width: 100vw !important; 
        position: relative !important; 
        left: 0 !important; 
        background: #fff !important; 
        z-index: 100 !important;
        flex-direction: column !important; 
        align-items: center !important; 
        padding: 0 !important; 
        box-shadow: 0 10px 20px rgba(0,0,0,0.05) !important;
        margin-top: 10px !important;
    }
    .main-navigation.toggled .inside-navigation { display: flex !important; }
    
    .main-nav { width: 100% !important; }
    .main-nav ul { flex-direction: column !important; width: 100% !important; display: flex !important; }
    .main-nav li { width: 100% !important; border-bottom: 1px solid #f5f5f0 !important; display: block !important; text-align: center !important; }
    .main-nav a { 
        width: 100% !important; 
        padding: 15px 20px !important; 
        line-height: 1.2 !important; 
        display: block !important;
        height: auto !important;
    }
    
    /* Flatten sub-menu items */
    .main-navigation.toggled .main-nav ul li .sub-menu { 
        position: static !important; 
        display: block !important; 
        width: 100% !important; 
        background: #f9f9f9 !important; 
        opacity: 1 !important;
        visibility: visible !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
    .sub-menu li { background: #f9f9f9 !important; }
    .sub-menu a { 
        padding: 12px 20px !important; 
        font-size: 14px !important; 
        color: #666 !important; 
        text-transform: none !important;
    }
    
    /* Hide specific mobile dropdown toggles when flattened */
    .dropdown-menu-toggle { display: none !important; }
}