/* ==========================================================
   HEADER — COMPONENT STYLES (ACCESSIBLE)
   - Token-based
   - Layered (components)
   - Works with main.js mobile toggle (.active / .open)
   - FIX: Contrast (black text on turquoise background)
   ========================================================== */


  /* ======================================================
     HEADER WRAPPER
     ====================================================== */
  .site-header{
    background:var(--color-primary);
    color:var(--color-dark);
    padding:20px 0;
    position:sticky;
    top:0;
    z-index:9999;
    box-shadow:0 6px 18px rgba(0,0,0,.10);
  }

  .header-inner{
    display:flex;
    align-items:center;
    gap:16px;
  }


  /* ======================================================
     LOGO (icon + full text)
     ====================================================== */
  .site-logo{
    display:flex;
    align-items:center;
    flex:0 0 auto;
  }

  .site-logo .brand{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    color:inherit;
  }

  .site-logo .brand-mark{
    height:54px;
    width:auto;
    border-radius:0;
    display:block;
  }

  .site-logo .brand-text{
    display:flex;
    flex-direction:column;
    line-height:1;
  }

  /* FIX: was white (fails on turquoise) */
  .site-logo .brand-name{
    font-family:var(--font-title);
    font-weight:800;
    font-size:18px;
    color:var(--color-dark);
  }

  /* FIX: was white (fails on turquoise) */
  .site-logo .brand-tagline{
    font-family:var(--font-title);
    font-weight:600;
    font-size:12px;
    color:var(--color-dark);
    opacity:.90;
    margin-top:4px;
  }

  .site-logo .brand-rule{
    width:64px;
    height:4px;
    background:var(--color-accent,#FF9A00);
    border-radius:99px;
    margin:8px 0 6px;
  }

  /* FIX: was white (fails on turquoise) */
  .site-logo .brand-loc{
    font-family:var(--font-title);
    font-weight:800;
    font-size:16px;
    color:var(--color-dark);
  }


  /* ======================================================
     DESKTOP NAV
     ====================================================== */
  .main-navigation{
    margin-left:auto;
    display:flex;
    align-items:center;
  }

  .main-navigation .menu{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    align-items:center;
    gap:24px;
  }

  .main-navigation .menu > li{
    position:relative;
  }

  /* FIX: use black text for contrast */
  .main-navigation .menu > li > a{
    color:var(--color-dark);
    font-family:var(--font-title);
    font-weight:700;
    font-size:16px;
    text-decoration:none;
    padding:10px 0;
    display:inline-block;
    position:relative;
  }

  /* underline animation (keep it) */
 .main-navigation .menu > li > a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-8px;
  height:4px;
  background:var(--color-gold);
  border-radius:999px;
  opacity:0;
  transform:scaleX(.55);
  transform-origin:left;
  transition:transform var(--anim-speed-fast) var(--anim-ease),
             opacity var(--anim-speed-fast) var(--anim-ease);
  box-shadow:0 0 0 2px rgba(17,17,17,.14);
}

 .main-navigation .menu > li > a:hover::after,
