/* Workflows dropdown. One file for the Cloud Gold header and the older night header.
   The list itself is written by tools/build-workflows.py. */

.navdrop{position:relative}
.navdrop-btn{
  display:inline-flex;align-items:center;gap:6px;list-style:none;cursor:pointer;
  font:inherit;font-weight:600;color:inherit;background:transparent;border:0;border-radius:999px
}
.navdrop-btn::-webkit-details-marker{display:none}
.navdrop-chev{display:block;transition:transform .18s ease}
.navdrop[open]>.navdrop-btn .navdrop-chev{transform:rotate(180deg)}
.navdrop-panel{
  position:absolute;top:calc(100% + 8px);left:0;z-index:60;min-width:248px;
  padding:8px;background:var(--mock,#FFFDF7);
  border:1px solid rgba(44,38,32,.12);border-radius:18px;
  box-shadow:0 24px 50px -24px rgba(44,38,32,.45)
}
/* The pinned header sits above the page until you scroll. Its menu must not hang
   down over the real header while that bar is still tucked away. */
.stickyhead:not(.on){pointer-events:none}
.stickyhead:not(.on) .navdrop-panel{display:none}
.navdrop-panel::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.navdrop-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;max-height:min(70vh,480px);overflow:auto}
.navdrop-list a{
  display:block;padding:10px 14px;border-radius:12px;text-decoration:none;font-weight:600;
  font-size:15px;line-height:1.3;color:var(--ink,#2C2620);white-space:nowrap
}
.navdrop-list a:hover,.navdrop-list a:focus-visible{background:rgba(44,38,32,.06);color:var(--ink,#2C2620)}
.navdrop-list a[aria-current="page"]{background:rgba(44,38,32,.06)}
.navdrop-hub{margin-top:4px;border-top:1px solid rgba(44,38,32,.1);border-radius:0 0 12px 12px}
.navdrop-btn:focus-visible,.navdrop-list a:focus-visible{outline:3px solid #A05E34;outline-offset:3px}

.mnav .navdrop,.fnav .navdrop{display:flex;align-items:center}
.mnav .navdrop-btn{padding:9px 16px;font-size:15px}
.fnav .navdrop-btn{padding:9px 14px;font-size:15px;color:var(--ink,#2C2620)}
.mnav .navdrop-btn:hover,.fnav .navdrop-btn:hover,
.mnav .navdrop[open]>.navdrop-btn,.fnav .navdrop[open]>.navdrop-btn{
  background:rgba(44,38,32,.06);color:var(--ink,#2C2620)
}
.mnav .navdrop-list a,.fnav .navdrop-list a{padding:10px 14px;border-radius:12px;font-size:15px}

@media (max-width:899px){
  .masthead.open .mnav{max-height:calc(100vh - 76px);overflow:auto}
  .mnav .navdrop{display:block;width:100%}
  .mnav .navdrop-btn{width:100%;justify-content:space-between;padding:13px 16px;font-size:16px;border-radius:12px}
  .mnav .navdrop-panel{
    position:static;min-width:0;max-height:none;overflow:visible;padding:0 0 6px 8px;
    border:0;border-radius:0;box-shadow:none;background:transparent
  }
  .mnav .navdrop-panel::before{display:none}
  .mnav .navdrop-list{max-height:none;overflow:visible}
  .mnav .navdrop-list a{white-space:normal;padding:11px 12px;font-size:15.5px}
  .mnav .navdrop-hub{border-radius:12px}
}

/* older pages: the night header */
.ch-nav{position:relative;z-index:40}
.ch-nav .navdrop-btn{padding:12px 0;font-size:13px;font-weight:700;color:var(--text-secondary);border-radius:0}
.ch-nav .navdrop-btn:hover,.ch-nav .navdrop[open]>.navdrop-btn{color:var(--interactive-hover);background:transparent}
.ch-nav .navdrop-panel{background:var(--surface-raised);border-color:var(--border-hairline);color:var(--text-primary)}
.ch-nav .navdrop-list a{color:var(--text-primary);font-size:14px;font-weight:700}
.ch-nav .navdrop-list a:hover,.ch-nav .navdrop-list a:focus-visible{color:var(--interactive-hover);background:transparent}
.ch-nav .navdrop-hub{border-top-color:var(--border-hairline)}
.ch-nav .navdrop-btn:focus-visible,.ch-nav .navdrop-list a:focus-visible{outline-color:var(--accent)}

@media (max-width:780px){
  .ch-navlinks .navdrop{width:100%;border-bottom:1px solid var(--border-hairline)}
  .ch-navlinks .navdrop-btn{width:100%;justify-content:space-between;padding:13px 2px}
  .ch-navlinks .navdrop-panel{
    position:static;min-width:0;max-height:none;overflow:visible;padding:0 0 8px 10px;
    border:0;border-radius:0;box-shadow:none;background:transparent
  }
  .ch-navlinks .navdrop-panel::before{display:none}
  .ch-navlinks .navdrop-list{max-height:none;overflow:visible}
  .ch-navlinks .navdrop-list a{padding:10px 2px;border-bottom:0;white-space:normal}
}

@media (prefers-reduced-motion:reduce){
  .navdrop-chev{transition:none}
}
