/* Adjacent company and section rows share one surface-matched glass layer. */
.socra-context-header[data-section-header] {
  flex: none;
}
.socra-reading-company {
  position: relative;
  z-index: 1;
  background: transparent;
}
[data-section-header] .socra-header-row {
  min-height: 56px;
  gap: 12px;
}
[data-section-header] > .socra-header-row {
  min-height: 56px;
  background: transparent;
  border-top: 1px solid color-mix(in srgb, currentColor 8%, transparent);
  border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent);
}
[data-section-header] .socra-header-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.025em;
}
[data-section-header] .socra-header-title a,
[data-section-header] .socra-header-identity a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
}
[data-section-header] .socra-header-identity a {
  font-size: 17px;
  font-weight: 600;
}
[data-section-header] .socra-reading-company .socra-header-title {
  font-size: 14px;
  font-weight: 500;
}
[data-section-header] .socra-header-row > .socra-header-trigger {
  order: 3;
}
[data-section-header] .socra-header-actions {
  gap: 8px;
}
@media (max-width: 599px) {
  [data-section-header] .socra-header-row {
    padding-inline: 16px;
    gap: 8px;
  }
  [data-section-header] .socra-header-title {
    font-size: 17px;
  }
}
@media (forced-colors: active) {
  [data-section-header] {
    background: Canvas !important;
  }
  [data-section-header] [data-reading-header-glass] {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-section-header] {
    background: var(--socra-header-surface, var(--socra-background)) !important;
  }
}

/* The company and section rows span the page above the document navigation. */
.socra-reading-shell {
  min-width: 0;
  --socra-reading-header-offset: 112px;
}

[data-section-header][data-navigation-open='true'] {
  background: var(--socra-header-surface, var(--socra-background)) !important;
}
[data-section-header][data-navigation-open='true'] [data-reading-header-glass] {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.socra-reading-shell :is(h1, h2, h3, h4, h5, h6)[id] {
  scroll-margin-top: calc(128px + env(safe-area-inset-top, 0px));
}
@media (min-width: 1180px) {
  .socra-reading-shell > [data-section-header] .socra-header-trigger {
    display: none;
  }
}

/* Physical and keyboard order agree across every marketing header. */
.socra-header-row[data-navigation-position='end'] > .socra-header-trigger {
  order: 3;
}
@media (max-width: 599px) {
  [data-section-header] .socra-reading-company .socra-header-identity span {
    display: none;
  }
}

[data-section-header] .socra-header-identity a {
  min-width: 44px;
  justify-content: center;
}
@media (max-width: 359px) {
  [data-section-header] .socra-reading-company .socra-header-title {
    display: none;
  }
  [data-section-header] .socra-header-row {
    padding-inline: 8px;
  }
  [data-section-header] .socra-header-actions {
    gap: 4px;
  }
}

.socra-header-section-toggle svg {
  width: 20px;
  height: 20px;
  transition: transform 120ms;
}
.socra-header-section-toggle[aria-expanded='true'] svg {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
  .socra-header-section-toggle svg {
    transition: none;
  }
}

/* Match the production marketing header: full-width rows with 40px desktop gutters. */
@media (min-width: 1180px) {
  [data-section-header] .socra-header-row {
    padding-inline: 40px;
  }
}

.socra-reading-shell [data-slot='sidebar-inner'] {
  background: var(--workspace-docs-background, var(--socra-background));
}

/* Compact navigation is a full viewport modal across every reading and marketing surface. */
.socra-fullscreen-navigation-backdrop { position: fixed; inset: 0; z-index: 1400; background: var(--socra-background, #181a1c); }
.socra-fullscreen-navigation {
  position: fixed; inset: 0; z-index: 1400; width: 100vw; height: 100dvh;
  display: flex; flex-direction: column; margin: 0; border: 0; border-radius: 0; corner-shape: squircle;
  background: var(--socra-background, #181a1c); color: var(--socra-foreground, #f5f7fa);
  outline: none; overflow: hidden;
}
.socra-fullscreen-navigation-bar {
  display: flex; justify-content: flex-end; align-items: center; flex-shrink: 0;
  position: sticky; inset-block-start: 0; z-index: 1; background: inherit;
  min-height: calc(56px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right, 0px)) 0 16px;
}
.socra-fullscreen-navigation-content {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 16px max(40px, env(safe-area-inset-right, 0px)) max(40px, env(safe-area-inset-bottom, 0px));
}
.socra-fullscreen-navigation-content[data-layout='sidebar'] { padding: 0 16px 16px; overflow: hidden; }
.socra-fullscreen-navigation-links { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.socra-fullscreen-navigation-links > :is(a, button),
.socra-fullscreen-navigation-links > details > summary {
  display: flex; align-items: center; min-height: 48px; font-size: 1.75rem;
  line-height: 1.25; font-weight: 600; letter-spacing: -.02em; color: inherit;
  text-decoration: none; padding-block: 4px;
}
.socra-fullscreen-navigation a:focus-visible, .socra-fullscreen-navigation button:focus-visible,
.socra-fullscreen-navigation summary:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.socra-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.socra-header-section-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}
.socra-header-section-title[aria-expanded='true'] svg { transform: rotate(180deg); }
.socra-header-section-title:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }