/**
 * P1EditorHeader — CSS Module
 *
 * Translates all inline styles from the prototype's HeaderBar component
 * into named CSS classes. All values use var(--pds-*) with oklch/literal
 * fallbacks drawn from the prototype's `c` and `t` objects.
 */

/* ── Size tokens ──────────────────────────────────────────────────────── */

:root {
  --p1-header-h: 60px; /* single knob — change this to resize the whole bar */
  --p1-size-lg: calc(var(--p1-header-h) * 0.65);  /* 39px — controls + user avatar */
  --p1-size-sm: calc(var(--p1-header-h) * 0.467); /* 28px — divider + collab avatar + logo */
}

/* ── Outer shell ──────────────────────────────────────────────────────── */

.header {
  height: var(--p1-header-h);
  background: var(--pds-color-surface-default, oklch(1 0 0));
  border-bottom: 1px solid oklch(0.96 0 0); /* c.borderSubtle — no direct token */
  display: flex;
  align-items: center;
  padding: 0 var(--pds-spacing-m, 1rem);
  gap: var(--pds-spacing-m, 1rem);
  flex-shrink: 0;
  position: relative;
  z-index: 20;
  font-family: var(--pds-typography-ff-default, 'Inter', sans-serif);
}

/* ── Left section: logo + divider + WorkstreamSwitcher + compare ──────── */

.left {
  display: flex;
  align-items: center;
  gap: 0.64rem;
}

/* ── Logo ─────────────────────────────────────────────────────────────── */
/* PantheonLogo displayType="icon" plus a locally-rendered "P1" wordmark.
   The PDS component defaults to 3.052rem icon height; we scale it down
   proportionally to --p1-header-h. */

.logoLink {
  flex-shrink: 0;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  transition: opacity 0.2s cubic-bezier(0.2, 0, 0, 1);
}

.logoLink:hover {
  opacity: 0.7;
}

/* When no href (no siteId configured), suppress interactive affordances */
.logoLink:not([href]),
.logoLink:not([href]) .logo {
  cursor: default;
}

.logoLink:not([href]):hover {
  opacity: 1;
}

.logoLink .logo {
  cursor: pointer;
}

.logo {
  flex-shrink: 0;
  user-select: none;
  cursor: default;
}

/* Scale the Pantheon bolt icon proportionally with header height */
.logo svg,
img.logo {
  height: var(--p1-size-sm);
  width: auto;
}

