/**
 * Styles globaux pour WooCommerce Shop Builder
 * Compatible avec tous les thèmes WordPress
 * 
 * @package WC_Shop_Builder
 */

/* ============================================
   POLICES : GÉRÉES PAR LE THÈME (Shoptimizer)
   Voir Customizer → Typography
   ============================================ */

/* ============================================
   COULEUR DE FOND GLOBALE
   Gérée par la variable --wcsb-site-bg (Customizer > Shop Builder Colors)
   ============================================ */
html body {
  background-color: var(--wcsb-site-bg, #fafafa);
}

/* ============================================
   HEADER BRANDING (Logo au-dessus de la navbar)
   ============================================ */

/* Note: .site-branding-header est géré par le thème.
   Le thème gère déjà TOUT : centrage, taille du logo, taille du titre, menu-toggle, etc.
   On ne force AUCUNE règle ici pour laisser le thème gérer complètement. */

/* ============================================
   NAVBAR PERSONNALISÉE
   ============================================ */

/* Note: Le header masthead est supprimé via output buffer dans le plugin,
   pas besoin de le masquer avec CSS. */

/* Les règles CSS pour .col-full-nav et .site-search ont été supprimées
   pour laisser le thème Shoptimizer gérer complètement la navbar et la recherche.
   Le thème gère déjà :
   - Le positionnement et le layout de la navbar en desktop et mobile
   - L'affichage de la recherche dans le header (desktop) et dans le panel mobile
   - Le slide-out panel mobile avec tous ses éléments (menu, recherche, widgets)
*/

/* Conteneurs WooCommerce - uniquement zones de contenu (pas .woocommerce global) */
.single-product .woocommerce .site-main,
.product-details-wrapper,
.product_content_wrapper,
.summary,
.entry-summary,
.woocommerce-Tabs-panel,
.woocommerce-tabs,
.wc-tabs-wrapper,
.related-wrapper,
.related,
.upsells,
.product_meta,
.product_meta_wrapper {
  background-color: var(--wcsb-site-bg, #fafafa);
}

/* Articles et pages - transparents pour laisser voir le fond */
html body article,
html body .page,
html body .post,
body.wp-singular article,
body.wp-singular .page,
body.wp-singular .post,
body.page-template-default article,
body.page-template-default .page,
body.page-template-default .post {
  background-color: transparent;
}

/* ============================================
   IMAGE HERO FULL WIDTH
   ============================================ */
.wcsb-hero-section,
.wp-block-cover.wcsb-hero-section {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  position: relative;
  left: 0;
  right: 0;
}

/* Empêcher le scroll horizontal sur le body causé par les sections full-width */
body.page-template-default,
body.home {
  overflow-x: hidden;
}

/* Ne pas limiter la largeur du cover block - utiliser max-width uniquement */
.wcsb-hero-section .wp-block-cover {
  max-width: 100vw;
  width: auto;
}

.wp-block-cover.wcsb-hero-section {
  max-width: 100vw;
  width: auto;
}

.wcsb-hero-section .wp-block-cover__image-background,
.wp-block-cover.wcsb-hero-section .wp-block-cover__image-background {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================
   LARGEUR CONTENU HOMEPAGE
   ============================================ */
body.home .content-area,
body.page .content-area {
  width: 100%;
  max-width: 100%;
}

body.home .site-main,
body.page .site-main {
  width: 100%;
  max-width: 100%;
}

/* Fix margin pages catégories (sidebar supprimée) */
.tax-product_cat .content-area,
.tax-product_tag .content-area,
.woocommerce-page .content-area {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

.tax-product_cat #secondary,
.tax-product_tag #secondary {
  display: none;
}

/* ============================================
   RETIRER PADDING TOP SUR HOMEPAGE
   ============================================ */
body.home .site-main,
body.home .site-content,
body.home .content-area,
body.home #main,
body.home #content,
body.page.page-template-default .site-main,
body.page.page-template-default .site-content,
body.page.page-template-default .content-area {
  padding-top: 0;
}

/* Cibler spécifiquement les sélecteurs du thème avec :has() */
@supports selector(:has(*)) {
  body.home:has(:not(.woocommerce-breadcrumb)) .site-main,
  body.home:has(:not(.woocommerce-breadcrumb)) .site-content,
  body.page:has(:not(.woocommerce-breadcrumb)) .site-main,
  body.page:has(:not(.woocommerce-breadcrumb)) .site-content,
  body.single-product:has(:not(.woocommerce-breadcrumb)) .site-main,
  body.single-product:has(:not(.woocommerce-breadcrumb)) .site-content,
  body:has(:not(.woocommerce-breadcrumb)) .site-main,
  body:has(:not(.woocommerce-breadcrumb)) .site-content {
    padding-top: 0;
  }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .wcsb-hero-section {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}