/*********************************************************
  FIDO — Sage/Grey UI polish for APEX Universal Theme
  (place as the LAST CSS file so it wins the cascade)
**********************************************************/

/* --------- Theme Tokens (tweak here) --------- */
:root{
  --fido-text:            #374151;   /* slate */
  --fido-text-strong:     #1f2937;   /* darker slate */
  --fido-pill:            #e3f2ed;   /* pale sage */
  --fido-pill-active:     #d1e7dd;   /* muted sage */
  --fido-underline:       #6ba292;   /* sage line */
  --fido-underline-strong:#4f7c66;   /* darker sage line */
  --fido-radius:          10px;
  --fido-caret-size:      .75rem;
}

/* =======================================================
   HEADER (branding strip)
======================================================= */
.t-Header,
.t-Header-branding,
.t-Header-branding .t-Header-logo,
.t-Header-branding .t-Header-controls{
  background: #f7faf9 !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
}
.t-Header{ padding:6px 16px !important; min-height:48px !important; }
.t-Header-logo, .t-Header-logo a{
  color: var(--fido-text) !important;
  font-weight: 600 !important;
  font-size: 1.05rem !important;
  text-decoration: none !important;
}

/* Top-right nav buttons (Application Settings, Logout, etc.) */
.t-NavigationBar-item a, .t-NavigationBar-item .t-Icon{
  color: var(--fido-text) !important;
  font-size: .95rem !important;
  font-weight: 500;
  opacity: .9;
}
.t-NavigationBar-item a:hover,
.t-NavigationBar-item a:focus,
.t-NavigationBar-item .t-Icon:hover{
  color: var(--fido-text-strong) !important;
  opacity: 1;
}
.t-Button--header.t-Button--navBar{
  color: var(--fido-text) !important;
  background: transparent !important;
  font-weight: 500 !important;
  border: none !important;
  box-shadow: none !important;
  transition: color .2s, background .2s;
}
.t-Button--header.t-Button--navBar:hover,
.t-Button--header.t-Button--navBar:focus{
  color: var(--fido-text-strong) !important;
  background: var(--fido-pill) !important;
  border-radius: 6px;
}
.t-Button--header.t-Button--navBar.is-active,
.t-Button--header.t-Button--navBar:active{
  color: #111827 !important;
  background: var(--fido-pill-active) !important;
  font-weight: 600 !important;
}

/* =======================================================
   TOP MENUBAR (Home, Children, Registration, …)
======================================================= */

