/**
 * Subsite context bar — same horizontal grid as main header (Studio Hub max-width + insets).
 */

body.yp-has-subsite-context-bar {
  --yp-subsite-context-bar-h: 30px;
}

html.yp-subsite-context-bar-is-collapsed,
body.yp-subsite-context-bar-is-collapsed {
  --yp-subsite-context-bar-h: 0px;
}

.yp-subsite-chrome {
  position: sticky;
  top: 0;
  z-index: 100001;
  background: transparent;
  overflow: visible;
}

html.yp-subsite-context-bar-is-collapsed .yp-subsite-chrome,
body.yp-subsite-context-bar-is-collapsed .yp-subsite-chrome {
  overflow: visible;
}

#yp-subsite-context-bar.yp-subsite-context-bar {
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  max-height: 4rem;
  opacity: 1;
  background: color-mix(in srgb, var(--yp-primary, var(--yooadmin-primary, #eda934)) 14%, #fff 86%);
  border-bottom: 1px solid color-mix(in srgb, var(--yp-primary, var(--yooadmin-primary, #eda934)) 32%, rgba(0, 0, 0, 0.06));
  color: color-mix(in srgb, var(--yp-primary, var(--yooadmin-primary, #eda934)) 72%, #3d2800 28%);
}

html.yp-subsite-context-bar-animate-ready #yp-subsite-context-bar.yp-subsite-context-bar {
  transition:
    max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.24s ease,
    border-color 0.24s ease,
    border-width 0.24s ease,
    background-color 0.24s ease;
}

html.yp-subsite-context-bar-animate-ready #yp-subsite-context-bar .yp-subsite-context-bar__row {
  transition:
    transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.24s ease;
  transform: translateY(0);
  opacity: 1;
}

html.yp-subsite-context-bar-animate-ready.yp-subsite-context-bar-is-animating .yp-subsite-chrome {
  overflow: hidden;
}

html[data-yooadmin-studio-color-mode-effective="dark"] #yp-subsite-context-bar.yp-subsite-context-bar,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] #yp-subsite-context-bar.yp-subsite-context-bar {
  background: color-mix(in srgb, var(--yp-primary, var(--yooadmin-primary, #eda934)) 22%, #1c1f26 78%);
  border-bottom-color: color-mix(in srgb, var(--yp-primary, var(--yooadmin-primary, #eda934)) 40%, #3d424d);
  color: color-mix(in srgb, var(--yp-primary, var(--yooadmin-primary, #eda934)) 58%, #f5f5f5 42%);
}

#yp-subsite-context-bar .yp-subsite-context-bar__row.yp-header {
  min-height: var(--yp-subsite-context-bar-h);
  padding: 2px 0 !important;
  margin-block: 0 !important;
  margin-inline: auto !important;
  max-width: var(--ysh-layout-max, none);
  width: 100%;
  box-sizing: border-box;
  box-shadow: none !important;
  background: transparent !important;
  color: inherit !important;
}

#yp-subsite-context-bar .yp-header-left {
  flex: 1;
  min-width: 0;
  padding-left: 8px !important;
  gap: 15px;
}

body.yooadmin-theme-yooadmin-studio-hub #yp-subsite-context-bar .yp-header-left {
  padding-inline-start: 8px !important;
  gap: 10px;
}

#yp-subsite-context-bar .yp-header-right {
  flex-shrink: 0;
  padding-right: 60px !important;
}

body.yooadmin-theme-yooadmin-studio-hub #yp-subsite-context-bar .yp-header-right {
  padding-inline-end: 16px !important;
  padding-right: 16px !important;
}

#yp-subsite-context-bar button.yp-subsite-context-bar__dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 4px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  line-height: 1;
}

#yp-subsite-context-bar button.yp-subsite-context-bar__dismiss .dashicons {
  font-size: 18px;
  width: 18px;
  height: 18px;
  line-height: 18px;
}

#yp-subsite-context-bar button.yp-subsite-context-bar__dismiss:hover,
#yp-subsite-context-bar button.yp-subsite-context-bar__dismiss:focus-visible {
  background: color-mix(in srgb, var(--yp-primary, var(--yooadmin-primary, #eda934)) 18%, transparent);
  color: var(--yp-primary, var(--yooadmin-primary, #eda934));
  outline: none;
}

#yp-subsite-context-bar a.yp-subsite-context-bar__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0;
  padding: 4px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  text-decoration: none !important;
  line-height: 1;
}

#yp-subsite-context-bar a.yp-subsite-context-bar__back .dashicons {
  font-size: 20px;
  width: 20px;
  height: 20px;
  line-height: 20px;
}

#yp-subsite-context-bar a.yp-subsite-context-bar__back:hover,
#yp-subsite-context-bar a.yp-subsite-context-bar__back:focus-visible {
  background: color-mix(in srgb, var(--yp-primary, var(--yooadmin-primary, #eda934)) 18%, transparent);
  color: var(--yp-primary, var(--yooadmin-primary, #eda934));
  outline: none;
}

#yp-subsite-context-bar .yp-subsite-context-bar__text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0;
  font-size: 12px;
  line-height: 1.25;
}

#yp-subsite-context-bar .yp-subsite-context-bar__site {
  font-weight: 700;
  color: var(--yp-primary, var(--yooadmin-primary, #eda934)) !important;
}

#yp-subsite-context-bar .yp-subsite-context-bar__sep {
  opacity: 0.55;
}

#yp-subsite-context-bar a.yp-subsite-context-bar__url {
  color: inherit !important;
  text-decoration: none;
  font-weight: 500;
  max-width: min(100%, 28rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#yp-subsite-context-bar a.yp-subsite-context-bar__url:hover,
#yp-subsite-context-bar a.yp-subsite-context-bar__url:focus-visible {
  color: var(--yp-primary, var(--yooadmin-primary, #eda934)) !important;
  text-decoration: underline;
}

/* Collapsing: slide content up inside a transparent shell (no leftover bar line). */
html.yp-subsite-context-bar-is-collapsing #yp-subsite-context-bar,
body.yp-subsite-context-bar-is-collapsing #yp-subsite-context-bar {
  opacity: 1;
  pointer-events: none;
  background: transparent;
  border-bottom: 0;
}

/* Collapsed: remove bar shell entirely; only expand tab remains visible. */
html.yp-subsite-context-bar-is-collapsed #yp-subsite-context-bar,
body.yp-subsite-context-bar-is-collapsed #yp-subsite-context-bar {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  background: transparent;
  border-bottom: 0;
}

html.yp-subsite-context-bar-animate-ready.yp-subsite-context-bar-is-collapsed #yp-subsite-context-bar .yp-subsite-context-bar__row,
html.yp-subsite-context-bar-animate-ready.yp-subsite-context-bar-is-collapsing #yp-subsite-context-bar .yp-subsite-context-bar__row {
  transform: translateY(-100%);
  opacity: 0;
  min-height: 0 !important;
  padding: 0 !important;
}

html.yp-subsite-context-bar-animate-ready.yp-subsite-context-bar-is-expanding:not(.yp-subsite-context-bar-expand-play) #yp-subsite-context-bar .yp-subsite-context-bar__row {
  transform: translateY(-100%);
  opacity: 0;
}

.yp-subsite-context-bar__expand-rail {
  display: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}

html.yp-subsite-context-bar-animate-ready .yp-subsite-context-bar__expand-rail {
  display: block;
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 0;
  overflow: visible;
  z-index: 100002;
  pointer-events: none;
}

html.yp-subsite-context-bar-is-collapsed .yp-subsite-context-bar__expand-rail,
body.yp-subsite-context-bar-is-collapsed .yp-subsite-context-bar__expand-rail {
  display: block;
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 0;
  overflow: visible;
  z-index: 100002;
  pointer-events: none;
}

html.yp-subsite-context-bar-animate-ready .yp-subsite-context-bar__expand-rail .yp-subsite-context-bar__expand-row.yp-header {
  min-height: 0;
  height: 0;
  align-items: flex-start;
  padding: 0 !important;
  margin-block: 0 !important;
  margin-inline: auto !important;
  max-width: var(--ysh-layout-max, none);
  width: 100%;
  box-sizing: border-box;
  box-shadow: none !important;
  background: transparent !important;
  pointer-events: none;
}

html.yp-subsite-context-bar-animate-ready .yp-subsite-context-bar__expand-rail .yp-header-left,
html.yp-subsite-context-bar-animate-ready .yp-subsite-context-bar__expand-rail .yp-header-center {
  display: none !important;
}

body.yooadmin-theme-yooadmin-studio-hub html.yp-subsite-context-bar-animate-ready .yp-subsite-context-bar__expand-rail .yp-header-right {
  padding-inline-end: 16px !important;
  padding-right: 16px !important;
}

html.yp-subsite-context-bar-is-collapsed .yp-subsite-context-bar__expand-rail .yp-subsite-context-bar__expand-row.yp-header,
body.yp-subsite-context-bar-is-collapsed .yp-subsite-context-bar__expand-rail .yp-subsite-context-bar__expand-row.yp-header {
  min-height: 0;
  height: 0;
  align-items: flex-start;
  padding: 0 !important;
  margin-block: 0 !important;
  margin-inline: auto !important;
  max-width: var(--ysh-layout-max, none);
  width: 100%;
  box-sizing: border-box;
  box-shadow: none !important;
  background: transparent !important;
  pointer-events: none;
}

html.yp-subsite-context-bar-is-collapsed .yp-subsite-context-bar__expand-rail .yp-header-left,
html.yp-subsite-context-bar-is-collapsed .yp-subsite-context-bar__expand-rail .yp-header-center,
body.yp-subsite-context-bar-is-collapsed .yp-subsite-context-bar__expand-rail .yp-header-left,
body.yp-subsite-context-bar-is-collapsed .yp-subsite-context-bar__expand-rail .yp-header-center {
  display: none !important;
}

html.yp-subsite-context-bar-is-collapsed .yp-subsite-context-bar__expand-rail .yp-header-right,
body.yp-subsite-context-bar-is-collapsed .yp-subsite-context-bar__expand-rail .yp-header-right,
html.yp-subsite-context-bar-animate-ready .yp-subsite-context-bar__expand-rail .yp-header-right {
  display: flex;
  flex-shrink: 0;
  padding-right: 60px !important;
  justify-content: flex-end;
  align-items: flex-start;
  pointer-events: none;
}

html.yp-subsite-context-bar-is-collapsed .yp-subsite-context-bar__expand-rail .yp-header-right,
body.yp-subsite-context-bar-is-collapsed .yp-subsite-context-bar__expand-rail .yp-header-right {
  pointer-events: auto;
}

body.yooadmin-theme-yooadmin-studio-hub html.yp-subsite-context-bar-is-collapsed .yp-subsite-context-bar__expand-rail .yp-header-right,
body.yooadmin-theme-yooadmin-studio-hub body.yp-subsite-context-bar-is-collapsed .yp-subsite-context-bar__expand-rail .yp-header-right {
  padding-inline-end: 16px !important;
  padding-right: 16px !important;
}

html.yp-subsite-context-bar-is-collapsed .yp-subsite-context-bar__expand,
body.yp-subsite-context-bar-is-collapsed .yp-subsite-context-bar__expand,
html.yp-subsite-context-bar-animate-ready.yp-subsite-context-bar-is-collapsing .yp-subsite-context-bar__expand {
  pointer-events: auto;
  align-self: flex-start;
  transform: translateY(0);
  opacity: 1;
}

.yp-subsite-context-bar__expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 4px 6px;
  border: 0;
  border-radius: 0 0 6px 6px;
  cursor: pointer;
  line-height: 1;
  background: color-mix(in srgb, var(--yp-primary, var(--yooadmin-primary, #eda934)) 14%, #fff 86%);
  color: color-mix(in srgb, var(--yp-primary, var(--yooadmin-primary, #eda934)) 72%, #3d2800 28%);
  border-bottom: 1px solid color-mix(in srgb, var(--yp-primary, var(--yooadmin-primary, #eda934)) 32%, rgba(0, 0, 0, 0.06));
  border-left: 1px solid color-mix(in srgb, var(--yp-primary, var(--yooadmin-primary, #eda934)) 32%, rgba(0, 0, 0, 0.06));
  border-right: 1px solid color-mix(in srgb, var(--yp-primary, var(--yooadmin-primary, #eda934)) 32%, rgba(0, 0, 0, 0.06));
  box-sizing: border-box;
  transform: translateY(calc(-100% - 1px));
  opacity: 0;
}

html.yp-subsite-context-bar-animate-ready .yp-subsite-context-bar__expand {
  transition:
    transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.24s ease,
    color 0.22s ease;
}

html.yp-subsite-context-bar-animate-ready.yp-subsite-context-bar-is-expanding .yp-subsite-context-bar__expand {
  transform: translateY(calc(-100% - 1px));
  opacity: 0;
  pointer-events: none;
}

html[data-yooadmin-studio-color-mode-effective="dark"] .yp-subsite-context-bar__expand,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .yp-subsite-context-bar__expand {
  background: color-mix(in srgb, var(--yp-primary, var(--yooadmin-primary, #eda934)) 22%, #1c1f26 78%);
  border-color: color-mix(in srgb, var(--yp-primary, var(--yooadmin-primary, #eda934)) 40%, #3d424d);
  color: color-mix(in srgb, var(--yp-primary, var(--yooadmin-primary, #eda934)) 58%, #f5f5f5 42%);
}

.yp-subsite-context-bar__expand .dashicons {
  font-size: 18px;
  width: 18px;
  height: 18px;
  line-height: 18px;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

html.yp-subsite-context-bar-animate-ready.yp-subsite-context-bar-is-expanding .yp-subsite-context-bar__expand .dashicons {
  transform: rotate(180deg);
}

.yp-subsite-context-bar__expand:hover,
.yp-subsite-context-bar__expand:focus-visible {
  color: var(--yp-primary, var(--yooadmin-primary, #eda934));
  outline: none;
}

#yps-sidebar .yp-subsite-context-bar,
#yps-sidebar .yp-subsite-context-bar__row,
#yps-sidebar .yp-subsite-context-bar__expand-rail {
  display: none !important;
}

[dir="rtl"] #yp-subsite-context-bar .yp-header-left {
  padding-left: 0 !important;
  padding-right: 8px !important;
}

[dir="rtl"] #yp-subsite-context-bar a.yp-subsite-context-bar__back .dashicons {
  transform: scaleX(-1);
}

body.yp-has-subsite-context-bar .yp-header-wrapper--subsite-context {
  margin-top: 0;
  top: auto;
  overflow: visible;
}

html.yp-subsite-context-bar-is-collapsed .yp-header-wrapper--subsite-context,
body.yp-subsite-context-bar-is-collapsed .yp-header-wrapper--subsite-context {
  overflow: visible;
}

@media screen and (max-width: 782px) {
  #yp-subsite-context-bar .yp-header-left {
    padding-left: 12px !important;
    gap: 10px;
  }

  #yp-subsite-context-bar .yp-header-right,
  .yp-subsite-context-bar__expand-rail .yp-header-right {
    padding-right: 12px !important;
  }

  body.yooadmin-theme-yooadmin-studio-hub #yp-subsite-context-bar .yp-header-right,
  body.yooadmin-theme-yooadmin-studio-hub .yp-subsite-context-bar__expand-rail .yp-header-right {
    padding-inline-end: 12px !important;
    padding-right: 12px !important;
  }

  [dir="rtl"] #yp-subsite-context-bar .yp-header-left {
    padding-right: 12px !important;
  }

  #yp-subsite-context-bar .yp-subsite-context-bar__text {
    font-size: 11px;
  }
}

@media screen and (max-width: 480px) {
  #yp-subsite-context-bar .yp-header-left {
    padding-left: 8px !important;
    gap: 6px;
  }

  #yp-subsite-context-bar .yp-header-right,
  .yp-subsite-context-bar__expand-rail .yp-header-right {
    padding-right: 8px !important;
  }

  body.yooadmin-theme-yooadmin-studio-hub #yp-subsite-context-bar .yp-header-right,
  body.yooadmin-theme-yooadmin-studio-hub .yp-subsite-context-bar__expand-rail .yp-header-right {
    padding-inline-end: 8px !important;
    padding-right: 8px !important;
  }

  [dir="rtl"] #yp-subsite-context-bar .yp-header-left {
    padding-right: 8px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.yp-subsite-context-bar-animate-ready #yp-subsite-context-bar.yp-subsite-context-bar,
  html.yp-subsite-context-bar-animate-ready #yp-subsite-context-bar .yp-subsite-context-bar__row,
  html.yp-subsite-context-bar-animate-ready .yp-subsite-context-bar__expand,
  html.yp-subsite-context-bar-animate-ready .yp-subsite-context-bar__expand .dashicons {
    transition: none !important;
  }
}