/* Shared layout primitives; component-specific rules stay in their own files. */
.section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;

  gap: var(--space-3) var(--space-6);

  min-width: 0;

  padding-bottom: var(--space-4);

}

.section-heading > :first-child {
  min-width: 0;
  margin: 0;
}

.arrow-link {
  flex: 0 0 auto;

  width: fit-content;

  display: inline-flex;
  align-items: center;

  gap: var(--space-2);

  text-decoration: none;

  transition:
    color var(--motion-ui),
    gap var(--motion-ui);
}

.arrow-link:hover,
.arrow-link:focus-visible {
  gap: var(--space-3);
}


.skip-link { position: fixed; top: var(--space-3); left: var(--page-padding); z-index: 200; padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); background: var(--surface-overlay); box-shadow: var(--shadow-md); transform: translateY(-200%); }
.skip-link:focus { transform: none; }

.theme-brand { display: block; }

.section-heading { overflow-wrap: anywhere; }

/* Shared page boundary spacing, independent of the final component or pagination. */
main { padding-block: var(--page-space-start) var(--page-space-end); }

/* Both logo sources stay loaded. Theme changes only choose the visible image. */
.theme-brand .theme-logo-image[data-logo-scheme="dark"] { display: none; }
html[data-theme="dark"] .theme-brand .theme-logo-image[data-logo-scheme="light"] { display: none; }
html[data-theme="dark"] .theme-brand .theme-logo-image[data-logo-scheme="dark"] { display: block; }