/* Global site header, mega menus and mobile drawer. Builds on home.css tokens. */

.pd-header { position: relative; z-index: 50; }

.pd-nav {
  position: relative; margin-top: 16px; height: 72px; padding: 0 16px 0 24px;
  display: flex; align-items: center;
  background: #fff; border: 1px solid var(--pd-line); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 30, 80, .04), 0 8px 24px rgba(15, 30, 80, .05);
}
.pd-logo { display: flex; align-items: center; flex: none; }
.pd-logo img { height: 46px; width: auto; display: block; }

.pd-header :focus-visible { outline: 2px solid var(--pd-blue); outline-offset: 2px; border-radius: 6px; }

/* Top-level links */
.pd-nav-links { margin-left: 52px; align-self: stretch; }
.pd-nav-list { list-style: none; margin: 0; padding: 0; height: 100%; display: flex; gap: 30px; }
.pd-nav-item { position: relative; display: flex; }
.pd-nav-link {
  position: relative; display: flex; align-items: center; gap: 6px; padding: 0 2px;
  background: none; border: 0; cursor: pointer;
  font: 500 15px var(--pd-font); color: var(--pd-ink); white-space: nowrap;
  transition: color .15s ease;
}
.pd-nav-link:hover,
.pd-nav-link.is-current,
.pd-nav-link[aria-expanded="true"] { color: var(--pd-blue); }
.pd-nav-link::after {
  content: ""; position: absolute; left: -4px; right: -4px; bottom: -1px; height: 2px;
  border-radius: 2px; background: var(--pd-blue); opacity: 0; transition: opacity .15s ease;
}
.pd-nav-link.is-current::after,
.pd-nav-link[aria-expanded="true"]::after { opacity: 1; }
.pd-nav-list:has([aria-expanded="true"]) .pd-nav-link.is-current:not([aria-expanded="true"])::after { opacity: 0; }
.pd-nav-list:has([aria-expanded="true"]) .pd-nav-link.is-current:not([aria-expanded="true"]) { color: var(--pd-ink); }