.logoLockup {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* Scale sub-brand wordmark proportionally with header height */
.subBrand {
  font-size: calc(var(--p1-header-h) * 0.367);
  font-weight: 600;
  line-height: 1;
  color: var(--pds-color-foreground-default);
  user-select: none;
}

.logoLinkSaving {
  opacity: 0.5;
  pointer-events: none;
  cursor: progress;
}

/* ── Site label ───────────────────────────────────────────── */

.siteLabel {
  display: inline-flex;
  align-items: center;
  gap: var(--pds-spacing-2xs, 0.5rem);
  font-family: var(--pds-typography-ff-default, 'Inter', sans-serif);
  font-size: var(--pds-typography-size-s, 0.875rem);
  font-weight: var(--pds-typography-fw-medium, 500);
  color: var(--pds-color-foreground-default, oklch(0.2046 0 0));
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
}

.siteName {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* ── Breadcrumb separator between site label and page selector ── */

.breadcrumbSeparator {
  color: var(--pds-color-foreground-default-secondary, oklch(0.65 0 0));
  font-size: var(--pds-typography-size-s, 0.875rem);
  flex-shrink: 0;
  user-select: none;
  line-height: 1;
}

/* ── Vertical divider between site selector and workstream switcher ── */
/* Prototype: <div style={{ width: 1, height: 20, background: c.borderSubtle }} /> */

.divider {
  width: 1px;
  height: var(--p1-size-sm);
  background: var(--pds-color-border-input, oklch(0.8853 0 0));
  flex-shrink: 0;
}

/* ── Center section: page selector ──────────────────────────────────── */

.center {
  flex: 1;
  display: flex;
  justify-content: center;
  position: relative;
}

/* ── Page selector button group ────────────────────────────────────────────── */

.pageSelectorGroup {
  display: inline-flex;
  align-items: center;
  /* Shrinks (ellipsis on the page path) rather than widening the header. */
  flex: 0 1 auto;
  min-width: 0;
  gap: var(--pds-spacing-2xs, 0.5rem);
}

/* ── Page selector button ────────────────────────────────────────────── */
/* Mirrors the WorkstreamSwitcher trigger styling */

.pageSelector {
  display: inline-flex;
  align-items: center;
  gap: var(--pds-spacing-2xs, 0.5rem);
  height: var(--p1-size-lg);
  min-width: 0;
  padding: var(--pds-spacing-2xs, 0.5rem) 0.64rem;
  background: transparent;
  border: 1px solid var(--pds-color-border-input, oklch(0.8853 0 0));
  border-radius: var(--pds-border-radius-button, 3.5rem);
  font-family: var(--pds-typography-ff-default, 'Inter', sans-serif);
  font-size: var(--pds-typography-size-s, 0.875rem);
  font-weight: var(--pds-typography-fw-medium, 500);
  color: var(--pds-color-foreground-default, oklch(0.2046 0 0));
  cursor: pointer;
  line-height: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: var(--pds-animation-transition-button);
}

.pageSelector:hover,
.pageSelector[aria-expanded='true'] {
  background: oklch(0.96 0 0); /* bgSubtle */
  border-color: oklch(0.75 0 0); /* borderStrong */
}

/* ── External link button ──────────────────────────────────────────────── */

.externalLinkButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--p1-size-lg);
  height: var(--p1-size-lg);
  padding: var(--pds-spacing-2xs, 0.5rem);
  background: transparent;
  border: none;
  border-radius: var(--pds-border-radius-button, 3.5rem);
  color: var(--pds-color-foreground-default, oklch(0.2046 0 0));
  cursor: pointer;
  text-decoration: none;
  transition: var(--pds-animation-transition-button);
  flex-shrink: 0;
}

.externalLinkButton:hover {
  background: oklch(0.96 0 0); /* bgSubtle */
}

.externalLinkButtonDisabled {
  color: var(--pds-color-foreground-subtle, oklch(0.55 0 0));
  cursor: not-allowed;
}

.externalLinkButtonDisabled:hover {
  background: transparent;
}

/* ── Spacer ──────────────────────────────────────────────────────────── */

.spacer {
  flex: 1;
}

/* ── Live collaborators ─────────────────────────────────────────────── */
.collaborators {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* ── Zappy toggle ──────────────────────────────────────────────────────── */

/* PDS's tooltip trigger fills its parent, so this holds it to the button's size. */
.aiToggleTip {
  display: inline-flex;
  flex-shrink: 0;
}

.aiToggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--p1-size-lg);
  height: var(--p1-size-lg);
  padding: 0.375rem;
  background: transparent;
  border: none;
  border-radius: 10px;
  color: var(--pds-color-foreground-default);
  cursor: pointer;
}

.aiToggle:hover {
  background: var(--pds-color-interactive-background-hover);
}

/* Listed with :hover, which would otherwise outrank it and lighten the open chip. */
.aiToggleActive,
.aiToggleActive:hover {
  background: var(--pds-color-interactive-background-active);
}

/* ── User avatar ────────────────────────────────────────────────────── */

.userAvatar {
  flex-shrink: 0;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  border-radius: 50%;
}

.userAvatar :global(.pds-avatar) {
  height: var(--p1-size-lg);
  width: var(--p1-size-lg);
}

.userAvatar :global(.pds-avatar__content),
.userAvatar :global(.pds-avatar__gradient),
.userAvatar :global(.pds-avatar__image) {
  width: 100%;
  height: 100%;
}

