/* ===========================
   Fuuz Help Center – Brand CSS
   ===========================
   Palette (as provided):
   Primary:   #5b30df
   Dark:      #201d2e
   Light:     #ffffff
   Secondary: #7200b5
   Warm:      #fd8b09
   Accent:    #03caaf
*/

/* --- Brand tokens --- */
:root{
  --fuuz-primary:   #5b30df;
  --fuuz-dark:      #201d2e;
  --fuuz-light:     #ffffff;

  --fuuz-secondary: #7200b5;
  --fuuz-warm:      #fd8b09;
  --fuuz-accent:    #03caaf;

  --fuuz-border:    #e6e9f2;
  --fuuz-bg-soft:   #f5f7fb;
}

/* --- Header brand bar (gradient) --- */
.Header__headerBg .Header__bgColor{
  background: linear-gradient(90deg,
    var(--fuuz-dark) 0%,
    var(--fuuz-primary) 60%,
    var(--fuuz-accent) 100%);
  min-height: 64px;
}

/* --- Header container --- */
.Header__menuWrapper .Header__menuBox{
  max-width: 1140px;
  margin: 0 auto;
  padding: 10px 16px;
  color: var(--fuuz-light);
}

/* --- Logo + tagline --- */
.Header__logoPart{ display:flex; align-items:center; gap: 12px; }
.Header__logo{ height: 28px; width:auto; }
.Header__logotxt{
  color: var(--fuuz-light);
  font-weight: 600;
  letter-spacing: .02em;
}

/* --- Navigation layout --- */
.Header__nav{ display:flex; align-items:center; gap: 6px; }
.Header__menuList{ list-style:none; }

/* Core link styling for menu items */
.Header__menuList a{
  display:inline-block;
  color: var(--fuuz-light);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 10px;
}

/* Hover / focus */
.Header__menuList:hover,
.Header__menuList:focus-within{
  background: rgba(255,255,255,.12);
}

/* Active menu (Zoho may add classes or aria-current) */
.Header__menuList.active,
.Header__menuList[aria-current="page"]{
  background: var(--fuuz-secondary);
}

/* --- Academy anchor fix (when rendered as a bare <a> inside <ul>) --- */
.Header__nav > a{
  display:inline-block;
  color: var(--fuuz-light);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 10px;
}
.Header__nav > a:hover,
.Header__nav > a:focus-visible{ background: rgba(255,255,255,.12); }

/* Optional: external indicator for Academy */
.Header__nav > a[href*="academy.fuuz.com"]::after{
  content: " ↗";
  opacity: .9;
}

/* --- Mobile menu trigger focus (keep original structure) --- */
#menuBarContainer{ border-radius: 8px; }
#menuBarContainer:focus-visible{
  outline: 3px solid var(--fuuz-accent);
  outline-offset: 2px;
}

/* --- Welcome title / description in banner --- */
.Header__welcomeTitle{ color: var(--fuuz-light); }
.Header__welcomeDescription{
  color: var(--fuuz-light);
  opacity: .9;
}

/* --- Breadcrumb links --- */
#bannerContainer a{
  color: var(--fuuz-accent);
  text-decoration: none;
}
#bannerContainer a:hover,
#bannerContainer a:focus-visible{ text-decoration: underline; }

/* --- Search box (Zoho renders ${Search}) --- */
.Header__searchBox input[type="search"],
.Header__searchBox input[type="text"]{
  background: var(--fuuz-dark);
  color: var(--fuuz-light);
  border: 1px solid var(--fuuz-accent);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.Header__searchBox input::placeholder{ color: rgba(255,255,255,.70); }
.Header__searchBox input:focus-visible{
  outline: 3px solid var(--fuuz-accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(3,202,175,.25);
}

/* --- Quick actions (Add Ticket / Add Topic) --- */
.Header__panelbtns .Header__containerUl li{
  list-style:none;
  display:inline-flex; align-items:center;
  gap:8px; padding:6px 10px;
  border-radius: 10px;
  color: var(--fuuz-light);
  background: var(--fuuz-secondary);
  border: 1px solid rgba(255,255,255,.25);
}
.Header__panelbtns .Header__containerUl li:hover,
.Header__panelbtns .Header__containerUl li:focus-within{
  background: var(--fuuz-primary);
}

/* --- Global links/buttons (outside header) --- */
a{ color: var(--fuuz-primary); }
a:hover, a:focus-visible{ color: var(--fuuz-secondary); }

button, .primary{
  background: var(--fuuz-primary);
  color: var(--fuuz-light);
  border: none;
  border-radius: 10px;
}
button:hover, .primary:hover{ background: var(--fuuz-secondary); }
button:focus-visible, .primary:focus-visible{
  outline: 3px solid var(--fuuz-accent);
  outline-offset: 2px;
}

/* --- Soft panels & borders (e.g., footer cards, KB templates) --- */
.panel, .card, .kb-brand-footer{
  background: var(--fuuz-bg-soft);
  border: 1px solid var(--fuuz-border);
  color: var(--fuuz-dark);
}

/* --- Sticky header (optional) --- */
.Header__menuWrapper{ position: sticky; top: 0; z-index: 999; }

/* --- Print: avoid gradients/white text on dark --- */
@media print{
  .Header__headerBg .Header__bgColor{ background: #ffffff; }
  .Header__menuWrapper, .Header__titleSearchWrapper{ color: #000;  .Header__menuWrapper, .Header__titleSearchWrapper{ color: #000; }
  .Header__menuList a{ color: #000; background: transparent; }