/*
 Theme Name:   ClassiPress Child - CamboBay
 Theme URI:    https://cambobay.com
 Description:  CamboBay Child Theme for ClassiPress
 Author:       CamboBay
 Author URI:   https://cambobay.com
 Template:     classipress
 Version:      1.0.2
*/

/* ========================================
   MOBILE HEADER - TITLE BAR FIX
   ======================================== */
@media screen and (max-width: 639px) {
    
    /* Title bar principal - flexbox horizontal */
    .title-bar {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        padding: 10px 15px !important;
        box-sizing: border-box !important;
    }
    
    /* Conteneur gauche - horizontal aussi */
    .title-bar .title-bar-left {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        position: relative !important;
        flex: 0 0 auto !important;
        gap: 12px !important;
    }
    
    /* Icône hamburger */
    .title-bar .menu-icon {
        display: block !important;
        position: relative !important;
        width: 20px !important;
        height: 18px !important;
        flex-shrink: 0 !important;
    }
    
    /* Titre CamboBay */
    .title-bar .title-bar-title {
        display: inline-block !important;
        position: relative !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 18px !important;
        font-weight: bold !important;
        color: #c0392b !important;
        white-space: nowrap !important;
    }
}

/* ========================================
   SEARCHBAR STYLES
   ======================================== */
.searchbar-shortcode input.search_keywords,
.searchbar-shortcode select.search_location,
.searchbar-shortcode select#scat,
.searchbar-shortcode button.button {
    height: 44px !important;
    line-height: 44px !important;
    padding: 0 15px !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}

.searchbar-shortcode select.search_location,
select.search_location.app-address-field {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 44px !important;
    padding-right: 30px !important;
}

.searchbar-shortcode select.search_location,
.searchbar-shortcode select#scat,
.search-location-wrap select,
.search-category-wrap select {
    background-position: right 10px center !important;
    padding-right: 35px !important;
}

/* Cacher le popup d'erreur Google Maps */
.gm-err-container,
.gm-style-pbc,
.pac-container,
div[style*="background-color: white"][style*="padding: 15px"] {
    display: none !important;
}

/* ========================================
   CATEGORY PAGES
   ======================================== */
.tax-ad_cat .content-wrap,
.tax-ad_cat .site-content,
.tax-ad_cat main,
.tax-ad_cat .content-area {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.tax-ad_cat .filters-bar {
    margin-top: 0 !important;
    border-radius: 0 !important;
}

/* ========================================
   DROPDOWN SUBMENUS - JOBS ONLY (scroll)
   ======================================== */
/* Jobs a beaucoup de catégories - garder la scrollbar */
li.menu-item[class*="jobs"] > ul.is-dropdown-submenu,
li[aria-label="Jobs"] > ul.is-dropdown-submenu {
    max-height: 350px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin !important;
    scrollbar-color: #ccc #f0f0f0 !important;
}

li.menu-item[class*="jobs"] > ul.is-dropdown-submenu::-webkit-scrollbar,
li[aria-label="Jobs"] > ul.is-dropdown-submenu::-webkit-scrollbar {
    width: 8px !important;
}

li.menu-item[class*="jobs"] > ul.is-dropdown-submenu::-webkit-scrollbar-track,
li[aria-label="Jobs"] > ul.is-dropdown-submenu::-webkit-scrollbar-track {
    background: #f0f0f0 !important;
    border-radius: 4px !important;
}

li.menu-item[class*="jobs"] > ul.is-dropdown-submenu::-webkit-scrollbar-thumb,
li[aria-label="Jobs"] > ul.is-dropdown-submenu::-webkit-scrollbar-thumb {
    background: #ccc !important;
    border-radius: 4px !important;
}

/* ========================================
   GRILLE ANNONCES - 4 COLONNES MOBILE + TABLETTE
   ======================================== */
@media screen and (max-width: 1024px) {
    
    /* Forcer 4 colonnes sur mobile et tablette */
    .hp-ads-grid,
    .fap-ads-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 10px !important;
    }
    
    /* Réduire la hauteur des images pour que ça rentre */
    .hp-ad-image,
    .fap-ad-image {
        height: 100px !important;
    }
    
    /* Réduire le padding et la taille du texte */
    .hp-ad-info,
    .fap-ad-info {
        padding: 8px !important;
    }
    
    .hp-ad-title,
    .fap-ad-title {
        font-size: 11px !important;
        height: 28px !important;
        -webkit-line-clamp: 2 !important;
    }
    
    .hp-ad-location,
    .fap-ad-location {
        font-size: 10px !important;
    }
    
    .hp-ad-price,
    .fap-ad-price {
        font-size: 12px !important;
    }
    
    .hp-ad-date,
    .fap-ad-date {
        font-size: 9px !important;
    }
}

/* ========================================
   TABLETTE RESPONSIVE (641px - 1024px)
   ======================================== */
@media screen and (min-width: 641px) and (max-width: 1024px) {
    
    /* === SEARCHBAR - Empiler verticalement comme mobile === */
    .searchbar-shortcode form.search-form .row {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        padding: 15px !important;
    }
    
    .searchbar-shortcode .search-keywords-wrap,
    .searchbar-shortcode .search-category-wrap,
    .searchbar-shortcode .search-location-wrap,
    .searchbar-shortcode .search-button-wrap {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .searchbar-shortcode select#cb-section,
    .searchbar-shortcode select#cb-category,
    .searchbar-shortcode select#cb-location,
    .searchbar-shortcode select.search_location,
    .searchbar-shortcode input.search_keywords,
    .searchbar-shortcode button.button {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 16px !important;
        padding: 0 15px !important;
    }
    
    .searchbar-shortcode button.button {
        margin-top: 5px !important;
    }
    
    /* === FOOTER - Compact et centré === */
    #footer {
        padding: 15px 10px !important;
    }
    
    #footer .row.column {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 10px !important;
        padding: 10px !important;
    }
    
    #footer .footer-top.row {
        padding: 10px !important;
        gap: 8px !important;
    }
    
    #footer .tiled-row.row {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        gap: 5px !important;
    }
    
    #footer .column.medium-3 {
        width: 100% !important;
        text-align: center !important;
        padding: 5px !important;
    }
    
    #footer .widget-footer {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 5px !important;
    }
    
    /* Bloc About + Contact - en ligne et centré */
    #footer .wp-block-group.footer-links,
    #footer .footer-links {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 30px !important;
        width: 100% !important;
        padding: 5px 0 !important;
    }
    
    #footer .wp-block-group.footer-links p,
    #footer .footer-links p {
        margin: 0 !important;
    }
    
    /* Footer bottom - compact */
    #footer .footer-bottom.row {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 5px !important;
        padding: 10px !important;
    }
    
    /* Menu Home - centrer */
    #footer #menu-item-38,
    #footer .menu-item-home,
    #footer ul.menu {
        text-align: center !important;
        display: flex !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Copyright - centrer */
    #footer .copyright {
        width: 100% !important;
        text-align: center !important;
        margin: 5px 0 0 0 !important;
        padding: 0 !important;
        display: block !important;
    }
}
/* ========================================
   IMAGES ANNONCES - GARDER PROPORTIONS
   ======================================== */
.fap-ad-image img,
.fap-ad-card .fap-ad-image img,
.hp-ad-image img,
.hp-ad-card .hp-ad-image img {
    object-fit: contain !important;
    background: #f5f5f5 !important;
}