/* Complete Header A navigation. Load after selected.css.
 * Header controls, shared language links and practical utility tips.
 */
html.test-my-display .utility-emoji { margin-right:4px; }
html.test-my-display .utility-bar .languages { position:relative; max-width:none; }
html.test-my-display .utility-bar .language-options { display:flex; align-items:center; gap:12px; }
html.test-my-display .utility-bar .language-toggle[hidden],
html.test-my-display .utility-bar .language-options[hidden] { display:none !important; }
html.test-my-display .utility-bar .language-toggle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:auto;
  min-height:36px;
  margin:0;
  padding:5px 7px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:#5d6672;
  font:700 12px/1.5 Manrope,sans-serif;
  letter-spacing:0;
  white-space:nowrap;
  cursor:pointer;
}
html.test-my-display .utility-bar .language-chevron { width:14px; height:14px; flex:none; }
html.test-my-display .utility-bar .language-toggle[aria-expanded='true'] .language-chevron { transform:rotate(180deg); }
html.test-my-display .utility-bar .language-toggle:focus-visible { outline:2px solid var(--display-accent); outline-offset:2px; }
html.test-my-display .header-shell .site-header { position:relative; }
html.test-my-display .header-shell .desktop-nav { gap:28px; }
html.test-my-display .header-shell .desktop-nav>.nav-disclosure { position:static; }
html.test-my-display .header-shell .nav-disclosure>summary {
  list-style:none;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  line-height:1.5;
}
html.test-my-display .header-shell .nav-disclosure>summary::marker,
html.test-my-display .header-shell .mobile-menu>summary::marker { content:''; }
html.test-my-display .header-shell .nav-disclosure>summary>span:first-child { position:relative; }
html.test-my-display .header-shell .nav-section-label { display:inline-flex; align-items:center; gap:7px; }
html.test-my-display .header-shell .nav-section-icon { display:inline-flex; flex:none; }
html.test-my-display .header-shell .nav-section-icon svg { width:18px; height:18px; }
html.test-my-display .header-shell .nav-disclosure.is-current-section>summary>span:first-child::after {
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:-7px;
  height:2px;
  background:var(--display-accent);
}
html.test-my-display .header-shell .nav-disclosure:is([open],.is-current-section)>summary { color:var(--display-accent); }
html.test-my-display .header-shell .nav-disclosure>summary:hover { color:var(--display-accent); }
html.test-my-display .header-shell .nav-chevron { width:16px; height:16px; flex:none; }

/* Explicit closed states prevent author display rules from exposing a panel
 * before JavaScript loads. Native details remains usable without JavaScript. */
