/* ============================================================
   PM Hub — header K: two tone block, full width, mobile menu
   ============================================================ */

/* ---------- keep it pinned on every device ----------
   The theme sets body { overflow-x: hidden }, which makes body a scroll
   container on mobile and can stop a fixed child positioning against the
   viewport. overflow-x: clip contains the same overflow without that.
   ============================================================ */

html, body { overflow-x: clip !important; }

.nav {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  width: 100%;
  z-index: 9000;
  background: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-bottom: 1px solid transparent !important;
}
.nav.scr {
  border-bottom-color: #ececf2 !important;
  box-shadow: 0 4px 16px -10px rgba(11,16,32,.22) !important;
}

body.admin-bar .nav { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .nav { top: 46px; } }
@media screen and (max-width: 600px)  { body.admin-bar .nav { top: 0; } }

/* ---------- the bar ----------
   Full width with no left padding, because the brand block supplies its
   own and has to reach the viewport edge. The 1200px cap is what left the
   logo stranded mid-screen, so it goes.
   ============================================================ */

.nav .bar {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 26px 0 0 !important;
  height: 64px;
  gap: 0;
  position: relative;
}

/* ---------- brand block ---------- */

.brand {
  align-self: stretch;
  display: flex !important;
  align-items: center;
  gap: 10px;
  flex: none;
  padding: 0 22px 0 26px;
  margin: 0 22px 0 0;
  background: linear-gradient(120deg, #7c3aed, #2563eb);
  color: #fff !important;
  font-size: 13.5px;
  text-decoration: none;
}
.brand .mk {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(255,255,255,.2) !important;
  box-shadow: none !important;
}
.brand .mk svg { width: 15px; height: 15px; color: #fff; }

/* ---------- links ---------- */

.nav .links { gap: 4px; }
.nav .links a { font-size: 12.5px; }

/* ---------- Submit a tool ---------- */

.pmhub-submit {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  font-family: "Plus Jakarta Sans", -apple-system, system-ui, sans-serif;
  font-weight: 700;
  font-size: .82rem;
  color: #7c3aed;
  background: #fff;
  border: 1px solid rgba(124,58,237,.35);
  border-radius: 999px;
  padding: 8px 15px;
  white-space: nowrap;
  text-decoration: none;
  margin-right: 10px;
  transition: transform .18s cubic-bezier(.22,.75,.2,1), background .2s, border-color .2s, box-shadow .2s;
}
.pmhub-submit svg { width: 14px; height: 14px; flex: none; }
.pmhub-submit:hover {
  background: linear-gradient(120deg, #7c3aed, #2563eb);
  border-color: transparent;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -8px rgba(124,58,237,.75);
}
.pmhub-submit:focus-visible { outline: 2px solid #7c3aed; outline-offset: 3px; }

/* ---------- menu button, hidden until the links hide ---------- */

.pmhub-menu {
  display: none;
  flex: none;
  width: 40px; height: 40px;
  border: 1px solid #ececf2;
  border-radius: 11px;
  background: #fff;
  cursor: pointer;
  padding: 0;
  margin-left: 8px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
}
.pmhub-menu span {
  display: block;
  width: 16px; height: 2px;
  border-radius: 2px;
  background: #0b1020;
  transition: transform .22s cubic-bezier(.22,.75,.2,1), opacity .18s;
}
.pmhub-menu:focus-visible { outline: 2px solid #7c3aed; outline-offset: 3px; }

.nav.pmhub-open .pmhub-menu span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav.pmhub-open .pmhub-menu span:nth-child(2) { opacity: 0; }
.nav.pmhub-open .pmhub-menu span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- 901 to 1040: shorten the wordmark, drop the label ---------- */

@media (max-width: 1040px) {
  .brand { font-size: 0; padding: 0 16px 0 20px; margin-right: 16px; }
  .brand::after {
    content: "PM Hub";
    font-size: 12.5px;
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
  }
  .brand .mk { width: 26px; height: 26px; }
  .pmhub-submit span { display: none; }
  .pmhub-submit { padding: 8px 11px; }
}

/* ---------- below 901: links collapse into the menu ---------- */

@media (max-width: 900px) {
  .nav .bar { padding-right: 16px !important; }
  .pmhub-menu { display: flex; }

  /* Search sits before the menu button in reading order. */
  .navsearch { order: 2; flex: 1 1 auto; min-width: 0; margin-left: auto; }
  .pmhub-submit { order: 3; }
  .pmhub-menu { order: 4; }
  .nav .sp { display: none; }

  .navsearch input,
  .navsearch input:focus {
    width: 100% !important;
    min-width: 0;
    font-size: 16px; /* under 16px iOS zooms the page on focus */
  }

  /* Open state: the bar wraps and the links become a stacked panel.
     Wrapping rather than absolute positioning means the panel cannot
     overlap content or get clipped. */
  .nav.pmhub-open .bar {
    flex-wrap: wrap;
    height: auto;
    padding-bottom: 14px !important;
  }
  .nav.pmhub-open .links {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    order: 10;
    gap: 2px;
    margin-top: 12px;
    padding-left: 16px;
    border-top: 1px solid #f1f1f6;
    padding-top: 12px;
  }
  .nav.pmhub-open .links li { width: 100%; }
  .nav.pmhub-open .links a {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
  }
  .nav.pmhub-open .links a:hover { background: #f5f1fe; color: #6d28d9; }
}

/* ---------- 640 and below ---------- */

@media (max-width: 640px) {
  .nav .bar { height: 56px; padding-right: 12px !important; }

  /* Mark only. The wordmark is collapsed, not removed, so screen readers
     still announce the site name. */
  .brand { padding: 0 14px; margin-right: 12px; }
  .brand::after { content: none; }

  /* Submit moves into the open panel rather than crowding the bar. */
  .pmhub-submit { display: none; }
  .nav.pmhub-open .pmhub-submit {
    display: inline-flex !important;
    order: 11;
    width: calc(100% - 32px);
    justify-content: center;
    margin: 10px 16px 0;
    padding: 12px 16px;
    font-size: .9rem;
  }
  .nav.pmhub-open .pmhub-submit span { display: inline; }
}

@media (max-width: 380px) {
  .navsearch input { padding: 9px 12px 9px 32px; }
  .navsearch svg { left: 10px; }
  .pmhub-menu { width: 38px; height: 38px; margin-left: 6px; }
}

/* ---------- fixed-header clearance ----------
   Only .hero (150px), .page-hero and .rev-hero (126px) reserved space for
   the fixed bar, so every other template put its H1 underneath it.
   Clearance must stay INSIDE those three, because their backgrounds are
   absolutely positioned children that only cover the wrapper itself.
   So main#content carries it only when none of the three is present.
   ============================================================ */

@supports selector(:has(*)) {
  main#content { padding-top: 88px; }
  main#content:has(> .hero),
  main#content:has(> .page-hero),
  main#content:has(> .rev-hero),
  main#content:has(> section.hero),
  main#content:has(> section.page-hero),
  main#content:has(> section.rev-hero) { padding-top: 0; }
}

@supports not selector(:has(*)) {
  main#content { padding-top: 88px; }
  .hero      { padding-top: 62px; }
  .page-hero { padding-top: 38px; }
  .rev-hero  { padding-top: 38px; }
}

html { scroll-padding-top: 88px; }
body.admin-bar { scroll-padding-top: 120px; }

@media screen and (max-width: 782px) { body.admin-bar { scroll-padding-top: 134px; } }

@media (max-width: 640px) {
  @supports selector(:has(*)) {
    main#content { padding-top: 76px; }
    main#content:has(> .hero),
    main#content:has(> .page-hero),
    main#content:has(> .rev-hero),
    main#content:has(> section.hero),
    main#content:has(> section.page-hero),
    main#content:has(> section.rev-hero) { padding-top: 0; }
  }
  @supports not selector(:has(*)) {
    main#content { padding-top: 76px; }
    .hero      { padding-top: 44px; }
    .page-hero { padding-top: 20px; }
    .rev-hero  { padding-top: 20px; }
  }
  html { scroll-padding-top: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  .pmhub-menu span, .pmhub-submit { transition: none !important; }
}