/* Octopus Site Header — fonte compartilhada com a distribuição WordPress.
   O breakpoint estrutural de 64rem pertence ao contrato deste componente. */
.site-topbar {
  --header-surface: var(--color-zinc-900);
  --header-content: var(--color-zinc-50);
  --header-muted: var(--color-zinc-400);
  --header-nav-active: #FFFFFF;
  --header-hover: var(--color-zinc-800);
  --header-action: var(--color-orange-400);
  --header-action-hover: var(--color-orange-500);
  --header-action-pressed: var(--color-orange-600);
  --header-action-content: var(--color-icon-on-action);
  --header-layer: 200;
  --header-menu-layer: 1;
  --header-container: 86.25rem;
  --header-height: calc(var(--control-height-lg) + 2 * var(--primitive-space-300));
  --header-logo-height: 1.75rem;
  --header-logo-width: calc(var(--header-logo-height) * 118.17 / 36.91);
  --header-submenu-width: 12.5rem;
  --header-submenu-radius: 12px;
  --header-offset: 0px;
  position: sticky; top: var(--header-offset); z-index: var(--header-layer);
  background: var(--header-surface); color: var(--header-content);
  box-shadow: var(--elevation-raised); font-family: var(--font-sans);
}
body.admin-bar .site-topbar { --header-offset: var(--wp-admin--admin-bar--height, 32px); }
.site-topbar .site-topbar__inner {
  box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: var(--primitive-space-300); width: 100%; max-width: var(--header-container);
  margin-inline: auto; padding-inline: var(--primitive-space-300);
  min-height: var(--header-height);
}
.site-topbar .site-brand { display: inline-flex; align-items: center; justify-self: start; min-width: 0; color: var(--header-content); }
.site-topbar .site-brand img { height: var(--header-logo-height); max-width: 100%; width: auto; display: block; }
.site-topbar .site-brand__mark { display: block; height: var(--header-logo-height); width: var(--header-logo-width); max-width: 100%; background: var(--header-content); mask: var(--header-logo) left center / contain no-repeat; }
.site-topbar .site-topbar__panel { display: contents; }
.site-topbar .site-nav { justify-self: center; min-width: 0; }
.site-topbar .site-nav__list { display: flex; align-items: center; gap: var(--primitive-space-300); margin: 0; padding: 0; list-style: none; }
.site-topbar .menu-item { position: relative; margin: 0; }
/* Center links and disclosure controls together; inline baselines differ. */
@media (min-width:64rem) {
  .site-topbar.is-enhanced .site-nav__list > .menu-item { display:flex; align-items:center; }
  /* Offset the two padding layers so submenu text aligns with its parent. */
  .site-topbar.is-enhanced .site-nav__list > .menu-item > .sub-menu {
    left:calc(0px - var(--space-component-xs) - var(--space-component-sm));
    top:calc(50% + var(--header-height) / 2 - var(--space-component-xs));
  }
  /* Keep the pointer inside the submenu while crossing from the parent link. */
  .site-topbar.is-enhanced .site-nav__list > .menu-item > .sub-menu::before {
    content:""; position:absolute; inset-inline:0; bottom:100%;
    height:calc((var(--header-height) - var(--control-height-md)) / 2 - var(--space-component-xs));
  }
}
.site-topbar .site-nav a, .site-topbar .site-login {
  display: inline-flex; align-items: center; min-height: var(--control-height-md);
  color: var(--header-muted); text-decoration: none;
  font-size: var(--type-body-secondary-size); font-weight: var(--type-action-weight);
  line-height: var(--type-body-secondary-leading);
}
.site-topbar .site-login { color: var(--header-content); }
.site-topbar .site-nav a { font-size:var(--type-body-size); line-height:var(--type-body-leading); }
.site-topbar :is(.site-nav a, .site-login):hover,
.site-topbar .site-nav [aria-current="page"], .site-topbar .current-menu-item > a,
.site-topbar .current-menu-ancestor > a { color: var(--header-nav-active); text-decoration: none; }
.site-topbar :is(a, button):focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 3px; }
.site-topbar .sub-menu {
  list-style: none; margin: 0; padding: var(--space-component-xs);
  background: var(--header-surface); border-radius: var(--header-submenu-radius); box-shadow: var(--elevation-raised);
}
.site-topbar.is-enhanced .sub-menu { position: absolute; top: 100%; left: 0; z-index: var(--header-menu-layer); min-width: var(--header-submenu-width); max-width: min(24rem, 90vw); }
.site-topbar .sub-menu[hidden], .site-topbar .site-topbar__panel[hidden] { display: none; }
.site-topbar .sub-menu a { width: 100%; box-sizing: border-box; padding: var(--space-component-xs) var(--space-component-sm); border-radius: var(--shape-radius-component); overflow-wrap: anywhere; }
.site-topbar .sub-menu a:hover { background: var(--header-hover); }
.site-topbar .site-topbar__actions { display: flex; align-items: center; justify-self: end; gap: var(--space-component-sm); }
/* Managed header: logo left, centered navigation and up to two actions right.
   DOM order matches visual/keyboard order; long menus wrap instead of overflowing. */
