/*
Theme Name: Axel Twenty Twenty Five
Description: Thème enfant personnalisé pour l'inventaire photographique Axel Iris. Intègre le design MD3, les polices locales et les hooks d'automatisation.
Author: Axel Martin 🫆 & Gemini 🔷
Template: twentytwentyfive
Version: 1.0.0
*/

/* Tes polices et styles spécifiques sont gérés par le theme.json, 
   donc ce fichier reste léger et propre. */


/* Élévation de l'infobulle cartographique au premier plan absolu */
.axel-link-pill,
.map-pop,
[class*="map-pop"] {
    z-index: 9999 !important;
}


/* ==============================================================================
   ÉTIRAGE UNIVERSEL DU FOND AWB (PAGES COURTES, ARTICLES & BOUTIQUE)
   ============================================================================== */

/* 1. Ciblage précis par type de vue WordPress */
body.page .wp-block-nk-awb,
body.single .wp-block-nk-awb,
body.single-post .wp-block-nk-awb,
body.blog .wp-block-nk-awb,
body.archive .wp-block-nk-awb,
body.error404 .wp-block-nk-awb,
body.woocommerce-shop .wp-block-nk-awb,
body.tax-product_cat .wp-block-nk-awb,
body.single-product .wp-block-nk-awb {
    min-height: 100vh !important;
    padding-bottom: clamp(140px, 30vh, 500px) !important;
    box-sizing: border-box !important;
}

/* 2. Forcer le moteur Jarallax interne d'AWB à occuper toute la hauteur */
.nk-awb-wrap,
.nk-awb-inner {
    min-height: 100% !important;
}


/* ==============================================================================
   MINI-BANNIÈRES DU FOOTER (RESET DU THEME.JSON + HOVER)
   ============================================================================== */

/* 1. Conteneur flexible */
.footer-badge-container {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 24px !important;
    margin-top: 18px !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    cursor: all-scroll !important;
}

/* 2. Éradication du Halo et des 18px sur toute la hiérarchie du bloc */
.footer-badge-container,
.footer-badge-container .wp-block-image,
.footer-badge-container figure,
.footer-badge-container a,
.footer-badge-container img,
.footer-badge-container svg {
    box-shadow: none !important;
    border-radius: 0 !important; /* Remplacez par 3px ou 4px si vous voulez un micro-arrondi de badge */
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. Dimensionnement et préparation de la transition */
.footer-badge-container .wp-block-image,
.footer-badge-container a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0.75;
    transition: transform 0.2s ease, opacity 0.2s ease !important;
}

.footer-badge-container img,
.footer-badge-container svg {
    height: 52px !important;
    width: auto !important;
    max-width: none !important;
    display: block !important;
}

/* 4. Effet Hover actif */
.footer-badge-container .wp-block-image:hover,
.footer-badge-container a:hover {
    transform: scale(1.25);
    opacity: 1 !important;
}

/* Badge boutique sur image mise en avant */
.axel-featured-shop-badge {
    position: absolute;
    bottom: 27px;
    left: 7px;
    background: transparent;
    color: #FFF202;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, background 0.2s ease;
    z-index: 10;
}

.axel-featured-clickable-wrap:focus .axel-featured-shop-badge {
    transform: scale(1.2);
    background: light-dark(#09008D, #FFF202);
    color: light-dark(#FFFFFF, #000000);
    box-shadow: 0 0px 0px light-dark(rgba(0,0,0,0.8), rgba(255,255,255,0.8));
}

.axel-featured-clickable-wrap:hover .axel-featured-shop-badge {
    transform: scale(1.2);
    background: light-dark(#09008D, #FFF202);
    color: light-dark(#FFFFFF, #000000);
    box-shadow: 0 0px 8px light-dark(rgba(0,0,0,0.8), rgba(255,255,255,0.8));
}

.axel-featured-clickable-wrap:active .axel-featured-shop-badge {
    transform: scale(1.2);
    background: light-dark(#FFF202, #09008D);
    color: light-dark(#000000, #FFFFFF);
    box-shadow: 0 0px 8px light-dark(rgba(0,0,0,0.8), rgba(255,255,255,0.8));
}

.axel-featured-shop-badge .dashicons {
    font-size: 36px;
    width: 36px;
    height: 36px;
    text-shadow: 0 0px 3px rgba(0,0,0,0.95);
}

.axel-featured-shop-badge:focus .dashicons {
    text-shadow: 0 0px 3px light-dark(rgba(0,0,0,0.95), rgba(255,255,255,0.8));
}

.axel-featured-shop-badge:hover .dashicons {
    text-shadow: 0 0px 3px light-dark(rgba(0,0,0,0.95), rgba(255,255,255,0.8));
}

.axel-featured-shop-badge:active .dashicons {
    text-shadow: 0 0px 3px light-dark(rgba(255,255,255,0.8), rgba(0,0,0,0.95));
}


/* ==============================================================================
   STYLES AXEL.BRUSSELS : BOUTONS, TOOLTIPS ET CARTES
   ============================================================================== */

.premium-button-wrapper, 
.premium-button-box, 
.premium-button-container { 
    overflow: visible !important; 
    background: transparent !important;
}

.axel-link-pill {
    position: relative !important;
}

.axel-link-pill[data-tip]::after {
    content: attr(data-tip);
    position: absolute !important;
    left: auto !important;
    right: 222% !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: #fffde7 !important;
    color: #111111 !important;
    border: 1px solid #d4af37 !important;
    padding: 6px 14px !important;
    border-radius: 30px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease-in-out !important;
    z-index: 999999 !important;
    white-space: normal !important;
    width: max-content !important;
    max-width: 300px !important;
    text-align: right !important;
    line-height: 1.3 !important;
}

.axel-link-pill[data-tip]:hover::after {
    opacity: 1 !important;
}

@media (max-width: 480px) {
    .axel-link-pill[data-tip]::after {
        max-width: 150px !important;
        font-size: 11px !important;
        padding: 6px 10px !important;
    }
}

.axel-link-pill .map-pop {
    position: absolute !important;
    left: auto !important;
    right: 240% !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 320px !important;
    height: 240px !important; 
    border: 3px solid #ff5722 !important;
    border-radius: 18px !important; 
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25) !important;
    background: #ffffff !important;
    z-index: 999999 !important;
    display: none !important;
    pointer-events: none;
}

.axel-link-pill:hover .map-pop {
    display: block !important;
}

.map-pop img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

html body .wp-site-blocks .premium-button-container .premium-button-box a,
html body .wp-site-blocks .premium-button-container .premium-button-box a:hover,
html body .wp-site-blocks .premium-button-container .premium-button-box a * {
    animation: none !important;
    transform: none !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}

html body .wp-site-blocks .premium-button-container .premium-button-box a.axel-disabled,
html body .wp-site-blocks .premium-button-container .premium-button-box a.axel-disabled:hover {
    background-color: light-dark(rgba(255,95,31,0.22), rgba(31,192,255,0.22)) !important;
    background: light-dark(rgba(255,95,31,0.22), rgba(31,192,255,0.22)) !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    border-radius: 50% !important;
}

.axel-disabled span,
.axel-disabled i,
.axel-disabled svg,
.axel-disabled .premium-button-text-wrapper,
.axel-disabled .premium-button-icon-container {
    opacity: 0.5 !important;
}