.main-navigation .menu > li > a:focus-visible::after,
.menu .current_page_item > a::after{
  opacity:1;
  transform:scaleX(1);
}

  /* FIX: hover stays black (white fails on turquoise) */
  .main-navigation .menu > li > a:hover{
    color:var(--color-dark);
  }

  /* FIX: current stays black (white fails on turquoise) */
  .menu .current_page_item > a{
    color:var(--color-dark);
  }


  /* ======================================================
     FIX: REMOVE “CTA BUTTON” STYLE IN HEADER MENU
     - Keeps Soutenir as a normal nav link (not orange)
     ====================================================== */
  .menu .menu-item-cta > a{
    background:transparent;
    color:var(--color-dark);
    padding:10px 0;
    border-radius:0;
    box-shadow:none;
  }

  .menu .menu-item-cta > a:hover{
    background:transparent;
    color:var(--color-dark);
  }

  .menu .menu-item-cta > a::after{
    display:block;
  }


  /* ======================================================
     KEYBOARD FOCUS (must be visible on turquoise)
     ====================================================== */
  .main-navigation a:focus-visible{
    outline:3px solid var(--color-dark);
    outline-offset:4px;
    border-radius:8px;
  }


  /* ======================================================
     MOBILE TOGGLE BUTTON
     ====================================================== */
  .mobile-toggle{
    display:none;
    appearance:none;
    border:0;
    background:transparent;
    width:48px;
    height:48px;
    border-radius:12px;
    cursor:pointer;
    position:relative;
    margin-left:auto;
  }

  /* FIX: bars black (white fails on turquoise) */
  .mobile-toggle span{
    position:absolute;
    left:50%;
    top:50%;
    width:28px;
    height:3px;
    border-radius:999px;
    background:var(--color-dark);
    transform:translate(-50%,-50%);
    transition:transform var(--anim-speed-fast) var(--anim-ease),opacity var(--anim-speed-fast) var(--anim-ease);
  }

  .mobile-toggle span:nth-child(1){transform:translate(-50%,-50%) translateY(-9px);}
  .mobile-toggle span:nth-child(2){transform:translate(-50%,-50%);}
  .mobile-toggle span:nth-child(3){transform:translate(-50%,-50%) translateY(9px);}

  .mobile-toggle.open span:nth-child(1){transform:translate(-50%,-50%) rotate(45deg);}
  .mobile-toggle.open span:nth-child(2){opacity:0;}
  .mobile-toggle.open span:nth-child(3){transform:translate(-50%,-50%) rotate(-45deg);}

  .mobile-toggle:focus-visible{
    outline:3px solid var(--color-dark);
    outline-offset:4px;
  }


  /* ======================================================
     MOBILE MENU
     ====================================================== */
  .mobile-menu{
    display:none;
    width:100%;
    margin-top:14px;

    /* FIX: light panel so black text is readable */
    background:rgba(246,247,215,.92); /* close to your cream */
    border:1px solid rgba(0,0,0,.12);

    border-radius:16px;
    overflow:hidden;
  }

  .mobile-menu.active{display:block;}

  .mobile-menu .menu{
    list-style:none;
    margin:0;
    padding:10px;
    display:flex;
    flex-direction:column;
    gap:6px;
  }

  /* FIX: black text */
  .mobile-menu .menu a{
    display:block;
    padding:12px 12px;
    border-radius:12px;
    color:var(--color-dark);
    text-decoration:none;
    font-family:var(--font-title);
    font-weight:700;
  }

  .mobile-menu .menu a:hover{
    background:rgba(255,255,255,.85);
  }

  .mobile-menu .menu a:focus-visible{
    outline:3px solid var(--color-dark);
    outline-offset:2px;
  }


  /* ======================================================
     RESPONSIVE
     ====================================================== */
  @media (max-width:768px){
    .main-navigation{display:none;}
    .mobile-toggle{display:inline-flex;align-items:center;justify-content:center;}

    .header-inner{
      flex-wrap:wrap;
      align-items:center;
    }

    .site-logo{order:1;}
    .mobile-toggle{order:2;}
    .mobile-menu{order:3;}
  }

  @media (min-width:769px){
    .mobile-menu,
    .mobile-menu.active{display:none !important;}
    .mobile-toggle{display:none !important;}
  }

  @media (max-width:480px){
    .site-header{padding:10px 0;}
    .site-logo .brand-mark{height:40px;}
    .site-logo .brand-name{font-size:14px;}
    .site-logo .brand-tagline{font-size:10.5px;}
    .site-logo .brand-rule{width:46px;height:3px;margin:6px 0 5px;}
    .site-logo .brand-loc{font-size:12.5px;}
    .mobile-menu{overflow-x:hidden;}
  }