html.test-my-display .header-shell .nav-disclosure:not([open])>.nav-panel,
html.test-my-display .header-shell .mobile-menu:not([open])>.mobile-nav { display:none; }
html.test-my-display .header-shell .nav-panel {
  top:100%;
  left:auto;
  right:40px;
  transform:none;
  width:min(740px,calc(100vw - 48px));
  padding:0;
  max-height:var(--fl-nav-available-height,calc(100dvh - 180px));
  overflow-y:auto;
  overscroll-behavior:contain;
  background:#fff;
  border:1px solid var(--display-line);
  border-top:3px solid var(--display-accent);
  border-radius:0 0 10px 10px;
  box-shadow:0 16px 35px #252a3114;
  scrollbar-gutter:stable;
}
html.test-my-display .header-shell .nav-panel-intro {
  padding:17px 24px;
  background:#f7faf8;
  border-bottom:1px solid var(--display-line);
}
html.test-my-display .header-shell .nav-panel-intro p {
  margin:0;
  color:var(--display-ink);
  font-size:13px;
  font-weight:650;
  line-height:1.6;
}
html.test-my-display .header-shell .nav-tool-groups {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;
  gap:18px;
  padding:14px 16px 18px;
}
html.test-my-display .header-shell .nav-group { min-width:0; }
html.test-my-display .header-shell .nav-group+.nav-group {
  border-left:1px solid var(--display-line);
  padding-left:16px;
}
html.test-my-display .header-shell .nav-group-label {
  margin:9px 10px 12px;
  color:#58665d;
  font-size:11px;
  font-weight:750;
  line-height:1.6;
  letter-spacing:.035em;
}
html.test-my-display .header-shell .nav-tool {
  display:grid;
  grid-template-columns:32px minmax(0,1fr) 14px;
  align-items:start;
  gap:10px;
  min-height:78px;
  margin:0;
  padding:11px 9px;
  border:0;
  border-radius:5px;
  box-shadow:none;
  color:var(--display-ink);
  text-decoration:none;
  white-space:normal;
}
html.test-my-display .header-shell .nav-tool:hover { background:#f4f8f5; }
html.test-my-display .header-shell .nav-tool[aria-current='page'] { background:var(--display-soft); box-shadow:inset 2px 0 var(--display-accent); }
html.test-my-display .header-shell .nav-tool-icon {
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  margin-top:1px;
  background:transparent;
  color:var(--display-accent);
  border-radius:0;
}
html.test-my-display .header-shell .nav-tool-icon svg { width:23px; height:23px; }
html.test-my-display .header-shell .nav-tool-copy { min-width:0; }
html.test-my-display .header-shell .nav-tool strong {
  display:block;
  margin:0 0 4px;
  color:inherit;
  font-size:13px;
  font-weight:750;
  line-height:1.45;
  overflow-wrap:break-word;
}
html.test-my-display .header-shell .nav-tool small {
  display:block;
  color:var(--display-muted);
  font-size:12px;
  font-weight:500;
  line-height:1.6;
  overflow-wrap:anywhere;
}
html.test-my-display .header-shell .nav-tool-arrow { display:flex; align-items:center; margin-top:3px; color:#6f7f74; }
html.test-my-display .header-shell .nav-tool-arrow svg { width:14px; height:14px; }
html.test-my-display .header-shell .about-panel { width:min(405px,calc(100vw - 48px)); }
html.test-my-display .header-shell .about-panel .nav-tool-groups { grid-template-columns:minmax(0,1fr); }
html.test-my-display .header-shell .mobile-cta svg { width:17px; height:17px; }
html.test-my-display .header-shell .screen-reader-text {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

@media(max-width:1040px) {
  html.test-my-display .header-shell .desktop-nav { gap:22px; }
}
@media(max-width:1000px) {
  html.test-my-display .header-shell .nav-panel { right:24px; }
}
@media(max-width:900px) {
  html.test-my-display .utility-bar .languages.is-enhanced .language-options {
    position:absolute;
    z-index:70;
    top:calc(100% + 5px);
    right:0;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    width:max-content;
    min-width:174px;
    max-width:calc(100vw - 36px);
    padding:5px;
    border:1px solid var(--display-line);
    border-top:2px solid var(--display-accent);
    border-radius:0 0 7px 7px;
    background:#fff;
    box-shadow:0 10px 24px #252a3114;
  }
  html.test-my-display .utility-bar .languages.is-enhanced .language-options a {
    display:flex;
    align-items:center;
    gap:8px;
    min-height:40px;
    padding:8px 10px;
    white-space:nowrap;
  }
  html.test-my-display .utility-bar .languages.is-enhanced .language-options a:hover { background:#f4f8f5; }
  html.test-my-display .utility-bar .languages.is-enhanced .language-options .small { padding:8px 10px; }
  html.test-my-display .header-shell .site-header { position:static; }
  html.test-my-display .header-shell .mobile-nav {
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:stretch;
    justify-content:flex-start;
    gap:0;
    padding:8px 24px max(24px,env(safe-area-inset-bottom));
    max-height:var(--fl-nav-available-height,calc(100dvh - 188px));
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
  }
  html.test-my-display .header-shell .mobile-nav>.nav-disclosure { flex:none; min-width:0; }
  html.test-my-display .header-shell .mobile-nav>.nav-disclosure>summary {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-height:56px;
    padding:14px 0;
    border-bottom:1px solid var(--display-line);
    font-size:14px;
  }
  html.test-my-display .header-shell .mobile-nav .nav-panel {
    position:static;
    width:auto;
    max-height:none;
    margin:0;
    padding:0 0 10px;
    overflow:visible;
    border:0;
    border-bottom:1px solid var(--display-line);
    border-radius:0;
    box-shadow:none;
    scrollbar-gutter:auto;
  }
  html.test-my-display .header-shell .mobile-nav .nav-panel-intro { display:none; }
  html.test-my-display .header-shell .mobile-nav .nav-tool-groups { padding:10px 0 0; gap:18px; }
  html.test-my-display .header-shell .mobile-nav .nav-tool { min-height:78px; }
  html.test-my-display .header-shell .mobile-nav .mobile-cta { flex:none; margin-top:18px; }
}
@media(max-width:720px) {
  html.test-my-display .utility-bar .language-toggle { min-height:32px; font-size:11px; }
  html.test-my-display .utility-bar .languages.is-enhanced .language-options { right:50%; transform:translateX(50%); }
}
@media(max-width:600px) {
  html.test-my-display .header-shell .mobile-nav { padding-left:18px; padding-right:18px; }
  html.test-my-display .header-shell .mobile-nav .nav-tool-groups { grid-template-columns:minmax(0,1fr); gap:9px; }
  html.test-my-display .header-shell .mobile-nav .nav-group+.nav-group { border-left:0; border-top:1px solid var(--display-line); padding:9px 0 0; }
  html.test-my-display .header-shell .mobile-nav .nav-group-label { margin-top:12px; }
  html.test-my-display .header-shell .mobile-nav .nav-tool { min-height:76px; }
}
@media(max-width:370px) {
  html.test-my-display .header-shell .mobile-nav { padding-left:12px; padding-right:12px; }
  html.test-my-display .header-shell .mobile-nav .nav-tool { grid-template-columns:30px minmax(0,1fr) 12px; gap:8px; padding:11px 5px; }
  html.test-my-display .header-shell .mobile-nav .nav-tool strong { font-size:13px; }
  html.test-my-display .header-shell .mobile-nav .nav-tool small { font-size:12px; }
}
@media(prefers-reduced-motion:reduce) {
  html.test-my-display .header-shell .nav-chevron { transition:none; }
}
