/* regions-menu-fix.css — v20 */
/* Goal: On desktop, keep header within viewport:
   - Logo + Alertez‑nous always visible on one line
   - Category nav scrolls horizontally INSIDE the header (no page overflow)
   - Dropdown stays visible above header, does not create horizontal scroll
*/
@media (min-width: 768px){
  /* Header skeleton */
  .site-header{ position:relative; z-index:1000; width:100%; }
  .header-bar{
    display:flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: .75rem !important;
    /* Important: don't let header itself create horizontal scroll */
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }
  .header-bar > *{ flex: 0 0 auto; }
  .header-bar nav{
    /* Nav occupies the middle and can scroll horizontally inside */
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto !important;
    overflow-y: visible !important;
    white-space: nowrap !important;
    scrollbar-width: none;              /* Firefox */
  }
  .header-bar nav::-webkit-scrollbar{ display: none; } /* WebKit */

  /* "Ma Province" remains blue TEXT (not a button) */
  [data-provinces-desktop="trigger"],
  .nav-regions-trigger{
    color:#366f9f !important;
    background:transparent !important;
    font-weight:700 !important;
    border:0 !important; padding:0 !important;
    line-height:1.25rem; display:inline-flex; align-items:center; gap:.25rem;
  }
  [data-provinces-desktop="trigger"]:hover,
  .nav-regions-trigger:hover{ text-decoration: underline; cursor:pointer; }

  /* Dropdown theme + visibility; does NOT cause horizontal overflow */
  :root{
    --_menu-bg-fallback: #f7f3ea;
    --_menu-fg-fallback: #1f2937;
    --_menu-hover-fallback: rgba(0,0,0,0.06);
  }
  [data-provinces-desktop="menu"],
  .nav-regions-menu{
    position:absolute;
    /* place directly under the trigger line, no vertical gap */
    top: 100%;
    left: 0;
    display:none; opacity:0; visibility:hidden; transform:none !important;
    z-index: 999999 !important;
    background: var(--header-tint-strong, var(--header-tint, var(--menu-bg, var(--_menu-bg-fallback)))) !important;
    color: var(--menu-fg, var(--_menu-fg-fallback)) !important;
    border:1px solid rgba(0,0,0,0.08) !important;
    border-radius:.5rem !important;
    box-shadow:0 10px 28px rgba(0,0,0,.12) !important;
    min-width:16rem;
    max-width: min(90vw, 28rem);   /* clamp inside viewport */
    padding:.25rem 0;
    font-size:15px; line-height:1.25rem;
    pointer-events:none;
  }
  .relative.group:hover > [data-provinces-desktop="menu"],
  .relative.group:hover > .nav-regions-menu,
  [data-provinces-desktop="menu"]:hover,
  .nav-regions-menu:hover,
  [data-provinces-desktop="wrapper"].open > [data-provinces-desktop="menu"]{
    display:block !important; opacity:1 !important; visibility:visible !important;
    pointer-events:auto !important;
  }
  [data-provinces-desktop="menu"] a,
  .nav-regions-menu a{
    display:block;
    padding:.5rem 1rem;
    white-space:nowrap;
    color: inherit !important;
    background: transparent !important;
  }
  [data-provinces-desktop="menu"] a:hover,
  .nav-regions-menu a:hover{ background: var(--menu-hover, var(--_menu-hover-fallback)) !important; }
}