/* =============================================
   Page Header Component
   ============================================= */

/* Anti-FOUC safety net */
html {
  visibility: visible;
}

.header {
  width: var(--content-width);
  margin: 0 auto;
  padding-top: var(--spacing-2xl);
}

.header-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  padding-bottom: var(--spacing-sm);
  border-bottom: 3px solid var(--black);
}

.header-title {
  font-weight: 800;
  text-transform: uppercase;
}

.header-subtitle {
  white-space: nowrap;
  font-weight: 800;
}

/* ─── Tablet ─── */
@media (max-width: 1024px) {
  .header {
    padding-top: var(--spacing-lg);
  }

  .header-wrapper {
    flex-direction: column;
    align-items: flex-start;

  }

  .header-title,
  .header-subtitle p {
    text-align: left !important;
  }
}

/* ─── Mobile ─── */
@media (max-width: 768px) {
  .header {
    padding-top: var(--spacing-lg);
  }

  .header-wrapper {
    flex-direction: column;
    align-items: flex-start;

  }

  .header-title,
  .header-subtitle p {
    text-align: left !important;
  }

}

/* ─── Compact variant — used on pages that render breadcrumbs above the header ─── */
/* Placed after the media queries so it wins at every breakpoint (same specificity). */
.header--compact {
  padding-top: var(--spacing-sm);
}