/* Neutral background + no UT shadows/bands */
.t-Header-nav,
.t-Header-nav .a-MenuBar,
.t-Header-nav .a-MenuBar-items{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Override UT menubar variables so it never paints dark bands */
.t-Header-nav{
  --ut-header-menubar-item-current-background-color: transparent;
  --ut-header-menubar-item-hover-background-color:   transparent;
  --ut-header-menubar-item-current-text-color:       var(--fido-text-strong);
  --ut-header-menubar-item-hover-text-color:         var(--fido-text-strong);

  --a-menubar-item-text-color:                       var(--fido-text);
  --a-menubar-item-current-text-color:               var(--fido-text-strong);
  --a-menubar-item-hover-text-color:                 var(--fido-text-strong);
}

/* Reset the item wrapper in ALL states (kills black bars) */
.t-Header-nav .a-MenuBar .a-MenuBar-item,
.t-Header-nav .a-MenuBar .a-MenuBar-item.is-hover,
.t-Header-nav .a-MenuBar .a-MenuBar-item.is-focused,
.t-Header-nav .a-MenuBar .a-MenuBar-item.is-expanded,
.t-Header-nav .a-MenuBar .a-MenuBar-item.is-current,
.t-Header-nav .a-MenuBar .a-MenuBar-item.is-active,
.t-Header-nav .a-MenuBar .a-MenuBar-item.is-selected{
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
}
.t-Header-nav .a-MenuBar .a-MenuBar-item::before,
.t-Header-nav .a-MenuBar .a-MenuBar-item::after{ content:none !important; }

/* Label styling */
.t-Header-nav .a-MenuBar-item > .a-MenuBar-label,
.t-Header-nav .a-MenuBar-item > a.a-MenuBar-label{
  position: relative;
  color: var(--fido-text) !important;
  font-weight: 500 !important;
  font-size: .95rem !important;
  padding: 10px 14px !important;
  background: transparent !important;
  border-radius: var(--fido-radius);
  transition: color .2s ease, background .2s ease;
}

/* Hover/focus pill */
.t-Header-nav .a-MenuBar-item.is-hover > .a-MenuBar-label,
.t-Header-nav .a-MenuBar-item.is-focused > .a-MenuBar-label,
.t-Header-nav .a-MenuBar-item > .a-MenuBar-label:hover{
  color: var(--fido-text-strong) !important;
  background: var(--fido-pill) !important;
}

/* Active/current pill */
.t-Header-nav .a-MenuBar-item.is-active   > .a-MenuBar-label,
.t-Header-nav .a-MenuBar-item.is-current  > .a-MenuBar-label,
.t-Header-nav .a-MenuBar-item.is-selected > .a-MenuBar-label,
.t-Header-nav .a-MenuBar-item.is-expanded > .a-MenuBar-label{
  color: var(--fido-text-strong) !important;
  background: var(--fido-pill-active) !important;
  font-weight: 600 !important;
}

/* Underline animation */
.t-Header-nav .a-MenuBar-item > .a-MenuBar-label::after{
  content:"";
  position:absolute; left:50%; bottom:6px; transform:translateX(-50%);
  width:0; height:2px; background:var(--fido-underline); transition:width .25s ease;
}
.t-Header-nav .a-MenuBar-item:hover   > .a-MenuBar-label::after{ width:60%; }
.t-Header-nav .a-MenuBar-item.is-active   > .a-MenuBar-label::after,
.t-Header-nav .a-MenuBar-item.is-current  > .a-MenuBar-label::after,
.t-Header-nav .a-MenuBar-item.is-selected > .a-MenuBar-label::after{
  width:60%; background:var(--fido-underline-strong);
}

/* Keep the little caret cell transparent */
.t-Header-nav .a-Menu-subMenuCol,
.t-Header-nav .a-MenuBar-item.is-hover    .a-Menu-subMenuCol,
.t-Header-nav .a-MenuBar-item.is-expanded .a-Menu-subMenuCol{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* =======================================================
   CARETS (replace UT block glyphs)
======================================================= */

/* Neutralise UT icon glyph everywhere */
.a-Icon.icon-menu-drop-down{
  font-size:0 !important;
  color:transparent !important;
  background:none !important;
  border:0 !important;
  line-height:1;
}

/* Top menubar caret: ▼ */
.t-Header-nav .a-Menu-subMenuCol .a-Icon.icon-menu-drop-down::before{
  content:"▾";
  font-size: var(--fido-caret-size);
  color: var(--fido-text);
  vertical-align: middle;
  transition: color .2s ease;
}
.t-Header-nav .a-MenuBar-item.is-hover .a-Menu-subMenuCol .a-Icon.icon-menu-drop-down::before,
.t-Header-nav .a-MenuBar-item.is-focused .a-Menu-subMenuCol .a-Icon.icon-menu-drop-down::before{
  color: var(--fido-text-strong);
}

/* Dropdown menu caret: ▶ turns ▼ when expanded */
.a-Menu .a-Menu-subMenuCol .a-Icon.icon-menu-drop-down::before{
  content:"▸";
  font-size: calc(var(--fido-caret-size) - .05rem);
  color: var(--fido-text);
  vertical-align: middle;
  transition: transform .2s ease, color .2s ease;
}
.a-Menu-item[aria-expanded="true"] .a-Menu-subMenuCol .a-Icon.icon-menu-drop-down::before{
  transform: rotate(90deg);
  color: var(--fido-text-strong);
}

/* Remove any top “callout” band on the dropdown panel */
.a-Menu.a-Menu--top,
.a-Menu.a-Menu--top .a-Menu-content{ background-image:none !important; border-top:0 !important; }
.a-Menu.a-Menu--top::before,
.a-Menu.a-Menu--top::after,
.a-Menu.a-Menu--top .a-Menu-content::before,
.a-Menu.a-Menu--top .a-Menu-content::after{ content:none !important; }

/* =======================================================
   FINAL SAFETY: readable current tab in every state
======================================================= */
.t-Header-nav .a-MenuBar .a-MenuBar-item:not(.is-disabled){ opacity:1 !important; filter:none !important; }
.t-Header-nav .a-MenuBar .a-MenuBar-item > .a-MenuBar-label,
.t-Header-nav .a-MenuBar .a-MenuBar-item > a.a-MenuBar-label{
  -webkit-text-fill-color: var(--fido-text) !important;
}
.t-Header-nav .a-MenuBar .a-MenuBar-item.is-current  > .a-MenuBar-label,
.t-Header-nav .a-MenuBar .a-MenuBar-item.is-active   > .a-MenuBar-label,
.t-Header-nav .a-MenuBar .a-MenuBar-item.is-selected > .a-MenuBar-label,
.t-Header-nav .a-MenuBar .a-MenuBar-item.is-expanded > .a-MenuBar-label{
  -webkit-text-fill-color: var(--fido-text-strong) !important;
}
/* Remove vertical separators between top menu items */
.t-Header-nav{
  --a-menubar-item-border-width: 0px !important;
  --a-menubar-item-border-color: transparent !important;
  --a-menubar-item-split-border-width: 0px !important;   /* safety */
  --a-menubar-item-split-border-color: transparent !important;
}

/* Belt & braces in case a theme hard-codes borders */
.t-Header-nav .a-MenuBar .a-MenuBar-item{
  border: 0 !important;
  border-inline-start: 0 !important;
  border-inline-end: 0 !important;
  box-shadow: none !important;   /* some skins draw the separator as an inset shadow */
  margin-inline-start: 0 !important;  /* neutralise the -1px offset used when borders exist */
}