/* CN Login disclosure (shared KCC/CN spec). Header dropdown + mobile accordion.
   Menu row reuses .cn-menu-toggle / .cn-menu-dest styling (same rules as Offices,
   Services, Contact). Desktop popover uses the site card radius and shadow.
   No-JS: below 1100px the header uses a compact details/summary "Login" (CN's
   Menu button cannot open #menu without JS), so the header fits from 320 up. */

/* --- Shared no-JS list chrome --- */
.login-menu:not(.is-enhanced) .login-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.login-menu:not(.is-enhanced) .login-list a{display:inline-flex;align-items:center;min-height:44px;color:var(--deep);font-weight:500;text-decoration:none;white-space:nowrap;padding:0 2px}
.login-menu:not(.is-enhanced) .login-list a:hover{text-decoration:underline;text-underline-offset:4px}
.login-menu:not(.is-enhanced) .login-list a:focus-visible{outline:2px solid var(--deep);outline-offset:3px}
.site-header .header-actions .login-menu{position:relative}

/* No-JS header, 1101px+: two plain links in a row; hide the details control. */
@media(min-width:1101px){
  .site-header .login-menu:not(.is-enhanced) details.login-nojs{display:none}
  .site-header .login-menu:not(.is-enhanced)>.login-list{
    display:flex;flex-direction:row;gap:16px;align-items:center
  }
}

/* No-JS header, 1100px and below: hide the two inline links; "Login" details/summary
   stays in the header so both portals stay reachable when #menu cannot open.
   The list is a sibling of details (not inside it) so closed <details> does not
   conceal the desktop row. */
@media(max-width:1100px){
  .site-header .login-menu:not(.is-enhanced) details.login-nojs{position:relative;display:block}
  .site-header .login-menu:not(.is-enhanced) details.login-nojs>summary.login-nojs-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    min-height:44px;min-width:44px;padding:0 8px;margin:0;
    color:var(--deep);font-size:15px;font-weight:500;line-height:1;
    cursor:pointer;list-style:none;background:none;border:0;border-radius:8px
  }
  .site-header .login-menu:not(.is-enhanced) details.login-nojs>summary.login-nojs-toggle::-webkit-details-marker{display:none}
  .site-header .login-menu:not(.is-enhanced) details.login-nojs>summary.login-nojs-toggle:focus-visible{outline:2px solid var(--deep);outline-offset:3px}
  .site-header .login-menu:not(.is-enhanced)>.login-list{display:none}
  .site-header .login-menu:not(.is-enhanced) details.login-nojs[open]+.login-list{
    position:absolute;top:calc(100% + 4px);right:0;left:auto;z-index:80;
    display:flex;flex-direction:column;
    min-width:160px;max-width:min(180px,calc(100vw - 32px));
    margin:0;padding:8px;
    background:var(--paper,#fff);
    border:1px solid var(--line);
    border-radius:var(--radius-card);
    box-shadow:var(--shadow)
  }
  .site-header .login-menu:not(.is-enhanced) details.login-nojs[open]+.login-list a{
    display:flex;min-height:40px;padding:0 14px;box-sizing:border-box
  }
}

/* --- Header Login button (T6 header type), JS-enhanced --- */
.site-header .login-toggle{
  display:inline-flex;align-items:center;gap:6px;
  min-height:44px;min-width:44px;margin:0;padding:0 4px;
  color:var(--deep);font:inherit;font-size:15px;font-weight:500;line-height:1;
  background:none;border:0;border-radius:8px;cursor:pointer;white-space:nowrap
}
.site-header .login-toggle .chev{flex:0 0 auto}
.site-header .login-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
.site-header .login-toggle:hover{text-decoration:underline;text-underline-offset:4px}
.site-header .login-toggle:focus-visible,
.site-header .login-menu .login-list a:focus-visible{outline:2px solid var(--deep);outline-offset:3px}

/* Desktop popover: right-aligned to the Login button so it does not overlap
   Request an appointment, site card chrome, 180px min, 8px pad, 40px items. */
.site-header .login-menu.is-enhanced .login-list[hidden]{display:none}
.site-header .header-actions .login-menu.is-enhanced .login-list{
  position:absolute;top:calc(100% + 4px);left:auto;right:0;z-index:80;
  display:block;list-style:none;margin:0;padding:8px;
  min-width:180px;width:max-content;
  background:var(--paper,#fff);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow)
}
.site-header .header-actions .login-menu.is-enhanced .login-list a{
  display:flex;align-items:center;box-sizing:border-box;
  min-height:40px;padding:0 14px;
  color:var(--deep);font-size:15px;font-weight:500;
  text-decoration:none;white-space:nowrap;border-radius:8px
}
.site-header .header-actions .login-menu.is-enhanced .login-list a:hover{
  text-decoration:underline;text-underline-offset:4px;background:var(--accent-soft)
}

/* After JS, hide the header Login below 1100px (CN's existing header-actions breakpoint). */
@media(max-width:1100px){
  .site-header .header-actions .login-menu.is-enhanced{display:none}
}

/* --- Mobile/tablet accordion: match #menu .dialog-nav summary.cn-menu-toggle and a.cn-menu-dest --- */
#menu .dialog-nav .login-menu{
  width:100%;margin:0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}
#menu .dialog-nav .login-toggle{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;min-height:48px;margin:0;padding:10px 4px;
  color:var(--ink);font:inherit;font-weight:600;line-height:inherit;
  background:none;border:0;border-radius:8px;cursor:pointer;text-align:left
}
#menu .dialog-nav .login-toggle .chev{display:none}
#menu .dialog-nav .login-toggle::after{
  content:"";flex-shrink:0;width:8px;height:8px;margin-right:10px;
  border-right:2px solid var(--primary);border-bottom:2px solid var(--primary);
  transform:rotate(45deg)
}
#menu .dialog-nav .login-toggle[aria-expanded="true"]::after{transform:rotate(225deg)}
#menu .dialog-nav .login-toggle:hover{background:var(--accent-soft)}
#menu .dialog-nav .login-toggle:active{background:var(--warm)}
#menu .dialog-nav .login-toggle:focus-visible,
#menu .dialog-nav .login-menu .login-list a:focus-visible{outline:3px solid var(--primary);outline-offset:2px}

#menu .dialog-nav .login-menu.is-enhanced .login-list[hidden]{display:none}
#menu .dialog-nav .login-menu.is-enhanced .login-list,
#menu .dialog-nav .login-menu:not(.is-enhanced) .login-list{
  display:block;position:static;width:100%;
  list-style:none;margin:0;padding:0;
  background:transparent;border:0;border-radius:0;box-shadow:none
}
#menu .dialog-nav .login-menu .login-list a.cn-menu-dest{margin-top:var(--space-2)}
#menu .dialog-nav .login-menu:not(.is-enhanced) .login-list a.cn-menu-dest{
  display:flex;min-height:48px;padding:10px 4px
}