/* Right-hand actions */
.pd-nav-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.pd-btn-outline {
  height: 44px; padding: 0 22px; background: #fff; border: 1px solid #D5DCE8;
  color: var(--pd-ink) !important;
}
.pd-btn-outline:hover { border-color: #B6C0D6; background: #FAFBFE; }
.pd-btn-solid {
  height: 44px; padding: 0 20px; color: #fff !important; background: var(--pd-blue);
  box-shadow: 0 1px 2px rgba(59, 69, 255, .22), 0 6px 14px rgba(59, 69, 255, .18);
}
.pd-btn-solid:hover { background: #2F39F2; box-shadow: 0 2px 4px rgba(59, 69, 255, .28), 0 10px 20px rgba(59, 69, 255, .24); }
.pd-btn-solid:active { transform: translateY(1px); }
.pd .pd-nav-signin { padding: 0 6px; font-size: 15px; font-weight: 600; color: var(--pd-ink); white-space: nowrap; }
.pd .pd-nav-signin:hover { color: var(--pd-blue); }

/* Search */
.pd-nav-search { position: relative; margin-right: 10px; }
.pd-nav-search-btn {
  width: 40px; height: 40px; display: grid; place-items: center;
  background: none; border: 0; border-radius: 8px; color: var(--pd-ink); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.pd-nav-search-btn:hover,
.pd-nav-search-btn[aria-expanded="true"] { background: var(--pd-blue-pale); color: var(--pd-blue); }
.pd-nav-search-pop {
  position: absolute; right: -8px; top: calc(100% + 24px); width: 340px; padding: 12px;
  background: #fff; border: 1px solid var(--pd-line); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 30, 80, .10), 0 2px 6px rgba(15, 30, 80, .05);
  animation: pd-nav-in .14s ease-out;
}
.pd-nav-search-field {
  display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 12px;
  border: 1px solid #D9E0EC; border-radius: 8px; color: var(--pd-ink-3);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pd-nav-search-field:focus-within { border-color: var(--pd-blue); box-shadow: 0 0 0 4px rgba(59, 69, 255, .12); }
.pd-nav-search-field input,
.pd-drawer-search input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font: 400 14px var(--pd-font); color: var(--pd-ink);
}
.pd-nav-search-field input::placeholder,
.pd-drawer-search input::placeholder { color: #8390A6; }
.pd-nav-search-hint { margin: 8px 2px 0; font-size: 12px; color: var(--pd-ink-3); }

/* Model search suggestions */
.pd-suggest {
  list-style: none; margin: 8px 0 0; padding: 4px; max-height: 340px; overflow-y: auto;
  background: #fff; border: 1px solid var(--pd-line); border-radius: 8px;
}
.pd-suggest + .pd-nav-search-hint { display: none; }
.pd-suggest[hidden] + .pd-nav-search-hint { display: block; }
.pd-suggest-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 8px 10px; border-radius: 6px; color: var(--pd-ink); text-decoration: none; font-size: 14px;
}
.pd .pd-suggest-item { color: var(--pd-ink); }
.pd .pd-suggest-all { color: var(--pd-blue); }
.pd-suggest-item[aria-selected="true"] { background: var(--pd-blue-pale); }
.pd-suggest-repo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-suggest-repo strong { font-weight: 600; }
.pd-suggest-org { color: var(--pd-ink-3); }
.pd-suggest-meta { flex: none; font-size: 12px; color: var(--pd-ink-3); }
.pd-suggest-empty { padding: 8px 10px; font-size: 13px; color: var(--pd-ink-3); }
.pd-suggest-all { margin-top: 2px; border-top: 1px solid var(--pd-line); border-radius: 0 0 6px 6px; color: var(--pd-blue); font-weight: 500; }

/* Mega menus */
.pd-mega {
  position: absolute; z-index: 40; top: calc(100% + 15px); left: -18px; width: 320px;
  padding: 14px 10px 10px;
  background: #fff; border: 1px solid var(--pd-line); border-radius: 14px;
  box-shadow: 0 14px 36px rgba(15, 30, 80, .10), 0 2px 6px rgba(15, 30, 80, .04);
  animation: pd-nav-in .14s ease-out;
}
.pd-mega::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
@keyframes pd-nav-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.pd-mega-label {
  margin: 0 8px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #4A5578;
}
.pd-mega-overview {
  display: flex; align-items: center; gap: 4px; padding: 4px 0 10px 0; margin-bottom: 4px;
  border-bottom: 1px solid var(--pd-line-2); color: var(--pd-blue);
}
.pd-mega-overview:hover, .pd-mega-overview[aria-current] { color: var(--pd-blue-2); text-decoration: underline; }
.pd-mega-group {
  margin: 8px 8px 2px; font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--pd-ink-3);
}
.pd-mega-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pd-mega-item {
  display: flex; align-items: flex-start; gap: 12px; padding: 9px 8px;
  border-radius: 10px; transition: background .15s ease;
}
a.pd-mega-item:hover { background: #F4F6FD; }
.pd-mega-item.is-disabled { cursor: default; }
.pd-mega-text { flex: 1; min-width: 0; }
.pd-mega-title { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--pd-ink); white-space: nowrap; }
a.pd-mega-item:hover .pd-mega-title { color: var(--pd-blue); }
.pd-mega-desc { display: block; margin-top: 2px; font-size: 12px; line-height: 1.42; color: var(--pd-ink-2); }
.pd-mega-chevron { margin: 2px 0 0 4px; color: var(--pd-ink-3); transition: transform .15s ease, color .15s ease; }
a.pd-mega-item:hover .pd-mega-chevron { color: var(--pd-blue); transform: translateX(2px); }

.pd-mega-icon { flex: none; display: grid; place-items: center; }
.pd-mega-icon-plain { width: 24px; height: 24px; margin-top: 1px; color: var(--pd-blue); }
.pd-mega-icon-tile { width: 34px; height: 34px; border-radius: 9px; background: var(--pd-blue-pale); color: var(--pd-blue); }
.pd-mega-icon-logo { width: 28px; height: 28px; color: var(--pd-blue); }
.pd-mega-mark-github { color: #111827; }
.pd-mega-emoji { font-size: 22px; line-height: 1; }
.pd-mega-tone-blue { background: #EEF1FF; color: var(--pd-blue); }
.pd-mega-tone-green { background: #E8F8F0; color: var(--pd-success); }
.pd-mega-tone-orange { background: #FFF3E3; color: #F08A24; }
.pd-mega-tone-purple { background: #F1EDFF; color: var(--pd-purple); }
.pd-mega-solutions .pd-mega-item { padding: 11px 8px; }

.pd-mega-foot {
  margin-top: 8px; display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px;
  background: #F5F7FE; border: 1px solid #E7ECFA; border-radius: 10px; color: var(--pd-blue);
  transition: border-color .15s ease;
}
.pd-mega-foot:hover { border-color: #C9D2FF; }
.pd-mega-foot .icon { margin-top: 1px; }
.pd-mega-foot strong { display: flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 600; }
.pd-mega-foot small { display: block; margin-top: 1px; font-size: 12px; color: var(--pd-ink-2); }

/* Availability badges */
.pd-nav-badge {
  display: inline-flex; align-items: center; margin-left: 8px; padding: 2px 8px;
  border-radius: 999px; font-size: 10.5px; font-weight: 600; line-height: 1.5;
  vertical-align: 1px; white-space: nowrap;
}
.pd-nav-badge-available { background: #E6F8EF; color: var(--pd-success-ink); }
.pd-nav-badge-soon { background: #EEF1F6; color: #5B6880; }

/* Mobile */
.pd-burger {
  display: none; margin-left: auto; width: 40px; height: 40px; place-items: center;
  background: none; border: 0; border-radius: 8px; color: var(--pd-ink); cursor: pointer;
}
.pd-burger:hover { background: var(--pd-blue-pale); color: var(--pd-blue); }

.pd-drawer-backdrop { position: fixed; inset: 0; z-index: 55; background: rgba(10, 22, 51, .18); }
.pd-drawer {
  position: fixed; z-index: 60; top: 12px; right: 12px;
  width: min(360px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow-y: auto;
  padding: 18px 20px 20px;
  background: #fff; border: 1px solid var(--pd-line); border-radius: 16px;
  box-shadow: 0 20px 48px rgba(15, 30, 80, .16), 0 2px 8px rgba(15, 30, 80, .06);
  animation: pd-nav-in .16s ease-out;
}
.pd-drawer-head { display: flex; align-items: center; justify-content: space-between; }
.pd-drawer-head .pd-logo img { height: 38px; }
.pd-drawer-close {
  width: 36px; height: 36px; display: grid; place-items: center;
  background: none; border: 0; border-radius: 8px; color: var(--pd-ink); cursor: pointer;
}
.pd-drawer-close:hover { background: var(--pd-blue-pale); }

.pd-drawer-list { list-style: none; margin: 16px 0 0; padding: 0 0 14px; border-bottom: 1px solid var(--pd-line); }
.pd-drawer-link {
  width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 11px 0;
  background: none; border: 0; cursor: pointer; text-align: left;
  font: 500 15px var(--pd-font); color: var(--pd-ink);
}
.pd-drawer-link:hover, .pd-drawer-link.is-current, .pd-drawer-link[aria-expanded="true"] { color: var(--pd-blue); }
.pd-drawer-caret { color: var(--pd-ink); transition: transform .15s ease; }
.pd-drawer-link[aria-expanded="true"] .pd-drawer-caret { transform: rotate(90deg); color: var(--pd-blue); }
.pd-drawer-sub { list-style: none; margin: 0 0 6px; padding: 0 0 0 12px; border-left: 2px solid var(--pd-line-2); }
.pd-drawer-sub a, .pd-drawer-sub span[aria-disabled] {
  display: flex; align-items: center; padding: 7px 0; font-size: 14px; color: var(--pd-ink-2);
}
.pd-drawer-sub a:hover, .pd-drawer-sub a[aria-current] { color: var(--pd-blue); }
.pd-drawer-sub .pd-drawer-foot { gap: 4px; color: var(--pd-blue); font-weight: 600; }
.pd-drawer-sub .pd-drawer-overview { color: var(--pd-ink); font-weight: 600; }

.pd-drawer-actions { display: grid; gap: 12px; padding-top: 18px; }
.pd-drawer-search {
  display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px;
  background: #F5F7FB; border: 1px solid var(--pd-line); border-radius: 8px; color: var(--pd-ink-3);
}
.pd-drawer-search:focus-within { border-color: var(--pd-blue); background: #fff; }
.pd-drawer-actions .pd-btn { width: 100%; height: 46px; }

@media (max-width: 1280px) {
  .pd-nav-links { margin-left: 32px; }
  .pd-nav-list { gap: 22px; }
  .pd-nav-search { margin-right: 2px; }
}

@media (max-width: 1140px) {
  .pd-nav-links, .pd-nav-actions { display: none; }
  .pd-burger { display: grid; }
}

@media (min-width: 1141px) {
  .pd-drawer, .pd-drawer-backdrop { display: none !important; }
}

@media (max-width: 760px) {
  .pd-nav { height: 64px; padding: 0 10px 0 16px; }
  .pd-logo img { height: 40px; }
}