.collaborators :global(.pds-avatar) {
  height: var(--p1-size-sm);
  width: var(--p1-size-sm);
}

.collaborators :global(.pds-avatar__content),
.collaborators :global(.pds-avatar__image) {
  width: 100%;
  height: 100%;
}

/* ── Dropdown menus (site selector + user account) ─────────────────── */

.dropdownMenu {
  min-width: 180px;
  background: var(--pds-color-surface-default, oklch(1 0 0));
  border: 1px solid var(--pds-color-border-default, oklch(0.9401 0 0));
  border-radius: var(--pds-border-radius-container, 0.375rem);
  box-shadow: var(
    --pds-elevation-overlay,
    0px 0px 0px 1px rgba(0, 0, 0, 0.08),
    0px 1px 1px 0px rgba(0, 0, 0, 0.02),
    0px 8px 16px -4px rgba(0, 0, 0, 0.04),
    0px 24px 32px -8px rgba(0, 0, 0, 0.06)
  );
  padding: 0.41rem;
}

.dropdownUserInfo {
  padding: 0.512rem 0.64rem;
  font-family: var(--pds-typography-ff-default, 'Inter', sans-serif);
  font-size: var(--pds-typography-size-s, 0.875rem);
  font-weight: var(--pds-typography-fw-medium, 500);
  color: var(--pds-color-foreground-default, oklch(0.2046 0 0));
  border-bottom: 1px solid var(--pds-color-border-default, oklch(0.9401 0 0));
  margin-bottom: var(--pds-spacing-4xs, 0.25rem);
}

.logoutStatus {
  position: absolute;
  top: 100%;
  right: var(--pds-spacing-s, 0.8rem);
  z-index: 1;
  max-width: 24rem;
  margin: 0;
  padding: 0.512rem 0.64rem;
  font-family: var(--pds-typography-ff-default, 'Inter', sans-serif);
  font-size: var(--pds-typography-size-xs, 0.75rem);
  line-height: 1.4;
  color: var(--pds-color-foreground-default, oklch(0.2178 0 0));
  background: var(--pds-color-background-default, oklch(1 0 0));
  border: 1px solid var(--pds-color-border-default, oklch(0.9401 0 0));
  border-radius: var(--pds-border-radius-s, 0.25rem);
}

.logoutStatus[data-variant='error'] {
  color: var(--pds-color-foreground-danger, oklch(0.5771 0.2152 27.325));
}

.dropdownMenuItem:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.dropdownMenuItem {
  display: flex;
  align-items: center;
  gap: 0.512rem;
  width: 100%;
  padding: 0.512rem 0.64rem;
  background: transparent;
  border: none;
  border-radius: var(--pds-border-radius-default, 0.188rem);
  font-family: var(--pds-typography-ff-default, 'Inter', sans-serif);
  font-size: var(--pds-typography-size-s, 0.875rem);
  color: var(--pds-color-foreground-default, oklch(0.2046 0 0));
  cursor: pointer;
  text-align: left;
}

.dropdownMenuItem:hover {
  background: var(--pds-color-surface-default-secondary, oklch(0.9702 0 0));
}

/* ── Responsive label text ──────────────────────────────────────────── */
/* Wraps text + trailing chevron in the page selector; hidden on mobile */

.labelText {
  display: contents;
}

/* ── Compare with Live wrapper ──────────────────────────────────────── */

.compareButton {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

/* ── Compact mobile layout (< 768px) ────────────────────────────────── */
/* At mobile widths: icon-only selectors, no Compare button, tighter spacing */

@media (max-width: 767px) {
  .header {
    padding: 0 var(--pds-spacing-xs, 0.5rem);
    gap: var(--pds-spacing-xs, 0.5rem);
  }

  .labelText {
    display: none;
  }
  .siteLabel,
  .breadcrumbSeparator {
    display: none;
  }

  .compareButton {
    display: none;
  }
}