/*

  Host isolation + layout for n4859 header.

  Shared by:

    - hf-static-front static pages (inline/static mode)

    - Vue apps (dynamic mode) via /static-resource/seo-chrome/n4859-header-host-guard.css



  Known host conflicts:

  - zui `a{color:#666}` beats CDN for dropNav `label>a` (not `li>a`)

  - zui `label{font-weight:bold;margin-bottom:5px}` makes 运营/更多 look wrong

  - Element UI / global label rules can hit the same dropNav labels



  Layout:

  - CDN `.nav` is position:fixed and does not reserve document flow.

  - Old header.css used in-flow `.header{height:46px}`.

  - Keep #hf_header 46px tall so page content is not covered.



  Load AFTER the n4859 header CDN CSS.

*/



/* Reserve in-flow space for fixed header bar (same as legacy .header height). */

#hf_header.hf-device-web {

  display: block;

  box-sizing: border-box;

  width: 100%;

  height: 46px;

  min-height: 46px;

}



#hf_header a,

#hf_header a:link,

#hf_header a:visited,

#hf_header a:hover,

#hf_header a:active,

#hf_header a:focus {

  text-decoration: none;

}



#hf_header .hf_header_menu_radio {

  position: absolute !important;

  opacity: 0 !important;

  width: 0 !important;

  height: 0 !important;

  margin: 0 !important;

  pointer-events: none !important;

  appearance: none !important;

}



/* zui / Element UI label resets for dropNav */

#hf_header label.hf_header_menu {

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center;

  height: 46px;

  margin: 0 !important;

  padding: 0 !important;

  font-weight: 400 !important;

  line-height: normal !important;

  background: transparent !important;

  border: 0 !important;

  color: rgba(255, 255, 255, 0.78) !important;

  cursor: pointer;

}



/* Beat zui `a{color:#666}` on dropNav (运营/更多 are label>a, not li>a). */

#hf_header .hf-header2 .list li.dropNav label > a,

#hf_header .hf-header2 .list li.dropNav > a,

#hf_header.hf-device-web .hf-header2 .list > li.dropNav label > a,

#hf_header.hf-device-web .hf-header2 .list > li.dropNav > a {

  color: rgba(255, 255, 255, 0.78) !important;

  font-weight: 400 !important;

  text-decoration: none !important;

}



#hf_header .hf-header2 .list li.dropNav label > a:hover,

#hf_header .hf-header2 .list li.dropNav.open .hf_header_menu > a,

#hf_header .hf-header2 .list li.dropNav .hf_header_menu_radio:checked + .hf_header_menu > a,

#hf_header.hf-device-web .hf-header2 .list > li.dropNav label > a:hover,

#hf_header.hf-device-web .hf-header2 .list > li.dropNav.open .hf_header_menu > a,

#hf_header.hf-device-web .hf-header2 .list > li.dropNav .hf_header_menu_radio:checked + .hf_header_menu > a {

  color: #fff !important;

  font-weight: 400 !important;

}



/* Match CDN demo caret (CSS triangle + currentColor), not the PNG/host conflict mix */

#hf_header.hf-device-web .hf-header2 .list > li.dropNav label > a.hasSub::after,

#hf_header.hf-device-web .hf-header2 .list > li.dropNav > a.hasSub::after {

  content: "";

  display: inline-block !important;

  width: 0 !important;

  height: 0 !important;

  margin: 0 0 0 6px !important;

  padding: 0 !important;

  border-style: solid !important;

  border-width: 5px 4px 0 4px !important;

  border-color: currentColor transparent transparent transparent !important;

  background: none !important;

  background-image: none !important;

  vertical-align: middle;

  box-shadow: none !important;

}



/* Minimal notice toast used by login iframe → parent.domEvent.notice */

.kou-notice {

  position: fixed;

  top: 72px;

  left: 50%;

  z-index: 100000;

  transform: translateX(-50%);

  pointer-events: none;

}

.kou-notice a {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 10px 16px;

  color: #fff;

  background: rgba(32, 36, 44, 0.92);

  border-radius: 6px;

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);

  font-size: 13px;

  line-height: 1.4;

  text-decoration: none;

}

.kou-notice a i {

  display: inline-block;

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: #8ab4f8;

}

.kou-notice a i.success { background: #34a853; }

.kou-notice a i.info { background: #4285f4; }

.kou-notice a i.warning { background: #fbbc04; }

.kou-notice a i.error { background: #ea4335; }