.site-topbar--managed .site-topbar__actions { justify-self:end; justify-content:flex-end; flex-wrap:wrap; min-width:0; max-width:100%; }
.site-topbar--managed .site-nav { justify-self:center; }
.site-topbar--managed .site-nav__list { flex-wrap:wrap; justify-content:center; gap:var(--space-component-sm) var(--primitive-space-300); }
.site-topbar--managed .site-topbar__actions:empty { display:none; }
.site-topbar--managed .site-topbar__actions > span { min-width:0; max-width:100%; }
.site-topbar.site-topbar--managed .site-topbar__cta { max-width:min(20rem,100%); min-height:var(--control-height-md); padding-block:var(--space-component-xs); white-space:normal; overflow-wrap:anywhere; height:auto; }
.site-topbar.site-topbar--managed .site-topbar__cta .octopus-button__label { min-width:0; white-space:normal; overflow-wrap:anywhere; }
.site-topbar .site-header-control {
  appearance: none; display: inline-flex; justify-content: center; align-items: center;
  flex: none; width: var(--control-height-lg); height: var(--control-height-lg); padding: 0;
  border: 0; border-radius: var(--shape-radius-component); background: transparent; color: var(--header-content);
}
.site-topbar .site-header-control:hover { background: var(--header-hover); }
.site-topbar .site-header-control svg { width: var(--space-component-sm); height: var(--space-component-sm); }
.site-topbar .site-submenu-indicator { display:inline-flex; align-items:center; justify-content:center; flex:none; width:var(--control-height-md); height:var(--control-height-md); pointer-events:none; }
.site-topbar .site-submenu-indicator svg { width:var(--space-component-sm); height:var(--space-component-sm); }
.site-topbar a[aria-expanded="true"] + .site-submenu-indicator svg { transform:rotate(180deg); }
.site-topbar .site-topbar__toggle { display: none; justify-self: end; }
.site-topbar .site-topbar__toggle [data-icon-close], .site-topbar .site-topbar__toggle[aria-expanded="true"] [data-icon-menu] { display: none; }
.site-topbar .site-topbar__toggle[aria-expanded="true"] [data-icon-close] { display: inline-flex; }
/* O contexto Action é local: os estados do primary permanecem Lima no header. */
.site-topbar .site-topbar__cta {
  --color-action-primary: var(--header-action);
  --color-action-primary-hover: var(--header-action-hover);
  --color-action-primary-pressed: var(--header-action-pressed);
  --color-text-on-action: var(--header-action-content);
  --color-text-primary: var(--header-content);
  --color-text-action: var(--header-action);
  --color-border-action: var(--header-action);
  --color-bg-surface: var(--header-hover);
  --color-bg-sunken: var(--header-hover);
  --color-action-primary-subtle: color-mix(in srgb, var(--header-action) 16%, transparent);
}
.site-topbar .site-topbar__cta:not(.octopus-button) {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--control-height-md); padding: 0 var(--space-component-sm);
  border: 1px solid var(--color-action-primary); border-radius: var(--shape-radius-component);
  background: var(--color-action-primary); color: var(--color-text-on-action);
  font-size: var(--type-action-size); font-weight: var(--type-action-weight); line-height: var(--type-action-leading);
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
}
.site-topbar .site-topbar__cta:not(.octopus-button):hover:not([aria-disabled="true"]) { background: var(--color-action-primary-hover); border-color: var(--color-action-primary-hover); }
.site-topbar .site-topbar__cta:not(.octopus-button):active:not([aria-disabled="true"]) { background: var(--color-action-primary-pressed); border-color: var(--color-action-primary-pressed); }
@media (max-width: 63.999rem) {
  .site-topbar .site-topbar__inner { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: var(--header-height) auto; gap: 0 var(--space-component-sm); }
  .site-topbar.is-enhanced .site-topbar__toggle { display: inline-flex; }
  .site-topbar .site-topbar__panel { display: grid; grid-column: 1 / -1; gap: var(--space-component-sm); padding-block: var(--space-component-sm); min-width: 0; }
  .site-topbar.is-enhanced .site-topbar__panel { max-height: calc(100dvh - var(--header-offset) - var(--header-height)); overflow-y: auto; overscroll-behavior: contain; }
  .site-topbar .site-nav, .site-topbar .site-topbar__actions { justify-self: stretch; }
  .site-topbar .site-nav__list { display: block; }
  .site-topbar .site-nav a { min-height: var(--control-height-lg); overflow-wrap: anywhere; }
  .site-topbar .site-nav__list > .menu-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .site-topbar.is-enhanced .sub-menu { position: static; grid-column: 1 / -1; min-width: 0; max-width: 100%; box-shadow: none; background: var(--header-hover); }
  .site-topbar .site-topbar__actions { flex-wrap: wrap; justify-content: space-between; }
  .site-topbar .site-submenu-indicator { width: var(--control-height-lg); height: var(--control-height-lg); }
}
@media (max-width: 600px) { body.admin-bar .site-topbar { --header-offset: 0px; } }
@media (prefers-reduced-motion: reduce) { .site-topbar .site-topbar__cta { transition: none; } }