/* tff-menu.css — CLS-safe mega menu with “More” + split-click mobile */
:root{
  --nav-max:1320px;        /* container width */
  --hover-bridge:24px;     /* invisible hover area under each top link (desktop) */
}

/* ===== Base ===== */
.help-nav{ background:#115caa; position:relative; z-index:1001; color:#cfe0f5; }
.help-nav a{ color:#e9f2ff; text-decoration:none; }
.help-nav a:hover{ color:#fff; }

/* Bar row — centered container */
.help-nav .inner{
  max-width:var(--nav-max);
  width:100%;
  margin:0 auto;
  padding:10px 16px 0 12px;     /* bottom 0 = no visible gap; small left padding */
  display:flex; align-items:center; gap:16px;
  overflow:visible;             /* allow dropdowns */
  min-height:52px;              /* CLS-safe height */
  box-sizing:border-box;        /* prevent horizontal overflow */
}

/* Hamburger (hidden on desktop) */
.help-nav .menu-toggle{
  display:none; border:0; background:transparent; color:#fff; cursor:pointer;
  line-height:1; padding:10px 10px; min-width:44px; min-height:44px;
  align-items:center; gap:10px;
}
.help-nav .menu-toggle .icon{ font-size:22px; }

.help-nav ul, .help-nav li{ margin:0; padding:0; list-style:none; }

/* ===== Top row (desktop) ===== */
.help-nav .top{
  display:flex; gap:18px; align-items:center;
  flex:1 1 auto; min-width:0; white-space:nowrap;
  overflow:visible;                     /* don't clip dropdowns */
  box-sizing:border-box;
}
/* Hydration guard: hide items until JS balances (prevents CLS flash) */
.help-nav:not(.ready) .top{ visibility:hidden; }

.help-nav .top>li{ position:static; flex:0 0 auto; }   /* panel positions off .help-nav, not li */
.help-nav .top>li>a{ font-weight:800; padding:10px 0; line-height:1.1; }
.help-nav .has-sub>a{ display:inline-flex; align-items:center; gap:6px; }
.help-nav .chev{ opacity:.9; }

/* Hide mobile toggle button on desktop (prevents tiny “underscore”) */
.help-nav .sub-toggle{ display:none; }

/* ===== Desktop full-width panels ===== */
.help-nav .panel{
  position:absolute; left:0; right:0; top:100%; display:none;
  background:#0e2742; border-top:1px solid #203346;
  width:auto;                           /* fill between left/right = 0 (no 100vw) */
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  z-index:2;                            /* above the hover bridge */
}
.help-nav .top>li:hover>.panel,
.help-nav .top>li:focus-within>.panel,
.help-nav .top>li .panel:hover{ display:block; }

/* panel content matches the 1320px container */
.help-nav .panel::before{ content:none !important; display:none !important; }
.help-nav .panel-content{
  max-width:var(--nav-max);
  margin:0 auto;
  padding:18px 24px 24px;
  box-sizing:border-box;
}
.help-nav .head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.help-nav .title, .help-nav .links-title{ color:#d3eaff; font-weight:900; }
.help-nav .links-title{
  display:block;
  margin:0 0 12px;   /* breathing room under the title */
  padding:0;         /* no extra padding, no divider */
}
.help-nav .panel .title{ margin-bottom:12px; }
.help-nav .panel .links li{ margin:0 0 12px; }

/* ===== Desktop hover bridge on the ANCHOR (prevents text→panel gap) ===== */
@media (min-width:901px){
  .help-nav .top>li>a{ position:relative; } /* anchor provides positioning context */
  .help-nav .top>li>a::after{
    content:""; position:absolute;
    left:-10px; right:-10px; top:100%;
    height:var(--hover-bridge);
    z-index:1;                    /* panel has z=2, so it renders above this */
  }
}

/* ===== Layout helpers ===== */
.help-nav .flex{ display:flex; gap:20px; }
.help-nav .col{ flex:1; }
.help-nav .side{ min-width:260px; }

/* ===== Gradient cards (desktop only) ===== */
.help-nav .cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.help-nav .gcard{
  display:flex; align-items:center; justify-content:center;
  min-height:110px; border-radius:12px; font-weight:900;
  border:1px solid rgba(255,255,255,.12); color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.6);
}
.help-nav .gcard:nth-child(1){ background:linear-gradient(135deg,#1e88e5,#0d47a1); }
.help-nav .gcard:nth-child(2){ background:linear-gradient(135deg,#1976d2,#0c3565); }
.help-nav .gcard:nth-child(3){ background:linear-gradient(135deg,#1565c0,#06263f); }
.help-nav .gcard:nth-child(4){ background:linear-gradient(135deg,#0d47a1,#02162d); }
.help-nav .gcard:nth-child(5){ background:linear-gradient(135deg,#2196d3,#0a2a4f); }
.help-nav .gcard:nth-child(6){ background:linear-gradient(135deg,#0b3c6d,#021b36); }
.help-nav .gcard:nth-child(7){ background:linear-gradient(135deg,#2a75bb,#113a67); }
.help-nav .gcard:nth-child(8){ background:linear-gradient(135deg,#0a58a1,#042342); }

/* ===== Link lists / columns ===== */
.help-nav .links li{ margin-bottom:10px; }
.help-nav .links a{ color:#cfe9ff; font-weight:700; }
.help-nav .links a:hover{ text-decoration:underline; }
.help-nav .columns{ columns:3 260px; column-gap:24px; }
.help-nav .columns a{ display:block; color:#cfe9ff; margin:0 0 10px; font-weight:700; }

/* ===== “By Country” chips (desktop) ===== */
.help-nav .chip-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.help-nav .chip{
  display:block; text-align:center; padding:8px 10px; border-radius:999px;
  background:#14487c; border:1px solid #2a4461; color:#e6f3ff; font-weight:700;
}
.help-nav .chip:hover{ background:#1d5d9e; color:#fff; }

/* =================  “More” overflow (clean + CLS)  ================= */
.help-nav .more-item{
  flex:0 0 auto; min-width:72px;          /* reserve width so it never “pops in” */
  visibility:hidden; opacity:0; pointer-events:none;
}
.help-nav .more-item.show{ visibility:visible; opacity:1; pointer-events:auto; }

.help-nav .more-item .panel .panel-content{ padding:16px 24px; }
.help-nav .more-item .more-list{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:16px;
}
.help-nav .more-item .more-proxy{
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:12px 14px; box-shadow:none;
}
.help-nav .more-item .more-proxy .proxy-head{ display:block; margin:0 0 8px; padding:0; font-weight:800; color:#f1f7ff; text-decoration:none; }
.help-nav .more-item .more-proxy .proxy-sub{ margin:0; padding:0; list-style:none; }
.help-nav .more-item .more-proxy .proxy-sub li + li{ border-top:1px solid rgba(255,255,255,.06); }
.help-nav .more-item .more-proxy .proxy-sub a{ display:block; padding:8px 0; color:#d5e8ff; border-radius:6px; }
.help-nav .more-item .more-proxy .proxy-sub a:hover{ background:rgba(255,255,255,.07); color:#fff; text-decoration:none; }
.help-nav .more-item .more-proxy.no-sub{ padding:0; }
.help-nav .more-item .more-proxy.no-sub .proxy-head{
  display:block; padding:12px 14px; border-radius:10px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
}
.help-nav .more-item .more-proxy.no-sub .proxy-head:hover{ background:rgba(255,255,255,.08); }

/* ======================  Mobile drawer + split-click  ====================== */
@media (max-width:900px){
  .help-nav .inner{ padding:10px 12px; }

  /* Show and ENLARGE the hamburger + text on mobile */
  .help-nav .menu-toggle{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:12px 10px;         /* bigger hit area */
    font-size:20px;            /* affects visible button text if present */
    font-weight:800;
  }
  .help-nav .menu-toggle .icon{
    font-size:28px;            /* larger hamburger icon */
    line-height:1;
  }
  .help-nav .menu-toggle .label{
    font-size:20px;
    font-weight:800;
    letter-spacing:.2px;
  }

  .help-nav .overlay{ position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; z-index:1000; }
  .help-nav .overlay.show{ display:block; }

  .help-nav .top{
    display:flex; flex-direction:column; gap:0;
    position:fixed; top:0; left:-70%; width:70%; height:100vh;
    background:#0e2742; padding:12px; overflow:auto; transition:left .3s ease; z-index:1001;
    white-space:normal; visibility:visible !important;
  }
  .help-nav .top.open{ left:0; }

  /* split-click row: left link navigates, right caret toggles */
  .help-nav .top>li{
    width:100%; display:flex; align-items:center;
    border-bottom:1px solid rgba(255,255,255,.08); flex-wrap:wrap;
  }
  .help-nav .top>li>a{ flex:0 1 auto; display:block; padding:14px 6px; order:1; }
  .help-nav .top>li>a .chev{ display:none; }

  .help-nav .top>li>.sub-toggle{
    display:flex; justify-content:flex-end; align-items:center;
    padding:14px 6px; background:transparent; border:0; color:#e9f2ff;
    font:inherit; cursor:pointer; flex:1 1 auto; order:1;
  }
  .help-nav .top>li>.sub-toggle::after{ content:'▾'; transition:transform .2s; }
  .help-nav .top>li.open>.sub-toggle::after{ transform:rotate(180deg); }

  .help-nav .top>li>.panel{
    position:static; display:none; width:100%;
    border-top:1px solid rgba(255,255,255,.08); box-shadow:none;
    flex:0 0 100%; order:2;
  }
  .help-nav .panel-content{ padding:12px 6px 16px; }
  .help-nav .top>li.open>.panel{ display:block; }

  /* Disable desktop hover/focus rules so caret can close */
  .help-nav .top>li:hover > .panel,
  .help-nav .top>li:focus-within > .panel,
  .help-nav .top>li .panel:hover{ display:none !important; }
  .help-nav .top>li.open > .panel{ display:block !important; }

  /* Hide desktop “More” */
  .help-nav .more-item{ display:none !important; }

  /* Force ALL submenus vertical on mobile */
  .help-nav .panel .cards{ display:block !important; grid-template-columns:none !important; gap:0 !important; }
  .help-nav .panel .cards > *{ display:block !important; margin:0 0 10px !important; }
  .help-nav .panel .chip-grid{ display:block !important; }
  .help-nav .panel .chip-grid > *{ display:block !important; margin:0 0 10px !important; }
  .help-nav .panel .columns{ columns:1 auto !important; }
  .help-nav .panel .gcard, .help-nav .panel .chip{
    background:none !important; border:0 !important; border-radius:0 !important;
    min-height:auto !important; padding:10px 0 !important; text-shadow:none !important;
    color:#e9f2ff !important; text-align:left !important;
  }

  /* Kill desktop hover bridge on mobile */
  .help-nav .top>li>a::after{ display:none; }
}