/*
Theme Name: Extendable Child
Template: extendable
Version: 1.3
Description: Theme enfant pour Souss Actualites
*/

/* ============================================================
   RESPONSIVE MOBILE 320px 360px 375px 390px
   ============================================================ */
@media (max-width: 782px) {

  /* 0. Base : zero debordement global */
  html, body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  .wp-site-blocks {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  .wp-block-group.alignfull,
  .wp-block-group.alignwide {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* 1. Header utilitaire */
  .souss-header-search,
  [class*="souss-search"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .wp-block-social-links {
    justify-content: center !important;
  }
  .wp-block-site-logo {
    margin: 0 auto !important;
  }
  .wp-block-site-title a,
  .wp-block-site-title {
    font-size: clamp(1rem, 5vw, 1.4rem) !important;
  }
  /* 2. Blocs is-nowrap header : wrap autorise */
  .wp-block-template-part .wp-block-group.is-nowrap,
  .wp-block-template-part .is-layout-flex.is-nowrap,
  .wp-block-group.alignwide.is-content-justification-space-between {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
  }
  /* 3. Nav top bar : wrap ok */
  .wp-block-navigation__container:not(.items-justified-center) {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  /* 3b. Nav categories : scroll horizontal, NO wrap */
  .wp-block-navigation__container.items-justified-center {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .wp-block-navigation__container.items-justified-center::-webkit-scrollbar {
    display: none !important;
  }
  .wp-block-navigation__container.items-justified-center .wp-block-navigation-item__content {
    white-space: nowrap !important;
    padding: 4px 8px !important;
    font-size: 0.82rem !important;
  }
  .wp-block-navigation-item__content {
    font-size: 0.85rem !important;
  }
  /* 4. Slider A la Une */
  .souss-featured-slider.wp-block-query {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .souss-featured-slider .wp-block-post-template {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    width: 100% !important;
    box-sizing: border-box !important;
    scrollbar-width: none !important;
  }
  .souss-featured-slider .wp-block-post-template::-webkit-scrollbar {
    display: none !important;
  }
  .souss-featured-slider .wp-block-post {
    min-width: calc(100vw - 40px) !important;
    max-width: calc(100vw - 40px) !important;
    scroll-snap-align: start !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
  }
  /* 5. Grille articles 3 col -> 1 col */
  .alignwide.wp-block-post-template,
  .wp-block-post-template.is-layout-flow {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .souss-featured-slider .wp-block-post-template {
    display: flex !important;
    grid-template-columns: unset !important;
  }
  .wp-block-post { max-width: 100% !important; }
  img, figure {
    max-width: 100% !important;
    height: auto !important;
  }
  /* 6. Footer colonnes empilees */
  footer .wp-block-columns,
  .wp-block-template-part .wp-block-columns {
    flex-wrap: wrap !important;
    flex-direction: column !important;
  }
  footer .wp-block-column,
  .wp-block-template-part .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* ============================================================
   TRES PETITS ECRANS 320px-400px
   ============================================================ */
@media (max-width: 400px) {
  .wp-block-navigation__container.items-justified-center .wp-block-navigation-item__content {
    padding: 4px 6px !important;
    font-size: 0.78rem !important;
  }
  .souss-featured-slider .wp-block-post {
    min-width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
  }
  .alignwide.wp-block-post-template {
    padding: 0 8px !important;
  }
}

/* ============================================================
   CORRECTIFS MOBILES CIBLES — <= 390px
   Auteur : Claude / Cowork — 2026-08-15
   ============================================================ */
@media (max-width: 390px) {

  /* --- 1. Flches slider : touch + z-index + pointer-events --- */
  .souss-slider-arrow {
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 20 !important;
    cursor: pointer !important;
  }

  /* Eviter que le conteneur externe ne clippe les clics */
  .souss-featured-slider-outer {
    overflow: visible !important;
    position: relative !important;
  }

  /* --- 2. Hommage Lahcen Jikh : forcer la visibilité --- */
  .wp-block-template-part .wp-block-paragraph.has-text-color,
  footer .wp-block-paragraph.has-text-color {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* --- 3. Empêcher le débordement horizontal du top-bar et footer --- */
  .wp-block-template-part .wp-block-columns,
  footer .wp-block-columns {
    overflow-x: clip !important;
  }

  /* Slider cards : correctif padding horizontal */
  .souss-featured-slider .wp-block-post {
    min-width: calc(100vw - 80px) !important;
    max-width: calc(100vw - 80px) !important;
  }

}