/**
 * Data Flows — Supplementary Styles
 *
 * Extends style.css with component-specific rules that benefit
 * from being loaded after the base stylesheet.
 * Also serves as the Block Editor stylesheet (enqueued via enqueue_editor_styles()).
 *
 * @package DataFlows
 * @since   1.0.0
 */

/* ==========================================================================
   Search Form
   ========================================================================== */

.search-form {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.search-form label {
  flex: 1 1 100%;
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.search-field {
  flex: 1;
  min-width: 200px;
}

/* ==========================================================================
   Author Box
   ========================================================================== */

.author-box {
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-top: var(--space-12);
}

.author-box__avatar img {
  border-radius: var(--radius-full);
  width: 80px;
  height: 80px;
  object-fit: cover;
}

.author-box__name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-heading);
  margin-bottom: var(--space-2);
}

.author-box__bio {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* ==========================================================================
   Tags
   ========================================================================== */

.entry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-6);
  font-size: var(--font-size-sm);
}

.entry-tags a {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: var(--font-size-sm);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.entry-tags a:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

.breadcrumbs {
  margin-bottom: var(--space-4);
}

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  padding: 0;
  margin: 0;
}

.breadcrumbs__list a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.breadcrumbs__list a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* ==========================================================================
   Post Navigation (prev/next inside single post)
   ========================================================================== */

.post-navigation {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: var(--border-width) solid var(--color-border);
}

.nav-previous,
.nav-next {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nav-next { text-align: right; }

.nav-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.nav-title {
  font-weight: var(--font-weight-bold);
  color: var(--color-heading);
}

/* ==========================================================================
   Gutenberg editor overrides (body is .editor-styles-wrapper)
   ========================================================================== */

.editor-styles-wrapper {
  font-family: var(--font-sans);
  color: var(--color-text);
  background-color: var(--color-background);
}

.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4,
.editor-styles-wrapper h5,
.editor-styles-wrapper h6 {
  color: var(--color-heading);
  font-family: var(--font-sans);
}

/* ==========================================================================
   Accessibility — Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}